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

package/dist/index.es.web.js

@@ -3107,6 +3107,7 @@ var getTypographyTypeWithAncestorValue = function (type, typographyTypeInContext
 var _excluded$P = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
+var TypographyVariantContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
@@ -3202,7 +3203,7 @@ function getUniversalFontWeight(type, variant, typographyFamily) {
       ThrowErrorIfInvalidVariant(variant, value, 'regular');
       resolvedVariant = 'regular';
     }
-    webFontWeight[typeName] = resolvedVariant;
+    webFontWeight[typeName] = "".concat(typographyFamily, ".").concat(resolvedVariant);
     nativeFontFamily[typeName] = "".concat(typographyFamily, ".").concat(resolvedVariant);
   });
   return {
@@ -3230,21 +3231,33 @@ var TypographyBase = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     color = _ref2.color,
     otherProps = _objectWithoutProperties(_ref2, _excluded$P);
   var sx = useSx();
+
+  // ancestors
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
   var typographyTypeInContext = useContext(TypographyTypeContext);
-  var defaultColor = useTypographyDefaultColor();
+  var typographyVariantInContext = useContext(TypographyVariantContext);
+
+  // family
   var hasTypographyAncestor = typographyFamilyInContext !== null;
   var typographyType = getTypographyTypeWithAncestorValue(type, typographyTypeInContext);
   var baseOrDefaultToBody = (_typographyType$base = typographyType.base) !== null && _typographyType$base !== void 0 ? _typographyType$base : 'body-m';
   var typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
+
+  // size
   var fontSizeForNativeBase = createNativeBaseFontSize(_objectSpread(_objectSpread({}, type), {}, {
     base: baseOrDefaultToBody
   }));
+
+  // weight
+
   var _getUniversalFontWeig = getUniversalFontWeight(_objectSpread(_objectSpread({}, type), {}, {
       base: baseOrDefaultToBody
-    }), variant, typographyFamily),
+    }), !variant && typographyType === typographyTypeInContext ? typographyVariantInContext : variant, typographyFamily),
     webFontWeight = _getUniversalFontWeig.webFontWeight,
     nativeFontFamily = _getUniversalFontWeig.nativeFontFamily;
+
+  // color
+  var defaultColor = useTypographyDefaultColor();
   var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
   var currentColorValue = getTypographyColorValue(currentColor);
   var colorStyles = sx({
@@ -3270,11 +3283,14 @@ var TypographyBase = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     fontFamily: nativeFontFamily,
     textTransform: typographyFamily === 'contentCaps' ? 'uppercase' : undefined
   }, colorStyles), otherProps));
-  var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
-    value: typographyFamily,
-    children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
-      value: typographyType,
-      children: text
+  var 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, {
@@ -4138,9 +4154,10 @@ function ModalBehaviour(_ref2) {
 }
 ModalBehaviour.CloseButton = CloseButton$1;
 
-function Overlay(_ref) {
+var Overlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onPress = _ref.onPress;
   return /*#__PURE__*/jsx(Pressable, {
+    ref: ref,
     accessibilityRole: "none",
     position: "absolute",
     top: "0",
@@ -4150,10 +4167,10 @@ function Overlay(_ref) {
     backgroundColor: "kitt.overlay.dark",
     onPress: onPress
   });
-}
+});
 
-function CardModalRotationContainer(props) {
-  return /*#__PURE__*/jsx(View, _objectSpread({
+var CardModalRotationContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: "kitt.cardModal.overlayPadding.horizontal",
     paddingY: "kitt.cardModal.overlayPadding.vertical",
     maxWidth: "kitt.cardModal.maxWidthWithPadding",
@@ -4162,8 +4179,10 @@ function CardModalRotationContainer(props) {
     _web: {
       maxHeight: '100svh'
     }
-  }, props));
-}
+  }, props), {}, {
+    ref: ref
+  }));
+});
 
 var _excluded$J = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
@@ -4205,6 +4224,10 @@ function CardModalAnimation(_ref) {
     onExited = _ref.onExited,
     onClose = _ref.onClose,
     props = _objectWithoutProperties(_ref, _excluded$J);
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  var overlayRef = useRef(null);
+  var contentRef = useRef(null);
   var theme = useTheme();
   var animation = theme.kitt.cardModal.animation;
   var sharedProps = {
@@ -4216,12 +4239,15 @@ function CardModalAnimation(_ref) {
     height: "100%",
     justifyContent: "center",
     children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
       classNames: opacityClassNames$2,
       children: /*#__PURE__*/jsx(Overlay, {
+        ref: overlayRef,
         onPress: onClose
       })
     })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
       classNames: contentAnimationClassNames$1,
       onEnter: onEnter,
@@ -4229,6 +4255,7 @@ function CardModalAnimation(_ref) {
       onExit: onExit,
       onExited: onExited,
       children: /*#__PURE__*/jsx(CardModalRotationContainer, {
+        ref: contentRef,
         alignItems: "center",
         margin: "auto",
         children: children
@@ -4799,6 +4826,10 @@ function DialogModalAnimation(_ref) {
     onExited = _ref.onExited,
     onClose = _ref.onClose,
     props = _objectWithoutProperties(_ref, _excluded$C);
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  var overlayRef = useRef(null);
+  var contentRef = useRef(null);
   var theme = useTheme();
   var animation = theme.kitt.dialogModal.animation;
   var sharedProps = {
@@ -4810,12 +4841,15 @@ function DialogModalAnimation(_ref) {
     height: "100%",
     justifyContent: "center",
     children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
       classNames: opacityClassNames$1,
       children: /*#__PURE__*/jsx(Overlay, {
+        ref: overlayRef,
         onPress: onClose
       })
     })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
       classNames: contentAnimationClassNames,
       onEnter: onEnter,
@@ -4823,6 +4857,7 @@ function DialogModalAnimation(_ref) {
       onExit: onExit,
       onExited: onExited,
       children: /*#__PURE__*/jsx(View, {
+        ref: contentRef,
         alignItems: "center",
         paddingX: "kitt.dialogModal.overlayPadding.horizontal",
         paddingY: "kitt.dialogModal.overlayPadding.vertical",
@@ -7577,6 +7612,10 @@ function FullscreenModalAnimation(_ref) {
     onExited = _ref.onExited,
     onClose = _ref.onClose,
     props = _objectWithoutProperties(_ref, _excluded$i);
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  var overlayRef = useRef(null);
+  var contentRef = useRef(null);
   var theme = useTheme();
   var animation = theme.kitt.fullscreenModal.animation;
   var sharedProps = {
@@ -7586,19 +7625,25 @@ function FullscreenModalAnimation(_ref) {
   };
   return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
       classNames: opacityClassNames,
       children: /*#__PURE__*/jsx(Overlay, {
+        ref: overlayRef,
         onPress: onClose
       })
     })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
       classNames: slideInClassNames,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
       onExited: onExited,
-      children: children
+      children: /*#__PURE__*/jsx(View, {
+        ref: contentRef,
+        children: children
+      })
     }))]
   }));
 }
@@ -8358,7 +8403,7 @@ var getIconButtonColor = function (messageType) {
   }
 };
 
-function BaseMessage(_ref) {
+var BaseMessage = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'info' : _ref$type,
     children = _ref.children,
@@ -8368,6 +8413,7 @@ function BaseMessage(_ref) {
     onDismiss = _ref.onDismiss;
   var color = getColorByType(type);
   return /*#__PURE__*/jsxs(HStack, {
+    ref: ref,
     alignItems: "flex-start",
     justifyContent: "space-between",
     minHeight: "kitt.feedbackMessage.minHeight",
@@ -8409,7 +8455,7 @@ function BaseMessage(_ref) {
       })
     }) : null]
   });
-}
+});
 
 function Message(_ref) {
   var _ref$type = _ref.type,
@@ -10380,17 +10426,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: 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: theme.typography.types.contentCaps.fontWeight.bold
       }
     },
@@ -11150,13 +11198,14 @@ NavigationBottomSheet.Header = NavigationBottomSheetHeader;
 NavigationBottomSheet.Body = NavigationBottomSheetBody;
 NavigationBottomSheet.Footer = NavigationBottomSheetFooter;
 
-function Notification(_ref) {
+var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var type = _ref.type,
     children = _ref.children,
     centeredText = _ref.centeredText,
     insets = _ref.insets,
     onDismiss = _ref.onDismiss;
   return /*#__PURE__*/jsx(BaseMessage, {
+    ref: ref,
     hasNoRadius: true,
     type: type,
     centeredText: centeredText,
@@ -11164,7 +11213,7 @@ function Notification(_ref) {
     onDismiss: onDismiss,
     children: children
   });
-}
+});
 
 var AnimatedCircle = Animated$1.createAnimatedComponent(Circle$1);
 function AnimatedLoaderCircle(_ref) {
@@ -11420,6 +11469,9 @@ function Picker(_ref) {
     isItemsWidthFixed = _ref.isItemsWidthFixed,
     onChange = _ref.onChange,
     onClose = _ref.onClose;
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  var nodeRef = useRef(null);
   if ((process.env.NODE_ENV !== "production") && sourceValue !== undefined && !syncStateWithSourceValue) {
     throw new Error('Picker: sourceValue prop should only be used with syncStateWithSourceValue prop');
   }
@@ -11528,6 +11580,7 @@ function Picker(_ref) {
         },
         children: /*#__PURE__*/jsx(CSSTransition, {
           unmountOnExit: true,
+          nodeRef: nodeRef,
           timeout: 300,
           "in": isOpen,
           classNames: {
@@ -11537,6 +11590,7 @@ function Picker(_ref) {
             exitActive: exitActive
           },
           children: /*#__PURE__*/jsx(View, {
+            ref: nodeRef,
             paddingY: "kitt.2",
             children: childrenArray.map(function (child, index) {
               var currentValue = items[index];