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

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

@@ -1,157 +1,56 @@
-import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { View, Text as Text$1, useWindowDimensions, Image, Pressable, TextInput, TouchableOpacity, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
+export { useWindowDimensions as useWindowSize } from 'react-native';
 import { UserIcon, EyeIcon, EyeOffIcon, LoaderIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import React, { createContext, forwardRef, useContext, useState, Fragment, useMemo } from 'react';
-import { Image, TextInput, useWindowDimensions, TouchableOpacity, StyleSheet, Modal as Modal$1 } from 'react-native';
-export { useWindowDimensions as useWindowSize } from 'react-native';
-import styled, { css, keyframes, useTheme, ThemeProvider } from 'styled-components';
+import styled$1, { useTheme, css, ThemeProvider } from 'styled-components/native';
+import { cloneElement, useContext, createContext, useState, useMemo, forwardRef, Fragment, Children, useEffect } from 'react';
+import { styled } from '@linaria/react';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { parse } from 'twemoji-parser';
+import _extends from '@babel/runtime/helpers/extends';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { useFloating, offset, shift, flip, getScrollParents } from '@floating-ui/react-dom';
 import { makeDecorator } from '@storybook/addons';
 
-var resetMixin = /*#__PURE__*/css(["border:0 solid black;box-sizing:border-box;margin:0;padding:0;"]);
-
-var mapAccessibilityRoleToAriaRole = {
-  header: 'heading',
-  none: 'presentation',
-  paragraph: 'paragraph'
-};
-var PrimitiveTextAncestorContext = /*#__PURE__*/createContext(false);
-var PrimitiveTextWithClassName = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      accessibilityRole = _ref.accessibilityRole,
-      accessibilityRoleDescription = _ref.accessibilityRoleDescription,
-      accessibilityLevel = _ref.accessibilityLevel;
-      _ref.selectable;
-      _ref.numberOfLines;
-  var hasTextAncestor = React.useContext(PrimitiveTextAncestorContext);
-  var Component = hasTextAncestor ? 'span' : 'div';
-
-  if (accessibilityRole === 'header' && accessibilityLevel && accessibilityLevel < 7) {
-    Component = "h".concat(accessibilityLevel); // eslint-disable-next-line no-param-reassign
-
-    accessibilityRole = undefined; // eslint-disable-next-line no-param-reassign
-
-    accessibilityLevel = undefined;
-  }
-
-  var element = /*#__PURE__*/React.createElement(Component, {
-    ref: ref,
-    className: className,
-    role: accessibilityRole ? mapAccessibilityRoleToAriaRole[accessibilityRole] : undefined,
-    "aria-roledescription": accessibilityRoleDescription,
-    "aria-level": accessibilityLevel
-  }, children);
-  return hasTextAncestor ? element : /*#__PURE__*/React.createElement(PrimitiveTextAncestorContext.Provider, {
-    value: true
-  }, element);
-});
-var textResetMixin = /*#__PURE__*/css(["", " display:inline;white-space:pre-wrap;word-wrap:break-word;color:inherit;font:inherit;"], resetMixin);
-var PrimitiveText = /*#__PURE__*/styled(PrimitiveTextWithClassName).withConfig({
-  displayName: "PrimitiveTextweb__PrimitiveText",
-  componentId: "kitt-universal__sc-8bfguf-0"
-})(["", " ", ";", ""], textResetMixin, function (_ref2) {
-  var selectable = _ref2.selectable;
-  return selectable == null ? undefined : "user-select: ".concat(selectable ? 'text' : 'none');
-}, function (_ref3) {
-  var numberOfLines = _ref3.numberOfLines;
-  return numberOfLines ? "\n    display: -webkit-box;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: ".concat(numberOfLines, ";\n    -webkit-box-orient: vertical;\n    line-clamp: ").concat(numberOfLines, ";\n  ") : '';
-});
-
-function createPressClickHandler(onPress) {
-  if (!onPress) return undefined;
-  return function (event) {
-    event.stopPropagation();
-    onPress(event);
+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; }
+// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
+// export function withTheme<Props extends { theme: DefaultTheme }, C>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme( // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+WrappedComponent) {
+  return function (props) {
+    var theme = /*#__PURE__*/useTheme();
+    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$h({
+      theme: theme
+    }, props));
   };
 }
 
-var isValidKeyPress = function (_ref) {
-  var key = _ref.key,
-      target = _ref.target;
-  var role = target.getAttribute('role');
-  return key === 'Enter' || (key === ' ' || key === 'Spacebar') && role === 'button';
-}; // https://github.com/necolas/react-native-web/blob/b2eb3ca03ffc4b8570591b6c2082c6e4edae0e7f/packages/react-native-web/src/modules/usePressEvents/PressResponder.js#L300-L322
-
-
-function createPressKeyUpHandler(onPress) {
-  if (!onPress) return undefined;
-  return function (event) {
-    if (isValidKeyPress(event)) {
-      onPress(event);
-    }
-  };
+var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled("div")({
+  name: "StyledSpinningIconContainer",
+  "class": "ssn8o83"
+}));
+function SpinningIcon(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
+    children: children
+  });
 }
 
-var resetPrimitiveViewMixin = /*#__PURE__*/css(["", " align-items:stretch;flex-basis:auto;flex-direction:column;flex-shrink:0;min-height:0;min-width:0;position:'relative';z-index:0;"], resetMixin);
-var StyledDiv = /*#__PURE__*/styled('div').withConfig({
-  displayName: "PrimitiveViewweb__StyledDiv",
-  componentId: "kitt-universal__sc-1t2oiuz-0"
-})(["", " display:", ";"], resetPrimitiveViewMixin, function (_ref) {
-  var hasTextAncestor = _ref.hasTextAncestor;
-  return hasTextAncestor ? 'inline-flex' : 'flex';
-});
-var StyledAnchor = /*#__PURE__*/styled('a').withConfig({
-  displayName: "PrimitiveViewweb__StyledAnchor",
-  componentId: "kitt-universal__sc-1t2oiuz-1"
-})(["", " display:", ";text-decoration:none;"], resetPrimitiveViewMixin, function (_ref2) {
-  var hasTextAncestor = _ref2.hasTextAncestor;
-  return hasTextAncestor ? 'inline-flex' : 'flex';
-});
-var PrimitiveView = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-      className = _ref3.className,
-      style = _ref3.style,
-      accessibilityRole = _ref3.accessibilityRole,
-      nativeID = _ref3.nativeID,
-      testID = _ref3.testID,
-      tabIndex = _ref3.tabIndex,
-      href = _ref3.href,
-      hrefAttrs = _ref3.hrefAttrs,
-      onPress = _ref3.onPress;
-  var hasTextAncestor = React.useContext(PrimitiveTextAncestorContext);
-
-  if (href != null) {
-    return /*#__PURE__*/React.createElement(StyledAnchor, _extends({
-      ref: ref,
-      hasTextAncestor: hasTextAncestor,
-      id: nativeID,
-      className: className,
-      style: style,
-      "data-testid": testID,
-      role: accessibilityRole,
-      tabIndex: tabIndex,
-      href: href
-    }, hrefAttrs, {
-      onClick: createPressClickHandler(onPress),
-      onKeyUp: createPressKeyUpHandler(onPress)
-    }), children);
-  }
-
-  return /*#__PURE__*/React.createElement(StyledDiv, {
-    ref: ref,
-    hasTextAncestor: hasTextAncestor,
-    id: nativeID,
-    className: className,
-    style: style,
-    "data-testid": testID,
-    role: accessibilityRole,
-    tabIndex: tabIndex,
-    onClick: createPressClickHandler(onPress),
-    onKeyUp: createPressKeyUpHandler(onPress)
-  }, children);
-});
-
-var spin = /*#__PURE__*/keyframes(["0%{transform:rotate(-1deg);}100%{transform:rotate(359deg);}"]);
-var SpinningIcon = /*#__PURE__*/styled(PrimitiveView).withConfig({
-  displayName: "SpinningIconweb__SpinningIcon",
-  componentId: "kitt-universal__sc-xgsnek-0"
-})(["animation:", " 1.1s infinite linear;"], spin);
-
-var IconContainer$2 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var IconContainer$2 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
@@ -175,91 +74,173 @@ 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 _excluded$b = ["accessibilityRole", "base", "variant", "color"];
-var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
+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 _excluded$c = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+
+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; }
+
+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 IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-var StyledTypography = /*#__PURE__*/styled(PrimitiveText).withConfig({
+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 (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$1(Text$1).withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
 })(["", " ", ""], function (_ref) {
   var theme = _ref.theme,
-      isHeader = _ref.isHeader,
-      type = _ref.type,
-      variant = _ref.variant;
+      $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;
-  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  ");
+  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  ");
+      $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;
 
-var isTypeHeader = function (type) {
-  return type.startsWith('header');
-};
-
-var isTypographyHeader = function (base, typeInContext) {
-  if (base) return isTypeHeader(base);
-  if (typeInContext) return isTypeHeader(typeInContext);
-  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
-};
-
+  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$b);
-
-  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$g({
+      $color: colorWithDefaultToBlack,
+      $isHeader: isHeader,
+      $typeForCurrentWindowSize: typeForCurrentWindowSize,
+      $variant: nonNullableVariant,
+      accessibilityRole: accessibilityRole || undefined
+    }, otherProps))
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$g({
+    $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$g({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/React.createElement(Typography, _extends({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$g({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -267,10 +248,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$g(_objectSpread$g({
       accessibilityRole: "header",
       base: defaultBase
-    }, props, {
+    }, props), {}, {
       accessibilityLevel: level
     }));
   }
@@ -303,7 +284,11 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$a = ["size"];
+var _excluded$b = ["size"];
+
+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; }
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -313,7 +298,7 @@ var getInitials = function (firstname, lastname) {
   return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 };
 
-var StyledAvatarView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var StyledAvatarView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Avatar__StyledAvatarView",
   componentId: "kitt-universal__sc-9miubv-0"
 })(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
@@ -341,7 +326,7 @@ function AvatarContent(_ref5) {
       light = _ref5.light;
 
   if (src) {
-    return /*#__PURE__*/React.createElement(Image, {
+    return /*#__PURE__*/jsx(Image, {
       source: {
         uri: src
       },
@@ -353,15 +338,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
   });
@@ -370,32 +356,37 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      rest = _objectWithoutProperties(_ref6, _excluded$a);
+      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$f(_objectSpread$f({}, rest), {}, {
+    size: size,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$f(_objectSpread$f({}, rest), {}, {
+      size: size
+    }))
+  }));
 }
 
-var _excluded$9 = ["color"],
+var _excluded$a = ["color"],
     _excluded2$2 = ["color"];
 
+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; }
+
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread$e(_objectSpread$e({}, props), {}, {
     color: theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$9);
+      otherProps = _objectWithoutProperties(_ref, _excluded$a);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread$e(_objectSpread$e({}, otherProps), {}, {
     color: theme.kitt.typography.colors[color]
   }));
 }
@@ -405,14 +396,18 @@ function TypographyIcon(_ref2) {
       otherProps = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/React.createElement(TypographyIconSpecifiedColor, _extends({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$e({
       color: color
     }, otherProps));
   }
 
-  return /*#__PURE__*/React.createElement(TypographyIconInheritColor, otherProps);
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$e({}, otherProps));
 }
 
+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; }
+
 var getTextColorByType = function (type, isPressed, disabled) {
   if (disabled) return 'black-light';
 
@@ -432,11 +427,11 @@ var getTextColorByType = function (type, isPressed, disabled) {
   }
 };
 
-var ButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
+var ButtonText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   displayName: "ButtonContent__ButtonText",
   componentId: "kitt-universal__sc-dnyw3n-0"
 })(["text-align:center;"]);
-var Content$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Content$1 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ButtonContent__Content",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], function (_ref) {
@@ -444,7 +439,7 @@ var Content$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
       iconOnly = _ref.iconOnly;
   return "".concat(stretch || iconOnly ? 1 : 0, " 1 auto");
 });
-var IconContainer$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var IconContainer$1 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ButtonContent__IconContainer",
   componentId: "kitt-universal__sc-dnyw3n-2"
 })(["", ""], function (_ref2) {
@@ -466,15 +461,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) {
@@ -501,83 +497,34 @@ 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$d(_objectSpread$d({}, 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$d(_objectSpread$d({}, 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$d(_objectSpread$d({}, sharedIconProps), {}, {
+      icon: icon,
+      iconPosition: iconPosition
+    })) : null]
+  });
 }
 
-var getTabIndex = function (_ref) {
-  var focusable = _ref.focusable,
-      disabled = _ref.disabled;
-  if (disabled) return -1;
-  if (focusable === false) return -1;
-  return 0;
-};
-
-var handlePressPreventDefault = function (e) {
-  e.preventDefault();
-};
-
-var PrimitivePressableWithClassName = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var disabled = _ref2.disabled,
-      focusable = _ref2.focusable,
-      children = _ref2.children,
-      className = _ref2.className,
-      accessibilityRole = _ref2.accessibilityRole,
-      nativeID = _ref2.nativeID,
-      testID = _ref2.testID,
-      href = _ref2.href,
-      hrefAttrs = _ref2.hrefAttrs,
-      onPress = _ref2.onPress;
-  return /*#__PURE__*/React.createElement(PrimitiveView, {
-    ref: ref,
-    nativeID: nativeID,
-    testID: testID,
-    className: className,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    accessibilityRole: accessibilityRole,
-    "aria-disabled": !!disabled
-    /* https://necolas.github.io/react-native-web/docs/accessibility/#keyboard-focus */
-    ,
-    tabIndex: getTabIndex({
-      focusable: focusable,
-      disabled: disabled
-    }),
-    onPress: disabled ? handlePressPreventDefault : onPress
-  }, children);
-});
-var PrimitivePressable = /*#__PURE__*/styled(PrimitivePressableWithClassName).withConfig({
-  displayName: "PrimitivePressableweb__PrimitivePressable",
-  componentId: "kitt-universal__sc-1pzco2e-0"
-})(["cursor:", ";touch-action:", ";"], function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? 'none' : 'manipulation';
-});
-
-var ButtonPressable = /*#__PURE__*/styled(PrimitivePressable).withConfig({
+var ButtonPressable = /*#__PURE__*/styled$1(Pressable).withConfig({
   displayName: "ButtonPressable",
   componentId: "kitt-universal__sc-7ckel6-0"
 })(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], function (_ref) {
@@ -620,6 +567,9 @@ var ButtonPressable = /*#__PURE__*/styled(PrimitivePressable).withConfig({
   return theme.kitt.button.borderWidth;
 });
 
+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 Button(_ref) {
   var children = _ref.children,
       _ref$type = _ref.type,
@@ -645,10 +595,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$c(_objectSpread$c({}, sharedProps), {}, {
     isPressed: isPressed,
     accessibilityRole: "button",
     testID: testID,
@@ -660,15 +610,17 @@ 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$c(_objectSpread$c({}, sharedProps), {}, {
+      icon: icon,
+      iconPosition: iconPosition,
+      iconSpin: iconSpin,
+      children: children
+    }))
+  }));
 }
 
-var Container$5 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Container$5 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
@@ -692,9 +644,45 @@ var Container$5 = /*#__PURE__*/styled(PrimitiveView).withConfig({
 function Card(_ref6) {
   var children = _ref6.children,
       type = _ref6.type;
-  return /*#__PURE__*/React.createElement(Container$5, {
-    type: type
-  }, children);
+  return /*#__PURE__*/jsx(Container$5, {
+    type: type,
+    children: children
+  });
+}
+
+var StyledEmoji = /*#__PURE__*/styled$1(Image).withConfig({
+  displayName: "Emoji__StyledEmoji",
+  componentId: "kitt-universal__sc-ggl6wj-0"
+})(["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: 'svg'
+    });
+  }, [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 = {
@@ -702,16 +690,20 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$8 = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$9 = ["as", "href", "openLinkBehavior", "onPress"];
+
+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; }
+
+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; }
 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$8);
+      rest = _objectWithoutProperties(_ref, _excluded$9);
 
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/jsx(Component, _objectSpread$b(_objectSpread$b({}, rest), {}, {
     href: href,
     hrefAttrs: (openLinkBehavior === null || openLinkBehavior === void 0 ? void 0 : openLinkBehavior.web) === 'targetSelf' ? undefined : {
       target: '_blank',
@@ -735,66 +727,19 @@ 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 FieldContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var FieldContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "InputField__FieldContainer",
   componentId: "kitt-universal__sc-13fkixs-0"
 })(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var FeedbackContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "InputField__FeedbackContainer",
   componentId: "kitt-universal__sc-13fkixs-1"
 })(["", ";"], function (_ref) {
@@ -803,14 +748,14 @@ var FeedbackContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
     minWidth: KittBreakpoints.SMALL
   }, 'padding-top: 10px', 'padding-top: 5px');
 });
-var FieldLabelContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var FieldLabelContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "InputField__FieldLabelContainer",
   componentId: "kitt-universal__sc-13fkixs-2"
 })(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.inputField.labelContainerPaddingBottom;
 });
-var LabelContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var LabelContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "InputField__LabelContainer",
   componentId: "kitt-universal__sc-13fkixs-3"
 })(["margin-right:", "px;"], function (_ref3) {
@@ -822,7 +767,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 () {
@@ -853,7 +806,11 @@ var useInputText = function () {
   };
 };
 
-var _excluded$7 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
+var _excluded$8 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
+
+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; }
 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;
@@ -870,7 +827,8 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
   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;
@@ -879,7 +837,7 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
-var Input = /*#__PURE__*/styled(TextInput).withConfig({
+var Input = /*#__PURE__*/styled$1(TextInput).withConfig({
   displayName: "InputText__Input",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, function (_ref8) {
@@ -889,12 +847,14 @@ var Input = /*#__PURE__*/styled(TextInput).withConfig({
 }, function (_ref9) {
   var theme = _ref9.theme,
       multiline = _ref9.multiline;
-  return !multiline && "web" === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight;
+  if (!multiline && "web" === '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 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Container$4 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "InputText__Container",
   componentId: "kitt-universal__sc-uke279-1"
 })(["margin-top:", ";margin-bottom:", ";"], function (_ref11) {
@@ -904,7 +864,7 @@ var Container$4 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   var theme = _ref12.theme;
   return theme.kitt.forms.input.marginBottom;
 });
-var PasswordButtonContainer = /*#__PURE__*/styled(PrimitivePressable).withConfig({
+var PasswordButtonContainer = /*#__PURE__*/styled$1(Pressable).withConfig({
   displayName: "InputText__PasswordButtonContainer",
   componentId: "kitt-universal__sc-uke279-2"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], function (_ref13) {
@@ -957,7 +917,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$7);
+      props = _objectWithoutProperties(_ref15, _excluded$8);
 
   var _useInputText = useInputText(),
       isFocused = _useInputText.isFocused,
@@ -972,49 +932,54 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
     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$4, {
+    children: [/*#__PURE__*/jsx(Input, _objectSpread$a(_objectSpread$a({
+      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) {
   var htmlFor = _ref.htmlFor,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(Typography.Text, {
-    base: "body"
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: htmlFor
-  }, children));
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body",
+    children: /*#__PURE__*/jsx("label", {
+      htmlFor: htmlFor,
+      children: children
+    })
+  });
 }
 
-var OuterRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var OuterRadio = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], function (_ref) {
@@ -1038,7 +1003,7 @@ var OuterRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var SelectedOuterRadio = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Radio__SelectedOuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-1"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
@@ -1054,7 +1019,7 @@ var SelectedOuterRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var SelectedInnerRadio = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Radio__SelectedInnerRadio",
   componentId: "kitt-universal__sc-1mdgr2o-2"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
@@ -1070,11 +1035,11 @@ var SelectedInnerRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$3 = /*#__PURE__*/styled(PrimitivePressable).withConfig({
+var Container$3 = /*#__PURE__*/styled$1(Pressable).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
-var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
+var Text = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   displayName: "Radio__Text",
   componentId: "kitt-universal__sc-1mdgr2o-4"
 })(["margin-left:", "px;"], function (_ref15) {
@@ -1089,7 +1054,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$3, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1097,28 +1062,35 @@ 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$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 TextArea(_ref) {
   var props = _extends({}, _ref);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/React.createElement(InputText, _extends({
+  return /*#__PURE__*/jsx(InputText, _objectSpread$9(_objectSpread$9({
     multiline: true
-  }, props, {
+  }, props), {}, {
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
   }));
 }
 
-var Body = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Body = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], function (_ref) {
@@ -1132,10 +1104,12 @@ var Body = /*#__PURE__*/styled(PrimitiveView).withConfig({
 });
 function FullScreenModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(Body, null, children);
+  return /*#__PURE__*/jsx(Body, {
+    children: children
+  });
 }
 
-var SideContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var SideContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Header__SideContainer",
   componentId: "kitt-universal__sc-dfmxi1-0"
 })(["", ""], function (_ref) {
@@ -1155,7 +1129,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Header = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
@@ -1173,7 +1147,7 @@ var Header = /*#__PURE__*/styled(PrimitiveView).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var HeaderContent = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Header__HeaderContent",
   componentId: "kitt-universal__sc-dfmxi1-2"
 })(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
@@ -1241,25 +1215,29 @@ function FullScreenModalHeader(_ref6) {
     setRightWidth(event.nativeEvent.layout.width);
   };
 
-  return /*#__PURE__*/React.createElement(Header, {
-    insetTop: top
-  }, 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: 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 Container$2 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Container$2 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], function (_ref) {
@@ -1268,52 +1246,114 @@ var Container$2 = /*#__PURE__*/styled(PrimitiveView).withConfig({
 });
 function FullScreenModal(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(Container$2, null, children);
+  return /*#__PURE__*/jsx(Container$2, {
+    children: children
+  });
 }
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-var PressableIconButton = /*#__PURE__*/styled(PrimitivePressable).withConfig({
-  displayName: "PressableIconButton",
+var _excluded$7 = ["as", "children"];
+
+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; }
+function StyleWebWrapper(_ref) {
+  var as = _ref.as,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$7);
+
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsx(as || 'div', _objectSpread$8(_objectSpread$8({}, props), {}, {
+    children: children
+  }));
+}
+
+var _excluded$6 = ["color"];
+
+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 PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
+  name: "PressableIconButtonWebWrapper",
+  "class": "p1nlccvg",
+  vars: {
+    "p1nlccvg-0": [function (_ref) {
+      var theme = _ref.theme;
+      return theme.kitt.iconButton.scale.base.hover;
+    }],
+    "p1nlccvg-1": [function (_ref2) {
+      var theme = _ref2.theme;
+      return theme.breakpoints.min.mediumBreakpoint;
+    }],
+    "p1nlccvg-2": [function (_ref3) {
+      var theme = _ref3.theme;
+      return theme.kitt.iconButton.scale.medium.hover;
+    }],
+    "p1nlccvg-3": [function (_ref4) {
+      var theme = _ref4.theme;
+      return theme.kitt.iconButton.scale.base.active;
+    }],
+    "p1nlccvg-4": [function (_ref5) {
+      var theme = _ref5.theme;
+      return theme.kitt.iconButton["default"].pressedBackgroundColor;
+    }],
+    "p1nlccvg-5": [function (_ref6) {
+      var theme = _ref6.theme;
+      return theme.kitt.iconButton.white.pressedBackgroundColor;
+    }]
+  }
+}));
+var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
+  displayName: "PressableIconButton__StyledPressableIconButton",
   componentId: "kitt-universal__sc-1m6jo3s-0"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref) {
-  var theme = _ref.theme;
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref7) {
+  var theme = _ref7.theme;
   return theme.kitt.iconButton.borderRadius;
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.kitt.iconButton.width;
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, function (_ref9) {
+  var theme = _ref9.theme;
   return theme.kitt.iconButton.height;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      color = _ref4.color,
-      disabled = _ref4.disabled;
+}, function (_ref10) {
+  var theme = _ref10.theme,
+      disabled = _ref10.disabled;
   var iconButton = theme.kitt.iconButton;
-  var transition = iconButton.transition,
-      scale = iconButton.scale;
+  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\n      &:hover,\n      .kitt-hover & {\n        @media (hover: none) and (pointer: coarse) {\n          transform: scale(").concat(scale.base.hover, ");\n        }\n\n        @media(").concat(theme.breakpoints.min.mediumBreakpoint, ") {\n          transform: scale(").concat(scale.medium.hover, ");\n        }\n      }\n\n      &:active,\n      .kitt-active & {\n        transform: scale(").concat(scale.base.active, ");\n      }\n\n      &:hover,\n      .kitt-hover &,\n      &:focus,\n      .kitt-focus &,\n      &:active,\n      .kitt-active & {\n        background-color: ").concat(color === 'white' ? iconButton.white.pressedBackgroundColor : iconButton["default"].pressedBackgroundColor, ";\n      }\n    ");
+  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
 });
+function PressableIconButton(_ref11) {
+  var color = _ref11.color,
+      props = _objectWithoutProperties(_ref11, _excluded$6);
+
+  return /*#__PURE__*/jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    "data-color-white": color === 'white' ? true : undefined,
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$7({}, props))
+  });
+}
 
 function PressableAnimatedContainer(_ref) {
   var children = _ref.children,
       color = _ref.color,
       disabled = _ref.disabled,
       onPress = _ref.onPress;
-  return /*#__PURE__*/React.createElement(PressableIconButton, {
+  return /*#__PURE__*/jsx(PressableIconButton, {
     accessibilityRole: "button",
     color: color,
     disabled: disabled,
-    onPress: onPress
-  }, children);
+    onPress: onPress,
+    children: children
+  });
 }
 
-var IconButtonContentBorder = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var IconButtonContentBorder = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "IconButton__IconButtonContentBorder",
   componentId: "kitt-universal__sc-swelbf-0"
 })(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
@@ -1338,12 +1378,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) {
@@ -1351,32 +1392,43 @@ 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$6 = ["children"];
-var ContentView$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var _excluded$5 = ["children"];
+
+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 ContentView$1 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$6);
+      rest = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/React.createElement(ContentView$1, rest, children);
+  return /*#__PURE__*/jsx(ContentView$1, _objectSpread$6(_objectSpread$6({}, rest), {}, {
+    children: children
+  }));
 }
 
-var _excluded$5 = ["children", "side"],
+var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
-var SideContainerView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+
+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 _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 SideContainerView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -1393,13 +1445,15 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$5);
+      rest = _objectWithoutProperties(_ref3, _excluded$4);
 
-  return /*#__PURE__*/React.createElement(SideContainerView, _extends({
+  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$5(_objectSpread$5({
     side: side
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 }
-var SideContentView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var SideContentView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ListItemSideContent__SideContentView",
   componentId: "kitt-universal__sc-1vajiw-1"
 })(["align-self:", ";"], function (_ref4) {
@@ -1412,17 +1466,19 @@ 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$5(_objectSpread$5({
     align: align
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 }
 
-var _excluded$4 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 
-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 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$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 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+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; }
+var ContainerView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -1461,69 +1517,73 @@ function ListItem(_ref5) {
       left = _ref5.left,
       right = _ref5.right,
       onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$4);
+      rest = _objectWithoutProperties(_ref5, _excluded$3);
 
-  var Wrapper = onPress ? PrimitivePressable : Fragment;
-  var wrapperProps = onPress ? _objectSpread$1({
+  var Wrapper = onPress ? Pressable : Fragment;
+  var wrapperProps = onPress ? _objectSpread$4({
     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$4(_objectSpread$4({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$4(_objectSpread$4({
+      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;
 
-var init = /*#__PURE__*/keyframes(["0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}"]);
-var offset = /*#__PURE__*/keyframes(["0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}"]);
-var rotate = /*#__PURE__*/keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
-var LargeLoaderContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "LargeLoaderweb__LargeLoaderContainer",
-  componentId: "kitt-universal__sc-18y4z3t-0"
-})(["width:60px;height:60px;transform:scale(-1) rotate(90deg);"]);
-var LargeLoaderCircleMixin = /*#__PURE__*/css(["transform-origin:center center;stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;"]);
-var LargeLoaderFill = /*#__PURE__*/styled.g.withConfig({
-  displayName: "LargeLoaderweb__LargeLoaderFill",
-  componentId: "kitt-universal__sc-18y4z3t-1"
-})(["transform-origin:center center;animation:", " 1.8s linear 0.5s infinite;"], rotate);
-var LargeLoaderBase = /*#__PURE__*/styled.g.withConfig({
-  displayName: "LargeLoaderweb__LargeLoaderBase",
-  componentId: "kitt-universal__sc-18y4z3t-2"
-})(["transform-origin:center center;"]);
-var LargeLoaderBaseCircle = /*#__PURE__*/styled.circle.withConfig({
-  displayName: "LargeLoaderweb__LargeLoaderBaseCircle",
-  componentId: "kitt-universal__sc-18y4z3t-3"
-})(["", " stroke:#ccc;animation:", " 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;"], LargeLoaderCircleMixin, init);
-var LargeLoaderFillCircle = /*#__PURE__*/styled.circle.withConfig({
-  displayName: "LargeLoaderweb__LargeLoaderFillCircle",
-  componentId: "kitt-universal__sc-18y4z3t-4"
-})(["", " stroke:", ";animation:", " 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,", " 2.16s linear 0.5s infinite;"], LargeLoaderCircleMixin, function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.colors.primary;
-}, offset, rotate);
+var LargeLoaderContainer = withTheme( /*#__PURE__*/styled("div")({
+  name: "LargeLoaderContainer",
+  "class": "l2im3sa",
+  vars: {
+    "l2im3sa-0": [function (_ref) {
+      var theme = _ref.theme;
+      return theme.kitt.colors.separator;
+    }],
+    "l2im3sa-1": [function (_ref2) {
+      var theme = _ref2.theme;
+      return theme.kitt.colors.primary;
+    }]
+  }
+}));
 function LargeLoader() {
-  return /*#__PURE__*/React.createElement(LargeLoaderContainer, null, /*#__PURE__*/React.createElement("svg", {
-    width: "60",
-    height: "60"
-  }, /*#__PURE__*/React.createElement(LargeLoaderBase, null, /*#__PURE__*/React.createElement(LargeLoaderBaseCircle, {
-    cx: "30",
-    cy: "30",
-    r: "27",
-    fill: "none"
-  })), /*#__PURE__*/React.createElement(LargeLoaderFill, null, /*#__PURE__*/React.createElement(LargeLoaderFillCircle, {
-    cx: "30",
-    cy: "30",
-    r: "27",
-    fill: "none"
-  }))));
+  return /*#__PURE__*/jsx(LargeLoaderContainer, {
+    children: /*#__PURE__*/jsxs("svg", {
+      width: "60",
+      height: "60",
+      children: [/*#__PURE__*/jsx("g", {
+        "data-large-loader": "base",
+        children: /*#__PURE__*/jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      }), /*#__PURE__*/jsx("g", {
+        "data-large-loader": "fill",
+        children: /*#__PURE__*/jsx("circle", {
+          cx: "30",
+          cy: "30",
+          r: "27",
+          fill: "none"
+        })
+      })]
+    })
+  });
 }
 
 function Loader(_ref) {
@@ -1531,17 +1591,17 @@ function Loader(_ref) {
       color = _ref$color === void 0 ? 'primary' : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 20 : _ref$size;
-  return /*#__PURE__*/React.createElement(TypographyIcon, {
+  return /*#__PURE__*/jsx(TypographyIcon, {
     spin: true,
     color: color,
     size: size,
-    icon: /*#__PURE__*/React.createElement(LoaderIcon, null)
+    icon: /*#__PURE__*/jsx(LoaderIcon, {})
   });
 }
 
 var xIconSize = 14;
 var mainIconSize = 20;
-var Container$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Container$1 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Message__Container",
   componentId: "kitt-universal__sc-c6400e-0"
 })(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], function (_ref) {
@@ -1568,7 +1628,7 @@ var Container$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
       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 = /*#__PURE__*/styled(TouchableOpacity).withConfig({
+var CloseContainer = /*#__PURE__*/styled$1(TouchableOpacity).withConfig({
   displayName: "Message__CloseContainer",
   componentId: "kitt-universal__sc-c6400e-1"
 })(["margin-left:", "px;padding:", "px;"], function (_ref7) {
@@ -1578,14 +1638,14 @@ var CloseContainer = /*#__PURE__*/styled(TouchableOpacity).withConfig({
   var theme = _ref8.theme;
   return theme.kitt.spacing;
 });
-var IconContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var IconContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Message__IconContainer",
   componentId: "kitt-universal__sc-c6400e-2"
 })(["margin-right:", "px;"], function (_ref9) {
   var theme = _ref9.theme;
   return theme.kitt.spacing * 4;
 });
-var Content = /*#__PURE__*/styled(PrimitiveText).withConfig({
+var Content = /*#__PURE__*/styled$1(Text$1).withConfig({
   displayName: "Message__Content",
   componentId: "kitt-universal__sc-c6400e-3"
 })(["text-align:", ";flex:1;"], function (_ref10) {
@@ -1610,16 +1670,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, {});
   }
 }
 
@@ -1634,63 +1694,58 @@ function Message(_ref11) {
       onDismiss = _ref11.onDismiss,
       insets = _ref11.insets;
   var color = getColorByType(type);
-  return /*#__PURE__*/React.createElement(Container$1, {
+  return /*#__PURE__*/jsxs(Container$1, {
     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$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; }
 
-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 = /*#__PURE__*/styled(PrimitivePressable).withConfig({
+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; }
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+var OverlayPressable = /*#__PURE__*/styled$1(Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
   componentId: "kitt-universal__sc-1cz1gbr-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
+  return _objectSpread$3(_objectSpread$3({}, 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 _excluded$3 = ["contentContainerStyle", "children"];
-var PrimitiveScrollView = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var contentContainerStyle = _ref.contentContainerStyle,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-
-  return /*#__PURE__*/React.createElement(PrimitiveView, _extends({
-    ref: ref
-  }, props), /*#__PURE__*/React.createElement(PrimitiveView, {
-    style: contentContainerStyle
-  }, children));
-});
-
-var BodyView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var BodyView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Body__BodyView",
   componentId: "kitt-universal__sc-17fwpo4-0"
 })(["padding:", "px ", "px;"], function (_ref) {
@@ -1702,10 +1757,14 @@ var BodyView = /*#__PURE__*/styled(PrimitiveView).withConfig({
 });
 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 FooterView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var FooterView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Footer__FooterView",
   componentId: "kitt-universal__sc-1ujq2dc-0"
 })(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
@@ -1717,12 +1776,14 @@ var FooterView = /*#__PURE__*/styled(PrimitiveView).withConfig({
 });
 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 HeaderView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var HeaderView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Header__HeaderView",
   componentId: "kitt-universal__sc-1iwabch-0"
 })(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
@@ -1732,21 +1793,21 @@ var HeaderView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var LeftIconView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Header__LeftIconView",
   componentId: "kitt-universal__sc-1iwabch-1"
 })(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var RightIconView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Header__RightIconView",
   componentId: "kitt-universal__sc-1iwabch-2"
 })(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var TitleView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Header__TitleView",
   componentId: "kitt-universal__sc-1iwabch-3"
 })(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
@@ -1760,16 +1821,23 @@ 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 ModalView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var ModalView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Modal__ModalView",
   componentId: "kitt-universal__sc-1xy2w5u-0"
 })(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
@@ -1779,7 +1847,7 @@ var ModalView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var ContentView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Modal__ContentView",
   componentId: "kitt-universal__sc-1xy2w5u-1"
 })(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", ";background-color:", ";"], function (_ref3) {
@@ -1795,18 +1863,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;
@@ -1821,56 +1895,19 @@ 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 PrimitiveLinkWithClassName = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      href = _ref.href,
-      hrefAttrs = _ref.hrefAttrs,
-      onPress = _ref.onPress;
-
-  if (href != null) {
-    return /*#__PURE__*/React.createElement("a", _extends({
-      ref: ref,
-      href: href
-    }, hrefAttrs, {
-      className: className,
-      onClick: createPressClickHandler(onPress),
-      onKeyUp: createPressKeyUpHandler(onPress)
-    }), children);
-  }
-
-  return /*#__PURE__*/React.createElement("span", {
-    ref: ref,
-    role: "button",
-    className: className,
-    tabIndex: onPress ? 0 : -1,
-    onClick: createPressClickHandler(onPress),
-    onKeyUp: createPressKeyUpHandler(onPress)
-  }, children);
-});
-var PrimitiveLink = /*#__PURE__*/styled(PrimitiveLinkWithClassName).withConfig({
-  displayName: "PrimitiveLinkweb__PrimitiveLink",
-  componentId: "kitt-universal__sc-24w4og-0"
-})(["", " background-color:transparent;color:inherit;font:inherit !important;list-style:none;text-align:inherit;text-decoration:none;", ";", ";"], textResetMixin, function (_ref2) {
-  var selectable = _ref2.selectable;
-  return selectable == null ? undefined : "user-select: ".concat(selectable ? 'text' : 'none');
-}, function (_ref3) {
-  var onPress = _ref3.onPress;
-  return onPress ? 'cursor: pointer;' : undefined;
-});
-
-var Flex = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Flex = /*#__PURE__*/styled$1(View).withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
   }
@@ -1927,7 +1964,7 @@ var useStoryBlockColor = function (color) {
   var storyBlockColor = useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-var StyledStoryBlockView = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var StyledStoryBlockView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StoryBlock__StyledStoryBlockView",
   componentId: "kitt-universal__sc-3w4hdm-0"
 })(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
@@ -1938,20 +1975,23 @@ var StyledStoryBlockView = /*#__PURE__*/styled(PrimitiveView).withConfig({
 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)));
+  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(PrimitiveView).withConfig({
+var StoryTitleContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StoryTitle__StoryTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-0"
 })(["margin-bottom:30px;"]);
-var StorySubTitleContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var StorySubTitleContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StoryTitle__StorySubTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-1"
 })(["margin-bottom:10px;"]);
@@ -1959,24 +1999,30 @@ 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';
@@ -1985,13 +2031,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';
@@ -2000,13 +2049,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';
@@ -2014,7 +2066,7 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var StoryContainer$1 = /*#__PURE__*/styled(PrimitiveScrollView).withConfig({
+var StoryContainer$1 = /*#__PURE__*/styled$1(ScrollView).withConfig({
   displayName: "Story__StoryContainer",
   componentId: "kitt-universal__sc-1kwdg2p-0"
 })(["padding:", "px;"], storyPadding);
@@ -2022,67 +2074,86 @@ 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 StyledSection = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var _excluded$2 = ["title", "children", "internalIsDemoSection"],
+    _excluded2 = ["title", "children"],
+    _excluded3 = ["title", "children"];
+
+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 StyledSection = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StorySection__StyledSection",
   componentId: "kitt-universal__sc-1b3liv5-0"
 })(["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$2(_objectSpread$2({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
+      children: title
+    }), children]
+  }));
 }
-var StyledSubSection = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var StyledSubSection = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StorySection__StyledSubSection",
   componentId: "kitt-universal__sc-1b3liv5-1"
 })(["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$2(_objectSpread$2({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
+      children: title
+    }), children]
+  }));
 }
 
-var StyledBlockSection = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var StyledBlockSection = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StorySection__StyledBlockSection",
   componentId: "kitt-universal__sc-1b3liv5-2"
 })(["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$2(_objectSpread$2({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
+      children: title
+    }), children]
+  }));
 }
 
-var StyledDemoSection = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var StyledDemoSection = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StorySection__StyledDemoSection",
   componentId: "kitt-universal__sc-1b3liv5-3"
 })(["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;
@@ -2101,33 +2172,36 @@ function StoryContainer(_ref) {
       title = _ref.title,
       platform = _ref.platform;
   if (platform === 'native') return null;
-  return /*#__PURE__*/React.createElement(StorySection.BlockSection, {
+  return /*#__PURE__*/jsx(StorySection.BlockSection, {
     testID: state,
-    title: title
-  }, /*#__PURE__*/React.createElement("div", {
-    className: state ? "kitt-".concat(state) : undefined
-  }, children));
+    title: title,
+    children: /*#__PURE__*/jsx("div", {
+      className: state ? "kitt-".concat(state) : undefined,
+      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 SmallScreenRow = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var SmallScreenRow = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StoryGrid__SmallScreenRow",
   componentId: "kitt-universal__sc-4z5new-0"
 })(["flex-direction:column;margin:0;"]);
-var SmallScreenCol = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var SmallScreenCol = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StoryGrid__SmallScreenCol",
   componentId: "kitt-universal__sc-4z5new-1"
 })(["padding:8px 0 16px;"]);
-var FlexRow = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var FlexRow = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StoryGrid__FlexRow",
   componentId: "kitt-universal__sc-4z5new-2"
 })(["flex-direction:row;margin:0 -4px 16px;"]);
-var FlexCol = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var FlexCol = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "StoryGrid__FlexCol",
   componentId: "kitt-universal__sc-4z5new-3"
 })(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
@@ -2145,14 +2219,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) {
@@ -2166,10 +2248,13 @@ function StoryGridCol(_ref2) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement(StoryTitle.Level4, {
-    numberOfLines: 1,
-    color: titleColor
-  }, title) : null, children);
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [title ? /*#__PURE__*/jsx(StoryTitle.Level4, {
+      numberOfLines: 1,
+      color: titleColor,
+      children: title
+    }) : null, children]
+  });
 }
 
 var StoryGrid = {
@@ -2177,7 +2262,7 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var Container = /*#__PURE__*/styled(PrimitiveView).withConfig({
+var Container = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
 })(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
@@ -2231,13 +2316,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, {
     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 = {
@@ -2346,6 +2433,7 @@ var colorsLateOceanTheme = {
   danger: lateOceanColorPalette.englishVermillon,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
+  black: lateOceanColorPalette.black1000,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
   overlay: {
@@ -2531,6 +2619,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);
 };
@@ -2647,50 +2744,319 @@ var theme = {
   shadows: shadowsLateOceanTheme,
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton: iconButton,
-  listItem: listItemLateOceanTheme
+  listItem: listItemLateOceanTheme,
+  tooltip: tooltip
 };
 
-function Tooltip(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
+function TimePicker() {
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body",
+    children: "TimePicker is not implemented for the web"
+  });
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
-var StyledLink = /*#__PURE__*/styled(PrimitiveLink).withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !['disabled', 'noUnderline'].includes(prop);
+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 Arrow = function (props) {
+  return /*#__PURE__*/jsx("svg", _objectSpread$1(_objectSpread$1({}, 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"
+    })
+  }));
+};
+
+Arrow.defaultProps = {
+  width: "36",
+  height: "8",
+  viewBox: "0 0 36 9",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var StyledTooltipView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "TooltipView__StyledTooltipView",
+  componentId: "kitt-universal__sc-156zm6m-0"
+})(["align-items:center;"]);
+var StyledTooltipContent = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "TooltipView__StyledTooltipContent",
+  componentId: "kitt-universal__sc-156zm6m-1"
+})(["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$1(_objectSpread$1({}, props), {}, {
+    children: /*#__PURE__*/jsx(Arrow, {
+      color: theme.kitt.tooltip.backgroundColor
+    })
+  }));
+}
+
+var StyledArrow = /*#__PURE__*/styled$1(ArrowView).withConfig({
+  displayName: "TooltipView__StyledArrow",
+  componentId: "kitt-universal__sc-156zm6m-2"
+})(["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';
+var tooltipDefaultFloatingStrategy = {
+  web: 'absolute'
+};
+
+var StyledTooltipTrigger = /*#__PURE__*/styled$1(Pressable).withConfig({
+  displayName: "Tooltipweb__StyledTooltipTrigger",
+  componentId: "kitt-universal__sc-zn1y6f-0"
+})(["display:inline-flex;align-self:baseline;"]);
+var WebAnimatedTooltip = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Tooltipweb__WebAnimatedTooltip",
+  componentId: "kitt-universal__sc-zn1y6f-1"
+})(["opacity:", ";transition:opacity 200ms;visibility:", ";"], function (_ref) {
+  var theme = _ref.theme,
+      $visible = _ref.$visible;
+  return $visible ? theme.kitt.tooltip.opacity : 0;
+}, function (_ref2) {
+  var $visible = _ref2.$visible;
+  return $visible ? 'visible' : 'hidden';
+});
+
+function getActualPosition(originalPosition, offsetMiddlewareData) {
+  if (!offsetMiddlewareData) return originalPosition;
+
+  if (originalPosition === 'top') {
+    return offsetMiddlewareData.y > 0 ? 'bottom' : originalPosition;
   }
-}).withConfig({
+
+  if (originalPosition === 'bottom') {
+    return offsetMiddlewareData.y < 0 ? 'top' : originalPosition;
+  }
+
+  return originalPosition;
+}
+
+function Tooltip(_ref3) {
+  var children = _ref3.children,
+      defaultVisible = _ref3.defaultVisible,
+      _ref3$position = _ref3.position,
+      position = _ref3$position === void 0 ? tooltipDefaultPosition : _ref3$position,
+      content = _ref3.content,
+      _ref3$floatingStrateg = _ref3.floatingStrategy,
+      floatingStrategy = _ref3$floatingStrateg === void 0 ? tooltipDefaultFloatingStrategy : _ref3$floatingStrateg,
+      floatingPadding = _ref3.floatingPadding,
+      onUpdate = _ref3.onUpdate;
+  var theme = /*#__PURE__*/useTheme();
+  var padding = floatingPadding || theme.kitt.tooltip.floatingPadding;
+
+  var _useState = useState(Boolean(defaultVisible)),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useFloating = useFloating({
+    placement: position,
+    strategy: floatingStrategy === null || floatingStrategy === void 0 ? void 0 : floatingStrategy.web,
+    middleware: [offset(padding), shift(), flip()]
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      strategy = _useFloating.strategy,
+      update = _useFloating.update,
+      refs = _useFloating.refs,
+      middlewareData = _useFloating.middlewareData; // Update on scroll and resize for all relevant nodes
+
+
+  useEffect(function () {
+    if (!refs.reference.current || !refs.floating.current) {
+      return function () {
+        return undefined;
+      };
+    }
+
+    var parents = [].concat(_toConsumableArray(getScrollParents(refs.reference.current)), _toConsumableArray(getScrollParents(refs.floating.current)));
+    parents.forEach(function (parent) {
+      parent.addEventListener('scroll', update);
+      parent.addEventListener('resize', update);
+    });
+    return function () {
+      parents.forEach(function (parent) {
+        parent.removeEventListener('scroll', update);
+        parent.removeEventListener('resize', update);
+      });
+    };
+  }, [refs.reference, refs.floating, update]);
+  useEffect(function () {
+    if (!onUpdate) return;
+    onUpdate({
+      x: x,
+      y: y,
+      reference: reference,
+      floating: floating,
+      strategy: strategy,
+      update: update,
+      refs: refs,
+      middlewareData: middlewareData
+    });
+  }, [x, y, reference, floating, strategy, update, refs, middlewareData, onUpdate]);
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(StyledTooltipTrigger, {
+      ref: reference,
+      accessibilityRole: "button",
+      onPress: function onPress() {
+        return setVisible(function (prev) {
+          return !prev;
+        });
+      },
+      onMouseEnter: function onMouseEnter() {
+        setVisible(true);
+      },
+      onFocus: function onFocus() {
+        setVisible(true);
+      },
+      children: children
+    }), /*#__PURE__*/jsx(WebAnimatedTooltip, {
+      ref: floating,
+      $visible: visible,
+      accessibilityHidden: !visible,
+      style: {
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: [{
+          // @ts-expect-error translate3d is missing in react-native definitions, only supported in web
+          translate3d: "".concat(Math.round(x !== null && x !== void 0 ? x : 0), "px, ").concat(Math.round(y !== null && y !== void 0 ? y : 0), "px, 0")
+        }]
+      },
+      children: /*#__PURE__*/jsx(TooltipView, {
+        position: getActualPosition(position, middlewareData.offset),
+        children: content
+      })
+    })]
+  });
+}
+Tooltip.View = TooltipView;
+
+var StyledTypographyEmoji = /*#__PURE__*/styled$1(Emoji).withConfig({
+  displayName: "TypographyEmoji__StyledTypographyEmoji",
+  componentId: "kitt-universal__sc-1if5guu-0"
+})(["align-self:center;", ""], function (_ref) {
+  var size = _ref.size;
+
+  /* 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));
+  }
+
+  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 = withTheme( /*#__PURE__*/styled("span")({
+  name: "TypographyLinkWebWrapper",
+  "class": "tcwz3nt"
+}));
+var StyledLink = /*#__PURE__*/styled$1(Text$1).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
-})(["text-decoration:", ";", ""], function (_ref) {
-  var noUnderline = _ref.noUnderline;
-  return noUnderline ? 'none' : 'underline';
+})(["text-decoration:", ";", ";", ";"], function (_ref) {
+  var $noUnderline = _ref.$noUnderline;
+  return $noUnderline ? 'none' : 'underline';
 }, function (_ref2) {
-  var disabled = _ref2.disabled,
-      theme = _ref2.theme,
-      noUnderline = _ref2.noUnderline;
-  return "\n    ".concat(disabled ? "color: ".concat(theme.kitt.typography.link.disabledColor, ";") : '', "\n    ").concat("\n  text-decoration-color: inherit;\n  transition: color 0.2s ease-in-out;\n  cursor: ".concat(disabled ? 'not-allowed' : 'pointer', ";\n\n\n  &:hover, &:active, .kitt-hover & {\n    text-decoration: ").concat(noUnderline ? 'underline' : 'none', ";\n  }\n  "));
+  var $disabled = _ref2.$disabled;
+  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) {
@@ -2762,9 +3128,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',
@@ -2772,17 +3139,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)
+    });
   }
 });
 
@@ -2793,8 +3152,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.web.js.map