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

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -33,6 +33,7 @@ const CheckboxIOS = (
 
     styles.useVariants({
         variant: 'ios',
+        // @ts-ignore // TODO - fix this
         state: state as States,
         size,
     });

package/components/Checkbox/CheckboxBase.tsx

@@ -58,6 +58,7 @@ const CheckboxAndroid = (
 
     styles.useVariants({
         variant: 'android',
+        // @ts-ignore // TODO - fix this
         state: state as States,
         size,
     });

package/components/Checkbox/index.tsx

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

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

@@ -97,10 +97,6 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
          * Whether to show the ActivityIndicator or not
          */
         loading?: boolean;
-        /**
-         * container style
-         */
-        containerStyle?: ViewStyle;
         /**
          * left element container style
          */
@@ -132,7 +128,6 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
 const Chip = (
     {
         style,
-        containerStyle: containerStyleProp,
         label: _label,
         labelCharacterLimit = 20,
         variant = 'outlined',
@@ -158,11 +153,13 @@ const Chip = (
         leftElementIconProps,
         invertLabelColor,
         backgroundColor,
+        onPress,
         ...rest
     }: Props,
     ref: any,
 ) => {
     const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+    const Wrapper = onPress ? TouchableRipple : View;
 
     const state = resolveStateVariant({
         disabled: !!disabled,
@@ -192,47 +189,39 @@ const Chip = (
     //     selectedColorProp ? { selectedColor: selectedColorProp } : {},
     // ]);
 
-    const {
-        containerStyle,
-        touchableRippleStyle,
-        leftElementStyle,
-        rightElementStyle,
-        labelStyle,
-        stateLayerStyle,
-    } = useMemo(() => {
-        return {
-            containerStyle: [
-                styles.container,
-                selected && selectionBackgroundColor
-                    ? { backgroundColor: selectionBackgroundColor }
-                    : {},
-                containerStyleProp,
-            ],
-            touchableRippleStyle: [styles.touchableRippleContainer, style],
-            leftElementStyle: [styles.leftElement, leftElementContainerStyle],
-            rightElementStyle: [styles.rightElement, rightElementContainerStyle],
-            labelStyle: [
-                styles.label,
-                selected && selectedColor ? { color: selectedColor } : {},
-                labelStyleProp,
-            ],
-            stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        leftElementContainerStyle,
-        rightElementContainerStyle,
-        selected,
-        selectedColor,
-        selectionBackgroundColor,
-        stateLayerProps?.style,
-        style,
-        containerStyleProp,
-        labelStyleProp,
-        state,
-        size,
-        variant,
-    ]);
+    const { containerStyle, leftElementStyle, rightElementStyle, labelStyle, stateLayerStyle } =
+        useMemo(() => {
+            return {
+                containerStyle: [
+                    styles.container,
+                    selected && selectionBackgroundColor
+                        ? { backgroundColor: selectionBackgroundColor }
+                        : {},
+                    style,
+                ],
+                leftElementStyle: [styles.leftElement, leftElementContainerStyle],
+                rightElementStyle: [styles.rightElement, rightElementContainerStyle],
+                labelStyle: [
+                    styles.label,
+                    selected && selectedColor ? { color: selectedColor } : {},
+                    labelStyleProp,
+                ],
+                stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [
+            leftElementContainerStyle,
+            rightElementContainerStyle,
+            selected,
+            selectedColor,
+            selectionBackgroundColor,
+            stateLayerProps?.style,
+            style,
+            labelStyleProp,
+            state,
+            size,
+            variant,
+        ]);
 
     const { accessibilityState, elevation } = useMemo(
         () => ({
@@ -251,14 +240,13 @@ const Chip = (
             {...containerProps}
             elevation={elevation}
             style={containerStyle}
-            backgroundColor={backgroundColor}>
-            <TouchableRipple
+            backgroundColor={backgroundColor}
+            asChild>
+            <Wrapper
                 borderless
                 {...rest}
                 disabled={disabled}
-                style={touchableRippleStyle}
                 accessibilityLabel={accessibilityLabel}
-                accessibilityRole="button"
                 accessibilityState={accessibilityState}
                 ref={actionsRef}
                 testID={testID}>
@@ -297,7 +285,7 @@ const Chip = (
                         style={stateLayerStyle}
                     />
                 </>
-            </TouchableRipple>
+            </Wrapper>
         </Surface>
     );
 };
@@ -362,7 +350,7 @@ const RightElement = memo(
                 {onClose ? (
                     <IconButtonWithContrastColor
                         name="close"
-                        size={18}
+                        size={14}
                         accessibilityLabel="Close"
                         disabled={disabled}
                         onPress={onClose}

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,11 +1,14 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const chipStylesDefault = StyleSheet.create(theme => ({
     container: {
         borderRadius: theme.shapes.corner.small,
         backgroundColor: theme.colors.surface,
+        paddingHorizontal: theme.spacings['2'],
+        flexDirection: 'row',
+        alignItems: 'center',
 
         variants: {
             variant: {
@@ -47,13 +50,6 @@ const chipStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    touchableRippleContainer: {
-        flex: 1,
-        paddingHorizontal: theme.spacings['2'],
-        borderRadius: theme.shapes.corner.small,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
     label: {
         display: 'flex',
         color: theme.colors.onSurfaceVariant,
@@ -91,10 +87,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,14 +1,10 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import DatePickerInputDefault from './DatePickerInput';
 
-registerMoleculesComponents({
-    DatePickerInput: DatePickerInputDefault,
-});
-
 export const DatePickerInput = getRegisteredComponentWithFallback(
     'DatePickerInput',
     DatePickerInputDefault,
 );
 
-export { DatePickerInputProps } from './types';
+export type { DatePickerInputProps } from './types';
 export { datePickerInputStyles } from './utils';

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