react-native-molecules 0.5.0-beta.1 → 0.5.0-beta.3

package/components/NavigationRail/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const navigationRailStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -152,19 +152,23 @@ const navigationRailItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    NavigationRail: navigationRailStylesDefault,
-    NavigationRail_Header: navigationRailHeaderStylesDefault,
-    NavigationRail_Content: navigationRailContentStylesDefault,
-    NavigationRail_Footer: navigationRailFooterStylesDefault,
-    NavigationRail_Item: navigationRailItemStylesDefault,
-});
-
-export const navigationRailStyles = getRegisteredMoleculesComponentStyles('NavigationRail');
-export const navigationRailHeaderStyles =
-    getRegisteredMoleculesComponentStyles('NavigationRail_Header');
-export const navigationRailContentStyles =
-    getRegisteredMoleculesComponentStyles('NavigationRail_Content');
-export const navigationRailFooterStyles =
-    getRegisteredMoleculesComponentStyles('NavigationRail_Footer');
-export const navigationRailItemStyles = navigationRailItemStylesDefault;
+export const navigationRailStyles = getRegisteredComponentStylesWithFallback(
+    'NavigationRail',
+    navigationRailStylesDefault,
+);
+export const navigationRailHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'NavigationRail_Header',
+    navigationRailHeaderStylesDefault,
+);
+export const navigationRailContentStyles = getRegisteredComponentStylesWithFallback(
+    'NavigationRail_Content',
+    navigationRailContentStylesDefault,
+);
+export const navigationRailFooterStyles = getRegisteredComponentStylesWithFallback(
+    'NavigationRail_Footer',
+    navigationRailFooterStylesDefault,
+);
+export const navigationRailItemStyles = getRegisteredComponentStylesWithFallback(
+    'NavigationRail_Item',
+    navigationRailItemStylesDefault,
+);

package/components/NavigationStack/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import NavigationStackComponent from './NavigationStack';
 import NavigationStackItem from './NavigationStackItem';
 
@@ -6,10 +6,6 @@ export const NavigationStackDefault = Object.assign(NavigationStackComponent, {
     Item: NavigationStackItem,
 });
 
-registerMoleculesComponents({
-    NavigationStack: NavigationStackDefault,
-});
-
 export const NavigationStack = getRegisteredComponentWithFallback(
     'NavigationStack',
     NavigationStackDefault,

package/components/NavigationStack/utils.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { NavigationStackContext } from './NavigationStack';
 
 export const useNavigation = () => {
@@ -11,6 +12,11 @@ export const useRoute = () => {
     return useContext(NavigationStackContext).currentRoute;
 };
 
-export const navigationStackItemStyles = StyleSheet.create({
+export const navigationStackItemStylesDefault = StyleSheet.create({
     root: {},
 });
+
+export const navigationStackItemStyles = getRegisteredComponentStylesWithFallback(
+    'NavigationStack_Item',
+    navigationStackItemStylesDefault,
+);

package/components/Portal/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import PortalDefault from './Portal';
 
-registerMoleculesComponents({
-    Portal: PortalDefault,
-});
-
 // @ts-ignore TODO - fix this error
 export const Portal = getRegisteredComponentWithFallback('Portal', PortalDefault);
 

package/components/RadioButton/index.ts

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import RadioButtonComponent from './RadioButton';
 import RadioButtonGroup from './RadioButtonGroup';
 import RadioButtonItem from './RadioButtonItem';
@@ -14,10 +14,6 @@ const RadioButtonDefault = Object.assign(
     },
 );
 
-registerMoleculesComponents({
-    RadioButton: RadioButtonDefault,
-});
-
 export const RadioButton = getRegisteredComponentWithFallback('RadioButton', RadioButtonDefault);
 
 export type { Props as RadioButtonProps } from './RadioButton';

package/components/RadioButton/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 // type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
 
@@ -121,13 +121,14 @@ const radioButtonItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    RadioButton: radioButtonStylesDefault,
-    RadioButton_Item: radioButtonItemStylesDefault,
-});
-
-export const radioButtonStyles = getRegisteredMoleculesComponentStyles('RadioButton');
-export const radioButtonItemStyles = getRegisteredMoleculesComponentStyles('RadioButton_Item');
+export const radioButtonStyles = getRegisteredComponentStylesWithFallback(
+    'RadioButton',
+    radioButtonStylesDefault,
+);
+export const radioButtonItemStyles = getRegisteredComponentStylesWithFallback(
+    'RadioButton_Item',
+    radioButtonItemStylesDefault,
+);
 
 export const handlePress = ({
     onPress,

package/components/Rating/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import RatingDefault from './Rating';
 
-registerMoleculesComponents({
-    Rating: RatingDefault,
-});
-
 export const Rating = getRegisteredComponentWithFallback('Rating', RatingDefault);
 
 export type { Props as RatingProps } from './Rating';

package/components/Rating/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type States = 'activeAndDisabled' | 'active' | 'disabled' | 'readonly' | 'activeAndReadonly';
 
@@ -29,10 +29,8 @@ const ratingItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Rating: ratingStylesDefault,
-    Rating_Item: ratingItemStylesDefault,
-});
-
-export const ratingStyles = getRegisteredMoleculesComponentStyles('Rating');
-export const ratingItemStyles = getRegisteredMoleculesComponentStyles('Rating_Item');
+export const ratingStyles = getRegisteredComponentStylesWithFallback('Rating', ratingStylesDefault);
+export const ratingItemStyles = getRegisteredComponentStylesWithFallback(
+    'Rating_Item',
+    ratingItemStylesDefault,
+);

package/components/StateLayer/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import StateLayerDefault from './StateLayer';
 
-registerMoleculesComponents({
-    StateLayer: StateLayerDefault,
-});
-
 export const StateLayer = getRegisteredComponentWithFallback('StateLayer', StateLayerDefault);
 
 export type { Props as StateLayerProps } from './StateLayer';

package/components/StateLayer/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const stateLayerStylesDefault = StyleSheet.create({
     root: {
@@ -10,8 +10,7 @@ const stateLayerStylesDefault = StyleSheet.create({
     },
 });
 
-registerComponentsStyles({
-    StateLayer: stateLayerStylesDefault,
-});
-
-export const stateLayerStyles = getRegisteredMoleculesComponentStyles('StateLayer');
+export const stateLayerStyles = getRegisteredComponentStylesWithFallback(
+    'StateLayer',
+    stateLayerStylesDefault,
+);

package/components/Surface/Surface.android.tsx

@@ -4,8 +4,9 @@ import { useUnistyles } from 'react-native-unistyles';
 
 import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../types/theme';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, extractProperties, getElevationAndroid } from './utils';
+import { defaultStyles, getElevationAndroid } from './utils';
 
 export type Props = ViewProps & {
     /**
@@ -43,7 +44,7 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
                     elevation: getElevationAndroid(elevation, inputRange, elevationLevel),
                 },
             ] as StyleProp<ViewStyle>,
-            surfaceBackground: extractProperties(
+            surfaceBackground: extractPropertiesFromStyles(
                 [defaultStyles.root as ViewStyle, style],
                 ['backgroundColor'],
             ).backgroundColor,

package/components/Surface/Surface.ios.tsx

@@ -3,8 +3,9 @@ import { Animated, type StyleProp, View, type ViewStyle } from 'react-native';
 import { useUnistyles } from 'react-native-unistyles';
 
 import type { MD3Elevation } from '../../types/theme';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, extractProperties, getStyleForShadowLayer } from './utils';
+import { defaultStyles, getStyleForShadowLayer } from './utils';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -78,14 +79,15 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
     })();
 
     const { surfaceBackground, sharedStyle, layer0Style, layer1Style } = useMemo(() => {
-        const { position, alignSelf, top, left, right, bottom, borderRadius } = extractProperties(
-            [defaultStyles.root as ViewStyle, style],
-            ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
-        );
+        const { position, alignSelf, top, left, right, bottom, borderRadius } =
+            extractPropertiesFromStyles(
+                [defaultStyles.root as ViewStyle, style],
+                ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
+            );
         const absoluteStyle = { position, alignSelf, top, right, bottom, left };
 
         return {
-            surfaceBackground: extractProperties(
+            surfaceBackground: extractPropertiesFromStyles(
                 [defaultStyles.root as ViewStyle, style],
                 ['backgroundColor'],
             ).backgroundColor,

package/components/Surface/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import SurfaceDefault from './Surface';
 
-registerMoleculesComponents({
-    Surface: SurfaceDefault,
-});
-
 export const Surface = getRegisteredComponentWithFallback('Surface', SurfaceDefault);
 
 export * from './BackgroundContextWrapper';

package/components/Surface/utils.ts

@@ -1,7 +1,7 @@
 import type { Animated } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { inputRange } from '../../styles/shadow';
 
 const defaultStylesDefault = StyleSheet.create(theme => ({
@@ -10,35 +10,10 @@ const defaultStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Surface: defaultStylesDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('Surface');
-
-// TODO - abstract this
-export function extractProperties(
-    _objectsArray: Record<string, any>,
-    propertiesToExtract: string[],
-) {
-    const extracted: Record<string, any> = {};
-
-    const objectsArray = _objectsArray.flat();
-
-    for (let i = objectsArray.length - 1; i >= 0; i--) {
-        const obj = objectsArray[i];
-
-        for (const prop of propertiesToExtract) {
-            if (!obj) continue;
-            if (prop in obj) {
-                // @ts-ignore
-                extracted[prop] = obj[prop];
-            }
-        }
-    }
-
-    return extracted;
-}
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'Surface',
+    defaultStylesDefault,
+);
 
 const _shadowColor = '#000';
 

package/components/Switch/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import SwitchDefault from './Switch';
 
-registerMoleculesComponents({
-    Switch: SwitchDefault,
-});
-
 export const Switch = getRegisteredComponentWithFallback('Switch', SwitchDefault);
 
 export { type Props as SwitchProps } from './Switch';

package/components/Switch/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet, useUnistyles } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 type States =
     | 'selected'
@@ -276,8 +276,4 @@ const switchStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Switch: switchStylesDefault,
-});
-
-export const switchStyles = getRegisteredMoleculesComponentStyles('Switch');
+export const switchStyles = getRegisteredComponentStylesWithFallback('Switch', switchStylesDefault);

package/components/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import type { TabItemProps } from './TabItem';
 import { default as TabItem } from './TabItem';
 import type { TabLabelProps } from './TabLabel';
@@ -11,10 +11,6 @@ export const TabsDefault = Object.assign(TabBase, {
     Label: TabLabel,
 });
 
-registerMoleculesComponents({
-    Tabs: TabsDefault,
-});
-
 export const Tabs = getRegisteredComponentWithFallback('Tabs', TabsDefault);
 
 export type { TabItemProps, TabLabelProps, TabsProps };

package/components/Tabs/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const tabsStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -113,14 +113,14 @@ const tabsLabelStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Tabs: tabsStylesDefault,
-    Tabs_Item: tabsItemStylesDefault,
-    Tabs_Label: tabsLabelStylesDefault,
-});
-
-export const tabsStyles = getRegisteredMoleculesComponentStyles('Tabs');
-export const tabsItemStyles = getRegisteredMoleculesComponentStyles('Tabs_Item');
-export const tabsLabelStyles = getRegisteredMoleculesComponentStyles('Tabs_Label');
+export const tabsStyles = getRegisteredComponentStylesWithFallback('Tabs', tabsStylesDefault);
+export const tabsItemStyles = getRegisteredComponentStylesWithFallback(
+    'Tabs_Item',
+    tabsItemStylesDefault,
+);
+export const tabsLabelStyles = getRegisteredComponentStylesWithFallback(
+    'Tabs_Label',
+    tabsLabelStylesDefault,
+);
 
 export type States = 'hovered' | 'active' | 'activeAndHovered' | 'disabled';

package/components/Text/Text.tsx

@@ -1,10 +1,8 @@
 import { StyleSheet } from 'react-native-unistyles';
 
 import {
+    getRegisteredComponentStylesWithFallback,
     getRegisteredComponentWithFallback,
-    getRegisteredMoleculesComponentStyles,
-    registerComponentStyles,
-    registerMoleculesComponent,
 } from '../../core';
 import { textFactory } from './textFactory';
 
@@ -12,12 +10,8 @@ const defaultStyles = StyleSheet.create(theme => ({
     root: { color: theme.colors.onSurface, ...theme.typescale.bodyMedium },
 }));
 
-registerComponentStyles('Text', defaultStyles);
-
 const TextDefault = textFactory(
-    (getRegisteredMoleculesComponentStyles('Text') as any) ?? defaultStyles,
+    getRegisteredComponentStylesWithFallback('Text', defaultStyles) as any,
 );
 
-registerMoleculesComponent('Text', TextDefault);
-
 export default getRegisteredComponentWithFallback('Text', TextDefault);

package/components/TextInput/TextInput.tsx

@@ -432,6 +432,7 @@ const TextInput = forwardRef<TextInputHandles, Props>(
             };
         }, [onBlurRef]);
 
+        // @ts-ignore // TODO - fix this
         const componentStyles = styles.root;
 
         const labelWidth = labelLayout.width;

package/components/TextInput/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TextInputDefault from './TextInput';
 
-registerMoleculesComponents({
-    TextInput: TextInputDefault,
-});
-
 export const TextInput = getRegisteredComponentWithFallback('TextInput', TextInputDefault);
 
 export {

package/components/TextInput/utils.ts

@@ -1,10 +1,8 @@
 import { StyleSheet } from 'react-native-unistyles';
 
 import {
-    getRegisteredComponentUtils,
-    getRegisteredMoleculesComponentStyles,
-    registerComponentsStyles,
-    registerComponentUtils,
+    getRegisteredComponentStylesWithFallback,
+    getRegisteredComponentUtilsWithFallback,
 } from '../../core';
 
 export type States =
@@ -37,12 +35,11 @@ const getInputMinHeightDefault = (variant: string, size: string) => {
     }
 };
 
-registerComponentUtils('TextInput', {
-    getInputMinHeight: getInputMinHeightDefault,
-});
-
-export const getInputMinHeight =
-    getRegisteredComponentUtils('TextInput').getInputMinHeight ?? getInputMinHeightDefault;
+export const getInputMinHeight = getRegisteredComponentUtilsWithFallback(
+    'TextInput',
+    getInputMinHeightDefault,
+    'getInputMinHeight',
+);
 
 const textInputStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -530,11 +527,7 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    TextInput: textInputStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TextInput');
+export const styles = getRegisteredComponentStylesWithFallback('TextInput', textInputStylesDefault);
 
 export const inputLabelStyles = StyleSheet.create({
     labelContainer: {

package/components/TextInputWithMask/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TextInputWithMaskDefault from './TextInputMask';
 
-registerMoleculesComponents({
-    TextInputWithMask: TextInputWithMaskDefault,
-});
-
 export const TextInputWithMask = getRegisteredComponentWithFallback(
     'TextInputWithMask',
     TextInputWithMaskDefault,

package/components/TimePicker/AmPmSwitcher.tsx

@@ -71,7 +71,7 @@ function SwitchButton({
     disabled: boolean;
 }) {
     timePickerAmPmSwitcherStyles.useVariants({
-        // TODO - fix ts issues
+        // @ts-ignore // TODO - fix this
         state: resolveStateVariant({
             selected,
         }),

package/components/TimePicker/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TimePickerDefault from './TimePicker';
 
-registerMoleculesComponents({
-    TimePicker: TimePickerDefault,
-});
-
 export const TimePicker = getRegisteredComponentWithFallback('TimePicker', TimePickerDefault);
 
 export type { Props as TimePickerProps } from './TimePicker';

package/components/TimePicker/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { circleSize } from './timeUtils';
 
 const timePickerStylesDefault = StyleSheet.create(theme => ({
@@ -263,23 +263,31 @@ const timePickerAmPmSwitcherStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    TimePicker: timePickerStylesDefault,
-    TimePicker_Inputs: timePickerInputsStylesDefault,
-    TimePicker_Input: timePickerInputStylesDefault,
-    TimePicker_Clock: timePickerClockStylesDefault,
-    TimePicker_ClockHours: timePickerClockHoursStylesDefault,
-    TimePicker_ClockMinutes: timePickerClockMinutesStylesDefault,
-    TimePicker_AmPmSwitcher: timePickerAmPmSwitcherStylesDefault,
-});
-
-export const timePickerStyles = getRegisteredMoleculesComponentStyles('TimePicker');
-export const timePickerInputsStyles = getRegisteredMoleculesComponentStyles('TimePicker_Inputs');
-export const timePickerInputStyles = getRegisteredMoleculesComponentStyles('TimePicker_Input');
-export const timePickerClockStyles = getRegisteredMoleculesComponentStyles('TimePicker_Clock');
-export const timePickerClockHoursStyles =
-    getRegisteredMoleculesComponentStyles('TimePicker_ClockHours');
-export const timePickerClockMinutesStyles =
-    getRegisteredMoleculesComponentStyles('TimePicker_ClockMinutes');
-export const timePickerAmPmSwitcherStyles =
-    getRegisteredMoleculesComponentStyles('TimePicker_AmPmSwitcher');
+export const timePickerStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker',
+    timePickerStylesDefault,
+);
+export const timePickerInputsStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_Inputs',
+    timePickerInputsStylesDefault,
+);
+export const timePickerInputStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_Input',
+    timePickerInputStylesDefault,
+);
+export const timePickerClockStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_Clock',
+    timePickerClockStylesDefault,
+);
+export const timePickerClockHoursStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_ClockHours',
+    timePickerClockHoursStylesDefault,
+);
+export const timePickerClockMinutesStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_ClockMinutes',
+    timePickerClockMinutesStylesDefault,
+);
+export const timePickerAmPmSwitcherStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_AmPmSwitcher',
+    timePickerAmPmSwitcherStylesDefault,
+);

package/components/TimePickerField/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TimePickerFieldDefault from './TimePickerField';
 
-registerMoleculesComponents({
-    TimePickerField: TimePickerFieldDefault,
-});
-
 export const TimePickerField = getRegisteredComponentWithFallback(
     'TimePickerField',
     TimePickerFieldDefault,

package/components/TimePickerField/utils.ts

@@ -5,17 +5,16 @@ export declare type MaskItem = string | RegExp | [RegExp];
 export declare type MaskArray = Array<MaskItem>;
 export declare type Mask = MaskArray | ((value?: string) => MaskArray);
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const timepickerFieldStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentsStyles({
-    TimePickerField: timepickerFieldStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TimePickerField');
+export const styles = getRegisteredComponentStylesWithFallback(
+    'TimePickerField',
+    timepickerFieldStylesDefault,
+);
 
 export const timeMask24Hour: Mask = (text: string = '') => {
     const cleanTime = text.replace(/\D+/g, '');