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

package/components/DatePickerInput/DatePickerInputWithoutModal.tsx

@@ -7,13 +7,11 @@ import { datePickerInputStyles } from './utils';
 
 function DatePickerInputWithoutModal(
     {
-        label,
         value,
         onChange: onChangeProp,
         // locale = 'en',
         validRange,
         inputMode,
-        inputButtons,
         dateFormat = 'dd/MM/yyyy',
         style,
         onBlur: onBlurProp,
@@ -61,14 +59,12 @@ function DatePickerInputWithoutModal(
             onBlur={onBlur}
             onFocus={onFocus}
             ref={inputRef}
-            label={label}
             value={formattedValue}
             keyboardType={'number-pad'}
             mask={dateFormat}
             onChangeText={onChangeText}
             // keyboardAppearance={theme.dark ? 'dark' : 'default'}
             // error={formattedValue ? !!error : false}
-            right={inputButtons}
             // supportingText={formattedValue ? error || undefined : undefined}
         />
     );

package/components/DatePickerInput/index.tsx

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

package/components/DatePickerInput/types.ts

@@ -23,6 +23,4 @@ export interface DatePickerInputProps
     endYear?: number;
     dockedPopoverContentProps?: ViewProps;
 }
-export interface DatePickerInputWithoutModalProps extends Omit<DatePickerInputProps, 'withModal'> {
-    inputButtons?: any;
-}
+export interface DatePickerInputWithoutModalProps extends Omit<DatePickerInputProps, 'withModal'> {}

package/components/DatePickerInput/utils.ts

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

package/components/DatePickerModal/CalendarEdit.tsx

@@ -3,6 +3,7 @@ import { Keyboard, TextInput as TextInputNative, View } from 'react-native';
 
 import type { ModeType, ValidRangeType } from '../DatePickerInline';
 import DatePickerInputWithoutModal from '../DatePickerInput/DatePickerInputWithoutModal';
+import { TextInput } from '../TextInput';
 import type { LocalState, LocalStateRange, LocalStateSingle } from './types';
 import { datePickerModalEditStyles } from './utils';
 
@@ -91,14 +92,14 @@ Props) {
                     <DatePickerInputWithoutModal
                         inputMode="start"
                         ref={dateInput}
-                        label={label}
                         value={(state as LocalStateSingle).date}
                         onChange={onSingleInputChange}
                         onSubmitEditing={onSubmitInput}
                         validRange={validRange}
                         // locale={locale}
-                        autoComplete={'off'}
-                    />
+                        autoComplete={'off'}>
+                        <TextInput.Label>{label}</TextInput.Label>
+                    </DatePickerInputWithoutModal>
                 ) : null}
             </>
 
@@ -108,27 +109,27 @@ Props) {
                         <DatePickerInputWithoutModal
                             inputMode="start"
                             ref={startInput}
-                            label={startLabel}
                             value={(state as LocalStateRange).startDate}
                             onChange={onStartDateChange}
                             returnKeyType={'next'}
                             onSubmitEditing={onSubmitStartInput}
                             validRange={validRange}
                             // locale={locale}
-                            autoComplete={'off'}
-                        />
+                            autoComplete={'off'}>
+                            <TextInput.Label>{startLabel}</TextInput.Label>
+                        </DatePickerInputWithoutModal>
                         <View style={datePickerModalEditStyles.separator} />
                         <DatePickerInputWithoutModal
                             inputMode="end"
                             ref={endInput}
-                            label={endLabel}
                             value={(state as LocalStateRange).endDate}
                             onChange={onEndDateChange}
                             onSubmitEditing={onSubmitEndInput}
                             validRange={validRange}
                             // locale={locale}
-                            autoComplete="off"
-                        />
+                            autoComplete="off">
+                            <TextInput.Label>{endLabel}</TextInput.Label>
+                        </DatePickerInputWithoutModal>
                     </View>
                 ) : null}
             </>

package/components/DatePickerModal/DatePickerModalHeader.tsx

@@ -64,7 +64,7 @@ export default function DatePickerModalHeader(props: DatePickerModalHeaderProps)
                             onPress={props.onSave}
                             disabled={props.saveLabelDisabled || false}
                             testID="dates-save">
-                            {saveLabel}
+                            <Button.Text>{saveLabel}</Button.Text>
                         </Button>
                     </View>
                 </SafeAreaView>

package/components/DatePickerModal/index.tsx

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

package/components/DatePickerModal/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const datePickerModalStylesDefault = StyleSheet.create(theme => ({
     header: {
@@ -100,22 +100,23 @@ const datePickerModalEditStylesDefault = StyleSheet.create(theme => ({
     separator: { width: 12 },
 }));
 
-registerComponentsStyles({
-    DatePickerModal: datePickerModalStylesDefault,
-    DatePickerModal_Header: datePickerModalHeaderStylesDefault,
-    DatePickerModal_ContentHeader: datePickerModalContentHeaderStylesDefault,
-    DatePickerModal_HeaderBackground: datePickerModalHeaderBackgroundStylesDefault,
-    DatePickerModal_Edit: datePickerModalEditStylesDefault,
-});
-
-export const datePickerModalStyles = getRegisteredMoleculesComponentStyles('DatePickerModal');
-export const datePickerModalHeaderStyles =
-    getRegisteredMoleculesComponentStyles('DatePickerModal_Header');
-export const datePickerModalContentHeaderStyles = getRegisteredMoleculesComponentStyles(
+export const datePickerModalStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal',
+    datePickerModalStylesDefault,
+);
+export const datePickerModalHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_Header',
+    datePickerModalHeaderStylesDefault,
+);
+export const datePickerModalContentHeaderStyles = getRegisteredComponentStylesWithFallback(
     'DatePickerModal_ContentHeader',
+    datePickerModalContentHeaderStylesDefault,
 );
-export const datePickerModalHeaderBackgroundStyles = getRegisteredMoleculesComponentStyles(
+export const datePickerModalHeaderBackgroundStyles = getRegisteredComponentStylesWithFallback(
     'DatePickerModal_HeaderBackground',
+    datePickerModalHeaderBackgroundStylesDefault,
+);
+export const datePickerModalEditStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_Edit',
+    datePickerModalEditStylesDefault,
 );
-export const datePickerModalEditStyles =
-    getRegisteredMoleculesComponentStyles('DatePickerModal_Edit');

package/components/DateTimePicker/index.tsx

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

package/components/DateTimePicker/utils.ts

@@ -1,13 +1,12 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const dateTimePickerStylesDefault = StyleSheet.create({
     container: {},
 });
 
-registerComponentsStyles({
-    DateTimePicker: dateTimePickerStylesDefault,
-});
-
-export const dateTimePickerStyles = getRegisteredMoleculesComponentStyles('DateTimePicker');
+export const dateTimePickerStyles = getRegisteredComponentStylesWithFallback(
+    'DateTimePicker',
+    dateTimePickerStylesDefault,
+);

package/components/Dialog/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import DialogComponent from './Dialog';
 import DialogActions from './DialogActions';
 import DialogContent from './DialogContent';
@@ -17,10 +17,6 @@ export const DialogDefault = Object.assign(
     },
 );
 
-registerMoleculesComponents({
-    Dialog: DialogDefault,
-});
-
 export const Dialog = getRegisteredComponentWithFallback('Dialog', DialogDefault);
 
 export type { Props as DialogProps } from './Dialog';

package/components/Dialog/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const dialogStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -63,18 +63,24 @@ const dialogActionsStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Dialog: dialogStylesDefault,
-    Dialog_Title: dialogTitleStylesDefault,
-    Dialog_ScrollArea: dialogScrollAreaStylesDefault,
-    Dialog_Icon: dialogIconStylesDefault,
-    Dialog_Content: dialogContentStylesDefault,
-    Dialog_Actions: dialogActionsStylesDefault,
-});
-
-export const dialogStyles = getRegisteredMoleculesComponentStyles('Dialog');
-export const dialogTitleStyles = getRegisteredMoleculesComponentStyles('Dialog_Title');
-export const dialogScrollAreaStyles = getRegisteredMoleculesComponentStyles('Dialog_ScrollArea');
-export const dialogIconStyles = getRegisteredMoleculesComponentStyles('Dialog_Icon');
-export const dialogContentStyles = getRegisteredMoleculesComponentStyles('Dialog_Content');
-export const dialogActionsStyles = getRegisteredMoleculesComponentStyles('Dialog_Actions');
+export const dialogStyles = getRegisteredComponentStylesWithFallback('Dialog', dialogStylesDefault);
+export const dialogTitleStyles = getRegisteredComponentStylesWithFallback(
+    'Dialog_Title',
+    dialogTitleStylesDefault,
+);
+export const dialogScrollAreaStyles = getRegisteredComponentStylesWithFallback(
+    'Dialog_ScrollArea',
+    dialogScrollAreaStylesDefault,
+);
+export const dialogIconStyles = getRegisteredComponentStylesWithFallback(
+    'Dialog_Icon',
+    dialogIconStylesDefault,
+);
+export const dialogContentStyles = getRegisteredComponentStylesWithFallback(
+    'Dialog_Content',
+    dialogContentStylesDefault,
+);
+export const dialogActionsStyles = getRegisteredComponentStylesWithFallback(
+    'Dialog_Actions',
+    dialogActionsStylesDefault,
+);

package/components/Drawer/Collapsible/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../../core';
 
 export const drawerCollapsibleStylesDefault = StyleSheet.create({
     root: {},
@@ -31,19 +31,19 @@ export const drawerCollapsibleItemContentStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentsStyles({
-    Drawer_Collapsible: drawerCollapsibleStylesDefault,
-    Drawer_CollapsibleItem: drawerCollapsibleItemStylesDefault,
-    Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStylesDefault,
-    Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStylesDefault,
-});
-
-export const drawerCollapsibleStyles = getRegisteredMoleculesComponentStyles('Drawer_Collapsible');
-export const drawerCollapsibleItemStyles =
-    getRegisteredMoleculesComponentStyles('Drawer_CollapsibleItem');
-export const drawerCollapsibleItemHeaderStyles = getRegisteredMoleculesComponentStyles(
+export const drawerCollapsibleStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Collapsible',
+    drawerCollapsibleStylesDefault,
+);
+export const drawerCollapsibleItemStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_CollapsibleItem',
+    drawerCollapsibleItemStylesDefault,
+);
+export const drawerCollapsibleItemHeaderStyles = getRegisteredComponentStylesWithFallback(
     'Drawer_CollapsibleItem_Header',
+    drawerCollapsibleItemHeaderStylesDefault,
 );
-export const drawerCollapsibleItemContentStyles = getRegisteredMoleculesComponentStyles(
+export const drawerCollapsibleItemContentStyles = getRegisteredComponentStylesWithFallback(
     'Drawer_CollapsibleItem_Content',
+    drawerCollapsibleItemContentStylesDefault,
 );

package/components/Drawer/Drawer.tsx

@@ -2,7 +2,7 @@ import { memo, type ReactElement } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { useSubcomponents } from '../../hooks';
 
 export type Props = Omit<ViewProps, 'children'> & {
@@ -37,7 +37,6 @@ const drawerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Drawer', drawerStylesDefault);
-export const drawerStyles = getRegisteredMoleculesComponentStyles('Drawer');
+export const drawerStyles = getRegisteredComponentStylesWithFallback('Drawer', drawerStylesDefault);
 
 export default memo(Drawer);

package/components/Drawer/DrawerContent.tsx

@@ -2,7 +2,7 @@ import { type ComponentType, memo } from 'react';
 import { ScrollView, type ScrollViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ScrollViewProps & {
     /**
@@ -27,8 +27,10 @@ const drawerContentStylesDefault = StyleSheet.create(theme => ({
         flex: 1,
     },
 }));
-registerComponentStyles('Drawer_Content', drawerContentStylesDefault);
-export const drawerContentStyles = getRegisteredMoleculesComponentStyles('Drawer_Content');
+export const drawerContentStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Content',
+    drawerContentStylesDefault,
+);
 
 DrawerContent.displayName = 'Drawer_Content';
 

package/components/Drawer/DrawerFooter.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {};
 
@@ -20,8 +20,9 @@ const drawerFooterStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentStyles('Drawer_Footer', drawerFooterStylesDefault);
-
-export const drawerFooterStyles = getRegisteredMoleculesComponentStyles('Drawer_Footer');
+export const drawerFooterStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Footer',
+    drawerFooterStylesDefault,
+);
 
 export default DrawerFooter;

package/components/Drawer/DrawerHeader.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {};
 
@@ -20,8 +20,9 @@ const drawerHeaderStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentStyles('Drawer_Header', drawerHeaderStylesDefault);
-
-export const drawerHeaderStyles = getRegisteredMoleculesComponentStyles('Drawer_Header');
+export const drawerHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Header',
+    drawerHeaderStylesDefault,
+);
 
 export default DrawerHeader;

package/components/Drawer/DrawerItem.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode, useMemo } from 'react';
 import { type TextProps, type TextStyle, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { useActionState } from '../../hooks';
 import type { WithElements } from '../../types';
 import { resolveStateVariant } from '../../utils';
@@ -200,7 +200,9 @@ const drawerItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Drawer_Item', drawerItemStylesDefault);
-export const drawerItemStyles = getRegisteredMoleculesComponentStyles('Drawer_Item');
+export const drawerItemStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Item',
+    drawerItemStylesDefault,
+);
 
 export default memo(forwardRef(DrawerItem));

package/components/Drawer/DrawerItemGroup.tsx

@@ -2,7 +2,7 @@ import { memo, type ReactNode, useMemo } from 'react';
 import { type TextProps, View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
 import { Text } from '../Text';
 
@@ -73,9 +73,10 @@ const drawerItemGroupStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Drawer_ItemGroup', drawerItemGroupStylesDefault);
-
-export const drawerItemGroupStyles = getRegisteredMoleculesComponentStyles('Drawer_ItemGroup');
+export const drawerItemGroupStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_ItemGroup',
+    drawerItemGroupStylesDefault,
+);
 
 DrawerItemGroup.displayName = 'Drawer_ItemGroup';
 

package/components/Drawer/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import { DrawerCollapsible, DrawerCollapsibleItem } from './Collapsible';
 import DrawerComponent from './Drawer';
 import DrawerContent from './DrawerContent';
@@ -17,10 +17,6 @@ const DrawerDefault = Object.assign(DrawerComponent, {
     CollapsibleItem: DrawerCollapsibleItem,
 });
 
-registerMoleculesComponents({
-    Drawer: DrawerDefault,
-});
-
 export const Drawer = getRegisteredComponentWithFallback('Drawer', DrawerDefault);
 
 export {

package/components/Drawer/utils.ts

@@ -1,8 +1,8 @@
-import { registerComponentsStyles } from '../../core';
+// import { registerComponentsStyles } from '../../core';
 
-registerComponentsStyles({
-    // Drawer_Collapsible: drawerCollapsibleStyles,
-    // Drawer_CollapsibleItem: drawerCollapsibleItemStyles,
-    // Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStyles,
-    // Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStyles,
-});
+// registerComponentsStyles({
+// Drawer_Collapsible: drawerCollapsibleStyles,
+// Drawer_CollapsibleItem: drawerCollapsibleItemStyles,
+// Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStyles,
+// Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStyles,
+// });

package/components/ElementGroup/ElementGroup.tsx

@@ -1,6 +1,7 @@
 import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { isNil } from '../../utils/lodash';
 import { elementGroupStyles } from './utils';
 
@@ -44,24 +45,25 @@ export const ElementGroup = (
             borderTopRightRadius,
             borderBottomLeftRadius,
             borderBottomRightRadius,
-            ...restStyle
-        } = elementGroupStyles.root as any;
-        const {
-            borderTopLeftRadius: _borderTopLeftRadius,
-            borderTopRightRadius: _borderTopRightRadius,
-            borderBottomLeftRadius: _borderBottomLeftRadius,
-            borderBottomRightRadius: _borderBottomRightRadius,
-            ..._restStyle
-        } = style ?? {};
+        } = extractPropertiesFromStyles(
+            [elementGroupStyles.root, style],
+            [
+                'borderRadius',
+                'borderTopLeftRadius',
+                'borderTopRightRadius',
+                'borderBottomLeftRadius',
+                'borderBottomRightRadius',
+            ],
+        );
 
         return {
-            containerStyle: [restStyle, _restStyle],
+            containerStyle: [elementGroupStyles.root, style],
             borderRadius: borderRadiusProp || _borderRadius,
             borderRadiuses: {
-                borderTopLeftRadius: borderTopLeftRadius || _borderTopLeftRadius,
-                borderTopRightRadius: borderTopRightRadius || _borderTopRightRadius,
-                borderBottomLeftRadius: borderBottomLeftRadius || _borderBottomLeftRadius,
-                borderBottomRightRadius: borderBottomRightRadius || _borderBottomRightRadius,
+                borderTopLeftRadius: borderTopLeftRadius,
+                borderTopRightRadius: borderTopRightRadius,
+                borderBottomLeftRadius: borderBottomLeftRadius,
+                borderBottomRightRadius: borderBottomRightRadius,
             },
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/components/ElementGroup/index.tsx

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

package/components/ElementGroup/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const elementGroupStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -18,8 +18,7 @@ const elementGroupStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    ElementGroup: elementGroupStylesDefault,
-});
-
-export const elementGroupStyles = getRegisteredMoleculesComponentStyles('ElementGroup');
+export const elementGroupStyles = getRegisteredComponentStylesWithFallback(
+    'ElementGroup',
+    elementGroupStylesDefault,
+);

package/components/FAB/index.tsx

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

package/components/FAB/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export const iconSizeMap = {
     xs: 18,
@@ -212,10 +212,6 @@ const fabStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    FAB: fabStylesDefault,
-});
-
-export const fabStyles = getRegisteredMoleculesComponentStyles('FAB');
+export const fabStyles = getRegisteredComponentStylesWithFallback('FAB', fabStylesDefault);
 
 export type States = 'hovered' | 'disabled';