react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/form/utils.js

@@ -0,0 +1,63 @@
+import { isNumber, isString } from '../../utils';
+export const normalizeTrigger = trigger => trigger ? Array.isArray(trigger) ? trigger : [trigger] : [];
+export const toNamePath = name => {
+  if (name === undefined || name === null) return [];
+  if (Array.isArray(name)) return name;
+  if (isNumber(name)) return [name];
+  if (isString(name)) {
+    return name.split('.');
+  }
+  return [String(name)];
+};
+export const serializeNamePath = name => {
+  const path = toNamePath(name);
+  return path.join('.');
+};
+export const getValueByName = (source, name) => {
+  const path = toNamePath(name);
+  return path.reduce((acc, key) => {
+    if (acc == null) return acc;
+    const keyStr = String(key);
+    if (Array.isArray(acc)) {
+      const index = Number(keyStr);
+      return Number.isFinite(index) ? acc[index] : acc[keyStr];
+    }
+    if (typeof acc === 'object') {
+      return acc[keyStr];
+    }
+    return undefined;
+  }, source);
+};
+export const setValueByName = (source, name, value) => {
+  const path = toNamePath(name);
+  if (!path.length) return source;
+  const clone = Array.isArray(source) ? [...source] : typeof source === 'object' && source !== null ? {
+    ...source
+  } : {};
+  let cursor = clone;
+  path.forEach((key, index) => {
+    const keyStr = String(key);
+    const keyIndex = Number(keyStr);
+    if (index === path.length - 1) {
+      if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
+        cursor[keyIndex] = value;
+      } else {
+        ;
+        cursor[keyStr] = value;
+      }
+      return;
+    }
+    const nextVal = Array.isArray(cursor) && Number.isFinite(keyIndex) ? cursor[keyIndex] : cursor[keyStr];
+    const nextContainer = nextVal === undefined || nextVal === null ? isNumber(path[index + 1]) ? [] : {} : Array.isArray(nextVal) ? [...nextVal] : typeof nextVal === 'object' ? {
+      ...nextVal
+    } : {};
+    if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
+      cursor[keyIndex] = nextContainer;
+    } else {
+      ;
+      cursor[keyStr] = nextContainer;
+    }
+    cursor = nextContainer;
+  });
+  return clone;
+};

package/dist/es/grid/Grid.js

@@ -0,0 +1,83 @@
+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, { useMemo } from 'react';
+import { View } from 'react-native';
+import { createHairlineView } from '../../utils';
+import { GridContext } from './GridContext';
+import { useGridTokens } from './tokens';
+export const Grid = props => {
+  const {
+    tokensOverride,
+    children,
+    columnNum: columnNumProp,
+    gutter: gutterProp,
+    border: borderProp,
+    center: centerProp,
+    square: squareProp,
+    direction: directionProp,
+    reverse: reverseProp,
+    clickable: clickableProp,
+    iconSize: iconSizeProp,
+    iconColor,
+    style,
+    ...rest
+  } = props;
+  const tokens = useGridTokens(tokensOverride);
+  const columnNumValue = columnNumProp ?? tokens.defaults.columnNum;
+  const columnNum = Number.isFinite(columnNumValue) && columnNumValue > 0 ? Math.floor(columnNumValue) : tokens.defaults.columnNum;
+  const gutterValue = gutterProp ?? tokens.defaults.gutter;
+  const gutter = Number.isFinite(gutterValue) && gutterValue > 0 ? gutterValue : 0;
+  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 iconSizeValue = iconSizeProp ?? tokens.defaults.iconSize;
+  const iconSize = Number.isFinite(iconSizeValue) && iconSizeValue > 0 ? iconSizeValue : tokens.defaults.iconSize;
+  const childArray = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
+  const showBorder = border && !gutter;
+  const borderColor = tokens.colors.border;
+  const topBorder = showBorder && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.border, tokens.layout.borderTop, createHairlineView({
+      position: 'top',
+      color: borderColor,
+      left: 0,
+      right: 0,
+      top: 0
+    })]
+  });
+  const bottomBorder = showBorder && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.border, tokens.layout.borderBottom, createHairlineView({
+      position: 'bottom',
+      color: borderColor,
+      left: 0,
+      right: 0,
+      bottom: 0
+    })]
+  });
+  const contextValue = useMemo(() => ({
+    columnNum,
+    gutter,
+    border,
+    center,
+    square,
+    direction,
+    reverse,
+    clickable,
+    iconSize,
+    iconColor,
+    count: childArray.length,
+    tokens
+  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+  return /*#__PURE__*/React.createElement(GridContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({
+    style: [tokens.layout.container, gutter ? {
+      paddingLeft: gutter
+    } : undefined, style]
+  }, rest), topBorder, childArray.map((child, index) => /*#__PURE__*/React.cloneElement(child, {
+    gridItemIndex: index,
+    key: child.key ?? index
+  })), bottomBorder));
+};
+Grid.displayName = 'Grid';

package/dist/es/grid/GridContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const GridContext = /*#__PURE__*/React.createContext(null);

package/dist/es/grid/GridItem.js

@@ -0,0 +1,131 @@
+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 } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Badge from '../badge';
+import { createHairlineView, isFunction, isRenderable, isText } from '../../utils';
+import { GridContext } from './GridContext';
+export const GridItem = props => {
+  const context = useContext(GridContext);
+  if (!context) throw new Error('GridItem must be used within Grid');
+  const {
+    gridItemIndex = 0,
+    text,
+    icon,
+    iconColor: iconColorProp,
+    badge,
+    dot,
+    contentStyle,
+    textStyle,
+    children,
+    style,
+    onPress,
+    ...rest
+  } = props;
+  const {
+    tokens,
+    columnNum,
+    gutter,
+    border,
+    center,
+    square,
+    direction,
+    reverse,
+    clickable,
+    iconSize,
+    iconColor,
+    count
+  } = context;
+  const widthPercent = `${100 / columnNum}%`;
+  const isLastColumn = (gridItemIndex + 1) % columnNum === 0;
+  const rowIndex = Math.floor(gridItemIndex / columnNum);
+  const lastRowIndex = Math.floor((count - 1) / columnNum);
+  const contentWrapperStyle = [tokens.layout.itemContentBase, direction === 'horizontal' ? tokens.layout.itemHorizontal : tokens.layout.itemVertical, center && tokens.layout.itemCenter, reverse ? direction === 'horizontal' ? tokens.layout.itemReverseRow : tokens.layout.itemReverseColumn : null, square ? tokens.layout.itemContentSquare : null, {
+    paddingHorizontal: tokens.spacing.paddingHorizontal,
+    paddingVertical: tokens.spacing.paddingVertical,
+    backgroundColor: tokens.colors.background
+  }, contentStyle];
+  const hasText = isRenderable(text);
+  const resolvedIconColor = iconColorProp ?? iconColor ?? tokens.colors.text;
+  let innerContent = children;
+  if (!innerContent) {
+    let iconElement = null;
+    if (icon || badge || dot) {
+      const {
+        style: badgeWrapperStyle,
+        ...badgeRest
+      } = badge ?? {};
+      const marginKey = direction === 'vertical' ? reverse ? 'marginTop' : 'marginBottom' : reverse ? 'marginLeft' : 'marginRight';
+      const iconWrapperStyle = [tokens.layout.iconWrapper, hasText && {
+        [marginKey]: tokens.spacing.iconGap
+      }];
+      const iconNode = isFunction(icon) ? icon(iconSize, resolvedIconColor) : icon;
+      const content = /*#__PURE__*/React.createElement(View, {
+        style: iconWrapperStyle
+      }, iconNode);
+      iconElement = badge || dot ? /*#__PURE__*/React.createElement(Badge, _extends({
+        dot: dot
+      }, badgeRest, {
+        style: center ? [badgeWrapperStyle, {
+          alignSelf: 'center'
+        }] : badgeWrapperStyle
+      }), content) : content;
+    }
+    const textElement = hasText && (isText(text) ? /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.text, {
+        color: tokens.colors.text,
+        fontSize: tokens.typography.fontSize,
+        lineHeight: tokens.typography.lineHeight,
+        fontFamily: tokens.typography.fontFamily,
+        fontWeight: tokens.typography.fontWeight
+      }, textStyle],
+      numberOfLines: tokens.defaults.textNumberOfLines
+    }, text) : text);
+    innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, iconElement, textElement);
+  }
+  const rightBorder = border && !gutter && !isLastColumn && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.itemBorderRight, createHairlineView({
+      position: 'right',
+      color: tokens.colors.border,
+      top: 0,
+      bottom: 0,
+      right: 0
+    })]
+  });
+  const bottomBorder = border && !gutter && rowIndex < lastRowIndex && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.itemBorderBottom, createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0,
+      bottom: 0
+    })]
+  });
+  const content = /*#__PURE__*/React.createElement(View, {
+    style: contentWrapperStyle
+  }, innerContent, rightBorder, bottomBorder);
+  const baseItemStyle = {
+    width: widthPercent,
+    flexGrow: 0,
+    flexShrink: 0,
+    paddingRight: gutter ? gutter : undefined,
+    marginTop: gutter && rowIndex > 0 ? gutter : undefined
+  };
+  const isInteractive = clickable || isFunction(onPress);
+  if (isInteractive) {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
+      style: pressableState => [baseItemStyle, typeof style === 'function' ? style(pressableState) : style, {
+        opacity: pressableState.pressed ? tokens.defaults.pressedOpacity : 1
+      }],
+      android_ripple: {
+        color: tokens.colors.active
+      },
+      onPress: onPress
+    }, rest), content);
+  }
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [baseItemStyle, typeof style === 'function' ? style({
+      pressed: false
+    }) : style]
+  }, rest), content);
+};
+GridItem.displayName = 'GridItem';

package/dist/es/grid/index.js

@@ -0,0 +1,6 @@
+import { Grid } from './Grid';
+import { GridItem } from './GridItem';
+export const GridComponent = Object.assign(Grid, {
+  Item: GridItem
+});
+export default GridComponent;

package/dist/es/grid/tokens.js

@@ -0,0 +1,98 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createGridTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography,
+    opacity
+  } = foundations;
+  return {
+    defaults: {
+      columnNum: 4,
+      gutter: 0,
+      border: true,
+      center: true,
+      square: false,
+      direction: 'vertical',
+      reverse: false,
+      clickable: false,
+      iconSize: 28,
+      pressedOpacity: opacity.pressed,
+      textNumberOfLines: 2
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      },
+      border: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        height: 1,
+        zIndex: 1
+      },
+      borderTop: {
+        top: 0
+      },
+      borderBottom: {
+        bottom: 0
+      },
+      itemContentBase: {
+        justifyContent: 'center'
+      },
+      itemVertical: {
+        flexDirection: 'column'
+      },
+      itemHorizontal: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      itemCenter: {
+        alignItems: 'center'
+      },
+      itemReverseColumn: {
+        flexDirection: 'column-reverse'
+      },
+      itemReverseRow: {
+        flexDirection: 'row-reverse'
+      },
+      iconWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      text: {
+        textAlign: 'center'
+      },
+      itemBorderRight: {
+        width: 1
+      },
+      itemBorderBottom: {
+        height: 1
+      },
+      itemContentSquare: {
+        width: '100%',
+        aspectRatio: 1
+      }
+    },
+    colors: {
+      border: palette.default[200],
+      text: palette.default[600],
+      background: '#ffffff',
+      active: palette.default[100]
+    },
+    typography: {
+      fontSize: fontSize.sm,
+      fontFamily: typography.fontFamily,
+      lineHeight: Math.round(fontSize.sm * typography.lineHeightMultiplier),
+      fontWeight: typography.weight.regular
+    },
+    spacing: {
+      paddingHorizontal: spacing.sm,
+      paddingVertical: spacing.md,
+      iconGap: spacing.sm
+    }
+  };
+};
+export const useGridTokens = createComponentTokensHook('grid', createGridTokens);

package/dist/es/image/Image.js

@@ -0,0 +1,233 @@
+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, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+import { isNumber, isString, isText } from '../../utils';
+import { useImageTokens } from './tokens';
+const resolveFitMode = fit => {
+  switch (fit) {
+    case 'fill':
+      return 'stretch';
+    case 'scale-down':
+      return 'contain';
+    case 'none':
+      return 'center';
+    default:
+      return fit;
+  }
+};
+const LAYOUT_STYLE_KEYS = new Set(['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf', 'aspectRatio', 'position', 'top', 'right', 'bottom', 'left', 'start', 'end', 'opacity', 'borderRadius']);
+const isLayoutStyleKey = key => LAYOUT_STYLE_KEYS.has(key) || key === 'backgroundColor' || key.startsWith('margin') || key.startsWith('padding') || key.startsWith('border') || key.endsWith('Radius');
+const splitImageStyle = style => {
+  if (!style) return {
+    container: undefined,
+    image: undefined
+  };
+  const flattened = StyleSheet.flatten(style) ?? {};
+  const flattenedRecord = flattened;
+  const container = {};
+  const image = {};
+  for (const key of Object.keys(flattenedRecord)) {
+    const value = flattenedRecord[key];
+    if (value === undefined) continue;
+    if (isLayoutStyleKey(key)) {
+      container[key] = value;
+    } else {
+      image[key] = value;
+    }
+  }
+  return {
+    container: Object.keys(container).length ? container : undefined,
+    image: Object.keys(image).length ? image : undefined
+  };
+};
+const PRESERVE_ASPECT_RATIO_MAP = {
+  contain: 'xMidYMid meet',
+  'scale-down': 'xMidYMid meet',
+  stretch: 'none',
+  fill: 'none',
+  none: 'xMidYMid meet',
+  center: 'xMidYMid meet'
+};
+const resolvePreserveAspectRatio = fit => PRESERVE_ASPECT_RATIO_MAP[fit] || 'xMidYMid slice';
+const resolveSourceUri = source => {
+  if (!source) return undefined;
+  if (typeof source === 'number') return undefined;
+  if (Array.isArray(source)) {
+    for (const item of source) {
+      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
+        return item.uri;
+      }
+    }
+    return undefined;
+  }
+  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') {
+    return source.uri;
+  }
+  return undefined;
+};
+const Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    src,
+    source,
+    width,
+    height,
+    radius,
+    round,
+    fit: fitProp,
+    showLoading: showLoadingProp,
+    showError: showErrorProp,
+    loadingText: loadingTextProp,
+    loadingIcon,
+    errorIcon,
+    iconSize: iconSizeProp,
+    loadingSize,
+    errorText: errorTextProp,
+    fallback,
+    onPress,
+    alt,
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
+    containerStyle,
+    style,
+    children,
+    tokensOverride,
+    onLoad,
+    onError,
+    ...rest
+  } = props;
+  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 ?? tokens.defaults.loadingText;
+  const errorText = errorTextProp ?? tokens.defaults.errorText;
+  const {
+    container: containerLayoutStyle,
+    image: imageStyleWithoutLayout
+  } = useMemo(() => splitImageStyle(style), [style]);
+  const actualSource = useMemo(() => {
+    if (source) return source;
+    if (src) return {
+      uri: src
+    };
+    return undefined;
+  }, [source, src]);
+  const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
+  const [status, setStatus] = useState(() => actualSource ? 'loading' : 'idle');
+  useEffect(() => {
+    setStatus(actualSource ? 'loading' : 'idle');
+  }, [actualSource]);
+  const handleLoad = useCallback(event => {
+    setStatus('loaded');
+    onLoad?.(event);
+  }, [onLoad]);
+  const handleError = useCallback(event => {
+    setStatus('error');
+    onError?.(event);
+  }, [onError]);
+  const handleSvgLoad = useCallback(() => {
+    handleLoad({
+      nativeEvent: {}
+    });
+  }, [handleLoad]);
+  const handleSvgError = useCallback(error => {
+    handleError({
+      nativeEvent: {
+        error
+      }
+    });
+  }, [handleError]);
+  const uri = resolveSourceUri(actualSource);
+  const isSvg = useMemo(() => {
+    const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
+    return isString(normalizedUri) && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
+  }, [uri]);
+  const resolvedLoadingSize = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
+  const resolvedErrorIconSize = iconSizeProp ?? tokens.defaults.iconSize;
+  const containerRole = onPress ? 'button' : undefined;
+  const pressableProps = onPress ? {
+    onPress
+  } : null;
+  const renderLabel = (node, color, marginTop) => {
+    if (node == null || node === false) return null;
+    if (isText(node)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.label, {
+          color
+        }, marginTop ? {
+          marginTop
+        } : undefined]
+      }, node);
+    }
+    return marginTop ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        marginTop
+      }
+    }, node) : node;
+  };
+  const containerStyles = [tokens.layout.container, {
+    width: width,
+    height: height,
+    backgroundColor: tokens.colors.background
+  }, round ? {
+    borderRadius: tokens.defaults.roundRadius
+  } : isNumber(radius) ? {
+    borderRadius: radius
+  } : undefined, containerStyle, containerLayoutStyle];
+  const imageAccessibilityLabel = !onPress ? resolvedAccessibilityLabel : 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
+  }, rest, {
+    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
+    onLoad: handleSvgLoad,
+    onError: handleSvgError
+  })) : /*#__PURE__*/React.createElement(RNImage, _extends({
+    ref: ref,
+    accessible: !onPress,
+    accessibilityLabel: imageAccessibilityLabel
+  }, rest, {
+    source: actualSource,
+    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
+    resizeMode: resolveFitMode(fit),
+    onLoad: handleLoad,
+    onError: handleError
+  })) : null;
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, status === 'loading' && showLoading ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.overlay,
+    pointerEvents: "none",
+    testID: "rv-image-loading"
+  }, loadingIcon || /*#__PURE__*/React.createElement(ActivityIndicator, {
+    color: tokens.colors.text,
+    size: isString(loadingSize) ? loadingSize : 'small',
+    style: {
+      transform: [{
+        scale: resolvedLoadingSize / tokens.defaults.loadingIndicatorBaseSize
+      }]
+    }
+  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)) : null, imageNode, status === 'error' && showError ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.overlay,
+    pointerEvents: "none",
+    testID: "rv-image-error"
+  }, errorIcon ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.iconContainer, {
+      width: resolvedErrorIconSize,
+      height: resolvedErrorIconSize
+    }]
+  }, errorIcon) : null, fallback !== undefined && fallback !== null && fallback !== false ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)) : null, children);
+  return pressableProps ? /*#__PURE__*/React.createElement(Pressable, _extends({}, pressableProps, {
+    accessibilityRole: containerRole,
+    accessibilityLabel: resolvedAccessibilityLabel,
+    style: containerStyles
+  }), content) : /*#__PURE__*/React.createElement(View, {
+    accessibilityLabel: resolvedAccessibilityLabel,
+    style: containerStyles
+  }, content);
+});
+Image.displayName = 'Image';
+export default Image;

package/dist/es/image/index.js

@@ -0,0 +1,3 @@
+import Image from './Image';
+export { useImageTokens } from './tokens';
+export default Image;

package/dist/es/image/tokens.js

@@ -0,0 +1,58 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    radii
+  } = foundations;
+  return {
+    defaults: {
+      fit: 'cover',
+      showLoading: true,
+      showError: true,
+      loadingText: '加载中…',
+      errorText: '加载失败',
+      iconSize: 20,
+      loadingIndicatorBaseSize: 20,
+      loadingLabelMarginTop: spacing.xs,
+      roundRadius: radii.full
+    },
+    layout: {
+      container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+      },
+      overlay: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      label: {
+        fontSize: fontSize.xs
+      },
+      iconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      absoluteFill: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      }
+    },
+    colors: {
+      background: '#ffffff',
+      text: palette.default[500],
+      error: palette.danger[500]
+    }
+  };
+};
+export const useImageTokens = createComponentTokensHook('image', createTokens);