react-native-system-ui 1.0.0 → 1.0.1

package/dist/es/components/image-preview/ImagePreview.js

@@ -39,7 +39,6 @@ const ImagePreviewImpl = (props, ref) => {
     visible,
     images = [],
     startPosition = 0,
-    swipeDuration = 300,
     tokensOverride,
     lazyRender = false,
     lazyRenderBuffer = 1,
@@ -74,18 +73,18 @@ const ImagePreviewImpl = (props, ref) => {
   const pendingCloseReason = useRef('close');
   const touchStartRef = useRef(null);
   const touchMovedRef = useRef(false);
-  const imagesLength = images.length;
-  const [activeIndex, setActiveIndex] = useState(() => clampIndex(startPosition, imagesLength));
-  const safeActiveIndex = clampIndex(activeIndex, imagesLength);
+  const imgLen = images.length;
+  const [activeIndex, setActiveIndex] = useState(() => clampIndex(startPosition, imgLen));
+  const safeIdx = clampIndex(activeIndex, imgLen);
   const latestRef = useRef({
     images,
-    index: safeActiveIndex,
+    index: safeIdx,
     beforeClose,
     onClose
   });
   latestRef.current = {
     images,
-    index: safeActiveIndex,
+    index: safeIdx,
     beforeClose,
     onClose
   };
@@ -93,11 +92,11 @@ const ImagePreviewImpl = (props, ref) => {
     uri: img
   } : img), [images]);
   useEffect(() => {
-    setActiveIndex(current => clampIndex(current, imagesLength));
-  }, [imagesLength]);
+    setActiveIndex(cur => clampIndex(cur, imgLen));
+  }, [imgLen]);
   useEffect(() => {
     if (!visible) return;
-    const next = clampIndex(startPosition, imagesLength);
+    const next = clampIndex(startPosition, imgLen);
     setActiveIndex(next);
     if (typeof requestAnimationFrame !== 'undefined') {
       const raf = requestAnimationFrame(() => {
@@ -105,7 +104,7 @@ const ImagePreviewImpl = (props, ref) => {
       });
       return () => cancelAnimationFrame(raf);
     }
-  }, [imagesLength, startPosition, visible]);
+  }, [imgLen, startPosition, visible]);
   const runBeforeClose = useCallback(async reason => {
     const {
       beforeClose: bc,
@@ -144,17 +143,17 @@ const ImagePreviewImpl = (props, ref) => {
   }, [executeClose]);
   useImperativeHandle(ref, () => ({
     swipeTo: (index, anim = true) => {
-      const next = clampIndex(index, imagesLength);
+      const next = clampIndex(index, imgLen);
       setActiveIndex(next);
       swiperRef.current?.swipeTo(next, anim);
     }
-  }), [imagesLength]);
+  }), [imgLen]);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
-  const safeActiveIndexRef = useRef(safeActiveIndex);
-  safeActiveIndexRef.current = safeActiveIndex;
+  const safeIdxRef = useRef(safeIdx);
+  safeIdxRef.current = safeIdx;
   const handleSwiperChange = useCallback(index => {
-    if (safeActiveIndexRef.current === index) return;
+    if (safeIdxRef.current === index) return;
     setActiveIndex(index);
     onChangeRef.current?.(index);
   }, []);
@@ -253,6 +252,7 @@ const ImagePreviewImpl = (props, ref) => {
     }) : /*#__PURE__*/React.createElement(Text, {
       style: [S.indexText, {
         color: colors.indexText,
+        fontFamily: typography.fontFamily,
         fontSize: typography.indexTextSize
       }]
     }, indexText)));
@@ -295,16 +295,16 @@ const ImagePreviewImpl = (props, ref) => {
     style: [S.content, {
       backgroundColor: colors.background
     }]
-  }, imagesLength === 1 && renderIndex(0, 1), imagesLength === 0 ? /*#__PURE__*/React.createElement(View, {
+  }, imgLen === 1 && renderIndex(0, 1), imgLen === 0 ? /*#__PURE__*/React.createElement(View, {
     style: S.empty,
     testID: "rv-image-preview-empty"
   }) : /*#__PURE__*/React.createElement(Swiper, {
     ref: swiperRef,
     style: S.swiper,
-    initialSwipe: clampIndex(startPosition, imagesLength),
+    initialSwipe: clampIndex(startPosition, imgLen),
     loop: false,
     autoplay: false,
-    touchable: imagesLength > 1,
+    touchable: imgLen > 1,
     indicator: renderIndicator,
     onChange: handleSwiperChange,
     testID: "rv-image-preview-swiper"
@@ -314,7 +314,7 @@ const ImagePreviewImpl = (props, ref) => {
     testID: `rv-image-preview-slide-${index}`
   }, /*#__PURE__*/React.createElement(ImageSlide, {
     source: source,
-    rendered: !lazyRender || Math.abs(index - safeActiveIndex) <= lazyBuffer,
+    rendered: !lazyRender || Math.abs(index - safeIdx) <= lazyBuffer,
     pressableHandlers: pressableHandlers,
     index: index,
     total: resolvedImages.length

package/dist/es/components/image-preview/tokens.js

@@ -4,7 +4,8 @@ const createTokens = foundations => {
     palette,
     radii,
     fontSize,
-    spacing
+    spacing,
+    typography
   } = foundations;
   return {
     colors: {
@@ -28,6 +29,7 @@ const createTokens = foundations => {
       indexBadge: radii.pill
     },
     typography: {
+      fontFamily: typography.fontFamily,
       indexTextSize: fontSize.sm
     }
   };

package/dist/es/components/input/Input.js

@@ -35,8 +35,8 @@ const InputImpl = (props, ref) => {
   const tokens = useInputTokens(tokensOverride);
   const inputRef = useRef(null);
   const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
   const onChangeTextRef = useRef(onChangeText);
+  onChangeRef.current = onChange;
   onChangeTextRef.current = onChangeText;
   const handleChangeText = useCallback(value => {
     onChangeRef.current?.(value);
@@ -50,9 +50,9 @@ const InputImpl = (props, ref) => {
       return inputRef.current?.nativeElement ?? null;
     }
   }), []);
-  const resolvedInputAlign = alignProp ?? inputAlignProp ?? tokens.defaults.inputAlign;
-  const resolvedClearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
-  const resolvedKeyboardType = keyboardTypeProp ?? mapKeyboardType(type);
+  const rAlign = alignProp ?? inputAlignProp ?? tokens.defaults.inputAlign;
+  const rClearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
+  const rKeyboardType = keyboardTypeProp ?? mapKeyboardType(type);
   const fieldStyle = [{
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
@@ -62,11 +62,11 @@ const InputImpl = (props, ref) => {
     ref: inputRef
   }, rest, {
     type: type,
-    keyboardType: resolvedKeyboardType,
+    keyboardType: rKeyboardType,
     tokensOverride: fieldTokensOverride,
     border: tokens.defaults.border,
-    inputAlign: resolvedInputAlign,
-    clearTrigger: resolvedClearTrigger,
+    inputAlign: rAlign,
+    clearTrigger: rClearTrigger,
     style: fieldStyle,
     inputStyle: inputStyle,
     showWordLimit: showWordLimit,
@@ -82,24 +82,21 @@ const TextAreaImpl = (props, ref) => {
     ...rest
   } = props;
   const fieldTokens = useFieldTokens(rest.fieldTokensOverride);
-  const lineHeight = fieldTokens.defaults.textareaLineHeight;
-  const toRows = useCallback(height => {
-    if (!isFiniteNumber(height) || height <= 0) return undefined;
-    return Math.max(1, Math.round(height / lineHeight));
-  }, [lineHeight]);
-  const resolvedAutoSize = useMemo(() => !autoSizeProp || isBoolean(autoSizeProp) ? autoSizeProp : (() => {
-    const minRows = toRows(autoSizeProp.minHeight);
-    const maxRows = toRows(autoSizeProp.maxHeight);
-    return minRows || maxRows ? {
-      minRows,
-      maxRows
+  const lh = fieldTokens.defaults.textareaLineHeight;
+  const toRows = useCallback(height => !isFiniteNumber(height) || height <= 0 ? undefined : Math.max(1, Math.round(height / lh)), [lh]);
+  const rAutoSize = useMemo(() => !autoSizeProp || isBoolean(autoSizeProp) ? autoSizeProp : (() => {
+    const minR = toRows(autoSizeProp.minHeight);
+    const maxR = toRows(autoSizeProp.maxHeight);
+    return minR || maxR ? {
+      minRows: minR,
+      maxRows: maxR
     } : undefined;
   })(), [autoSizeProp, toRows]);
   return /*#__PURE__*/React.createElement(InputComponent, _extends({
     ref: ref
   }, rest, {
     type: "textarea",
-    autoSize: resolvedAutoSize
+    autoSize: rAutoSize
   }));
 };
 const TextAreaForwardRef = /*#__PURE__*/React.forwardRef(TextAreaImpl);

package/dist/es/components/loading/Loading.js

@@ -7,13 +7,13 @@ import { useLoadingTokens } from './tokens';
 const LoadingImpl = props => {
   const {
     tokensOverride,
-    color: colorProp,
-    size: sizeProp,
-    textSize: textSizeProp,
-    textColor: textColorProp,
-    vertical: verticalProp,
-    accessibilityLabel: accessibilityLabelProp,
-    ['aria-label']: ariaLabelProp,
+    color: clrP,
+    size: sizeP,
+    textSize: tsP,
+    textColor: tcP,
+    vertical: vertP,
+    accessibilityLabel: accP,
+    ['aria-label']: ariaP,
     style,
     textStyle,
     contentStyle,
@@ -21,37 +21,37 @@ const LoadingImpl = props => {
     ...rest
   } = props;
   const tokens = useLoadingTokens(tokensOverride);
-  const color = colorProp ?? tokens.colors.indicator;
-  const size = sizeProp ?? tokens.defaults.size;
-  const textSize = textSizeProp ?? tokens.defaults.textSize;
-  const textColor = textColorProp ?? tokens.colors.text;
-  const vertical = verticalProp ?? tokens.defaults.vertical;
-  const resolvedAccessibilityLabel = ariaLabelProp ?? accessibilityLabelProp ?? 'loading';
-  const indicator = /*#__PURE__*/React.createElement(ActivityIndicator, {
+  const clr = clrP ?? tokens.colors.indicator;
+  const size = sizeP ?? tokens.defaults.size;
+  const ts = tsP ?? tokens.defaults.textSize;
+  const tc = tcP ?? tokens.colors.text;
+  const vert = vertP ?? tokens.defaults.vertical;
+  const acc = ariaP ?? accP ?? 'loading';
+  const ind = /*#__PURE__*/React.createElement(ActivityIndicator, {
     testID: "rv-loading-spinner",
     size: size,
-    color: color,
-    accessibilityLabel: resolvedAccessibilityLabel
+    color: clr,
+    accessibilityLabel: acc
   });
-  const textStyleSpacing = {
-    marginLeft: vertical ? 0 : tokens.spacing.gap,
-    marginTop: vertical ? tokens.spacing.gap : 0
+  const txtSp = {
+    marginLeft: vert ? 0 : tokens.spacing.gap,
+    marginTop: vert ? tokens.spacing.gap : 0
   };
-  const textNode = isRenderable(children) && /*#__PURE__*/React.createElement(View, {
-    style: isText(children) ? undefined : textStyleSpacing
-  }, renderTextOrNode(children, [tokens.layout.text, textStyleSpacing, {
-    fontSize: textSize,
-    color: textColor
+  const txtNode = isRenderable(children) && /*#__PURE__*/React.createElement(View, {
+    style: isText(children) ? undefined : txtSp
+  }, renderTextOrNode(children, [tokens.layout.text, txtSp, {
+    fontSize: ts,
+    color: tc
   }, textStyle].filter(Boolean)));
   return /*#__PURE__*/React.createElement(View, _extends({
     accessibilityRole: "progressbar",
     style: [tokens.layout.container, {
-      flexDirection: vertical ? 'column' : 'row',
-      justifyContent: vertical ? 'center' : 'flex-start'
+      flexDirection: vert ? 'column' : 'row',
+      justifyContent: vert ? 'center' : 'flex-start'
     }, style]
   }, rest), /*#__PURE__*/React.createElement(View, {
     style: contentStyle
-  }, indicator), textNode);
+  }, ind), txtNode);
 };
 export const Loading = /*#__PURE__*/React.memo(LoadingImpl);
 Loading.displayName = 'Loading';

package/dist/es/components/nav-bar/NavBar.js

@@ -19,13 +19,13 @@ const NavBarBaseImpl = props => {
     rightText,
     leftIcon,
     rightIcon,
-    leftArrow: leftArrowProp,
-    fixed: fixedProp,
-    placeholder: placeholderProp,
-    zIndex: zIndexProp,
-    border: borderProp,
-    safeAreaInsetTop: safeAreaInsetTopProp,
-    background: backgroundProp,
+    leftArrow: leftArrP,
+    fixed: fixedP,
+    placeholder: placeP,
+    zIndex: zIdxP,
+    border: borderP,
+    safeAreaInsetTop: safeTopP,
+    background: bgP,
     tintColor,
     titleStyle,
     descriptionStyle,
@@ -40,21 +40,21 @@ const NavBarBaseImpl = props => {
   const locale = useLocale();
   const dir = useDirection();
   const tokens = useNavBarTokens(tokensOverride);
-  const leftArrow = leftArrowProp ?? tokens.defaults.leftArrow;
-  const fixed = fixedProp ?? tokens.defaults.fixed;
-  const placeholder = placeholderProp ?? tokens.defaults.placeholder;
-  const zIndex = zIndexProp ?? tokens.defaults.zIndex;
-  const border = borderProp ?? tokens.defaults.border;
-  const safeAreaInsetTop = safeAreaInsetTopProp ?? fixed;
-  const background = backgroundProp ?? tokens.colors.background;
+  const leftArrow = leftArrP ?? tokens.defaults.leftArrow;
+  const fixed = fixedP ?? tokens.defaults.fixed;
+  const placeholder = placeP ?? tokens.defaults.placeholder;
+  const zIndex = zIdxP ?? tokens.defaults.zIndex;
+  const border = borderP ?? tokens.defaults.border;
+  const safeAreaInsetTop = safeTopP ?? fixed;
+  const background = bgP ?? tokens.colors.background;
   const handlePressLeft = onPressLeft ?? onClickLeft;
   const handlePressRight = onPressRight ?? onClickRight;
   const [height, setHeight] = useState(tokens.sizing.height);
   const enablePlaceholder = fixed && placeholder;
   const handleLayout = useCallback(event => {
     if (!enablePlaceholder) return;
-    const nextHeight = event.nativeEvent.layout.height;
-    setHeight(prev => Math.abs(prev - nextHeight) < 0.5 ? prev : nextHeight);
+    const nextH = event.nativeEvent.layout.height;
+    setHeight(prev => Math.abs(prev - nextH) < 0.5 ? prev : nextH);
   }, [enablePlaceholder]);
   const resolvedColor = tintColor ?? tokens.colors.text;
   const sideColor = tintColor ?? tokens.colors.icon;
@@ -94,10 +94,11 @@ const NavBarBaseImpl = props => {
     if (!hasAction) return /*#__PURE__*/React.createElement(View, {
       style: tokens.layout.sidePlaceholder
     });
-    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, sideIcon, isRenderable(sideText) ? isText(sideText) ? /*#__PURE__*/React.createElement(Text, {
+    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, isRenderable(sideIcon) ? sideIcon : null, isRenderable(sideText) ? isText(sideText) ? /*#__PURE__*/React.createElement(Text, {
       numberOfLines: 1,
       style: [tokens.layout.sideText, {
-        color: sideColor
+        color: sideColor,
+        fontFamily: tokens.typography.fontFamily
       }]
     }, sideText) : sideText : null);
     const sideStyles = [tokens.layout.side, !isLeft && tokens.layout.rightAlign, sideStyle];
@@ -120,12 +121,14 @@ const NavBarBaseImpl = props => {
     style: tokens.layout.titleWrapper
   }, isRenderable(title) && renderTextOrNode(title, [tokens.layout.title, {
     color: resolvedColor,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.titleSize,
     fontWeight: tokens.typography.titleWeight
   }, titleStyle], {
     numberOfLines: 1
   }), isRenderable(description) && renderTextOrNode(description, [tokens.layout.description, {
     color: tintColor ?? tokens.colors.description,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.descriptionSize
   }, descriptionStyle], {
     numberOfLines: 1

package/dist/es/components/nav-bar/tokens.js

@@ -2,7 +2,8 @@ import { createComponentTokensHook } from '../../design-system';
 export const createNavBarTokens = ({
   palette,
   spacing,
-  fontSize
+  fontSize,
+  typography
 }) => {
   return {
     defaults: {
@@ -69,6 +70,7 @@ export const createNavBarTokens = ({
       icon: palette.default[700]
     },
     typography: {
+      fontFamily: typography.fontFamily,
       titleSize: fontSize.lg,
       titleWeight: '600',
       descriptionSize: fontSize.sm

package/dist/es/components/notice-bar/NoticeBar.js

@@ -66,8 +66,8 @@ const NoticeBarImpl = props => {
   const verticalItems = useMemo(() => {
     if (!isVertical) return [];
     if (items && items.length) return items;
-    const childArray = React.Children.toArray(children);
-    if (childArray.length) return childArray;
+    const arr = React.Children.toArray(children);
+    if (arr.length) return arr;
     return text !== undefined ? [text] : [];
   }, [children, isVertical, items, text]);
   const hasVerticalLoop = !reducedMotion && isVertical && verticalItems.length > 1;
@@ -194,6 +194,7 @@ const NoticeBarImpl = props => {
     if (!isVertical || verticalTrackItems.length === 0) return null;
     if (!hasVerticalLoop) return renderTextOrNode(verticalTrackItems[0], [S.text, {
       color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize
     }], {
       numberOfLines: 1,
@@ -218,12 +219,13 @@ const NoticeBarImpl = props => {
       style: S.vItem
     }, renderTextOrNode(item, [S.text, {
       color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize
     }], {
       numberOfLines: 1,
       ...restTextProps
     })))));
-  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
+  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontFamily, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
   const handleContainerLayout = useCallback(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
   }, [setContainerWidthSafe]);
@@ -258,6 +260,7 @@ const NoticeBarImpl = props => {
     onLayout: handleTextLayout,
     style: [S.text, S.scrollText, {
       color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize,
       transform: [{
         translateX
@@ -279,6 +282,7 @@ const NoticeBarImpl = props => {
     onLayout: handleTextLayout,
     style: [S.text, {
       color: resolvedColor,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize
     }, wrapable && S.wrapText],
     numberOfLines: wrapable ? undefined : 1,

package/dist/es/components/notice-bar/tokens.js

@@ -4,7 +4,8 @@ export const createNoticeBarTokens = foundations => {
     palette,
     fontSize,
     spacing,
-    radii
+    radii,
+    typography
   } = foundations;
   return {
     colors: {
@@ -12,6 +13,7 @@ export const createNoticeBarTokens = foundations => {
       background: palette.warning[50]
     },
     typography: {
+      fontFamily: typography.fontFamily,
       fontSize: fontSize.sm
     },
     layout: {

package/dist/es/components/notify/Notify.js

@@ -213,13 +213,14 @@ const NotifyContentImpl = props => {
     }]
   }, hasMessage && (isText(message) ? renderTextOrNode(message, [tokens.layout.text, {
     color: resolvedTextColor,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.fontSize,
     lineHeight: tokens.typography.lineHeight
   }, textStyle]) : message))))), position === 'bottom' && /*#__PURE__*/React.createElement(View, {
     style: {
       height: safeAreaBottomInset
     }
-  })), [accessibilityRole, animatedValue, contentHeight, handleLayout, hasMessage, interactive, message, offset, resolvedBackground, resolvedTextColor, safeAreaBottomInset, safeAreaTopValue, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding, position]);
+  })), [accessibilityRole, animatedValue, contentHeight, handleLayout, hasMessage, interactive, message, offset, resolvedBackground, resolvedTextColor, safeAreaBottomInset, safeAreaTopValue, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding, position]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(View, {
     testID: "rv-notify",

package/dist/es/components/notify/imperative.js

@@ -21,16 +21,16 @@ const typeDefaults = new Map();
 const parseOptions = input => /*#__PURE__*/React.isValidElement(input) || isText(input) ? {
   message: input
 } : input ?? {};
-const mergeOptions = (input, fallbackType) => {
-  const type = input.type ?? fallbackType;
-  const merged = {
+const mergeOptions = (input, fallbackT) => {
+  const t = input.type ?? fallbackT;
+  const m = {
     ...currentOptions,
-    ...typeDefaults.get(type),
+    ...typeDefaults.get(t),
     ...input,
-    type
+    type: t
   };
-  merged.duration = merged.duration ?? 3000;
-  return merged;
+  m.duration = m.duration ?? 3000;
+  return m;
 };
 const removeNotify = key => {
   Portal.remove(key);
@@ -69,9 +69,9 @@ const NotifyPortal = ({
     onClosed: handleClosed
   }));
 };
-const showNotify = (input, fallbackType = 'primary') => {
-  const opts = mergeOptions(parseOptions(input), fallbackType);
-  if (!allowMultiple) activeKeys.forEach(key => closeNotify(key));
+const showNotify = (input, fallbackT = 'primary') => {
+  const opts = mergeOptions(parseOptions(input), fallbackT);
+  if (!allowMultiple) activeKeys.forEach(k => closeNotify(k));
   const key = Portal.add(null);
   notifyOptions.set(key, opts);
   Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
@@ -83,22 +83,22 @@ const showNotify = (input, fallbackType = 'primary') => {
     const prev = notifyOptions.get(key);
     if (!prev) return;
     const parsed = parseOptions(isFunction(next) ? next(prev) : next);
-    const nextType = parsed.type ?? prev.type ?? fallbackType;
-    const merged = {
+    const nextT = parsed.type ?? prev.type ?? fallbackT;
+    const m = {
       ...prev,
       ...parsed,
-      type: nextType
+      type: nextT
     };
-    if ('duration' in parsed && parsed.duration == null) merged.duration = baseOptions.duration ?? 3000;
-    notifyOptions.set(key, merged);
+    if ('duration' in parsed && parsed.duration == null) m.duration = baseOptions.duration ?? 3000;
+    notifyOptions.set(key, m);
     Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
       id: key,
-      options: merged
+      options: m
     }));
   };
   return {
     clear: () => closeNotify(key),
-    update: next => config(next),
+    update: n => config(n),
     config
   };
 };

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

@@ -51,6 +51,7 @@ export const createNotifyTokens = foundations => ({
     }
   },
   typography: {
+    fontFamily: foundations.typography.fontFamily,
     fontSize: foundations.fontSize.sm,
     lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier)
   },