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

package/components/RadioButton/utils.ts

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

package/components/Rating/index.tsx

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

package/components/Rating/utils.ts

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

package/components/StateLayer/index.tsx

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

package/components/StateLayer/utils.ts

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

package/components/Surface/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/index.tsx

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

package/components/Tabs/utils.ts

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

package/components/Text/Text.tsx

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

package/components/TextInput/TextInput.tsx

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

package/components/TextInput/index.tsx

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

package/components/TextInput/utils.ts

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

package/components/TextInputWithMask/index.tsx

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

package/components/TimePicker/AmPmSwitcher.tsx

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

package/components/TimePicker/index.tsx

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

package/components/TimePicker/utils.ts

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

package/components/TimePickerField/index.tsx

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

package/components/TimePickerField/utils.ts

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

package/components/TimePickerModal/index.tsx

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

package/components/TimePickerModal/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const timepickerModalStylesDefault = StyleSheet.create(theme => ({
     keyboardView: {
@@ -41,8 +41,7 @@ const timepickerModalStylesDefault = StyleSheet.create(theme => ({
     fill: { flex: 1 },
 }));
 
-registerComponentsStyles({
-    TimePickerModal: timepickerModalStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TimePickerModal');
+export const styles = getRegisteredComponentStylesWithFallback(
+    'TimePickerModal',
+    timepickerModalStylesDefault,
+);

package/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TooltipComponent from './Tooltip';
 import TooltipContent from './TooltipContent';
 import TooltipTrigger from './TooltipTrigger';
@@ -8,10 +8,6 @@ export const TooltipDefault = Object.assign(TooltipComponent, {
     Content: TooltipContent,
 });
 
-registerMoleculesComponents({
-    Tooltip: TooltipDefault,
-});
-
 export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
 
 export type { Props as TooltipProps } from './Tooltip';

package/components/Tooltip/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const tooltipStylesDefault = StyleSheet.create(theme => ({
     content: {
@@ -14,8 +14,7 @@ const tooltipStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Tooltip: tooltipStylesDefault,
-});
-
-export const tooltipStyles = getRegisteredMoleculesComponentStyles('Tooltip');
+export const tooltipStyles = getRegisteredComponentStylesWithFallback(
+    'Tooltip',
+    tooltipStylesDefault,
+);

package/components/TouchableRipple/index.tsx

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

package/components/TouchableRipple/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -8,8 +8,7 @@ const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     } as any,
 }));
 
-registerComponentsStyles({
-    TouchableRipple: touchableRippleStylesDefault,
-});
-
-export const touchableRippleStyles = getRegisteredMoleculesComponentStyles('TouchableRipple');
+export const touchableRippleStyles = getRegisteredComponentStylesWithFallback(
+    'TouchableRipple',
+    touchableRippleStylesDefault,
+);

package/components/VerticalDivider/VerticalDivider.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+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 = Omit<ViewProps, 'children'> & {
     /**
@@ -21,7 +21,6 @@ export type Props = Omit<ViewProps, 'children'> & {
      *  Horizontal spacing of the Divider
      */
     spacing?: number;
-    style?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -70,9 +69,9 @@ const VerticalDivider = ({
             style={[
                 verticalDividerStyles.root,
                 style,
-                topInset && { marginTop: topInset },
-                bottomInset && { marginBottom: bottomInset },
-                spacing && { marginHorizontal: spacing },
+                topInset ? { marginTop: topInset } : undefined,
+                bottomInset ? { marginBottom: bottomInset } : undefined,
+                spacing ? { marginHorizontal: spacing } : undefined,
             ]}
         />
     );
@@ -93,7 +92,9 @@ export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('VerticalDivider', verticalDividerStylesDefault);
-export const verticalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
 
 export default memo(VerticalDivider);

package/components/VerticalDivider/index.tsx

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