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

package/components/Checkbox/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const PADDING = 6;
 
@@ -13,6 +13,10 @@ export const iconSizeMap = {
 const checkboxStylesDefault = StyleSheet.create(theme => ({
     root: {
         variants: {
+            variant: {
+                android: {},
+                ios: {},
+            },
             size: {
                 sm: {
                     padding: PADDING,
@@ -203,8 +207,4 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
     // },
 }));
 
-registerComponentsStyles({
-    Checkbox: checkboxStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('Checkbox') ?? checkboxStylesDefault;
+export const styles = getRegisteredComponentStylesWithFallback('Checkbox', checkboxStylesDefault);

package/components/Chip/index.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import { default as ChipComponent, type Props as ChipProps } from './Chip';
 
 export const ChipDefault = Object.assign(
@@ -40,10 +40,6 @@ export const ChipDefault = Object.assign(
     },
 );
 
-registerMoleculesComponents({
-    Chip: ChipDefault,
-});
-
 export const Chip = getRegisteredComponentWithFallback('Chip', ChipDefault);
 
 export type { Props as ChipProps } from './Chip';

package/components/Chip/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const chipStylesDefault = StyleSheet.create(theme => ({
     container: {
@@ -91,10 +91,6 @@ const chipStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Chip: chipStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('Chip');
+export const styles = getRegisteredComponentStylesWithFallback('Chip', chipStylesDefault);
 
 export type States = 'hovered' | 'selectedAndHovered' | 'selected' | 'disabled';

package/components/DatePickerDocked/index.tsx

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

package/components/DatePickerDocked/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const datePickerDockedStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -131,25 +131,27 @@ const datePickerDockedMonthStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    DatePickerDocked: datePickerDockedStylesDefault,
-    DatePickerDocked_Header: datePickerDockedHeaderStylesDefault,
-    DatePicker_HeaderItem: datePickerHeaderItemStylesDefault,
-    DatePickerDocked_MonthPicker: datePickerMonthPickerStylesDefault,
-    DatePickerDocked_MonthItem: datePickerDockedMonthItemStylesDefault,
-    DatePickerDocked_Month: datePickerDockedMonthStylesDefault,
-});
-
-export const datePickerDockedStyles = getRegisteredMoleculesComponentStyles('DatePickerDocked');
-export const datePickerDockedHeaderStyles =
-    getRegisteredMoleculesComponentStyles('DatePickerDocked_Header');
-export const datePickerHeaderItemStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_HeaderItem');
-export const datePickerMonthPickerStyles = getRegisteredMoleculesComponentStyles(
+export const datePickerDockedStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerDocked',
+    datePickerDockedStylesDefault,
+);
+export const datePickerDockedHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerDocked_Header',
+    datePickerDockedHeaderStylesDefault,
+);
+export const datePickerHeaderItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_HeaderItem',
+    datePickerHeaderItemStylesDefault,
+);
+export const datePickerMonthPickerStyles = getRegisteredComponentStylesWithFallback(
     'DatePickerDocked_MonthPicker',
+    datePickerMonthPickerStylesDefault,
 );
-export const datePickerDockedMonthItemStyles = getRegisteredMoleculesComponentStyles(
+export const datePickerDockedMonthItemStyles = getRegisteredComponentStylesWithFallback(
     'DatePickerDocked_MonthItem',
+    datePickerDockedMonthItemStylesDefault,
+);
+export const datePickerDockedMonthStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerDocked_Month',
+    datePickerDockedMonthStylesDefault,
 );
-export const datePickerDockedMonthStyles =
-    getRegisteredMoleculesComponentStyles('DatePickerDocked_Month');

package/components/DatePickerInline/index.tsx

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

package/components/DatePickerInline/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { daySize } from './dateUtils';
 
 export const dayNamesHeight = 44;
@@ -338,30 +338,43 @@ const datePickerYearItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    DatePickerInline: datePickerStylesDefault,
-    DatePicker_Month: datePickerMonthStylesDefault,
-    DatePicker_YearPicker: datePickerYearPickerStylesDefault,
-    DatePicker_Day: datePickerDayStylesDefault,
-    DatePicker_DayEmpty: datePickerDayEmptyStylesDefault,
-    DatePicker_Week: datePickerWeekStylesDefault,
-    DatePicker_Header: datePickerHeaderStylesDefault,
-    DatePicker_DayName: dateDayNameStylesDefault,
-    DatePicker_DayRange: datePickerDayRangeStylesDefault,
-    DatePicker_YearItem: datePickerYearItemStylesDefault,
-});
-
-export const datePickerStyles = getRegisteredMoleculesComponentStyles('DatePickerInline');
-export const datePickerMonthStyles = getRegisteredMoleculesComponentStyles('DatePicker_Month');
-export const datePickerYearPickerStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_YearPicker');
-export const datePickerDayStyles = getRegisteredMoleculesComponentStyles('DatePicker_Day');
-export const datePickerDayEmptyStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_DayEmpty');
-export const datePickerWeekStyles = getRegisteredMoleculesComponentStyles('DatePicker_Week');
-export const datePickerHeaderStyles = getRegisteredMoleculesComponentStyles('DatePicker_Header');
-export const dateDayNameStyles = getRegisteredMoleculesComponentStyles('DatePicker_DayName');
-export const datePickerDayRangeStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_DayRange');
-export const datePickerYearItemStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_YearItem');
+export const datePickerStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerInline',
+    datePickerStylesDefault,
+);
+export const datePickerMonthStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Month',
+    datePickerMonthStylesDefault,
+);
+export const datePickerYearPickerStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_YearPicker',
+    datePickerYearPickerStylesDefault,
+);
+export const datePickerDayStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Day',
+    datePickerDayStylesDefault,
+);
+export const datePickerDayEmptyStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_DayEmpty',
+    datePickerDayEmptyStylesDefault,
+);
+export const datePickerWeekStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Week',
+    datePickerWeekStylesDefault,
+);
+export const datePickerHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Header',
+    datePickerHeaderStylesDefault,
+);
+export const dateDayNameStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_DayName',
+    dateDayNameStylesDefault,
+);
+export const datePickerDayRangeStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_DayRange',
+    datePickerDayRangeStylesDefault,
+);
+export const datePickerYearItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_YearItem',
+    datePickerYearItemStylesDefault,
+);

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/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/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/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';