react-native-system-ui 1.0.0 → 1.0.1

package/dist/es/components/collapse/Collapse.js

@@ -18,41 +18,40 @@ const CollapseImpl = props => {
   const {
     tokensOverride,
     children,
-    accordion: accordionProp,
+    accordion: accP,
     value,
     defaultValue,
     onChange,
-    border: borderProp,
-    iconPosition: iconPositionProp,
+    border: borderP,
+    iconPosition: iconPosP,
     expandIcon,
     disabled,
     style,
     ...rest
   } = props;
   const tokens = useCollapseTokens(tokensOverride);
-  const accordion = accordionProp ?? tokens.defaults.accordion;
-  const border = borderProp ?? tokens.defaults.border;
-  const iconPosition = iconPositionProp ?? tokens.defaults.iconPosition;
+  const accordion = accP ?? tokens.defaults.accordion;
+  const border = borderP ?? tokens.defaults.border;
+  const iconPosition = iconPosP ?? tokens.defaults.iconPosition;
   const {
     colors
   } = tokens;
   const controlled = value !== undefined;
-  const normalizedValue = normalizeValue(value);
-  const normalizedDefaultValue = normalizeValue(defaultValue) ?? [];
+  const normVal = normalizeValue(value);
+  const normDef = normalizeValue(defaultValue) ?? [];
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
-  const [internalValue, setInternalValue] = useState(() => accordion ? normalizedDefaultValue.slice(0, 1) : normalizedDefaultValue);
-  const activeKeys = controlled ? accordion ? (normalizedValue ?? []).slice(0, 1) : normalizedValue ?? [] : internalValue;
+  const [internalValue, setInternalValue] = useState(() => accordion ? normDef.slice(0, 1) : normDef);
+  const activeKeys = controlled ? accordion ? (normVal ?? []).slice(0, 1) : normVal ?? [] : internalValue;
   const toggle = useCallback((name, expand) => {
     if (disabled) return;
     const existing = activeKeys.includes(name);
     const shouldExpand = expand ?? !existing;
-    let nextKeys;
-    if (accordion) nextKeys = shouldExpand ? [name] : existing ? [] : activeKeys;else nextKeys = shouldExpand ? existing ? activeKeys : [...activeKeys, name] : existing ? activeKeys.filter(key => key !== name) : activeKeys;
+    const nextKeys = accordion ? shouldExpand ? [name] : existing ? [] : activeKeys : shouldExpand ? existing ? activeKeys : [...activeKeys, name] : existing ? activeKeys.filter(k => k !== name) : activeKeys;
     if (!controlled) setInternalValue(nextKeys);
     onChangeRef.current?.(buildOutputValue(nextKeys, accordion));
   }, [accordion, activeKeys, controlled, disabled]);
-  const contextValue = useMemo(() => ({
+  const ctxVal = useMemo(() => ({
     activeKeys,
     toggle,
     accordion,
@@ -64,18 +63,18 @@ const CollapseImpl = props => {
   }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
   const renderedChildren = useMemo(() => {
     const items = React.Children.toArray(children);
-    return items.map((child, index) => {
+    return items.map((child, i) => {
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
       if (!isFunction(child.type) && !isObject(child.type)) return child;
-      const name = child.props.name ?? String(index);
+      const name = child.props.name ?? String(i);
       return /*#__PURE__*/React.cloneElement(child, {
         name,
-        index
+        index: i
       });
     });
   }, [children]);
   return /*#__PURE__*/React.createElement(CollapseContext.Provider, {
-    value: contextValue
+    value: ctxVal
   }, /*#__PURE__*/React.createElement(View, _extends({
     style: [tokens.layout.container, border && {
       backgroundColor: colors.background
@@ -212,9 +211,10 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotation]);
   const contentNode = useMemo(() => renderTextOrNode(children, {
     color: mergedDisabled ? colors.disabled : colors.description,
+    fontFamily: typography.fontFamily,
     fontSize: typography.descriptionSize,
     lineHeight: Math.round(typography.descriptionSize * 1.5)
-  }), [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize]);
+  }), [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize, typography.fontFamily]);
   const showInnerBorder = Boolean(panelBorder);
   const showTopBorder = index > 0 && showInnerBorder;
   const showHeaderBottomBorder = isActive && showInnerBorder;

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

@@ -11,15 +11,15 @@ const ConfigProviderBase = ({
   children
 }) => {
   const ctxLocale = useContext(LocaleContext);
-  const ctxDirection = useContext(DirectionContext);
-  const resolvedLocale = locale ?? ctxLocale;
-  const resolvedDirection = direction ?? ctxDirection ?? (I18nManager.isRTL ? 'rtl' : 'ltr');
+  const ctxDir = useContext(DirectionContext);
+  const rLocale = locale ?? ctxLocale;
+  const rDir = direction ?? ctxDir ?? (I18nManager.isRTL ? 'rtl' : 'ltr');
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     value: theme
   }, /*#__PURE__*/React.createElement(DirectionContext.Provider, {
-    value: resolvedDirection
+    value: rDir
   }, /*#__PURE__*/React.createElement(LocaleContext.Provider, {
-    value: resolvedLocale
+    value: rLocale
   }, /*#__PURE__*/React.createElement(PortalHost, null, children))));
 };
 export const ConfigProvider = /*#__PURE__*/React.memo(ConfigProviderBase);

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

@@ -8,10 +8,10 @@ import { useCountDownTokens } from './tokens';
 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,
@@ -19,32 +19,32 @@ const CountDownImpl = (props, ref) => {
     ...rest
   } = props;
   const 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
   } = useCountDown({
-    time: normalizedTime,
+    time: normTime,
     millisecond,
     onChange,
     onFinish
   });
   const resetTimer = useCallback(() => {
-    reset(normalizedTime);
-    if (autoStart && normalizedTime > 0) start();
-  }, [autoStart, normalizedTime, reset, start]);
+    reset(normTime);
+    if (autoStart && normTime > 0) start();
+  }, [autoStart, normTime, reset, start]);
   useEffect(() => {
     resetTimer();
     return () => {
       pause();
     };
-  }, [autoStart, normalizedTime, pause, reset, start]);
+  }, [autoStart, normTime, pause, reset, start]);
   useImperativeHandle(ref, () => ({
     start,
     pause,
@@ -52,13 +52,13 @@ const CountDownImpl = (props, ref) => {
   }));
   const content = isFunction(children) ? children(current) : formatDuration(format, current);
   const contentNode = renderTextOrNode(content, tokens.layout.text);
-  const accessibilityLabel = isText(content) ? String(content) : `${current.hours}h ${current.minutes}m ${current.seconds}s`;
+  const accLabel = isText(content) ? String(content) : `${current.hours}h ${current.minutes}m ${current.seconds}s`;
   return /*#__PURE__*/React.createElement(View, _extends({
     accessibilityRole: "timer",
     accessibilityLiveRegion: "polite",
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: accLabel,
     accessibilityValue: {
-      text: accessibilityLabel
+      text: accLabel
     },
     style: style
   }, rest), contentNode);

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

@@ -18,16 +18,13 @@ const DatetimePickerImpl = props => {
     trigger: 'onPopupVisibleChange'
   });
   const handleClose = useCallback(() => setPopupVisible(false), [setPopupVisible]);
-  const renderPopup = useCallback((node, popup, popupProps) => {
-    if (!popup) return node;
-    return /*#__PURE__*/React.createElement(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 = useCallback((node, popup, popupProps) => !popup ? node : /*#__PURE__*/React.createElement(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,
@@ -38,8 +35,8 @@ const DatetimePickerImpl = props => {
     onCancel,
     ...pickerProps
   } = props;
-  const onConfirmRef = useRef(onConfirm),
-    onCancelRef = useRef(onCancel);
+  const onConfirmRef = useRef(onConfirm);
+  const onCancelRef = useRef(onCancel);
   onConfirmRef.current = onConfirm;
   onCancelRef.current = onCancel;
   const handleConfirm = useCallback(value => {
@@ -75,8 +72,8 @@ const DatePicker = props => {
     ...pickerProps
   } = props;
   const formatValue = useCallback(dateValue => {
-    const fallback = isValidDate(dateValue) ? dateValue : new Date();
-    const date = new Date(clamp(fallback.getTime(), minDate.getTime(), maxDate.getTime()));
+    const fb = isValidDate(dateValue) ? dateValue : new Date();
+    const date = new Date(clamp(fb.getTime(), minDate.getTime(), maxDate.getTime()));
     if (type === 'year-month') {
       date.setDate(1);
       date.setHours(0, 0, 0, 0);
@@ -85,6 +82,7 @@ const DatePicker = props => {
     } else if (type === 'datehour') {
       date.setMinutes(0, 0, 0);
     }
+    ;
     return date;
   }, [maxDate, minDate, type]);
   const [currentDate, setCurrentDate] = useState(() => formatValue(value ?? defaultValue));
@@ -213,8 +211,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 = useRef(onChange),
-    onConfirmRef = useRef(onConfirm);
+  const onChangeRef = useRef(onChange);
+  const onConfirmRef = useRef(onConfirm);
   onChangeRef.current = onChange;
   onConfirmRef.current = onConfirm;
   const handleChange = useCallback(values => {
@@ -222,9 +220,9 @@ const DatePicker = props => {
     setCurrentDate(next);
     onChangeRef.current?.(next);
   }, [buildDateFromValues]);
-  const currentDateRef = useRef(currentDate);
-  currentDateRef.current = currentDate;
-  const handleConfirm = useCallback(() => onConfirmRef.current?.(currentDateRef.current), []);
+  const curDateRef = useRef(currentDate);
+  curDateRef.current = currentDate;
+  const handleConfirm = useCallback(() => onConfirmRef.current?.(curDateRef.current), []);
   return /*#__PURE__*/React.createElement(Picker, _extends({}, pickerProps, {
     columns: columns,
     interactionMode: interactionMode,
@@ -256,9 +254,9 @@ const TimePicker = props => {
     return `${padZero(clamp(Number.isNaN(hour) ? minHour : hour, minHour, maxHour))}:${padZero(clamp(Number.isNaN(minute) ? minMinute : minute, minMinute, maxMinute))}`;
   }, [maxHour, maxMinute, minHour, minMinute]);
   const [currentTime, setCurrentTime] = useState(() => {
-    const initial = formatTime(value ?? defaultValue);
-    timeRef.current = initial;
-    return initial;
+    const init = formatTime(value ?? defaultValue);
+    timeRef.current = init;
+    return init;
   });
   useEffect(() => {
     const next = isString(value) ? formatTime(value) : formatTime(timeRef.current);
@@ -268,23 +266,24 @@ const TimePicker = props => {
     }
   }, [formatTime, value]);
   const [hourValues, minuteValues] = useMemo(() => {
-    let hours = times(maxHour - minHour + 1, index => padZero(minHour + index));
-    let minutes = times(maxMinute - minMinute + 1, index => padZero(minMinute + index));
+    let h = times(maxHour - minHour + 1, i => padZero(minHour + i));
+    let m = times(maxMinute - minMinute + 1, i => 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 = useMemo(() => [hourValues.map(value => ({
-    label: formatter('hour', value),
-    value
-  })), minuteValues.map(value => ({
-    label: formatter('minute', value),
-    value
+  const columns = useMemo(() => [hourValues.map(v => ({
+    label: formatter('hour', v),
+    value: v
+  })), minuteValues.map(v => ({
+    label: formatter('minute', v),
+    value: v
   }))], [formatter, hourValues, minuteValues]);
-  const onChangeRef = useRef(onChange),
-    onConfirmRef = useRef(onConfirm);
+  const onChangeRef = useRef(onChange);
+  const onConfirmRef = useRef(onConfirm);
   onChangeRef.current = onChange;
   onConfirmRef.current = onConfirm;
   const handleChange = useCallback(values => {

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

@@ -50,6 +50,7 @@ const ActionButton = props => {
     color: txtColor
   }) : renderTextOrNode(text ?? '', {
     color: txtColor,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.actionSize,
     fontWeight: tokens.typography.actionWeight
   }));
@@ -131,6 +132,7 @@ const DialogImpl = props => {
       handler?.();
       return;
     }
+    ;
     let result;
     try {
       result = bc(action);
@@ -138,6 +140,7 @@ const DialogImpl = props => {
       handler?.();
       return;
     }
+    ;
     if (result === false) return;
     if (isPromiseLike(result)) {
       void result.then(resolved => {
@@ -150,6 +153,7 @@ const DialogImpl = props => {
       });
       return;
     }
+    ;
     handler?.();
   }, []);
   const handleCloseIcon = useCallback(() => {
@@ -165,9 +169,9 @@ const DialogImpl = props => {
     run('confirm', () => onConfirmRef.current?.());
   }, [run]);
   const scaleAnim = useRef(new Animated.Value(0.7)).current;
-  const scaleAnimRef = useRef(null);
+  const scaleRef = useRef(null);
   useEffect(() => {
-    scaleAnimRef.current?.stop();
+    scaleRef.current?.stop();
     scaleAnim.setValue(visible ? 0.7 : 1);
     const anim = Animated.timing(scaleAnim, {
       toValue: visible ? 1 : 0.9,
@@ -176,11 +180,11 @@ const DialogImpl = props => {
       useNativeDriver: nativeDriverEnabled,
       isInteraction: false
     });
-    scaleAnimRef.current = anim;
+    scaleRef.current = anim;
     anim.start();
   }, [scaleAnim, visible, reducedMotion]);
   useEffect(() => () => {
-    scaleAnimRef.current?.stop();
+    scaleRef.current?.stop();
   }, []);
   const widthStyle = useMemo(() => width ? isNumber(width) ? {
     width
@@ -198,16 +202,18 @@ const DialogImpl = props => {
   }] : null, [hContent, hTitle, tokens.spacing.paddingHorizontal, tokens.spacing.titleGap, tokens.spacing.titleIsolatedPadding, tokens.spacing.titlePaddingTop]);
   const titleTxtStyle = 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 = 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 = useMemo(() => !hChildren ? {
     alignItems: messageAlign === 'center' ? 'center' : messageAlign === 'left' ? 'flex-start' : 'flex-end'
   } : null, [hChildren, messageAlign]);
@@ -223,7 +229,7 @@ const DialogImpl = props => {
     right: 0,
     top: 0
   })], [tokens.colors.divider]);
-  const mergedCloseOnOverlay = closeOnOverlayPress || closeOnClickOverlay;
+  const mergeOverlay = closeOnOverlayPress || closeOnClickOverlay;
   const animStyle = useMemo(() => ({
     transform: [{
       scale: scaleAnim
@@ -234,7 +240,7 @@ const DialogImpl = props => {
     paddingHorizontal: tokens.spacing.messagePaddingHorizontal,
     paddingBottom: tokens.spacing.roundFooterPadding
   }], [tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
-  const popupBeforeClose = useCallback(() => {
+  const popupBc = useCallback(() => {
     const bc = beforeCloseRef.current;
     if (!bc) return true;
     try {
@@ -315,9 +321,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/es/components/dialog/imperative.js

@@ -62,34 +62,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]);
   useEffect(() => () => {
     if (portalKeyRef.current) unregisterEntry(portalKeyRef.current);
   }, [portalKeyRef]);
   const handleCancel = 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 = 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 = 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/es/components/dialog/tokens.js

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

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

@@ -7,11 +7,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,
@@ -19,51 +19,48 @@ const DividerImpl = props => {
     ...rest
   } = props;
   const 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' && isRenderable(children);
-  const content = hasContent ? 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' && isRenderable(children);
+  const cnt = hasCnt ? 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.createElement(View, {
-      style: [tokens.layout.hairlineWrapper, {
-        flexGrow: grow
-      }]
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [createHairlineView({
-        position: 'bottom',
-        color: resolvedColor,
-        left: 0,
-        right: 0,
-        bottom: 0
-      }), {
-        borderStyle
-      }]
-    }));
-    return /*#__PURE__*/React.createElement(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.createElement(View, {
+  const leftG = pos === 'left' ? tokens.sizing.sideMinFlex : 1;
+  const rightG = pos === 'right' ? tokens.sizing.sideMinFlex : 1;
+  const line = g => hl ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.hairlineWrapper, {
+      flexGrow: g
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [createHairlineView({
+      position: 'bottom',
+      color: clr,
+      left: 0,
+      right: 0,
+      bottom: 0
+    }), {
+      borderStyle: bStyle
+    }]
+  })) : /*#__PURE__*/React.createElement(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.createElement(View, {
       style: [tokens.layout.hairlineWrapper, {
         width: tokens.borders.thickness,
         height: '100%'
@@ -71,20 +68,20 @@ const DividerImpl = props => {
     }, /*#__PURE__*/React.createElement(View, {
       style: [createHairlineView({
         position: 'left',
-        color: resolvedColor,
+        color: clr,
         top: 0,
         bottom: 0,
         left: 0
       }), {
-        borderStyle
+        borderStyle: bStyle
       }]
     })) : /*#__PURE__*/React.createElement(View, {
       style: {
         width: tokens.borders.thickness,
         height: '100%',
         borderLeftWidth: tokens.borders.thickness,
-        borderLeftColor: resolvedColor,
-        borderStyle
+        borderLeftColor: clr,
+        borderStyle: bStyle
       }
     });
     return /*#__PURE__*/React.createElement(View, _extends({
@@ -93,18 +90,18 @@ const DividerImpl = props => {
         marginVertical: tokens.spacing.vertical,
         flexDirection: 'column'
       }, style]
-    }, rest), line);
+    }, rest), vLine);
   }
   return /*#__PURE__*/React.createElement(View, _extends({
     accessibilityRole: 'separator',
     style: [tokens.layout.container, {
       marginVertical: tokens.spacing.vertical
     }, style]
-  }, rest), renderLine(hasContent ? leftGrow : 1), hasContent && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  }, rest), line(hasCnt ? leftG : 1), hasCnt && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.contentWrapper, {
       paddingHorizontal: tokens.spacing.contentPadding
     }, contentStyle]
-  }, content), renderLine(rightGrow)));
+  }, cnt), line(rightG)));
 };
 export const Divider = /*#__PURE__*/React.memo(DividerImpl);
 Divider.displayName = 'Divider';