@idealyst/components 1.1.7 → 1.1.8

package/src/RadioButton/RadioButton.styles.tsx

@@ -1,179 +1,108 @@
+/**
+ * RadioButton styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-type RadioButtonSize = Size;
-type RadioButtonIntent = Intent;
-type RadioGroupOrientation = 'horizontal' | 'vertical';
-
-type RadioButtonVariants = {
-    size: RadioButtonSize;
-    intent: RadioButtonIntent;
-    checked: boolean;
-    disabled: boolean;
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type RadioGroupVariants = {
-    orientation: RadioGroupOrientation;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedRadioButtonStyles = StylesheetStyles<keyof RadioButtonVariants>;
-export type ExpandedRadioGroupStyles = StylesheetStyles<keyof RadioGroupVariants>;
-
-export type RadioButtonStylesheet = {
-    container: ExpandedRadioButtonStyles;
-    radio: ExpandedRadioButtonStyles;
-    radioDot: ExpandedRadioButtonStyles;
-    label: ExpandedRadioButtonStyles;
-    groupContainer: ExpandedRadioGroupStyles;
-}
+type RadioGroupOrientation = 'horizontal' | 'vertical';
 
-function createRadioSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'radioButton', (size) => ({
-        width: size.radioSize,
-        height: size.radioSize,
-    }));
-}
+export type RadioButtonDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    checked?: boolean;
+    disabled?: boolean;
+    orientation?: RadioGroupOrientation;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
-function createCheckedVariants(theme: Theme, intent: RadioButtonIntent) {
-    const intentValue = theme.intents[intent];
-    return {
-        true: {
-            borderColor: intentValue.primary,
-        },
-        false: {
-            borderColor: theme.colors.border.primary,
+/**
+ * RadioButton styles with intent/checked/disabled handling.
+ */
+export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
+    container: (_props: RadioButtonDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        paddingVertical: 4,
+        variants: {
+            size: {
+                gap: theme.sizes.$radioButton.gap,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
         },
-    } as const;
-}
-
-function createRadioDotSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'radioButton', (size) => ({
-        width: size.radioDotSize,
-        height: size.radioDotSize,
-    }));
-}
+    }),
 
-function createRadioDotIntentColor(theme: Theme, intent: RadioButtonIntent) {
-    return theme.intents[intent].primary;
-}
+    radio: ({ intent = 'primary', checked = false, disabled = false }: RadioButtonDynamicProps) => {
+        const intentValue = theme.intents[intent];
 
-function createRadioStyles(theme: Theme) {
-    return ({ intent }: Partial<RadioButtonVariants>) => {
         return {
             borderRadius: 9999,
             borderWidth: 1.5,
-            borderStyle: 'solid',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: theme.colors.surface.primary,
+            borderStyle: 'solid' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            backgroundColor: disabled
+                ? theme.colors.surface.tertiary
+                : theme.colors.surface.primary,
+            borderColor: checked ? intentValue.primary : theme.colors.border.primary,
+            opacity: disabled ? 0.5 : 1,
             variants: {
-                size: createRadioSizeVariants(theme),
-                checked: createCheckedVariants(theme, intent),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        backgroundColor: theme.colors.surface.tertiary,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        backgroundColor: theme.colors.surface.primary,
-                        _web: {
-                            cursor: 'pointer',
-                            _hover: {
-                                opacity: 0.8,
-                            },
-                            _active: {
-                                opacity: 0.6,
-                            },
-                        },
-                    },
+                size: {
+                    width: theme.sizes.$radioButton.radioSize,
+                    height: theme.sizes.$radioButton.radioSize,
                 },
             },
             _web: {
                 transition: 'all 0.2s ease',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                _hover: disabled ? {} : { opacity: 0.8 },
+                _active: disabled ? {} : { opacity: 0.6 },
             },
         } as const;
-    }
-}
-
-function createRadioDotStyles(theme: Theme) {
-    return ({ intent }: Partial<RadioButtonVariants>) => {
-        return {
-            borderRadius: 9999,
-            backgroundColor: createRadioDotIntentColor(theme, intent),
-            variants: {
-                size: createRadioDotSizeVariants(theme),
-            },
-        } as const;
-    }
-}
+    },
 
-// Container style creator for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        paddingVertical: 4,
+    radioDot: ({ intent = 'primary' }: RadioButtonDynamicProps) => ({
+        borderRadius: 9999,
+        backgroundColor: theme.intents[intent].primary,
         variants: {
-            size: buildSizeVariants(theme, 'radioButton', (size) => ({
-                gap: size.gap,
-            })),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        } as const,
-    });
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-export const radioButtonStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('RadioButton', theme, {
-        container: createContainerStyles(theme),
-        radio: createRadioStyles(theme),
-        radioDot: createRadioDotStyles(theme),
-    });
-
-    return {
-        ...extended,
-        // Minor utility styles
-        label: {
-            color: theme.colors.text.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'radioButton', (size) => ({
-                    fontSize: size.fontSize,
-                })),
-                disabled: {
-                    true: { opacity: 0.5 },
-                    false: { opacity: 1 },
-                },
+            size: {
+                width: theme.sizes.$radioButton.radioDotSize,
+                height: theme.sizes.$radioButton.radioDotSize,
             },
         },
-        groupContainer: {
-            gap: 4,
-            variants: {
-                orientation: {
-                    horizontal: {
-                        flexDirection: 'row',
-                        flexWrap: 'wrap',
-                        gap: 16,
-                    },
-                    vertical: {
-                        flexDirection: 'column',
-                    },
-                },
+    }),
+
+    label: ({ disabled = false }: RadioButtonDynamicProps) => ({
+        color: theme.colors.text.primary,
+        opacity: disabled ? 0.5 : 1,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$radioButton.fontSize,
             },
         },
-    };
-});
+    }),
+
+    groupContainer: ({ orientation = 'vertical' }: RadioButtonDynamicProps) => ({
+        gap: 4,
+        flexDirection: orientation === 'horizontal' ? ('row' as const) : ('column' as const),
+        flexWrap: orientation === 'horizontal' ? ('wrap' as const) : undefined,
+        ...(orientation === 'horizontal' ? { gap: 16 } : {}),
+    }),
+}));

package/src/RadioButton/RadioButton.web.tsx

@@ -88,9 +88,9 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   });
 
   const containerProps = getWebProps([(radioButtonStyles.container as any)({}), style]);
-  const radioProps = getWebProps([(radioButtonStyles.radio as any)({ intent })]);
+  const radioProps = getWebProps([(radioButtonStyles.radio as any)({ intent, checked, disabled })]);
   const dotProps = getWebProps([(radioButtonStyles.radioDot as any)({ intent })]);
-  const labelProps = getWebProps([radioButtonStyles.label]);
+  const labelProps = getWebProps([(radioButtonStyles.label as any)({ disabled })]);
 
   return (
     <button

package/src/SVGImage/SVGImage.styles.old.tsx

@@ -0,0 +1,86 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type SVGImageIntent = Intent;
+
+type SVGImageVariants = {
+    intent: SVGImageIntent;
+}
+
+export type ExpandedSVGImageStyles = StylesheetStyles<keyof SVGImageVariants>;
+
+export type SVGImageStylesheet = {
+    container: ExpandedSVGImageStyles;
+    image: ExpandedSVGImageStyles;
+}
+
+function createContainerIntentVariants(theme: Theme) {
+    return {
+        primary: {
+            filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
+        },
+        success: {
+            filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
+        },
+        error: {
+            filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
+        },
+        warning: {
+            filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
+        },
+        neutral: {
+            filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
+        },
+        info: {
+            filter: `brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)`,
+        },
+    };
+}
+
+function createContainerNativeIntentVariants(theme: Theme) {
+    const variants: Record<SVGImageIntent, any> = {} as any;
+    for (const intent in theme.intents) {
+        variants[intent as SVGImageIntent] = {
+            tintColor: theme.intents[intent as SVGImageIntent].primary,
+        };
+    }
+    return variants;
+}
+
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            intent: createContainerIntentVariants(theme),
+        },
+        _web: {
+            userSelect: 'none',
+        },
+        _native: {
+            variants: {
+                intent: createContainerNativeIntentVariants(theme),
+            },
+        },
+    });
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const svgImageStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('SVGImage', theme, {container: createContainerStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        image: {
+            _web: {
+                display: 'block',
+                maxWidth: '100%',
+                height: 'auto',
+            },
+        }});
+});

package/src/SVGImage/SVGImage.styles.tsx

@@ -1,90 +1,47 @@
+/**
+ * SVGImage styles using defineStyle with dynamic intent handling.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent} from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
 
-type SVGImageIntent = Intent;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type SVGImageVariants = {
-    intent: SVGImageIntent;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedSVGImageStyles = StylesheetStyles<keyof SVGImageVariants>;
+export type SVGImageDynamicProps = {
+    intent?: Intent;
+};
 
-export type SVGImageStylesheet = {
-    container: ExpandedSVGImageStyles;
-    image: ExpandedSVGImageStyles;
-}
-
-function createContainerIntentVariants(theme: Theme) {
-    return {
-        primary: {
-            filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
-        },
-        success: {
-            filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
-        },
-        error: {
-            filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
-        },
-        warning: {
-            filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
-        },
-        neutral: {
-            filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
-        },
-        info: {
-            filter: `brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)`,
-        },
-    };
-}
-
-function createContainerNativeIntentVariants(theme: Theme) {
-    const variants: Record<SVGImageIntent, any> = {} as any;
-    for (const intent in theme.intents) {
-        variants[intent as SVGImageIntent] = {
-            tintColor: theme.intents[intent as SVGImageIntent].primary,
-        };
-    }
-    return variants;
-}
-
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
+/**
+ * SVGImage styles with intent-based coloring.
+ * Uses CSS filters on web and tintColor on native.
+ */
+export const svgImageStyles = defineStyle('SVGImage', (theme: Theme) => ({
+    container: ({ intent }: SVGImageDynamicProps) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        variants: {
-            intent: createContainerIntentVariants(theme),
-        },
+        // Native: use tintColor for intent
+        ...(intent ? { tintColor: theme.intents[intent].primary } : {}),
         _web: {
             userSelect: 'none',
+            // Web: use CSS filters for intent coloring
+            ...(intent === 'primary' ? { filter: 'brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)' } : {}),
+            ...(intent === 'success' ? { filter: 'brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)' } : {}),
+            ...(intent === 'error' ? { filter: 'brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)' } : {}),
+            ...(intent === 'warning' ? { filter: 'brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)' } : {}),
+            ...(intent === 'neutral' ? { filter: 'brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)' } : {}),
+            ...(intent === 'info' ? { filter: 'brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)' } : {}),
         },
-        _native: {
-            variants: {
-                intent: createContainerNativeIntentVariants(theme),
-            },
-        },
-    });
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const svgImageStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('SVGImage', theme, {
-        container: createContainerStyles(theme),
-    });
+    }),
 
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        image: {
-            _web: {
-                display: 'block',
-                maxWidth: '100%',
-                height: 'auto',
-            },
+    image: (_props: SVGImageDynamicProps) => ({
+        _web: {
+            display: 'block',
+            maxWidth: '100%',
+            height: 'auto',
         },
-    };
-});
+    }),
+}));

package/src/Screen/Screen.native.tsx

@@ -24,6 +24,7 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
 }, ref) => {
   const insets = useSafeAreaInsets();
 
+  // Set active variants for this render
   screenStyles.useVariants({
     background,
     safeArea,
@@ -36,6 +37,9 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
     marginHorizontal,
   });
 
+  // Call styles as functions to get theme-reactive styles
+  const screenStyle = (screenStyles.screen as any)({});
+
   // Calculate safe area padding
   const safeAreaStyle = safeArea ? {
     paddingTop: insets.top,
@@ -45,43 +49,32 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   } : undefined;
 
   if (scrollable) {
-    // For ScrollView, flex: 1 goes on the ScrollView style
-    // Background and padding go on contentContainerStyle (without flex: 1)
-    const scrollViewStyle = [{ flex: 1 }, style];
-
-    const contentContainerStyleArray = [
-      screenStyles.screenContent,
-      safeAreaStyle,
-      contentInset ? {
-        paddingTop: (safeArea ? insets.top : 0) + (contentInset.top ?? 0),
-        paddingBottom: (safeArea ? insets.bottom : 0) + (contentInset.bottom ?? 0),
-        paddingLeft: (safeArea ? insets.left : 0) + (contentInset.left ?? 0),
-        paddingRight: (safeArea ? insets.right : 0) + (contentInset.right ?? 0),
-      } : undefined,
-    ];
+    // Content styles applied via View wrapper for Unistyles reactivity
+    // (contentContainerStyle isn't reactive, only style prop is)
+    const contentInsetStyle = contentInset ? {
+      paddingTop: (safeArea ? insets.top : 0) + (contentInset.top ?? 0),
+      paddingBottom: (safeArea ? insets.bottom : 0) + (contentInset.bottom ?? 0),
+      paddingLeft: (safeArea ? insets.left : 0) + (contentInset.left ?? 0),
+      paddingRight: (safeArea ? insets.right : 0) + (contentInset.right ?? 0),
+    } : safeAreaStyle;
 
     return (
       <RNScrollView
         ref={ref as any}
         nativeID={id}
-        style={scrollViewStyle}
-        contentContainerStyle={contentContainerStyleArray}
+        style={[screenStyle, style]}
+        contentContainerStyle={{ flexGrow: 1 }}
         testID={testID}
       >
-        {children}
+        <RNView style={[contentInsetStyle, { flex: 1 }]}>
+          {children}
+        </RNView>
       </RNScrollView>
     );
   }
 
-  const screenStyle = (screenStyles.screen as any)({});
-  const containerStyle = [
-    screenStyle,
-    safeAreaStyle,
-    style,
-  ];
-
   return (
-    <RNView ref={ref as any} nativeID={id} style={containerStyle} testID={testID}>
+    <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID}>
       {children}
     </RNView>
   );

package/src/Screen/Screen.styles.old.tsx

@@ -0,0 +1,87 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme } from '@idealyst/theme';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+function generateBackgroundVariants(theme: Theme) {
+  return {
+    primary: { backgroundColor: theme.colors.surface.primary },
+    secondary: { backgroundColor: theme.colors.surface.secondary },
+    tertiary: { backgroundColor: theme.colors.surface.tertiary },
+    inverse: { backgroundColor: theme.colors.surface.inverse },
+    'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
+    'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
+    transparent: { backgroundColor: 'transparent' },
+  };
+}
+
+/**
+ * Create dynamic screen styles.
+ * Returns a function to ensure Unistyles can track theme changes.
+ */
+function createScreenStyles(theme: Theme) {
+    return (_props?: {}) => ({
+        flex: 1,
+        variants: {
+            background: generateBackgroundVariants(theme),
+            safeArea: {
+                true: {},
+                false: {},
+            },
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+        _web: {
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100%',
+            boxSizing: 'border-box',
+        },
+    });
+}
+
+/**
+ * Create dynamic screen content styles for ScrollView.
+ * No flex: 1 so content can grow beyond screen height.
+ */
+function createScreenContentStyles(theme: Theme) {
+    return (_props?: {}) => ({
+        variants: {
+            background: generateBackgroundVariants(theme),
+            safeArea: {
+                true: {},
+                false: {},
+            },
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+// Styles use applyExtensions to enable theme extensions and ensure proper
+// reactivity with Unistyles' native Shadow Tree updates.
+export const screenStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('Screen', theme, {
+        screen: createScreenStyles(theme),
+        screenContent: createScreenContentStyles(theme),
+    });
+});