@idealyst/components 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.14",
+    "@idealyst/theme": "^1.2.16",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.14",
+    "@idealyst/theme": "^1.2.16",
     "@idealyst/tooling": "^1.2.4",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Accordion/Accordion.web.tsx

@@ -47,7 +47,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   const itemStyle = (accordionStyles.item as any)({ type, isLast });
   const itemProps = getWebProps([itemStyle]);
   const headerProps = getWebProps([(accordionStyles.header as any)({})]);
-  const titleProps = getWebProps([accordionStyles.title]);
+  const titleProps = getWebProps([accordionStyles.title as any]);
   const iconProps = getWebProps([(accordionStyles.icon as any)({})]);
   // Pass expanded state to get correct maxHeight from styles
   const contentProps = getWebProps([(accordionStyles.content as any)({ expanded: isExpanded })]);

package/src/Alert/Alert.native.tsx

@@ -6,7 +6,7 @@ import { isIconName } from '../Icon/icon-resolver';
 import type { AlertProps } from './types';
 
 // Default icon names for each intent
-const defaultIcons = {
+const defaultIcons: Record<string, string> = {
   primary: 'information',
   success: 'check-circle',
   error: 'alert-circle',

package/src/Alert/Alert.web.tsx

@@ -7,7 +7,7 @@ import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 
 // Default icons for each intent
-const defaultIcons = {
+const defaultIcons: Record<string, string> = {
   primary: 'information',
   success: 'check-circle',
   error: 'alert-circle',

package/src/Badge/Badge.web.tsx

@@ -13,7 +13,8 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   const {
     children,
     size = 'md',
-    type = 'filled',
+    type: typeProp,
+    variant,
     color = 'blue',
     icon,
     style,
@@ -21,13 +22,16 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
     id,
   } = props;
 
+  // variant is an alias for type - variant takes precedence if both are set
+  const type = variant ?? typeProp ?? 'filled';
+
   badgeStyles.useVariants({
     size,
     type,
   });
 
   const badgeStyle = (badgeStyles.badge as any)({ color });
-  const contentStyle = badgeStyles.content;
+  const contentStyle = badgeStyles.content as any;
   const textStyle = (badgeStyles.text as any)({ color });
 
   const badgeProps = getWebProps([badgeStyle]);

package/src/Badge/types.ts

@@ -29,6 +29,11 @@ export interface BadgeProps extends BaseProps {
    */
   type?: BadgeType;
 
+  /**
+   * Alias for type - the visual style variant of the badge
+   */
+  variant?: BadgeType;
+
   /**
    * The color scheme of the badge
    */

package/src/Button/Button.native.tsx

@@ -68,14 +68,14 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   };
 
   // Map button size to icon size
-  const iconSizeMap = {
+  const iconSizeMap: Record<string, number> = {
     xs: 12,
     sm: 14,
     md: 16,
     lg: 18,
     xl: 20,
-  } as const;
-  const iconSize = iconSizeMap[size];
+  };
+  const iconSize = iconSizeMap[size] ?? 16;
 
 
   // Use children if available, otherwise use title

package/src/Button/Button.web.tsx

@@ -17,7 +17,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     onPress,
     disabled = false,
     loading = false,
-    type = 'contained',
+    type: typeProp,
+    variant,
     intent = 'primary',
     size = 'md',
     gradient,
@@ -41,6 +42,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     accessibilityHasPopup,
   } = props;
 
+  // variant is an alias for type - variant takes precedence if both are set
+  const type = variant ?? typeProp ?? 'contained';
+
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 

package/src/Button/types.ts

@@ -48,6 +48,11 @@ export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
    */
   type?: ButtonType;
 
+  /**
+   * Alias for type - the visual style variant of the button
+   */
+  variant?: ButtonType;
+
   /**
    * The intent/color scheme of the button
    */

package/src/Card/Card.web.tsx

@@ -11,7 +11,8 @@ import { getWebInteractiveAriaProps } from '../utils/accessibility';
  */
 const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   children,
-  type = 'elevated',
+  type: typeProp,
+  variant,
   radius = 'md',
   intent,
   clickable = false,
@@ -36,6 +37,8 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   accessibilityRole,
   accessibilityPressed,
 }, ref) => {
+  // variant is an alias for type - variant takes precedence if both are set
+  const type = variant ?? typeProp ?? 'elevated';
   // Generate ARIA props
   const ariaProps = useMemo(() => {
     return getWebInteractiveAriaProps({

package/src/Card/types.ts

@@ -24,6 +24,11 @@ export interface CardProps extends ContainerStyleProps, InteractiveAccessibility
    */
   type?: CardType;
 
+  /**
+   * Alias for type - the visual style variant of the card
+   */
+  variant?: CardType;
+
   /**
    * The border radius of the card
    */

package/src/Dialog/Dialog.native.tsx

@@ -11,7 +11,7 @@ const Dialog = forwardRef<View, DialogProps>(({
   title,
   children,
   size = 'md',
-  type = 'standard',
+  type = 'default',
   showCloseButton = true,
   closeOnBackdropClick = true,
   animationType = 'fade',

package/src/Divider/Divider.web.tsx

@@ -45,8 +45,8 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
 
   // Generate web props
   const dividerProps = getWebProps([dividerStyle, style as any]);
-  const containerProps = getWebProps([dividerStyles.container]);
-  const contentProps = getWebProps([dividerStyles.content]);
+  const containerProps = getWebProps([dividerStyles.container as any]);
+  const contentProps = getWebProps([dividerStyles.content as any]);
   const lineProps = getWebProps([lineStyle]);
 
   const mergedDividerRef = useMergeRefs(ref, dividerProps.ref);

package/src/Icon/Icon.web.tsx

@@ -45,7 +45,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
     iconSize = size;
   } else {
     const themeSize = theme.sizes.icon[size as keyof typeof theme.sizes.icon];
-    iconSize = typeof themeSize === 'number' ? themeSize : (themeSize?.width ?? 24);
+    const rawSize = typeof themeSize === 'number' ? themeSize : themeSize?.width;
+    iconSize = typeof rawSize === 'number' ? rawSize : 24;
   }
 
   // Compute color - priority: intent > color > textColor > default
@@ -70,7 +71,6 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
       ref={mergedRef}
       id={id}
       style={{
-        ...iconProps.style,
         fontSize: iconSize,
         width: '1em',
         height: '1em',

package/src/Image/Image.styles.tsx

@@ -20,7 +20,7 @@ export const imageStyles = defineStyle('Image', (theme: Theme) => ({
     container: (_props: ImageDynamicProps) => ({
         position: 'relative' as const,
         overflow: 'hidden' as const,
-        backgroundColor: theme.colors['gray.200'],
+        backgroundColor: theme.colors.pallet.gray?.['200'] ?? theme.colors.surface.secondary,
     }),
 
     image: (_props: ImageDynamicProps) => ({
@@ -37,7 +37,7 @@ export const imageStyles = defineStyle('Image', (theme: Theme) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        backgroundColor: theme.colors['gray.200'],
+        backgroundColor: theme.colors.pallet.gray?.['200'] ?? theme.colors.surface.secondary,
     }),
 
     fallback: (_props: ImageDynamicProps) => ({
@@ -49,11 +49,11 @@ export const imageStyles = defineStyle('Image', (theme: Theme) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        backgroundColor: theme.colors['gray.300'],
-        color: theme.colors['gray.600'],
+        backgroundColor: theme.colors.pallet.gray?.['300'] ?? theme.colors.surface.tertiary,
+        color: theme.colors.pallet.gray?.['600'] ?? theme.colors.text.secondary,
     }),
 
     loadingIndicator: (_props: ImageDynamicProps) => ({
-        color: theme.colors['gray.600'],
+        color: theme.colors.pallet.gray?.['600'] ?? theme.colors.text.secondary,
     }),
 }));

package/src/Image/Image.web.tsx

@@ -50,15 +50,15 @@ const Image: React.FC<ImageProps> = ({
   ]);
 
   const imageProps = getWebProps([
-    imageStyles.image,
+    imageStyles.image as any,
     {
       objectFit: objectFit,
       borderRadius: borderRadius ? `${borderRadius}px` : undefined,
     }
   ]);
 
-  const placeholderProps = getWebProps([imageStyles.placeholder]);
-  const fallbackProps = getWebProps([imageStyles.fallback]);
+  const placeholderProps = getWebProps([imageStyles.placeholder as any]);
+  const fallbackProps = getWebProps([imageStyles.fallback as any]);
 
   return (
     <div

package/src/List/List.native.tsx

@@ -64,9 +64,8 @@ const List = forwardRef<View, ListProps>(({
   const processedChildren = childArray.map((child, index) => {
     if (isValidElement(child)) {
       return cloneElement(child, {
-        ...child.props,
         isLast: index === childArray.length - 1,
-      });
+      } as Record<string, unknown>);
     }
     return child;
   });

package/src/List/List.web.tsx

@@ -52,9 +52,8 @@ const List: React.FC<ListProps> = ({
   const processedChildren = childArray.map((child, index) => {
     if (isValidElement(child)) {
       return cloneElement(child, {
-        ...child.props,
         isLast: index === childArray.length - 1,
-      });
+      } as Record<string, unknown>);
     }
     return child;
   });

package/src/List/ListSection.web.tsx

@@ -10,9 +10,9 @@ const ListSection: React.FC<ListSectionProps> = ({
   style,
   testID,
 }) => {
-  const sectionProps = getWebProps([listStyles.section, style as any]);
-  const titleProps = getWebProps([listStyles.sectionTitle]);
-  const contentProps = getWebProps([listStyles.sectionContent]);
+  const sectionProps = getWebProps([listStyles.section as any, style as any]);
+  const titleProps = getWebProps([listStyles.sectionTitle as any]);
+  const contentProps = getWebProps([listStyles.sectionContent as any]);
 
   return (
     <div {...sectionProps} data-testid={testID}>

package/src/Menu/Menu.web.tsx

@@ -5,7 +5,7 @@ import type { MenuProps } from './types';
 import MenuItem from './MenuItem.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
-import { getWebInteractiveAriaProps, generateAccessibilityId, MENU_KEYS } from '../utils/accessibility';
+import { getWebInteractiveAriaProps, generateAccessibilityId, MENU_KEYS, matchesKey } from '../utils/accessibility';
 
 /**
  * Dropdown menu for actions and navigation triggered by a button or element.
@@ -64,9 +64,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
   // Keyboard navigation handler
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const key = e.key;
-
-    if (MENU_KEYS.close.includes(key)) {
+    if (matchesKey(e, MENU_KEYS.close)) {
       e.preventDefault();
       onOpenChange?.(false);
       // Return focus to trigger
@@ -78,16 +76,16 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
     let nextIndex = focusedIndex.current;
 
-    if (MENU_KEYS.next.includes(key)) {
+    if (matchesKey(e, MENU_KEYS.next)) {
       e.preventDefault();
       nextIndex = focusedIndex.current < enabledItems.length - 1 ? focusedIndex.current + 1 : 0;
-    } else if (MENU_KEYS.prev.includes(key)) {
+    } else if (matchesKey(e, MENU_KEYS.prev)) {
       e.preventDefault();
       nextIndex = focusedIndex.current > 0 ? focusedIndex.current - 1 : enabledItems.length - 1;
-    } else if (MENU_KEYS.first.includes(key)) {
+    } else if (matchesKey(e, MENU_KEYS.first)) {
       e.preventDefault();
       nextIndex = 0;
-    } else if (MENU_KEYS.last.includes(key)) {
+    } else if (matchesKey(e, MENU_KEYS.last)) {
       e.preventDefault();
       nextIndex = enabledItems.length - 1;
     }
@@ -119,7 +117,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
   const overlayProps = getWebProps([(menuStyles.overlay as any)({})]);
   const menuProps = getWebProps([(menuStyles.menu as any)({}), style as any]);
-  const separatorProps = getWebProps([menuStyles.separator]);
+  const separatorProps = getWebProps([menuStyles.separator as any]);
 
   const handleTriggerClick = () => {
     onOpenChange?.(!open);
@@ -161,7 +159,7 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(({
 
       <PositionedPortal
         open={open}
-        anchor={triggerRef}
+        anchor={triggerRef as React.RefObject<HTMLElement>}
         placement={placement}
         offset={4}
         onClickOutside={() => onOpenChange?.(false)}

package/src/Menu/MenuItem.web.tsx

@@ -67,7 +67,7 @@ const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress,
     <button
       {...itemProps}
       ref={mergedRef}
-      style={{ ...buttonResetStyles, ...itemProps.style }}
+      style={buttonResetStyles}
       onClick={() => onPress(item)}
       disabled={item.disabled}
       role="menuitem"

package/src/Popover/Popover.web.tsx

@@ -49,7 +49,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   popoverStyles.useVariants({});
 
   const containerProps = getWebProps([(popoverStyles.container as any)({})]);
-  const contentProps = getWebProps([popoverStyles.content]);
+  const contentProps = getWebProps([popoverStyles.content as any]);
 
   const mergedPopoverRef = useMergeRefs(ref, popoverRef);
 

package/src/Pressable/Pressable.web.tsx

@@ -78,7 +78,7 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
       id={id}
       role={accessibilityRole}
       tabIndex={disabled ? -1 : 0}
-      style={{ ...baseStyle, ...webProps.style }}
+      style={baseStyle}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp} // Handle mouse leave as press out

package/src/Progress/Progress.styles.tsx

@@ -1,8 +1,8 @@
 /**
- * Progress styles using defineStyle with $iterator expansion.
+ * Progress styles using static styles with variants.
  */
 import { StyleSheet } from 'react-native-unistyles';
-import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper, CompoundVariants } from '@idealyst/theme';
 import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
@@ -11,26 +11,34 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ProgressDynamicProps = {
-    size?: Size;
-    intent?: Intent;
-    rounded?: boolean;
+export type ProgressVariants = {
+    size: Size;
+    intent: Intent;
+    rounded: boolean;
 };
 
+// Create intent variants dynamically from theme
+function createIntentVariants(theme: Theme) {
+    const variants: Record<string, object> = {};
+    for (const intent in theme.intents) {
+        variants[intent] = {};
+    }
+    return variants;
+}
+
 /**
- * Progress styles with intent-based coloring.
+ * Progress styles with static styles and variants.
  */
 export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
-    container: (_props: ProgressDynamicProps) => ({
+    container: {
         gap: 4 as const,
-    }),
+    },
 
-    linearTrack: (_props: ProgressDynamicProps) => ({
+    linearTrack: {
         backgroundColor: theme.colors.border.secondary,
         overflow: 'hidden' as const,
         position: 'relative' as const,
         variants: {
-            // $iterator expands for each progress size
             size: {
                 height: theme.sizes.$progress.linearHeight,
             },
@@ -39,36 +47,60 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 false: { borderRadius: 0 },
             },
         },
-    }),
+    },
 
-    linearBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+    linearBar: {
         height: '100%' as const,
-        backgroundColor: theme.intents[intent].primary,
         variants: {
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
+            intent: createIntentVariants(theme),
         },
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof ProgressVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        backgroundColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
         _web: {
             transition: 'width 0.3s ease' as const,
         },
-    }),
+    },
 
-    indeterminateBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+    indeterminateBar: {
         position: 'absolute' as const,
         height: '100%' as const,
         width: '40%' as const,
-        backgroundColor: theme.intents[intent].primary,
         variants: {
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
+            intent: createIntentVariants(theme),
         },
-    }),
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof ProgressVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        backgroundColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    circularContainer: (_props: ProgressDynamicProps) => ({
+    circularContainer: {
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         position: 'relative' as const,
@@ -78,21 +110,35 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 height: theme.sizes.$progress.circularSize,
             },
         },
-    }),
+    },
 
-    circularTrack: (_props: ProgressDynamicProps) => ({
+    circularTrack: {
         _web: {
             stroke: theme.colors.border.secondary,
         },
-    }),
+    },
 
-    circularBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
-        _web: {
-            stroke: theme.intents[intent].primary,
+    circularBar: {
+        variants: {
+            intent: createIntentVariants(theme),
         },
-    }),
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof ProgressVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        _web: {
+                            stroke: theme.intents[intent as Intent].primary,
+                        },
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    label: (_props: ProgressDynamicProps) => ({
+    label: {
         color: theme.colors.text.primary,
         textAlign: 'center' as const,
         variants: {
@@ -100,9 +146,9 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 fontSize: theme.sizes.$progress.labelFontSize,
             },
         },
-    }),
+    },
 
-    circularLabel: (_props: ProgressDynamicProps) => ({
+    circularLabel: {
         position: 'absolute' as const,
         fontWeight: '600' as const,
         color: theme.colors.text.primary,
@@ -111,5 +157,5 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 fontSize: theme.sizes.$progress.circularLabelFontSize,
             },
         },
-    }),
+    },
 }));

package/src/Progress/Progress.web.tsx

@@ -23,21 +23,19 @@ const Progress: React.FC<ProgressProps> = ({
 }) => {
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
 
-  // Apply variants (for size and rounded)
+  // Apply variants (for size, intent, and rounded)
   progressStyles.useVariants({
     size,
+    intent,
     rounded,
   });
 
-  // Compute dynamic styles with intent
-  const dynamicProps = { intent };
-
   // Linear progress
-  const containerProps = getWebProps([(progressStyles.container as any)({}), style as any]);
-  const trackProps = getWebProps([(progressStyles.linearTrack as any)({})]);
-  const barProps = getWebProps([(progressStyles.linearBar as any)(dynamicProps), { width: `${percentage}%` }]);
-  const indeterminateProps = getWebProps([(progressStyles.indeterminateBar as any)(dynamicProps)]);
-  const labelProps = getWebProps([progressStyles.label]);
+  const containerProps = getWebProps([progressStyles.container as any, style as any]);
+  const trackProps = getWebProps([progressStyles.linearTrack as any]);
+  const barProps = getWebProps([progressStyles.linearBar as any, { width: `${percentage}%` }]);
+  const indeterminateProps = getWebProps([progressStyles.indeterminateBar as any]);
+  const labelProps = getWebProps([progressStyles.label as any]);
 
   const getCircularSize = () => {
     if (size === 'sm') return 32;
@@ -53,13 +51,13 @@ const Progress: React.FC<ProgressProps> = ({
     const strokeDashoffset = indeterminate ? circumference * 0.25 : circumference - (percentage / 100) * circumference;
 
     const computedContainerProps = getWebProps([
-      progressStyles.circularContainer,
-      style,
+      progressStyles.circularContainer as any,
+      style as any,
       { display: 'inline-flex' }
     ]);
-    const labelProps = getWebProps([progressStyles.circularLabel]);
-    const trackColorProps = getWebProps([progressStyles.circularTrack]);
-    const barColorProps = getWebProps([(progressStyles.circularBar as any)(dynamicProps)]);
+    const circularLabelProps = getWebProps([progressStyles.circularLabel as any]);
+    const trackColorProps = getWebProps([progressStyles.circularTrack as any]);
+    const barColorProps = getWebProps([progressStyles.circularBar as any]);
 
     return (
       <div {...computedContainerProps} id={id} data-testid={testID}>
@@ -93,7 +91,7 @@ const Progress: React.FC<ProgressProps> = ({
           />
         </svg>
         {showLabel && (
-          <span {...labelProps}>
+          <span {...circularLabelProps}>
             {label || `${Math.round(percentage)}%`}
           </span>
         )}

package/src/SVGImage/SVGImage.web.tsx

@@ -56,7 +56,7 @@ const SVGImage = forwardRef<HTMLDivElement, SVGImageProps>(({
 
   // Use getWebProps to generate className and ref for web
   const containerWebProps = getWebProps(containerStyleArray);
-  const imageWebProps = getWebProps(svgImageStyles.image);
+  const imageWebProps = getWebProps([svgImageStyles.image as any]);
 
   // Apply custom color if provided
   // Convert React Native resize modes to CSS object-fit values