@bifold/core 2.3.0 → 2.4.0

package/src/screens/PINVerify.tsx

@@ -34,7 +34,7 @@ const PINVerify: React.FC<Props> = ({ setAuthenticated, usage = PINEntryUsage.PI
   const [continueDisabled, setContinueDisabled] = useState(false)
   const [loading, setLoading] = useState(false)
   const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false)
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const [inlineMessageField, setInlineMessageField] = useState<InlineMessageProps>()
   const [{ preventScreenCapture }] = useServices([TOKENS.CONFIG])
@@ -94,7 +94,7 @@ const PINVerify: React.FC<Props> = ({ setAuthenticated, usage = PINEntryUsage.PI
     screenContainer: {
       flex: 1,
       padding: 20,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       justifyContent: 'space-between',
     },
     buttonContainer: {

package/src/screens/PasteUrl.tsx

@@ -18,7 +18,7 @@ import { ThemedText } from '../components/texts/ThemedText'
 export type PasteProps = StackScreenProps<ConnectStackParams>
 
 const PasteUrl: React.FC<PasteProps> = ({ navigation }) => {
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const [pastedContent, setPastedContent] = useState<string>('')
   const [errorMessage, setErrorMessage] = useState<{ title: string; message: string } | undefined>()
   const { t } = useTranslation()
@@ -30,7 +30,7 @@ const PasteUrl: React.FC<PasteProps> = ({ navigation }) => {
   const styles = StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     content: {
       margin: 20,
@@ -41,10 +41,10 @@ const PasteUrl: React.FC<PasteProps> = ({ navigation }) => {
     textBox: {
       ...TextTheme.normal,
       textAlignVertical: 'top',
-      borderColor: ColorPallet.grayscale.darkGrey,
+      borderColor: ColorPalette.grayscale.darkGrey,
       borderWidth: 1,
       borderRadius: 5,
-      backgroundColor: ColorPallet.grayscale.lightGrey,
+      backgroundColor: ColorPalette.grayscale.lightGrey,
     },
     buttonContainer: {
       margin: 20,

package/src/screens/ProofChangeCredential.tsx

@@ -32,7 +32,7 @@ const ProofChangeCredential: React.FC<ProofChangeProps> = ({ route, navigation }
   const selectedCred = route.params.selectedCred
   const altCredentials = route.params.altCredentials
   const onCredChange = route.params.onCredChange
-  const { ColorPallet, SelectedCredTheme } = useTheme()
+  const { ColorPalette, SelectedCredTheme } = useTheme()
   const { t } = useTranslation()
   const [loading, setLoading] = useState(false)
   const [proofItems, setProofItems] = useState<ProofCredentialItems[]>([])
@@ -46,7 +46,7 @@ const ProofChangeCredential: React.FC<ProofChangeProps> = ({ route, navigation }
       marginHorizontal: 20,
     },
     cardLoading: {
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       flex: 1,
       flexGrow: 1,
       marginVertical: 35,

package/src/screens/ProofDetails.tsx

@@ -47,21 +47,21 @@ const VerifiedProof: React.FC<VerifiedProofProps> = ({
   onGenerateNewPressed,
 }: VerifiedProofProps) => {
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme, Assets } = useTheme()
+  const { ColorPalette, TextTheme, Assets } = useTheme()
   const [sharedProofDataItems, setSharedProofDataItems] = useState<GroupedSharedProofDataItem[]>([])
   const styles = StyleSheet.create({
     container: {
       flexGrow: 1,
     },
     iconContainer: {
-      backgroundColor: ColorPallet.notification.info,
+      backgroundColor: ColorPalette.notification.info,
       width: 100,
       height: 100,
       alignItems: 'center',
       justifyContent: 'center',
       marginBottom: 15,
       borderRadius: 50,
-      borderColor: ColorPallet.notification.infoBorder,
+      borderColor: ColorPalette.notification.infoBorder,
       borderWidth: 3,
       alignSelf: 'center',
       overflow: 'hidden',

package/src/screens/ProofRequest.tsx

@@ -103,7 +103,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
   const [loading, setLoading] = useState<boolean>(true)
   const [declineModalVisible, setDeclineModalVisible] = useState(false)
   const [cancelModalVisible, setCancelModalVisible] = useState(false)
-  const { ColorPallet, ListItems, TextTheme } = useTheme()
+  const { ColorPalette, ListItems, TextTheme } = useTheme()
   const goalCode = useOutOfBandByConnectionId(proof?.connectionId ?? '')?.outOfBandInvitation.goalCode
   const outOfBandInvitation = useOutOfBandByReceivedInvitationId(proof?.parentThreadId ?? '')?.outOfBandInvitation
   const [containsPI, setContainsPI] = useState(false)
@@ -174,7 +174,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     },
     detailsButton: {
       ...ListItems.recordAttributeText,
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
       textDecorationLine: 'underline',
     },
   })
@@ -703,14 +703,14 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                         alignSelf: 'center',
                         flex: 1,
                         flexWrap: 'wrap',
-                        color: ColorPallet.notification.errorText,
+                        color: ColorPalette.notification.errorText,
                       }}
                     >
                       {t('ProofRequest.YouCantRespond')}{' '}
                       <ThemedText
                         style={{
                           fontWeight: TextTheme.normal.fontWeight,
-                          color: ColorPallet.brand.link,
+                          color: ColorPalette.brand.link,
                         }}
                         onPress={() => setShowDetailsModal(true)}
                       >
@@ -907,7 +907,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: ColorPallet.brand.primaryBackground,
+            backgroundColor: ColorPalette.brand.primaryBackground,
           }}
         >
           <InfoBox
@@ -931,7 +931,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: ColorPallet.brand.primaryBackground,
+            backgroundColor: ColorPalette.brand.primaryBackground,
           }}
         >
           <InfoBox
@@ -965,7 +965,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                   style={{
                     width: 'auto',
                     borderWidth: 1,
-                    borderColor: ColorPallet.grayscale.lightGrey,
+                    borderColor: ColorPalette.grayscale.lightGrey,
                     marginTop: 20,
                   }}
                 />

package/src/screens/ProofRequestAccept.tsx

@@ -25,13 +25,13 @@ const ProofRequestAccept: React.FC<ProofRequestAcceptProps> = ({ visible, proofI
   const [proofDeliveryStatus, setProofDeliveryStatus] = useState<ProofState>(ProofState.RequestReceived)
   const proof = useProofById(proofId)
   const navigation = useNavigation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { SendingProof, SentProof } = useAnimatedComponents()
 
   const styles = StyleSheet.create({
     container: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       padding: 20,
     },
     image: {
@@ -82,7 +82,7 @@ const ProofRequestAccept: React.FC<ProofRequestAcceptProps> = ({ visible, proofI
 
   return (
     <SafeAreaModal visible={visible} transparent={true} animationType={'none'}>
-      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
         <ScrollView style={styles.container}>
           <View style={styles.messageContainer}>
             {proofDeliveryStatus === ProofState.RequestReceived && (

package/src/screens/ProofRequestDetails.tsx

@@ -36,7 +36,7 @@ interface ProofRequestAttributesCardProps {
 }
 
 const ProofRequestAttributesCard: React.FC<ProofRequestAttributesCardProps> = ({ data, onChangeValue }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { i18n } = useTranslation()
   const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
   const [attributes, setAttributes] = useState<Field[] | undefined>(undefined)
@@ -67,7 +67,7 @@ const ProofRequestAttributesCard: React.FC<ProofRequestAttributesCardProps> = ({
       <VerifierCredentialCard
         onChangeValue={onChangeValue}
         displayItems={attributes}
-        style={{ backgroundColor: ColorPallet.brand.secondaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.secondaryBackground }}
         credDefId={credDefId}
         schemaId={data.schema}
         preview
@@ -93,7 +93,7 @@ const ProofRequestCardsComponent: React.FC<ProofRequestCardsProps> = ({ attribut
 const ProofRequestCards = memo(ProofRequestCardsComponent)
 
 const ProofRequestDetails: React.FC<ProofRequestDetailsProps> = ({ route, navigation }) => {
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const [store] = useStore()
   const { t } = useTranslation()
   const { i18n } = useTranslation()
@@ -113,7 +113,7 @@ const ProofRequestDetails: React.FC<ProofRequestDetailsProps> = ({ route, naviga
   const style = StyleSheet.create({
     container: {
       flexGrow: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 16,
     },
     header: {

package/src/screens/ProofRequestUsageHistory.tsx

@@ -41,7 +41,7 @@ const getPresentationStateLabel = (record: ProofExchangeRecord) => {
 
 const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordProps> = ({ record, navigation }) => {
   const { t } = useTranslation()
-  const { ListItems, ColorPallet } = useTheme()
+  const { ListItems, ColorPalette } = useTheme()
   const [store] = useStore()
   const connection = useConnectionById(record.connectionId ?? '')
   const theirLabel = useMemo(
@@ -67,7 +67,7 @@ const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordPro
       marginVertical: 2,
     },
     valueLabel: {
-      color: ColorPallet.grayscale.black,
+      color: ColorPalette.grayscale.black,
     },
     valueText: {
       ...ListItems.requestTemplateTitle,

package/src/screens/ProofRequesting.tsx

@@ -57,7 +57,7 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
   }
 
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const isFocused = useIsFocused()
   const [store] = useStore()
   const [generating, setGenerating] = useState(true)
@@ -73,7 +73,7 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
   const styles = StyleSheet.create({
     container: {
       flexGrow: 1,
-      backgroundColor: ColorPallet.grayscale.white,
+      backgroundColor: ColorPalette.grayscale.white,
     },
     headerContainer: {
       alignItems: 'center',
@@ -88,18 +88,18 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
     secondaryHeaderText: {
       textAlign: 'center',
       marginTop: 8,
-      color: ColorPallet.grayscale.black,
+      color: ColorPalette.grayscale.black,
     },
     interopText: {
       alignSelf: 'center',
       marginBottom: -20,
       paddingHorizontal: 10,
-      backgroundColor: ColorPallet.grayscale.white,
+      backgroundColor: ColorPalette.grayscale.white,
       zIndex: 100,
       textAlign: 'center',
       fontWeight: TextTheme.bold.fontWeight,
       fontSize: 22,
-      color: ColorPallet.brand.primary,
+      color: ColorPalette.brand.primary,
     },
     qrContainer: {
       height: qrContainerSize,

package/src/screens/RenameContact.tsx

@@ -31,7 +31,7 @@ const RenameContact: React.FC<RenameContactProps> = ({ route }) => {
   const { connectionId } = route.params
   const connection = useConnectionById(connectionId)
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const navigation = useNavigation()
   const [store, dispatch] = useStore()
   const [contactName, setContactName] = useState(getConnectionName(connection, store.preferences.alternateContactNames))
@@ -45,7 +45,7 @@ const RenameContact: React.FC<RenameContactProps> = ({ route }) => {
   const styles = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/screens/Settings.tsx

@@ -40,7 +40,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
     navigation.navigate(Screens.Developer)
   }
   const { incrementDeveloperMenuCounter } = useDeveloperMode(onDevModeTriggered)
-  const { SettingsTheme, TextTheme, ColorPallet, Assets, maxFontSizeMultiplier } = useTheme()
+  const { SettingsTheme, TextTheme, ColorPalette, Assets, maxFontSizeMultiplier } = useTheme()
   const [{ settings, enableTours, enablePushNotifications, disableContactsInSettings }, historyEnabled] = useServices([
     TOKENS.CONFIG,
     TOKENS.HISTORY_ENABLED,
@@ -50,7 +50,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
   const defaultIconSize = 24
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -77,7 +77,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
     footer: {
@@ -100,7 +100,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
           },
           accessibilityLabel: t('NameWallet.EditWalletName'),
           testID: testIdWithKey('EditWalletName'),
-          style: { color: ColorPallet.brand.primary },
+          style: { color: ColorPalette.brand.primary },
         },
         titleTestID: store.preferences.useConnectionInviterCapability ? testIdWithKey('WalletName') : undefined,
       },
@@ -362,7 +362,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
         >
           {title}
         </ThemedText>
-        <ThemedText style={[TextTheme.settingsText, { color: ColorPallet.brand.link }]}>{value}</ThemedText>
+        <ThemedText style={[TextTheme.settingsText, { color: ColorPalette.brand.link }]}>{value}</ThemedText>
       </TouchableOpacity>
     </ScrollView>
   )

package/src/screens/Splash.tsx

@@ -25,7 +25,7 @@ const Splash: React.FC<SplashProps> = ({ initializeAgent }) => {
   const { walletSecret } = useAuth()
   const { t } = useTranslation()
   const [store] = useStore()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { LoadingIndicator } = useAnimatedComponents()
   const initializing = useRef(false)
   const [logger, ocaBundleResolver] = useServices([TOKENS.UTIL_LOGGER, TOKENS.UTIL_OCA_RESOLVER])
@@ -35,7 +35,7 @@ const Splash: React.FC<SplashProps> = ({ initializeAgent }) => {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
   })
 

package/src/screens/ToggleBiometry.tsx

@@ -27,7 +27,7 @@ const ToggleBiometry: React.FC = () => {
   const { commitWalletToKeychain, disableBiometrics } = useAuth()
   const [biometryEnabled, setBiometryEnabled] = useState(store.preferences.useBiometry)
   const [canSeeCheckPIN, setCanSeeCheckPIN] = useState<boolean>(false)
-  const { ColorPallet, NavigationTheme } = useTheme()
+  const { ColorPalette, NavigationTheme } = useTheme()
 
   const logHistoryRecord = useCallback(
     (type: HistoryCardType) => {
@@ -131,7 +131,7 @@ const ToggleBiometry: React.FC = () => {
   return (
     <BiometryControl biometryEnabled={biometryEnabled} onBiometryToggle={handleBiometryToggle}>
       <SafeAreaModal
-        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
         visible={canSeeCheckPIN}
         transparent={false}
         animationType={'slide'}

package/src/screens/TogglePushNotifications.tsx

@@ -20,7 +20,7 @@ const TogglePushNotifications: React.FC = () => {
   const { t } = useTranslation()
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [{ enablePushNotifications }] = useServices([TOKENS.CONFIG])
   const [notificationState, setNotificationState] = useState<boolean>(store.preferences.usePushNotifications)
   const [notificationStatus, setNotificationStatus] = useState<'denied' | 'granted' | 'unknown'>('unknown')
@@ -97,9 +97,9 @@ const TogglePushNotifications: React.FC = () => {
               <View style={styles.toggleContainer}>
                 <ThemedText>{t('PushNotifications.ReceiveNotifications')}</ThemedText>
                 <Switch
-                  trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-                  thumbColor={notificationState ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-                  ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+                  trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+                  thumbColor={notificationState ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+                  ios_backgroundColor={ColorPalette.grayscale.lightGrey}
                   onValueChange={toggleSwitch}
                   accessibilityLabel={t('PushNotifications.ReceiveNotifications')}
                   accessibilityRole="switch"

package/src/screens/Tours.tsx

@@ -18,11 +18,11 @@ interface Option {
 const Tours: React.FC = () => {
   const [store, dispatch] = useStore()
   const { t } = useTranslation()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -37,7 +37,7 @@ const Tours: React.FC = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
   })
@@ -71,8 +71,8 @@ const Tours: React.FC = () => {
                 fillColor="#FFFFFFFF"
                 unfillColor="#FFFFFFFF"
                 size={36}
-                innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-                ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+                innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+                ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary}></Icon>}
                 onPress={async () => await handleSettingChange(bool)}
                 isChecked={store.tours.enableTours === bool}
                 disableBuiltInState

package/src/screens/UpdateAvailable.tsx

@@ -20,7 +20,7 @@ type UpdateAvailableProps = {
 const UpdateAvailable: React.FC<UpdateAvailableProps> = ({ appleAppStoreUrl, googlePlayStoreUrl }) => {
   const { t } = useTranslation()
   const [, dispatch] = useStore()
-  const { ColorPallet, Assets, Spacing } = useTheme()
+  const { ColorPalette, Assets, Spacing } = useTheme()
   const [logger] = useServices([TOKENS.UTIL_LOGGER])
 
   // Check if both store links are available
@@ -41,7 +41,7 @@ const UpdateAvailable: React.FC<UpdateAvailableProps> = ({ appleAppStoreUrl, goo
   }, [dispatch])
 
   const iconOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 130,
     width: 130,
   }

package/src/screens/WhatAreContacts.tsx

@@ -13,13 +13,13 @@ interface WhatAreContactsProps {
 }
 
 const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { t } = useTranslation()
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     pageContent: {
       marginTop: 30,

package/src/theme-builder.ts

@@ -0,0 +1,140 @@
+import {
+  IColorPalette,
+  ITheme,
+  createButtonsTheme,
+  createChatTheme,
+  createHomeTheme,
+  createInputInlineMessageTheme,
+  createInputsTheme,
+  createListItemsTheme,
+  createNavigationTheme,
+  createSettingsTheme,
+  createTabTheme,
+  createTextTheme,
+  createOnboardingTheme,
+  createDialogTheme,
+  createLoadingTheme,
+  createPINInputTheme,
+} from './theme'
+import lodash from 'lodash'
+
+/**
+ * DeepPartial is a utility type that recursively makes all properties of a type optional.
+ */
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object
+    ? T[P] extends (...args: any[]) => any
+      ? T[P] // keep functions as is
+      : // For object types, make all keys optional recursively:
+      Partial<T[P]> extends infer O
+      ? { [K in keyof O]?: DeepPartial<O[K]> }
+      : never
+    : T[P]
+}
+
+/**
+ * ThemeBuilder is a utility class to extend an existing theme with additional properties.
+ *
+ * @class ThemeBuilder
+ */
+export class ThemeBuilder {
+  private _theme: ITheme
+  private _themeOverrides: DeepPartial<ITheme>
+
+  /**
+   * Creates an instance of ThemeBuilder.
+   *
+   * @param {ITheme} baseTheme - The initial theme object to extend.
+   */
+  constructor(baseTheme: ITheme) {
+    this._theme = baseTheme
+    this._themeOverrides = {}
+  }
+
+  /**
+   * Sets the color pallet for the theme.
+   *
+   * Note: This method is mostly a convenience method to set the color pallet for the theme.
+   * The same can be achieved by directly modifying the theme object using the `withOverrides` method.
+   *
+   * @param {IColorPalette} colorPalette - The color pallet to set for the theme.
+   * @returns {*} {ThemeBuilder} Returns the instance of ThemeBuilder for method chaining.
+   */
+  setColorPalette(colorPalette: IColorPalette): this {
+    this._theme.ColorPalette = colorPalette
+
+    return this
+  }
+
+  /**
+   * Overrides properties in the current theme with the provided themeOverrides.
+   *
+   * Note: This will overwrite existing properties in the current theme with those from the provided themeOverrides.
+   *
+   * @example
+   * new ThemeBuilder({ Buttons: { color: 'purple', size: 'large' }})
+   * .withOverrides({ Buttons: { color: 'red' }})
+   * .withOverrides({ Buttons: { spacing: 10 }}) // => { Buttons: { color: 'red', size: 'large', spacing: 10 }}
+   *
+   * @example
+   * new ThemeBuilder({ Buttons: { critical: { padding: 10, margin: 0 }}})
+   * .withOverrides((theme) => ({
+   *  Buttons: { critical: { padding: 0, margin: -1 } },
+   * })) // => { Buttons: { critical: { padding: 0, margin: -1 } }}
+   *
+   * @param {DeepPartial<ITheme> | ((theme: ITheme) => DeepPartial<ITheme>) } themeOverrides A partial theme object to merge with the current theme or a callback function that receives the current theme and returns a partial theme object.
+   * @returns {*} {ThemeBuilder} Returns the instance of ThemeBuilder for method chaining.
+   */
+  withOverrides(themeOverrides: DeepPartial<ITheme> | ((theme: ITheme) => DeepPartial<ITheme>)): this {
+    const resolvedOverrides = typeof themeOverrides === 'function' ? themeOverrides(this._theme) : themeOverrides
+
+    // note: without the empty object, lodash.merge will mutate the original theme overrides,
+    // and not properly update the nested properties
+    this._themeOverrides = lodash.merge({}, this._themeOverrides, resolvedOverrides)
+
+    // Rebuild the theme with the new overrides so following chained calls will use the updated theme.
+    this._theme = this.build()
+
+    // Return the instance for method chaining
+    return this
+  }
+
+  /**
+   * Builds and returns the final theme object.
+   *
+   * @returns {*} {ITheme} Returns the final theme object.
+   */
+  build(): ITheme {
+    // Step 1. Merge the theme overrides onto the original theme, producing the new base theme.
+    const baseTheme = lodash.merge({}, this._theme, this._themeOverrides)
+
+    // Step 2. Generate computed properties that depend on the base theme
+    const dependentThemes: Partial<ITheme> = {
+      TextTheme: createTextTheme(baseTheme),
+      InputInlineMessage: createInputInlineMessageTheme(baseTheme),
+      Inputs: createInputsTheme(baseTheme),
+      Buttons: createButtonsTheme(baseTheme),
+      ListItems: createListItemsTheme(baseTheme),
+      TabTheme: createTabTheme(baseTheme),
+      NavigationTheme: createNavigationTheme(baseTheme),
+      HomeTheme: createHomeTheme(baseTheme),
+      SettingsTheme: createSettingsTheme(baseTheme),
+      ChatTheme: createChatTheme(baseTheme),
+      OnboardingTheme: createOnboardingTheme(baseTheme),
+      DialogTheme: createDialogTheme(baseTheme),
+      LoadingTheme: createLoadingTheme(baseTheme),
+      PINInputTheme: createPINInputTheme(baseTheme),
+    }
+
+    /**
+     * Step 3. Merge all together - base + generated + overrides
+     *
+     * Why do we apply the overrides after the dependent themes?
+     * Because the `dependentThemes` contain additional properties that may have
+     * been modified by the overrides previously.
+     */
+    this._theme = lodash.merge({}, baseTheme, dependentThemes, this._themeOverrides)
+
+    return this._theme
+  }
+}