@ornikar/kitt-universal 2.3.0 → 3.0.0-beta.1

package/dist/index-node-14.17.cjs.js

@@ -2,34 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const _extends = require('@babel/runtime/helpers/extends');
 const kittIcons = require('@ornikar/kitt-icons');
-const React = require('react');
 const reactNative = require('react-native');
-const styled = require('styled-components');
+const styled = require('styled-components/native');
+const react = require('react');
+const jsxRuntime = require('react/jsx-runtime');
+const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const Animated = require('react-native-reanimated');
+const react$1 = require('@linaria/react');
+const DateTimePicker = require('@react-native-community/datetimepicker');
+const reactIntl = require('react-intl');
+const reactNative$1 = require('@floating-ui/react-native');
 const addons = require('@storybook/addons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
-const _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
-
-const PrimitiveView = reactNative.View;
+const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
 
 function SpinningIcon({
   children
 }) {
-  const animationRef = React.useRef(new reactNative.Animated.Value(0));
+  const animationRef = react.useRef(new reactNative.Animated.Value(0));
   const rotation = animationRef.current.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '360deg']
   });
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (process.env.TESTS) return undefined;
     const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
       toValue: 1,
@@ -44,16 +46,17 @@ function SpinningIcon({
       return undefined;
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement(reactNative.Animated.View, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Animated.View, {
     style: {
       transform: [{
         rotate: rotation
       }]
-    }
-  }, children);
+    },
+    children: children
+  });
 }
 
-const IconContainer$2 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const IconContainer$2 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
@@ -72,118 +75,198 @@ function Icon({
   align,
   color
 }) {
-  const clonedIcon = /*#__PURE__*/React__default.cloneElement(icon, {
+  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/React__default.createElement(IconContainer$2, {
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$2, {
     align: align,
     size: size,
-    color: color
-  }, spin ? /*#__PURE__*/React__default.createElement(SpinningIcon, null, clonedIcon) : clonedIcon);
+    color: color,
+    children: spin ? /*#__PURE__*/jsxRuntime.jsx(SpinningIcon, {
+      children: clonedIcon
+    }) : clonedIcon
+  });
 }
 
-const PrimitiveText = reactNative.Text;
+const KittBreakpoints = {
+  /**
+   * min-width: 0
+   */
+  BASE: 0,
+
+  /**
+   * min-width: 480px
+   */
+  SMALL: 480,
+
+  /**
+   * min-width: 768px
+   */
+  MEDIUM: 768,
+
+  /**
+   * min-width: 1024px
+   */
+  LARGE: 1024,
+
+  /**
+   * min-width: 1280px
+   */
+  WIDE: 1280
+};
+const KittBreakpointsMax = {
+  /**
+   * max-width: 479px
+   */
+  BASE: KittBreakpoints.SMALL - 1,
+
+  /**
+   * max-width: 767px
+   */
+  SMALL: KittBreakpoints.MEDIUM - 1,
+
+  /**
+   * max-width: 1023px
+   */
+  MEDIUM: KittBreakpoints.LARGE - 1,
+
+  /**
+   * max-width: 1279px
+   */
+  LARGE: KittBreakpoints.WIDE - 1
+};
 
-const TypographyTypeContext = /*#__PURE__*/React.createContext(undefined);
-const TypographyColorContext = /*#__PURE__*/React.createContext('black');
+const IsHeaderTypographyContext = /*#__PURE__*/react.createContext(undefined);
+const TypographyColorContext = /*#__PURE__*/react.createContext('black');
 function useTypographyColor() {
-  return React.useContext(TypographyColorContext);
+  return react.useContext(TypographyColorContext);
 }
-const StyledTypography = /*#__PURE__*/styled__default(PrimitiveText).withConfig({
+const getTypographyTypeConfigKey = theme => {
+  const isMediumOrAbove = theme.responsive.matchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
+};
+
+const isTypeHeader = type => type.startsWith('header');
+
+const isTypographyHeader = (type, typographyIsHeaderInContext) => {
+  if (type) return isTypeHeader(type);
+  if (typographyIsHeaderInContext != null) return typographyIsHeaderInContext;
+  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
+};
+function getTypographyTypeConfig(type, theme) {
+  if (isTypographyHeader(type, undefined)) {
+    return theme.kitt.typography.types.headers.configs[type];
+  }
+
+  return theme.kitt.typography.types.bodies.configs[type];
+}
+const StyledTypography = /*#__PURE__*/styled__default.Text.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
 })(["", " ", ""], ({
   theme,
-  isHeader,
-  type,
-  variant
+  $isHeader,
+  $typeForCurrentWindowSize,
+  $variant
 }) => {
   const {
     headers,
     bodies
   } = theme.kitt.typography.types;
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
   return `
       /* type */
-      ${!type ? '' : `
-  font-family: ${isHeader ? headers.fontFamily[variant] : bodies.fontFamily[variant]};
-  font-size: ${isHeader ? headers.configs[type].baseAndSmall.fontSize : bodies.configs[type].baseAndSmall.fontSize};
-  line-height: ${isHeader ? headers.configs[type].baseAndSmall.lineHeight : bodies.configs[type].baseAndSmall.lineHeight};
+      ${!$typeForCurrentWindowSize ? '' : `
+  font-family: ${$isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant]};
+  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize};
+  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight};
     `}
 
     /* variant */
-    font-weight: ${isHeader ? headers.fontWeight : bodies.fontWeight[variant]};
-    font-style: ${isHeader ? headers.fontStyle : bodies.fontStyle[variant]};
+    font-weight: ${$isHeader ? headers.fontWeight : bodies.fontWeight[$variant]};
+    font-style: ${$isHeader ? headers.fontStyle : bodies.fontStyle[$variant]};
   `;
 }, ({
   theme,
-  color
-}) => !color ? '' : `
-  color: ${theme.kitt.typography.colors[color]};
-  text-decoration-color: ${theme.kitt.typography.colors[color]};
+  $color
+}) => !$color ? '' : `
+  color: ${theme.kitt.typography.colors[$color]};
+  text-decoration-color: ${theme.kitt.typography.colors[$color]};
   `);
-
-const isTypeHeader = type => type.startsWith('header');
-
-const isTypographyHeader = (base, typeInContext) => {
-  if (base) return isTypeHeader(base);
-  if (typeInContext) return isTypeHeader(typeInContext);
-  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
-};
-
+function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
+  const {
+    width
+  } = reactNative.useWindowDimensions();
+  if (large && width >= KittBreakpoints.LARGE) return large;
+  if (medium && width >= KittBreakpoints.MEDIUM) return medium;
+  if (small && width >= KittBreakpoints.SMALL) return small;
+  return base;
+}
 function Typography({
   accessibilityRole,
   base,
+  small,
+  medium,
+  large,
   variant,
   color,
   ...otherProps
 }) {
-  const typeInContext = React.useContext(TypographyTypeContext);
-  const isHeader = isTypographyHeader(base, typeInContext);
-  const nonNullableVariant = variant ?? (isHeader ? 'bold' : 'regular');
-  const colorWithDefaultToBlack = color ?? (typeInContext ? undefined : 'black');
-  const content = base ?
-  /*#__PURE__*/
-  // use the type and pass the type to the context for children
-  React__default.createElement(TypographyTypeContext.Provider, {
-    value: base
-  }, /*#__PURE__*/React__default.createElement(StyledTypography, _extends__default({
-    color: colorWithDefaultToBlack,
-    isHeader: isHeader,
-    type: base,
-    variant: nonNullableVariant,
-    accessibilityRole: accessibilityRole || undefined
-  }, otherProps))) : /*#__PURE__*/React__default.createElement(StyledTypography, _extends__default({
-    color: colorWithDefaultToBlack,
-    isHeader: isHeader,
-    variant: nonNullableVariant,
-    accessibilityRole: accessibilityRole || undefined
-  }, otherProps));
-  return color ? /*#__PURE__*/React__default.createElement(TypographyColorContext.Provider, {
-    value: color
-  }, content) : content;
+  const isHeaderTypographyInContext = react.useContext(IsHeaderTypographyContext);
+  const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  const isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
+  const nonNullableVariant = variant ?? (isHeader ? 'bold' : 'regular'); // if isHeaderTypographyInContext exists, it means we are inside another typography so we don't want to
+  // redefine the color, just inherit from it
+
+  const colorWithDefaultToBlack = color ?? (isHeaderTypographyInContext !== undefined ? undefined : 'black');
+  const content = base ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
+    value: isHeader,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+      $color: colorWithDefaultToBlack,
+      $isHeader: isHeader,
+      $typeForCurrentWindowSize: typeForCurrentWindowSize,
+      $variant: nonNullableVariant,
+      accessibilityRole: accessibilityRole || undefined,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+    $color: colorWithDefaultToBlack,
+    $isHeader: isHeader,
+    $variant: nonNullableVariant,
+    accessibilityRole: accessibilityRole || undefined,
+    ...otherProps
+  });
+  return color ? /*#__PURE__*/jsxRuntime.jsx(TypographyColorContext.Provider, {
+    value: color,
+    children: content
+  }) : content;
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/React__default.createElement(Typography, _extends__default({
-    accessibilityRole: null
-  }, props));
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    accessibilityRole: null,
+    ...props
+  });
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/React__default.createElement(Typography, _extends__default({
-    accessibilityRole: "paragraph"
-  }, props));
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    accessibilityRole: "paragraph",
+    ...props
+  });
 }
 
 const createHeading = (level, defaultBase) => {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/React__default.createElement(Typography, _extends__default({
+    return /*#__PURE__*/jsxRuntime.jsx(Typography, {
       accessibilityRole: "header",
-      base: defaultBase
-    }, props, {
+      base: defaultBase,
+      ...props,
       accessibilityLevel: level
-    }));
+    });
   }
 
   TypographyHeading.displayName = `TypographyHeading${level}`;
@@ -218,7 +301,7 @@ const getFirstCharacter = string => string ? string[0] : '';
 
 const getInitials = (firstname, lastname) => (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 
-const StyledAvatarView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Avatar__StyledAvatarView",
   componentId: "kitt-universal__sc-9miubv-0"
 })(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
@@ -241,7 +324,7 @@ function AvatarContent({
   light
 }) {
   if (src) {
-    return /*#__PURE__*/React__default.createElement(reactNative.Image, {
+    return /*#__PURE__*/jsxRuntime.jsx(reactNative.Image, {
       source: {
         uri: src
       },
@@ -253,15 +336,16 @@ function AvatarContent({
   }
 
   if (firstname && lastname) {
-    return /*#__PURE__*/React__default.createElement(Typography.Text, {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
       base: "body-small",
       variant: "bold",
-      color: light ? 'black' : 'white'
-    }, getInitials(firstname, lastname));
+      color: light ? 'black' : 'white',
+      children: getInitials(firstname, lastname)
+    });
   }
 
-  return /*#__PURE__*/React__default.createElement(Icon, {
-    icon: /*#__PURE__*/React__default.createElement(kittIcons.UserIcon, null),
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
     color: light ? 'black' : 'white',
     size: size / 2
   });
@@ -271,19 +355,20 @@ function Avatar({
   size = 40,
   ...rest
 }) {
-  return /*#__PURE__*/React__default.createElement(StyledAvatarView, _extends__default({}, rest, {
-    size: size
-  }), /*#__PURE__*/React__default.createElement(AvatarContent, _extends__default({}, rest, {
-    size: size
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, { ...rest,
+    size: size,
+    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, { ...rest,
+      size: size
+    })
+  });
 }
 
 function TypographyIconInheritColor(props) {
   const color = useTypographyColor();
   const theme = /*#__PURE__*/styled.useTheme();
-  return /*#__PURE__*/React__default.createElement(Icon, _extends__default({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, { ...props,
     color: theme.kitt.typography.colors[color]
-  }));
+  });
 }
 
 function TypographyIconSpecifiedColor({
@@ -291,9 +376,9 @@ function TypographyIconSpecifiedColor({
   ...otherProps
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
-  return /*#__PURE__*/React__default.createElement(Icon, _extends__default({}, otherProps, {
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, { ...otherProps,
     color: theme.kitt.typography.colors[color]
-  }));
+  });
 }
 
 function TypographyIcon({
@@ -301,12 +386,14 @@ function TypographyIcon({
   ...otherProps
 }) {
   if (color) {
-    return /*#__PURE__*/React__default.createElement(TypographyIconSpecifiedColor, _extends__default({
-      color: color
-    }, otherProps));
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIconSpecifiedColor, {
+      color: color,
+      ...otherProps
+    });
   }
 
-  return /*#__PURE__*/React__default.createElement(TypographyIconInheritColor, otherProps);
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIconInheritColor, { ...otherProps
+  });
 }
 
 const getTextColorByType = (type, isPressed, disabled) => {
@@ -332,14 +419,14 @@ const ButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
   displayName: "ButtonContent__ButtonText",
   componentId: "kitt-universal__sc-dnyw3n-0"
 })(["text-align:center;"]);
-const Content$1 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Content$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ButtonContent__Content",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], ({
   stretch,
   iconOnly
 }) => `${stretch || iconOnly ? 1 : 0} 1 auto`);
-const IconContainer$1 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ButtonContent__IconContainer",
   componentId: "kitt-universal__sc-dnyw3n-2"
 })(["", ""], ({
@@ -363,15 +450,16 @@ function ButtonIcon({
   iconPosition,
   testID
 }) {
-  return /*#__PURE__*/React__default.createElement(IconContainer$1, {
-    iconPosition: iconPosition
-  }, /*#__PURE__*/React__default.createElement(TypographyIcon, {
-    icon: icon,
-    spin: spin,
-    color: color,
-    size: size,
-    testID: testID
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+    iconPosition: iconPosition,
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      icon: icon,
+      spin: spin,
+      color: color,
+      size: size,
+      testID: testID
+    })
+  });
 }
 
 function ButtonContent({
@@ -399,33 +487,34 @@ function ButtonContent({
   }
 
   if (!children) {
-    return /*#__PURE__*/React__default.createElement(Content$1, {
+    return /*#__PURE__*/jsxRuntime.jsx(Content$1, {
       iconOnly: true,
-      stretch: stretch
-    }, /*#__PURE__*/React__default.createElement(TypographyIcon, _extends__default({}, sharedIconProps, {
-      icon: icon
-    })));
+      stretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, { ...sharedIconProps,
+        icon: icon
+      })
+    });
   }
 
-  return /*#__PURE__*/React__default.createElement(Content$1, {
-    stretch: stretch
-  }, icon && iconPosition === 'left' ? /*#__PURE__*/React__default.createElement(ButtonIcon, _extends__default({}, sharedIconProps, {
-    icon: icon,
-    iconPosition: iconPosition,
-    testID: "button-left-icon"
-  })) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
-    base: "body",
-    color: color,
-    variant: "bold"
-  }, children), icon && iconPosition === 'right' ? /*#__PURE__*/React__default.createElement(ButtonIcon, _extends__default({}, sharedIconProps, {
-    icon: icon,
-    iconPosition: iconPosition
-  })) : null);
+  return /*#__PURE__*/jsxRuntime.jsxs(Content$1, {
+    stretch: stretch,
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...sharedIconProps,
+      icon: icon,
+      iconPosition: iconPosition,
+      testID: "button-left-icon"
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(ButtonText, {
+      base: "body",
+      color: color,
+      variant: "bold",
+      children: children
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, { ...sharedIconProps,
+      icon: icon,
+      iconPosition: iconPosition
+    }) : null]
+  });
 }
 
-const PrimitivePressable = reactNative.Pressable;
-
-const ButtonPressable = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
+const ButtonPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "ButtonPressable",
   componentId: "kitt-universal__sc-7ckel6-0"
 })(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], ({
@@ -473,16 +562,16 @@ function Button({
   hrefAttrs,
   onPress
 }) {
-  const [isPressed, setIsPressed] = React.useState(false);
+  const [isPressed, setIsPressed] = react.useState(false);
   const sharedProps = {
     type,
     stretch,
     disabled
   };
-  return /*#__PURE__*/React__default.createElement(ButtonPressable // eslint-disable-next-line unicorn/expiring-todo-comments
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonPressable // eslint-disable-next-line unicorn/expiring-todo-comments
   // TODO: When designs are defined, update with the proper onPress styles to mimic TouchableHighlight
   // underlayColor={globalTheme.button[type].pressedBackgroundColor}
-  , _extends__default({}, sharedProps, {
+  , { ...sharedProps,
     isPressed: isPressed,
     accessibilityRole: "button",
     testID: testID,
@@ -490,15 +579,17 @@ function Button({
     hrefAttrs: hrefAttrs,
     onPress: onPress,
     onPressIn: () => setIsPressed(true),
-    onPressOut: () => setIsPressed(false)
-  }), /*#__PURE__*/React__default.createElement(ButtonContent, _extends__default({}, sharedProps, {
-    icon: icon,
-    iconPosition: iconPosition,
-    iconSpin: iconSpin
-  }), children));
+    onPressOut: () => setIsPressed(false),
+    children: /*#__PURE__*/jsxRuntime.jsx(ButtonContent, { ...sharedProps,
+      icon: icon,
+      iconPosition: iconPosition,
+      iconSpin: iconSpin,
+      children: children
+    })
+  });
 }
 
-const Container$5 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Container$6 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
@@ -518,9 +609,38 @@ function Card({
   children,
   type
 }) {
-  return /*#__PURE__*/React__default.createElement(Container$5, {
-    type: type
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(Container$6, {
+    type: type,
+    children: children
+  });
+}
+
+const StyledEmoji = /*#__PURE__*/styled__default.Image.withConfig({
+  displayName: "Emoji__StyledEmoji",
+  componentId: "kitt-universal__sc-ggl6wj-0"
+})(["width:", "px;height:", "px;"], ({
+  size
+}) => size, ({
+  size
+}) => size);
+function Emoji({
+  emoji,
+  size,
+  style
+}) {
+  const [emojiData] = react.useMemo(() => twemojiParser.parse(emoji, {
+    // on native plaforms, you can't display svg as Image
+    assetType: 'svg'
+  }), [emoji]);
+  if (!emojiData) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(StyledEmoji, {
+    size: size,
+    accessibilityLabel: emojiData.text,
+    source: {
+      uri: emojiData.url
+    },
+    style: style
+  });
 }
 
 const defaultOpenLinkBehavior = {
@@ -535,7 +655,7 @@ function ExternalLink({
   onPress,
   ...rest
 }) {
-  return /*#__PURE__*/React__default.createElement(Component, _extends__default({}, rest, {
+  return /*#__PURE__*/jsxRuntime.jsx(Component, { ...rest,
     onPress: () => {
       if (onPress) onPress();
       if (!href) return;
@@ -543,13 +663,13 @@ function ExternalLink({
       switch (openLinkBehavior.native) {
         case 'openInModal':
         case undefined:
-          reactNative.Linking.openURL(href).catch(err => {
+          WebBrowser.openBrowserAsync(href).catch(err => {
             console.error(`An error occurred while opening ${href}`, err);
           });
           break;
 
         case 'openBrowserApp':
-          WebBrowser.openBrowserAsync(href).catch(err => {
+          reactNative.Linking.openURL(href).catch(err => {
             console.error(`An error occurred while opening ${href}`, err);
           });
           break;
@@ -561,7 +681,7 @@ function ExternalLink({
 
       }
     }
-  }));
+  });
 }
 
 const getColorFromState = state => {
@@ -579,66 +699,19 @@ function InputFeedback({
   testID,
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(Typography.Text, {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
     base: "body-small",
     color: getColorFromState(state),
-    testID: testID
-  }, children);
+    testID: testID,
+    children: children
+  });
 }
 
-const KittBreakpoints = {
-  /**
-   * min-width: 0
-   */
-  BASE: 0,
-
-  /**
-   * min-width: 480px
-   */
-  SMALL: 480,
-
-  /**
-   * min-width: 768px
-   */
-  MEDIUM: 768,
-
-  /**
-   * min-width: 1024px
-   */
-  LARGE: 1024,
-
-  /**
-   * min-width: 1280px
-   */
-  WIDE: 1280
-};
-const KittBreakpointsMax = {
-  /**
-   * max-width: 479px
-   */
-  BASE: KittBreakpoints.SMALL - 1,
-
-  /**
-   * max-width: 767px
-   */
-  SMALL: KittBreakpoints.MEDIUM - 1,
-
-  /**
-   * max-width: 1023px
-   */
-  MEDIUM: KittBreakpoints.LARGE - 1,
-
-  /**
-   * max-width: 1279px
-   */
-  LARGE: KittBreakpoints.WIDE - 1
-};
-
-const FieldContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const FieldContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputField__FieldContainer",
   componentId: "kitt-universal__sc-13fkixs-0"
 })(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const FeedbackContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputField__FeedbackContainer",
   componentId: "kitt-universal__sc-13fkixs-1"
 })(["", ";"], ({
@@ -646,13 +719,13 @@ const FeedbackContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig
 }) => theme.responsive.ifWindowSizeMatches({
   minWidth: KittBreakpoints.SMALL
 }, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const FieldLabelContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputField__FieldLabelContainer",
   componentId: "kitt-universal__sc-13fkixs-2"
 })(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
   theme
 }) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const LabelContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputField__LabelContainer",
   componentId: "kitt-universal__sc-13fkixs-3"
 })(["margin-right:", "px;"], ({
@@ -664,12 +737,20 @@ function InputField({
   input,
   feedback
 }) {
-  return /*#__PURE__*/React__default.createElement(FieldContainer, null, label ? /*#__PURE__*/React__default.createElement(FieldLabelContainer, null, /*#__PURE__*/React__default.createElement(LabelContainer, null, label), labelFeedback) : null, input, feedback ? /*#__PURE__*/React__default.createElement(FeedbackContainer, null, feedback) : null);
+  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+        children: label
+      }), labelFeedback]
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
+      children: feedback
+    }) : null]
+  });
 }
 
 const useInputText = () => {
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+  const [isFocused, setIsFocused] = react.useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = react.useState(false);
   return {
     isFocused,
     handleInputFocus: () => setIsFocused(true),
@@ -691,7 +772,10 @@ const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";bor
   state
 }) => theme.kitt.forms.input.states[state].borderColor, ({
   theme
-}) => theme.kitt.typography.types.bodies.configs.body.baseAndSmall.fontSize, ({
+}) => {
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
+}, ({
   theme,
   state
 }) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color], ({
@@ -703,13 +787,17 @@ const Input = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
 })(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
   theme,
   multiline
-}) => !multiline && reactNative.Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
+}) => !multiline && "web" === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
   theme,
   multiline
-}) => !multiline && reactNative.Platform.OS === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight, ({
+}) => {
+  if (!multiline && "web" === 'ios') return 0;
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
+}, ({
   minHeight
 }) => minHeight);
-const Container$4 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputText__Container",
   componentId: "kitt-universal__sc-uke279-1"
 })(["margin-top:", ";margin-bottom:", ";"], ({
@@ -717,7 +805,7 @@ const Container$4 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 }) => theme.kitt.forms.input.marginTop, ({
   theme
 }) => theme.kitt.forms.input.marginBottom);
-const PasswordButtonContainer = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
+const PasswordButtonContainer = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "InputText__PasswordButtonContainer",
   componentId: "kitt-universal__sc-uke279-2"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], ({
@@ -759,7 +847,7 @@ const textContentTypeByType = {
   password: 'password',
   username: 'username'
 };
-const InputText = /*#__PURE__*/React.forwardRef(({
+const InputText = /*#__PURE__*/react.forwardRef(({
   id,
   minHeight = 0,
   type,
@@ -783,50 +871,55 @@ const InputText = /*#__PURE__*/React.forwardRef(({
     isDisabled: disabled,
     formState
   });
-  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement(Input, _extends__default({
-    ref: ref,
-    nativeID: id,
-    editable: !disabled,
-    keyboardType: keyboardTypeByTextInputType[type],
-    autoCompleteType: autoCompleteTypeByType[type],
-    autoCorrect: autoCorrectByType[type],
-    minHeight: minHeight,
-    textContentType: textContentTypeByType[type],
-    placeholderTextColor: theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor],
-    selectionColor: theme.kitt.forms.input.selectionColor,
-    secureTextEntry: type === 'password' && !isPasswordVisible
-  }, props, {
-    state: state,
-    onFocus: e => {
-      handleInputFocus();
-      if (onFocus) onFocus(e);
-    },
-    onBlur: e => {
-      handleInputBlur();
-      if (onBlur) onBlur(e);
-    }
-  })), type === 'password' && !disabled && /*#__PURE__*/React__default.createElement(PasswordButtonContainer, {
-    accessibilityRole: "button",
-    onPress: togglePasswordVisibility
-  }, /*#__PURE__*/React__default.createElement(TypographyIcon, {
-    icon: isPasswordVisible ? /*#__PURE__*/React__default.createElement(kittIcons.EyeIcon, null) : /*#__PURE__*/React__default.createElement(kittIcons.EyeOffIcon, null),
-    size: theme.kitt.forms.input.passwordButtonIconSize,
-    color: theme.kitt.forms.input.states[state].passwordButtonIconColor
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+      ref: ref,
+      nativeID: id,
+      editable: !disabled,
+      keyboardType: keyboardTypeByTextInputType[type],
+      autoCompleteType: autoCompleteTypeByType[type],
+      autoCorrect: autoCorrectByType[type],
+      minHeight: minHeight,
+      textContentType: textContentTypeByType[type],
+      placeholderTextColor: theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor],
+      selectionColor: theme.kitt.forms.input.selectionColor,
+      secureTextEntry: type === 'password' && !isPasswordVisible,
+      ...props,
+      state: state,
+      onFocus: e => {
+        handleInputFocus();
+        if (onFocus) onFocus(e);
+      },
+      onBlur: e => {
+        handleInputBlur();
+        if (onBlur) onBlur(e);
+      }
+    }), type === 'password' && !disabled && /*#__PURE__*/jsxRuntime.jsx(PasswordButtonContainer, {
+      accessibilityRole: "button",
+      onPress: togglePasswordVisibility,
+      children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+        icon: isPasswordVisible ? /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeOffIcon, {}),
+        size: theme.kitt.forms.input.passwordButtonIconSize,
+        color: theme.kitt.forms.input.states[state].passwordButtonIconColor
+      })
+    })]
+  });
 });
 
 function Label({
   htmlFor,
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(Typography.Text, {
-    base: "body"
-  }, reactNative.Platform.OS === 'web' ? /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: htmlFor
-  }, children) : children);
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    base: "body",
+    children: /*#__PURE__*/jsxRuntime.jsx("label", {
+      htmlFor: htmlFor,
+      children: children
+    })
+  });
 }
 
-const OuterRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const OuterRadio = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], ({
@@ -844,7 +937,7 @@ const OuterRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   theme,
   disabled
 }) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor);
-const SelectedOuterRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const SelectedOuterRadio = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Radio__SelectedOuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-1"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], ({
@@ -856,7 +949,7 @@ const SelectedOuterRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfi
 }) => theme.kitt.forms.radio.size, ({
   theme
 }) => theme.kitt.forms.radio.size / 2);
-const SelectedInnerRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const SelectedInnerRadio = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Radio__SelectedInnerRadio",
   componentId: "kitt-universal__sc-1mdgr2o-2"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], ({
@@ -868,7 +961,7 @@ const SelectedInnerRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfi
 }) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
 }) => theme.kitt.forms.radio.checked.innerSize / 2);
-const Container$3 = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
+const Container$4 = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -886,7 +979,7 @@ function Radio({
   disabled = false,
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(Container$3, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$4, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -894,27 +987,31 @@ function Radio({
     focusable: checked && !disabled,
     onPress: () => {
       onChange(value);
-    }
-  }, checked && !disabled ? /*#__PURE__*/React__default.createElement(SelectedOuterRadio, null, /*#__PURE__*/React__default.createElement(SelectedInnerRadio, null)) : /*#__PURE__*/React__default.createElement(OuterRadio, {
-    disabled: disabled
-  }), /*#__PURE__*/React__default.createElement(Text, {
-    base: "body",
-    color: disabled ? 'black-light' : 'black'
-  }, children));
+    },
+    children: [checked && !disabled ? /*#__PURE__*/jsxRuntime.jsx(SelectedOuterRadio, {
+      children: /*#__PURE__*/jsxRuntime.jsx(SelectedInnerRadio, {})
+    }) : /*#__PURE__*/jsxRuntime.jsx(OuterRadio, {
+      disabled: disabled
+    }), /*#__PURE__*/jsxRuntime.jsx(Text, {
+      base: "body",
+      color: disabled ? 'black-light' : 'black',
+      children: children
+    })]
+  });
 }
 
 function TextArea({ ...props
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
-  return /*#__PURE__*/React__default.createElement(InputText, _extends__default({
-    multiline: true
-  }, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    multiline: true,
+    ...props,
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
-  }));
+  });
 }
 
-const Body = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Body = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], ({
@@ -929,10 +1026,12 @@ const Body = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 function FullScreenModalBody({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(Body, null, children);
+  return /*#__PURE__*/jsxRuntime.jsx(Body, {
+    children: children
+  });
 }
 
-const SideContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const SideContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__SideContainer",
   componentId: "kitt-universal__sc-dfmxi1-0"
 })(["", ""], ({
@@ -952,7 +1051,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-const Header = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Header = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], ({
@@ -970,7 +1069,7 @@ const Header = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 }, ({
   theme
 }) => theme.kitt.fullScreenModal.header.borderColor);
-const HeaderContent = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const HeaderContent = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__HeaderContent",
   componentId: "kitt-universal__sc-dfmxi1-2"
 })(["", ";", ";justify-content:center;align-items:center;"], ({
@@ -1014,8 +1113,8 @@ function FullScreenModalHeader({
     top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const dimensions = reactNative.useWindowDimensions();
-  const [leftWidth, setLeftWidth] = React.useState(0);
-  const [rightWidth, setRightWidth] = React.useState(0);
+  const [leftWidth, setLeftWidth] = react.useState(0);
+  const [rightWidth, setRightWidth] = react.useState(0);
 
   const handleLayoutChange = (event, side) => {
     // Prevents react to nullify event on rerenders
@@ -1029,21 +1128,25 @@ function FullScreenModalHeader({
     setRightWidth(event.nativeEvent.layout.width);
   };
 
-  return /*#__PURE__*/React__default.createElement(Header, {
-    insetTop: reactNative.Platform.OS === 'ios' ? undefined : top
-  }, left ? /*#__PURE__*/React__default.createElement(SideContainer, {
-    onLayout: e => handleLayoutChange(e, 'left')
-  }, left) : null, /*#__PURE__*/React__default.createElement(HeaderContent, {
-    windowWidth: dimensions.width,
-    leftWidth: leftWidth,
-    rightWidth: rightWidth
-  }, children), right ? /*#__PURE__*/React__default.createElement(SideContainer, {
-    side: "right",
-    onLayout: e => handleLayoutChange(e, 'right')
-  }, right) : null);
-}
-
-const Container$2 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+  return /*#__PURE__*/jsxRuntime.jsxs(Header, {
+    insetTop: top,
+    children: [left ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
+      onLayout: e => handleLayoutChange(e, 'left'),
+      children: left
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(HeaderContent, {
+      windowWidth: dimensions.width,
+      leftWidth: leftWidth,
+      rightWidth: rightWidth,
+      children: children
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
+      side: "right",
+      onLayout: e => handleLayoutChange(e, 'right'),
+      children: right
+    }) : null]
+  });
+}
+
+const Container$3 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], ({
@@ -1052,13 +1155,71 @@ const Container$2 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 function FullScreenModal({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(Container$2, null, children);
+  return /*#__PURE__*/jsxRuntime.jsx(Container$3, {
+    children: children
+  });
 }
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-const PressableIconButton = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
-  displayName: "PressableIconButton",
+function StyleWebWrapper({
+  as,
+  children,
+  ...props
+}) {
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsxRuntime.jsx(as || 'div', { ...props,
+    children: children
+  });
+}
+
+// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
+// export function withTheme<Props extends { theme: DefaultTheme }, C>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme( // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+WrappedComponent) {
+  return function (props) {
+    const theme = /*#__PURE__*/styled.useTheme();
+    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      theme: theme,
+      ...props
+    });
+  };
+}
+
+const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "PressableIconButtonWebWrapper",
+  class: "p1nlccvg",
+  vars: {
+    "p1nlccvg-0": [({
+      theme
+    }) => theme.kitt.iconButton.scale.base.hover],
+    "p1nlccvg-1": [({
+      theme
+    }) => theme.breakpoints.min.mediumBreakpoint],
+    "p1nlccvg-2": [({
+      theme
+    }) => theme.kitt.iconButton.scale.medium.hover],
+    "p1nlccvg-3": [({
+      theme
+    }) => theme.kitt.iconButton.scale.base.active],
+    "p1nlccvg-4": [({
+      theme
+    }) => theme.kitt.iconButton.default.pressedBackgroundColor],
+    "p1nlccvg-5": [({
+      theme
+    }) => theme.kitt.iconButton.white.pressedBackgroundColor]
+  }
+}));
+const StyledPressableIconButton = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "PressableIconButton__StyledPressableIconButton",
   componentId: "kitt-universal__sc-1m6jo3s-0"
 })(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], ({
   theme
@@ -1068,20 +1229,13 @@ const PressableIconButton = /*#__PURE__*/styled__default(PrimitivePressable).wit
   theme
 }) => theme.kitt.iconButton.height, ({
   theme,
-  color,
   disabled
 }) => {
   const {
     iconButton
   } = theme.kitt;
-
-  if (reactNative.Platform.OS !== 'web') {
-    return undefined;
-  }
-
   const {
-    transition,
-    scale
+    transition
   } = iconButton;
 
   if (disabled) {
@@ -1092,33 +1246,19 @@ const PressableIconButton = /*#__PURE__*/styled__default(PrimitivePressable).wit
 
   return `
       transition: ${transition.property} ${transition.duration} ${transition.timingFunction};
-
-      &:hover,
-      .kitt-hover & {
-        @media (hover: none) and (pointer: coarse) {
-          transform: scale(${scale.base.hover});
-        }
-
-        @media(${theme.breakpoints.min.mediumBreakpoint}) {
-          transform: scale(${scale.medium.hover});
-        }
-      }
-
-      &:active,
-      .kitt-active & {
-        transform: scale(${scale.base.active});
-      }
-
-      &:hover,
-      .kitt-hover &,
-      &:focus,
-      .kitt-focus &,
-      &:active,
-      .kitt-active & {
-        background-color: ${color === 'white' ? iconButton.white.pressedBackgroundColor : iconButton.default.pressedBackgroundColor};
-      }
     `;
 });
+function PressableIconButton({
+  color,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    "data-color-white": color === 'white' ? true : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPressableIconButton, { ...props
+    })
+  });
+}
 
 const AnimatedIconButtonBackground = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
   displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground",
@@ -1166,7 +1306,7 @@ function PressableAnimatedContainer({
     };
     _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
     _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (55:41)";
+    _f.__location = "/home/chris/ornikar/kitt/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (54:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1200,14 +1340,14 @@ function PressableAnimatedContainer({
     };
     _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
     _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (61:39)";
+    _f.__location = "/home/chris/ornikar/kitt/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:39)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
 
     return _f;
   }());
-  return /*#__PURE__*/React__default.createElement(PressableIconButton, {
+  return /*#__PURE__*/jsxRuntime.jsx(PressableIconButton, {
     accessibilityRole: "button",
     disabled: disabled,
     color: color,
@@ -1217,23 +1357,25 @@ function PressableAnimatedContainer({
     },
     onPressOut: () => {
       pressed.value = false;
-    }
-  }, /*#__PURE__*/React__default.createElement(AnimatedViewContainer, {
-    style: disabled ? [{
-      transform: [{
-        scale: 1
-      }]
-    }] : [scaleStyles]
-  }, /*#__PURE__*/React__default.createElement(AnimatedIconButtonBackground, {
-    disabled: disabled,
-    color: color,
-    style: disabled ? [{
-      opacity: 1
-    }] : [opacityStyles]
-  }), children));
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(AnimatedViewContainer, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedIconButtonBackground, {
+        disabled: disabled,
+        color: color,
+        style: disabled ? [{
+          opacity: 1
+        }] : [opacityStyles]
+      }), children]
+    })
+  });
 }
 
-const IconButtonContentBorder = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const IconButtonContentBorder = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "IconButton__IconButtonContentBorder",
   componentId: "kitt-universal__sc-swelbf-0"
 })(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], ({
@@ -1254,12 +1396,13 @@ function IconButtonContent({
   color,
   icon
 }) {
-  return /*#__PURE__*/React__default.createElement(IconButtonContentBorder, {
-    disabled: disabled
-  }, /*#__PURE__*/React__default.createElement(TypographyIcon, {
-    color: disabled ? 'black-light' : color,
-    icon: icon
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx(IconButtonContentBorder, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      color: disabled ? 'black-light' : color,
+      icon: icon
+    })
+  });
 }
 
 function IconButton({
@@ -1268,18 +1411,19 @@ function IconButton({
   disabled,
   onPress
 }) {
-  return /*#__PURE__*/React__default.createElement(PressableAnimatedContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx(PressableAnimatedContainer, {
     color: color,
     disabled: disabled,
-    onPress: onPress
-  }, /*#__PURE__*/React__default.createElement(IconButtonContent, {
-    disabled: disabled,
-    color: color,
-    icon: icon
-  }));
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
+      disabled: disabled,
+      color: color,
+      icon: icon
+    })
+  });
 }
 
-const ContentView$1 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const ContentView$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -1287,10 +1431,12 @@ function ListItemContent({
   children,
   ...rest
 }) {
-  return /*#__PURE__*/React__default.createElement(ContentView$1, rest, children);
+  return /*#__PURE__*/jsxRuntime.jsx(ContentView$1, { ...rest,
+    children: children
+  });
 }
 
-const SideContainerView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const SideContainerView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
@@ -1306,11 +1452,13 @@ function ListItemSideContainer({
   side = 'left',
   ...rest
 }) {
-  return /*#__PURE__*/React__default.createElement(SideContainerView, _extends__default({
-    side: side
-  }, rest), children);
+  return /*#__PURE__*/jsxRuntime.jsx(SideContainerView, {
+    side: side,
+    ...rest,
+    children: children
+  });
 }
-const SideContentView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const SideContentView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItemSideContent__SideContentView",
   componentId: "kitt-universal__sc-1vajiw-1"
 })(["align-self:", ";"], ({
@@ -1321,12 +1469,14 @@ function ListItemSideContent({
   align = 'auto',
   ...rest
 }) {
-  return /*#__PURE__*/React__default.createElement(SideContentView, _extends__default({
-    align: align
-  }, rest), children);
+  return /*#__PURE__*/jsxRuntime.jsx(SideContentView, {
+    align: align,
+    ...rest,
+    children: children
+  });
 }
 
-const ContainerView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const ContainerView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], ({
@@ -1367,28 +1517,35 @@ function ListItem({
   onPress,
   ...rest
 }) {
-  const Wrapper = onPress ? PrimitivePressable : React.Fragment;
+  const Wrapper = onPress ? reactNative.Pressable : react.Fragment;
   const wrapperProps = onPress ? {
     accessibilityRole: 'button',
     onPress,
     ...rest
   } : undefined;
   const containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/React__default.createElement(Wrapper, wrapperProps, /*#__PURE__*/React__default.createElement(ContainerView, _extends__default({
-    withPadding: withPadding,
-    borders: borders
-  }, containerProps), left ? /*#__PURE__*/React__default.createElement(ListItemSideContainer, {
-    side: "left"
-  }, left) : null, /*#__PURE__*/React__default.createElement(ListItemContent, null, children), right ? /*#__PURE__*/React__default.createElement(ListItemSideContainer, {
-    side: "right"
-  }, right) : null));
+  return /*#__PURE__*/jsxRuntime.jsx(Wrapper, { ...wrapperProps,
+    children: /*#__PURE__*/jsxRuntime.jsxs(ContainerView, {
+      withPadding: withPadding,
+      borders: borders,
+      ...containerProps,
+      children: [left ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
+        side: "left",
+        children: left
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(ListItemContent, {
+        children: children
+      }), right ? /*#__PURE__*/jsxRuntime.jsx(ListItemSideContainer, {
+        side: "right",
+        children: right
+      }) : null]
+    })
+  });
 }
 ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
 function getActivityIndicatorSize(size) {
-  if (reactNative.Platform.OS === 'android') return size;
   return size < 36 ? 'small' : 'large';
 }
 
@@ -1398,7 +1555,7 @@ function Loader({
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
   const colorHex = theme.kitt.typography.colors[color];
-  return /*#__PURE__*/React__default.createElement(reactNative.ActivityIndicator, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.ActivityIndicator, {
     testID: "ActivityIndicator",
     color: colorHex,
     size: getActivityIndicatorSize(size)
@@ -1408,7 +1565,7 @@ function Loader({
 function LargeLoader({
   color = 'primary'
 }) {
-  return /*#__PURE__*/React__default.createElement(Loader, {
+  return /*#__PURE__*/jsxRuntime.jsx(Loader, {
     color: color,
     size: 60
   });
@@ -1416,7 +1573,7 @@ function LargeLoader({
 
 const xIconSize = 14;
 const mainIconSize = 20;
-const Container$1 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Message__Container",
   componentId: "kitt-universal__sc-c6400e-0"
 })(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], ({
@@ -1443,13 +1600,13 @@ const CloseContainer = /*#__PURE__*/styled__default(reactNative.TouchableOpacity
 }) => theme.kitt.spacing * 4, ({
   theme
 }) => theme.kitt.spacing);
-const IconContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const IconContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Message__IconContainer",
   componentId: "kitt-universal__sc-c6400e-2"
 })(["margin-right:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 4);
-const Content = /*#__PURE__*/styled__default(PrimitiveText).withConfig({
+const Content = /*#__PURE__*/styled__default.Text.withConfig({
   displayName: "Message__Content",
   componentId: "kitt-universal__sc-c6400e-3"
 })(["text-align:", ";flex:1;"], ({
@@ -1473,16 +1630,16 @@ const getColorByType = type => {
 function getIconContent(type) {
   switch (type) {
     case 'warning':
-      return /*#__PURE__*/React__default.createElement(kittIcons.AlertCircleIcon, null);
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertCircleIcon, {});
 
     case 'success':
-      return /*#__PURE__*/React__default.createElement(kittIcons.CheckIcon, null);
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckIcon, {});
 
     case 'danger':
-      return /*#__PURE__*/React__default.createElement(kittIcons.AlertTriangleIcon, null);
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertTriangleIcon, {});
 
     default:
-      return /*#__PURE__*/React__default.createElement(kittIcons.InfoIcon, null);
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.InfoIcon, {});
   }
 }
 
@@ -1495,30 +1652,37 @@ function Message({
   insets
 }) {
   const color = getColorByType(type);
-  return /*#__PURE__*/React__default.createElement(Container$1, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
     type: type,
     noRadius: noRadius,
-    insets: insets
-  }, !centeredText ? /*#__PURE__*/React__default.createElement(IconContainer, null, /*#__PURE__*/React__default.createElement(Icon, {
-    size: mainIconSize,
-    color: color,
-    icon: getIconContent(type)
-  })) : null, /*#__PURE__*/React__default.createElement(Content, {
-    type: type,
-    centeredText: centeredText
-  }, /*#__PURE__*/React__default.createElement(Typography.Text, {
-    base: "body-small",
-    color: color
-  }, children)), onDismiss ? /*#__PURE__*/React__default.createElement(CloseContainer, {
-    onPress: onDismiss
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    icon: /*#__PURE__*/React__default.createElement(kittIcons.XIcon, null),
-    size: xIconSize,
-    color: color
-  })) : null);
+    insets: insets,
+    children: [!centeredText ? /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        size: mainIconSize,
+        color: color,
+        icon: getIconContent(type)
+      })
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(Content, {
+      type: type,
+      centeredText: centeredText,
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: "body-small",
+        color: color,
+        children: children
+      })
+    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(CloseContainer, {
+      onPress: onDismiss,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+        size: xIconSize,
+        color: color
+      })
+    }) : null]
+  });
 }
 
-const OverlayPressable = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+const OverlayPressable = /*#__PURE__*/styled__default(reactNative.Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
   componentId: "kitt-universal__sc-1cz1gbr-0"
 })(({
@@ -1529,15 +1693,14 @@ const OverlayPressable = /*#__PURE__*/styled__default(PrimitivePressable).withCo
 function Overlay({
   onPress
 }) {
-  return /*#__PURE__*/React__default.createElement(OverlayPressable, {
+  return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
     accessibilityRole: "none",
-    onPress: onPress
-  }, /*#__PURE__*/React__default.createElement(PrimitiveView, null));
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {})
+  });
 }
 
-const PrimitiveScrollView = reactNative.ScrollView;
-
-const BodyView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const BodyView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Body__BodyView",
   componentId: "kitt-universal__sc-17fwpo4-0"
 })(["padding:", "px ", "px;"], ({
@@ -1548,10 +1711,14 @@ const BodyView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 function ModalBody({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(PrimitiveScrollView, null, /*#__PURE__*/React__default.createElement(BodyView, null, children));
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
+      children: children
+    })
+  });
 }
 
-const FooterView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const FooterView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Footer__FooterView",
   componentId: "kitt-universal__sc-1ujq2dc-0"
 })(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], ({
@@ -1562,12 +1729,14 @@ const FooterView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 function ModalFooter({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(FooterView, null, children);
+  return /*#__PURE__*/jsxRuntime.jsx(FooterView, {
+    children: children
+  });
 }
 
-const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
+const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
 
-const HeaderView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const HeaderView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__HeaderView",
   componentId: "kitt-universal__sc-1iwabch-0"
 })(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], ({
@@ -1575,19 +1744,19 @@ const HeaderView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 }) => theme.kitt.spacing * 2, ({
   theme
 }) => theme.kitt.colors.separator);
-const LeftIconView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const LeftIconView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__LeftIconView",
   componentId: "kitt-universal__sc-1iwabch-1"
 })(["align-self:flex-start;margin-right:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 2);
-const RightIconView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const RightIconView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__RightIconView",
   componentId: "kitt-universal__sc-1iwabch-2"
 })(["align-self:flex-start;margin-left:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 2);
-const TitleView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const TitleView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__TitleView",
   componentId: "kitt-universal__sc-1iwabch-3"
 })(["padding-left:", "px;flex-shrink:1;"], ({
@@ -1599,18 +1768,25 @@ function ModalHeader({
   right,
   children
 }) {
-  const onClose = React.useContext(OnCloseContext);
+  const onClose = react.useContext(OnCloseContext);
   const isIconLeft = !!left;
-  return /*#__PURE__*/React__default.createElement(HeaderView, null, isIconLeft && /*#__PURE__*/React__default.createElement(LeftIconView, null, left), /*#__PURE__*/React__default.createElement(TitleView, {
-    isIconLeft: isIconLeft
-  }, children), right !== undefined ? right : /*#__PURE__*/React__default.createElement(RightIconView, null, /*#__PURE__*/React__default.createElement(Button, {
-    type: "subtle-dark",
-    icon: /*#__PURE__*/React__default.createElement(kittIcons.XIcon, null),
-    onPress: onClose
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
+    children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
+      children: left
+    }), /*#__PURE__*/jsxRuntime.jsx(TitleView, {
+      isIconLeft: isIconLeft,
+      children: children
+    }), right !== undefined ? right : /*#__PURE__*/jsxRuntime.jsx(RightIconView, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+        type: "subtle-dark",
+        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+        onPress: onClose
+      })
+    })]
+  });
 }
 
-const ModalView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const ModalView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Modal__ModalView",
   componentId: "kitt-universal__sc-1xy2w5u-0"
 })(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], ({
@@ -1618,7 +1794,7 @@ const ModalView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
 }) => theme.kitt.spacing * 20, ({
   theme
 }) => theme.kitt.spacing * 4);
-const ContentView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const ContentView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Modal__ContentView",
   componentId: "kitt-universal__sc-1xy2w5u-1"
 })(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", ";background-color:", ";"], ({
@@ -1633,18 +1809,24 @@ function Modal({
   onEntered,
   onExited
 }) {
-  return /*#__PURE__*/React__default.createElement(OnCloseContext.Provider, {
-    value: onClose
-  }, /*#__PURE__*/React__default.createElement(reactNative.Modal, {
-    transparent: true,
-    animationType: "fade",
-    visible: visible,
-    onShow: onEntered,
-    onDismiss: onExited,
-    onRequestClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalView, null, /*#__PURE__*/React__default.createElement(Overlay, {
-    onPress: onClose
-  }), /*#__PURE__*/React__default.createElement(ContentView, null, children))));
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.Modal, {
+      transparent: true,
+      animationType: "fade",
+      visible: visible,
+      onShow: onEntered,
+      onDismiss: onExited,
+      onRequestClose: onClose,
+      children: /*#__PURE__*/jsxRuntime.jsxs(ModalView, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Overlay, {
+          onPress: onClose
+        }), /*#__PURE__*/jsxRuntime.jsx(ContentView, {
+          children: children
+        })]
+      })
+    })
+  });
 }
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
@@ -1659,20 +1841,19 @@ function Notification({
   const {
     top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  return /*#__PURE__*/React__default.createElement(Message, {
+  return /*#__PURE__*/jsxRuntime.jsx(Message, {
     noRadius: true,
     type: type,
     centeredText: centeredText,
     insets: {
       top
     },
-    onDismiss: onDelete
-  }, children);
+    onDismiss: onDelete,
+    children: children
+  });
 }
 
-const PrimitiveLink = reactNative.Text;
-
-const Flex = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Flex = /*#__PURE__*/styled__default.View.withConfig({
   shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
 }).withConfig({
   displayName: "Flex",
@@ -1714,13 +1895,13 @@ const getTypographyColorFromBlockColor = (color = 'transparent') => {
   }
 };
 
-const StoryBlockBackgroundContext = /*#__PURE__*/React.createContext('transparent');
-const StoryBlockColorContext = /*#__PURE__*/React.createContext('black');
+const StoryBlockBackgroundContext = /*#__PURE__*/react.createContext('transparent');
+const StoryBlockColorContext = /*#__PURE__*/react.createContext('black');
 const useStoryBlockColor = color => {
-  const storyBlockColor = React.useContext(StoryBlockColorContext);
+  const storyBlockColor = react.useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-const StyledStoryBlockView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StyledStoryBlockView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StoryBlock__StyledStoryBlockView",
   componentId: "kitt-universal__sc-3w4hdm-0"
 })(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, ({
@@ -1731,20 +1912,23 @@ function StoryBlock({
   children,
   background
 }) {
-  return /*#__PURE__*/React__default.createElement(StyledStoryBlockView, {
-    background: background
-  }, /*#__PURE__*/React__default.createElement(StoryBlockColorContext.Provider, {
-    value: getTypographyColorFromBlockColor(background)
-  }, /*#__PURE__*/React__default.createElement(StoryBlockBackgroundContext.Provider, {
-    value: background
-  }, children)));
+  return /*#__PURE__*/jsxRuntime.jsx(StyledStoryBlockView, {
+    background: background,
+    children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockColorContext.Provider, {
+      value: getTypographyColorFromBlockColor(background),
+      children: /*#__PURE__*/jsxRuntime.jsx(StoryBlockBackgroundContext.Provider, {
+        value: background,
+        children: children
+      })
+    })
+  });
 }
 
-const StoryTitleContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StoryTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StoryTitle__StoryTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-0"
 })(["margin-bottom:30px;"]);
-const StorySubTitleContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StorySubTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StoryTitle__StorySubTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-1"
 })(["margin-bottom:10px;"]);
@@ -1753,12 +1937,15 @@ function StoryTitle({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StoryTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header1, {
-    variant: "bold",
-    base: "header1",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header1, {
+      variant: "bold",
+      base: "header1",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 function StoryTitleLevel2({
@@ -1766,12 +1953,15 @@ function StoryTitleLevel2({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StoryTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header2, {
-    variant: "bold",
-    base: "header2",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header2, {
+      variant: "bold",
+      base: "header2",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 StoryTitleLevel2.displayName = 'StoryTitle.Level2';
@@ -1781,13 +1971,16 @@ function StoryTitleLevel3({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StorySubTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header3, {
-    variant: "bold",
-    base: "header3",
-    medium: "header4",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header3, {
+      variant: "bold",
+      base: "header3",
+      medium: "header4",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 StoryTitleLevel3.displayName = 'StoryTitle.Level3';
@@ -1797,13 +1990,16 @@ function StoryTitleLevel4({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StorySubTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header4, {
-    variant: "bold",
-    base: "header4",
-    medium: "header5",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header4, {
+      variant: "bold",
+      base: "header4",
+      medium: "header5",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 StoryTitleLevel4.displayName = 'StoryTitle.Level3';
@@ -1811,7 +2007,7 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-const StoryContainer$1 = /*#__PURE__*/styled__default(PrimitiveScrollView).withConfig({
+const StoryContainer$1 = /*#__PURE__*/styled__default.ScrollView.withConfig({
   displayName: "Story__StoryContainer",
   componentId: "kitt-universal__sc-1kwdg2p-0"
 })(["padding:", "px;"], storyPadding);
@@ -1820,54 +2016,66 @@ function Story({
   contentContainerStyle,
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(StoryContainer$1, {
-    contentContainerStyle: contentContainerStyle
-  }, /*#__PURE__*/React__default.createElement(StoryTitle, null, title), children);
+  return /*#__PURE__*/jsxRuntime.jsxs(StoryContainer$1, {
+    contentContainerStyle: contentContainerStyle,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle, {
+      children: title
+    }), children]
+  });
 }
 
-const StyledSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StyledSection = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StorySection__StyledSection",
   componentId: "kitt-universal__sc-1b3liv5-0"
 })(["margin-bottom:32px;"]);
 function StorySection({
   title,
-  className,
   children,
   internalIsDemoSection,
   ...props
 }) {
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/React__default.createElement(StyledSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level2, null, title), children);
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level2, {
+      children: title
+    }), children]
+  });
 }
-const StyledSubSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StyledSubSection = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StorySection__StyledSubSection",
   componentId: "kitt-universal__sc-1b3liv5-1"
 })(["margin-bottom:16px;"]);
 
 function SubSection({
   title,
-  className,
   children,
   ...props
 }) {
-  return /*#__PURE__*/React__default.createElement(StyledSubSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level3, null, title), children);
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSubSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level3, {
+      children: title
+    }), children]
+  });
 }
 
-const StyledBlockSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StyledBlockSection = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StorySection__StyledBlockSection",
   componentId: "kitt-universal__sc-1b3liv5-2"
 })(["margin-bottom:16px;"]);
 
 function BlockSection({
   title,
-  className,
   children,
   ...props
 }) {
-  return /*#__PURE__*/React__default.createElement(StyledBlockSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level4, null, title), children);
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledBlockSection, { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
+      children: title
+    }), children]
+  });
 }
 
-const StyledDemoSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const StyledDemoSection = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StorySection__StyledDemoSection",
   componentId: "kitt-universal__sc-1b3liv5-3"
 })(["margin-bottom:64px;"]);
@@ -1875,10 +2083,13 @@ const StyledDemoSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig
 function DemoSection({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(StyledDemoSection, null, /*#__PURE__*/React__default.createElement(StorySection, {
-    internalIsDemoSection: true,
-    title: "Demo"
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(StyledDemoSection, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StorySection, {
+      internalIsDemoSection: true,
+      title: "Demo",
+      children: children
+    })
+  });
 }
 
 StorySection.SubSection = SubSection;
@@ -1898,31 +2109,33 @@ function StoryContainer({
   platform = 'all'
 }) {
   if (platform === 'web') return null;
-  return /*#__PURE__*/React__default.createElement(StorySection.BlockSection, {
+  return /*#__PURE__*/jsxRuntime.jsx(StorySection.BlockSection, {
     testID: state,
-    title: title
-  }, children);
+    title: title,
+    children: children
+  });
 }
 
 function StoryDecorator(storyFn, context) {
-  return /*#__PURE__*/React__default.createElement(Story, {
-    title: context.name
-  }, storyFn());
+  return /*#__PURE__*/jsxRuntime.jsx(Story, {
+    title: context.name,
+    children: storyFn()
+  });
 }
 
-const SmallScreenRow = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const SmallScreenRow = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StoryGrid__SmallScreenRow",
   componentId: "kitt-universal__sc-4z5new-0"
 })(["flex-direction:column;margin:0;"]);
-const SmallScreenCol = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const SmallScreenCol = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StoryGrid__SmallScreenCol",
   componentId: "kitt-universal__sc-4z5new-1"
 })(["padding:8px 0 16px;"]);
-const FlexRow = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const FlexRow = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StoryGrid__FlexRow",
   componentId: "kitt-universal__sc-4z5new-2"
 })(["flex-direction:row;margin:0 -4px 16px;"]);
-const FlexCol = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const FlexCol = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "StoryGrid__FlexCol",
   componentId: "kitt-universal__sc-4z5new-3"
 })(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
@@ -1939,10 +2152,18 @@ function StoryGridRow({
   const breakpointValue = breakpoint === 'small' ? 480 : 768;
 
   if (width < breakpointValue) {
-    return /*#__PURE__*/React__default.createElement(SmallScreenRow, null, React__default.Children.map(children, child => /*#__PURE__*/React__default.createElement(SmallScreenCol, null, child)));
+    return /*#__PURE__*/jsxRuntime.jsx(SmallScreenRow, {
+      children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
+        children: child
+      }))
+    });
   }
 
-  return /*#__PURE__*/React__default.createElement(FlexRow, null, React__default.Children.map(children, child => /*#__PURE__*/React__default.createElement(FlexCol, null, child)));
+  return /*#__PURE__*/jsxRuntime.jsx(FlexRow, {
+    children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
+      children: child
+    }))
+  });
 }
 
 function StoryGridCol({
@@ -1951,20 +2172,17 @@ function StoryGridCol({
   children,
   platform = 'all'
 }) {
-  const isNative = reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android';
-
-  if (reactNative.Platform.OS === 'web' && platform === 'native') {
+  if (platform === 'native') {
     return null;
   }
 
-  if (isNative && platform === 'web') {
-    return null;
-  }
-
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title ? /*#__PURE__*/React__default.createElement(StoryTitle.Level4, {
-    numberOfLines: 1,
-    color: titleColor
-  }, title) : null, children);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [title ? /*#__PURE__*/jsxRuntime.jsx(StoryTitle.Level4, {
+      numberOfLines: 1,
+      color: titleColor,
+      children: title
+    }) : null, children]
+  });
 }
 
 const StoryGrid = {
@@ -1972,7 +2190,7 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-const Container = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+const Container$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
 })(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
@@ -2020,13 +2238,15 @@ function Tag({
   type = 'default',
   variant = 'fill'
 }) {
-  return /*#__PURE__*/React__default.createElement(Container, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
     type: type,
-    variant: variant
-  }, /*#__PURE__*/React__default.createElement(Typography.Text, {
-    base: "body-xsmall",
-    color: getLabelColor(type, variant)
-  }, label));
+    variant: variant,
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body-xsmall",
+      color: getLabelColor(type, variant),
+      children: label
+    })
+  });
 }
 
 const lateOceanColorPalette = {
@@ -2135,6 +2355,7 @@ const colorsLateOceanTheme = {
   danger: lateOceanColorPalette.englishVermillon,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
+  black: lateOceanColorPalette.black1000,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
   overlay: {
@@ -2320,6 +2541,15 @@ const tagLateOceanTheme = {
   }
 };
 
+const tooltip = {
+  backgroundColor: colorsLateOceanTheme.black,
+  borderRadius: 10,
+  opacity: 0.95,
+  horizontalPadding: 16,
+  verticalPadding: 4,
+  floatingPadding: 8
+};
+
 const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
 
 const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
@@ -2348,8 +2578,8 @@ const typographyLateOceanTheme = {
   types: {
     headers: {
       fontFamily: {
-        regular: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
+        regular: 'Moderat',
+        bold: 'Moderat'
       },
       fontWeight: 400,
       fontStyle: 'normal',
@@ -2368,8 +2598,8 @@ const typographyLateOceanTheme = {
     },
     bodies: {
       fontFamily: {
-        regular: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
+        regular: 'Noto Sans',
+        bold: 'Noto Sans'
       },
       fontWeight: {
         regular: 400,
@@ -2432,38 +2662,384 @@ const theme = {
   shadows: shadowsLateOceanTheme,
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton,
-  listItem: listItemLateOceanTheme
+  listItem: listItemLateOceanTheme,
+  tooltip
 };
 
-function Tooltip({
+function Title({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(PrimitiveView, null, children);
+  return /*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body",
+      variant: "bold",
+      children: children
+    })
+  });
 }
 
-const StyledLink = /*#__PURE__*/styled__default(PrimitiveLink).withConfig({
-  shouldForwardProp: prop => !['disabled', 'noUnderline'].includes(prop)
-}).withConfig({
-  displayName: "TypographyLink__StyledLink",
-  componentId: "kitt-universal__sc-1o1zy30-0"
-})(["text-decoration:", ";", ""], ({
-  noUnderline
-}) => noUnderline ? 'none' : 'underline', ({
-  disabled,
-  theme,
-  noUnderline
-}) => `
-    ${disabled ? `color: ${theme.kitt.typography.link.disabledColor};` : ''}
-    ${reactNative.Platform.OS === 'web' ? `
-  text-decoration-color: inherit;
-  transition: color 0.2s ease-in-out;
-  cursor: ${disabled ? 'not-allowed' : 'pointer'};
+function ModalDateTimePicker({
+  title,
+  visible,
+  value,
+  validateButtonLabel,
+  onChange,
+  onClose
+}) {
+  const [currentValue, setCurrentValue] = react.useState(value); // Prevent unsynced value between the modal and its parent state
+
+  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
+    visible: Boolean(visible),
+    onClose: () => {
+      setCurrentValue(value);
+      onClose();
+    },
+    children: visible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [title ? /*#__PURE__*/jsxRuntime.jsx(Title, {
+        children: title
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
+        children: /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
+          is24Hour: true,
+          testID: "date-picker-native-element",
+          value: currentValue,
+          mode: "time",
+          display: 'default',
+          onChange: (_event, date) => setCurrentValue(prev => {
+            return date || prev;
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          stretch: true,
+          type: "primary",
+          onPress: () => {
+            onChange(currentValue);
+          },
+          children: validateButtonLabel ? /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
+            children: validateButtonLabel
+          }) : /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+            id: "kitt-universal.ModalDateTimePicker.confirm"
+          })
+        })
+      })]
+    }) : null
+  });
+}
+
+const timePickerPlaceholder = '--:--';
+const useTimePicker = (value, onChange, onBlur, disabled, defaultValue) => {
+  const [isTimePickerModalVisible, setIsTimePickerModalVisible] = react.useState(false);
+  const todayAtNoon = react.useMemo(() => {
+    const now = new Date(2000, 0, 1, 12);
+    return new Date(now.getFullYear(), now.getMonth(), now.getDay(), 12);
+  }, []);
+  const defaultDate = defaultValue || todayAtNoon;
+  const dateTimePickerValue = value || defaultDate;
+  const displayedValue = value === null ? timePickerPlaceholder : Intl.DateTimeFormat('fr-FR', {
+    minute: 'numeric',
+    hour: 'numeric'
+  }).format(dateTimePickerValue);
+  const timePickerState = isTimePickerModalVisible ? 'focus' : 'default';
+  return {
+    dateTimePickerValue,
+    displayedValue,
+    timePickerState,
+    isTimePickerModalVisible,
+    handleInputPress: () => {
+      if (disabled) {
+        return;
+      }
+
+      setIsTimePickerModalVisible(true);
+    },
+    handleTimeChange: date => {
+      setIsTimePickerModalVisible(false);
+      onChange(date || defaultDate);
+      onBlur();
+    },
+    handleModalClose: () => setIsTimePickerModalVisible(false)
+  };
+};
+
+const Container = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "TimePicker__Container",
+  componentId: "kitt-universal__sc-18zhpwp-0"
+})(["", " width:100px;height:40px;justify-content:center;align-items:center;"], styledTextInputMixin);
+function TimePicker({
+  title,
+  state = 'default',
+  disabled = false,
+  forceDefaultValue,
+  value,
+  validateButtonLabel,
+  onChange,
+  onBlur
+}) {
+  const {
+    dateTimePickerValue,
+    displayedValue,
+    timePickerState,
+    handleInputPress,
+    handleModalClose,
+    handleTimeChange,
+    isTimePickerModalVisible
+  } = useTimePicker(value || null, onChange, onBlur, disabled, forceDefaultValue);
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    state: timePickerState === 'default' ? state : timePickerState,
+    accessibilityRole: "button",
+    onPress: handleInputPress,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body",
+      color: displayedValue === timePickerPlaceholder ? 'black-light' : 'black',
+      children: displayedValue
+    }), null, /*#__PURE__*/jsxRuntime.jsx(ModalDateTimePicker, {
+      title: title,
+      visible: isTimePickerModalVisible,
+      value: dateTimePickerValue,
+      validateButtonLabel: validateButtonLabel,
+      onChange: handleTimeChange,
+      onClose: handleModalClose
+    })]
+  });
+}
+
+var Arrow = function (props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M22.399 6.128C20.939 7.722 19.767 9 18 9s-2.938-1.278-4.399-2.872C11.187 3.494 7.984 0 0 0h36c-7.984 0-11.187 3.494-13.601 6.128z",
+      fill: "currentColor"
+    })
+  });
+};
+
+Arrow.defaultProps = {
+  width: "36",
+  height: "8",
+  viewBox: "0 0 36 9",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const StyledTooltipView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "TooltipView__StyledTooltipView",
+  componentId: "kitt-universal__sc-156zm6m-0"
+})(["align-items:center;"]);
+const StyledTooltipContent = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "TooltipView__StyledTooltipContent",
+  componentId: "kitt-universal__sc-156zm6m-1"
+})(["background-color:", ";border-radius:", "px;opacity:", ";padding:", ";"], ({
+  theme
+}) => theme.kitt.tooltip.backgroundColor, ({
+  theme
+}) => theme.kitt.tooltip.borderRadius, ({
+  theme
+}) => theme.kitt.tooltip.opacity, ({
+  theme
+}) => `${theme.kitt.tooltip.verticalPadding}px ${theme.kitt.tooltip.horizontalPadding}px`);
+
+function ArrowView(props) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(Arrow, {
+      color: theme.kitt.tooltip.backgroundColor
+    })
+  });
+}
+
+const StyledArrow = /*#__PURE__*/styled__default(ArrowView).withConfig({
+  displayName: "TooltipView__StyledArrow",
+  componentId: "kitt-universal__sc-156zm6m-2"
+})(["color:", ";transform:", ";"], ({
+  theme
+}) => theme.kitt.tooltip.backgroundColor, ({
+  $position
+}) => `rotate(${$position === 'bottom' ? 180 : 0}deg)`);
+function TooltipView({
+  children,
+  position
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledTooltipView, {
+    children: [position === 'bottom' ? /*#__PURE__*/jsxRuntime.jsx(StyledArrow, {
+      $position: position
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(StyledTooltipContent, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: "body",
+        color: "white",
+        children: children
+      })
+    }), position === 'top' ? /*#__PURE__*/jsxRuntime.jsx(StyledArrow, {
+      $position: position
+    }) : null]
+  });
+}
+
+const tooltipDefaultPosition = 'top';
+
+// Since the tooltip use absolute positionning, we need a parent to provide the relative root
+const TooltipContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Tooltip__TooltipContainer",
+  componentId: "kitt-universal__sc-7ja8gx-0"
+})(["position:relative;align-self:baseline;"]);
+// eslint-disable-next-line unicorn/expiring-todo-comments
+// TODO : update position on scroll in future iteration
+function Tooltip({
+  children,
+  defaultVisible,
+  position = tooltipDefaultPosition,
+  content,
+  floatingPadding,
+  onUpdate
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const padding = floatingPadding || theme.kitt.tooltip.floatingPadding;
+  const pressed = Animated.useSharedValue(defaultVisible);
+  const opacityStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        opacity: Animated.withSpring(pressed.value ? theme.kitt.tooltip.opacity : 0)
+      };
+    };
 
+    _f._closure = {
+      withSpring: Animated.withSpring,
+      pressed,
+      theme: {
+        kitt: {
+          tooltip: {
+            opacity: theme.kitt.tooltip.opacity
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{opacity:withSpring(pressed.value?theme.kitt.tooltip.opacity:0)};}}";
+    _f.__workletHash = 15953928507970;
+    _f.__location = "/home/chris/ornikar/kitt/@ornikar/kitt-universal/src/Tooltip/Tooltip.tsx (57:41)";
+    _f.__optimalization = 2;
 
-  &:hover, &:active, .kitt-hover & {
-    text-decoration: ${noUnderline ? 'underline' : 'none'};
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    update,
+    refs,
+    middlewareData
+  } = reactNative$1.useFloating({
+    placement: position,
+    middleware: [reactNative$1.offset(padding), reactNative$1.shift(), reactNative$1.flip({
+      padding
+    })]
+  });
+  react.useEffect(() => {
+    if (!onUpdate) return;
+    onUpdate({
+      x,
+      y,
+      reference,
+      floating,
+      strategy: 'absolute',
+      update,
+      refs,
+      middlewareData
+    });
+  }, [x, y, reference, floating, update, refs, middlewareData, onUpdate]);
+  return /*#__PURE__*/jsxRuntime.jsxs(TooltipContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+      ref: reference,
+      children: /*#__PURE__*/jsxRuntime.jsx(reactNative.Pressable, {
+        accessibilityRole: "button",
+        onPress: () => {
+          pressed.value = !pressed.value;
+        },
+        children: children
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+      ref: floating,
+      accessibilityElementsHidden: !pressed.value,
+      importantForAccessibility: pressed.value === true ? 'auto' : 'no-hide-descendants',
+      style: { ...reactNative.StyleSheet.absoluteFillObject,
+        top: y && position === 'bottom' ? y : undefined,
+        bottom: y && position === 'top' ? y : undefined,
+        left: x ?? 0
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+        style: [opacityStyles],
+        children: /*#__PURE__*/jsxRuntime.jsx(TooltipView, {
+          position: position,
+          children: content
+        })
+      })
+    })]
+  });
+}
+Tooltip.View = TooltipView;
+
+const StyledTypographyEmoji = /*#__PURE__*/styled__default(Emoji).withConfig({
+  displayName: "TypographyEmoji__StyledTypographyEmoji",
+  componentId: "kitt-universal__sc-1if5guu-0"
+})(["align-self:center;", ""], ({
+  size
+}) => {
+  /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+  return `
+      margin: 0 ${size / 20}px 0 ${size / 10}px;
+      transform: translateY(${size / 10 * 2}px);
+    `;
+});
+function TypographyEmoji({
+  emoji,
+  base,
+  small,
+  medium,
+  large
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  const typeConfig = getTypographyTypeConfig(typeForCurrentWindowSize || 'body', theme);
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  const {
+    fontSize
+  } = typeConfig[typeConfigKey];
+
+  if ((process.env.NODE_ENV !== "production")) {
+    if (!fontSize.endsWith('px')) throw new Error(`Unexpected font-size value: ${fontSize}`);
   }
-  ` : ''}`);
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTypographyEmoji, {
+    size: parseInt(fontSize.slice(0, -2), 10),
+    emoji: emoji
+  });
+}
+
+const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react$1.styled("span")({
+  name: "TypographyLinkWebWrapper",
+  class: "tcwz3nt"
+}));
+const StyledLink = /*#__PURE__*/styled__default.Text.withConfig({
+  displayName: "TypographyLink__StyledLink",
+  componentId: "kitt-universal__sc-1o1zy30-0"
+})(["text-decoration:", ";", ";", ";"], ({
+  $noUnderline
+}) => $noUnderline ? 'none' : 'underline', ({
+  $disabled
+}) => {
+  return `
+      text-decoration-color: inherit;
+      transition: color 0.2s ease-in-out;
+      cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+    `;
+}, ({
+  $disabled,
+  theme
+}) => {
+  if (!$disabled) return undefined;
+  return `color: ${theme.kitt.typography.link.disabledColor};`;
+});
 function TypographyLink({
   children,
   disabled,
@@ -2473,16 +3049,26 @@ function TypographyLink({
   onPress,
   ...otherProps
 }) {
-  return /*#__PURE__*/React__default.createElement(Typography, _extends__default({}, otherProps, {
-    accessibilityRole: "none"
-  }), /*#__PURE__*/React__default.createElement(StyledLink, {
-    disabled: disabled,
-    noUnderline: noUnderline,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    accessibilityRole: "link",
-    onPress: disabled ? undefined : onPress
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, { ...otherProps,
+    accessibilityRole: "none",
+    children: /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
+      as: TypographyLinkWebWrapper,
+      "data-nounderline": noUnderline,
+      children: /*#__PURE__*/jsxRuntime.jsx(StyledLink, {
+        $disabled: disabled,
+        $noUnderline: noUnderline,
+        href: href,
+        hrefAttrs: hrefAttrs,
+        accessibilityRole: "link",
+        dataSet: {
+          // remove data-kitt-universal when we delete kitt web. See See :global(a) in Link styles.module.css
+          'kitt-universal': 'true'
+        },
+        onPress: disabled ? undefined : onPress,
+        children: children
+      })
+    })
+  });
 }
 
 function matchWindowSize(currentWidth, {
@@ -2526,7 +3112,7 @@ function useKittTheme() {
   const {
     width
   } = reactNative.useWindowDimensions();
-  return React.useMemo(() => {
+  return react.useMemo(() => {
     return {
       kitt: theme,
       responsive: createWindowSizeHelper(width),
@@ -2539,9 +3125,10 @@ function KittThemeProvider({
   children
 }) {
   const theme = useKittTheme();
-  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-    theme: theme
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: theme,
+    children: children
+  });
 }
 const KittThemeDecorator = addons.makeDecorator({
   name: 'ThemeDecorator',
@@ -2550,18 +3137,9 @@ const KittThemeDecorator = addons.makeDecorator({
     options = {},
     parameters = {}
   }) => {
-    return /*#__PURE__*/React__default.createElement(KittThemeProvider, null, storyFn(context));
-  }
-});
-
-const SafeAreaProviderDecorator = addons.makeDecorator({
-  name: 'SafeAreaProviderDecorator',
-  parameterName: 'safeAreaProvider',
-  wrapper: (storyFn, context, {
-    options = {},
-    parameters = {}
-  }) => {
-    return /*#__PURE__*/React__default.createElement(reactNativeSafeAreaContext.SafeAreaProvider, null, storyFn(context));
+    return /*#__PURE__*/jsxRuntime.jsx(KittThemeProvider, {
+      children: storyFn(context)
+    });
   }
 });
 
@@ -2571,13 +3149,16 @@ function MatchWindowSize({
 }) {
   const match = useMatchWindowSize(matchWindowSizeOptions);
   if (!match) return null;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  });
 }
 
 exports.useWindowSize = reactNative.useWindowDimensions;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;
+exports.Emoji = Emoji;
 exports.ExternalLink = ExternalLink;
 exports.Flex = Flex;
 exports.FullScreenModal = FullScreenModal;
@@ -2598,13 +3179,7 @@ exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Notification = Notification;
-exports.PrimitiveLink = PrimitiveLink;
-exports.PrimitivePressable = PrimitivePressable;
-exports.PrimitiveScrollView = PrimitiveScrollView;
-exports.PrimitiveText = PrimitiveText;
-exports.PrimitiveView = PrimitiveView;
 exports.Radio = Radio;
-exports.SafeAreaProviderDecorator = SafeAreaProviderDecorator;
 exports.Section = DeprecatedSection;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
@@ -2615,8 +3190,10 @@ exports.StorySection = StorySection;
 exports.StoryTitle = StoryTitle;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
+exports.TimePicker = TimePicker;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
+exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.createWindowSizeHelper = createWindowSizeHelper;