react-native-system-ui 1.0.0 → 1.0.2

package/dist/cjs/components/config-provider/ConfigProvider.js

@@ -30,15 +30,15 @@ const ConfigProviderBase = ({
   children
 }) => {
   const ctxLocale = (0, _react().useContext)(_LocaleContext.LocaleContext);
-  const ctxDirection = (0, _react().useContext)(_DirectionContext.DirectionContext);
-  const resolvedLocale = locale ?? ctxLocale;
-  const resolvedDirection = direction ?? ctxDirection ?? (_reactNative().I18nManager.isRTL ? 'rtl' : 'ltr');
+  const ctxDir = (0, _react().useContext)(_DirectionContext.DirectionContext);
+  const rLocale = locale ?? ctxLocale;
+  const rDir = direction ?? ctxDir ?? (_reactNative().I18nManager.isRTL ? 'rtl' : 'ltr');
   return /*#__PURE__*/_react().default.createElement(_ThemeProvider.ThemeProvider, {
     value: theme
   }, /*#__PURE__*/_react().default.createElement(_DirectionContext.DirectionContext.Provider, {
-    value: resolvedDirection
+    value: rDir
   }, /*#__PURE__*/_react().default.createElement(_LocaleContext.LocaleContext.Provider, {
-    value: resolvedLocale
+    value: rLocale
   }, /*#__PURE__*/_react().default.createElement(_portal.PortalHost, null, children))));
 };
 const ConfigProvider = exports.ConfigProvider = /*#__PURE__*/_react().default.memo(ConfigProviderBase);

package/dist/cjs/components/count-down/CountDown.js

@@ -27,10 +27,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const CountDownImpl = (props, ref) => {
   const {
     tokensOverride,
-    autoStart: autoStartProp,
-    millisecond: millisecondProp,
-    time: timeProp,
-    format: formatProp,
+    autoStart: autoStartP,
+    millisecond: msP,
+    time: timeP,
+    format: fmtP,
     children,
     onChange,
     onFinish,
@@ -38,32 +38,32 @@ const CountDownImpl = (props, ref) => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useCountDownTokens)(tokensOverride);
-  const autoStart = autoStartProp ?? tokens.defaults.autoStart;
-  const millisecond = millisecondProp ?? tokens.defaults.millisecond;
-  const time = timeProp ?? tokens.defaults.time;
-  const format = formatProp ?? tokens.defaults.format;
-  const normalizedTime = Math.max(0, Number(time) || 0);
+  const autoStart = autoStartP ?? tokens.defaults.autoStart;
+  const millisecond = msP ?? tokens.defaults.millisecond;
+  const time = timeP ?? tokens.defaults.time;
+  const format = fmtP ?? tokens.defaults.format;
+  const normTime = Math.max(0, Number(time) || 0);
   const {
     start,
     pause,
     reset,
     current
   } = (0, _hooks.useCountDown)({
-    time: normalizedTime,
+    time: normTime,
     millisecond,
     onChange,
     onFinish
   });
   const resetTimer = (0, _react().useCallback)(() => {
-    reset(normalizedTime);
-    if (autoStart && normalizedTime > 0) start();
-  }, [autoStart, normalizedTime, reset, start]);
+    reset(normTime);
+    if (autoStart && normTime > 0) start();
+  }, [autoStart, normTime, reset, start]);
   (0, _react().useEffect)(() => {
     resetTimer();
     return () => {
       pause();
     };
-  }, [autoStart, normalizedTime, pause, reset, start]);
+  }, [autoStart, normTime, pause, reset, start]);
   (0, _react().useImperativeHandle)(ref, () => ({
     start,
     pause,
@@ -71,13 +71,13 @@ const CountDownImpl = (props, ref) => {
   }));
   const content = (0, _utils.isFunction)(children) ? children(current) : (0, _utils.formatDuration)(format, current);
   const contentNode = (0, _utils.renderTextOrNode)(content, tokens.layout.text);
-  const accessibilityLabel = (0, _validate.isText)(content) ? String(content) : `${current.hours}h ${current.minutes}m ${current.seconds}s`;
+  const accLabel = (0, _validate.isText)(content) ? String(content) : `${current.hours}h ${current.minutes}m ${current.seconds}s`;
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     accessibilityRole: "timer",
     accessibilityLiveRegion: "polite",
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: accLabel,
     accessibilityValue: {
-      text: accessibilityLabel
+      text: accLabel
     },
     style: style
   }, rest), contentNode);

package/dist/cjs/components/datetime-picker/DatetimePicker.js

@@ -32,16 +32,13 @@ const DatetimePickerImpl = props => {
     trigger: 'onPopupVisibleChange'
   });
   const handleClose = (0, _react().useCallback)(() => setPopupVisible(false), [setPopupVisible]);
-  const renderPopup = (0, _react().useCallback)((node, popup, popupProps) => {
-    if (!popup) return node;
-    return /*#__PURE__*/_react().default.createElement(_Popup.Popup, _extends({
-      visible: popupVisible,
-      onClose: handleClose,
-      placement: tokens.defaults.popupPlacement,
-      round: tokens.defaults.popupRound,
-      safeAreaInsetBottom: tokens.defaults.popupSafeAreaInsetBottom
-    }, popupProps), node);
-  }, [handleClose, popupVisible, tokens.defaults.popupPlacement, tokens.defaults.popupRound, tokens.defaults.popupSafeAreaInsetBottom]);
+  const renderPopup = (0, _react().useCallback)((node, popup, popupProps) => !popup ? node : /*#__PURE__*/_react().default.createElement(_Popup.Popup, _extends({
+    visible: popupVisible,
+    onClose: handleClose,
+    placement: tokens.defaults.popupPlacement,
+    round: tokens.defaults.popupRound,
+    safeAreaInsetBottom: tokens.defaults.popupSafeAreaInsetBottom
+  }, popupProps), node), [handleClose, popupVisible, tokens.defaults.popupPlacement, tokens.defaults.popupRound, tokens.defaults.popupSafeAreaInsetBottom]);
   const {
     popup,
     popupVisible: _popupVisible,
@@ -52,8 +49,8 @@ const DatetimePickerImpl = props => {
     onCancel,
     ...pickerProps
   } = props;
-  const onConfirmRef = (0, _react().useRef)(onConfirm),
-    onCancelRef = (0, _react().useRef)(onCancel);
+  const onConfirmRef = (0, _react().useRef)(onConfirm);
+  const onCancelRef = (0, _react().useRef)(onCancel);
   onConfirmRef.current = onConfirm;
   onCancelRef.current = onCancel;
   const handleConfirm = (0, _react().useCallback)(value => {
@@ -89,8 +86,8 @@ const DatePicker = props => {
     ...pickerProps
   } = props;
   const formatValue = (0, _react().useCallback)(dateValue => {
-    const fallback = (0, _utils.isValidDate)(dateValue) ? dateValue : new Date();
-    const date = new Date((0, _utils.clamp)(fallback.getTime(), minDate.getTime(), maxDate.getTime()));
+    const fb = (0, _utils.isValidDate)(dateValue) ? dateValue : new Date();
+    const date = new Date((0, _utils.clamp)(fb.getTime(), minDate.getTime(), maxDate.getTime()));
     if (type === 'year-month') {
       date.setDate(1);
       date.setHours(0, 0, 0, 0);
@@ -99,6 +96,7 @@ const DatePicker = props => {
     } else if (type === 'datehour') {
       date.setMinutes(0, 0, 0);
     }
+    ;
     return date;
   }, [maxDate, minDate, type]);
   const [currentDate, setCurrentDate] = (0, _react().useState)(() => formatValue(value ?? defaultValue));
@@ -227,8 +225,8 @@ const DatePicker = props => {
     if (type === 'datetime') minute = getValue('minute') || 0;
     return formatValue(new Date(year, month - 1, day, hour, minute));
   }, [currentDate, formatValue, originColumns, type]);
-  const onChangeRef = (0, _react().useRef)(onChange),
-    onConfirmRef = (0, _react().useRef)(onConfirm);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  const onConfirmRef = (0, _react().useRef)(onConfirm);
   onChangeRef.current = onChange;
   onConfirmRef.current = onConfirm;
   const handleChange = (0, _react().useCallback)(values => {
@@ -236,9 +234,9 @@ const DatePicker = props => {
     setCurrentDate(next);
     onChangeRef.current?.(next);
   }, [buildDateFromValues]);
-  const currentDateRef = (0, _react().useRef)(currentDate);
-  currentDateRef.current = currentDate;
-  const handleConfirm = (0, _react().useCallback)(() => onConfirmRef.current?.(currentDateRef.current), []);
+  const curDateRef = (0, _react().useRef)(currentDate);
+  curDateRef.current = currentDate;
+  const handleConfirm = (0, _react().useCallback)(() => onConfirmRef.current?.(curDateRef.current), []);
   return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
     columns: columns,
     interactionMode: interactionMode,
@@ -270,9 +268,9 @@ const TimePicker = props => {
     return `${(0, _utils.padZero)((0, _utils.clamp)(Number.isNaN(hour) ? minHour : hour, minHour, maxHour))}:${(0, _utils.padZero)((0, _utils.clamp)(Number.isNaN(minute) ? minMinute : minute, minMinute, maxMinute))}`;
   }, [maxHour, maxMinute, minHour, minMinute]);
   const [currentTime, setCurrentTime] = (0, _react().useState)(() => {
-    const initial = formatTime(value ?? defaultValue);
-    timeRef.current = initial;
-    return initial;
+    const init = formatTime(value ?? defaultValue);
+    timeRef.current = init;
+    return init;
   });
   (0, _react().useEffect)(() => {
     const next = (0, _utils.isString)(value) ? formatTime(value) : formatTime(timeRef.current);
@@ -282,23 +280,24 @@ const TimePicker = props => {
     }
   }, [formatTime, value]);
   const [hourValues, minuteValues] = (0, _react().useMemo)(() => {
-    let hours = (0, _utils.times)(maxHour - minHour + 1, index => (0, _utils.padZero)(minHour + index));
-    let minutes = (0, _utils.times)(maxMinute - minMinute + 1, index => (0, _utils.padZero)(minMinute + index));
+    let h = (0, _utils.times)(maxHour - minHour + 1, i => (0, _utils.padZero)(minHour + i));
+    let m = (0, _utils.times)(maxMinute - minMinute + 1, i => (0, _utils.padZero)(minMinute + i));
     if (filter) {
-      hours = filter('hour', hours);
-      minutes = filter('minute', minutes);
+      h = filter('hour', h);
+      m = filter('minute', m);
     }
-    return [hours, minutes];
+    ;
+    return [h, m];
   }, [filter, maxHour, maxMinute, minHour, minMinute]);
-  const columns = (0, _react().useMemo)(() => [hourValues.map(value => ({
-    label: formatter('hour', value),
-    value
-  })), minuteValues.map(value => ({
-    label: formatter('minute', value),
-    value
+  const columns = (0, _react().useMemo)(() => [hourValues.map(v => ({
+    label: formatter('hour', v),
+    value: v
+  })), minuteValues.map(v => ({
+    label: formatter('minute', v),
+    value: v
   }))], [formatter, hourValues, minuteValues]);
-  const onChangeRef = (0, _react().useRef)(onChange),
-    onConfirmRef = (0, _react().useRef)(onConfirm);
+  const onChangeRef = (0, _react().useRef)(onChange);
+  const onConfirmRef = (0, _react().useRef)(onConfirm);
   onChangeRef.current = onChange;
   onConfirmRef.current = onConfirm;
   const handleChange = (0, _react().useCallback)(values => {

package/dist/cjs/components/dialog/Dialog.js

@@ -76,6 +76,7 @@ const ActionButton = props => {
     color: txtColor
   }) : (0, _utils.renderTextOrNode)(text ?? '', {
     color: txtColor,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.actionSize,
     fontWeight: tokens.typography.actionWeight
   }));
@@ -157,6 +158,7 @@ const DialogImpl = props => {
       handler?.();
       return;
     }
+    ;
     let result;
     try {
       result = bc(action);
@@ -164,6 +166,7 @@ const DialogImpl = props => {
       handler?.();
       return;
     }
+    ;
     if (result === false) return;
     if ((0, _promise.isPromiseLike)(result)) {
       void result.then(resolved => {
@@ -176,6 +179,7 @@ const DialogImpl = props => {
       });
       return;
     }
+    ;
     handler?.();
   }, []);
   const handleCloseIcon = (0, _react().useCallback)(() => {
@@ -191,9 +195,9 @@ const DialogImpl = props => {
     run('confirm', () => onConfirmRef.current?.());
   }, [run]);
   const scaleAnim = (0, _react().useRef)(new (_reactNative().Animated.Value)(0.7)).current;
-  const scaleAnimRef = (0, _react().useRef)(null);
+  const scaleRef = (0, _react().useRef)(null);
   (0, _react().useEffect)(() => {
-    scaleAnimRef.current?.stop();
+    scaleRef.current?.stop();
     scaleAnim.setValue(visible ? 0.7 : 1);
     const anim = _reactNative().Animated.timing(scaleAnim, {
       toValue: visible ? 1 : 0.9,
@@ -202,11 +206,11 @@ const DialogImpl = props => {
       useNativeDriver: _platform.nativeDriverEnabled,
       isInteraction: false
     });
-    scaleAnimRef.current = anim;
+    scaleRef.current = anim;
     anim.start();
   }, [scaleAnim, visible, reducedMotion]);
   (0, _react().useEffect)(() => () => {
-    scaleAnimRef.current?.stop();
+    scaleRef.current?.stop();
   }, []);
   const widthStyle = (0, _react().useMemo)(() => width ? (0, _validate.isNumber)(width) ? {
     width
@@ -224,16 +228,18 @@ const DialogImpl = props => {
   }] : null, [hContent, hTitle, tokens.spacing.paddingHorizontal, tokens.spacing.titleGap, tokens.spacing.titleIsolatedPadding, tokens.spacing.titlePaddingTop]);
   const titleTxtStyle = (0, _react().useMemo)(() => hTitle ? [S.title, {
     color: tokens.colors.title,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.titleSize,
     lineHeight: tokens.typography.titleLineHeight,
     fontWeight: tokens.typography.titleWeight
-  }, titleStyle] : null, [hTitle, titleStyle, tokens.colors.title, tokens.typography.titleLineHeight, tokens.typography.titleSize, tokens.typography.titleWeight]);
+  }, titleStyle] : null, [hTitle, titleStyle, tokens.colors.title, tokens.typography.fontFamily, tokens.typography.titleLineHeight, tokens.typography.titleSize, tokens.typography.titleWeight]);
   const msgTxtStyle = (0, _react().useMemo)(() => [S.msg, {
     color: isRound ? tokens.colors.title : tokens.colors.message,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.messageSize,
     lineHeight: tokens.typography.messageLineHeight,
     textAlign: messageAlign
-  }, messageStyle], [isRound, messageAlign, messageStyle, tokens.colors.message, tokens.colors.title, tokens.typography.messageLineHeight, tokens.typography.messageSize]);
+  }, messageStyle], [isRound, messageAlign, messageStyle, tokens.colors.message, tokens.colors.title, tokens.typography.fontFamily, tokens.typography.messageLineHeight, tokens.typography.messageSize]);
   const msgContentStyle = (0, _react().useMemo)(() => !hChildren ? {
     alignItems: messageAlign === 'center' ? 'center' : messageAlign === 'left' ? 'flex-start' : 'flex-end'
   } : null, [hChildren, messageAlign]);
@@ -249,7 +255,7 @@ const DialogImpl = props => {
     right: 0,
     top: 0
   })], [tokens.colors.divider]);
-  const mergedCloseOnOverlay = closeOnOverlayPress || closeOnClickOverlay;
+  const mergeOverlay = closeOnOverlayPress || closeOnClickOverlay;
   const animStyle = (0, _react().useMemo)(() => ({
     transform: [{
       scale: scaleAnim
@@ -260,7 +266,7 @@ const DialogImpl = props => {
     paddingHorizontal: tokens.spacing.messagePaddingHorizontal,
     paddingBottom: tokens.spacing.roundFooterPadding
   }], [tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
-  const popupBeforeClose = (0, _react().useCallback)(() => {
+  const popupBc = (0, _react().useCallback)(() => {
     const bc = beforeCloseRef.current;
     if (!bc) return true;
     try {
@@ -341,9 +347,9 @@ const DialogImpl = props => {
     overlayTestID: overlayTestID,
     closeOnBackPress: closeOnBackPress,
     closeOnPopstate: closeOnPopstate,
-    closeOnClickOverlay: mergedCloseOnOverlay,
+    closeOnClickOverlay: mergeOverlay,
     onClickOverlay: onClickOverlay,
-    beforeClose: popupBeforeClose,
+    beforeClose: popupBc,
     onClose: onClose,
     onClosed: onClosed,
     contentAnimationStyle: animStyle,

package/dist/cjs/components/dialog/imperative.js

@@ -76,34 +76,28 @@ const DialogPortalInstance = ({
     if (!portalKeyRef.current) return;
     attachCloser(portalKeyRef.current, close);
     return () => {
-      const entry = dialogRegistry.get(portalKeyRef.current ?? -1);
-      if (entry && entry.close === close) entry.close = undefined;
+      const e = dialogRegistry.get(portalKeyRef.current ?? -1);
+      if (e && e.close === close) e.close = undefined;
     };
   }, [close, portalKeyRef]);
   (0, _react().useEffect)(() => () => {
     if (portalKeyRef.current) unregisterEntry(portalKeyRef.current);
   }, [portalKeyRef]);
   const handleCancel = (0, _react().useCallback)(async () => {
-    const allowed = await runHook(() => options.beforeClose?.('cancel'));
-    if (!allowed) return;
-    const shouldClose = await runHook(options.onCancel);
-    if (!shouldClose) return;
+    if (!(await runHook(() => options.beforeClose?.('cancel')))) return;
+    if (!(await runHook(options.onCancel))) return;
     if (meta.mode === 'confirm') meta.resolve?.(false);
     close();
   }, [close, meta, options.beforeClose, options.onCancel]);
   const handleConfirm = (0, _react().useCallback)(async () => {
-    const allowed = await runHook(() => options.beforeClose?.('confirm'));
-    if (!allowed) return;
-    const shouldClose = await runHook(options.onConfirm);
-    if (!shouldClose) return;
+    if (!(await runHook(() => options.beforeClose?.('confirm')))) return;
+    if (!(await runHook(options.onConfirm))) return;
     if (meta.mode === 'alert' || meta.mode === 'confirm') meta.resolve?.(true);
     close();
   }, [close, meta, options.beforeClose, options.onConfirm]);
   const handleClose = (0, _react().useCallback)(async () => {
-    const allowed = await runHook(() => options.beforeClose?.('close'));
-    if (!allowed) return;
-    const shouldClose = await runHook(options.onClose);
-    if (!shouldClose) return;
+    if (!(await runHook(() => options.beforeClose?.('close')))) return;
+    if (!(await runHook(options.onClose))) return;
     if (meta.mode === 'confirm') meta.resolve?.(false);
     close();
   }, [close, meta, options.beforeClose, options.onClose]);

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

@@ -49,6 +49,7 @@ const createDialogTokens = foundations => {
       roundButtonHeight: 40
     },
     typography: {
+      fontFamily: typography.fontFamily,
       titleSize: fontSize.md,
       titleLineHeight: fontSize.md * typography.lineHeightMultiplier,
       titleWeight: typography.weight.semiBold,

package/dist/cjs/components/divider/Divider.js

@@ -26,11 +26,11 @@ const DividerImpl = props => {
   const {
     tokensOverride,
     children,
-    type: typeProp,
-    orientation: orientationProp,
-    dashed: dashedProp,
-    hairline: hairlineProp,
-    contentPosition: contentPositionProp,
+    type: typeP,
+    orientation: oriP,
+    dashed: dashP,
+    hairline: hlP,
+    contentPosition: posP,
     textStyle,
     contentStyle,
     lineColor,
@@ -38,51 +38,48 @@ const DividerImpl = props => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useDividerTokens)(tokensOverride);
-  const dashed = dashedProp ?? tokens.defaults.dashed;
-  const hairline = hairlineProp ?? tokens.defaults.hairline;
-  const contentPosition = contentPositionProp ?? tokens.defaults.contentPosition;
-  const orientation = typeProp ?? orientationProp ?? 'horizontal';
-  const resolvedColor = lineColor ?? tokens.colors.line;
-  const borderStyle = dashed ? 'dashed' : 'solid';
-  const hasContent = orientation === 'horizontal' && (0, _utils.isRenderable)(children);
-  const content = hasContent ? (0, _utils.renderTextOrNode)(children, [tokens.layout.text, {
+  const dash = dashP ?? tokens.defaults.dashed;
+  const hl = hlP ?? tokens.defaults.hairline;
+  const pos = posP ?? tokens.defaults.contentPosition;
+  const ori = typeP ?? oriP ?? 'horizontal';
+  const clr = lineColor ?? tokens.colors.line;
+  const bStyle = dash ? 'dashed' : 'solid';
+  const hasCnt = ori === 'horizontal' && (0, _utils.isRenderable)(children);
+  const cnt = hasCnt ? (0, _utils.renderTextOrNode)(children, [tokens.layout.text, {
     color: tokens.colors.text,
     fontSize: tokens.typography.fontSize,
     lineHeight: tokens.typography.lineHeight,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight
   }, textStyle]) : null;
-  const leftGrow = contentPosition === 'left' ? tokens.sizing.sideMinFlex : 1;
-  const rightGrow = contentPosition === 'right' ? tokens.sizing.sideMinFlex : 1;
-  const renderLine = grow => {
-    if (hairline) return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [tokens.layout.hairlineWrapper, {
-        flexGrow: grow
-      }]
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [(0, _utils.createHairlineView)({
-        position: 'bottom',
-        color: resolvedColor,
-        left: 0,
-        right: 0,
-        bottom: 0
-      }), {
-        borderStyle
-      }]
-    }));
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: {
-        flexGrow: grow,
-        flexShrink: 1,
-        height: tokens.borders.thickness,
-        borderBottomWidth: tokens.borders.thickness,
-        borderBottomColor: resolvedColor,
-        borderStyle
-      }
-    });
-  };
-  if (orientation === 'vertical') {
-    const line = hairline ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const leftG = pos === 'left' ? tokens.sizing.sideMinFlex : 1;
+  const rightG = pos === 'right' ? tokens.sizing.sideMinFlex : 1;
+  const line = g => hl ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.hairlineWrapper, {
+      flexGrow: g
+    }]
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [(0, _utils.createHairlineView)({
+      position: 'bottom',
+      color: clr,
+      left: 0,
+      right: 0,
+      bottom: 0
+    }), {
+      borderStyle: bStyle
+    }]
+  })) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      flexGrow: g,
+      flexShrink: 1,
+      height: tokens.borders.thickness,
+      borderBottomWidth: tokens.borders.thickness,
+      borderBottomColor: clr,
+      borderStyle: bStyle
+    }
+  });
+  if (ori === 'vertical') {
+    const vLine = hl ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: [tokens.layout.hairlineWrapper, {
         width: tokens.borders.thickness,
         height: '100%'
@@ -90,20 +87,20 @@ const DividerImpl = props => {
     }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: [(0, _utils.createHairlineView)({
         position: 'left',
-        color: resolvedColor,
+        color: clr,
         top: 0,
         bottom: 0,
         left: 0
       }), {
-        borderStyle
+        borderStyle: bStyle
       }]
     })) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: {
         width: tokens.borders.thickness,
         height: '100%',
         borderLeftWidth: tokens.borders.thickness,
-        borderLeftColor: resolvedColor,
-        borderStyle
+        borderLeftColor: clr,
+        borderStyle: bStyle
       }
     });
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
@@ -112,18 +109,18 @@ const DividerImpl = props => {
         marginVertical: tokens.spacing.vertical,
         flexDirection: 'column'
       }, style]
-    }, rest), line);
+    }, rest), vLine);
   }
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     accessibilityRole: 'separator',
     style: [tokens.layout.container, {
       marginVertical: tokens.spacing.vertical
     }, style]
-  }, rest), renderLine(hasContent ? leftGrow : 1), hasContent && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, rest), line(hasCnt ? leftG : 1), hasCnt && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.contentWrapper, {
       paddingHorizontal: tokens.spacing.contentPadding
     }, contentStyle]
-  }, content), renderLine(rightGrow)));
+  }, cnt), line(rightG)));
 };
 const Divider = exports.Divider = /*#__PURE__*/_react().default.memo(DividerImpl);
 Divider.displayName = 'Divider';

package/dist/cjs/components/empty/Empty.js

@@ -39,32 +39,32 @@ const PRESET_ICONS = {
 const EmptyImpl = props => {
   const {
     tokensOverride,
-    image: imageProp,
-    imageSize: imageSizeProp,
+    image: imgP,
+    imageSize: sizeP,
     imageStyle,
     description,
     descriptionStyle,
     children,
     style,
-    gap: gapProp,
+    gap: gapP,
     ...rest
   } = props;
   const tokens = (0, _tokens.useEmptyTokens)(tokensOverride);
-  const image = imageProp ?? tokens.defaults.image;
-  const gap = gapProp ?? tokens.defaults.gap;
-  const resolvedImageSize = imageSizeProp ?? tokens.sizing.image;
-  const renderImage = () => {
-    if (/*#__PURE__*/_react().default.isValidElement(image)) return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const img = imgP ?? tokens.defaults.image;
+  const gap = gapP ?? tokens.defaults.gap;
+  const imgSize = sizeP ?? tokens.sizing.image;
+  const rImg = () => {
+    if (/*#__PURE__*/_react().default.isValidElement(img)) return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: [tokens.layout.imageWrapper, {
-        width: resolvedImageSize,
-        height: resolvedImageSize
+        width: imgSize,
+        height: imgSize
       }, imageStyle]
-    }, image);
-    if ((0, _utils.isString)(image)) {
-      if (/^https?:/.test(image)) return /*#__PURE__*/_react().default.createElement(_image.default, {
-        src: image,
-        width: resolvedImageSize,
-        height: resolvedImageSize,
+    }, img);
+    if ((0, _utils.isString)(img)) {
+      if (/^https?:/.test(img)) return /*#__PURE__*/_react().default.createElement(_image.default, {
+        src: img,
+        width: imgSize,
+        height: imgSize,
         fit: "contain",
         showLoading: false,
         showError: false,
@@ -72,21 +72,21 @@ const EmptyImpl = props => {
           backgroundColor: tokens.colors.imageBackground
         }, imageStyle]
       });
-      const IconComponent = PRESET_ICONS[image] || PRESET_ICONS.default;
-      const iconSize = resolvedImageSize * tokens.sizing.iconScale;
+      const Icon = PRESET_ICONS[img] || PRESET_ICONS.default;
       return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
         style: [tokens.layout.imageWrapper, {
-          width: resolvedImageSize,
-          height: resolvedImageSize
+          width: imgSize,
+          height: imgSize
         }, imageStyle]
-      }, /*#__PURE__*/_react().default.createElement(IconComponent, {
-        size: iconSize,
+      }, /*#__PURE__*/_react().default.createElement(Icon, {
+        size: imgSize * tokens.sizing.iconScale,
         color: tokens.colors.icon
       }));
     }
+    ;
     return null;
   };
-  const renderDescription = () => {
+  const rDesc = () => {
     if (!(0, _utils.isRenderable)(description)) return null;
     if ((0, _utils.isText)(description)) return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: [tokens.layout.descriptionText, {
@@ -106,15 +106,20 @@ const EmptyImpl = props => {
       }
     }, description);
   };
+  const footStyle = {
+    fontFamily: tokens.typography.descriptionFontFamily,
+    fontSize: tokens.typography.descriptionSize,
+    fontWeight: tokens.typography.descriptionFontWeight
+  };
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     accessibilityRole: "summary",
     accessibilityLabel: (0, _utils.isText)(description) ? String(description) : undefined,
     style: [tokens.layout.container, style]
-  }, rest), renderImage(), renderDescription(), (0, _utils.isRenderable)(children) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, rest), rImg(), rDesc(), (0, _utils.isRenderable)(children) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: {
       marginTop: tokens.spacing.footerMarginTop
     }
-  }, (0, _utils.renderTextOrNode)(children)));
+  }, (0, _utils.renderTextOrNode)(children, footStyle)));
 };
 const Empty = exports.Empty = /*#__PURE__*/_react().default.memo(EmptyImpl);
 Empty.displayName = 'Empty';

package/dist/cjs/components/error-boundary/ErrorBoundary.js

@@ -39,10 +39,10 @@ class ErrorBoundaryClass extends _react().default.Component {
       forwardedRef
     } = this.props;
     if (!forwardedRef) return;
-    const refValue = {
+    const refVal = {
       reset: this.reset
     };
-    if (typeof forwardedRef === 'function') forwardedRef(refValue);else if (forwardedRef && typeof forwardedRef === 'object') forwardedRef.current = refValue;
+    if (typeof forwardedRef === 'function') forwardedRef(refVal);else if (forwardedRef && typeof forwardedRef === 'object') forwardedRef.current = refVal;
   }
   reset = () => {
     this.props.onReset?.();
@@ -63,6 +63,7 @@ class ErrorBoundaryClass extends _react().default.Component {
       if (fallback !== undefined) return fallback;
       return null;
     }
+    ;
     return children ?? null;
   }
 }