react-native-system-ui 1.0.0 → 1.0.2

package/dist/cjs/components/overlay/Overlay.js

@@ -38,18 +38,18 @@ const IS_WEB = _reactNative().Platform.OS === 'web';
 const OverlayImpl = (props, ref) => {
   const {
     children,
-    isOpen: isOpenProp,
-    visible: visibleProp,
-    useRNModal: useRNModalProp,
-    useRNModalOnAndroid: useRNModalOnAndroidProp = false,
-    isKeyboardDismissable: isKeyboardDismissableProp = true,
-    animationPreset: animationPresetProp = 'fade',
+    isOpen: openP,
+    visible: visP,
+    useRNModal: useModalP,
+    useRNModalOnAndroid: useModalAndroidP = false,
+    isKeyboardDismissable: kbDismissP = true,
+    animationPreset: animP = 'fade',
     onRequestClose,
     style
   } = props;
   const tokens = (0, _tokens.useOverlayTokens)();
-  const shouldUseModal = useRNModalProp ?? !IS_WEB;
-  const webOverlayStyle = IS_WEB ? {
+  const useModal = useModalP ?? !IS_WEB;
+  const webStyle = IS_WEB ? {
     zIndex: tokens.layer.zIndex,
     position: 'fixed',
     top: 0,
@@ -57,22 +57,22 @@ const OverlayImpl = (props, ref) => {
     right: 0,
     bottom: 0
   } : undefined;
-  const resolvedOpen = isOpenProp ?? visibleProp ?? false;
+  const open = openP ?? visP ?? false;
   (0, _interactions().useKeyboardDismissable)({
-    enabled: !IS_WEB && resolvedOpen && isKeyboardDismissableProp,
+    enabled: !IS_WEB && open && kbDismissP,
     callback: onRequestClose ?? (() => {})
   });
-  if (!resolvedOpen) return null;
-  if (shouldUseModal || useRNModalOnAndroidProp && _reactNative().Platform.OS === 'android') return /*#__PURE__*/_react().default.createElement(_reactNative().Modal, {
+  if (!open) return null;
+  if (useModal || useModalAndroidP && _reactNative().Platform.OS === 'android') return /*#__PURE__*/_react().default.createElement(_reactNative().Modal, {
     statusBarTranslucent: true,
     transparent: true,
-    visible: resolvedOpen,
+    visible: open,
     onRequestClose: onRequestClose,
-    animationType: animationPresetProp,
+    animationType: animP,
     ref: ref
   }, children);
   return /*#__PURE__*/_react().default.createElement(_overlays().OverlayContainer, {
-    style: [style, webOverlayStyle]
+    style: [style, webStyle]
   }, children);
 };
 const OverlayForwardRef = /*#__PURE__*/_react().default.forwardRef(OverlayImpl);

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

@@ -61,7 +61,7 @@ const PasswordInputImpl = (props, ref) => {
     onBlur,
     ...rest
   } = props;
-  const lengthValue = Math.max(1, Math.floor((0, _number.parseNumberLike)(length, 6) ?? 6));
+  const lenVal = Math.max(1, Math.floor((0, _number.parseNumberLike)(length, 6) ?? 6));
   const tokens = (0, _tokens.usePasswordInputTokens)(tokensOverride);
   const {
     colors,
@@ -71,36 +71,36 @@ const PasswordInputImpl = (props, ref) => {
     opacity,
     spacing
   } = tokens;
-  const inputRef = (0, _react().useRef)(null),
-    [cursorVisible, setCursorVisible] = (0, _react().useState)(true),
-    blinkTimer = (0, _react().useRef)(null),
-    [focused, setFocused] = (0, _react().useState)(autoFocus);
+  const inputRef = (0, _react().useRef)(null);
+  const [cursorVisible, setCursorVisible] = (0, _react().useState)(true);
+  const blinkTimer = (0, _react().useRef)(null);
+  const [focused, setFocused] = (0, _react().useState)(autoFocus);
   const keyboardType = type === 'number' ? 'number-pad' : 'default';
   const inputMode = type === 'number' ? 'numeric' : 'text';
   const [code = '', setCode] = (0, _hooks.useControllableValue)(props, {
     defaultValue: ''
   });
   const normalizeValue = (0, _react().useCallback)(v => {
-    let normalized = v === null || v === undefined ? '' : (0, _validate.isString)(v) ? v : String(v);
-    if (type === 'number') normalized = stripNonNumeric(normalized);
-    if (lengthValue > 0 && normalized.length > lengthValue) normalized = normalized.slice(0, lengthValue);
-    return normalized;
-  }, [lengthValue, type]);
-  const normalizedCode = normalizeValue(code);
-  const validatorRef = (0, _react().useRef)(validator),
-    onFocusRef = (0, _react().useRef)(onFocus),
-    onBlurRef = (0, _react().useRef)(onBlur),
-    onSubmitRef = (0, _react().useRef)(onSubmit);
+    let n = v === null || v === undefined ? '' : (0, _validate.isString)(v) ? v : String(v);
+    if (type === 'number') n = stripNonNumeric(n);
+    if (lenVal > 0 && n.length > lenVal) n = n.slice(0, lenVal);
+    return n;
+  }, [lenVal, type]);
+  const normCode = normalizeValue(code);
+  const validatorRef = (0, _react().useRef)(validator);
+  const onFocusRef = (0, _react().useRef)(onFocus);
+  const onBlurRef = (0, _react().useRef)(onBlur);
+  const onSubmitRef = (0, _react().useRef)(onSubmit);
   validatorRef.current = validator;
   onFocusRef.current = onFocus;
   onBlurRef.current = onBlur;
   onSubmitRef.current = onSubmit;
   const updateValue = (0, _react().useCallback)(v => {
-    const normalized = normalizeValue(v);
-    if (normalized === normalizedCode) return;
-    if (validatorRef.current && !validatorRef.current(normalized)) return;
-    setCode(normalized);
-  }, [normalizeValue, normalizedCode, setCode]);
+    const n = normalizeValue(v);
+    if (n === normCode) return;
+    if (validatorRef.current && !validatorRef.current(n)) return;
+    setCode(n);
+  }, [normalizeValue, normCode, setCode]);
   const focusInput = (0, _react().useCallback)(() => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -118,10 +118,10 @@ const PasswordInputImpl = (props, ref) => {
   }), [blurInput, clearInput, focusInput]);
   (0, _react().useEffect)(() => {
     if (!autoFocus || disabled) return;
-    const timer = setTimeout(() => {
+    const t = setTimeout(() => {
       inputRef.current?.focus();
     }, 60);
-    return () => clearTimeout(timer);
+    return () => clearTimeout(t);
   }, [autoFocus, disabled]);
   const handleChangeText = (0, _react().useCallback)(txt => {
     updateValue(txt ?? '');
@@ -135,22 +135,22 @@ const PasswordInputImpl = (props, ref) => {
     onBlurRef.current?.();
   }, []);
   const prevSubmitRef = (0, _react().useRef)({
-    value: normalizedCode,
-    length: lengthValue
+    value: normCode,
+    length: lenVal
   });
   (0, _react().useEffect)(() => {
     const prev = prevSubmitRef.current;
     prevSubmitRef.current = {
-      value: normalizedCode,
-      length: lengthValue
+      value: normCode,
+      length: lenVal
     };
     if (!onSubmitRef.current) return;
-    if (prev.length !== lengthValue) return;
-    if (lengthValue <= 0 || normalizedCode.length !== lengthValue) return;
-    if (prev.value === normalizedCode) return;
-    onSubmitRef.current(normalizedCode);
+    if (prev.length !== lenVal) return;
+    if (lenVal <= 0 || normCode.length !== lenVal) return;
+    if (prev.value === normCode) return;
+    onSubmitRef.current(normCode);
     inputRef.current?.blur();
-  }, [lengthValue, normalizedCode]);
+  }, [lenVal, normCode]);
   (0, _react().useEffect)(() => {
     const shouldBlink = showCursor && focused && !disabled;
     if (blinkTimer.current) {
@@ -175,11 +175,11 @@ const PasswordInputImpl = (props, ref) => {
     };
   }, [disabled, focused, showCursor]);
   const cells = Array.from({
-    length: lengthValue
+    length: lenVal
   }, (_, i) => {
-    const char = normalizedCode?.[i];
+    const char = normCode?.[i];
     const isFilled = !!char;
-    const showBlink = showCursor && focused && !disabled && normalizedCode.length === i && i < lengthValue;
+    const showBlink = showCursor && focused && !disabled && normCode.length === i && i < lenVal;
     return {
       key: i,
       char,
@@ -187,35 +187,35 @@ const PasswordInputImpl = (props, ref) => {
       showBlink
     };
   });
-  const gutterValue = Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0);
-  const hasGutter = gutterValue > 0;
+  const gutterVal = Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0);
+  const hasGutter = gutterVal > 0;
   const tipInfo = errorInfo ?? info;
-  const tipColor = errorInfo ? colors.error : colors.muted;
-  const backgroundColor = hasGutter ? colors.transparent : colors.background;
+  const tipClr = errorInfo ? colors.error : colors.muted;
+  const bgClr = hasGutter ? colors.transparent : colors.background;
   const hiddenInputProps = {
     ...HIP,
     underlineColorAndroid: colors.transparent
   };
-  const cellTextBase = {
+  const cellTxtBase = {
     color: colors.text,
     fontSize: sizing.cellTextSize,
     fontWeight: typography.cellTextWeight,
     fontFamily: typography.fontFamily
   };
-  const wrapperStyle = [S.w, {
-    backgroundColor,
+  const wrapStyle = [S.w, {
+    backgroundColor: bgClr,
     borderRadius: radii.wrapper,
     paddingHorizontal: spacing.none,
     opacity: disabled ? opacity.disabled : 1
   }];
   const sheetStyle = [S.s, {
     borderRadius: hasGutter ? 0 : radii.wrapper,
-    backgroundColor
+    backgroundColor: bgClr
   }];
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: style
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, rest, {
-    style: wrapperStyle,
+    style: wrapStyle,
     onPress: focusInput,
     disabled: disabled,
     accessibilityRole: "button",
@@ -225,7 +225,7 @@ const PasswordInputImpl = (props, ref) => {
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: sheetStyle
   }, cells.map((item, i) => {
-    const filledTextStyle = [cellTextBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
+    const filledTextStyle = [cellTxtBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
     const baseCell = [S.c, {
       backgroundColor: colors.background,
       height: sizing.cellHeight
@@ -234,7 +234,7 @@ const PasswordInputImpl = (props, ref) => {
       baseCell.push(S.cg, {
         borderRadius: radii.cellGutter
       }, i > 0 && {
-        marginLeft: gutterValue
+        marginLeft: gutterVal
       });
     }
     ;
@@ -269,7 +269,7 @@ const PasswordInputImpl = (props, ref) => {
         color: colors.border,
         borderRadius: radii.cellGutter
       })
-    }), !hasGutter && i < lengthValue - 1 && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    }), !hasGutter && i < lenVal - 1 && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: (0, _hairline.createHairlineView)({
         position: 'right',
         color: colors.border,
@@ -279,11 +279,11 @@ const PasswordInputImpl = (props, ref) => {
     }));
   }), /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
     ref: inputRef,
-    value: normalizedCode,
+    value: normCode,
     editable: !disabled,
     keyboardType: keyboardType,
     inputMode: inputMode,
-    maxLength: lengthValue,
+    maxLength: lenVal,
     autoFocus: false,
     secureTextEntry: mask
   }, hiddenInputProps, {
@@ -306,7 +306,7 @@ const PasswordInputImpl = (props, ref) => {
     }]
   }, (0, _validate.isText)(tipInfo) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [S.it, {
-      color: tipColor
+      color: tipClr
     }]
   }, tipInfo) : tipInfo) : null);
 };

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

@@ -634,17 +634,15 @@ function usePickerValue({
   onChange,
   onConfirm
 }) {
-  const preparedColumns = (0, _react().useMemo)(() => prepareColumns(columns), [columns]);
+  const prep = (0, _react().useMemo)(() => prepareColumns(columns), [columns]);
   const isControlled = valueProp !== undefined;
   const onChangeRef = (0, _react().useRef)(onChange);
-  onChangeRef.current = onChange;
   const onConfirmRef = (0, _react().useRef)(onConfirm);
+  onChangeRef.current = onChange;
   onConfirmRef.current = onConfirm;
-  const [innerValue, setInnerValue] = (0, _react().useState)(() => {
-    const initial = toArrayValue(valueProp ?? defaultValue);
-    return normalizePicker(preparedColumns, initial).values;
-  });
+  const [innerValue, setInnerValue] = (0, _react().useState)(() => normalizePicker(prep, toArrayValue(valueProp ?? defaultValue)).values);
   const innerValueRef = (0, _react().useRef)(innerValue);
+  innerValueRef.current = innerValue;
   const commitValue = (0, _react().useCallback)(next => {
     innerValueRef.current = next;
     setInnerValue(next);
@@ -652,38 +650,32 @@ function usePickerValue({
   (0, _react().useEffect)(() => {
     if (!isControlled) return;
     const next = toArrayValue(valueProp);
-    if (!(0, _utils.shallowEqualArray)(innerValueRef.current, next)) {
-      commitValue(next);
-    }
+    if (!(0, _utils.shallowEqualArray)(innerValueRef.current, next)) commitValue(next);
   }, [commitValue, isControlled, valueProp]);
-  const normalized = (0, _react().useMemo)(() => normalizePicker(preparedColumns, innerValue), [preparedColumns, innerValue]);
+  const norm = (0, _react().useMemo)(() => normalizePicker(prep, innerValue), [prep, innerValue]);
   (0, _react().useEffect)(() => {
     if (isControlled) return;
-    if (!(0, _utils.shallowEqualArray)(innerValue, normalized.values)) {
-      commitValue(normalized.values);
-      onChangeRef.current?.(normalized.values, normalized.options);
-      if (emitConfirmOnAutoSelect) {
-        onConfirmRef.current?.(normalized.values, normalized.options);
-      }
+    if (!(0, _utils.shallowEqualArray)(innerValue, norm.values)) {
+      commitValue(norm.values);
+      onChangeRef.current?.(norm.values, norm.options);
+      if (emitConfirmOnAutoSelect) onConfirmRef.current?.(norm.values, norm.options);
     }
-  }, [commitValue, emitConfirmOnAutoSelect, innerValue, isControlled, normalized]);
+  }, [commitValue, emitConfirmOnAutoSelect, innerValue, isControlled, norm]);
   const handleSelect = (0, _react().useCallback)((option, colIdx) => {
     const next = [...innerValueRef.current];
     next[colIdx] = option.value;
-    if (preparedColumns.type === 'cascade') {
-      next.length = colIdx + 1;
-    }
-    const final = normalizePicker(preparedColumns, next);
+    if (prep.type === 'cascade') next.length = colIdx + 1;
+    const final = normalizePicker(prep, next);
     if ((0, _utils.shallowEqualArray)(innerValueRef.current, final.values)) return;
     commitValue(final.values);
     onChangeRef.current?.(final.values, final.options);
-  }, [commitValue, preparedColumns]);
+  }, [commitValue, prep]);
   const handleConfirm = (0, _react().useCallback)(() => {
-    onConfirmRef.current?.(normalized.values, normalized.options);
-  }, [normalized]);
+    onConfirmRef.current?.(norm.values, norm.options);
+  }, [norm]);
   return {
-    preparedColumns,
-    normalized,
+    preparedColumns: prep,
+    normalized: norm,
     handleSelect,
     handleConfirm
   };
@@ -756,7 +748,7 @@ const PickerColumn = /*#__PURE__*/_react().default.memo(props => {
     swipeDuration
   } = props;
   const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const valueIndexMap = (0, _react().useMemo)(() => new Map(options.map((option, idx) => [option.value, idx])), [options]);
+  const valueIndexMap = (0, _react().useMemo)(() => new Map(options.map((opt, idx) => [opt.value, idx])), [options]);
   const selIdx = (0, _react().useMemo)(() => {
     if (!options.length) return 0;
     const idx = valueIndexMap.get(value);
@@ -764,17 +756,17 @@ const PickerColumn = /*#__PURE__*/_react().default.memo(props => {
     return findEnabledIndex(options, startIdx);
   }, [options, value, valueIndexMap]);
   const handleChange = (0, _react().useCallback)(index => {
-    const target = findEnabledIndex(options, index);
-    const option = options[target];
-    if (!option || option.disabled) return;
-    onSelect(option, columnIndex, target);
+    const tgt = findEnabledIndex(options, index);
+    const opt = options[tgt];
+    if (!opt || opt.disabled) return;
+    onSelect(opt, columnIndex, tgt);
   }, [columnIndex, onSelect, options]);
   const {
     text: cText,
     textDisabled: cDisabled,
     textMuted: cMuted
   } = tokens.colors;
-  const optionFont = {
+  const optFont = {
     fontSize: tokens.typography.optionSize,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.optionWeight
@@ -784,8 +776,8 @@ const PickerColumn = /*#__PURE__*/_react().default.memo(props => {
       active = false,
       disabled = false
     } = meta ?? {};
-    const color = disabled ? cDisabled : active ? cText : cMuted;
-    const content = optionRender ? optionRender(item, {
+    const clr = disabled ? cDisabled : active ? cText : cMuted;
+    const cnt = optionRender ? optionRender(item, {
       columnIndex,
       active
     }) : item.label ?? item.value;
@@ -793,7 +785,7 @@ const PickerColumn = /*#__PURE__*/_react().default.memo(props => {
       columnIndex,
       active
     });
-    const a11yLabel = getOptionA11yLabel?.(item, {
+    const a11y = getOptionA11yLabel?.(item, {
       columnIndex,
       active
     });
@@ -803,15 +795,15 @@ const PickerColumn = /*#__PURE__*/_react().default.memo(props => {
         minHeight: itemHeight
       }],
       testID: testID,
-      accessible: !!a11yLabel,
-      accessibilityLabel: a11yLabel
-    }, (0, _validate.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      accessible: !!a11y,
+      accessibilityLabel: a11y
+    }, (0, _validate.isText)(cnt) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       numberOfLines: 1,
-      style: [S.optTxt, optionFont, {
-        color
+      style: [S.optTxt, optFont, {
+        color: clr
       }]
-    }, content) : content);
-  }, [cText, cDisabled, cMuted, columnIndex, getOptionA11yLabel, getOptionTestID, itemHeight, optionFont, optionRender]);
+    }, cnt) : cnt);
+  }, [cText, cDisabled, cMuted, columnIndex, getOptionA11yLabel, getOptionTestID, itemHeight, optFont, optionRender]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [W.column, {
       height: itemHeight * visibleItemCount
@@ -871,12 +863,12 @@ const PickerImpl = props => {
     testID,
     ...rest
   } = props;
-  const visibleItemCount = getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount);
+  const visCnt = getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount);
   const {
-    normalized,
+    normalized: norm,
     handleSelect,
     handleConfirm,
-    preparedColumns
+    preparedColumns: prep
   } = usePickerValue({
     columns,
     valueProp,
@@ -885,7 +877,7 @@ const PickerImpl = props => {
     onChange,
     onConfirm
   });
-  const isCascade = preparedColumns.type === 'cascade';
+  const isCascade = prep.type === 'cascade';
   const toolbarFont = {
     fontSize: tokens.typography.toolbarSize,
     fontFamily: tokens.typography.fontFamily,
@@ -928,21 +920,21 @@ const PickerImpl = props => {
       right: 0
     })
   })) : null;
-  const wrapperH = itemHeight * visibleItemCount;
-  const maskVisibleCnt = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const indicatorOff = itemHeight * maskVisibleCnt;
+  const wrapperH = itemHeight * visCnt;
+  const maskVisCnt = Math.max(1, Math.floor((visCnt - 1) / 2));
+  const indicatorOff = itemHeight * maskVisCnt;
   const maskH = indicatorOff;
-  const hasColumns = normalized.columns.length > 0;
-  const effectiveMaskColor = maskColor ?? tokens.colors.mask;
-  const columnsContent = hasColumns ? normalized.columns.map((column, colIdx) => {
-    const key = isCascade ? `${colIdx}-${normalized.values.slice(0, colIdx).map(String).join('|')}` : String(colIdx);
+  const hasCols = norm.columns.length > 0;
+  const effMaskColor = maskColor ?? tokens.colors.mask;
+  const columnsContent = hasCols ? norm.columns.map((column, colIdx) => {
+    const key = isCascade ? `${colIdx}-${norm.values.slice(0, colIdx).map(String).join('|')}` : String(colIdx);
     return /*#__PURE__*/_react().default.createElement(PickerColumn, {
       key: key,
       columnIndex: colIdx,
       options: column,
-      value: normalized.values[colIdx],
+      value: norm.values[colIdx],
       itemHeight: itemHeight,
-      visibleItemCount: visibleItemCount,
+      visibleItemCount: visCnt,
       decelerationRate: decelerationRate,
       scrollEventThrottle: scrollEventThrottle,
       optionRender: optionRender,
@@ -967,7 +959,7 @@ const PickerImpl = props => {
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: S.columns,
     pointerEvents: loading ? 'none' : 'auto'
-  }, columnsTop, columnsContent, columnsBottom, hasColumns && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, columnsTop, columnsContent, columnsBottom, hasCols && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: "none",
     style: [S.indicator, {
       top: indicatorOff,
@@ -990,12 +982,12 @@ const PickerImpl = props => {
   })), /*#__PURE__*/_react().default.createElement(GradientMask, {
     position: "top",
     height: maskH,
-    color: effectiveMaskColor,
+    color: effMaskColor,
     maskType: maskType
   }), /*#__PURE__*/_react().default.createElement(GradientMask, {
     position: "bottom",
     height: maskH,
-    color: effectiveMaskColor,
+    color: effMaskColor,
     maskType: maskType
   }))), loading && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [S.loading, {

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

@@ -129,7 +129,7 @@ const PopupImpl = props => {
     round,
     safeArea = false,
     safeAreaInsetTop = false,
-    safeAreaInsetBottom: safeAreaInsetBottomProp,
+    safeAreaInsetBottom: safeBottomP,
     lockScroll = true,
     destroyOnClose = true,
     duration = 300,
@@ -149,9 +149,9 @@ const PopupImpl = props => {
     ...rest
   } = props;
   const placement = placementProp ?? position ?? 'center';
-  const shouldCloseOnOverlay = closeOnClickOverlay ?? closeOnOverlayPress ?? true;
+  const closeOvl = closeOnClickOverlay ?? closeOnOverlayPress ?? true;
   const isCenter = placement === 'center';
-  const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
+  const safeAreaInsetBottom = safeBottomP ?? false;
   const tokens = (0, _tokens.usePopupTokens)(tokensOverride);
   const reducedMotion = (0, _animation.useReducedMotion)();
   const cbRef = (0, _react().useRef)({
@@ -186,6 +186,7 @@ const PopupImpl = props => {
       },
       title: {
         color: c.title,
+        fontFamily: t.fontFamily,
         fontSize: t.titleSize,
         fontWeight: t.titleWeight,
         marginHorizontal: s.descriptionHorizontal,
@@ -199,6 +200,7 @@ const PopupImpl = props => {
       },
       desc: {
         color: c.description,
+        fontFamily: t.fontFamily,
         fontSize: t.descriptionSize,
         lineHeight: t.descriptionLineHeight
       },
@@ -228,7 +230,7 @@ const PopupImpl = props => {
   const [mounted, setMounted] = (0, _react().useState)(visible);
   const [interVis, setInterVis] = (0, _react().useState)(visible);
   const isOpen = visible || interVis;
-  const canCloseOvl = shouldCloseOnOverlay && (onClose || beforeClose);
+  const canCloseOvl = closeOvl && (onClose || beforeClose);
   const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
   const animRef = (0, _react().useRef)(null);
   const seqRef = (0, _react().useRef)(0);
@@ -254,9 +256,7 @@ const PopupImpl = props => {
       finished
     }) => {
       if (!finished || seq !== seqRef.current) return;
-      if (show) {
-        cbRef.current.onOpened?.();
-      } else {
+      if (show) cbRef.current.onOpened?.();else {
         setInterVis(false);
         if (destroyOnClose) setMounted(false);
         cbRef.current.onClosed?.();
@@ -301,8 +301,8 @@ const PopupImpl = props => {
   }, [closeOnPopstate, requestClose, visible]);
   const handleOvlPress = (0, _react().useCallback)(() => {
     cbRef.current.onClickOverlay?.();
-    if (shouldCloseOnOverlay) requestClose('overlay');
-  }, [requestClose, shouldCloseOnOverlay]);
+    if (closeOvl) requestClose('overlay');
+  }, [requestClose, closeOvl]);
   const handleClosePress = (0, _react().useCallback)(() => requestClose('close-icon'), [requestClose]);
   const handleEscape = (0, _react().useCallback)(() => requestClose('close'), [requestClose]);
   const {
@@ -321,7 +321,7 @@ const PopupImpl = props => {
   } = (0, _hooks.useAriaOverlay)({
     isOpen,
     onClose: () => requestClose('overlay'),
-    isDismissable: shouldCloseOnOverlay,
+    isDismissable: closeOvl,
     overlayProps: {
       ...(_reactNative().Platform.OS === 'android' ? {} : {
         accessibilityRole: 'dialog'

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

@@ -37,6 +37,7 @@ const createPopupTokens = foundations => {
       closeIconPadding: spacing.ssm
     },
     typography: {
+      fontFamily: typography.fontFamily,
       titleSize: fontSize.md,
       titleWeight: typography.weight.medium,
       descriptionSize: fontSize.sm,

package/dist/cjs/components/portal/Portal.js

@@ -21,13 +21,12 @@ const PortalComponentImpl = ({
 }, _ref) => {
   const manager = (0, _react().useContext)(_PortalContext.PortalContext) ?? _PortalHost.portalManager;
   const keyRef = (0, _react().useRef)(null);
-  const shouldRender = isOpen ?? visible ?? true;
-  const content = shouldRender ? children : null;
+  const content = isOpen ?? visible ?? true ? children : null;
   (0, _react().useLayoutEffect)(() => {
-    if (keyRef.current === null) keyRef.current = manager.mount(content);else manager.update(keyRef.current, content);
+    keyRef.current === null ? keyRef.current = manager.mount(content) : manager.update(keyRef.current, content);
   }, [manager, content]);
   (0, _react().useLayoutEffect)(() => () => {
-    if (keyRef.current !== null) {
+    if (keyRef.current != null) {
       manager.unmount(keyRef.current);
       keyRef.current = null;
     }