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

package/dist/index-browser-all.es.ios.js

@@ -1,21 +1,23 @@
-import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import { UserIcon, EyeIcon, EyeOffIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import React, { useRef, useEffect, useContext, createContext, useState, forwardRef, Fragment, useMemo } from 'react';
-import { View, Animated, Easing, Text as Text$1, Image, Pressable, Linking, TextInput, useWindowDimensions, ActivityIndicator, TouchableOpacity, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
+import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, TextInput, Pressable, ActivityIndicator, TouchableOpacity, View, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import styled, { useTheme, css, ThemeProvider } from 'styled-components';
+import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
+import { useRef, useEffect, cloneElement, useContext, createContext, useState, useMemo, forwardRef, Fragment, Children } from 'react';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
-import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
+import _extends from '@babel/runtime/helpers/extends';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated$1, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { FormattedMessage } from 'react-intl';
+import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
 
-var PrimitiveView = View;
-
 function SpinningIcon(_ref) {
   var children = _ref.children;
   var animationRef = useRef(new Animated.Value(0));
@@ -38,17 +40,19 @@ function SpinningIcon(_ref) {
       return undefined;
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Animated.View, {
+  return /*#__PURE__*/jsx(Animated.View, {
     style: {
       transform: [{
         rotate: rotation
       }]
-    }
-  }, children);
+    },
+    children: children
+  });
 }
 
-var _templateObject$u;
-var IconContainer$2 = styled(PrimitiveView)(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-self: ", ";\n"])), function (_ref) {
+var IconContainer$2 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Icon__IconContainer"
+})(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
   var color = _ref.color;
   return color;
 }, function (_ref2) {
@@ -69,92 +73,172 @@ function Icon(_ref5) {
       spin = _ref5.spin,
       align = _ref5.align,
       color = _ref5.color;
-  var clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/React.createElement(IconContainer$2, {
+  return /*#__PURE__*/jsx(IconContainer$2, {
     align: align,
     size: size,
-    color: color
-  }, spin ? /*#__PURE__*/React.createElement(SpinningIcon, null, clonedIcon) : clonedIcon);
+    color: color,
+    children: spin ? /*#__PURE__*/jsx(SpinningIcon, {
+      children: clonedIcon
+    }) : clonedIcon
+  });
 }
 
-var PrimitiveText = Text$1;
+var KittBreakpoints = {
+  /**
+   * min-width: 0
+   */
+  BASE: 0,
+
+  /**
+   * min-width: 480px
+   */
+  SMALL: 480,
 
-var _excluded$a = ["accessibilityRole", "base", "variant", "color"];
+  /**
+   * min-width: 768px
+   */
+  MEDIUM: 768,
 
-var _templateObject$t;
-var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
+  /**
+   * min-width: 1024px
+   */
+  LARGE: 1024,
+
+  /**
+   * min-width: 1280px
+   */
+  WIDE: 1280
+};
+var 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
+};
+
+var _excluded$c = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-var StyledTypography = styled(PrimitiveText)(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  /* font */\n  ", "\n\n  /* color */\n  ", "\n"])), function (_ref) {
-  var theme = _ref.theme,
-      isHeader = _ref.isHeader,
-      type = _ref.type,
-      variant = _ref.variant;
-  var _theme$kitt$typograph = theme.kitt.typography.types,
-      headers = _theme$kitt$typograph.headers,
-      bodies = _theme$kitt$typograph.bodies;
-  return "\n      /* type */\n      ".concat(!type ? '' : "\n  font-family: ".concat(isHeader ? headers.fontFamily[variant] : bodies.fontFamily[variant], ";\n  font-size: ").concat(isHeader ? headers.configs[type].baseAndSmall.fontSize : bodies.configs[type].baseAndSmall.fontSize, ";\n  line-height: ").concat(isHeader ? headers.configs[type].baseAndSmall.lineHeight : bodies.configs[type].baseAndSmall.lineHeight, ";\n    "), "\n\n    /* variant */\n    font-weight: ").concat(isHeader ? headers.fontWeight : bodies.fontWeight[variant], ";\n    font-style: ").concat(isHeader ? headers.fontStyle : bodies.fontStyle[variant], ";\n  ");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      color = _ref2.color;
-  return !color ? '' : "\n  color: ".concat(theme.kitt.typography.colors[color], ";\n  text-decoration-color: ").concat(theme.kitt.typography.colors[color], ";\n  ");
-});
+var getTypographyTypeConfigKey = function (theme) {
+  var isMediumOrAbove = theme.responsive.matchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
+};
 
 var isTypeHeader = function (type) {
   return type.startsWith('header');
 };
 
-var isTypographyHeader = function (base, typeInContext) {
-  if (base) return isTypeHeader(base);
-  if (typeInContext) return isTypeHeader(typeInContext);
+var isTypographyHeader = function (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];
+}
+var StyledTypography = /*#__PURE__*/styled.Text.withConfig({
+  displayName: "Typography__StyledTypography"
+})(["", " ", ""], function (_ref) {
+  var theme = _ref.theme,
+      $isHeader = _ref.$isHeader,
+      $typeForCurrentWindowSize = _ref.$typeForCurrentWindowSize,
+      $variant = _ref.$variant;
+  var _theme$kitt$typograph = theme.kitt.typography.types,
+      headers = _theme$kitt$typograph.headers,
+      bodies = _theme$kitt$typograph.bodies;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return "\n      /* type */\n      ".concat(!$typeForCurrentWindowSize ? '' : "\n  font-family: ".concat($isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], ";\n  font-size: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, ";\n  line-height: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight, ";\n    "), "\n\n    /* variant */\n    font-weight: ").concat($isHeader ? headers.fontWeight : bodies.fontWeight[$variant], ";\n    font-style: ").concat($isHeader ? headers.fontStyle : bodies.fontStyle[$variant], ";\n  ");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $color = _ref2.$color;
+  return !$color ? '' : "\n  color: ".concat(theme.kitt.typography.colors[$color], ";\n  text-decoration-color: ").concat(theme.kitt.typography.colors[$color], ";\n  ");
+});
+function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width;
 
+  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(_ref3) {
   var accessibilityRole = _ref3.accessibilityRole,
       base = _ref3.base,
+      small = _ref3.small,
+      medium = _ref3.medium,
+      large = _ref3.large,
       variant = _ref3.variant,
       color = _ref3.color,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$a);
-
-  var typeInContext = useContext(TypographyTypeContext);
-  var isHeader = isTypographyHeader(base, typeInContext);
-  var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
-  var colorWithDefaultToBlack = color !== null && color !== void 0 ? color : typeInContext ? undefined : 'black';
-  var content = base ?
-  /*#__PURE__*/
-  // use the type and pass the type to the context for children
-  React.createElement(TypographyTypeContext.Provider, {
-    value: base
-  }, /*#__PURE__*/React.createElement(StyledTypography, _extends({
-    color: colorWithDefaultToBlack,
-    isHeader: isHeader,
-    type: base,
-    variant: nonNullableVariant,
-    accessibilityRole: accessibilityRole || undefined
-  }, otherProps))) : /*#__PURE__*/React.createElement(StyledTypography, _extends({
-    color: colorWithDefaultToBlack,
-    isHeader: isHeader,
-    variant: nonNullableVariant,
+      otherProps = _objectWithoutProperties(_ref3, _excluded$c);
+
+  var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
+  var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  var isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
+  var nonNullableVariant = variant !== null && variant !== void 0 ? 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
+
+  var colorWithDefaultToBlack = color !== null && color !== void 0 ? color : isHeaderTypographyInContext !== undefined ? undefined : 'black';
+  var content = base ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
+    value: isHeader,
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$h({
+      $color: colorWithDefaultToBlack,
+      $isHeader: isHeader,
+      $typeForCurrentWindowSize: typeForCurrentWindowSize,
+      $variant: nonNullableVariant,
+      accessibilityRole: accessibilityRole || undefined
+    }, otherProps))
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$h({
+    $color: colorWithDefaultToBlack,
+    $isHeader: isHeader,
+    $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined
   }, otherProps));
-  return color ? /*#__PURE__*/React.createElement(TypographyColorContext.Provider, {
-    value: color
-  }, content) : content;
+  return color ? /*#__PURE__*/jsx(TypographyColorContext.Provider, {
+    value: color,
+    children: content
+  }) : content;
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/React.createElement(Typography, _extends({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$h({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/React.createElement(Typography, _extends({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$h({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -162,10 +246,10 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/React.createElement(Typography, _extends({
+    return /*#__PURE__*/jsx(Typography, _objectSpread$h(_objectSpread$h({
       accessibilityRole: "header",
       base: defaultBase
-    }, props, {
+    }, props), {}, {
       accessibilityLevel: level
     }));
   }
@@ -198,9 +282,11 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$9 = ["size"];
+var _excluded$b = ["size"];
+
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var _templateObject$s;
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -210,7 +296,9 @@ var getInitials = function (firstname, lastname) {
   return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 };
 
-var StyledAvatarView = styled(PrimitiveView)(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  height: ", "px;\n  width: ", "px;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Avatar__StyledAvatarView"
+})(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
   var round = _ref.round,
       size = _ref.size;
   return round ? size / 2 : 10;
@@ -235,7 +323,7 @@ function AvatarContent(_ref5) {
       light = _ref5.light;
 
   if (src) {
-    return /*#__PURE__*/React.createElement(Image, {
+    return /*#__PURE__*/jsx(Image, {
       source: {
         uri: src
       },
@@ -247,15 +335,16 @@ function AvatarContent(_ref5) {
   }
 
   if (firstname && lastname) {
-    return /*#__PURE__*/React.createElement(Typography.Text, {
+    return /*#__PURE__*/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.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(UserIcon, null),
+  return /*#__PURE__*/jsx(Icon, {
+    icon: /*#__PURE__*/jsx(UserIcon, {}),
     color: light ? 'black' : 'white',
     size: size / 2
   });
@@ -264,32 +353,37 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      rest = _objectWithoutProperties(_ref6, _excluded$9);
+      rest = _objectWithoutProperties(_ref6, _excluded$b);
 
-  return /*#__PURE__*/React.createElement(StyledAvatarView, _extends({}, rest, {
-    size: size
-  }), /*#__PURE__*/React.createElement(AvatarContent, _extends({}, rest, {
-    size: size
-  })));
+  return /*#__PURE__*/jsx(StyledAvatarView, _objectSpread$g(_objectSpread$g({}, rest), {}, {
+    size: size,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$g(_objectSpread$g({}, rest), {}, {
+      size: size
+    }))
+  }));
 }
 
-var _excluded$8 = ["color"],
+var _excluded$a = ["color"],
     _excluded2$2 = ["color"];
 
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(Icon, _objectSpread$f(_objectSpread$f({}, props), {}, {
     color: theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$8);
+      otherProps = _objectWithoutProperties(_ref, _excluded$a);
 
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(Icon, _objectSpread$f(_objectSpread$f({}, otherProps), {}, {
     color: theme.kitt.typography.colors[color]
   }));
 }
@@ -299,15 +393,17 @@ function TypographyIcon(_ref2) {
       otherProps = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/React.createElement(TypographyIconSpecifiedColor, _extends({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$f({
       color: color
     }, otherProps));
   }
 
-  return /*#__PURE__*/React.createElement(TypographyIconInheritColor, otherProps);
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$f({}, otherProps));
 }
 
-var _templateObject$r, _templateObject2$c, _templateObject3$8;
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextColorByType = function (type, isPressed, disabled) {
   if (disabled) return 'black-light';
@@ -328,13 +424,19 @@ var getTextColorByType = function (type, isPressed, disabled) {
   }
 };
 
-var ButtonText = styled(Typography.Text)(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  /* On native code, this is the only way to ensure that the text is centered */\n  text-align: center;\n"])));
-var Content$1 = styled(PrimitiveView)(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n\n  /*\n    On native code flex grow does not work as expected which cause an issue with the flex props.\n    In order to occupy only the needed space, we enable flex grow only when stretched\n  */\n  flex: ", ";\n"])), function (_ref) {
+var ButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "ButtonContent__ButtonText"
+})(["text-align:center;"]);
+var Content$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ButtonContent__Content"
+})(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], function (_ref) {
   var stretch = _ref.stretch,
       iconOnly = _ref.iconOnly;
   return "".concat(stretch || iconOnly ? 1 : 0, " 1 auto");
 });
-var IconContainer$1 = styled(PrimitiveView)(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ButtonContent__IconContainer"
+})(["", ""], function (_ref2) {
   var theme = _ref2.theme,
       iconPosition = _ref2.iconPosition;
   var value = theme.kitt.spacing * 3;
@@ -353,15 +455,16 @@ function ButtonIcon(_ref3) {
       size = _ref3.size,
       iconPosition = _ref3.iconPosition,
       testID = _ref3.testID;
-  return /*#__PURE__*/React.createElement(IconContainer$1, {
-    iconPosition: iconPosition
-  }, /*#__PURE__*/React.createElement(TypographyIcon, {
-    icon: icon,
-    spin: spin,
-    color: color,
-    size: size,
-    testID: testID
-  }));
+  return /*#__PURE__*/jsx(IconContainer$1, {
+    iconPosition: iconPosition,
+    children: /*#__PURE__*/jsx(TypographyIcon, {
+      icon: icon,
+      spin: spin,
+      color: color,
+      size: size,
+      testID: testID
+    })
+  });
 }
 
 function ButtonContent(_ref4) {
@@ -374,7 +477,7 @@ function ButtonContent(_ref4) {
       disabled = _ref4.disabled,
       children = _ref4.children;
   var color = getTextColorByType(type, Boolean(isPressed), Boolean(disabled));
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   var sharedIconProps = {
     spin: iconSpin,
     color: color,
@@ -388,34 +491,36 @@ function ButtonContent(_ref4) {
   }
 
   if (!children) {
-    return /*#__PURE__*/React.createElement(Content$1, {
+    return /*#__PURE__*/jsx(Content$1, {
       iconOnly: true,
-      stretch: stretch
-    }, /*#__PURE__*/React.createElement(TypographyIcon, _extends({}, sharedIconProps, {
-      icon: icon
-    })));
+      stretch: stretch,
+      children: /*#__PURE__*/jsx(TypographyIcon, _objectSpread$e(_objectSpread$e({}, sharedIconProps), {}, {
+        icon: icon
+      }))
+    });
   }
 
-  return /*#__PURE__*/React.createElement(Content$1, {
-    stretch: stretch
-  }, icon && iconPosition === 'left' ? /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, sharedIconProps, {
-    icon: icon,
-    iconPosition: iconPosition,
-    testID: "button-left-icon"
-  })) : null, /*#__PURE__*/React.createElement(ButtonText, {
-    base: "body",
-    color: color,
-    variant: "bold"
-  }, children), icon && iconPosition === 'right' ? /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, sharedIconProps, {
-    icon: icon,
-    iconPosition: iconPosition
-  })) : null);
+  return /*#__PURE__*/jsxs(Content$1, {
+    stretch: stretch,
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, sharedIconProps), {}, {
+      icon: icon,
+      iconPosition: iconPosition,
+      testID: "button-left-icon"
+    })) : null, /*#__PURE__*/jsx(ButtonText, {
+      base: "body",
+      color: color,
+      variant: "bold",
+      children: children
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, sharedIconProps), {}, {
+      icon: icon,
+      iconPosition: iconPosition
+    })) : null]
+  });
 }
 
-var PrimitivePressable = Pressable;
-
-var _templateObject$q;
-var ButtonPressable = styled(PrimitivePressable)(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  min-width: ", ";\n  max-width: ", ";\n  width: ", ";\n  min-height: ", ";\n  background-color: ", ";\n  padding: ", ";\n  flex-direction: row;\n\n  /* Emulate inline-* css display by making the button taking only its necessary space */\n  align-self: flex-start;\n  border-radius: ", ";\n  border-color: ", ";\n  border-width: ", ";\n"])), function (_ref) {
+var ButtonPressable = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "ButtonPressable"
+})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.button.minWidth;
 }, function (_ref2) {
@@ -455,6 +560,9 @@ var ButtonPressable = styled(PrimitivePressable)(_templateObject$q || (_template
   return theme.kitt.button.borderWidth;
 });
 
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Button(_ref) {
   var children = _ref.children,
       _ref$type = _ref.type,
@@ -480,10 +588,10 @@ function Button(_ref) {
     stretch: stretch,
     disabled: disabled
   };
-  return /*#__PURE__*/React.createElement(ButtonPressable // eslint-disable-next-line unicorn/expiring-todo-comments
+  return /*#__PURE__*/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({}, sharedProps, {
+  , _objectSpread$d(_objectSpread$d({}, sharedProps), {}, {
     isPressed: isPressed,
     accessibilityRole: "button",
     testID: testID,
@@ -495,16 +603,19 @@ function Button(_ref) {
     },
     onPressOut: function handleButtonPressOut() {
       return setIsPressed(false);
-    }
-  }), /*#__PURE__*/React.createElement(ButtonContent, _extends({}, sharedProps, {
-    icon: icon,
-    iconPosition: iconPosition,
-    iconSpin: iconSpin
-  }), children));
+    },
+    children: /*#__PURE__*/jsx(ButtonContent, _objectSpread$d(_objectSpread$d({}, sharedProps), {}, {
+      icon: icon,
+      iconPosition: iconPosition,
+      iconSpin: iconSpin,
+      children: children
+    }))
+  }));
 }
 
-var _templateObject$p;
-var Container$5 = styled(PrimitiveView)(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+var Container$6 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Card__Container"
+})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
       type = _ref.type;
   return theme.kitt.card[type].backgroundColor;
@@ -525,9 +636,44 @@ var Container$5 = styled(PrimitiveView)(_templateObject$p || (_templateObject$p
 function Card(_ref6) {
   var children = _ref6.children,
       type = _ref6.type;
-  return /*#__PURE__*/React.createElement(Container$5, {
-    type: type
-  }, children);
+  return /*#__PURE__*/jsx(Container$6, {
+    type: type,
+    children: children
+  });
+}
+
+var StyledEmoji = /*#__PURE__*/styled.Image.withConfig({
+  displayName: "Emoji__StyledEmoji"
+})(["width:", "px;height:", "px;"], function (_ref) {
+  var size = _ref.size;
+  return size;
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size;
+});
+function Emoji(_ref3) {
+  var emoji = _ref3.emoji,
+      size = _ref3.size,
+      style = _ref3.style;
+
+  var _useMemo = useMemo(function () {
+    return parse(emoji, {
+      // on native plaforms, you can't display svg as Image
+      assetType: Platform.OS === 'web' ? 'svg' : 'png'
+    });
+  }, [emoji]),
+      _useMemo2 = _slicedToArray(_useMemo, 1),
+      emojiData = _useMemo2[0];
+
+  if (!emojiData) return null;
+  return /*#__PURE__*/jsx(StyledEmoji, {
+    size: size,
+    accessibilityLabel: emojiData.text,
+    source: {
+      uri: emojiData.url
+    },
+    style: style
+  });
 }
 
 var defaultOpenLinkBehavior = {
@@ -535,16 +681,20 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$7 = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$9 = ["as", "href", "openLinkBehavior", "onPress"];
+
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
       _ref$openLinkBehavior = _ref.openLinkBehavior,
       openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
       onPress = _ref.onPress,
-      rest = _objectWithoutProperties(_ref, _excluded$7);
+      rest = _objectWithoutProperties(_ref, _excluded$9);
 
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/jsx(Component, _objectSpread$c(_objectSpread$c({}, rest), {}, {
     onPress: function handleOnPress() {
       if (onPress) onPress();
       if (!href) return;
@@ -552,13 +702,13 @@ function ExternalLink(_ref) {
       switch (openLinkBehavior["native"]) {
         case 'openInModal':
         case undefined:
-          Linking.openURL(href)["catch"](function (err) {
+          openBrowserAsync(href)["catch"](function (err) {
             console.error("An error occurred while opening ".concat(href), err);
           });
           break;
 
         case 'openBrowserApp':
-          openBrowserAsync(href)["catch"](function (err) {
+          Linking.openURL(href)["catch"](function (err) {
             console.error("An error occurred while opening ".concat(href), err);
           });
           break;
@@ -587,74 +737,34 @@ function InputFeedback(_ref) {
   var state = _ref.state,
       testID = _ref.testID,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(Typography.Text, {
+  return /*#__PURE__*/jsx(Typography.Text, {
     base: "body-small",
     color: getColorFromState(state),
-    testID: testID
-  }, children);
+    testID: testID,
+    children: children
+  });
 }
 
-var 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
-};
-var 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
-};
-
-var _templateObject$o, _templateObject2$b, _templateObject3$7, _templateObject4$6;
-var FieldContainer = styled(PrimitiveView)(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  padding: 5px 0 10px;\n"])));
-var FeedbackContainer = styled(PrimitiveView)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+var FieldContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldContainer"
+})(["padding:5px 0 10px;"]);
+var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FeedbackContainer"
+})(["", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.SMALL
   }, 'padding-top: 10px', 'padding-top: 5px');
 });
-var FieldLabelContainer = styled(PrimitiveView)(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n"])), function (_ref2) {
+var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldLabelContainer"
+})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.inputField.labelContainerPaddingBottom;
 });
-var LabelContainer = styled(PrimitiveView)(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref3) {
+var LabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__LabelContainer"
+})(["margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.forms.inputField.iconMarginLeft;
 });
@@ -663,7 +773,15 @@ function InputField(_ref4) {
       labelFeedback = _ref4.labelFeedback,
       input = _ref4.input,
       feedback = _ref4.feedback;
-  return /*#__PURE__*/React.createElement(FieldContainer, null, label ? /*#__PURE__*/React.createElement(FieldLabelContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, label), labelFeedback) : null, input, feedback ? /*#__PURE__*/React.createElement(FeedbackContainer, null, feedback) : null);
+  return /*#__PURE__*/jsxs(FieldContainer, {
+    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
+      children: [/*#__PURE__*/jsx(LabelContainer, {
+        children: label
+      }), labelFeedback]
+    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+      children: feedback
+    }) : null]
+  });
 }
 
 var useInputText = function () {
@@ -694,10 +812,12 @@ var useInputText = function () {
   };
 };
 
-var _excluded$6 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
+var _excluded$8 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
+
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var _templateObject$n, _templateObject2$a, _templateObject3$6, _templateObject4$5;
-var styledTextInputMixin = css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-property-value-allowed-list */\n  background-color: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  font-size: ", ";\n  color: ", ";\n  font-family: ", ";\n"])), function (_ref) {
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
   var theme = _ref.theme,
       state = _ref.state;
   return state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
@@ -713,7 +833,8 @@ var styledTextInputMixin = css(_templateObject$n || (_templateObject$n = _tagged
   return theme.kitt.forms.input.states[state].borderColor;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.kitt.typography.types.bodies.configs.body.baseAndSmall.fontSize;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
 }, function (_ref6) {
   var theme = _ref6.theme,
       state = _ref6.state;
@@ -722,26 +843,34 @@ var styledTextInputMixin = css(_templateObject$n || (_templateObject$n = _tagged
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
-var Input = styled(TextInput)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-bang-space-before */\n  /* stylelint-disable comment-word-disallowed-list */\n\n  /* FIXME: text input is not vertically centered on iOS because of bigger line-height */\n  ", "\n  padding: ", ";\n  line-height: ", ";\n  min-height: ", "px;\n"])), styledTextInputMixin, function (_ref8) {
+var Input = /*#__PURE__*/styled(TextInput).withConfig({
+  displayName: "InputText__Input"
+})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, function (_ref8) {
   var theme = _ref8.theme,
       multiline = _ref8.multiline;
-  return !multiline && "ios" === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding;
+  return !multiline && Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding;
 }, function (_ref9) {
   var theme = _ref9.theme,
       multiline = _ref9.multiline;
-  return !multiline && "ios" === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight;
+  if (!multiline && Platform.OS === 'ios') return 0;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
 }, function (_ref10) {
   var minHeight = _ref10.minHeight;
   return minHeight;
 });
-var Container$4 = styled(PrimitiveView)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n"])), function (_ref11) {
+var Container$5 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputText__Container"
+})(["margin-top:", ";margin-bottom:", ";"], function (_ref11) {
   var theme = _ref11.theme;
   return theme.kitt.forms.input.marginTop;
 }, function (_ref12) {
   var theme = _ref12.theme;
   return theme.kitt.forms.input.marginBottom;
 });
-var PasswordButtonContainer = styled(PrimitivePressable)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  justify-content: center;\n  padding: ", "px;\n"])), function (_ref13) {
+var PasswordButtonContainer = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "InputText__PasswordButtonContainer"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], function (_ref13) {
   var theme = _ref13.theme;
   return theme.kitt.forms.input.passwordButtonIconSize / 2;
 });
@@ -791,7 +920,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
       disabled = _ref15$disabled === void 0 ? false : _ref15$disabled,
       _onFocus = _ref15.onFocus,
       _onBlur = _ref15.onBlur,
-      props = _objectWithoutProperties(_ref15, _excluded$6);
+      props = _objectWithoutProperties(_ref15, _excluded$8);
 
   var _useInputText = useInputText(),
       isFocused = _useInputText.isFocused,
@@ -800,54 +929,62 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
       isPasswordVisible = _useInputText.isPasswordVisible,
       togglePasswordVisibility = _useInputText.togglePasswordVisibility;
 
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   var state = internalForceState || getInputState({
     isFocused: isFocused,
     isDisabled: disabled,
     formState: formState
   });
-  return /*#__PURE__*/React.createElement(Container$4, null, /*#__PURE__*/React.createElement(Input, _extends({
-    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: function onFocus(e) {
-      handleInputFocus();
-      if (_onFocus) _onFocus(e);
-    },
-    onBlur: function onBlur(e) {
-      handleInputBlur();
-      if (_onBlur) _onBlur(e);
-    }
-  })), type === 'password' && !disabled && /*#__PURE__*/React.createElement(PasswordButtonContainer, {
-    accessibilityRole: "button",
-    onPress: togglePasswordVisibility
-  }, /*#__PURE__*/React.createElement(TypographyIcon, {
-    icon: isPasswordVisible ? /*#__PURE__*/React.createElement(EyeIcon, null) : /*#__PURE__*/React.createElement(EyeOffIcon, null),
-    size: theme.kitt.forms.input.passwordButtonIconSize,
-    color: theme.kitt.forms.input.states[state].passwordButtonIconColor
-  })));
+  return /*#__PURE__*/jsxs(Container$5, {
+    children: [/*#__PURE__*/jsx(Input, _objectSpread$b(_objectSpread$b({
+      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: function onFocus(e) {
+        handleInputFocus();
+        if (_onFocus) _onFocus(e);
+      },
+      onBlur: function onBlur(e) {
+        handleInputBlur();
+        if (_onBlur) _onBlur(e);
+      }
+    })), type === 'password' && !disabled && /*#__PURE__*/jsx(PasswordButtonContainer, {
+      accessibilityRole: "button",
+      onPress: togglePasswordVisibility,
+      children: /*#__PURE__*/jsx(TypographyIcon, {
+        icon: isPasswordVisible ? /*#__PURE__*/jsx(EyeIcon, {}) : /*#__PURE__*/jsx(EyeOffIcon, {}),
+        size: theme.kitt.forms.input.passwordButtonIconSize,
+        color: theme.kitt.forms.input.states[state].passwordButtonIconColor
+      })
+    })]
+  });
 });
 
 function Label(_ref) {
-  _ref.htmlFor;
-      var children = _ref.children;
-  return /*#__PURE__*/React.createElement(Typography.Text, {
-    base: "body"
-  }, children);
+  var htmlFor = _ref.htmlFor,
+      children = _ref.children;
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body",
+    children: Platform.OS === 'web' ? /*#__PURE__*/jsx("label", {
+      htmlFor: htmlFor,
+      children: children
+    }) : children
+  });
 }
 
-var _templateObject$m, _templateObject2$9, _templateObject3$5, _templateObject4$4, _templateObject5;
-var OuterRadio = styled(PrimitiveView)(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+var OuterRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__OuterRadio"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
@@ -868,7 +1005,9 @@ var OuterRadio = styled(PrimitiveView)(_templateObject$m || (_templateObject$m =
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = styled(PrimitiveView)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
+var SelectedOuterRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__SelectedOuterRadio"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.forms.radio.checked.backgroundColor;
 }, function (_ref8) {
@@ -881,7 +1020,9 @@ var SelectedOuterRadio = styled(PrimitiveView)(_templateObject2$9 || (_templateO
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = styled(PrimitiveView)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n"])), function (_ref11) {
+var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__SelectedInnerRadio"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
   var theme = _ref11.theme;
   return theme.kitt.forms.radio.checked.innerBackgroundColor;
 }, function (_ref12) {
@@ -894,8 +1035,12 @@ var SelectedInnerRadio = styled(PrimitiveView)(_templateObject3$5 || (_templateO
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$3 = styled(PrimitivePressable)(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n"])));
-var Text = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n"])), function (_ref15) {
+var Container$4 = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "Radio__Container"
+})(["flex-direction:row;align-items:center;"]);
+var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "Radio__Text"
+})(["margin-left:", "px;"], function (_ref15) {
   var theme = _ref15.theme;
   return theme.kitt.spacing * 2;
 });
@@ -907,7 +1052,7 @@ function Radio(_ref16) {
       _ref16$disabled = _ref16.disabled,
       disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
       children = _ref16.children;
-  return /*#__PURE__*/React.createElement(Container$3, {
+  return /*#__PURE__*/jsxs(Container$4, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -915,29 +1060,37 @@ function Radio(_ref16) {
     focusable: checked && !disabled,
     onPress: function handlePress() {
       onChange(value);
-    }
-  }, checked && !disabled ? /*#__PURE__*/React.createElement(SelectedOuterRadio, null, /*#__PURE__*/React.createElement(SelectedInnerRadio, null)) : /*#__PURE__*/React.createElement(OuterRadio, {
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(Text, {
-    base: "body",
-    color: disabled ? 'black-light' : 'black'
-  }, children));
+    },
+    children: [checked && !disabled ? /*#__PURE__*/jsx(SelectedOuterRadio, {
+      children: /*#__PURE__*/jsx(SelectedInnerRadio, {})
+    }) : /*#__PURE__*/jsx(OuterRadio, {
+      disabled: disabled
+    }), /*#__PURE__*/jsx(Text, {
+      base: "body",
+      color: disabled ? 'black-light' : 'black',
+      children: children
+    })]
+  });
 }
 
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function TextArea(_ref) {
   var props = _extends({}, _ref);
 
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(InputText, _extends({
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(InputText, _objectSpread$a(_objectSpread$a({
     multiline: true
-  }, props, {
+  }, props), {}, {
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
   }));
 }
 
-var _templateObject$l;
-var Body = styled(PrimitiveView)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  flex: 1;\n"])), function (_ref) {
+var Body = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Body"
+})(["", " background-color:", ";flex:1;"], function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.MEDIUM
@@ -948,11 +1101,14 @@ var Body = styled(PrimitiveView)(_templateObject$l || (_templateObject$l = _tagg
 });
 function FullScreenModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(Body, null, children);
+  return /*#__PURE__*/jsx(Body, {
+    children: children
+  });
 }
 
-var _templateObject$k, _templateObject2$8, _templateObject3$4;
-var SideContainer = styled(PrimitiveView)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+var SideContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__SideContainer"
+})(["", ""], function (_ref) {
   var theme = _ref.theme,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side;
@@ -969,7 +1125,9 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = styled(PrimitiveView)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  ", ";\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  flex-direction: row;\n  align-items: center;\n"])), function (_ref2) {
+var Header = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header"
+})(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
   var theme = _ref2.theme,
       _ref2$insetTop = _ref2.insetTop,
       insetTop = _ref2$insetTop === void 0 ? 0 : _ref2$insetTop;
@@ -984,7 +1142,9 @@ var Header = styled(PrimitiveView)(_templateObject2$8 || (_templateObject2$8 = _
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = styled(PrimitiveView)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref4) {
+var HeaderContent = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__HeaderContent"
+})(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
   var theme = _ref4.theme,
       leftWidth = _ref4.leftWidth,
       rightWidth = _ref4.rightWidth,
@@ -1022,8 +1182,8 @@ function FullScreenModalHeader(_ref6) {
       right = _ref6.right,
       left = _ref6.left;
 
-  var _useSafeAreaInsets = useSafeAreaInsets();
-      _useSafeAreaInsets.top;
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+      top = _useSafeAreaInsets.top;
 
   var dimensions = useWindowDimensions();
 
@@ -1049,38 +1209,69 @@ function FullScreenModalHeader(_ref6) {
     setRightWidth(event.nativeEvent.layout.width);
   };
 
-  return /*#__PURE__*/React.createElement(Header, {
-    insetTop: undefined
-  }, left ? /*#__PURE__*/React.createElement(SideContainer, {
-    onLayout: function onLayout(e) {
-      return handleLayoutChange(e, 'left');
-    }
-  }, left) : null, /*#__PURE__*/React.createElement(HeaderContent, {
-    windowWidth: dimensions.width,
-    leftWidth: leftWidth,
-    rightWidth: rightWidth
-  }, children), right ? /*#__PURE__*/React.createElement(SideContainer, {
-    side: "right",
-    onLayout: function onLayout(e) {
-      return handleLayoutChange(e, 'right');
-    }
-  }, right) : null);
+  return /*#__PURE__*/jsxs(Header, {
+    insetTop: Platform.OS === 'ios' ? undefined : top,
+    children: [left ? /*#__PURE__*/jsx(SideContainer, {
+      onLayout: function onLayout(e) {
+        return handleLayoutChange(e, 'left');
+      },
+      children: left
+    }) : null, /*#__PURE__*/jsx(HeaderContent, {
+      windowWidth: dimensions.width,
+      leftWidth: leftWidth,
+      rightWidth: rightWidth,
+      children: children
+    }), right ? /*#__PURE__*/jsx(SideContainer, {
+      side: "right",
+      onLayout: function onLayout(e) {
+        return handleLayoutChange(e, 'right');
+      },
+      children: right
+    }) : null]
+  });
 }
 
-var _templateObject$j;
-var Container$2 = styled(PrimitiveView)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n"])), function (_ref) {
+var Container$3 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "FullScreenModal__Container"
+})(["flex:1;background-color:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.colors.uiBackground;
 });
 function FullScreenModal(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(Container$2, null, children);
+  return /*#__PURE__*/jsx(Container$3, {
+    children: children
+  });
 }
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-var _templateObject$i;
-var PressableIconButton = styled(PrimitivePressable)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  background-color: transparent;\n\n  ", ";\n"])), function (_ref) {
+var _excluded$7 = ["as", "children"];
+
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function StyleWebWrapper(_ref) {
+  var as = _ref.as,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$7);
+
+  if (Platform.OS !== 'web') return children;
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsx(as || 'div', _objectSpread$9(_objectSpread$9({}, props), {}, {
+    children: children
+  }));
+}
+
+var _excluded$6 = ["color"];
+
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var PressableIconButtonWebWrapper = undefined;
+var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "PressableIconButton__StyledPressableIconButton"
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.iconButton.borderRadius;
 }, function (_ref2) {
@@ -1090,15 +1281,36 @@ var PressableIconButton = styled(PrimitivePressable)(_templateObject$i || (_temp
   var theme = _ref3.theme;
   return theme.kitt.iconButton.height;
 }, function (_ref4) {
-  var theme = _ref4.theme;
-      _ref4.color;
-      _ref4.disabled;
-  theme.kitt.iconButton;
-  return undefined;
+  var theme = _ref4.theme,
+      disabled = _ref4.disabled;
+  var iconButton = theme.kitt.iconButton;
+
+  if (Platform.OS !== 'web') {
+    return undefined;
+  }
+
+  var transition = iconButton.transition;
+
+  if (disabled) {
+    return "\n        background-color: ".concat(iconButton.disabled.backgroundColor, ";\n      ");
+  }
+
+  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
 });
+function PressableIconButton(_ref5) {
+  var color = _ref5.color,
+      props = _objectWithoutProperties(_ref5, _excluded$6);
+
+  return /*#__PURE__*/jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    "data-color-white": color === 'white' ? true : undefined,
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$8({}, props))
+  });
+}
 
-var _templateObject$h, _templateObject2$7;
-var AnimatedIconButtonBackground = styled(Animated$1.View)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])), function (_ref) {
+var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated$1.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground"
+})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], function (_ref) {
   var theme = _ref.theme,
       color = _ref.color,
       disabled = _ref.disabled;
@@ -1116,14 +1328,16 @@ var AnimatedIconButtonBackground = styled(Animated$1.View)(_templateObject$h ||
   var theme = _ref4.theme;
   return theme.kitt.iconButton.height;
 });
-var AnimatedViewContainer = styled(Animated$1.View)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"])));
+var AnimatedViewContainer = /*#__PURE__*/styled(Animated$1.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedViewContainer"
+})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
 function PressableAnimatedContainer(_ref5) {
   var disabled = _ref5.disabled,
       _ref5$color = _ref5.color,
       color = _ref5$color === void 0 ? 'black' : _ref5$color,
       children = _ref5.children,
       onPress = _ref5.onPress;
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   var pressed = useSharedValue(false);
   var opacityStyles = useAnimatedStyle(function () {
     var _f = function () {
@@ -1138,7 +1352,7 @@ function PressableAnimatedContainer(_ref5) {
     };
     _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);
@@ -1172,14 +1386,14 @@ function PressableAnimatedContainer(_ref5) {
     };
     _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.createElement(PressableIconButton, {
+  return /*#__PURE__*/jsx(PressableIconButton, {
     accessibilityRole: "button",
     disabled: disabled,
     color: color,
@@ -1189,24 +1403,27 @@ function PressableAnimatedContainer(_ref5) {
     },
     onPressOut: function onPressOut() {
       pressed.value = false;
-    }
-  }, /*#__PURE__*/React.createElement(AnimatedViewContainer, {
-    style: disabled ? [{
-      transform: [{
-        scale: 1
-      }]
-    }] : [scaleStyles]
-  }, /*#__PURE__*/React.createElement(AnimatedIconButtonBackground, {
-    disabled: disabled,
-    color: color,
-    style: disabled ? [{
-      opacity: 1
-    }] : [opacityStyles]
-  }), children));
+    },
+    children: /*#__PURE__*/jsxs(AnimatedViewContainer, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: [/*#__PURE__*/jsx(AnimatedIconButtonBackground, {
+        disabled: disabled,
+        color: color,
+        style: disabled ? [{
+          opacity: 1
+        }] : [opacityStyles]
+      }), children]
+    })
+  });
 }
 
-var _templateObject$g;
-var IconButtonContentBorder = styled(PrimitiveView)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  border: ", ";\n  border-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", "px;\n"])), function (_ref) {
+var IconButtonContentBorder = /*#__PURE__*/styled.View.withConfig({
+  displayName: "IconButton__IconButtonContentBorder"
+})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
   var theme = _ref.theme;
   return "".concat(theme.kitt.iconButton.borderWidth, "px solid");
 }, function (_ref2) {
@@ -1228,12 +1445,13 @@ function IconButtonContent(_ref6) {
   var disabled = _ref6.disabled,
       color = _ref6.color,
       icon = _ref6.icon;
-  return /*#__PURE__*/React.createElement(IconButtonContentBorder, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(TypographyIcon, {
-    color: disabled ? 'black-light' : color,
-    icon: icon
-  }));
+  return /*#__PURE__*/jsx(IconButtonContentBorder, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsx(TypographyIcon, {
+      color: disabled ? 'black-light' : color,
+      icon: icon
+    })
+  });
 }
 
 function IconButton(_ref7) {
@@ -1241,33 +1459,44 @@ function IconButton(_ref7) {
       color = _ref7.color,
       disabled = _ref7.disabled,
       onPress = _ref7.onPress;
-  return /*#__PURE__*/React.createElement(PressableAnimatedContainer, {
+  return /*#__PURE__*/jsx(PressableAnimatedContainer, {
     color: color,
     disabled: disabled,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(IconButtonContent, {
-    disabled: disabled,
-    color: color,
-    icon: icon
-  }));
+    onPress: onPress,
+    children: /*#__PURE__*/jsx(IconButtonContent, {
+      disabled: disabled,
+      color: color,
+      icon: icon
+    })
+  });
 }
 
 var _excluded$5 = ["children"];
 
-var _templateObject$f;
-var ContentView$1 = styled(PrimitiveView)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  flex: 1 0 0%;\n  align-self: center;\n"])));
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemContent__ContentView"
+})(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/React.createElement(ContentView$1, rest, children);
+  return /*#__PURE__*/jsx(ContentView$1, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+    children: children
+  }));
 }
 
 var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
 
-var _templateObject$e, _templateObject2$6;
-var SideContainerView = styled(PrimitiveView)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var SideContainerView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemSideContent__SideContainerView"
+})(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
   var theme = _ref.theme,
       side = _ref.side;
   return side === 'right' ? theme.kitt.listItem.innerMargin : 0;
@@ -1283,11 +1512,15 @@ function ListItemSideContainer(_ref3) {
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
       rest = _objectWithoutProperties(_ref3, _excluded$4);
 
-  return /*#__PURE__*/React.createElement(SideContainerView, _extends({
+  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$6(_objectSpread$6({
     side: side
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 }
-var SideContentView = styled(PrimitiveView)(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  align-self: ", ";\n"])), function (_ref4) {
+var SideContentView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemSideContent__SideContentView"
+})(["align-self:", ";"], function (_ref4) {
   var align = _ref4.align;
   return align;
 });
@@ -1297,19 +1530,21 @@ function ListItemSideContent(_ref5) {
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
       rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
-  return /*#__PURE__*/React.createElement(SideContentView, _extends({
+  return /*#__PURE__*/jsx(SideContentView, _objectSpread$6(_objectSpread$6({
     align: align
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 }
 
 var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 
-var _templateObject$d;
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ContainerView = styled(PrimitiveView)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  flex-direction: row;\n  padding: ", ";\n  ", ";\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_ref) {
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ContainerView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItem__ContainerView"
+})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
   var withPadding = _ref.withPadding,
       theme = _ref.theme;
   return withPadding ? theme.kitt.listItem.padding : 0;
@@ -1347,26 +1582,35 @@ function ListItem(_ref5) {
       onPress = _ref5.onPress,
       rest = _objectWithoutProperties(_ref5, _excluded$3);
 
-  var Wrapper = onPress ? PrimitivePressable : Fragment;
-  var wrapperProps = onPress ? _objectSpread$1({
+  var Wrapper = onPress ? Pressable : Fragment;
+  var wrapperProps = onPress ? _objectSpread$5({
     accessibilityRole: 'button',
     onPress: onPress
   }, rest) : undefined;
   var containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(ContainerView, _extends({
-    withPadding: withPadding,
-    borders: borders
-  }, containerProps), left ? /*#__PURE__*/React.createElement(ListItemSideContainer, {
-    side: "left"
-  }, left) : null, /*#__PURE__*/React.createElement(ListItemContent, null, children), right ? /*#__PURE__*/React.createElement(ListItemSideContainer, {
-    side: "right"
-  }, right) : null));
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread$5(_objectSpread$5({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$5(_objectSpread$5({
+      withPadding: withPadding,
+      borders: borders
+    }, containerProps), {}, {
+      children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "left",
+        children: left
+      }) : null, /*#__PURE__*/jsx(ListItemContent, {
+        children: children
+      }), right ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "right",
+        children: right
+      }) : null]
+    }))
+  }));
 }
 ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
 function getActivityIndicatorSize(size) {
+  if (Platform.OS === 'android') return size;
   return size < 36 ? 'small' : 'large';
 }
 
@@ -1375,9 +1619,9 @@ function Loader(_ref) {
       color = _ref$color === void 0 ? 'primary' : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 20 : _ref$size;
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   var colorHex = theme.kitt.typography.colors[color];
-  return /*#__PURE__*/React.createElement(ActivityIndicator, {
+  return /*#__PURE__*/jsx(ActivityIndicator, {
     testID: "ActivityIndicator",
     color: colorHex,
     size: getActivityIndicatorSize(size)
@@ -1387,16 +1631,17 @@ function Loader(_ref) {
 function LargeLoader(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color;
-  return /*#__PURE__*/React.createElement(Loader, {
+  return /*#__PURE__*/jsx(Loader, {
     color: color,
     size: 60
   });
 }
 
-var _templateObject$c, _templateObject2$5, _templateObject3$3, _templateObject4$3;
 var xIconSize = 14;
 var mainIconSize = 20;
-var Container$1 = styled(PrimitiveView)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n"])), function (_ref) {
+var Container$2 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Message__Container"
+})(["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;"], function (_ref) {
   var theme = _ref.theme,
       noRadius = _ref.noRadius;
   return noRadius ? 0 : theme.kitt.spacing * 5;
@@ -1420,18 +1665,24 @@ var Container$1 = styled(PrimitiveView)(_templateObject$c || (_templateObject$c
       insets = _ref6.insets;
   return ((_insets$top = insets === null || insets === void 0 ? void 0 : insets.top) !== null && _insets$top !== void 0 ? _insets$top : 0) + theme.kitt.spacing * 4;
 });
-var CloseContainer = styled(TouchableOpacity)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  padding: ", "px;\n"])), function (_ref7) {
+var CloseContainer = /*#__PURE__*/styled(TouchableOpacity).withConfig({
+  displayName: "Message__CloseContainer"
+})(["margin-left:", "px;padding:", "px;"], function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.spacing * 4;
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.kitt.spacing;
 });
-var IconContainer = styled(PrimitiveView)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref9) {
+var IconContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Message__IconContainer"
+})(["margin-right:", "px;"], function (_ref9) {
   var theme = _ref9.theme;
   return theme.kitt.spacing * 4;
 });
-var Content = styled(PrimitiveText)(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  text-align: ", ";\n  flex: 1;\n"])), function (_ref10) {
+var Content = /*#__PURE__*/styled.Text.withConfig({
+  displayName: "Message__Content"
+})(["text-align:", ";flex:1;"], function (_ref10) {
   var centeredText = _ref10.centeredText;
   return centeredText ? 'center' : 'left';
 });
@@ -1453,16 +1704,16 @@ var getColorByType = function (type) {
 function getIconContent(type) {
   switch (type) {
     case 'warning':
-      return /*#__PURE__*/React.createElement(AlertCircleIcon, null);
+      return /*#__PURE__*/jsx(AlertCircleIcon, {});
 
     case 'success':
-      return /*#__PURE__*/React.createElement(CheckIcon, null);
+      return /*#__PURE__*/jsx(CheckIcon, {});
 
     case 'danger':
-      return /*#__PURE__*/React.createElement(AlertTriangleIcon, null);
+      return /*#__PURE__*/jsx(AlertTriangleIcon, {});
 
     default:
-      return /*#__PURE__*/React.createElement(InfoIcon, null);
+      return /*#__PURE__*/jsx(InfoIcon, {});
   }
 }
 
@@ -1477,50 +1728,59 @@ function Message(_ref11) {
       onDismiss = _ref11.onDismiss,
       insets = _ref11.insets;
   var color = getColorByType(type);
-  return /*#__PURE__*/React.createElement(Container$1, {
+  return /*#__PURE__*/jsxs(Container$2, {
     type: type,
     noRadius: noRadius,
-    insets: insets
-  }, !centeredText ? /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon, {
-    size: mainIconSize,
-    color: color,
-    icon: getIconContent(type)
-  })) : null, /*#__PURE__*/React.createElement(Content, {
-    type: type,
-    centeredText: centeredText
-  }, /*#__PURE__*/React.createElement(Typography.Text, {
-    base: "body-small",
-    color: color
-  }, children)), onDismiss ? /*#__PURE__*/React.createElement(CloseContainer, {
-    onPress: onDismiss
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(XIcon, null),
-    size: xIconSize,
-    color: color
-  })) : null);
+    insets: insets,
+    children: [!centeredText ? /*#__PURE__*/jsx(IconContainer, {
+      children: /*#__PURE__*/jsx(Icon, {
+        size: mainIconSize,
+        color: color,
+        icon: getIconContent(type)
+      })
+    }) : null, /*#__PURE__*/jsx(Content, {
+      type: type,
+      centeredText: centeredText,
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: "body-small",
+        color: color,
+        children: children
+      })
+    }), onDismiss ? /*#__PURE__*/jsx(CloseContainer, {
+      onPress: onDismiss,
+      children: /*#__PURE__*/jsx(Icon, {
+        icon: /*#__PURE__*/jsx(XIcon, {}),
+        size: xIconSize,
+        color: color
+      })
+    }) : null]
+  });
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var OverlayPressable = styled(PrimitivePressable)(function (_ref) {
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
+  displayName: "Overlay__OverlayPressable"
+})(function (_ref) {
   var theme = _ref.theme;
-  return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
+  return _objectSpread$4(_objectSpread$4({}, StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.kitt.colors.overlay.dark
   });
 });
 function Overlay(_ref2) {
   var onPress = _ref2.onPress;
-  return /*#__PURE__*/React.createElement(OverlayPressable, {
+  return /*#__PURE__*/jsx(OverlayPressable, {
     accessibilityRole: "none",
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(PrimitiveView, null));
+    onPress: onPress,
+    children: /*#__PURE__*/jsx(View, {})
+  });
 }
 
-var PrimitiveScrollView = ScrollView;
-
-var _templateObject$b;
-var BodyView = styled(PrimitiveView)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  padding: ", "px ", "px;\n"])), function (_ref) {
+var BodyView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Body__BodyView"
+})(["padding:", "px ", "px;"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 6;
 }, function (_ref2) {
@@ -1529,11 +1789,16 @@ var BodyView = styled(PrimitiveView)(_templateObject$b || (_templateObject$b = _
 });
 function ModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(PrimitiveScrollView, null, /*#__PURE__*/React.createElement(BodyView, null, children));
+  return /*#__PURE__*/jsx(ScrollView, {
+    children: /*#__PURE__*/jsx(BodyView, {
+      children: children
+    })
+  });
 }
 
-var _templateObject$a;
-var FooterView = styled(PrimitiveView)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  padding: ", "px;\n  border-top-width: 1px;\n  border-top-color: ", ";\n"])), function (_ref) {
+var FooterView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Footer__FooterView"
+})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 4;
 }, function (_ref2) {
@@ -1542,28 +1807,37 @@ var FooterView = styled(PrimitiveView)(_templateObject$a || (_templateObject$a =
 });
 function ModalFooter(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(FooterView, null, children);
+  return /*#__PURE__*/jsx(FooterView, {
+    children: children
+  });
 }
 
 var OnCloseContext = /*#__PURE__*/createContext(function () {});
 
-var _templateObject$9, _templateObject2$4, _templateObject3$2, _templateObject4$2;
-var HeaderView = styled(PrimitiveView)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: ", "px;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: 1px;\n  border-bottom-color: ", ";\n  min-height: 57px;\n"])), function (_ref) {
+var HeaderView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__HeaderView"
+})(["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;"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 2;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = styled(PrimitiveView)(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-right: ", "px;\n"])), function (_ref3) {
+var LeftIconView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__LeftIconView"
+})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = styled(PrimitiveView)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-left: ", "px;\n"])), function (_ref4) {
+var RightIconView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__RightIconView"
+})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = styled(PrimitiveView)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  flex-shrink: 1;\n"])), function (_ref5) {
+var TitleView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__TitleView"
+})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
   var theme = _ref5.theme,
       isIconLeft = _ref5.isIconLeft;
   return isIconLeft ? 0 : theme.kitt.spacing * 2;
@@ -1574,24 +1848,34 @@ function ModalHeader(_ref6) {
       children = _ref6.children;
   var onClose = useContext(OnCloseContext);
   var isIconLeft = !!left;
-  return /*#__PURE__*/React.createElement(HeaderView, null, isIconLeft && /*#__PURE__*/React.createElement(LeftIconView, null, left), /*#__PURE__*/React.createElement(TitleView, {
-    isIconLeft: isIconLeft
-  }, children), right !== undefined ? right : /*#__PURE__*/React.createElement(RightIconView, null, /*#__PURE__*/React.createElement(Button, {
-    type: "subtle-dark",
-    icon: /*#__PURE__*/React.createElement(XIcon, null),
-    onPress: onClose
-  })));
+  return /*#__PURE__*/jsxs(HeaderView, {
+    children: [isIconLeft && /*#__PURE__*/jsx(LeftIconView, {
+      children: left
+    }), /*#__PURE__*/jsx(TitleView, {
+      isIconLeft: isIconLeft,
+      children: children
+    }), right !== undefined ? right : /*#__PURE__*/jsx(RightIconView, {
+      children: /*#__PURE__*/jsx(Button, {
+        type: "subtle-dark",
+        icon: /*#__PURE__*/jsx(XIcon, {}),
+        onPress: onClose
+      })
+    })]
+  });
 }
 
-var _templateObject$8, _templateObject2$3;
-var ModalView = styled(PrimitiveView)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", "px ", "px;\n"])), function (_ref) {
+var ModalView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Modal__ModalView"
+})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 20;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = styled(PrimitiveView)(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 540px;\n  height: auto;\n  width: 100%;\n  border-radius: ", ";\n  background-color: ", ";\n"])), function (_ref3) {
+var ContentView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Modal__ContentView"
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", ";background-color:", ";"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.card.borderRadius;
 }, function (_ref4) {
@@ -1604,18 +1888,24 @@ function Modal(_ref5) {
       onClose = _ref5.onClose,
       onEntered = _ref5.onEntered,
       onExited = _ref5.onExited;
-  return /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
-    value: onClose
-  }, /*#__PURE__*/React.createElement(Modal$1, {
-    transparent: true,
-    animationType: "fade",
-    visible: visible,
-    onShow: onEntered,
-    onDismiss: onExited,
-    onRequestClose: onClose
-  }, /*#__PURE__*/React.createElement(ModalView, null, /*#__PURE__*/React.createElement(Overlay, {
-    onPress: onClose
-  }), /*#__PURE__*/React.createElement(ContentView, null, children))));
+  return /*#__PURE__*/jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: /*#__PURE__*/jsx(Modal$1, {
+      transparent: true,
+      animationType: "fade",
+      visible: visible,
+      onShow: onEntered,
+      onDismiss: onExited,
+      onRequestClose: onClose,
+      children: /*#__PURE__*/jsxs(ModalView, {
+        children: [/*#__PURE__*/jsx(Overlay, {
+          onPress: onClose
+        }), /*#__PURE__*/jsx(ContentView, {
+          children: children
+        })]
+      })
+    })
+  });
 }
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
@@ -1630,25 +1920,25 @@ function Notification(_ref) {
   var _useSafeAreaInsets = useSafeAreaInsets(),
       top = _useSafeAreaInsets.top;
 
-  return /*#__PURE__*/React.createElement(Message, {
+  return /*#__PURE__*/jsx(Message, {
     noRadius: true,
     type: type,
     centeredText: centeredText,
     insets: {
       top: top
     },
-    onDismiss: onDelete
-  }, children);
+    onDismiss: onDelete,
+    children: children
+  });
 }
 
-var PrimitiveLink = Text$1;
-
-var _templateObject$7;
-var Flex = styled(PrimitiveView).withConfig({
+var Flex = /*#__PURE__*/styled.View.withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
   }
-})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: wrap;\n  padding: ", "px;\n"])), function (_ref) {
+}).withConfig({
+  displayName: "Flex"
+})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], function (_ref) {
   var direction = _ref.direction;
   return direction;
 }, function (_ref2) {
@@ -1660,8 +1950,6 @@ var Flex = styled(PrimitiveView).withConfig({
 
 var storyPadding = 16;
 
-var _templateObject$6;
-
 var getBackgroundColorFromBlockColor = function (theme) {
   var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'transparent';
 
@@ -1700,7 +1988,9 @@ var useStoryBlockColor = function (color) {
   var storyBlockColor = useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-var StyledStoryBlockView = styled(PrimitiveView)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  padding: 16px ", "px 0;\n  margin: 0 -", "px;\n  background: ", ";\n"])), storyPadding, storyPadding, function (_ref) {
+var StyledStoryBlockView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryBlock__StyledStoryBlockView"
+})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
   var theme = _ref.theme,
       background = _ref.background;
   return getBackgroundColorFromBlockColor(theme, background);
@@ -1708,40 +1998,52 @@ var StyledStoryBlockView = styled(PrimitiveView)(_templateObject$6 || (_template
 function StoryBlock(_ref2) {
   var children = _ref2.children,
       background = _ref2.background;
-  return /*#__PURE__*/React.createElement(StyledStoryBlockView, {
-    background: background
-  }, /*#__PURE__*/React.createElement(StoryBlockColorContext.Provider, {
-    value: getTypographyColorFromBlockColor(background)
-  }, /*#__PURE__*/React.createElement(StoryBlockBackgroundContext.Provider, {
-    value: background
-  }, children)));
-}
-
-var _templateObject$5, _templateObject2$2;
-var StoryTitleContainer = styled(PrimitiveView)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
-var StorySubTitleContainer = styled(PrimitiveView)(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n"])));
+  return /*#__PURE__*/jsx(StyledStoryBlockView, {
+    background: background,
+    children: /*#__PURE__*/jsx(StoryBlockColorContext.Provider, {
+      value: getTypographyColorFromBlockColor(background),
+      children: /*#__PURE__*/jsx(StoryBlockBackgroundContext.Provider, {
+        value: background,
+        children: children
+      })
+    })
+  });
+}
+
+var StoryTitleContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryTitle__StoryTitleContainer"
+})(["margin-bottom:30px;"]);
+var StorySubTitleContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryTitle__StorySubTitleContainer"
+})(["margin-bottom:10px;"]);
 function StoryTitle(_ref) {
   var color = _ref.color,
       children = _ref.children,
       numberOfLines = _ref.numberOfLines;
-  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header1, {
-    variant: "bold",
-    base: "header1",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header1, {
+      variant: "bold",
+      base: "header1",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 function StoryTitleLevel2(_ref2) {
   var color = _ref2.color,
       children = _ref2.children,
       numberOfLines = _ref2.numberOfLines;
-  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header2, {
-    variant: "bold",
-    base: "header2",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header2, {
+      variant: "bold",
+      base: "header2",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 StoryTitleLevel2.displayName = 'StoryTitle.Level2';
@@ -1750,13 +2052,16 @@ function StoryTitleLevel3(_ref3) {
   var color = _ref3.color,
       children = _ref3.children,
       numberOfLines = _ref3.numberOfLines;
-  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header3, {
-    variant: "bold",
-    base: "header3",
-    medium: "header4",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header3, {
+      variant: "bold",
+      base: "header3",
+      medium: "header4",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 StoryTitleLevel3.displayName = 'StoryTitle.Level3';
@@ -1765,13 +2070,16 @@ function StoryTitleLevel4(_ref4) {
   var color = _ref4.color,
       children = _ref4.children,
       numberOfLines = _ref4.numberOfLines;
-  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header4, {
-    variant: "bold",
-    base: "header4",
-    medium: "header5",
-    color: useStoryBlockColor(color),
-    numberOfLines: numberOfLines
-  }, children));
+  return /*#__PURE__*/jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header4, {
+      variant: "bold",
+      base: "header4",
+      medium: "header5",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
 }
 
 StoryTitleLevel4.displayName = 'StoryTitle.Level3';
@@ -1779,63 +2087,89 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var _templateObject$4;
-var StoryContainer$1 = styled(PrimitiveScrollView)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  padding: ", "px;\n"])), storyPadding);
+var StoryContainer$1 = /*#__PURE__*/styled.ScrollView.withConfig({
+  displayName: "Story__StoryContainer"
+})(["padding:", "px;"], storyPadding);
 function Story(_ref) {
   var title = _ref.title,
       contentContainerStyle = _ref.contentContainerStyle,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(StoryContainer$1, {
-    contentContainerStyle: contentContainerStyle
-  }, /*#__PURE__*/React.createElement(StoryTitle, null, title), children);
+  return /*#__PURE__*/jsxs(StoryContainer$1, {
+    contentContainerStyle: contentContainerStyle,
+    children: [/*#__PURE__*/jsx(StoryTitle, {
+      children: title
+    }), children]
+  });
 }
 
-var _excluded$2 = ["title", "className", "children", "internalIsDemoSection"],
-    _excluded2 = ["title", "className", "children"],
-    _excluded3 = ["title", "className", "children"];
+var _excluded$2 = ["title", "children", "internalIsDemoSection"],
+    _excluded2 = ["title", "children"],
+    _excluded3 = ["title", "children"];
+
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var _templateObject$3, _templateObject2$1, _templateObject3$1, _templateObject4$1;
-var StyledSection = styled(PrimitiveView)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  margin-bottom: 32px;\n"])));
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledSection"
+})(["margin-bottom:32px;"]);
 function StorySection(_ref) {
-  var title = _ref.title;
-      _ref.className;
-      var children = _ref.children,
+  var title = _ref.title,
+      children = _ref.children,
       internalIsDemoSection = _ref.internalIsDemoSection,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/React.createElement(StyledSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level2, null, title), children);
+  return /*#__PURE__*/jsxs(StyledSection, _objectSpread$3(_objectSpread$3({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
+      children: title
+    }), children]
+  }));
 }
-var StyledSubSection = styled(PrimitiveView)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n"])));
+var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledSubSection"
+})(["margin-bottom:16px;"]);
 
 function SubSection(_ref2) {
-  var title = _ref2.title;
-      _ref2.className;
-      var children = _ref2.children,
+  var title = _ref2.title,
+      children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  return /*#__PURE__*/React.createElement(StyledSubSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level3, null, title), children);
+  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread$3(_objectSpread$3({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
+      children: title
+    }), children]
+  }));
 }
 
-var StyledBlockSection = styled(PrimitiveView)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n"])));
+var StyledBlockSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledBlockSection"
+})(["margin-bottom:16px;"]);
 
 function BlockSection(_ref3) {
-  var title = _ref3.title;
-      _ref3.className;
-      var children = _ref3.children,
+  var title = _ref3.title,
+      children = _ref3.children,
       props = _objectWithoutProperties(_ref3, _excluded3);
 
-  return /*#__PURE__*/React.createElement(StyledBlockSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level4, null, title), children);
+  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread$3(_objectSpread$3({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
+      children: title
+    }), children]
+  }));
 }
 
-var StyledDemoSection = styled(PrimitiveView)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  margin-bottom: 64px;\n"])));
+var StyledDemoSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledDemoSection"
+})(["margin-bottom:64px;"]);
 
 function DemoSection(_ref4) {
   var children = _ref4.children;
-  return /*#__PURE__*/React.createElement(StyledDemoSection, null, /*#__PURE__*/React.createElement(StorySection, {
-    internalIsDemoSection: true,
-    title: "Demo"
-  }, children));
+  return /*#__PURE__*/jsx(StyledDemoSection, {
+    children: /*#__PURE__*/jsx(StorySection, {
+      internalIsDemoSection: true,
+      title: "Demo",
+      children: children
+    })
+  });
 }
 
 StorySection.SubSection = SubSection;
@@ -1856,23 +2190,32 @@ function StoryContainer(_ref) {
       _ref$platform = _ref.platform,
       platform = _ref$platform === void 0 ? 'all' : _ref$platform;
   if (platform === 'web') return null;
-  return /*#__PURE__*/React.createElement(StorySection.BlockSection, {
+  return /*#__PURE__*/jsx(StorySection.BlockSection, {
     testID: state,
-    title: title
-  }, children);
+    title: title,
+    children: children
+  });
 }
 
 function StoryDecorator(storyFn, context) {
-  return /*#__PURE__*/React.createElement(Story, {
-    title: context.name
-  }, storyFn());
+  return /*#__PURE__*/jsx(Story, {
+    title: context.name,
+    children: storyFn()
+  });
 }
 
-var _templateObject$2, _templateObject2, _templateObject3, _templateObject4;
-var SmallScreenRow = styled(PrimitiveView)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  margin: 0;\n"])));
-var SmallScreenCol = styled(PrimitiveView)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0 16px;\n"])));
-var FlexRow = styled(PrimitiveView)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin: 0 -4px 16px;\n"])));
-var FlexCol = styled(PrimitiveView)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  flex-basis: 0;\n  margin: 0 8px;\n"])));
+var SmallScreenRow = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__SmallScreenRow"
+})(["flex-direction:column;margin:0;"]);
+var SmallScreenCol = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__SmallScreenCol"
+})(["padding:8px 0 16px;"]);
+var FlexRow = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__FlexRow"
+})(["flex-direction:row;margin:0 -4px 16px;"]);
+var FlexCol = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__FlexCol"
+})(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
 
 function StoryGridRow(_ref) {
   var children = _ref.children,
@@ -1887,14 +2230,22 @@ function StoryGridRow(_ref) {
   var breakpointValue = breakpoint === 'small' ? 480 : 768;
 
   if (width < breakpointValue) {
-    return /*#__PURE__*/React.createElement(SmallScreenRow, null, React.Children.map(children, function (child) {
-      return /*#__PURE__*/React.createElement(SmallScreenCol, null, child);
-    }));
+    return /*#__PURE__*/jsx(SmallScreenRow, {
+      children: Children.map(children, function (child) {
+        return /*#__PURE__*/jsx(SmallScreenCol, {
+          children: child
+        });
+      })
+    });
   }
 
-  return /*#__PURE__*/React.createElement(FlexRow, null, React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.createElement(FlexCol, null, child);
-  }));
+  return /*#__PURE__*/jsx(FlexRow, {
+    children: Children.map(children, function (child) {
+      return /*#__PURE__*/jsx(FlexCol, {
+        children: child
+      });
+    })
+  });
 }
 
 function StoryGridCol(_ref2) {
@@ -1903,15 +2254,23 @@ function StoryGridCol(_ref2) {
       children = _ref2.children,
       _ref2$platform = _ref2.platform,
       platform = _ref2$platform === void 0 ? 'all' : _ref2$platform;
+  var isNative = Platform.OS === 'ios' || Platform.OS === 'android';
 
-  if (platform === 'web') {
+  if (Platform.OS === 'web' && platform === 'native') {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement(StoryTitle.Level4, {
-    numberOfLines: 1,
-    color: titleColor
-  }, title) : null, children);
+  if (isNative && platform === 'web') {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [title ? /*#__PURE__*/jsx(StoryTitle.Level4, {
+      numberOfLines: 1,
+      color: titleColor,
+      children: title
+    }) : null, children]
+  });
 }
 
 var StoryGrid = {
@@ -1919,8 +2278,9 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var _templateObject$1;
-var Container = styled(PrimitiveView)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  align-self: flex-start;\n"])), function (_ref) {
+var Container$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Tag__Container"
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
   var theme = _ref.theme,
       type = _ref.type,
       variant = _ref.variant;
@@ -1971,13 +2331,15 @@ function Tag(_ref6) {
       type = _ref6$type === void 0 ? 'default' : _ref6$type,
       _ref6$variant = _ref6.variant,
       variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/jsx(Container$1, {
     type: type,
-    variant: variant
-  }, /*#__PURE__*/React.createElement(Typography.Text, {
-    base: "body-xsmall",
-    color: getLabelColor(type, variant)
-  }, label));
+    variant: variant,
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      base: "body-xsmall",
+      color: getLabelColor(type, variant),
+      children: label
+    })
+  });
 }
 
 var lateOceanColorPalette = {
@@ -2086,6 +2448,7 @@ var colorsLateOceanTheme = {
   danger: lateOceanColorPalette.englishVermillon,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
+  black: lateOceanColorPalette.black1000,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
   overlay: {
@@ -2271,6 +2634,15 @@ var tagLateOceanTheme = {
   }
 };
 
+var tooltip = {
+  backgroundColor: colorsLateOceanTheme.black,
+  borderRadius: 10,
+  opacity: 0.95,
+  horizontalPadding: 16,
+  verticalPadding: 4,
+  floatingPadding: 8
+};
+
 var calcLineHeight = function (fontSize, lineHeightMultiplier) {
   return Math.round(fontSize * lineHeightMultiplier);
 };
@@ -2303,8 +2675,8 @@ var typographyLateOceanTheme = {
   types: {
     headers: {
       fontFamily: {
-        regular: 'Moderat-Extended-Bold',
-        bold: 'Moderat-Extended-Bold'
+        regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
       },
       fontWeight: 400,
       fontStyle: 'normal',
@@ -2323,8 +2695,8 @@ var typographyLateOceanTheme = {
     },
     bodies: {
       fontFamily: {
-        regular: 'NotoSans',
-        bold: 'NotoSans-Bold'
+        regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
+        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
       },
       fontWeight: {
         regular: 400,
@@ -2387,49 +2759,434 @@ var theme = {
   shadows: shadowsLateOceanTheme,
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton: iconButton,
-  listItem: listItemLateOceanTheme
+  listItem: listItemLateOceanTheme,
+  tooltip: tooltip
 };
 
-function Tooltip(_ref) {
+function Title(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
+  return /*#__PURE__*/jsx(Modal.Header, {
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      base: "body",
+      variant: "bold",
+      children: children
+    })
+  });
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
+function ModalDateTimePicker(_ref2) {
+  var title = _ref2.title,
+      visible = _ref2.visible,
+      value = _ref2.value,
+      validateButtonLabel = _ref2.validateButtonLabel,
+      onChange = _ref2.onChange,
+      onClose = _ref2.onClose;
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1]; // Prevent unsynced value between the modal and its parent state
+
+
+  return /*#__PURE__*/jsx(Modal, {
+    visible: Boolean(visible),
+    onClose: function handleClose() {
+      setCurrentValue(value);
+      onClose();
+    },
+    children: visible ? /*#__PURE__*/jsxs(Fragment$1, {
+      children: [title ? /*#__PURE__*/jsx(Title, {
+        children: title
+      }) : null, /*#__PURE__*/jsx(Modal.Body, {
+        children: /*#__PURE__*/jsx(DateTimePicker, {
+          is24Hour: true,
+          testID: "date-picker-native-element",
+          value: currentValue,
+          mode: "time",
+          display: Platform.OS === 'ios' ? 'spinner' : 'default',
+          onChange: function (_event, date) {
+            return setCurrentValue(function (prev) {
+              return date || prev;
+            });
+          }
+        })
+      }), /*#__PURE__*/jsx(Modal.Footer, {
+        children: /*#__PURE__*/jsx(Button, {
+          stretch: true,
+          type: "primary",
+          onPress: function handleSubmit() {
+            onChange(currentValue);
+          },
+          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
+            children: validateButtonLabel
+          }) : /*#__PURE__*/jsx(FormattedMessage, {
+            id: "kitt-universal.ModalDateTimePicker.confirm"
+          })
+        })
+      })]
+    }) : null
+  });
+}
+
+var timePickerPlaceholder = '--:--';
+var useTimePicker = function (value, onChange, onBlur, disabled, defaultValue) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isTimePickerModalVisible = _useState2[0],
+      setIsTimePickerModalVisible = _useState2[1];
+
+  var todayAtNoon = useMemo(function () {
+    var now = new Date(2000, 0, 1, 12);
+    return new Date(now.getFullYear(), now.getMonth(), now.getDay(), 12);
+  }, []);
+  var defaultDate = defaultValue || todayAtNoon;
+  var dateTimePickerValue = value || defaultDate;
+  var displayedValue = value === null ? timePickerPlaceholder : Intl.DateTimeFormat('fr-FR', {
+    minute: 'numeric',
+    hour: 'numeric'
+  }).format(dateTimePickerValue);
+  var timePickerState = isTimePickerModalVisible ? 'focus' : 'default';
+  return {
+    dateTimePickerValue: dateTimePickerValue,
+    displayedValue: displayedValue,
+    timePickerState: timePickerState,
+    isTimePickerModalVisible: isTimePickerModalVisible,
+    handleInputPress: function handleInputPress() {
+      if (disabled) {
+        return;
+      }
+
+      setIsTimePickerModalVisible(true);
+    },
+    handleTimeChange: function handleTimeChange(date) {
+      setIsTimePickerModalVisible(false);
+      onChange(date || defaultDate);
+      onBlur();
+    },
+    handleModalClose: function handleModalClose() {
+      return setIsTimePickerModalVisible(false);
+    }
+  };
+};
+
+var Container = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "TimePicker__Container"
+})(["", " width:100px;height:40px;justify-content:center;align-items:center;"], styledTextInputMixin);
+function TimePicker(_ref) {
+  var title = _ref.title,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? 'default' : _ref$state,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      forceDefaultValue = _ref.forceDefaultValue,
+      value = _ref.value,
+      validateButtonLabel = _ref.validateButtonLabel,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur;
+
+  var _useTimePicker = useTimePicker(value || null, onChange, onBlur, disabled, forceDefaultValue),
+      dateTimePickerValue = _useTimePicker.dateTimePickerValue,
+      displayedValue = _useTimePicker.displayedValue,
+      timePickerState = _useTimePicker.timePickerState,
+      handleInputPress = _useTimePicker.handleInputPress,
+      handleModalClose = _useTimePicker.handleModalClose,
+      handleTimeChange = _useTimePicker.handleTimeChange,
+      isTimePickerModalVisible = _useTimePicker.isTimePickerModalVisible;
+
+  return /*#__PURE__*/jsxs(Container, {
+    state: timePickerState === 'default' ? state : timePickerState,
+    accessibilityRole: "button",
+    onPress: handleInputPress,
+    children: [/*#__PURE__*/jsx(Typography.Text, {
+      base: "body",
+      color: displayedValue === timePickerPlaceholder ? 'black-light' : 'black',
+      children: displayedValue
+    }), Platform.OS === 'android' && isTimePickerModalVisible ? /*#__PURE__*/jsx(DateTimePicker, {
+      is24Hour: true,
+      testID: "date-picker-native-element",
+      value: dateTimePickerValue,
+      mode: "time",
+      display: "default",
+      onChange: function (_event, date) {
+        return handleTimeChange(date);
+      }
+    }) : null, Platform.OS !== 'android' ? /*#__PURE__*/jsx(ModalDateTimePicker, {
+      title: title,
+      visible: isTimePickerModalVisible,
+      value: dateTimePickerValue,
+      validateButtonLabel: validateButtonLabel,
+      onChange: handleTimeChange,
+      onClose: handleModalClose
+    }) : null]
+  });
+}
+
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Arrow = function (props) {
+  return /*#__PURE__*/jsx("svg", _objectSpread$2(_objectSpread$2({}, props), {}, {
+    children: /*#__PURE__*/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"
+    })
+  }));
+};
 
-var _templateObject;
-var StyledLink = styled(PrimitiveLink).withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !['disabled', 'noUnderline'].includes(prop);
+Arrow.defaultProps = {
+  width: "36",
+  height: "8",
+  viewBox: "0 0 36 9",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var StyledTooltipView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "TooltipView__StyledTooltipView"
+})(["align-items:center;"]);
+var StyledTooltipContent = /*#__PURE__*/styled.View.withConfig({
+  displayName: "TooltipView__StyledTooltipContent"
+})(["background-color:", ";border-radius:", "px;opacity:", ";padding:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.tooltip.backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.tooltip.borderRadius;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.tooltip.opacity;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return "".concat(theme.kitt.tooltip.verticalPadding, "px ").concat(theme.kitt.tooltip.horizontalPadding, "px");
+});
+
+function ArrowView(props) {
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(View, _objectSpread$2(_objectSpread$2({}, props), {}, {
+    children: /*#__PURE__*/jsx(Arrow, {
+      color: theme.kitt.tooltip.backgroundColor
+    })
+  }));
+}
+
+var StyledArrow = /*#__PURE__*/styled(ArrowView).withConfig({
+  displayName: "TooltipView__StyledArrow"
+})(["color:", ";transform:", ";"], function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.tooltip.backgroundColor;
+}, function (_ref6) {
+  var $position = _ref6.$position;
+  return "rotate(".concat($position === 'bottom' ? 180 : 0, "deg)");
+});
+function TooltipView(_ref7) {
+  var children = _ref7.children,
+      position = _ref7.position;
+  return /*#__PURE__*/jsxs(StyledTooltipView, {
+    children: [position === 'bottom' ? /*#__PURE__*/jsx(StyledArrow, {
+      $position: position
+    }) : null, /*#__PURE__*/jsx(StyledTooltipContent, {
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: "body",
+        color: "white",
+        children: children
+      })
+    }), position === 'top' ? /*#__PURE__*/jsx(StyledArrow, {
+      $position: position
+    }) : null]
+  });
+}
+
+var tooltipDefaultPosition = 'top';
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// Since the tooltip use absolute positionning, we need a parent to provide the relative root
+var TooltipContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Tooltip__TooltipContainer"
+})(["position:relative;align-self:baseline;"]);
+// eslint-disable-next-line unicorn/expiring-todo-comments
+// TODO : update position on scroll in future iteration
+function Tooltip(_ref) {
+  var children = _ref.children,
+      defaultVisible = _ref.defaultVisible,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? tooltipDefaultPosition : _ref$position,
+      content = _ref.content,
+      floatingPadding = _ref.floatingPadding,
+      onUpdate = _ref.onUpdate;
+  var theme = /*#__PURE__*/useTheme();
+  var padding = floatingPadding || theme.kitt.tooltip.floatingPadding;
+  var pressed = useSharedValue(defaultVisible);
+  var opacityStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        opacity: withSpring(pressed.value ? theme.kitt.tooltip.opacity : 0)
+      };
+    };
+
+    _f._closure = {
+      withSpring: withSpring,
+      pressed: 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;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+
+  var _useFloating = useFloating({
+    placement: position,
+    middleware: [offset(padding), shift(), flip({
+      padding: padding
+    })]
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      update = _useFloating.update,
+      refs = _useFloating.refs,
+      middlewareData = _useFloating.middlewareData;
+
+  useEffect(function () {
+    if (!onUpdate) return;
+    onUpdate({
+      x: x,
+      y: y,
+      reference: reference,
+      floating: floating,
+      strategy: 'absolute',
+      update: update,
+      refs: refs,
+      middlewareData: middlewareData
+    });
+  }, [x, y, reference, floating, update, refs, middlewareData, onUpdate]);
+  return /*#__PURE__*/jsxs(TooltipContainer, {
+    children: [/*#__PURE__*/jsx(View, {
+      ref: reference,
+      children: /*#__PURE__*/jsx(Pressable, {
+        accessibilityRole: "button",
+        onPress: function handlePress() {
+          pressed.value = !pressed.value;
+        },
+        children: children
+      })
+    }), /*#__PURE__*/jsx(View, {
+      ref: floating,
+      accessibilityElementsHidden: !pressed.value,
+      importantForAccessibility: pressed.value === true ? 'auto' : 'no-hide-descendants',
+      style: _objectSpread$1(_objectSpread$1({}, StyleSheet.absoluteFillObject), {}, {
+        top: y && position === 'bottom' ? y : undefined,
+        bottom: y && position === 'top' ? y : undefined,
+        left: x !== null && x !== void 0 ? x : 0
+      }),
+      children: /*#__PURE__*/jsx(Animated$1.View, {
+        style: [opacityStyles],
+        children: /*#__PURE__*/jsx(TooltipView, {
+          position: position,
+          children: content
+        })
+      })
+    })]
+  });
+}
+Tooltip.View = TooltipView;
+
+var StyledTypographyEmoji = /*#__PURE__*/styled(Emoji).withConfig({
+  displayName: "TypographyEmoji__StyledTypographyEmoji"
+})(["align-self:center;", ""], function (_ref) {
+  var size = _ref.size;
+  if (Platform.OS !== 'web') return undefined;
+  /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+
+  return "\n      margin: 0 ".concat(size / 20, "px 0 ").concat(size / 10, "px;\n      transform: translateY(").concat(size / 10 * 2, "px);\n    ");
+});
+function TypographyEmoji(_ref2) {
+  var emoji = _ref2.emoji,
+      base = _ref2.base,
+      small = _ref2.small,
+      medium = _ref2.medium,
+      large = _ref2.large;
+  var theme = /*#__PURE__*/useTheme();
+  var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(base, small, medium, large);
+  var typeConfig = getTypographyTypeConfig(typeForCurrentWindowSize || 'body', theme);
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  var fontSize = typeConfig[typeConfigKey].fontSize;
+
+  if ((process.env.NODE_ENV !== "production")) {
+    if (!fontSize.endsWith('px')) throw new Error("Unexpected font-size value: ".concat(fontSize));
   }
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-decoration: ", ";\n\n  ", "\n"])), function (_ref) {
-  var noUnderline = _ref.noUnderline;
-  return noUnderline ? 'none' : 'underline';
+
+  return /*#__PURE__*/jsx(StyledTypographyEmoji, {
+    size: parseInt(fontSize.slice(0, -2), 10),
+    emoji: emoji
+  });
+}
+
+var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var TypographyLinkWebWrapper = undefined;
+var StyledLink = /*#__PURE__*/styled.Text.withConfig({
+  displayName: "TypographyLink__StyledLink"
+})(["text-decoration:", ";", ";", ";"], function (_ref) {
+  var $noUnderline = _ref.$noUnderline;
+  return $noUnderline ? 'none' : 'underline';
 }, function (_ref2) {
-  var disabled = _ref2.disabled,
-      theme = _ref2.theme;
-      _ref2.noUnderline;
-  return "\n    ".concat(disabled ? "color: ".concat(theme.kitt.typography.link.disabledColor, ";") : '', "\n    ").concat('');
+  var $disabled = _ref2.$disabled;
+  if (Platform.OS !== 'web') return undefined;
+  return "\n      text-decoration-color: inherit;\n      transition: color 0.2s ease-in-out;\n      cursor: ".concat($disabled ? 'not-allowed' : 'pointer', ";\n    ");
+}, function (_ref3) {
+  var $disabled = _ref3.$disabled,
+      theme = _ref3.theme;
+  if (!$disabled) return undefined;
+  return "color: ".concat(theme.kitt.typography.link.disabledColor, ";");
 });
-function TypographyLink(_ref3) {
-  var children = _ref3.children,
-      disabled = _ref3.disabled,
-      noUnderline = _ref3.noUnderline,
-      href = _ref3.href,
-      hrefAttrs = _ref3.hrefAttrs,
-      onPress = _ref3.onPress,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$1);
-
-  return /*#__PURE__*/React.createElement(Typography, _extends({}, otherProps, {
-    accessibilityRole: "none"
-  }), /*#__PURE__*/React.createElement(StyledLink, {
-    disabled: disabled,
-    noUnderline: noUnderline,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    accessibilityRole: "link",
-    onPress: disabled ? undefined : onPress
-  }, children));
+function TypographyLink(_ref4) {
+  var children = _ref4.children,
+      disabled = _ref4.disabled,
+      noUnderline = _ref4.noUnderline,
+      href = _ref4.href,
+      hrefAttrs = _ref4.hrefAttrs,
+      onPress = _ref4.onPress,
+      otherProps = _objectWithoutProperties(_ref4, _excluded$1);
+
+  return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, otherProps), {}, {
+    accessibilityRole: "none",
+    children: /*#__PURE__*/jsx(StyleWebWrapper, {
+      as: TypographyLinkWebWrapper,
+      "data-nounderline": noUnderline,
+      children: /*#__PURE__*/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, _ref) {
@@ -2501,9 +3258,10 @@ function useKittTheme() {
 function KittThemeProvider(_ref) {
   var children = _ref.children;
   var theme = useKittTheme();
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, children);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: theme,
+    children: children
+  });
 }
 var KittThemeDecorator = makeDecorator({
   name: 'ThemeDecorator',
@@ -2511,17 +3269,9 @@ var KittThemeDecorator = makeDecorator({
   wrapper: function wrapper(storyFn, context, _ref2) {
     _ref2.options;
         _ref2.parameters;
-    return /*#__PURE__*/React.createElement(KittThemeProvider, null, storyFn(context));
-  }
-});
-
-var SafeAreaProviderDecorator = makeDecorator({
-  name: 'SafeAreaProviderDecorator',
-  parameterName: 'safeAreaProvider',
-  wrapper: function wrapper(storyFn, context, _ref) {
-    _ref.options;
-        _ref.parameters;
-    return /*#__PURE__*/React.createElement(SafeAreaProvider, null, storyFn(context));
+    return /*#__PURE__*/jsx(KittThemeProvider, {
+      children: storyFn(context)
+    });
   }
 });
 
@@ -2532,8 +3282,10 @@ function MatchWindowSize(_ref) {
 
   var match = useMatchWindowSize(matchWindowSizeOptions);
   if (!match) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  return /*#__PURE__*/jsx(Fragment$1, {
+    children: children
+  });
 }
 
-export { Avatar, Button, Card, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, PrimitiveLink, PrimitivePressable, PrimitiveScrollView, PrimitiveText, PrimitiveView, Radio, SafeAreaProviderDecorator, DeprecatedSection as Section, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, Tag, TextArea, Tooltip, Typography, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor };
+export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor };
 //# sourceMappingURL=index-browser-all.es.ios.js.map