react-native-molecules 0.5.0-beta.0 → 0.5.0-beta.2

package/components/NavigationRail/NavigationRailItem.tsx

@@ -128,7 +128,8 @@ const NavigationRailItem = memo(
                     iconContainerStyle: [
                         navigationRailItemStyles.iconContainer,
                         !label && {
-                            height: navigationRailItemStyles.iconContainer.width,
+                            // TODO - remove this. We cannot do it like this
+                            height: (navigationRailItemStyles.iconContainer as any).width,
                         },
                         iconContainerProps.style,
                     ],

package/components/NavigationRail/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import NavigationRailComponent from './NavigationRail';
 import NavigationRailContent from './NavigationRailContent';
 import NavigationRailFooter from './NavigationRailFooter';
@@ -12,10 +12,6 @@ export const NavigationRailDefault = Object.assign(NavigationRailComponent, {
     Footer: NavigationRailFooter,
 });
 
-registerMoleculesComponents({
-    NavigationRail: NavigationRailDefault,
-});
-
 export const NavigationRail = getRegisteredComponentWithFallback(
     'NavigationRail',
     NavigationRailDefault,

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,14 +14,9 @@ const RadioButtonDefault = Object.assign(
     },
 );
 
-registerMoleculesComponents({
-    RadioButton: RadioButtonDefault,
-});
-
 export const RadioButton = getRegisteredComponentWithFallback('RadioButton', RadioButtonDefault);
 
-export { Props as RadioButtonProps } from './RadioButton';
-export { Props as RadioButtonGroupProps } from './RadioButtonGroup';
-export { Props as RadioButtonItemProps } from './RadioButtonItem';
-
-export { radioButtonStyles, radioButtonItemStyles } from './utils';
+export type { Props as RadioButtonProps } from './RadioButton';
+export type { Props as RadioButtonGroupProps } from './RadioButtonGroup';
+export type { Props as RadioButtonItemProps } from './RadioButtonItem';
+export { radioButtonItemStyles, radioButtonStyles } from './utils';

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/RatingItem.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { Pressable, type ViewStyle } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
 import { Icon, type IconProps, type IconType } from '../Icon';
 import { Tooltip, type TooltipProps } from '../Tooltip';
-import { resolveStateVariant } from '../../utils';
 import { ratingItemStyles } from './utils';
 
 export type Props = Omit<IconProps, 'ref'> & {

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/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,11 +10,10 @@ const defaultStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Surface: defaultStylesDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('Surface');
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'Surface',
+    defaultStylesDefault,
+);
 
 // TODO - abstract this
 export function extractProperties(

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/Tabs.tsx

@@ -1,10 +1,10 @@
 import {
     Children,
     cloneElement,
-    FC,
+    type FC,
     isValidElement,
     memo,
-    ReactElement,
+    type ReactElement,
     useCallback,
     useEffect,
     useMemo,
@@ -13,20 +13,21 @@ import {
 } from 'react';
 import {
     Animated,
-    StyleProp,
-    ViewStyle,
-    ViewProps,
+    type LayoutChangeEvent,
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
     ScrollView as RNScrollView,
-    LayoutChangeEvent,
-    NativeSyntheticEvent,
-    NativeScrollEvent,
-    View,
     ScrollView,
+    type StyleProp,
+    View,
+    type ViewProps,
+    type ViewStyle,
 } from 'react-native';
-import type { TabItemProps } from './TabItem';
+
 import { useControlledValue } from '../../hooks';
 import { noop } from '../../utils/lodash';
 import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+import type { TabItemProps } from './TabItem';
 import { tabsStyles } from './utils';
 
 export type TabsProps = ViewProps & {
@@ -100,7 +101,7 @@ export const TabBase = ({
     const nameToIndexMap = useMemo(
         () =>
             validChildren.reduce((acc, child, currentIndex) => {
-                acc[(child as ReactElement).props?.name] = currentIndex;
+                acc[(child as ReactElement<TabItemProps>).props?.name] = currentIndex;
 
                 return acc;
             }, {} as Record<string, number>),
@@ -110,7 +111,7 @@ export const TabBase = ({
     const [value, onChange] = useControlledValue({
         value: valueProp,
         onChange: onChangeProp,
-        defaultValue: defaultValue || (validChildren[0] as ReactElement)?.props?.name,
+        defaultValue: defaultValue || (validChildren[0] as ReactElement<TabItemProps>)?.props?.name,
     });
 
     const valueIndex = nameToIndexMap[value];
@@ -311,7 +312,7 @@ export const TabBase = ({
                     style={itemsContainerStyle}>
                     {validChildren.map((child, index) => (
                         <ChildItem
-                            key={(child as ReactElement).props?.name}
+                            key={(child as ReactElement<TabItemProps>).props?.name}
                             testID={testID && `${testID}--tab-item`}
                             index={index}
                             value={value}

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,
+);