react-native-system-ui 0.0.3 → 0.0.5

package/dist/es/components/number-keyboard/NumberKeyboard.js

@@ -1,5 +1,5 @@
 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, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { nativeDriverEnabled } from '../../platform';
@@ -67,11 +67,11 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     trigger: 'onChange'
   });
   const value = mergedValue ?? '';
-  const maxlength = useMemo(() => {
+  const maxlength = (() => {
     const parsed = parseNumberLike(maxlengthProp, undefined);
     if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
     return Math.floor(parsed);
-  }, [maxlengthProp]);
+  })();
   const valueRef = useRef(value);
   const maxlengthRef = useRef(maxlength);
   valueRef.current = value;
@@ -109,7 +109,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       keyboardRegistry.delete(closeSelf);
     };
   }, [visible, closeSelf]);
-  const keys = useMemo(() => {
+  const keys = (() => {
     const shouldShuffle = randomKeyOrder && visible;
     const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
     const main = numbers.map(text => ({
@@ -160,7 +160,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       text: showDeleteKey ? undefined : ''
     });
     return main;
-  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
+  })();
   const handleInput = useCallback((text, type) => {
     if (type === 'delete') {
       const currentValue = valueRef.current;
@@ -180,13 +180,13 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     onInput?.(text);
     setMergedValue(`${currentValue}${text}`);
   }, [closeSelf, onDelete, onInput, setMergedValue]);
-  const wrapperShadow = useMemo(() => createPlatformShadow({
+  const wrapperShadow = createPlatformShadow({
     color: shadow.color,
     opacity: shadow.opacity,
     radius: shadow.radius,
     offsetY: shadow.offsetY,
     elevation: shadow.elevation
-  }), [shadow.color, shadow.opacity, shadow.radius, shadow.offsetY, shadow.elevation]);
+  });
   const keyGap = spacing.keyGap;
   const renderKey = useCallback((key, index, isClose = false, fullWidth = false, customHeight) => {
     const isPlaceholder = key.type === '' && !key.text;
@@ -281,10 +281,10 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       animationRef.current = null;
     };
   }, [animated, visible, effectiveDuration]);
-  const translateY = useMemo(() => animated.interpolate({
+  const translateY = animated.interpolate({
     inputRange: [0, 1],
     outputRange: [contentHeight || 320, 0]
-  }), [animated, contentHeight]);
+  });
   const handleLayout = useCallback(e => {
     const {
       height
@@ -293,7 +293,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
   }, []);
   const hasHeader = !isCustomTheme && (title || closeButtonText);
   const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
-  const memo = useMemo(() => {
+  const memo = (() => {
     const headerPaddingStyle = {
       paddingHorizontal: spacing.titlePadding
     };
@@ -374,7 +374,8 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       style: [styles.header, headerPaddingStyle]
     }, /*#__PURE__*/React.createElement(Text, {
       style: [styles.title, styles.titleOverlay, {
-        color: colors.title
+        color: colors.title,
+        fontSize: sizing.titleFontSize
       }],
       numberOfLines: 1
     }, title), resolvedCloseText ? /*#__PURE__*/React.createElement(Pressable, {
@@ -400,7 +401,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       bodyNode,
       safeAreaNode
     };
-  }, [colors.title, doubleKeyHeight, hasHeader, isCustomTheme, keyGap, keys, renderKey, resolvedCloseText, safeAreaInsetBottom, showDeleteKey, closeSelf, spacing.paddingHorizontal, spacing.titlePadding, title]);
+  })();
   if (!shouldRender && !visible) {
     return null;
   }
@@ -430,7 +431,6 @@ const styles = StyleSheet.create({
     position: 'relative'
   },
   title: {
-    fontSize: 16,
     fontWeight: '600'
   },
   titleOverlay: {

package/dist/es/components/number-keyboard/tokens.js

@@ -3,7 +3,8 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    radii
+    radii,
+    fontSize
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
@@ -28,7 +29,8 @@ const createTokens = foundations => {
     sizing: {
       keyHeight: 54,
       closeHeight: 44,
-      fontSize: 28
+      fontSize: 28,
+      titleFontSize: fontSize.md
     },
     radii: {
       key: radii.xs

package/dist/es/components/overlay/useOverlayStack.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { overlayStackStore } from './OverlayStackStore';
 const useOverlayEntries = () => useSyncExternalStore(overlayStackStore.subscribe, overlayStackStore.getSnapshot, overlayStackStore.getSnapshot);
 export const useOverlayStack = ({
@@ -7,7 +7,11 @@ export const useOverlayStack = ({
 }) => {
   const entries = useOverlayEntries();
   const entryRef = useRef(null);
-  const stableOptions = useMemo(() => options, [options.onClose, options.closeOnBack, options.lockScroll, options.zIndex, options.type, options.meta]);
+  const optionsRef = useRef(options);
+  if (optionsRef.current.onClose !== options.onClose || optionsRef.current.closeOnBack !== options.closeOnBack || optionsRef.current.lockScroll !== options.lockScroll || optionsRef.current.zIndex !== options.zIndex || optionsRef.current.type !== options.type || optionsRef.current.meta !== options.meta) {
+    optionsRef.current = options;
+  }
+  const stableOptions = optionsRef.current;
   useEffect(() => {
     if (!visible) {
       if (entryRef.current) {

package/dist/es/components/pagination/Pagination.js

@@ -1,5 +1,5 @@
 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, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { usePaginationTokens } from './tokens';
 import { useControllableValue } from '../../hooks';
@@ -39,7 +39,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const showPageSizeNumber = Number.isFinite(showPageSize) ? Math.floor(showPageSize) : 0;
   const count = pageCountNumber > 0 ? pageCountNumber : totalItemsNumber > 0 && itemsPerPageNumber > 0 ? Math.max(1, Math.ceil(totalItemsNumber / itemsPerPageNumber)) : 1;
   const currentPage = clamp(page, 1, count);
-  const pages = useMemo(() => {
+  const pages = (() => {
     const items = [];
     if (mode !== 'multi') return items;
     const limit = Math.max(1, showPageSizeNumber);
@@ -72,7 +72,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
       });
     }
     return items;
-  }, [mode, count, showPageSizeNumber, currentPage, forceEllipses]);
+  })();
   useEffect(() => {
     if (page !== currentPage) {
       setPage(currentPage);

package/dist/es/components/password-input/PasswordInput.js

@@ -1,5 +1,5 @@
 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, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { createComponentTokensHook } from '../../design-system';
 import { useControllableValue } from '../../hooks';
@@ -7,7 +7,6 @@ import { parseNumberLike } from '../../utils/number';
 import { isString, isText } from '../../utils/validate';
 const HIDDEN_INPUT_PROPS = {
   caretHidden: true,
-  underlineColorAndroid: 'transparent',
   autoCorrect: false,
   spellCheck: false,
   importantForAutofill: 'no',
@@ -21,10 +20,12 @@ const createPasswordInputTokens = foundations => ({
     muted: foundations.palette.default[500],
     error: foundations.palette.danger[500],
     cursor: foundations.palette.default[800],
-    background: '#ffffff'
+    background: '#ffffff',
+    transparent: 'transparent'
   },
   radii: {
-    wrapper: foundations.radii.sm
+    wrapper: foundations.radii.sm,
+    cellGutter: foundations.radii.none
   },
   sizing: {
     cellHeight: 50,
@@ -42,10 +43,12 @@ const createPasswordInputTokens = foundations => ({
     infoWeight: foundations.typography.weight.regular
   },
   opacity: {
-    disabled: 0.6
+    disabled: 0.6,
+    hidden: 0
   },
   spacing: {
-    infoMarginTop: foundations.spacing.sm
+    infoMarginTop: foundations.spacing.sm,
+    none: foundations.spacing.none
   }
 });
 const usePasswordInputTokens = createComponentTokensHook('passwordInput', createPasswordInputTokens);
@@ -91,8 +94,8 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [cursorVisible, setCursorVisible] = useState(true);
   const blinkTimer = useRef(null);
   const [focused, setFocused] = useState(autoFocus);
-  const keyboardType = useMemo(() => type === 'number' ? 'number-pad' : 'default', [type]);
-  const inputMode = useMemo(() => type === 'number' ? 'numeric' : 'text', [type]);
+  const keyboardType = type === 'number' ? 'number-pad' : 'default';
+  const inputMode = type === 'number' ? 'numeric' : 'text';
   const [code = '', setCode] = useControllableValue(props, {
     defaultValue: ''
   });
@@ -106,7 +109,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     return next;
   }, [lengthSafe, type]);
-  const normalizedCode = useMemo(() => normalizeValue(code), [code, normalizeValue]);
+  const normalizedCode = normalizeValue(code);
   const updateValue = useCallback(nextValue => {
     const normalized = normalizeValue(nextValue);
     if (normalized === normalizedCode) return;
@@ -184,7 +187,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     };
   }, [disabled, focused, showCursor]);
-  const cells = useMemo(() => Array.from({
+  const cells = Array.from({
     length: lengthSafe
   }, (_, index) => {
     const char = normalizedCode?.[index];
@@ -196,30 +199,35 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       isFilled,
       showBlink
     };
-  }), [disabled, focused, lengthSafe, normalizedCode, showCursor]);
-  const gutterValue = useMemo(() => Math.max(0, parseNumberLike(gutter, 0) ?? 0), [gutter]);
+  });
+  const gutterValue = Math.max(0, parseNumberLike(gutter, 0) ?? 0);
   const hasGutter = gutterValue > 0;
   const tip = errorInfo ?? info;
   const tipColor = errorInfo ? colors.error : colors.muted;
-  const backgroundColor = hasGutter ? 'transparent' : colors.background;
-  const cellTextBase = useMemo(() => ({
+  const backgroundColor = hasGutter ? colors.transparent : colors.background;
+  const hiddenInputProps = {
+    ...HIDDEN_INPUT_PROPS,
+    underlineColorAndroid: colors.transparent
+  };
+  const cellTextBase = {
     color: colors.text,
     fontSize: sizing.cellTextSize,
     fontWeight: typography.cellTextWeight,
     fontFamily: typography.fontFamily
-  }), [colors.text, sizing.cellTextSize, typography.cellTextWeight, typography.fontFamily]);
-  const wrapperStyle = useMemo(() => [styles.wrapper, {
+  };
+  const wrapperStyle = [styles.wrapper, {
     backgroundColor,
     borderRadius: radii.wrapper,
+    paddingHorizontal: spacing.none,
     opacity: disabled ? opacity.disabled : 1
   }, !hasGutter && {
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: colors.border
-  }], [backgroundColor, colors.border, disabled, hasGutter, opacity.disabled, radii.wrapper]);
-  const securityStyle = useMemo(() => [styles.security, {
+  }];
+  const securityStyle = [styles.security, {
     borderRadius: hasGutter ? 0 : radii.wrapper,
     backgroundColor
-  }], [backgroundColor, hasGutter, radii.wrapper]);
+  }];
   return /*#__PURE__*/React.createElement(View, {
     style: style
   }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
@@ -240,7 +248,8 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, cellStyle, item.isFilled && cellFilledStyle];
     if (hasGutter) {
       baseCell.push(styles.cellGutter, {
-        borderColor: colors.border
+        borderColor: colors.border,
+        borderRadius: radii.cellGutter
       }, index > 0 && {
         marginLeft: gutterValue
       });
@@ -285,8 +294,10 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     maxLength: lengthSafe,
     autoFocus: false,
     secureTextEntry: mask
-  }, HIDDEN_INPUT_PROPS, {
-    style: styles.hiddenInput,
+  }, hiddenInputProps, {
+    style: [styles.hiddenInput, {
+      opacity: opacity.hidden
+    }],
     onChangeText: handleChangeText,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -304,8 +315,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
 export default PasswordInput;
 const styles = StyleSheet.create({
   wrapper: {
-    alignSelf: 'stretch',
-    paddingHorizontal: 0
+    alignSelf: 'stretch'
   },
   security: {
     flexDirection: 'row',
@@ -319,16 +329,14 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   cellGutter: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 0
+    borderWidth: StyleSheet.hairlineWidth
   },
   cursor: {
     position: 'absolute',
     left: '50%'
   },
   hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
-    opacity: 0
+    ...StyleSheet.absoluteFillObject
   },
   infoWrapper: {
     alignItems: 'center'

package/dist/es/components/picker/Picker.js

@@ -1,5 +1,5 @@
 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, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Pressable, Text, View, Platform, StyleSheet } from 'react-native';
 import Loading from '../loading';
 import { withAlpha } from '../../utils/color';
@@ -15,7 +15,7 @@ export function usePickerValue({
   onChange,
   onConfirm
 }) {
-  const preparedColumns = useMemo(() => prepareColumns(columns), [columns]);
+  const preparedColumns = prepareColumns(columns);
   const isControlled = valueProp !== undefined;
   const [innerValue, setInnerValue] = useState(() => {
     const initial = toArrayValue(valueProp ?? defaultValue);
@@ -33,7 +33,7 @@ export function usePickerValue({
       commitValue(next);
     }
   }, [commitValue, isControlled, valueProp]);
-  const normalized = useMemo(() => normalizePicker(preparedColumns, innerValue), [preparedColumns, innerValue]);
+  const normalized = normalizePicker(preparedColumns, innerValue);
   useEffect(() => {
     if (isControlled) return;
     if (!shallowEqualArray(innerValue, normalized.values)) {
@@ -149,11 +149,11 @@ const PickerColumn = /*#__PURE__*/React.memo(props => {
     swipeDuration
   } = props;
   const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const selectedIndex = useMemo(() => {
+  const selectedIndex = (() => {
     if (!options.length) return 0;
     const idx = options.findIndex(option => option.value === value);
     return findEnabledIndex(options, idx >= 0 ? idx : 0);
-  }, [options, value]);
+  })();
   const handleChange = useCallback(index => {
     const target = findEnabledIndex(options, index);
     const option = options[target];
@@ -245,7 +245,6 @@ const Picker = props => {
     emitConfirmOnAutoSelect = true,
     maskColor,
     maskType = tokens.defaults.maskType,
-    interactionMode = 'auto',
     onChange,
     onConfirm,
     onCancel,
@@ -349,7 +348,8 @@ const Picker = props => {
   }) : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     style: [styles.container, {
-      backgroundColor: tokens.colors.background
+      backgroundColor: tokens.colors.background,
+      borderRadius: tokens.radius.container
     }, style],
     testID: testID
   }), toolbarPosition === 'top' && toolbar, /*#__PURE__*/React.createElement(View, {
@@ -377,13 +377,13 @@ const Picker = props => {
     color: effectiveMaskColor,
     maskType: maskType
   }))), loading && /*#__PURE__*/React.createElement(View, {
-    style: styles.loading
+    style: [styles.loading, {
+      backgroundColor: tokens.colors.loadingMask
+    }]
   }, /*#__PURE__*/React.createElement(Loading, null))), toolbarPosition === 'bottom' && toolbar);
 };
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 4
-  },
+  container: {},
   body: {
     position: 'relative',
     overflow: 'hidden'
@@ -437,8 +437,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.65)'
+    justifyContent: 'center'
   }
 });
 Picker.displayName = 'Picker';

package/dist/es/components/picker/WheelPicker.js

@@ -1,5 +1,5 @@
 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, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FlatList, Platform, View, StyleSheet, PanResponder } from 'react-native';
 import { clamp } from '../../utils';
 import { findEnabledIndex } from './utils';
@@ -258,8 +258,8 @@ const WheelPickerInner = ({
       }]
     }, content);
   }, [itemHeight, renderItem]);
-  const webIndex = useMemo(() => clamp(Math.round(-webOffset / itemHeight), 0, maxIndex), [itemHeight, maxIndex, webOffset]);
-  const webRender = useMemo(() => {
+  const webIndex = clamp(Math.round(-webOffset / itemHeight), 0, maxIndex);
+  const webRender = (() => {
     if (!isWeb || total <= 0) {
       return {
         items: null,
@@ -303,24 +303,24 @@ const WheelPickerInner = ({
         }
       })
     };
-  }, [data, isWeb, itemHeight, maxIndex, renderItem, total, visibleCount, webIndex, webVirtualEnabled, webVelocityBucket]);
-  const webTransform = useMemo(() => ({
+  })();
+  const webTransform = {
     transform: [{
       translateY: webOffset
     }]
-  }), [webOffset]);
-  const webTransitionStyle = useMemo(() => webTransition ? {
+  };
+  const webTransitionStyle = webTransition ? {
     transitionProperty: 'transform',
     transitionDuration: `${webTransition}ms`,
     transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.68, 1)',
     willChange: 'transform'
-  } : undefined, [webTransition]);
+  } : undefined;
   const handleWebTransitionEnd = useCallback(event => {
     const propertyName = event.nativeEvent?.propertyName ?? event.propertyName;
     if (propertyName && propertyName !== 'transform' && propertyName !== 'webkitTransform') return;
     finalizePendingChange();
   }, [finalizePendingChange]);
-  const panResponder = useMemo(() => PanResponder.create({
+  const panResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => !readOnly,
     onMoveShouldSetPanResponder: () => !readOnly,
     onPanResponderGrant: () => {
@@ -365,7 +365,7 @@ const WheelPickerInner = ({
       notifyInteractEnd();
       setWebTransition(0);
     }
-  }), [data, itemHeight, maxIndex, minOffset, notifyInteractEnd, notifyInteractStart, readOnly, setVelocityBucket, startWebSnap, stopRaf, total]);
+  });
   if (isWeb) {
     return /*#__PURE__*/React.createElement(View, _extends({
       style: [styles.column, {

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

@@ -24,7 +24,8 @@ const createPickerTokens = foundations => {
       textDisabled: palette.default[400],
       confirm: palette.primary[600],
       cancel: palette.default[600],
-      mask: '#ffffff'
+      mask: '#ffffff',
+      loadingMask: 'rgba(255,255,255,0.65)'
     },
     spacing: {
       toolbarHeight: 44,
@@ -38,7 +39,8 @@ const createPickerTokens = foundations => {
       toolbarWeight: typography.weight.medium
     },
     radius: {
-      toolbar: radii.none
+      toolbar: radii.none,
+      container: radii.xs
     }
   };
 };

package/dist/es/components/popup/Popup.js

@@ -1,6 +1,6 @@
 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, useRef, useState } from 'react';
-import { Animated, Dimensions, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import { SafeAreaView } from '../safe-area-view';
 import { addPopStateListener, nativeDriverEnabled } from '../../platform';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
@@ -153,70 +153,59 @@ export const Popup = props => {
   const shouldTranslate = placement !== 'center';
   const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
   const tokens = usePopupTokens(tokensOverride);
-  const dynamicStyles = useMemo(() => {
-    const shadow = createPlatformShadow({
-      color: tokens.shadow.color,
-      opacity: tokens.shadow.opacity,
-      radius: tokens.shadow.radius,
-      offsetY: tokens.shadow.offsetY,
-      elevation: tokens.shadow.elevation
-    });
-    const popup = {
+  const shadow = createPlatformShadow({
+    color: tokens.shadow.color,
+    opacity: tokens.shadow.opacity,
+    radius: tokens.shadow.radius,
+    offsetY: tokens.shadow.offsetY,
+    elevation: tokens.shadow.elevation
+  });
+  const dynamicStyles = {
+    popup: {
       backgroundColor: tokens.colors.background,
       padding: tokens.spacing.padding,
       ...shadow
-    };
-    const title = {
+    },
+    title: {
       color: tokens.colors.title,
       fontSize: tokens.typography.titleSize,
       fontWeight: tokens.typography.titleWeight,
       marginHorizontal: tokens.spacing.descriptionHorizontal,
       textAlign: 'center'
-    };
-    const titleWrapper = {
+    },
+    titleWrapper: {
       marginTop: tokens.spacing.titleTop,
       marginBottom: tokens.spacing.titleBottom,
       marginHorizontal: tokens.spacing.descriptionHorizontal,
       alignItems: 'center'
-    };
-    const description = {
+    },
+    description: {
       color: tokens.colors.description,
       fontSize: tokens.typography.descriptionSize,
       lineHeight: tokens.typography.descriptionLineHeight
-    };
-    const descriptionWrapper = {
+    },
+    descriptionWrapper: {
       marginHorizontal: tokens.spacing.descriptionHorizontal,
       marginBottom: tokens.spacing.descriptionBottom
-    };
-    const closeIconBase = {
+    },
+    closeIconBase: {
       minWidth: tokens.spacing.closeIconSize,
       minHeight: tokens.spacing.closeIconSize,
-      padding: 6
-    };
-    const closeIconDefault = {
+      padding: tokens.spacing.closeIconPadding
+    },
+    closeIconDefault: {
       width: tokens.spacing.closeIconSize,
       height: tokens.spacing.closeIconSize
-    };
-    const popupSide = {
+    },
+    popupSide: {
       width: tokens.layout.sideWidth,
       maxWidth: tokens.layout.maxWidth
-    };
-    const popupCenter = {
+    },
+    popupCenter: {
       minWidth: tokens.layout.minWidth,
       maxWidth: tokens.layout.centerMaxWidth
-    };
-    return {
-      popup,
-      title,
-      titleWrapper,
-      description,
-      descriptionWrapper,
-      closeIconBase,
-      closeIconDefault,
-      popupSide,
-      popupCenter
-    };
-  }, [tokens]);
+    }
+  };
   const [mounted, setMounted] = useState(visible);
   const [interactionVisible, setInteractionVisible] = useState(visible);
   const isOpen = visible || interactionVisible;
@@ -335,22 +324,18 @@ export const Popup = props => {
     onStartShouldSetResponder: stopPropagationResponder
   } : overlayRestProps;
   const config = placementConfig[placement];
-  const radiusStyle = useMemo(() => buildRadius(round, placement, tokens.radius.round), [placement, round, tokens.radius.round]);
+  const radiusStyle = buildRadius(round, placement, tokens.radius.round);
   const {
     animated: overlayOpacity
   } = usePresenceAnimation(visible, {
     duration
   });
-  const translateDistance = useMemo(() => {
-    if (placement === 'left' || placement === 'right') {
-      return Dimensions.get('window').width;
-    }
-    if (placement === 'top' || placement === 'bottom') {
-      return Dimensions.get('window').height;
-    }
-    return 0;
-  }, [placement]);
-  const translateTransform = useMemo(() => {
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = useWindowDimensions();
+  const translateDistance = placement === 'left' || placement === 'right' ? windowWidth : placement === 'top' || placement === 'bottom' ? windowHeight : 0;
+  const translateTransform = (() => {
     if (!shouldTranslate) return null;
     const outputRange = [translateDistance * direction, 0];
     return config.axis === 'y' ? {
@@ -364,9 +349,9 @@ export const Popup = props => {
         outputRange
       })
     };
-  }, [config.axis, direction, progress, shouldTranslate, translateDistance]);
-  const baseTransform = useMemo(() => translateTransform ? [translateTransform] : [], [translateTransform]);
-  const animatedContentStyle = useMemo(() => {
+  })();
+  const baseTransform = translateTransform ? [translateTransform] : [];
+  const animatedContentStyle = (() => {
     const extraTransform = contentAnimationStyle?.transform;
     const transform = Array.isArray(extraTransform) ? [...baseTransform, ...extraTransform] : baseTransform;
     const baseStyle = {
@@ -386,7 +371,7 @@ export const Popup = props => {
       };
     }
     return baseStyle;
-  }, [baseTransform, contentAnimationStyle, placement, progress]);
+  })();
   const handleContentLayout = useCallback(event => {
     overlayOnLayout?.(event);
   }, [overlayOnLayout]);

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

@@ -27,7 +27,8 @@ export const createPopupTokens = foundations => {
       descriptionBottom: spacing.md,
       closeIconTop: spacing.md,
       closeIconRight: spacing.md,
-      closeIconSize: 36
+      closeIconSize: 36,
+      closeIconPadding: spacing.ssm
     },
     typography: {
       titleSize: fontSize.md,