react-native-system-ui 1.0.0 → 1.0.1

package/dist/es/components/form/FormItem.js

@@ -23,42 +23,45 @@ const FormItemImpl = ({
 }) => {
   const renderProps = typeof children === 'function';
   const ctx = useContext(FormContext);
-  const normalizedRules = rules ?? EMPTY_RULES;
-  const nameKey = name ? serializeNamePath(name) : undefined;
-  const shouldAlwaysUpdate = renderProps && !nameKey && !shouldUpdate;
-  const previousValuesRef = useRef(EMPTY_VALUES);
+  const normRules = rules ?? EMPTY_RULES;
+  const nKey = name ? serializeNamePath(name) : undefined;
+  const shouldAlwaysUp = renderProps && !nKey && !shouldUpdate;
+  const prevValsRef = useRef(EMPTY_VALUES);
   const [, forceUpdate] = useState(0);
   useEffect(() => {
     if (!ctx?.subscribe) return undefined;
-    return ctx.subscribe((changedValues, all) => {
-      if (FORM_ALL_FIELDS_KEY in changedValues) {
+    return ctx.subscribe((ch, all) => {
+      if (FORM_ALL_FIELDS_KEY in ch) {
         forceUpdate(v => v + 1);
         return;
       }
-      if (shouldAlwaysUpdate) {
+      ;
+      if (shouldAlwaysUp) {
         forceUpdate(v => v + 1);
         return;
       }
+      ;
       if (shouldUpdate) {
-        if (shouldUpdate(previousValuesRef.current, all)) forceUpdate(v => v + 1);
+        if (shouldUpdate(prevValsRef.current, all)) forceUpdate(v => v + 1);
         return;
       }
-      if (nameKey && nameKey in changedValues) forceUpdate(v => v + 1);
+      ;
+      if (nKey && nKey in ch) forceUpdate(v => v + 1);
     });
-  }, [ctx, nameKey, shouldUpdate, shouldAlwaysUpdate]);
-  const currentValues = ctx?.getFieldsValue() ?? EMPTY_VALUES;
+  }, [ctx, nKey, shouldUpdate, shouldAlwaysUp]);
+  const curVals = ctx?.getFieldsValue() ?? EMPTY_VALUES;
   useEffect(() => {
-    previousValuesRef.current = currentValues;
-  }, [currentValues]);
+    prevValsRef.current = curVals;
+  }, [curVals]);
   useEffect(() => {
     if (!name || !ctx) return undefined;
     return ctx.registerField(name, {
-      rules: normalizedRules,
+      rules: normRules,
       dependencies,
       initialValue,
       validateTrigger: validateTrigger ?? trigger
     });
-  }, [ctx, name, normalizedRules, dependencies, initialValue, validateTrigger, trigger]);
+  }, [ctx, name, normRules, dependencies, initialValue, validateTrigger, trigger]);
   if (!ctx) {
     if (renderProps) return /*#__PURE__*/React.createElement(React.Fragment, null, children({
       getFieldValue: () => undefined,
@@ -67,13 +70,14 @@ const FormItemImpl = ({
     }));
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
-  const shouldRender = !shouldUpdate || shouldUpdate(previousValuesRef.current, currentValues);
-  const modelValue = name ? ctx.getFieldValue(name) : undefined;
-  const mergedShowValidateMessage = showValidateMessage ?? ctx.showValidateMessage ?? true;
-  const fieldErrors = name ? ctx.getFieldError(name) : undefined;
-  const fieldError = mergedShowValidateMessage ? fieldErrors?.[0] : undefined;
-  const mergedRequired = required ?? normalizedRules.some(r => r.required);
-  const mergedValidateTrigger = normalizeTrigger(validateTrigger ?? trigger);
+  ;
+  const shouldRender = !shouldUpdate || shouldUpdate(prevValsRef.current, curVals);
+  const modelVal = name ? ctx.getFieldValue(name) : undefined;
+  const rShowMsg = showValidateMessage ?? ctx.showValidateMessage ?? true;
+  const fieldErrs = name ? ctx.getFieldError(name) : undefined;
+  const fieldErr = rShowMsg ? fieldErrs?.[0] : undefined;
+  const rRequired = required ?? normRules.some(r => r.required);
+  const rValidateTrigger = normalizeTrigger(validateTrigger ?? trigger);
   if (renderProps) {
     if (!shouldRender) return null;
     return /*#__PURE__*/React.createElement(React.Fragment, null, children({
@@ -82,50 +86,52 @@ const FormItemImpl = ({
       form: ctx.form || null
     }));
   }
+  ;
   if (!name) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   if (!shouldRender) return null;
-  const childrenArray = React.Children.toArray(children);
-  if (childrenArray.length !== 1) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  const child = childrenArray[0];
+  const chArr = React.Children.toArray(children);
+  if (chArr.length !== 1) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  const child = chArr[0];
   const handleChange = next => {
     ctx.setFieldValue(name, next, trigger);
-    const original = child.props[trigger];
-    if (isFunction(original)) original(next);
+    const orig = child.props[trigger];
+    if (isFunction(orig)) orig(next);
   };
-  const displayName = child.type.displayName;
-  const isFieldLike = isString(displayName) && (displayName.includes('Field') || displayName.includes('Input'));
-  const resolvedValue = () => {
-    const childValue = child.props[valuePropName];
-    if (childValue !== undefined) return childValue;
-    if (modelValue !== undefined) return modelValue;
+  const dispName = child.type.displayName;
+  const isFieldLike = isString(dispName) && (dispName.includes('Field') || dispName.includes('Input'));
+  const rValue = () => {
+    const cv = child.props[valuePropName];
+    if (cv !== undefined) return cv;
+    if (modelVal !== undefined) return modelVal;
     if (isFieldLike && valuePropName === 'value') return '';
-    return modelValue;
+    return modelVal;
   };
-  const injectedProps = {
-    [valuePropName]: resolvedValue(),
+  const injected = {
+    [valuePropName]: rValue(),
     [trigger]: handleChange
   };
-  mergedValidateTrigger.forEach(eventName => {
-    if (!eventName || eventName === trigger) return;
-    const original = child.props[eventName];
-    injectedProps[eventName] = (...args) => {
-      if (isFunction(original)) original(...args);
-      ctx.validateField(name, eventName);
+  rValidateTrigger.forEach(ev => {
+    if (!ev || ev === trigger) return;
+    const orig = child.props[ev];
+    injected[ev] = (...args) => {
+      if (isFunction(orig)) orig(...args);
+      ctx.validateField(name, ev);
     };
   });
-  const childProps = child.props;
-  if (label !== undefined && childProps.label === undefined) injectedProps.label = label;
-  if (ctx.colon !== undefined && injectedProps.label !== undefined && childProps.colon === undefined) injectedProps.colon = ctx.colon;
-  if (ctx.labelWidth !== undefined && childProps.labelWidth === undefined) injectedProps.labelWidth = ctx.labelWidth;
-  if (description && childProps.description === undefined) injectedProps.description = description;
-  if (intro && childProps.intro === undefined) injectedProps.intro = intro;
-  if (tooltip && childProps.tooltip === undefined) injectedProps.tooltip = tooltip;
-  if (mergedRequired && childProps.required === undefined) injectedProps.required = true;
-  if (fieldError && childProps.errorMessage === undefined) {
-    injectedProps.error = true;
-    injectedProps.errorMessage = fieldError;
+  const cp = child.props;
+  if (label !== undefined && cp.label === undefined) injected.label = label;
+  if (ctx.colon !== undefined && injected.label !== undefined && cp.colon === undefined) injected.colon = ctx.colon;
+  if (ctx.labelWidth !== undefined && cp.labelWidth === undefined) injected.labelWidth = ctx.labelWidth;
+  if (description && cp.description === undefined) injected.description = description;
+  if (intro && cp.intro === undefined) injected.intro = intro;
+  if (tooltip && cp.tooltip === undefined) injected.tooltip = tooltip;
+  if (rRequired && cp.required === undefined) injected.required = true;
+  if (fieldErr && cp.errorMessage === undefined) {
+    injected.error = true;
+    injected.errorMessage = fieldErr;
   }
-  return /*#__PURE__*/React.cloneElement(child, injectedProps);
+  ;
+  return /*#__PURE__*/React.cloneElement(child, injected);
 };
 FormItemImpl.displayName = 'FormItem';
 export const FormItem = /*#__PURE__*/React.memo(FormItemImpl);

package/dist/es/components/form/FormList.js

@@ -10,62 +10,62 @@ export const FormList = ({
   initialValue,
   children
 }) => {
-  const context = useContext(FormContext);
-  const keyCounterRef = useRef(0),
-    keysRef = useRef([]);
-  const nameKey = serializeNamePath(name);
-  const [listValue, setListValue] = useState(() => context ? getList(context, name) : []);
-  const syncKeys = useCallback(length => {
-    const keys = keysRef.current;
-    while (keys.length < length) keys.push(keyCounterRef.current++);
-    if (keys.length > length) keysRef.current = keys.slice(0, length);
+  const ctx = useContext(FormContext);
+  const keyCounterRef = useRef(0);
+  const keysRef = useRef([]);
+  const nKey = serializeNamePath(name);
+  const [listValue, setListValue] = useState(() => ctx ? getList(ctx, name) : []);
+  const syncKeys = useCallback(len => {
+    const k = keysRef.current;
+    while (k.length < len) k.push(keyCounterRef.current++);
+    if (k.length > len) keysRef.current = k.slice(0, len);
   }, []);
   const ensureInitial = useCallback(() => {
-    if (!context) return;
-    if (getValueByName(context.getFieldsValue(), name) === undefined && initialValue !== undefined) context.setFieldValue(name, initialValue);
-  }, [context, initialValue, name]);
+    if (!ctx) return;
+    if (getValueByName(ctx.getFieldsValue(), name) === undefined && initialValue !== undefined) ctx.setFieldValue(name, initialValue);
+  }, [ctx, initialValue, name]);
   useEffect(() => {
     ensureInitial();
   }, [ensureInitial]);
   useEffect(() => {
-    if (!context?.subscribe) return undefined;
-    return context.subscribe((changed, all) => {
-      if (FORM_ALL_FIELDS_KEY in changed || nameKey in changed) {
+    if (!ctx?.subscribe) return undefined;
+    return ctx.subscribe((ch, all) => {
+      if (FORM_ALL_FIELDS_KEY in ch || nKey in ch) {
         const next = getValueByName(all, name);
         const nl = Array.isArray(next) ? next : [];
         syncKeys(nl.length);
         setListValue(nl);
       }
     });
-  }, [context, name, nameKey, syncKeys]);
+  }, [ctx, name, nKey, syncKeys]);
   const add = useCallback((defaultValue, index) => {
-    if (!context) return;
-    const arr = getList(context, name),
-      i = typeof index === 'number' ? index : arr.length,
-      next = [...arr];
+    if (!ctx) return;
+    const a = getList(ctx, name);
+    const i = typeof index === 'number' ? index : a.length;
+    const next = [...a];
     next.splice(i, 0, defaultValue);
     keysRef.current.splice(i, 0, keyCounterRef.current++);
-    context.setFieldValue(name, next);
-  }, [context, name]);
+    ctx.setFieldValue(name, next);
+  }, [ctx, name]);
   const remove = useCallback(index => {
-    if (!context) return;
-    const arr = getList(context, name);
-    if (index < 0 || index >= arr.length) return;
+    if (!ctx) return;
+    const a = getList(ctx, name);
+    if (index < 0 || index >= a.length) return;
     keysRef.current.splice(index, 1);
-    context.setFieldValue(name, arr.slice(0, index).concat(arr.slice(index + 1)));
-  }, [context, name]);
+    ctx.setFieldValue(name, a.slice(0, index).concat(a.slice(index + 1)));
+  }, [ctx, name]);
   const move = useCallback((from, to) => {
-    if (!context) return;
-    const arr = getList(context, name);
-    if (from === to || from < 0 || to < 0 || from >= arr.length || to >= arr.length) return;
-    const next = [...arr],
-      item = next.splice(from, 1)[0];
+    if (!ctx) return;
+    const a = getList(ctx, name);
+    if (from === to || from < 0 || to < 0 || from >= a.length || to >= a.length) return;
+    const next = [...a];
+    const item = next.splice(from, 1)[0];
     next.splice(to, 0, item);
     const [movedKey] = keysRef.current.splice(from, 1);
     keysRef.current.splice(to, 0, movedKey);
-    context.setFieldValue(name, next);
-  }, [context, name]);
-  if (!context) return null;
+    ctx.setFieldValue(name, next);
+  }, [ctx, name]);
+  if (!ctx) return null;
   syncKeys(listValue.length);
   const fields = listValue.map((_, i) => ({
     name: i,

package/dist/es/components/grid/Grid.js

@@ -8,72 +8,72 @@ const GridImpl = props => {
   const {
     tokensOverride,
     children,
-    columnNum: columnNumProp,
-    gutter: gutterProp,
-    border: borderProp,
-    center: centerProp,
-    square: squareProp,
-    direction: directionProp,
-    reverse: reverseProp,
-    clickable: clickableProp,
-    iconSize: iconSizeProp,
+    columnNum: colNumP,
+    gutter: gutP,
+    border: borderP,
+    center: centerP,
+    square: sqP,
+    direction: dirP,
+    reverse: revP,
+    clickable: clkP,
+    iconSize: iconSzP,
     iconColor,
     style,
     ...rest
   } = props;
   const tokens = useGridTokens(tokensOverride);
   const columnNum = useMemo(() => {
-    const value = columnNumProp ?? tokens.defaults.columnNum;
-    return Number.isFinite(value) && value > 0 ? Math.floor(value) : tokens.defaults.columnNum;
-  }, [columnNumProp, tokens.defaults.columnNum]);
+    const v = colNumP ?? tokens.defaults.columnNum;
+    return Number.isFinite(v) && v > 0 ? Math.floor(v) : tokens.defaults.columnNum;
+  }, [colNumP, tokens.defaults.columnNum]);
   const gutter = useMemo(() => {
-    const value = gutterProp ?? tokens.defaults.gutter;
-    return Number.isFinite(value) && value > 0 ? value : 0;
-  }, [gutterProp, tokens.defaults.gutter]);
-  const border = borderProp ?? tokens.defaults.border;
-  const center = centerProp ?? tokens.defaults.center;
-  const square = squareProp ?? tokens.defaults.square;
-  const direction = directionProp ?? tokens.defaults.direction;
-  const reverse = reverseProp ?? tokens.defaults.reverse;
-  const clickable = clickableProp ?? tokens.defaults.clickable;
+    const v = gutP ?? tokens.defaults.gutter;
+    return Number.isFinite(v) && v > 0 ? v : 0;
+  }, [gutP, tokens.defaults.gutter]);
+  const border = borderP ?? tokens.defaults.border;
+  const center = centerP ?? tokens.defaults.center;
+  const square = sqP ?? tokens.defaults.square;
+  const direction = dirP ?? tokens.defaults.direction;
+  const reverse = revP ?? tokens.defaults.reverse;
+  const clickable = clkP ?? tokens.defaults.clickable;
   const iconSize = useMemo(() => {
-    const value = iconSizeProp ?? tokens.defaults.iconSize;
-    return Number.isFinite(value) && value > 0 ? value : tokens.defaults.iconSize;
-  }, [iconSizeProp, tokens.defaults.iconSize]);
-  const childrenArray = useMemo(() => React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)), [children]);
+    const v = iconSzP ?? tokens.defaults.iconSize;
+    return Number.isFinite(v) && v > 0 ? v : tokens.defaults.iconSize;
+  }, [iconSzP, tokens.defaults.iconSize]);
+  const childrenArray = useMemo(() => React.Children.toArray(children).filter(c => /*#__PURE__*/React.isValidElement(c)), [children]);
   const showBorder = border && !gutter;
-  const borderColor = tokens.colors.border;
+  const borderClr = tokens.colors.border;
   const topBorder = useMemo(() => showBorder ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.border, tokens.layout.borderTop, createHairlineView({
       position: 'top',
-      color: borderColor,
+      color: borderClr,
       left: 0,
       right: 0,
       top: 0
     })]
-  }) : null, [borderColor, showBorder, tokens.layout.border, tokens.layout.borderTop]);
+  }) : null, [borderClr, showBorder, tokens.layout.border, tokens.layout.borderTop]);
   const bottomBorder = useMemo(() => showBorder ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.border, tokens.layout.borderBottom, createHairlineView({
       position: 'bottom',
-      color: borderColor,
+      color: borderClr,
       left: 0,
       right: 0,
       bottom: 0
     })]
-  }) : null, [borderColor, showBorder, tokens.layout.border, tokens.layout.borderBottom]);
-  const contextValue = useMemo(() => ({
-    columnNum: columnNum,
-    gutter: gutter,
-    border: border,
-    center: center,
-    square: square,
-    direction: direction,
-    reverse: reverse,
-    clickable: clickable,
-    iconSize: iconSize,
+  }) : null, [borderClr, showBorder, tokens.layout.border, tokens.layout.borderBottom]);
+  const ctxVal = useMemo(() => ({
+    columnNum,
+    gutter,
+    border,
+    center,
+    square,
+    direction,
+    reverse,
+    clickable,
+    iconSize,
     iconColor,
     count: childrenArray.length,
-    tokens: tokens
+    tokens
   }), [border, center, childrenArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
   const webGridStyle = useMemo(() => Platform.OS === 'web' ? {
     display: 'grid',
@@ -81,19 +81,19 @@ const GridImpl = props => {
     columnGap: gutter,
     rowGap: gutter
   } : undefined, [columnNum, gutter]);
-  const containerStyle = useMemo(() => [tokens.layout.container, Platform.OS === 'web' ? webGridStyle : gutter ? {
+  const ctrStyle = useMemo(() => [tokens.layout.container, Platform.OS === 'web' ? webGridStyle : gutter ? {
     paddingLeft: gutter
   } : undefined, style], [gutter, style, tokens.layout.container, webGridStyle]);
-  const renderedChildren = useMemo(() => childrenArray.map((child, index) => /*#__PURE__*/React.cloneElement(child, {
-    gridItemIndex: index,
-    key: child.key ?? index
+  const rendered = useMemo(() => childrenArray.map((child, i) => /*#__PURE__*/React.cloneElement(child, {
+    gridItemIndex: i,
+    key: child.key ?? i
   })), [childrenArray]);
   return /*#__PURE__*/React.createElement(GridContext.Provider, {
-    value: contextValue
+    value: ctxVal
   }, /*#__PURE__*/React.createElement(View, _extends({
     accessibilityRole: 'grid',
-    style: containerStyle
-  }, rest), topBorder, renderedChildren, bottomBorder));
+    style: ctrStyle
+  }, rest), topBorder, rendered, bottomBorder));
 };
 export const Grid = /*#__PURE__*/React.memo(GridImpl);
 Grid.displayName = 'Grid';

package/dist/es/components/grid/GridItem.js

@@ -1,8 +1,9 @@
 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); }
 import React, { useContext, useMemo } from 'react';
-import { Platform, Pressable, Text, View } from 'react-native';
+import { Platform, Pressable, View } from 'react-native';
+import { Text } from '../../design-system';
 import Badge from '../badge';
-import { createHairlineView, isFunction, isRenderable, isText } from '../../utils';
+import { createHairlineView, isFunction, isRenderable, isText, renderTextOrNode } from '../../utils';
 import { GridContext } from './GridContext';
 const GridItemImpl = p => {
   const ctx = useContext(GridContext);
@@ -47,7 +48,13 @@ const GridItemImpl = p => {
   const ht = isRenderable(text);
   const ric = icp ?? ic ?? t.colors.text;
   const icn = useMemo(() => {
-    if (children) return children;
+    if (children) return isText(children) ? renderTextOrNode(children, [t.layout.text, {
+      color: t.colors.text,
+      fontSize: t.typography.fontSize,
+      lineHeight: t.typography.lineHeight,
+      fontFamily: t.typography.fontFamily,
+      fontWeight: t.typography.fontWeight
+    }, textStyle]) : children;
     let ie = null;
     if (icon || badge || dot) {
       const {

package/dist/es/components/image/Image.js

@@ -72,15 +72,15 @@ const ImageImpl = (props, ref) => {
     height,
     radius,
     round,
-    fit: fitProp,
-    showLoading: showLoadingProp,
-    showError: showErrorProp,
-    loadingText: loadingTextProp,
+    fit: fitP,
+    showLoading: showLoadP,
+    showError: showErrP,
+    loadingText: loadTxtP,
     loadingIcon,
     errorIcon,
-    iconSize: iconSizeProp,
+    iconSize: iconSzP,
     loadingSize,
-    errorText: errorTextProp,
+    errorText: errTxtP,
     fallback,
     onPress,
     alt,
@@ -96,11 +96,11 @@ const ImageImpl = (props, ref) => {
   } = props;
   const locale = useLocale();
   const tokens = useImageTokens(tokensOverride);
-  const fit = fitProp ?? tokens.defaults.fit;
-  const showLoading = showLoadingProp ?? tokens.defaults.showLoading;
-  const showError = showErrorProp ?? tokens.defaults.showError;
-  const loadingText = loadingTextProp !== undefined ? loadingTextProp : locale?.vanImage?.loading ?? tokens.defaults.loadingText;
-  const errorText = errorTextProp !== undefined ? errorTextProp : locale?.vanImage?.error ?? tokens.defaults.errorText;
+  const fit = fitP ?? tokens.defaults.fit;
+  const showLoading = showLoadP ?? tokens.defaults.showLoading;
+  const showError = showErrP ?? tokens.defaults.showError;
+  const loadingText = loadTxtP !== undefined ? loadTxtP : locale?.vanImage?.loading ?? tokens.defaults.loadingText;
+  const errorText = errTxtP !== undefined ? errTxtP : locale?.vanImage?.error ?? tokens.defaults.errorText;
   const {
     container: containerLayoutStyle,
     image: imageStyleWithLayout
@@ -111,14 +111,15 @@ const ImageImpl = (props, ref) => {
   const sourceKey = useMemo(() => {
     if (source) {
       if (typeof source === 'number') return `res:${source}`;
-      const uri = resolveSourceUri(source);
-      if (uri) return `uri:${uri}`;
+      const u = resolveSourceUri(source);
+      if (u) return `uri:${u}`;
       return 'source:unknown';
     }
+    ;
     if (src) return `src:${src}`;
     return 'none';
   }, [source, src]);
-  const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
+  const accLabel = alt ?? accessibilityLabel ?? ariaLabel;
   const [state, setState] = useState(() => actualSource ? 'loading' : 'idle');
   useEffect(() => {
     setState(actualSource ? 'loading' : 'idle');
@@ -150,8 +151,8 @@ const ImageImpl = (props, ref) => {
   const uri = useMemo(() => resolveSourceUri(actualSource), [actualSource]);
   const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
   const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  const resolvedLoadingSize = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
-  const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
+  const rLoadSz = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
+  const rErrIconSz = iconSzP ?? tokens.defaults.iconSize;
   const clickableRole = onPress ? 'button' : undefined;
   const pressableProps = onPress ? {
     onPress
@@ -178,14 +179,14 @@ const ImageImpl = (props, ref) => {
   } : isNumber(radius) ? {
     borderRadius: radius
   } : undefined, containerStyle, containerLayoutStyle], [containerLayoutStyle, containerStyle, height, radius, round, tokens.colors.background, tokens.defaults.roundRadius, tokens.layout.container, width]);
-  const imageAccessibilityLabel = !onPress ? resolvedAccessibilityLabel : undefined;
+  const imgAccLabel = !onPress ? accLabel : undefined;
   const imageNode = actualSource ? isSvg && Platform.OS !== 'web' && uri ? /*#__PURE__*/React.createElement(SvgUri, _extends({
     width: "100%",
     height: "100%",
     uri: uri,
     preserveAspectRatio: resolvePreserveAspectRatio(fit),
     accessible: !onPress,
-    accessibilityLabel: imageAccessibilityLabel
+    accessibilityLabel: imgAccLabel
   }, rest, {
     style: [tokens.layout.absoluteFill, imageStyleWithLayout],
     onLoad: handleSvgLoad,
@@ -193,7 +194,7 @@ const ImageImpl = (props, ref) => {
   })) : /*#__PURE__*/React.createElement(RNImage, _extends({
     ref: ref,
     accessible: !onPress,
-    accessibilityLabel: imageAccessibilityLabel
+    accessibilityLabel: imgAccLabel
   }, rest, {
     source: actualSource,
     style: [tokens.layout.absoluteFill, imageStyleWithLayout, WEB_IMAGE_STYLE],
@@ -210,7 +211,7 @@ const ImageImpl = (props, ref) => {
     size: isString(loadingSize) ? loadingSize : 'small',
     style: {
       transform: [{
-        scale: resolvedLoadingSize / tokens.defaults.loadingIndicatorBaseSize
+        scale: rLoadSz / tokens.defaults.loadingIndicatorBaseSize
       }]
     }
   }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)), imageNode, state === 'error' && showError && /*#__PURE__*/React.createElement(View, {
@@ -219,16 +220,16 @@ const ImageImpl = (props, ref) => {
     testID: "rv-image-error"
   }, errorIcon && /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.iconContainer, {
-      width: resolvedErrorIconSize,
-      height: resolvedErrorIconSize
+      width: rErrIconSz,
+      height: rErrIconSz
     }]
   }, errorIcon), isRenderable(fallback) ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)), children);
   return pressableProps ? /*#__PURE__*/React.createElement(Pressable, _extends({}, pressableProps, {
     accessibilityRole: clickableRole,
-    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityLabel: accLabel,
     style: computedContainerStyle
   }), content) : /*#__PURE__*/React.createElement(View, {
-    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityLabel: accLabel,
     style: computedContainerStyle
   }, content);
 };

package/dist/es/components/image/tokens.js

@@ -4,7 +4,8 @@ const createTokens = foundations => {
     palette,
     spacing,
     fontSize,
-    radii
+    radii,
+    typography
   } = foundations;
   return {
     defaults: {
@@ -34,6 +35,7 @@ const createTokens = foundations => {
         justifyContent: 'center'
       },
       label: {
+        fontFamily: typography.fontFamily,
         fontSize: fontSize.xs
       },
       iconContainer: {