dhre-ui-kit 0.0.40 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -31,6 +31,7 @@
     "react-native-blob-util": "^0.19.11",
     "react-native-calendars": "^1.1306.0",
     "react-native-country-picker-modal": "^2.0.0",
+    "react-native-element-dropdown": "^2.12.1",
     "react-native-gesture-handler": "2.17.0",
     "react-native-otp-verify": "^1.1.8",
     "react-native-paper": "^5.12.5",

package/src/components/button/Button.interface.ts

@@ -1,7 +1,6 @@
 import {ReactElement} from 'react';
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
-
 export interface CustomButtonProps {
   title: string;
   onPress: () => void;
@@ -15,4 +14,6 @@ export interface CustomButtonProps {
   imagePosition?: 'left' | 'right';
   testID?: string;
   disabled?: boolean;
+  disabledColor?: string;
+  disableButtonTitleColor?: string;
 }

package/src/components/button/Button.tsx

@@ -18,6 +18,8 @@ const CustomButton = ({
   titleVariant = 'L2_REGULAR',
   imagePosition = 'right',
   disabled = false,
+  disabledColor,
+  disableButtonTitleColor,
 }: CustomButtonProps) => {
   const {theme} = useTheme();
   return (
@@ -26,7 +28,13 @@ const CustomButton = ({
       style={[
         styles.buttonContainer,
         containerStyle,
-        disabled ? {backgroundColor: theme.SURFACE_DISABLE} : {},
+        disabled
+          ? {
+              backgroundColor: disabledColor
+                ? disabledColor
+                : theme.SURFACE_DISABLE,
+            }
+          : {},
       ]}
       onPress={onPress}
       disabled={disabled}>
@@ -41,7 +49,13 @@ const CustomButton = ({
         style={[
           {color: '#A7A7A7'},
           textStyle,
-          disabled ? {color: theme.CONTENT_DISABLE} : {},
+          disabled
+            ? {
+                color: disableButtonTitleColor
+                  ? disableButtonTitleColor
+                  : theme.CONTENT_DISABLE,
+              }
+            : {},
         ]}
         textColor={titleColor}
       />

package/src/components/countryPicker/CountryPicker.tsx

@@ -37,6 +37,7 @@ interface MobileNumberInputProps {
   getCountryCode: (countryCode: string) => void;
   maxLength: number;
   errorMessage: string;
+  label: string;
 }
 
 const CountryDropDown = ({
@@ -52,11 +53,13 @@ const CountryDropDown = ({
   getCountryCode,
   maxLength,
   errorMessage,
+  label,
 }: MobileNumberInputProps) => {
   const [countryCode, setCountryCode] =
     useState<CountryCode>(defaultCountryCode);
   const [callingCode, setCallingCode] = useState<string>(defaultCallingCode);
   const [pickerVisible, setPickerVisible] = useState<boolean>(false);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
 
   const handleSelect = (country: Country) => {
     setCountryCode(country.cca2);
@@ -82,15 +85,26 @@ const CountryDropDown = ({
             {callingCode}
           </Text>
         </View>
-        <TextInput
-          style={[styles.input, inputStyle]}
-          placeholder={placeholder}
-          keyboardType="phone-pad"
-          value={value}
-          onChangeText={onChangeText}
-          maxLength={maxLength}
-          placeholderTextColor={theme.CONTENT_SECONDRY['light']}
-        />
+        <View style={styles.flex}>
+          {(isFocused || value) && (
+            <CustomTypography
+              variant={'L2_REGULAR'}
+              text={label ?? ''}
+              style={styles.floatingLabel}
+            />
+          )}
+          <TextInput
+            style={[styles.input, inputStyle]}
+            placeholder={!isFocused ? placeholder : ''}
+            keyboardType="phone-pad"
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            maxLength={maxLength}
+            placeholderTextColor={theme.CONTENT_SECONDRY['light']}
+          />
+        </View>
       </View>
       {errorMessage ? (
         <CustomTypography
@@ -98,7 +112,7 @@ const CountryDropDown = ({
           text={errorMessage ?? ''}
           style={{
             ...styles.errorStyle,
-            color: '#EB0542', // need to check with BA
+            color: '#EB0542', // need to check this color with designer
           }}
         />
       ) : null}
@@ -107,11 +121,15 @@ const CountryDropDown = ({
 };
 
 const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
   container: {
     flexDirection: 'row',
     alignItems: 'center',
     borderColor: DHRE_COLORS_TEXT.DH_BLACK,
     borderWidth: 1,
+    height: verticalScale(48),
     borderRadius: moderateScale(8),
     paddingHorizontal: horizontalScale(10),
     paddingVertical: verticalScale(8),
@@ -133,6 +151,16 @@ const styles = StyleSheet.create({
     borderLeftColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
     paddingLeft: horizontalScale(8),
   },
+  floatingLabel: {
+    position: 'absolute',
+    left: horizontalScale(-88),
+    top: verticalScale(-16),
+    fontSize: moderateScale(12),
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingHorizontal: horizontalScale(4),
+    zIndex: 1,
+  },
   errorStyle: {
     marginTop: verticalScale(4),
   },

package/src/components/dropDown/DropDown.tsx

@@ -0,0 +1,139 @@
+import React, {useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+  TextStyle,
+  ImageStyle,
+} from 'react-native';
+import {Dropdown} from 'react-native-element-dropdown';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import theme from '../../theme/themes';
+
+interface CustomDropdownProps {
+  data: {[key: string]: string}[];
+  labelField?: string;
+  valueField?: string;
+  label?: string;
+  placeholder?: string;
+  containerStyle?: ViewStyle;
+  dropdownStyle?: ViewStyle;
+  placeholderStyle?: TextStyle;
+  selectedTextStyle?: TextStyle;
+  iconStyle?: ImageStyle;
+  labelStyle?: TextStyle;
+  defaultValue?: string;
+  iconColor?: string;
+  itemTextStyle?: TextStyle;
+  onValueChange?: (value: string) => void;
+}
+
+const CustomDropdown: React.FC<CustomDropdownProps> = ({
+  data,
+  labelField = 'label',
+  valueField = 'value',
+  label,
+  placeholder,
+  containerStyle,
+  dropdownStyle,
+  placeholderStyle,
+  selectedTextStyle,
+  iconStyle,
+  labelStyle,
+  defaultValue,
+  iconColor,
+  itemTextStyle,
+  onValueChange,
+}) => {
+  const [value, setValue] = useState<string | undefined>(defaultValue);
+  const [isFocus, setIsFocus] = useState<boolean>(false);
+
+  const renderLabel = () => {
+    if (value || isFocus) {
+      return (
+        <Text
+          style={[
+            styles.label,
+            labelStyle,
+            isFocus && {color: theme.BORDER_INVERTED['light']},
+          ]}>
+          {label}
+        </Text>
+      );
+    }
+    return null;
+  };
+
+  const handleValueChange = (item: {[key: string]: string}) => {
+    const newValue = item[valueField];
+    setValue(newValue);
+    setIsFocus(false);
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && renderLabel()}
+      <Dropdown
+        style={[
+          styles.dropdown,
+          dropdownStyle,
+          isFocus && {borderColor: theme.BORDER_INVERTED['light']},
+        ]}
+        placeholderStyle={[styles.placeholderStyle, placeholderStyle]}
+        selectedTextStyle={[styles.selectedTextStyle, selectedTextStyle]}
+        iconStyle={[styles.iconStyle, iconStyle]}
+        data={data ?? []}
+        labelField={labelField}
+        valueField={valueField}
+        placeholder={!isFocus ? placeholder : ''}
+        value={value}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={handleValueChange}
+        iconColor={iconColor}
+        dropdownPosition="bottom"
+        itemTextStyle={itemTextStyle}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.SURFACE_STATIC['light'],
+    marginVertical: verticalScale(4), // External margin
+  },
+  dropdown: {
+    height: verticalScale(48),
+    borderColor: theme.BORDER_PRIMARY['light'],
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: horizontalScale(12),
+    backgroundColor: theme.SURFACE_STATIC['light'],
+  },
+  label: {
+    position: 'absolute',
+    backgroundColor: theme.SURFACE_STATIC['light'],
+    left: horizontalScale(10),
+    top: verticalScale(-8),
+    zIndex: 10,
+    paddingHorizontal: horizontalScale(4),
+    fontSize: verticalScale(12),
+  },
+  placeholderStyle: {
+    fontSize: verticalScale(16),
+  },
+  selectedTextStyle: {
+    fontSize: verticalScale(16),
+  },
+  iconStyle: {
+    width: horizontalScale(20),
+    height: verticalScale(20),
+  },
+});
+
+export default CustomDropdown;

package/src/components/dropDown/index.ts

@@ -0,0 +1 @@
+export {default} from './DropDown';

package/src/components/scrollList/category.tsx

@@ -3,7 +3,7 @@ import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
 import CustomText from '../customText/CustomText';
 
 interface ScrollableListProps {
-  data: {name: string; value: string}[];
+  data: {name: string; value: string}[] | undefined;
   handleSelectCategory: (value: string) => void;
   containerStyle?: object;
   scrollViewContentStyle?: object;
@@ -24,7 +24,7 @@ const ScrollableList = ({
   defaultItemTextColor = 'CONTENT_SECONDRY',
 }: ScrollableListProps) => {
   const [selectedItem, setSelectedItem] = useState<string | null>(
-    data.length > 0 ? data[0].name : null,
+    data && data.length > 0 ? data[0].name : null,
   );
 
   return (

package/src/components/textInput/Textinput.tsx

@@ -58,7 +58,7 @@ const CommonTextInput: React.FC<CommonTextInputProps> = ({
           text={errorMessage ?? ''}
           style={{
             ...styles.errorStyle,
-            color: '#EB0542', // need to check with BA
+            color: '#EB0542', // need to check this color with designer
           }}
         />
       ) : null}
@@ -68,15 +68,22 @@ const CommonTextInput: React.FC<CommonTextInputProps> = ({
 
 const styles = StyleSheet.create({
   input: {
-    marginVertical: verticalScale(12),
+    marginVertical: verticalScale(8),
     backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: 0,
+    height: verticalScale(48),
+    justifyContent: 'center',
   },
   errorInput: {
     marginTop: verticalScale(12),
     backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    paddingVertical: 0,
+    height: verticalScale(48),
+    justifyContent: 'center',
   },
   outlineStyle: {
     borderWidth: 1,
+    height: verticalScale(48),
     borderRadius: moderateScale(8),
   },
   errorStyle: {

package/src/index.ts

@@ -35,9 +35,10 @@ export {default as Category} from './components/scrollList';
 export {default as FeedbackForm} from './components/feedback';
 export {default as CountryPicker} from './components/countryPicker';
 export {default as TextInput} from './components/textInput';
+export {default as DropDown} from './components/dropDown';
 
 export {FONT_STYLES} from './theme/fonts';
-export {FontStyleKey, ThemeKeys} from './utils/appEnum';
+export {FontStyle, Theme} from './utils/appEnum';
 
 export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';
 export {

package/src/theme/fonts.ts

@@ -1,6 +1,6 @@
 import {TextStyle} from 'react-native';
 import {moderateScale, verticalScale} from '../utils/stylehelper';
-import {FontStyleKey} from '../utils/appEnum';
+import {FontStyle} from '../utils/appEnum';
 
 interface FontStyles {
   [key: string]: TextStyle;
@@ -25,48 +25,48 @@ export const serifActivFontfamily: TextStyle = {
 };
 
 export const FONT_STYLES: FontStyles = {
-  [FontStyleKey.H1_BOLD]: createFontStyle('MeraasAktiv_Bd', 40, 56),
-  [FontStyleKey.H2_BOLD]: createFontStyle('MeraasAktiv_Bd', 36, 50.4),
-  [FontStyleKey.H3_BOLD]: createFontStyle('MeraasAktiv_Bd', 32, 44.8),
-  [FontStyleKey.H4_BOLD]: createFontStyle('MeraasAktiv_Bd', 26, 36.4),
-  [FontStyleKey.H5_BOLD]: createFontStyle('MeraasAktiv_Bd', 24, 33.6),
-  [FontStyleKey.H6_BOLD]: createFontStyle('MeraasAktiv_Bd', 22, 30.8),
-  [FontStyleKey.H7_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
-  [FontStyleKey.H8_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
+  [FontStyle.H1_BOLD]: createFontStyle('MeraasAktiv_Bd', 40, 56),
+  [FontStyle.H2_BOLD]: createFontStyle('MeraasAktiv_Bd', 36, 50.4),
+  [FontStyle.H3_BOLD]: createFontStyle('MeraasAktiv_Bd', 32, 44.8),
+  [FontStyle.H4_BOLD]: createFontStyle('MeraasAktiv_Bd', 26, 36.4),
+  [FontStyle.H5_BOLD]: createFontStyle('MeraasAktiv_Bd', 24, 33.6),
+  [FontStyle.H6_BOLD]: createFontStyle('MeraasAktiv_Bd', 22, 30.8),
+  [FontStyle.H7_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
+  [FontStyle.H8_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
 
-  [FontStyleKey.H1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 40, 56),
-  [FontStyleKey.H2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 36, 50.4),
-  [FontStyleKey.H3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 32, 44.8),
-  [FontStyleKey.H4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 26, 36.4),
-  [FontStyleKey.H5_REGULAR]: createFontStyle('MeraasAktiv_Rg', 24, 33.6),
-  [FontStyleKey.H6_REGULAR]: createFontStyle('MeraasAktiv_Rg', 22, 30.8),
-  [FontStyleKey.H7_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
-  [FontStyleKey.H8_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
+  [FontStyle.H1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 40, 56),
+  [FontStyle.H2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 36, 50.4),
+  [FontStyle.H3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 32, 44.8),
+  [FontStyle.H4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 26, 36.4),
+  [FontStyle.H5_REGULAR]: createFontStyle('MeraasAktiv_Rg', 24, 33.6),
+  [FontStyle.H6_REGULAR]: createFontStyle('MeraasAktiv_Rg', 22, 30.8),
+  [FontStyle.H7_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
+  [FontStyle.H8_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
 
-  [FontStyleKey.H1_LIGHT]: createFontStyle('MeraasAktiv_Lt', 40, 56),
-  [FontStyleKey.H2_LIGHT]: createFontStyle('MeraasAktiv_Lt', 36, 50.4),
-  [FontStyleKey.H3_LIGHT]: createFontStyle('MeraasAktiv_Lt', 32, 44.8),
-  [FontStyleKey.H4_LIGHT]: createFontStyle('MeraasAktiv_Lt', 26, 36.4),
-  [FontStyleKey.H5_LIGHT]: createFontStyle('MeraasAktiv_Lt', 24, 33.6),
-  [FontStyleKey.H6_LIGHT]: createFontStyle('MeraasAktiv_Lt', 22, 30.8),
-  [FontStyleKey.H7_LIGHT]: createFontStyle('MeraasAktiv_Lt', 20, 28),
-  [FontStyleKey.H8_LIGHT]: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
+  [FontStyle.H1_LIGHT]: createFontStyle('MeraasAktiv_Lt', 40, 56),
+  [FontStyle.H2_LIGHT]: createFontStyle('MeraasAktiv_Lt', 36, 50.4),
+  [FontStyle.H3_LIGHT]: createFontStyle('MeraasAktiv_Lt', 32, 44.8),
+  [FontStyle.H4_LIGHT]: createFontStyle('MeraasAktiv_Lt', 26, 36.4),
+  [FontStyle.H5_LIGHT]: createFontStyle('MeraasAktiv_Lt', 24, 33.6),
+  [FontStyle.H6_LIGHT]: createFontStyle('MeraasAktiv_Lt', 22, 30.8),
+  [FontStyle.H7_LIGHT]: createFontStyle('MeraasAktiv_Lt', 20, 28),
+  [FontStyle.H8_LIGHT]: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
 
-  [FontStyleKey.B1_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
-  [FontStyleKey.B2_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
-  [FontStyleKey.B3_BOLD]: createFontStyle('MeraasAktiv_Bd', 16, 22.4),
-  [FontStyleKey.B4_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
+  [FontStyle.B1_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
+  [FontStyle.B2_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
+  [FontStyle.B3_BOLD]: createFontStyle('MeraasAktiv_Bd', 16, 22.4),
+  [FontStyle.B4_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
 
-  [FontStyleKey.B1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
-  [FontStyleKey.B2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
-  [FontStyleKey.B3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 16, 22.4),
-  [FontStyleKey.B4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
+  [FontStyle.B1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
+  [FontStyle.B2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
+  [FontStyle.B3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 16, 22.4),
+  [FontStyle.B4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
 
-  [FontStyleKey.L1_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 19.6),
-  [FontStyleKey.L2_BOLD]: createFontStyle('MeraasAktiv_Bd', 12, 16.8),
-  [FontStyleKey.L3_BOLD]: createFontStyle('MeraasAktiv_Bd', 10, 14),
+  [FontStyle.L1_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 19.6),
+  [FontStyle.L2_BOLD]: createFontStyle('MeraasAktiv_Bd', 12, 16.8),
+  [FontStyle.L3_BOLD]: createFontStyle('MeraasAktiv_Bd', 10, 14),
 
-  [FontStyleKey.L1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 19.6),
-  [FontStyleKey.L2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 12, 16.8),
-  [FontStyleKey.L3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 10, 14),
+  [FontStyle.L1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 19.6),
+  [FontStyle.L2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 12, 16.8),
+  [FontStyle.L3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 10, 14),
 };

package/src/theme/themes.ts

@@ -1,89 +1,89 @@
-import {ThemeKeys} from '../utils/appEnum';
+import {Theme} from '../utils/appEnum';
 
 const theme = {
-  [ThemeKeys.SURFACE_PRIMARY]: {
+  [Theme.SURFACE_PRIMARY]: {
     light: '#FFFFFF',
     dark: '#404040',
   },
-  [ThemeKeys.SURFACE_SECONDARY]: {
+  [Theme.SURFACE_SECONDARY]: {
     light: '#F5F5F5',
     dark: '#212121',
   },
-  [ThemeKeys.SURFACE_STATIC]: {
+  [Theme.SURFACE_STATIC]: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
-  [ThemeKeys.SURFACE_BRAND_STATIC]: {
+  [Theme.SURFACE_BRAND_STATIC]: {
     light: '#D92D27',
     dark: '#D92D27',
   },
-  [ThemeKeys.SURFACE_BRAND_TRANSPARENT_STATIC]: {
+  [Theme.SURFACE_BRAND_TRANSPARENT_STATIC]: {
     light: '#D92D3E',
     dark: '#D92D3E',
   },
-  [ThemeKeys.SURFACE_DISABLE]: {
+  [Theme.SURFACE_DISABLE]: {
     light: '#E1E1E1',
     dark: '#A7A7A7',
   },
-  [ThemeKeys.SURFACE_INVERTED_TRANSPARENT]: {
+  [Theme.SURFACE_INVERTED_TRANSPARENT]: {
     light: '#686868',
     dark: '#FFFFFF',
   },
 
-  [ThemeKeys.CONTENT_PRIMARY]: {
+  [Theme.CONTENT_PRIMARY]: {
     light: '#000000',
     dark: '#FFFFFF',
   },
-  [ThemeKeys.CONTENT_SECONDRY]: {
+  [Theme.CONTENT_SECONDRY]: {
     light: '#686868',
     dark: '#A7A7A7',
   },
-  [ThemeKeys.CONTENT_DISABLE]: {
+  [Theme.CONTENT_DISABLE]: {
     light: '#A7A7A7',
     dark: '#686868',
   },
-  [ThemeKeys.CONTENT_INVERTED]: {
+  [Theme.CONTENT_INVERTED]: {
     light: '#FFFFFF',
     dark: '#000000',
   },
-  [ThemeKeys.CONTENT_STATIC]: {
+  [Theme.CONTENT_STATIC]: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
-  [ThemeKeys.CONTENT_SECONDRY_STATIC]: {
+  [Theme.CONTENT_SECONDRY_STATIC]: {
     light: '#CECECE',
     dark: '#CECECE',
   },
 
-  [ThemeKeys.BORDER_PRIMARY]: {
+  [Theme.BORDER_PRIMARY]: {
     light: '#686868',
     dark: '#404040',
   },
-  [ThemeKeys.BORDER_SECONDRY]: {
+  [Theme.BORDER_SECONDRY]: {
     light: '#A7A7A7',
     dark: '#686868',
   },
-  [ThemeKeys.BORDER_DISABLE]: {
+  [Theme.BORDER_DISABLE]: {
     light: '#CECECE',
     dark: '#4F4F4F',
   },
-  [ThemeKeys.BORDER_INVERTED]: {
+  [Theme.BORDER_INVERTED]: {
     light: '#000000',
     dark: '#FFFFFF',
   },
-  [ThemeKeys.BORDER_BRAND_STATIC]: {
+  [Theme.BORDER_BRAND_STATIC]: {
     light: '#D92D27',
     dark: '#D92D27',
   },
-  [ThemeKeys.BORDER_BRAND_TRANSPARENT_STATIC]: {
+  [Theme.BORDER_BRAND_TRANSPARENT_STATIC]: {
     light: '#D92D3E',
     dark: '#D92D3E',
   },
-  [ThemeKeys.BORDER_STATIC]: {
+  [Theme.BORDER_STATIC]: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
-  [ThemeKeys.BORDER_SEPRATOR]: {
+  [Theme.BORDER_SEPRATOR]: {
     light: '#282828',
     dark: '#FFFFFF',
   },

package/src/utils/appEnum.ts

@@ -16,7 +16,7 @@ export enum ToggleTextType {
   OFF = 'OFF',
 }
 
-export enum FontStyleKey {
+export enum FontStyle {
   // Bold heading styles
   H1_BOLD = 'H1_BOLD',
   H2_BOLD = 'H2_BOLD',
@@ -71,7 +71,7 @@ export enum FontStyleKey {
 }
 
 // ThemeKeys.ts
-export enum ThemeKeys {
+export enum Theme {
   SURFACE_PRIMARY = 'SURFACE_PRIMARY',
   SURFACE_SECONDARY = 'SURFACE_SECONDARY',
   SURFACE_STATIC = 'SURFACE_STATIC',