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

package/dist/es/cell/Cell.js

@@ -0,0 +1,166 @@
+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 { Arrow } from 'react-native-system-icon';
+import { useAriaPress, useHairline } from '../../hooks';
+import { isRenderable, isText } from '../../utils';
+import { CellGroupContext } from './CellContext';
+import { useCellTokens } from './tokens';
+const TextOrView = ({
+  children,
+  textStyle,
+  viewStyle,
+  numberOfLines
+}) => {
+  if (isText(children)) {
+    return /*#__PURE__*/React.createElement(Text, {
+      style: textStyle,
+      numberOfLines: numberOfLines
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: viewStyle
+  }, children);
+};
+export const Cell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    title,
+    value,
+    label,
+    extra,
+    icon,
+    rightIcon,
+    border: borderProp,
+    clickable,
+    isLink,
+    required,
+    center,
+    size: sizeProp,
+    arrowDirection: arrowDirectionProp,
+    tokensOverride,
+    children,
+    style,
+    titleStyle,
+    valueStyle,
+    labelStyle,
+    contentStyle,
+    onPress,
+    disabled,
+    android_ripple,
+    ...rest
+  } = props;
+  const tokens = useCellTokens(tokensOverride);
+  const group = useContext(CellGroupContext);
+  const border = borderProp ?? tokens.defaults.border;
+  const size = sizeProp ?? tokens.defaults.size;
+  const arrowDirection = arrowDirectionProp ?? tokens.defaults.arrowDirection;
+  const lineHeight = tokens.typography.lineHeight;
+  const hasTitle = isRenderable(title);
+  const hasValue = isRenderable(value);
+  const hasLabel = isRenderable(label);
+  const hasExtra = isRenderable(extra);
+  const hasChildren = isRenderable(children);
+  const hasIcon = isRenderable(icon);
+  const hasRightIcon = isRenderable(rightIcon);
+  const onlyValue = !hasTitle && !hasChildren;
+  const showBorder = border && group.border && !group.isLast;
+  const showArrow = !!isLink || !!clickable;
+  const isInteractive = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
+  const containerStyles = [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style];
+  const hairline = useHairline({
+    show: showBorder,
+    containerStyle: containerStyles,
+    color: tokens.colors.border,
+    width: tokens.borders.width,
+    defaultPaddingHorizontal: tokens.sizing.paddingHorizontal
+  });
+  const customContentStyle = [tokens.layout.customContent, {
+    justifyContent: center ? 'center' : 'flex-start'
+  }, contentStyle];
+  const bodyContent = /*#__PURE__*/React.createElement(React.Fragment, null, hasIcon && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.iconWrapper, {
+      marginRight: tokens.spacing.iconGap,
+      minHeight: tokens.sizing.iconSize,
+      minWidth: tokens.sizing.iconSize
+    }]
+  }, icon), /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.body
+  }, (hasTitle || required) && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.titleRow, {
+      minHeight: lineHeight
+    }]
+  }, required && /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: tokens.colors.required,
+      marginRight: tokens.spacing.iconGap / 2
+    }
+  }, "*"), hasTitle && /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: [{
+      color: tokens.colors.title,
+      fontSize: size === 'large' ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
+      fontWeight: tokens.typography.titleWeight
+    }, titleStyle],
+    viewStyle: titleStyle,
+    numberOfLines: 1
+  }, title)), hasLabel && /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: [{
+      marginTop: tokens.spacing.labelMarginTop,
+      color: tokens.colors.label,
+      fontSize: size === 'large' ? tokens.typography.largeLabelSize : tokens.typography.labelSize
+    }, labelStyle],
+    viewStyle: [{
+      marginTop: tokens.spacing.labelMarginTop
+    }, labelStyle],
+    numberOfLines: 2
+  }, label)), /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.valueContainer, {
+      minHeight: lineHeight,
+      marginLeft: tokens.spacing.valueGap
+    }, !center && onlyValue && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
+  }, hasValue ? /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: [tokens.layout.value, onlyValue && tokens.layout.valueOnly, {
+      color: tokens.colors.value,
+      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
+    }, valueStyle],
+    viewStyle: customContentStyle,
+    numberOfLines: 1
+  }, value) : hasChildren ? /*#__PURE__*/React.createElement(View, {
+    style: customContentStyle
+  }, children) : null), hasExtra && /*#__PURE__*/React.createElement(TextOrView, {
+    textStyle: {
+      marginLeft: tokens.spacing.extraGap,
+      color: tokens.colors.value,
+      fontSize: size === 'large' ? tokens.typography.largeValueSize : tokens.typography.valueSize
+    },
+    viewStyle: {
+      marginLeft: tokens.spacing.extraGap
+    }
+  }, extra), hasRightIcon ? rightIcon : showArrow ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arrowDirection]]
+  }, /*#__PURE__*/React.createElement(Arrow, {
+    size: tokens.sizing.arrowSize,
+    fill: tokens.colors.arrow
+  })) : null);
+  const {
+    interactionProps,
+    states
+  } = useAriaPress({
+    disabled: !isInteractive,
+    onPress: onPress ?? undefined
+  });
+  const Component = isInteractive ? Pressable : View;
+  const componentProps = isInteractive ? {
+    android_ripple: android_ripple ?? {
+      color: tokens.colors.ripple
+    },
+    accessibilityRole: 'button',
+    ...interactionProps
+  } : {};
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: [containerStyles, isInteractive && states.pressed && {
+      opacity: tokens.defaults.activeOpacity
+    }]
+  }, componentProps, rest), bodyContent, hairline);
+});
+Cell.displayName = 'Cell';

package/dist/es/cell/CellContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const CellGroupContext = /*#__PURE__*/React.createContext({
+  border: true,
+  inset: false,
+  isLast: false
+});

package/dist/es/cell/CellGroup.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { createHairlineView } from '../../utils';
+import { Cell as CellBase } from './Cell';
+import { CellGroupContext } from './CellContext';
+import { useCellTokens } from './tokens';
+export const CellGroup = ({
+  children,
+  title,
+  border,
+  inset,
+  card,
+  style,
+  bodyStyle,
+  tokensOverride
+}) => {
+  const tokens = useCellTokens(tokensOverride);
+  const resolvedBorder = border ?? tokens.defaults.groupBorder;
+  const resolvedInset = inset ?? tokens.defaults.groupInset;
+  const resolvedCard = card ?? tokens.defaults.groupCard;
+  const showInset = resolvedInset || resolvedCard;
+  const showOuterBorder = resolvedBorder && !showInset;
+  const childArray = React.Children.toArray(children);
+  const isCellElement = child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return false;
+    if (child.type === CellBase) return true;
+    const type = child.type;
+    return type.displayName === 'Cell';
+  };
+  const lastCellIndex = (() => {
+    for (let i = childArray.length - 1; i >= 0; i--) {
+      const child = childArray[i];
+      if (isCellElement(child)) return i;
+    }
+    return -1;
+  })();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      marginBottom: resolvedCard ? 0 : tokens.sizing.groupMarginBottom
+    }, style]
+  }, title ? /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: tokens.colors.groupTitle,
+      fontSize: tokens.typography.groupTitleSize,
+      paddingHorizontal: tokens.sizing.groupTitlePaddingHorizontal,
+      paddingVertical: tokens.sizing.groupTitlePaddingVertical
+    }
+  }, title) : null, /*#__PURE__*/React.createElement(View, {
+    style: [{
+      backgroundColor: tokens.colors.groupBodyBackground
+    }, showInset && {
+      overflow: 'hidden',
+      borderRadius: tokens.radii.groupInset,
+      marginHorizontal: tokens.sizing.groupInsetMarginHorizontal,
+      backgroundColor: tokens.colors.background
+    }, resolvedCard ? tokens.layout.groupCardShadow : null, bodyStyle]
+  }, childArray.map((child, index) => {
+    const key = /*#__PURE__*/React.isValidElement(child) && child.key != null ? child.key : index;
+    const isCell = isCellElement(child);
+    return /*#__PURE__*/React.createElement(CellGroupContext.Provider, {
+      key: key,
+      value: {
+        border: resolvedBorder,
+        inset: showInset,
+        isLast: isCell ? index === lastCellIndex : false
+      }
+    }, child);
+  }), showOuterBorder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'top',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0,
+      enabled: tokens.borders.width > 0,
+      width: tokens.borders.width
+    })
+  }), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0,
+      enabled: tokens.borders.width > 0,
+      width: tokens.borders.width
+    })
+  })) : null));
+};

package/dist/es/cell/index.js

@@ -0,0 +1,8 @@
+import { Cell as CellBase } from './Cell';
+import { CellGroup } from './CellGroup';
+const Cell = Object.assign(CellBase, {
+  Group: CellGroup
+});
+export default Cell;
+export { Cell };
+export { CellGroup };

package/dist/es/cell/tokens.js

@@ -0,0 +1,160 @@
+import { StyleSheet } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+export const createCellTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography,
+    radii
+  } = foundations;
+  const background = '#ffffff';
+  const paddingVertical = 10;
+  const largePaddingVertical = 14;
+  const paddingHorizontal = 16;
+  const arrowSize = 16;
+  const iconSize = 16;
+  const baseContainerLayout = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    width: '100%',
+    backgroundColor: background,
+    paddingHorizontal
+  };
+  return {
+    defaults: {
+      border: true,
+      size: 'normal',
+      arrowDirection: 'right',
+      activeOpacity: 0.6,
+      groupBorder: true,
+      groupInset: false,
+      groupCard: false
+    },
+    layout: {
+      container: {
+        ...baseContainerLayout,
+        paddingVertical
+      },
+      containerLarge: {
+        ...baseContainerLayout,
+        paddingVertical: largePaddingVertical
+      },
+      center: {
+        alignItems: 'center'
+      },
+      body: {
+        minWidth: 0,
+        flexDirection: 'column'
+      },
+      titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      value: {
+        textAlign: 'right'
+      },
+      valueOnly: {
+        textAlign: 'left'
+      },
+      valueContainer: {
+        flex: 1,
+        flexShrink: 1,
+        minWidth: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end'
+      },
+      valueOnlyContainer: {
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start'
+      },
+      valueCenter: {
+        alignItems: 'center'
+      },
+      customContent: {
+        flexShrink: 1,
+        minWidth: 0
+      },
+      iconWrapper: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      rightIconWrapper: {
+        alignSelf: 'center',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      hairline: {
+        position: 'absolute',
+        bottom: 0
+      },
+      groupCardShadow: {},
+      arrowTransforms: {
+        left: {
+          transform: [{
+            rotate: '180deg'
+          }]
+        },
+        right: {},
+        up: {
+          transform: [{
+            rotate: '-90deg'
+          }]
+        },
+        down: {
+          transform: [{
+            rotate: '90deg'
+          }]
+        }
+      }
+    },
+    colors: {
+      background,
+      ripple: palette.default[100],
+      title: palette.default[800],
+      label: palette.default[500],
+      value: palette.default[600],
+      required: palette.danger[500],
+      border: palette.default[200],
+      arrow: palette.default[400],
+      groupTitle: palette.default[500],
+      groupBodyBackground: background
+    },
+    typography: {
+      titleSize: fontSize.sm,
+      lineHeight: 24,
+      titleWeight: typography.weight.medium,
+      largeTitleSize: fontSize.lg,
+      labelSize: fontSize.xs,
+      largeLabelSize: fontSize.sm,
+      valueSize: fontSize.sm,
+      largeValueSize: fontSize.md,
+      groupTitleSize: fontSize.sm
+    },
+    sizing: {
+      paddingVertical,
+      paddingHorizontal,
+      largePaddingVertical,
+      arrowSize,
+      iconSize,
+      groupMarginBottom: spacing.md,
+      groupTitlePaddingHorizontal: spacing.lg,
+      groupTitlePaddingVertical: spacing.sm,
+      groupInsetMarginHorizontal: spacing.lg
+    },
+    radii: {
+      groupInset: radii.lg
+    },
+    borders: {
+      width: StyleSheet.hairlineWidth
+    },
+    spacing: {
+      iconGap: spacing.sm,
+      valueGap: spacing.none,
+      extraGap: spacing.sm,
+      labelMarginTop: spacing.xs
+    }
+  };
+};
+export const useCellTokens = createComponentTokensHook('cell', createCellTokens);

package/dist/es/checkbox/Checkbox.js

@@ -0,0 +1,211 @@
+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, useEffect, useImperativeHandle, useRef } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
+import { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';
+import { useToggleState } from '@react-stately/toggle';
+import { CheckboxGroupContext } from './CheckboxContext';
+import { useCheckboxTokens } from './tokens';
+import { isText } from '../../utils';
+export const Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    name,
+    value,
+    iconRender,
+    bindGroup: bindGroupProp,
+    shape,
+    iconSize,
+    checkedColor,
+    labelPosition,
+    labelDisabled,
+    disabled,
+    style,
+    labelStyle,
+    tokensOverride,
+    hitSlop = 8,
+    accessibilityLabel,
+    ['aria-label']: ariaLabel,
+    onClick,
+    onChange,
+    ...rest
+  } = props;
+  const tokens = useCheckboxTokens(tokensOverride);
+  const group = useContext(CheckboxGroupContext);
+  const bindGroup = bindGroupProp ?? tokens.defaults.bindGroup;
+  const resolvedShape = shape ?? group?.shape ?? tokens.defaults.shape;
+  const resolvedIconSize = iconSize ?? group?.iconSize ?? tokens.defaults.iconSize;
+  const resolvedCheckedColor = checkedColor ?? group?.checkedColor ?? tokens.colors.checkedBackground;
+  const resolvedIconRender = iconRender ?? group?.iconRender;
+  const resolvedLabelPosition = labelPosition ?? tokens.defaults.labelPosition;
+  const resolvedLabelDisabled = labelDisabled ?? group?.labelDisabled ?? tokens.defaults.labelDisabled;
+  const resolvedDisabled = Boolean(disabled || group?.state.isDisabled);
+  const rawValue = value ?? name;
+  const serializedValue = rawValue == null ? undefined : String(rawValue);
+  const internalRef = useRef(null);
+  useImperativeHandle(ref, () => internalRef.current);
+  const standaloneState = useToggleState({
+    isSelected: props.checked,
+    defaultSelected: props.defaultChecked,
+    onChange
+  });
+  const isGroup = !!group && serializedValue !== undefined && bindGroup;
+  const {
+    onBlur,
+    onFocus,
+    ...compatibleRest
+  } = rest;
+  useEffect(() => {
+    if (group && bindGroup && serializedValue !== undefined && rawValue !== undefined) {
+      group.registerValue(serializedValue, rawValue, resolvedDisabled);
+      return () => group.unregisterValue(serializedValue);
+    }
+    return undefined;
+  }, [bindGroup, group, serializedValue, rawValue, resolvedDisabled]);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'checkbox';
+  let inputProps;
+  let isChecked;
+  if (isGroup && group) {
+    const {
+      inputProps: groupInputProps
+    } = useCheckboxGroupItem({
+      ...compatibleRest,
+      value: serializedValue,
+      isDisabled: resolvedDisabled,
+      'aria-label': resolvedAccessibilityLabel
+    }, group.state, internalRef);
+    inputProps = groupInputProps;
+    isChecked = group.state.isSelected(serializedValue);
+  } else {
+    const {
+      inputProps: standaloneProps
+    } = useCheckbox({
+      ...compatibleRest,
+      isDisabled: resolvedDisabled,
+      value: serializedValue,
+      'aria-label': resolvedAccessibilityLabel
+    }, standaloneState, internalRef);
+    inputProps = standaloneProps;
+    isChecked = props.checked !== undefined ? props.checked : standaloneState.isSelected;
+  }
+  const borderRadius = resolvedShape === 'round' ? resolvedIconSize / 2 : tokens.radii.square;
+  const borderColor = resolvedDisabled ? tokens.colors.disabledBorder : isChecked ? resolvedCheckedColor : tokens.colors.border;
+  const backgroundColor = resolvedDisabled ? tokens.colors.disabledBackground : isChecked ? resolvedCheckedColor : tokens.colors.background;
+  const labelColor = resolvedDisabled || resolvedLabelDisabled ? tokens.colors.labelDisabled : tokens.colors.label;
+  const spacingStyle = resolvedLabelPosition === 'left' ? {
+    marginRight: tokens.spacing.gap
+  } : {
+    marginLeft: tokens.spacing.gap
+  };
+  const originalOnPress = inputProps?.onPress;
+  const mergedInputProps = inputProps ? {
+    ...inputProps,
+    onPress: e => {
+      onClick?.(e);
+      if (isGroup && group?.max && !isChecked && group.state.value.length >= group.max) {
+        return;
+      }
+      if (originalOnPress) {
+        originalOnPress(e);
+        return;
+      }
+      if (isGroup && group && serializedValue !== undefined) {
+        if (isChecked) group.state.removeValue(serializedValue);else group.state.addValue(serializedValue);
+        return;
+      }
+      if (props.checked !== undefined) {
+        onChange?.(!props.checked);
+        return;
+      }
+      if (onChange) {
+        standaloneState.setSelected(!standaloneState.isSelected);
+      }
+    }
+  } : {};
+  const labelNode = children === null || children === undefined || children === false ? null : isText(children) ? /*#__PURE__*/React.createElement(Text, {
+    accessible: false,
+    style: [tokens.layout.label, {
+      color: labelColor,
+      fontSize: tokens.typography.fontSize,
+      lineHeight: tokens.typography.fontSize * tokens.typography.lineHeightMultiplier,
+      fontFamily: tokens.typography.fontFamily,
+      fontWeight: tokens.typography.fontWeight
+    }, labelStyle]
+  }, children) : /*#__PURE__*/React.createElement(View, {
+    accessible: false,
+    style: labelStyle
+  }, children);
+  const iconBaseStyle = {
+    width: resolvedIconSize,
+    height: resolvedIconSize,
+    borderRadius,
+    borderColor,
+    backgroundColor,
+    borderWidth: tokens.borders.width
+  };
+  const defaultIcon = /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.icon, iconBaseStyle]
+  }, isChecked && /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.checkmark, {
+      color: tokens.colors.checkmark,
+      fontSize: resolvedIconSize * tokens.icon.scale
+    }]
+  }, "\u2713"));
+  let iconVisual = defaultIcon;
+  if (resolvedIconRender) {
+    iconVisual = resolvedIconRender({
+      checked: Boolean(isChecked),
+      disabled: Boolean(resolvedDisabled)
+    }) ?? null;
+  }
+  const interactive = !resolvedDisabled && !resolvedLabelDisabled;
+  const labelWrapper = labelNode && /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.labelWrapper, spacingStyle],
+    pointerEvents: resolvedLabelDisabled ? 'none' : undefined,
+    accessible: false
+  }, labelNode);
+  const iconWrapperStyle = [tokens.layout.iconWrapper, resolvedLabelPosition === 'left' ? {
+    marginLeft: tokens.spacing.gap
+  } : {
+    marginRight: tokens.spacing.gap
+  }];
+  const iconWrapper = interactive ? /*#__PURE__*/React.createElement(View, {
+    style: iconWrapperStyle
+  }, iconVisual) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
+    ref: internalRef,
+    disabled: resolvedDisabled,
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isChecked,
+      disabled: !!resolvedDisabled
+    },
+    style: iconWrapperStyle,
+    hitSlop: hitSlop
+  }), iconVisual);
+  const content = resolvedLabelPosition === 'left' ? /*#__PURE__*/React.createElement(React.Fragment, null, labelWrapper, iconWrapper) : /*#__PURE__*/React.createElement(React.Fragment, null, iconWrapper, labelWrapper);
+  if (interactive) {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
+      ref: internalRef,
+      disabled: resolvedDisabled,
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked: isChecked,
+        disabled: !!resolvedDisabled
+      },
+      style: ({
+        pressed
+      }) => [tokens.layout.container, style, Platform.OS === 'web' && {
+        cursor: 'pointer'
+      }, pressed && {
+        opacity: 0.8
+      }],
+      hitSlop: hitSlop
+    }), content);
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.container, style]
+  }, content);
+});
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;

package/dist/es/checkbox/CheckboxContext.js

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