react-native-system-ui 0.0.2 → 0.0.4

package/dist/cjs/{dialog → components/dialog}/Dialog.js

@@ -136,8 +136,7 @@ const Dialog = props => {
     if (!beforeClose) return true;
     try {
       return beforeClose(action);
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+    } catch {
       return true;
     }
   };
@@ -151,8 +150,7 @@ const Dialog = props => {
         if (resolved === false) return;
         if (actionSeqRef.current !== seq) return;
         handler?.();
-      }).catch(error => {
-        if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+      }).catch(() => {
         if (actionSeqRef.current !== seq) return;
         handler?.();
       });
@@ -313,7 +311,8 @@ const Dialog = props => {
   }, rest), closeable ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     style: [styles.closeIcon, {
       top: tokens.spacing.paddingTop / 2,
-      right: tokens.spacing.paddingHorizontal / 2
+      right: tokens.spacing.paddingHorizontal / 2,
+      padding: tokens.spacing.closeIconPadding
     }],
     hitSlop: {
       top: 8,
@@ -384,7 +383,6 @@ const styles = _reactNative().StyleSheet.create({
   },
   closeIcon: {
     position: 'absolute',
-    padding: 4,
     zIndex: 1
   }
 });

package/dist/cjs/{dialog → components/dialog}/tokens.js

@@ -40,7 +40,8 @@ const createDialogTokens = foundations => {
       titleGap: spacing.sm,
       footerGap: spacing.md,
       roundFooterPadding: spacing.md,
-      roundFooterGap: spacing.sm
+      roundFooterGap: spacing.sm,
+      closeIconPadding: spacing.xs
     },
     sizes: {
       minWidth: 280,

package/dist/cjs/{dropdown-menu → components/dropdown-menu}/DropdownItem.js

@@ -72,7 +72,9 @@ const DropdownItem = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const panelContent = (0, _react().useMemo)(() => {
     if (children) {
       return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: [styles.customPanel, panelStyle]
+        style: [styles.customPanel, {
+          padding: tokens.spacing.customPanelPadding
+        }, panelStyle]
       }, children);
     }
     if (!options?.length) {
@@ -92,17 +94,21 @@ const DropdownItem = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         if ((0, _utils.isText)(activeIcon)) {
           return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
             style: [styles.indicator, {
-              color
+              color,
+              marginLeft: tokens.spacing.indicatorMarginLeft
             }]
           }, activeIcon);
         }
         return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-          style: styles.indicator
+          style: [styles.indicator, {
+            marginLeft: tokens.spacing.indicatorMarginLeft
+          }]
         }, activeIcon);
       }
       return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [styles.indicator, {
-          color
+          color,
+          marginLeft: tokens.spacing.indicatorMarginLeft
         }]
       }, "\u2713");
     };
@@ -111,7 +117,9 @@ const DropdownItem = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       if (/*#__PURE__*/_react().default.isValidElement(optionIcon)) return optionIcon;
       if ((0, _utils.isText)(optionIcon)) {
         return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-          style: styles.optionIconText
+          style: [styles.optionIconText, {
+            fontSize: tokens.sizing.optionFontSize
+          }]
         }, optionIcon);
       }
       return optionIcon;
@@ -129,30 +137,38 @@ const DropdownItem = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       }
     };
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [styles.optionPanel, panelStyle]
+      style: [styles.optionPanel, {
+        paddingHorizontal: tokens.spacing.panelPaddingHorizontal
+      }, panelStyle]
     }, options.map(option => {
       const active = value === option.value;
       const optionText = getOptionText(option);
       const optionColor = option.disabled ? tokens.colors.disabledText : active ? activeTextColor : tokens.colors.text;
       return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
         key: String(option.value),
-        style: [styles.optionRow, (0, _utils.createHairlineBorderBottom)('rgba(0,0,0,0.06)')],
+        style: [styles.optionRow, {
+          paddingVertical: tokens.spacing.optionRowPaddingVertical,
+          paddingHorizontal: tokens.spacing.optionRowPaddingHorizontal
+        }, (0, _utils.createHairlineBorderBottom)('rgba(0,0,0,0.06)')],
         onPress: () => handleSelect(option),
         disabled: option.disabled,
         testID: `rv-dropdown-option-${option.value}`
       }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
         style: styles.optionLeft
       }, option.icon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: styles.optionIcon
+        style: [styles.optionIcon, {
+          marginRight: tokens.spacing.optionIconMarginRight
+        }]
       }, renderOptionIcon(option.icon)) : null, (0, _utils.isText)(optionText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [styles.optionText, {
-          color: optionColor
+          color: optionColor,
+          fontSize: tokens.sizing.optionFontSize
         }]
       }, optionText) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
         style: styles.optionTextNode
       }, optionText)), active ? renderActiveIcon() : null);
     }));
-  }, [children, options, panelStyle, tokens, value, activeIcon, activeTextColor, closeMenu, closeOnSelect, menuValue, name, onMenuChange, triggerChange]);
+  }, [activeIcon, activeTextColor, children, closeMenu, closeOnSelect, menuValue, name, onMenuChange, options, panelStyle, tokens, triggerChange, value]);
   (0, _react().useEffect)(() => {
     registerPanel(index, panelContent);
   }, [index, panelContent, registerPanel]);
@@ -194,12 +210,26 @@ const DropdownItem = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     color: displayColor
   }];
   const arrowStyle = [styles.arrow, {
-    borderTopColor: tokens.colors.arrow
+    borderTopColor: tokens.colors.arrow,
+    marginLeft: tokens.spacing.arrowMarginLeft,
+    width: tokens.sizing.arrowSize,
+    height: tokens.sizing.arrowSize,
+    borderLeftWidth: tokens.sizing.arrowBorderWidth,
+    borderRightWidth: tokens.sizing.arrowBorderWidth,
+    borderTopWidth: tokens.sizing.arrowBorderHeight,
+    borderLeftColor: tokens.colors.transparent,
+    borderRightColor: tokens.colors.transparent,
+    opacity: tokens.opacity.arrowInactive
   }, isActive && styles.arrowActive, isActive && {
-    borderBottomColor: activeColor ?? tokens.colors.activeText
+    borderBottomColor: activeColor ?? tokens.colors.activeText,
+    borderBottomWidth: tokens.sizing.arrowBorderHeight,
+    borderTopColor: tokens.colors.transparent,
+    opacity: tokens.opacity.arrowActive
   }];
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, rest, {
-    style: [styles.item, barScrollable ? styles.itemScrollable : null, style],
+    style: [styles.item, barScrollable ? [styles.itemScrollable, {
+      paddingHorizontal: tokens.spacing.itemScrollablePaddingHorizontal
+    }] : null, style],
     onPress: handleToggle,
     accessibilityRole: "button",
     testID: `rv-dropdown-trigger-${index}`,
@@ -223,40 +253,21 @@ const styles = _reactNative().StyleSheet.create({
     minWidth: 0
   },
   itemScrollable: {
-    flex: 0,
-    paddingHorizontal: 12
+    flex: 0
   },
   titleNode: {
     flexShrink: 1,
     minWidth: 0
   },
-  arrow: {
-    marginLeft: 4,
-    width: 6,
-    height: 6,
-    borderLeftWidth: 3,
-    borderRightWidth: 3,
-    borderTopWidth: 4,
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    opacity: 0.8
-  },
+  arrow: {},
   arrowActive: {
-    borderTopWidth: 0,
-    borderBottomWidth: 4,
-    borderBottomColor: 'currentColor',
-    borderTopColor: 'transparent',
-    opacity: 1
-  },
-  optionPanel: {
-    paddingHorizontal: 0
+    borderTopWidth: 0
   },
+  optionPanel: {},
   optionRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 10,
-    paddingHorizontal: 16
+    justifyContent: 'space-between'
   },
   optionLeft: {
     flex: 1,
@@ -264,24 +275,14 @@ const styles = _reactNative().StyleSheet.create({
     alignItems: 'center',
     minWidth: 0
   },
-  optionIcon: {
-    marginRight: 8
-  },
-  optionIconText: {
-    fontSize: 16
-  },
-  optionText: {
-    fontSize: 16
-  },
+  optionIcon: {},
+  optionIconText: {},
+  optionText: {},
   optionTextNode: {
     flex: 1
   },
-  indicator: {
-    marginLeft: 12
-  },
-  customPanel: {
-    padding: 16
-  }
+  indicator: {},
+  customPanel: {}
 });
 DropdownItem.displayName = 'DropdownMenu.Item';
 var _default = exports.default = DropdownItem;

package/dist/cjs/{dropdown-menu → components/dropdown-menu}/DropdownMenu.js

@@ -187,7 +187,7 @@ const DropdownMenu = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     animationRef.current?.stop();
   }, []);
   const barScrollable = threshold !== undefined && _react().default.Children.count(children) > threshold;
-  const contextValue = (0, _react().useMemo)(() => ({
+  const contextValue = {
     activeIndex,
     registerPanel,
     toggleItem,
@@ -199,7 +199,7 @@ const DropdownMenu = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     disabled,
     menuValue,
     onMenuChange
-  }), [activeColor, activeIcon, activeIndex, closeMenu, direction, disabled, registerPanel, showItem, toggleItem, menuValue, onMenuChange]);
+  };
   const shouldRenderMask = mounted && (overlay || closeOnClickOutside);
   const shouldCloseOnMask = closeOnClickOverlay || closeOnClickOutside;
   const resolvedBarTop = barFrame?.y ?? 0;
@@ -208,29 +208,25 @@ const DropdownMenu = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const resolvedBarWidth = barFrame?.width ?? (barWidth || windowWidth);
   const resolvedBarBottom = resolvedBarTop + resolvedBarHeight;
   const bottomInset = Math.max(0, windowHeight - resolvedBarTop);
-  const insetStyle = (0, _react().useMemo)(() => direction === 'up' ? {
+  const insetStyle = direction === 'up' ? {
     bottom: bottomInset
   } : {
     top: resolvedBarBottom
-  }, [bottomInset, direction, resolvedBarBottom]);
-  const panelPositionStyle = (0, _react().useMemo)(() => ({
+  };
+  const panelPositionStyle = {
     left: resolvedBarLeft,
     width: resolvedBarWidth
-  }), [resolvedBarLeft, resolvedBarWidth]);
+  };
   const panelRadiusStyle = direction === 'up' ? styles.panelUp : styles.panelDown;
-  const panelAnimatedStyle = (0, _react().useMemo)(() => {
-    const offset = 8;
-    const translate = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: direction === 'up' ? [offset, 0] : [-offset, 0]
-    });
-    return {
-      opacity: progress,
-      transform: [{
-        translateY: translate
-      }]
-    };
-  }, [direction, progress]);
+  const panelAnimatedStyle = {
+    opacity: progress,
+    transform: [{
+      translateY: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: direction === 'up' ? [8, 0] : [-8, 0]
+      })
+    }]
+  };
   const {
     zIndex: stackZIndex
   } = (0, _overlay.useOverlayStack)({
@@ -240,21 +236,21 @@ const DropdownMenu = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     type: 'dropdown-menu'
   });
   const resolvedZIndex = stackZIndex ?? zIndex;
-  const barChildren = (0, _react().useMemo)(() => _react().default.Children.map(children, (child, index) => {
+  const barChildren = _react().default.Children.map(children, (child, index) => {
     if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
     const element = child;
     return /*#__PURE__*/_react().default.cloneElement(element, {
       index,
       barScrollable
     });
-  }), [barScrollable, children]);
-  const barStyle = (0, _react().useMemo)(() => [styles.barWrapper, {
+  });
+  const barStyle = [styles.barWrapper, {
     height: tokens.sizing.barHeight,
     backgroundColor: tokens.colors.barBackground,
     paddingHorizontal: tokens.spacing.horizontal,
     zIndex: mounted ? resolvedZIndex + 1 : undefined,
     ...tokens.shadow
-  }, (0, _hairline.createHairlineBorderBottom)(tokens.colors.divider)], [mounted, resolvedZIndex, tokens.colors.barBackground, tokens.colors.divider, tokens.shadow, tokens.sizing.barHeight, tokens.spacing.horizontal]);
+  }, (0, _hairline.createHairlineBorderBottom)(tokens.colors.divider)];
   const handleBarLayout = (0, _react().useCallback)(event => {
     const {
       height,

package/dist/cjs/{dropdown-menu → components/dropdown-menu}/tokens.js

@@ -22,18 +22,35 @@ const createTokens = foundations => {
       panelBackground: '#ffffff',
       mask: 'rgba(0,0,0,0.45)',
       divider: palette.default[200],
-      barBackground: '#ffffff'
+      barBackground: '#ffffff',
+      transparent: 'transparent'
     },
     spacing: {
       horizontal: spacing.md,
       vertical: spacing.sm,
-      titlePadding: spacing.xs
+      titlePadding: spacing.xs,
+      customPanelPadding: spacing.lg,
+      optionRowPaddingHorizontal: spacing.lg,
+      optionRowPaddingVertical: 10,
+      itemScrollablePaddingHorizontal: spacing.md,
+      arrowMarginLeft: spacing.xs,
+      optionIconMarginRight: spacing.sm,
+      indicatorMarginLeft: spacing.md,
+      panelPaddingHorizontal: spacing.none
     },
     sizing: {
       barHeight: 48,
       titleFontSize: 15,
       titleLineHeight: fontSize.lg * typography.lineHeightMultiplier,
-      panelMaxHeight: 320
+      panelMaxHeight: 320,
+      optionFontSize: fontSize.md,
+      arrowSize: 6,
+      arrowBorderWidth: 3,
+      arrowBorderHeight: 4
+    },
+    opacity: {
+      arrowInactive: 0.8,
+      arrowActive: 1
     },
     shadow: {
       shadowColor: 'rgba(100, 101, 102, 0.12)',

package/dist/cjs/{field → components/field}/Field.js

@@ -106,7 +106,7 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
   const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
   const rows = rowsProp ?? tokens.defaults.rows;
   const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
-  const mergedTitleStyle = (0, _react().useMemo)(() => [{
+  const mergedTitleStyle = [{
     width: labelWidth,
     minWidth: labelWidth,
     maxWidth: labelWidth,
@@ -114,7 +114,7 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     marginRight: tokens.spacing.labelGap,
     flexShrink: 0,
     flexGrow: 0
-  }, titleStyle], [labelWidth, titleStyle, tokens.spacing.labelGap]);
+  }, titleStyle];
   const resolvedSuffix = suffixProp ?? button;
   const resolvedDescription = intro ?? description;
   const resolvedPlaceholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
@@ -127,10 +127,10 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
   const inputRef = (0, _react().useRef)(null);
   const introId = (0, _react().useId)();
   const errorId = (0, _react().useId)();
-  const describedBy = (0, _react().useMemo)(() => {
+  const describedBy = (() => {
     const ids = [(0, _validate.isRenderable)(errorMessage) ? errorId : null, (0, _validate.isRenderable)(resolvedDescription) ? introId : null].filter(Boolean);
     return ids.length ? ids : undefined;
-  }, [errorId, errorMessage, introId, resolvedDescription]);
+  })();
   const lineHeight = tokens.defaults.textareaLineHeight;
   const autoSizeConfig = autoSize && (0, _validate.isObject)(autoSize) ? autoSize : undefined;
   const minRows = !isTextarea ? 1 : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
@@ -404,10 +404,10 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
       }
     }, resolvedDescription);
   };
-  const contentWrapperStyle = (0, _react().useMemo)(() => [{
+  const contentWrapperStyle = [{
     width: '100%',
     justifyContent: _utils.alignMap[controlAlign]
-  }, contentStyle], [contentStyle, controlAlign]);
+  }, contentStyle];
   const renderAffix = node => {
     if ((0, _validate.isText)(node)) {
       return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {

package/dist/cjs/{form → components/form}/Form.js

@@ -245,7 +245,7 @@ const InternalForm = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       return next;
     });
   }, [notify, onValuesChange, runFieldValidation]);
-  const formApi = (0, _react().useMemo)(() => ({
+  const formApi = {
     submit: async () => {
       try {
         const result = await validateFields();
@@ -297,12 +297,12 @@ const InternalForm = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     },
     validateFields,
     getFieldError: name => errorsRef.current[(0, _utils.serializeNamePath)(name)] ?? []
-  }), [notify, onFinish, onValuesChange, validateFields, runFieldValidation]);
+  };
   (0, _react().useImperativeHandle)(ref, () => formApi, [formApi]);
   const getFieldError = (0, _react().useCallback)(name => errors[(0, _utils.serializeNamePath)(name)], [errors]);
   const getFieldValue = (0, _react().useCallback)(name => (0, _utils.getValueByName)(values, name), [values]);
   const contextValidateField = (0, _react().useCallback)((name, trigger) => runFieldValidation(name, trigger), [runFieldValidation]);
-  const contextValue = (0, _react().useMemo)(() => ({
+  const contextValue = {
     values,
     getFieldValue,
     setFieldValue,
@@ -318,7 +318,7 @@ const InternalForm = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     colon,
     labelWidth,
     showValidateMessage
-  }), [values, setFieldValue, registerField, getFieldError, contextValidateField, formApi, colon, labelWidth, showValidateMessage]);
+  };
   return /*#__PURE__*/_react().default.createElement(_FormContext.FormContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
@@ -328,11 +328,7 @@ const InternalForm = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
 InternalForm.displayName = 'Form';
 const useWatch = (name, formRef) => {
   const context = (0, _react().useContext)(_FormContext.FormContext);
-  const names = (0, _react().useMemo)(() => {
-    if (name === undefined) return undefined;
-    if (!Array.isArray(name)) return [name];
-    return name.length && (0, _validate.isText)(name[0]) ? [name] : name;
-  }, [name]);
+  const names = name === undefined ? undefined : !Array.isArray(name) ? [name] : name.length && (0, _validate.isText)(name[0]) ? [name] : name;
   const getSnapshot = (0, _react().useCallback)(allValues => {
     const source = allValues ?? context?.getFieldsValue?.() ?? formRef?.current?.getFieldsValue?.() ?? {};
     if (!names) return source;

package/dist/cjs/{grid → components/grid}/Grid.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Grid = void 0;
 function _react() {
-  const data = _interopRequireWildcard(require("react"));
+  const data = _interopRequireDefault(require("react"));
   _react = function () {
     return data;
   };
@@ -21,7 +21,7 @@ function _reactNative() {
 var _utils = require("../../utils");
 var _GridContext = require("./GridContext");
 var _tokens = require("./tokens");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Grid = props => {
   const {
@@ -74,7 +74,7 @@ const Grid = props => {
       bottom: 0
     })]
   });
-  const contextValue = (0, _react().useMemo)(() => ({
+  const contextValue = {
     columnNum,
     gutter,
     border,
@@ -87,7 +87,7 @@ const Grid = props => {
     iconColor,
     count: childArray.length,
     tokens
-  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+  };
   return /*#__PURE__*/_react().default.createElement(_GridContext.GridContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({

package/dist/cjs/{image → components/image}/Image.js

@@ -125,24 +125,30 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const fit = fitProp ?? tokens.defaults.fit;
   const showLoading = showLoadingProp ?? tokens.defaults.showLoading;
   const showError = showErrorProp ?? tokens.defaults.showError;
-  const loadingText = loadingTextProp ?? tokens.defaults.loadingText;
-  const errorText = errorTextProp ?? tokens.defaults.errorText;
+  const loadingText = loadingTextProp !== undefined ? loadingTextProp : tokens.defaults.loadingText;
+  const errorText = errorTextProp !== undefined ? errorTextProp : tokens.defaults.errorText;
   const {
     container: containerLayoutStyle,
     image: imageStyleWithoutLayout
-  } = (0, _react().useMemo)(() => splitImageStyle(style), [style]);
-  const actualSource = (0, _react().useMemo)(() => {
-    if (source) return source;
-    if (src) return {
-      uri: src
-    };
-    return undefined;
-  }, [source, src]);
+  } = splitImageStyle(style);
+  const actualSource = source ? source : src ? {
+    uri: src
+  } : undefined;
+  const sourceKey = (() => {
+    if (source) {
+      if (typeof source === 'number') return `res:${source}`;
+      const uri = resolveSourceUri(source);
+      if (uri) return `uri:${uri}`;
+      return 'source:unknown';
+    }
+    if (src) return `src:${src}`;
+    return 'none';
+  })();
   const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
   const [status, setStatus] = (0, _react().useState)(() => actualSource ? 'loading' : 'idle');
   (0, _react().useEffect)(() => {
     setStatus(actualSource ? 'loading' : 'idle');
-  }, [actualSource]);
+  }, [sourceKey]);
   const handleLoad = (0, _react().useCallback)(event => {
     setStatus('loaded');
     onLoad?.(event);
@@ -164,10 +170,8 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     });
   }, [handleError]);
   const uri = resolveSourceUri(actualSource);
-  const isSvg = (0, _react().useMemo)(() => {
-    const normalizedUri = (0, _utils.isString)(uri) ? uri.toLowerCase() : undefined;
-    return (0, _utils.isString)(normalizedUri) && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  }, [uri]);
+  const normalizedUri = (0, _utils.isString)(uri) ? uri.toLowerCase() : undefined;
+  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
   const resolvedLoadingSize = (0, _utils.isNumber)(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
   const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
   const containerRole = onPress ? 'button' : undefined;