react-native-system-ui 0.0.6 → 1.0.0

package/dist/es/components/action-sheet/ActionSheet.js

@@ -1,9 +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, { useCallback, useMemo, useRef } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { Close } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
-import { createHairlineBorderBottom, isRenderable, isText } from '../../utils';
+import { createHairlineView, isRenderable, isText, renderTextOrNode } from '../../utils';
 import Loading from '../loading';
 import Popup from '../popup';
 import { useActionSheetTokens } from './tokens';
@@ -28,83 +28,74 @@ const ActionSheetHeader = /*#__PURE__*/React.memo(({
     style: tokens.layout.header
   }, /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.titleContainer
-  }, isText(title) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.title, {
-      color: colors.title,
-      fontSize: typography.title
-    }]
-  }, title) : /*#__PURE__*/React.createElement(View, {
+  }, isText(title) ? renderTextOrNode(title, [tokens.layout.title, {
+    color: colors.title,
+    fontSize: typography.title
+  }]) : /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.titleNode
-  }, title)), closeable ? /*#__PURE__*/React.createElement(Pressable, _extends({
+  }, title)), closeable && /*#__PURE__*/React.createElement(Pressable, _extends({
     style: tokens.layout.closeButton,
     accessibilityRole: "button",
     hitSlop: 8
   }, closePress.interactionProps), /*#__PURE__*/React.isValidElement(closeIcon) ? /*#__PURE__*/React.cloneElement(closeIcon, {
     fill: colors.description,
     color: colors.description
-  }) : closeIcon) : null);
+  }) : closeIcon));
 });
-ActionSheetHeader.displayName = 'ActionSheetHeader';
 const ActionSheetItem = /*#__PURE__*/React.memo(({
   action,
   index,
   tokens,
   onActionPress
 }) => {
-  const disabled = !!action.disabled;
-  const loading = !!action.loading;
+  const {
+    disabled,
+    loading,
+    name,
+    subname,
+    icon
+  } = action;
   const {
     colors,
     spacing,
     typography
   } = tokens;
-  const handlePress = useCallback(() => onActionPress(action, index), [action, index, onActionPress]);
   const actionPress = useAriaPress({
-    disabled: disabled || loading,
-    onPress: handlePress,
+    disabled: !!disabled || !!loading,
+    onPress: useCallback(() => onActionPress(action, index), [action, index, onActionPress]),
     extraProps: {
-      accessibilityRole: 'button',
+      accessibilityRole: 'menuitem',
+      accessibilityLabel: isText(name) ? String(name) : undefined,
       accessibilityState: {
-        disabled,
-        busy: loading
+        disabled: !!disabled,
+        busy: !!loading
       },
       testID: `rv-action-sheet-item-${index}`
     }
   });
-  const color = action.color ?? colors.item;
-  const name = action.name;
-  const subname = action.subname;
-  const hasIcon = !!action.icon;
-  const hasName = isRenderable(name);
-  const hasSubname = isRenderable(subname);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     style: ({
       pressed
-    }) => [tokens.layout.item, hasIcon && tokens.layout.itemWithIcon, {
+    }) => [tokens.layout.item, !!icon && tokens.layout.itemWithIcon, {
       paddingVertical: spacing.vertical,
       paddingHorizontal: spacing.horizontal,
-      backgroundColor: pressed && !disabled && !loading ? colors.itemPressedBackground : colors.itemBackground
+      backgroundColor: pressed && !action.disabled && !action.loading ? colors.itemPressedBackground : colors.itemBackground
     }, action.style]
-  }, actionPress.interactionProps), hasIcon && /*#__PURE__*/React.createElement(View, {
+  }, actionPress.interactionProps), !!icon && /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.icon
-  }, action.icon), loading ? /*#__PURE__*/React.createElement(Loading, {
+  }, icon), loading ? /*#__PURE__*/React.createElement(Loading, {
     size: 20
-  }) : hasName ? /*#__PURE__*/React.createElement(View, {
+  }) : isRenderable(name) ? /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.itemTextWrapper
-  }, isText(name) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.itemText, {
-      color: disabled ? colors.disabled : color,
-      fontSize: typography.item
-    }]
-  }, name) : name, hasSubname ? isText(subname) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.subname, {
-      color: colors.subitem
-    }]
-  }, subname) : /*#__PURE__*/React.createElement(View, {
+  }, renderTextOrNode(name, [tokens.layout.itemText, {
+    color: action.disabled ? colors.disabled : action.color ?? colors.item,
+    fontSize: typography.item
+  }]), isRenderable(subname) && (isText(subname) ? renderTextOrNode(subname, [tokens.layout.subname, {
+    color: colors.subitem
+  }]) : /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.subnameNode
-  }, subname) : null) : null);
+  }, subname))) : null);
 });
-ActionSheetItem.displayName = 'ActionSheetItem';
 const ActionSheetCancel = /*#__PURE__*/React.memo(({
   cancelText,
   tokens,
@@ -133,15 +124,12 @@ const ActionSheetCancel = /*#__PURE__*/React.memo(({
       paddingHorizontal: spacing.horizontal,
       backgroundColor: colors.cancelBackground
     }]
-  }, cancelPress.interactionProps), isText(cancelText) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.cancelText, {
-      color: colors.cancel,
-      fontSize: typography.item
-    }]
-  }, cancelText) : cancelText));
+  }, cancelPress.interactionProps), renderTextOrNode(cancelText, [tokens.layout.cancelText, {
+    color: colors.cancel,
+    fontSize: typography.item
+  }])));
 });
-ActionSheetCancel.displayName = 'ActionSheetCancel';
-const ActionSheet = props => {
+const ActionSheetImpl = props => {
   const {
     tokensOverride,
     visible,
@@ -177,24 +165,31 @@ const ActionSheet = props => {
   const hasCancelText = isRenderable(cancelText);
   const lastPopupCloseReasonRef = useRef('close');
   const closingRef = useRef(false);
+  const beforeCloseRef = useRef(beforeClose);
+  beforeCloseRef.current = beforeClose;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const onCancelRef = useRef(onCancel);
+  onCancelRef.current = onCancel;
+  const onSelectRef = useRef(onSelect);
+  onSelectRef.current = onSelect;
   const runBeforeClose = useCallback(async action => {
-    if (!beforeClose) return true;
+    if (!beforeCloseRef.current) return true;
     try {
-      return (await beforeClose(action)) !== false;
-    } catch (error) {
+      return (await beforeCloseRef.current(action)) !== false;
+    } catch {
       return true;
     }
-  }, [beforeClose]);
+  }, []);
   const emitClose = useCallback(reason => {
-    if (onClose) {
-      if (reason === 'cancel') {
-        onCancel?.();
-      }
-      onClose();
+    if (onCloseRef.current) {
+      if (reason === 'cancel') onCancelRef.current?.();
+      onCloseRef.current();
       return;
     }
-    onCancel?.();
-  }, [onCancel, onClose]);
+    ;
+    onCancelRef.current?.();
+  }, []);
   const requestClose = useCallback(async action => {
     if (closingRef.current) return;
     closingRef.current = true;
@@ -207,9 +202,8 @@ const ActionSheet = props => {
     }
   }, [emitClose, runBeforeClose]);
   const handlePopupBeforeClose = useCallback(reason => {
-    const action = reason === 'close-icon' ? 'close-icon' : reason === 'overlay' ? 'overlay' : 'close';
-    lastPopupCloseReasonRef.current = action;
-    return runBeforeClose(action);
+    lastPopupCloseReasonRef.current = reason;
+    return runBeforeClose(reason);
   }, [runBeforeClose]);
   const handlePopupClose = useCallback(() => {
     emitClose(lastPopupCloseReasonRef.current);
@@ -221,65 +215,63 @@ const ActionSheet = props => {
     void requestClose('close-icon');
   }, [requestClose]);
   const handleActionPress = useCallback((action, index) => {
-    if (action.disabled || action.loading) {
-      return;
-    }
+    if (action.disabled || action.loading) return;
     action.onPress?.(action);
     action.callback?.(action);
-    onSelect?.(action, index);
-    if (shouldCloseOnClickAction) {
-      void requestClose('action');
-    }
-  }, [onSelect, requestClose, shouldCloseOnClickAction]);
-  const popupStyleMemo = useMemo(() => [tokens.layout.popup, popupStyle], [popupStyle, tokens.layout.popup]);
-  const panelStyle = useMemo(() => [tokens.layout.panel, {
-    backgroundColor: tokens.colors.background
-  }], [tokens.colors.background, tokens.layout.panel]);
-  const headerNode = useMemo(() => hasTitle ? /*#__PURE__*/React.createElement(ActionSheetHeader, {
+    onSelectRef.current?.(action, index);
+    if (shouldCloseOnClickAction) void requestClose('action');
+  }, [requestClose, shouldCloseOnClickAction]);
+  const popupStyleMemo = useMemo(() => [tokens.layout.popup, popupStyle], [tokens.layout.popup, popupStyle]);
+  return /*#__PURE__*/React.createElement(Popup, _extends({
+    visible: visible,
+    placement: "bottom",
+    round: round,
+    safeAreaInsetTop: hasTitle && closeable,
+    safeAreaInsetBottom: safeAreaInsetBottom,
+    overlay: overlay,
+    lockScroll: lockScroll,
+    beforeClose: handlePopupBeforeClose,
+    onClose: handlePopupClose,
+    style: popupStyleMemo
+  }, popupProps), /*#__PURE__*/React.createElement(View, {
+    accessibilityRole: "menu",
+    style: [tokens.layout.panel, {
+      backgroundColor: tokens.colors.background
+    }]
+  }, hasTitle && /*#__PURE__*/React.createElement(ActionSheetHeader, {
     title: title,
     closeable: closeable,
     closeIcon: closeIcon,
     tokens: tokens,
     onClose: handleCloseIcon
-  }) : null, [closeIcon, closeable, handleCloseIcon, hasTitle, title, tokens]);
-  const descriptionNode = useMemo(() => hasDescription ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.descriptionContainer, createHairlineBorderBottom(tokens.colors.border)]
-  }, isText(description) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.description, {
-      color: tokens.colors.description,
-      fontSize: tokens.typography.description
-    }]
-  }, description) : /*#__PURE__*/React.createElement(View, {
+  }), hasDescription && /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.descriptionContainer
+  }, isText(description) ? renderTextOrNode(description, [tokens.layout.description, {
+    color: tokens.colors.description,
+    fontSize: tokens.typography.description
+  }]) : /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.descriptionNode
-  }, description)) : null, [description, hasDescription, tokens.colors.border, tokens.colors.description, tokens.layout.description, tokens.layout.descriptionContainer, tokens.layout.descriptionNode, tokens.typography.description]);
-  const actionNodes = useMemo(() => actions.map((action, index) => /*#__PURE__*/React.createElement(ActionSheetItem, {
+  }, description), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.actions
+  }, actions.map((action, index) => /*#__PURE__*/React.createElement(ActionSheetItem, {
     key: action.key ?? index,
     action: action,
     index: index,
     tokens: tokens,
     onActionPress: handleActionPress
-  })), [actions, handleActionPress, tokens]);
-  const cancelNode = useMemo(() => hasCancelText ? /*#__PURE__*/React.createElement(ActionSheetCancel, {
+  }))), children, hasCancelText && /*#__PURE__*/React.createElement(ActionSheetCancel, {
     cancelText: cancelText,
     tokens: tokens,
     onPress: handleCancel
-  }) : null, [cancelText, handleCancel, hasCancelText, tokens]);
-  return /*#__PURE__*/React.createElement(Popup, _extends({
-    visible: visible,
-    placement: "bottom",
-    round: round,
-    safeAreaInsetTop: hasTitle && closeable,
-    safeAreaInsetBottom: safeAreaInsetBottom,
-    overlay: overlay,
-    lockScroll: lockScroll,
-    beforeClose: handlePopupBeforeClose,
-    onClose: handlePopupClose,
-    style: popupStyleMemo
-  }, popupProps), /*#__PURE__*/React.createElement(View, {
-    style: panelStyle
-  }, headerNode, descriptionNode, /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.actions
-  }, actionNodes), children, cancelNode));
+  })));
 };
+const ActionSheet = /*#__PURE__*/React.memo(ActionSheetImpl);
 ActionSheet.displayName = 'ActionSheet';
 export default ActionSheet;

package/dist/es/components/action-sheet/tokens.js

@@ -1,10 +1,15 @@
 import { createComponentTokensHook } from '../../design-system';
+const centered = {
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 export const createActionSheetTokens = foundations => {
   const {
     palette,
     spacing,
     fontSize
   } = foundations;
+  const white = '#ffffff';
   return {
     defaults: {
       closeOnClickAction: false,
@@ -27,31 +32,25 @@ export const createActionSheetTokens = foundations => {
       header: {
         position: 'relative',
         flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
+        ...centered,
         paddingHorizontal: 16
       },
       titleContainer: {
         flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
+        ...centered
       },
       title: {
         fontWeight: '600',
         textAlign: 'center'
       },
-      titleNode: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      titleNode: centered,
       closeButton: {
         position: 'absolute',
         top: 0,
         right: 0,
         width: 48,
         height: 48,
-        alignItems: 'center',
-        justifyContent: 'center'
+        ...centered
       },
       descriptionContainer: {
         paddingTop: 12,
@@ -62,26 +61,19 @@ export const createActionSheetTokens = foundations => {
         textAlign: 'center',
         lineHeight: 20
       },
-      descriptionNode: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      descriptionNode: centered,
       actions: {
         width: '100%'
       },
       item: {
-        alignItems: 'center',
-        justifyContent: 'center',
+        ...centered,
         width: '100%'
       },
       itemWithIcon: {
         flexDirection: 'row',
         justifyContent: 'center'
       },
-      itemTextWrapper: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      itemTextWrapper: centered,
       itemText: {
         lineHeight: 24
       },
@@ -100,16 +92,13 @@ export const createActionSheetTokens = foundations => {
         width: '100%',
         marginBottom: 0
       },
-      cancel: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      cancel: centered,
       cancelText: {
         lineHeight: 24
       }
     },
     colors: {
-      background: '#ffffff',
+      background: white,
       title: palette.default[900],
       description: palette.default[500],
       item: palette.default[900],
@@ -117,9 +106,9 @@ export const createActionSheetTokens = foundations => {
       cancel: palette.default[900],
       disabled: palette.default[400],
       border: palette.default[200],
-      itemBackground: '#ffffff',
+      itemBackground: white,
       itemPressedBackground: palette.default[100],
-      cancelBackground: '#ffffff',
+      cancelBackground: white,
       cancelGapBackground: palette.default[100] ?? '#f1f2f5'
     },
     typography: {

package/dist/es/components/area/Area.js

@@ -1,57 +1,39 @@
 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, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import Picker from '../picker';
-const compareCode = (a, b) => a < b ? -1 : a > b ? 1 : 0;
-const sortEntries = records => {
-  if (!records) return [];
-  return Object.entries(records).sort(([a], [b]) => compareCode(a, b));
-};
+import { useAreaTokens } from './tokens';
+const sortEntries = record => record ? Object.entries(record).sort(([a], [b]) => a.localeCompare(b)) : [];
 const getProvinceCode = code => code.slice(0, 2);
 const getCityCode = code => code.slice(0, 4);
-const buildAreaColumns = (areaList, columnsNum = 3) => {
-  const provinces = sortEntries(areaList.province_list);
-  if (columnsNum === 1) {
-    return provinces.map(([code, name]) => ({
+const groupBy = (list, getKey) => {
+  const map = new Map();
+  sortEntries(list).forEach(([code, name]) => {
+    const key = getKey(code);
+    const array = map.get(key);
+    if (array) array.push({
       label: name,
       value: code
-    }));
-  }
-  const citiesByProvince = new Map();
-  sortEntries(areaList.city_list).forEach(([code, name]) => {
-    const provinceKey = getProvinceCode(code);
-    const option = {
+    });else map.set(key, [{
       label: name,
       value: code
-    };
-    const existing = citiesByProvince.get(provinceKey);
-    if (existing) {
-      existing.push(option);
-    } else {
-      citiesByProvince.set(provinceKey, [option]);
-    }
+    }]);
   });
+  return map;
+};
+const buildAreaColumns = (areaList, columnsNum = 3) => {
+  const provinces = sortEntries(areaList.province_list);
+  if (columnsNum === 1) return provinces.map(([code, name]) => ({
+    label: name,
+    value: code
+  }));
+  const citiesByProvince = groupBy(areaList.city_list, getProvinceCode);
   if (columnsNum === 3) {
-    const countiesByCity = new Map();
-    sortEntries(areaList.county_list).forEach(([code, name]) => {
-      const cityKey = getCityCode(code);
-      const option = {
-        label: name,
-        value: code
-      };
-      const existing = countiesByCity.get(cityKey);
-      if (existing) {
-        existing.push(option);
-      } else {
-        countiesByCity.set(cityKey, [option]);
-      }
-    });
-    citiesByProvince.forEach(cityOptions => {
-      cityOptions.forEach(cityOption => {
-        const cityKey = getCityCode(cityOption.value);
+    const countiesByCity = groupBy(areaList.county_list, getCityCode);
+    citiesByProvince.forEach(cityOption => {
+      cityOption.forEach(cityOption2 => {
+        const cityKey = getCityCode(cityOption2.value);
         const counties = countiesByCity.get(cityKey);
-        if (counties && counties.length) {
-          cityOption.children = counties;
-        }
+        if (counties && counties.length) cityOption2.children = counties;
       });
     });
   }
@@ -62,39 +44,38 @@ const buildAreaColumns = (areaList, columnsNum = 3) => {
     };
     const provinceKey = getProvinceCode(code);
     const cities = citiesByProvince.get(provinceKey);
-    if (cities && cities.length) {
-      provinceOption.children = cities;
-    }
+    if (cities && cities.length) provinceOption.children = cities;
     return provinceOption;
   });
 };
-const normalizeCascadeValue = (root, raw, depth) => {
-  if (!raw) return raw;
-  const input = Array.isArray(raw) ? raw.map(String) : [String(raw)];
+const normalizeCascadeValue = (root, rawValue, depth) => {
+  if (!rawValue) return rawValue;
+  const inputArray = Array.isArray(rawValue) ? rawValue.map(String) : [String(rawValue)];
   const result = [];
   let options = root;
   for (let i = 0; i < depth; i += 1) {
     if (!options?.length) break;
-    const wanted = input[i];
-    const nextOption = options.find(o => String(o.value) === wanted) ?? options[0];
+    const wantedValue = inputArray[i];
+    const nextOption = options.find(option => String(option.value) === wantedValue) ?? options[0];
     if (!nextOption) break;
     result.push(String(nextOption.value));
     options = nextOption.children;
   }
   return result;
 };
-const Area = props => {
+const AreaImpl = props => {
+  const tokens = useAreaTokens();
   const {
     areaList,
-    columnsNum = 3,
+    columnsNum: columnsNumProp = tokens.defaults.columnsNum,
     value,
     defaultValue,
     onChange,
     onConfirm,
-    interactionMode = 'sync',
-    ...pickerProps
+    interactionMode: interactionModeProp = tokens.defaults.interactionMode,
+    ...rest
   } = props;
-  const resolvedColumnsNum = useMemo(() => columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3, [columnsNum]);
+  const resolvedColumnsNum = useMemo(() => columnsNumProp >= 1 && columnsNumProp <= 3 ? columnsNumProp : tokens.defaults.columnsNum, [columnsNumProp]);
   const {
     province_list,
     city_list,
@@ -105,22 +86,28 @@ const Area = props => {
     city_list,
     county_list
   }, resolvedColumnsNum), [city_list, county_list, province_list, resolvedColumnsNum]);
-  const normalizedValue = useMemo(() => value === undefined ? undefined : normalizeCascadeValue(columns, value, resolvedColumnsNum), [columns, resolvedColumnsNum, value]);
-  const normalizedDefaultValue = useMemo(() => defaultValue === undefined ? undefined : normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum), [columns, defaultValue, resolvedColumnsNum]);
-  const handleChange = useCallback((values, options) => {
-    onChange?.(values.map(String), options);
-  }, [onChange]);
-  const handleConfirm = useCallback((values, options) => {
-    onConfirm?.(values.map(String), options);
-  }, [onConfirm]);
-  return /*#__PURE__*/React.createElement(Picker, _extends({}, pickerProps, {
+  const normalize = useCallback(val => val === undefined ? undefined : normalizeCascadeValue(columns, val, resolvedColumnsNum), [columns, resolvedColumnsNum]);
+  const normalizedValue = useMemo(() => normalize(value), [normalize, value]);
+  const normalizedDefaultValue = useMemo(() => normalize(defaultValue), [normalize, defaultValue]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onConfirmRef = useRef(onConfirm);
+  onConfirmRef.current = onConfirm;
+  const wrappedOnChange = useCallback((values, options) => {
+    onChangeRef.current?.(values.map(String), options);
+  }, []);
+  const wrappedOnConfirm = useCallback((values, options) => {
+    onConfirmRef.current?.(values.map(String), options);
+  }, []);
+  return /*#__PURE__*/React.createElement(Picker, _extends({}, rest, {
     columns: columns,
-    interactionMode: interactionMode,
+    interactionMode: interactionModeProp,
     value: normalizedValue,
     defaultValue: normalizedDefaultValue,
-    onChange: onChange ? handleChange : undefined,
-    onConfirm: onConfirm ? handleConfirm : undefined
+    onChange: onChange ? wrappedOnChange : undefined,
+    onConfirm: onConfirm ? wrappedOnConfirm : undefined
   }));
 };
+const Area = /*#__PURE__*/React.memo(AreaImpl);
 Area.displayName = 'Area';
 export default Area;

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

@@ -1,5 +1,8 @@
 import { createComponentTokensHook } from '../../design-system';
-const createAreaTokens = _foundations => {
-  return {};
-};
+const createAreaTokens = _foundations => ({
+  defaults: {
+    columnsNum: 3,
+    interactionMode: 'sync'
+  }
+});
 export const useAreaTokens = createComponentTokensHook('area', createAreaTokens);