@ornikar/kitt-universal 29.4.1-canary.ee3a5de11ca14467578621a40a921148838ee329.0 → 29.4.2-canary.0e4f130cb45a177a7fdd9a15817918e986eb8cd4.0

package/dist/index-metro.es.ios.js

@@ -3069,6 +3069,7 @@ const getTypographyTypeWithAncestorValue = (type, typographyTypeInContext) => {
 const _excluded$R = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 const TypographyFamilyContext = /*#__PURE__*/createContext(null);
 const TypographyTypeContext = /*#__PURE__*/createContext(null);
+const TypographyVariantContext = /*#__PURE__*/createContext(undefined);
 const TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
@@ -3166,7 +3167,7 @@ function getUniversalFontWeight(type, variant, typographyFamily) {
       ThrowErrorIfInvalidVariant(variant, value, 'regular');
       resolvedVariant = 'regular';
     }
-    webFontWeight[typeName] = resolvedVariant;
+    webFontWeight[typeName] = `${typographyFamily}.${resolvedVariant}`;
     nativeFontFamily[typeName] = `${typographyFamily}.${resolvedVariant}`;
   });
   return {
@@ -3195,22 +3196,34 @@ const TypographyBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     } = _ref,
     otherProps = _objectWithoutProperties(_ref, _excluded$R);
   const sx = useSx();
+
+  // ancestors
   const typographyFamilyInContext = useContext(TypographyFamilyContext);
   const typographyTypeInContext = useContext(TypographyTypeContext);
-  const defaultColor = useTypographyDefaultColor();
+  const typographyVariantInContext = useContext(TypographyVariantContext);
+
+  // family
   const hasTypographyAncestor = typographyFamilyInContext !== null;
   const typographyType = getTypographyTypeWithAncestorValue(type, typographyTypeInContext);
   const baseOrDefaultToBody = (_typographyType$base = typographyType.base) !== null && _typographyType$base !== void 0 ? _typographyType$base : 'body-m';
   const typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
+
+  // size
   const fontSizeForNativeBase = createNativeBaseFontSize(_objectSpread(_objectSpread({}, type), {}, {
     base: baseOrDefaultToBody
   }));
+
+  // weight
+
   const {
     webFontWeight,
     nativeFontFamily
   } = getUniversalFontWeight(_objectSpread(_objectSpread({}, type), {}, {
     base: baseOrDefaultToBody
-  }), variant, typographyFamily);
+  }), !variant && typographyType === typographyTypeInContext ? typographyVariantInContext : variant, typographyFamily);
+
+  // color
+  const defaultColor = useTypographyDefaultColor();
   const currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
   const currentColorValue = getTypographyColorValue(currentColor);
   const colorStyles = sx({
@@ -3233,11 +3246,14 @@ const TypographyBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontFamily: nativeFontFamily,
     textTransform: typographyFamily === 'contentCaps' ? 'uppercase' : undefined
   }, colorStyles), otherProps));
-  const content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
-    value: typographyFamily,
-    children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
-      value: typographyType,
-      children: text
+  const content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyVariantContext.Provider, {
+    value: variant,
+    children: /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
+      value: typographyFamily,
+      children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
+        value: typographyType,
+        children: text
+      })
     })
   }) : text;
   return color ? /*#__PURE__*/jsx(TypographyColorContext.Provider, {
@@ -4133,10 +4149,11 @@ function ModalBehaviour({
 }
 ModalBehaviour.CloseButton = CloseButton$1;
 
-function Overlay({
+const Overlay = /*#__PURE__*/forwardRef(({
   onPress
-}) {
+}, ref) => {
   return /*#__PURE__*/jsx(Pressable, {
+    ref: ref,
     accessibilityRole: "none",
     position: "absolute",
     top: "0",
@@ -4146,10 +4163,10 @@ function Overlay({
     backgroundColor: "kitt.overlay.dark",
     onPress: onPress
   });
-}
+});
 
-function CardModalRotationContainer(props) {
-  return /*#__PURE__*/jsx(View, _objectSpread({
+const CardModalRotationContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: "kitt.cardModal.overlayPadding.horizontal",
     paddingY: "kitt.cardModal.overlayPadding.vertical",
     maxWidth: "kitt.cardModal.maxWidthWithPadding",
@@ -4158,8 +4175,10 @@ function CardModalRotationContainer(props) {
     _web: {
       maxHeight: '100svh'
     }
-  }, props));
-}
+  }, props), {}, {
+    ref: ref
+  }));
+});
 
 function NativeOpacityAnimation$2({
   visible,
@@ -8983,22 +9002,23 @@ const getIconButtonColor = messageType => {
   }
 };
 
-function BaseMessage({
-  type = 'info',
+const BaseMessage = /*#__PURE__*/forwardRef(({
+  type: _type = 'info',
   children,
   hasNoRadius,
   centeredText,
   insets,
   onDismiss
-}) {
-  const color = getColorByType(type);
+}, ref) => {
+  const color = getColorByType(_type);
   return /*#__PURE__*/jsxs(HStack, {
+    ref: ref,
     alignItems: "flex-start",
     justifyContent: "space-between",
     minHeight: "kitt.feedbackMessage.minHeight",
     paddingTop: insets === null || insets === void 0 ? void 0 : insets.top,
     borderRadius: hasNoRadius ? undefined : 'kitt.2',
-    backgroundColor: `kitt.feedbackMessage.${type}.backgroundColor`,
+    backgroundColor: `kitt.feedbackMessage.${_type}.backgroundColor`,
     children: [/*#__PURE__*/jsxs(HStack, {
       flexGrow: 1,
       flexShrink: 1,
@@ -9011,7 +9031,7 @@ function BaseMessage({
         children: /*#__PURE__*/jsx(Icon, {
           color: color,
           icon: /*#__PURE__*/jsx(IconContent, {
-            type: type,
+            type: _type,
             color: color
           })
         })
@@ -9029,12 +9049,12 @@ function BaseMessage({
       marginRight: "kitt.2",
       marginLeft: "kitt.5",
       children: /*#__PURE__*/jsx(CloseIconButton, {
-        color: getIconButtonColor(type),
+        color: getIconButtonColor(_type),
         onPress: onDismiss
       })
     }) : null]
   });
-}
+});
 
 function Message({
   type = 'info',
@@ -11003,17 +11023,19 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
     fontWeights: {
       headings: {
         regular: theme.typography.types.headings.fontWeight.regular,
+        semibold: theme.typography.types.headings.fontWeight.semibold,
         bold: theme.typography.types.headings.fontWeight.bold
       },
       bodies: {
-        regular: theme.typography.types.bodies.fontWeight.regular
-        // TODO [https://ornikar.atlassian.net/browse/CME-767] This quick fix should be replaced by a 700 in every case, and native font weights should be handled by expo-fonts
+        regular: theme.typography.types.bodies.fontWeight.regular,
+        // TODO [expo@>=53]: Check if still needed with new expo-fonts version
+        bold: Platform.OS === 'android' ? 400 : theme.typography.types.bodies.fontWeight.bold
       },
       labels: {
         semibold: theme.typography.types.labels.fontWeight.semibold
       },
       contentCaps: {
-        // TODO [https://ornikar.atlassian.net/browse/CME-767] This quick fix should be replaced by a 700 in every case, and native font weights should be handled by expo-fonts
+        // TODO [expo@>=53]: Check if still needed with new expo-fonts version
         bold: Platform.OS === 'android' ? 400 : theme.typography.types.contentCaps.fontWeight.bold
       }
     },
@@ -11755,14 +11777,15 @@ NavigationModal.Body = Body;
 NavigationModal.Footer = Footer;
 NavigationModal.ModalBehaviour = NavigationModalBehaviour;
 
-function Notification({
+const Notification = /*#__PURE__*/forwardRef(({
   type,
   children,
   centeredText,
   insets,
   onDismiss
-}) {
+}, ref) => {
   return /*#__PURE__*/jsx(BaseMessage, {
+    ref: ref,
     hasNoRadius: true,
     type: type,
     centeredText: centeredText,
@@ -11770,7 +11793,7 @@ function Notification({
     onDismiss: onDismiss,
     children: children
   });
-}
+});
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle$1);
 function AnimatedLoaderCircle({