@ornikar/kitt-universal 5.0.0 → 6.0.0

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

@@ -1,89 +1,55 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, TextInput, Pressable, View, ActivityIndicator, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1 } from 'react-native';
+import { useWindowDimensions, Image, Platform, Linking, View, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, Animated as Animated$1, Easing, ActivityIndicator } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { useRef, useEffect, cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children } from 'react';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import Animated$1, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withRepeat, withTiming, Easing as Easing$1, interpolate } from 'react-native-reanimated';
+import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, useRef, useEffect, Fragment as Fragment$1, Children } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withRepeat, withTiming, Easing as Easing$1, interpolate } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
+import { FormattedMessage } from 'react-intl';
 import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { LinearGradient } from 'expo-linear-gradient';
-import { FormattedMessage } from 'react-intl';
 import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
 
-function SpinningIcon(_ref) {
-  var children = _ref.children;
-  var animationRef = useRef(new Animated.Value(0));
-  var rotation = animationRef.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
-  });
-  useEffect(function () {
-    if (process.env.TESTS) return undefined;
-    var animation = Animated.loop(Animated.timing(animationRef.current, {
-      toValue: 1,
-      duration: 1100,
-      easing: Easing.linear,
-      useNativeDriver: true
-    }));
-    animation.start();
-    return function () {
-      if (process.env.TESTS) return undefined;
-      animation.stop();
-      return undefined;
-    };
-  }, []);
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: {
-      transform: [{
-        rotate: rotation
-      }]
-    },
-    children: children
-  });
-}
-
+var defaultIconSize = 20;
 var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Icon__IconContainer"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
-  var color = _ref.color;
-  return color;
+  var $color = _ref.$color;
+  return $color;
 }, function (_ref2) {
-  var size = _ref2.size;
-  return size;
+  var $size = _ref2.$size;
+  return $size;
 }, function (_ref3) {
-  var size = _ref3.size;
-  return size;
+  var $size = _ref3.$size;
+  return $size;
 }, function (_ref4) {
-  var _ref4$align = _ref4.align,
-      align = _ref4$align === void 0 ? 'auto' : _ref4$align;
-  return align;
+  var _ref4$$align = _ref4.$align,
+      $align = _ref4$$align === void 0 ? 'auto' : _ref4$$align;
+  return $align;
 });
 function Icon(_ref5) {
   var icon = _ref5.icon,
       _ref5$size = _ref5.size,
-      size = _ref5$size === void 0 ? 20 : _ref5$size,
-      spin = _ref5.spin,
+      size = _ref5$size === void 0 ? defaultIconSize : _ref5$size,
       align = _ref5.align,
       color = _ref5.color;
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
   return /*#__PURE__*/jsx(IconContainer$1, {
-    align: align,
-    size: size,
-    color: color,
-    children: spin ? /*#__PURE__*/jsx(SpinningIcon, {
-      children: clonedIcon
-    }) : clonedIcon
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
   });
 }
 
@@ -135,11 +101,7 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$f = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
-
-function ownKeys$n(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$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$i = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -215,7 +177,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$f);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$i);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -232,14 +194,14 @@ function Typography(_ref4) {
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$n({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$n({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -252,13 +214,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$n({
+  return /*#__PURE__*/jsx(Typography, _objectSpread({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$n({
+  return /*#__PURE__*/jsx(Typography, _objectSpread({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -266,7 +228,7 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/jsx(Typography, _objectSpread$n(_objectSpread$n({
+    return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -302,11 +264,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$e = ["size", "base", "round", "light"];
-
-function ownKeys$m(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$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$h = ["size", "base", "round", "light"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -377,13 +335,13 @@ function Avatar(_ref6) {
       base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
       round = _ref6.round,
       light = _ref6.light,
-      props = _objectWithoutProperties(_ref6, _excluded$e);
+      props = _objectWithoutProperties(_ref6, _excluded$h);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$m({
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
       size: size,
       base: base,
       isLight: light
@@ -398,7 +356,7 @@ var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
   if ($isStretch) return undefined;
   return 'align-self: flex-start;';
 });
-var StyledAnimatedView = /*#__PURE__*/styled(Animated$1.View).withConfig({
+var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
   displayName: "AnimatedButtonPressable__StyledAnimatedView"
 })(["border-radius:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
@@ -525,52 +483,44 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return defaultPadding;
 });
 
-var _excluded$d = ["color"],
-    _excluded2$2 = ["color"];
-
-function ownKeys$l(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$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$g = ["color"],
+    _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$l(_objectSpread$l({}, props), {}, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$l({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
     color: color
   }, props));
 }
 
 function TypographyIcon(_ref2) {
   var color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2$2);
+      props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$l({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$l({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$c = ["type", "isDisabled", "$isStretch", "icon", "children"];
-
-function ownKeys$k(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$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$f = ["type", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type) {
   switch (type) {
@@ -626,14 +576,12 @@ var StyledIconContainer$1 = /*#__PURE__*/styled.View.withConfig({
 function ButtonIcon(_ref3) {
   var icon = _ref3.icon,
       color = _ref3.color,
-      spin = _ref3.spin,
       iconPosition = _ref3.iconPosition,
       testID = _ref3.testID;
   return /*#__PURE__*/jsx(StyledIconContainer$1, {
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsx(TypographyIcon, {
       icon: icon,
-      spin: spin,
       testID: testID,
       color: color
     })
@@ -647,7 +595,6 @@ function ButtonContentChildren(_ref4) {
   var type = _ref4.type,
       icon = _ref4.icon,
       iconPosition = _ref4.iconPosition,
-      iconSpin = _ref4.iconSpin,
       isDisabled = _ref4.isDisabled,
       color = _ref4.color,
       children = _ref4.children;
@@ -661,9 +608,8 @@ function ButtonContentChildren(_ref4) {
   var isWebSubtle = isSubtle(type) && Platform.OS === 'web' && !isDisabled;
 
   if (!children) {
-    return /*#__PURE__*/jsx(TypographyIcon, {
-      spin: iconSpin // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ,
+    return /*#__PURE__*/jsx(TypographyIcon // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , {
       icon: icon,
       color: isWebSubtle ? 'inherit' : color
     });
@@ -671,12 +617,11 @@ function ButtonContentChildren(_ref4) {
 
   var buttonIconSharedProps = {
     type: type,
-    spin: iconSpin,
     iconPosition: iconPosition,
     color: isWebSubtle ? 'inherit' : color
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$k(_objectSpread$k({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -687,7 +632,7 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$k(_objectSpread$k({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
@@ -713,14 +658,14 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$c);
+      props = _objectWithoutProperties(_ref7, _excluded$f);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$k(_objectSpread$k({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread(_objectSpread({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -754,7 +699,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       icon = _ref.icon,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-      iconSpin = _ref.iconSpin,
       testID = _ref.testID,
       href = _ref.href,
       hrefAttrs = _ref.hrefAttrs,
@@ -782,7 +726,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
         isDisabled: disabled,
         icon: icon,
         iconPosition: iconPosition,
-        iconSpin: iconSpin,
         children: children
       }), Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsx(StyledDisabled, {}) : null]
     })
@@ -857,20 +800,16 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$b = ["as", "href", "openLinkBehavior", "onPress"];
-
-function ownKeys$j(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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$e = ["as", "href", "openLinkBehavior", "onPress"];
 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$b);
+      rest = _objectWithoutProperties(_ref, _excluded$e);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$j(_objectSpread$j({}, rest), {}, {
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     onPress: function handleOnPress() {
       if (onPress) onPress();
       if (!href) return;
@@ -977,9 +916,9 @@ var button = {
     }
   },
   contentPadding: {
-    "default": '8px 16px 7px',
-    large: '12px 24px 11px',
-    disabled: '6px 14px 5px'
+    "default": '7px 16px 7px',
+    large: '11px 24px 11px',
+    disabled: '5px 14px 5px'
   },
   transition: {
     duration: '200ms',
@@ -1504,7 +1443,7 @@ function useKittTheme() {
 
 var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper"
-})(["display:flex;flex-direction:row;align-items:center;"]);
+})(["display:flex;flex-direction:row;"]);
 var CheckboxContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "Checkbox__CheckboxContainer"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], function (_ref) {
@@ -1646,10 +1585,6 @@ function DatePickerInputPart(_ref4) {
   });
 }
 
-function ownKeys$i(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$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function prefixWithZero(value) {
   return "".concat(value).padStart(2, '0');
 }
@@ -1703,14 +1638,14 @@ function DatePickerInputs(_ref4) {
     onPress: handleModalOpen,
     children: [/*#__PURE__*/jsx(PartContainer, {
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$i(_objectSpread$i({}, sharedPartProps), {}, {
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
         partName: "day",
         value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
         placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day
       }))
     }), /*#__PURE__*/jsx(PartContainer, {
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$i(_objectSpread$i({}, sharedPartProps), {}, {
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
         partName: "month",
         value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
         placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month
@@ -1718,7 +1653,7 @@ function DatePickerInputs(_ref4) {
     }), /*#__PURE__*/jsx(PartContainer, {
       $isLast: true,
       $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$i(_objectSpread$i({}, sharedPartProps), {}, {
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
         partName: "year",
         value: currentValue ? currentValue.getFullYear() : undefined,
         placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year
@@ -1727,37 +1662,24 @@ function DatePickerInputs(_ref4) {
   });
 }
 
-var _excluded$a = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "pickerDefaultDate", "onChange", "onFocus", "onBlur"];
-
-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; }
-function DatePicker(_ref) {
-  var value = _ref.value,
-      pickerUITestID = _ref.pickerUITestID;
-      _ref.pickerUITitle;
-      _ref.pickerUIValidateButtonLabel;
-      var pickerDefaultDate = _ref.pickerDefaultDate,
-      _onChange = _ref.onChange,
+var _excluded$d = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
+function DatePickerAndroid(_ref) {
+  var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      props = _objectWithoutProperties(_ref, _excluded$a);
-
-  var _useState = useState(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentValue = _useState2[0],
-      setCurrentValue = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
+      pickerDefaultDate = _ref.pickerDefaultDate,
+      pickerUITestID = _ref.pickerUITestID,
+      setIsFocused = _ref.setIsFocused,
+      currentValue = _ref.currentValue,
+      setCurrentValue = _ref.setCurrentValue,
+      _onChange = _ref.onChange,
+      isFocused = _ref.isFocused,
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var handleClose = function () {
     if (onBlur) onBlur();
   };
 
-  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread$h({
+  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
     handleModalOpen: function handleModalOpen() {
       setIsFocused(true);
       if (onFocus) onFocus();
@@ -1785,159 +1707,705 @@ function DatePicker(_ref) {
   }, props));
 }
 
-var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputTextContainer"
-})(["position:relative;"]);
-
-var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
-
-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 StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
-  displayName: "InputText__StyledTextInput"
-})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
-  var theme = _ref.theme,
-      multiline = _ref.multiline;
-
-  if (!multiline && Platform.OS === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
-  }
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
+  displayName: "Overlay__OverlayPressable"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
+    backgroundColor: theme.kitt.colors.overlay.dark
+  });
+});
+function Overlay(_ref2) {
+  var onPress = _ref2.onPress;
+  return /*#__PURE__*/jsx(OverlayPressable, {
+    accessibilityRole: "none",
+    onPress: onPress,
+    children: /*#__PURE__*/jsx(View, {})
+  });
+}
 
-  return theme.kitt.forms.input.padding["default"];
+var BodyView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Body__BodyView"
+})(["padding:", "px ", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 6;
 }, function (_ref2) {
-  var theme = _ref2.theme,
-      multiline = _ref2.multiline;
-  if (!multiline && Platform.OS === 'ios') return 0;
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
-}, function (_ref3) {
-  var $minHeight = _ref3.$minHeight;
-  return $minHeight;
+  var theme = _ref2.theme;
+  return theme.kitt.spacing * 4;
 });
-var RightInputContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputText__RightInputContainer"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
-var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var id = _ref4.id,
-      right = _ref4.right,
-      _ref4$minHeight = _ref4.minHeight,
-      minHeight = _ref4$minHeight === void 0 ? 0 : _ref4$minHeight,
-      formState = _ref4.state,
-      internalForceState = _ref4.internalForceState,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      _ref4$autoCorrect = _ref4.autoCorrect,
-      autoCorrect = _ref4$autoCorrect === void 0 ? true : _ref4$autoCorrect,
-      _ref4$textContentType = _ref4.textContentType,
-      textContentType = _ref4$textContentType === void 0 ? 'none' : _ref4$textContentType,
-      _ref4$autoCompleteTyp = _ref4.autoCompleteType,
-      autoCompleteType = _ref4$autoCompleteTyp === void 0 ? 'off' : _ref4$autoCompleteTyp,
-      _ref4$keyboardType = _ref4.keyboardType,
-      keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
-      _onFocus = _ref4.onFocus,
-      _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$9);
-
-  var theme = /*#__PURE__*/useTheme();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var state = internalForceState || getInputUIState({
-    isFocused: isFocused,
-    isDisabled: disabled,
-    formState: formState
-  });
-  return /*#__PURE__*/jsxs(InputTextContainer, {
-    $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$g(_objectSpread$g({
-      ref: ref,
-      nativeID: id,
-      editable: !disabled,
-      keyboardType: keyboardType,
-      autoCompleteType: autoCompleteType,
-      autoCorrect: autoCorrect,
-      $minHeight: minHeight,
-      textContentType: textContentType,
-      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
-      selectionColor: theme.kitt.forms.input.color.selection
-    }, props), {}, {
-      $state: state,
-      onFocus: function onFocus(e) {
-        setIsFocused(true);
-        if (_onFocus) _onFocus(e);
-      },
-      onBlur: function onBlur(e) {
-        setIsFocused(false);
-        if (_onBlur) _onBlur(e);
-      }
-    })), right ? /*#__PURE__*/jsx(RightInputContainer, {
-      children: right
-    }) : null]
+function ModalBody(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/jsx(ScrollView, {
+    children: /*#__PURE__*/jsx(BodyView, {
+      children: children
+    })
   });
-});
-
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function InputEmail(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$f({
-    autoCompleteType: "email",
-    keyboardType: "email-address",
-    textContentType: "emailAddress",
-    autoCapitalize: "none"
-  }, props));
 }
 
-var getColorFromState = function (state) {
-  switch (state) {
-    case 'invalid':
-      return 'danger';
+var FooterView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Footer__FooterView"
+})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 4;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.separator;
+});
+function ModalFooter(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/jsx(FooterView, {
+    children: children
+  });
+}
 
-    case 'valid':
-    default:
-      return 'black-light';
-  }
-};
+var _excluded$c = ["as", "children"];
+function StyleWebWrapper(_ref) {
+  var as = _ref.as,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
-function InputFeedback(_ref) {
-  var state = _ref.state,
-      testID = _ref.testID,
-      children = _ref.children;
-  return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body-small",
-    color: getColorFromState(state),
-    testID: testID,
+  if (Platform.OS !== 'web') return children;
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
     children: children
-  });
+  }));
 }
 
-var FieldContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldContainer"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FeedbackContainer"
-})(["", ";"], function (_ref) {
+var _excluded$b = ["color", "disabled"];
+var PressableIconButtonWebWrapper = undefined;
+var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "PressableIconButton__StyledPressableIconButton"
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref) {
   var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldLabelContainer"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
+  return theme.kitt.iconButton.borderRadius;
+}, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
-});
-var LabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__LabelContainer"
-})(["margin-right:", "px;"], function (_ref3) {
+  return theme.kitt.iconButton.width;
+}, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.forms.inputField.iconMarginLeft;
-});
+  return theme.kitt.iconButton.height;
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      disabled = _ref4.disabled;
+  var iconButton = theme.kitt.iconButton;
+
+  if (Platform.OS !== 'web') {
+    return undefined;
+  }
+
+  var transition = iconButton.transition;
+
+  if (disabled) {
+    return "\n        background-color: ".concat(iconButton.disabled.backgroundColor, ";\n      ");
+  }
+
+  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
+});
+function PressableIconButton(_ref5) {
+  var color = _ref5.color,
+      disabled = _ref5.disabled,
+      props = _objectWithoutProperties(_ref5, _excluded$b);
+
+  return /*#__PURE__*/jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    $isWhite: color === 'white',
+    $isDisabled: Boolean(disabled),
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread(_objectSpread({}, props), {}, {
+      disabled: disabled
+    }))
+  });
+}
+
+var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground"
+})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], function (_ref) {
+  var theme = _ref.theme,
+      color = _ref.color,
+      disabled = _ref.disabled;
+  var iconButton = theme.kitt.iconButton;
+  if (disabled) return iconButton.disabled.backgroundColor;
+  if (color === 'white') return iconButton.white.pressedBackgroundColor;
+  return iconButton["default"].pressedBackgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.iconButton.borderRadius;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.iconButton.width;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.iconButton.height;
+});
+var AnimatedViewContainer = /*#__PURE__*/styled(Animated.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedViewContainer"
+})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
+function PressableAnimatedContainer(_ref5) {
+  var disabled = _ref5.disabled,
+      _ref5$color = _ref5.color,
+      color = _ref5$color === void 0 ? 'black' : _ref5$color,
+      testID = _ref5.testID,
+      _ref5$accessibilityRo = _ref5.accessibilityRole,
+      accessibilityRole = _ref5$accessibilityRo === void 0 ? 'button' : _ref5$accessibilityRo,
+      accessibilityLabel = _ref5.accessibilityLabel,
+      children = _ref5.children,
+      onPress = _ref5.onPress;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(false);
+  var opacityStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        opacity: withSpring(pressed.value ? 1 : 0)
+      };
+    };
+
+    _f._closure = {
+      withSpring: withSpring,
+      pressed: pressed
+    };
+    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
+    _f.__workletHash = 10645190329247;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
+    _f.__optimalization = 2;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  var scaleStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        transform: [{
+          scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base["default"])
+        }]
+      };
+    };
+
+    _f._closure = {
+      withSpring: withSpring,
+      pressed: pressed,
+      theme: {
+        kitt: {
+          iconButton: {
+            scale: {
+              base: {
+                active: theme.kitt.iconButton.scale.base.active,
+                "default": theme.kitt.iconButton.scale.base["default"]
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
+    _f.__workletHash = 13861998831411;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
+    _f.__optimalization = 2;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  return /*#__PURE__*/jsx(PressableIconButton, {
+    accessibilityRole: accessibilityRole,
+    disabled: disabled,
+    color: color,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    onPress: onPress,
+    onPressIn: function onPressIn() {
+      pressed.value = true;
+    },
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    },
+    children: /*#__PURE__*/jsxs(AnimatedViewContainer, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: [/*#__PURE__*/jsx(AnimatedIconButtonBackground, {
+        disabled: disabled,
+        color: color,
+        style: disabled ? [{
+          opacity: 1
+        }] : [opacityStyles]
+      }), children]
+    })
+  });
+}
+
+var IconButtonContentBorder = /*#__PURE__*/styled.View.withConfig({
+  displayName: "IconButton__IconButtonContentBorder"
+})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return "".concat(theme.kitt.iconButton.borderWidth, "px solid");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      disabled = _ref2.disabled;
+  return disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.iconButton.borderRadius;
+});
+
+function IconButtonContent(_ref6) {
+  var disabled = _ref6.disabled,
+      color = _ref6.color,
+      icon = _ref6.icon;
+  return /*#__PURE__*/jsx(IconButtonContentBorder, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsx(TypographyIcon, {
+      color: disabled ? 'black-light' : color,
+      icon: icon
+    })
+  });
+}
+
+function IconButton(_ref7) {
+  var icon = _ref7.icon,
+      color = _ref7.color,
+      disabled = _ref7.disabled,
+      testID = _ref7.testID,
+      accessibilityLabel = _ref7.accessibilityLabel,
+      accessibilityRole = _ref7.accessibilityRole,
+      onPress = _ref7.onPress;
+  return /*#__PURE__*/jsx(PressableAnimatedContainer, {
+    color: color,
+    disabled: disabled,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    onPress: onPress,
+    children: /*#__PURE__*/jsx(IconButtonContent, {
+      disabled: disabled,
+      color: color,
+      icon: icon
+    })
+  });
+}
+
+var OnCloseContext = /*#__PURE__*/createContext(function () {});
+
+var HeaderView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__HeaderView"
+})(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.separator;
+});
+var LeftIconView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__LeftIconView"
+})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.spacing * 2;
+});
+var RightIconView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__RightIconView"
+})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing * 2;
+});
+var TitleView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__TitleView"
+})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
+  var theme = _ref5.theme,
+      isIconLeft = _ref5.isIconLeft;
+  return isIconLeft ? 0 : theme.kitt.spacing * 2;
+});
+function ModalHeader(_ref6) {
+  var left = _ref6.left,
+      right = _ref6.right,
+      children = _ref6.children;
+  var onClose = useContext(OnCloseContext);
+  var isIconLeft = !!left;
+  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(IconButton, {
+        icon: /*#__PURE__*/jsx(XIcon, {}),
+        onPress: onClose
+      })
+    })]
+  });
+}
+
+var ModalView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Modal__ModalView"
+})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 20;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.spacing * 4;
+});
+var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Modal__ContentView"
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.card.borderRadius;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.colors.uiBackgroundLight;
+});
+function Modal(_ref5) {
+  var visible = _ref5.visible,
+      children = _ref5.children,
+      onClose = _ref5.onClose,
+      onEntered = _ref5.onEntered,
+      onExited = _ref5.onExited;
+  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$1, {
+          children: children
+        })]
+      })
+    })
+  });
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+function getDatePickerDisplayMode() {
+  if (Platform.OS === 'android') return 'calendar';
+  if (Platform.OS === 'ios') return 'spinner';
+  return 'default';
+}
+
+function PlatformDateTimePicker(_ref) {
+  var value = _ref.value,
+      _ref$defaultDate = _ref.defaultDate,
+      defaultDate = _ref$defaultDate === void 0 ? new Date() : _ref$defaultDate,
+      maximumDate = _ref.maximumDate,
+      minimuDate = _ref.minimuDate,
+      testID = _ref.testID,
+      _onChange = _ref.onChange;
+  var theme = /*#__PURE__*/useTheme();
+  var displayMode = getDatePickerDisplayMode();
+  var iosProps = Platform.OS === 'ios' ? {
+    textColor: theme.kitt.colors.primary
+  } : {};
+  return /*#__PURE__*/jsx(DateTimePicker, _objectSpread(_objectSpread({
+    is24Hour: true,
+    testID: testID,
+    value: value || defaultDate,
+    mode: "date",
+    maximumDate: maximumDate,
+    minimumDate: minimuDate,
+    display: displayMode
+  }, iosProps), {}, {
+    onChange: function onChange(_event, date) {
+      return _onChange(date);
+    }
+  }));
+}
+
+var _excluded$a = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+
+function ModalTitle(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsx(Modal.Header, {
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      base: "body",
+      variant: "bold",
+      children: children
+    })
+  });
+}
+
+function ModalPlatformDateTimePicker(_ref2) {
+  var title = _ref2.title,
+      isVisible = _ref2.isVisible,
+      value = _ref2.value,
+      validateButtonLabel = _ref2.validateButtonLabel,
+      onClose = _ref2.onClose,
+      onChange = _ref2.onChange,
+      props = _objectWithoutProperties(_ref2, _excluded$a);
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1]; // Prevent unsynced value between the modal and its parent state
+
+
+  return /*#__PURE__*/jsx(Modal, {
+    visible: Boolean(isVisible),
+    onClose: function handleClose() {
+      setCurrentValue(value);
+      onClose();
+    },
+    children: isVisible ? /*#__PURE__*/jsxs(Fragment, {
+      children: [title ? /*#__PURE__*/jsx(ModalTitle, {
+        children: title
+      }) : null, /*#__PURE__*/jsx(Modal.Body, {
+        children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread(_objectSpread({}, props), {}, {
+          value: currentValue,
+          onChange: function handleChange(newDate) {
+            setCurrentValue(function (prev) {
+              return newDate || prev;
+            });
+          }
+        }))
+      }), /*#__PURE__*/jsx(Modal.Footer, {
+        children: /*#__PURE__*/jsx(Button, {
+          stretch: true,
+          type: "primary",
+          onPress: function handleSubmit() {
+            onChange(currentValue);
+          },
+          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
+            children: validateButtonLabel
+          }) : /*#__PURE__*/jsx(FormattedMessage, {
+            id: "kitt-universal.ModalDateTimePicker.confirm"
+          })
+        })
+      })]
+    }) : null
+  });
+}
+
+var _excluded$9 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
+function DatePicker(_ref) {
+  var value = _ref.value,
+      pickerUITestID = _ref.pickerUITestID,
+      pickerUITitle = _ref.pickerUITitle,
+      pickerUIValidateButtonLabel = _ref.pickerUIValidateButtonLabel,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      pickerDefaultDate = _ref.pickerDefaultDate,
+      props = _objectWithoutProperties(_ref, _excluded$9);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPickerUIVisible = _useState2[0],
+      setIsPickerUIVisible = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
+
+  var _useState5 = useState(value),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentValue = _useState6[0],
+      setCurrentValue = _useState6[1];
+
+  if (Platform.OS === 'android') {
+    return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
+      pickerDefaultDate: pickerDefaultDate,
+      pickerUITestID: pickerUITestID,
+      currentValue: currentValue,
+      setCurrentValue: setCurrentValue,
+      isFocused: isFocused,
+      setIsFocused: setIsFocused,
+      onChange: onChange,
+      onBlur: onBlur
+    }, props));
+  }
+
+  var handleModalClose = function () {
+    if (onBlur) onBlur();
+    setIsPickerUIVisible(false);
+    setIsFocused(false);
+  };
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
+      handleModalOpen: function handleModalOpen() {
+        if (onFocus) onFocus();
+        setIsPickerUIVisible(true);
+        setIsFocused(true);
+      },
+      currentValue: currentValue,
+      isFocused: isFocused
+    }, props)), /*#__PURE__*/jsx(ModalPlatformDateTimePicker, {
+      testID: pickerUITestID,
+      value: currentValue,
+      isVisible: isPickerUIVisible,
+      title: pickerUITitle,
+      validateButtonLabel: pickerUIValidateButtonLabel,
+      defaultDate: pickerDefaultDate,
+      onClose: handleModalClose,
+      onChange: function handleChange(newDate) {
+        setCurrentValue(newDate);
+        onChange(newDate);
+        handleModalClose();
+      }
+    })]
+  });
+}
+
+var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputTextContainer"
+})(["position:relative;"]);
+
+var _excluded$8 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
+  displayName: "InputText__StyledTextInput"
+})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
+  var theme = _ref.theme,
+      multiline = _ref.multiline;
+
+  if (!multiline && Platform.OS === 'ios') {
+    return theme.kitt.forms.input.padding.iOSSingleLine;
+  }
+
+  return theme.kitt.forms.input.padding["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      multiline = _ref2.multiline;
+  if (!multiline && Platform.OS === 'ios') return 0;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
+}, function (_ref3) {
+  var $minHeight = _ref3.$minHeight;
+  return $minHeight;
+});
+var RightInputContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputText__RightInputContainer"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
+var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var id = _ref4.id,
+      right = _ref4.right,
+      _ref4$minHeight = _ref4.minHeight,
+      minHeight = _ref4$minHeight === void 0 ? 0 : _ref4$minHeight,
+      formState = _ref4.state,
+      internalForceState = _ref4.internalForceState,
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      _ref4$autoCorrect = _ref4.autoCorrect,
+      autoCorrect = _ref4$autoCorrect === void 0 ? true : _ref4$autoCorrect,
+      _ref4$textContentType = _ref4.textContentType,
+      textContentType = _ref4$textContentType === void 0 ? 'none' : _ref4$textContentType,
+      _ref4$autoCompleteTyp = _ref4.autoCompleteType,
+      autoCompleteType = _ref4$autoCompleteTyp === void 0 ? 'off' : _ref4$autoCompleteTyp,
+      _ref4$keyboardType = _ref4.keyboardType,
+      keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
+      _onFocus = _ref4.onFocus,
+      _onBlur = _ref4.onBlur,
+      props = _objectWithoutProperties(_ref4, _excluded$8);
+
+  var theme = /*#__PURE__*/useTheme();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var state = internalForceState || getInputUIState({
+    isFocused: isFocused,
+    isDisabled: disabled,
+    formState: formState
+  });
+  return /*#__PURE__*/jsxs(InputTextContainer, {
+    $isDisabled: disabled,
+    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread(_objectSpread({
+      ref: ref,
+      nativeID: id,
+      editable: !disabled,
+      keyboardType: keyboardType,
+      autoCompleteType: autoCompleteType,
+      autoCorrect: autoCorrect,
+      $minHeight: minHeight,
+      textContentType: textContentType,
+      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
+      selectionColor: theme.kitt.forms.input.color.selection
+    }, props), {}, {
+      $state: state,
+      onFocus: function onFocus(e) {
+        setIsFocused(true);
+        if (_onFocus) _onFocus(e);
+      },
+      onBlur: function onBlur(e) {
+        setIsFocused(false);
+        if (_onBlur) _onBlur(e);
+      }
+    })), right ? /*#__PURE__*/jsx(RightInputContainer, {
+      children: right
+    }) : null]
+  });
+});
+
+function InputEmail(props) {
+  return /*#__PURE__*/jsx(InputText, _objectSpread({
+    autoCompleteType: "email",
+    keyboardType: "email-address",
+    textContentType: "emailAddress",
+    autoCapitalize: "none"
+  }, props));
+}
+
+var getColorFromState = function (state) {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+    default:
+      return 'black-light';
+  }
+};
+
+function InputFeedback(_ref) {
+  var state = _ref.state,
+      testID = _ref.testID,
+      children = _ref.children;
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body-small",
+    color: getColorFromState(state),
+    testID: testID,
+    children: children
+  });
+}
+
+var FieldContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldContainer"
+})(["padding:5px 0 10px;"]);
+var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FeedbackContainer"
+})(["", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.SMALL
+  }, 'padding-top: 10px', 'padding-top: 5px');
+});
+var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldLabelContainer"
+})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
+});
+var LabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__LabelContainer"
+})(["margin-right:", "px;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.forms.inputField.iconMarginLeft;
+});
 function InputField(_ref4) {
   var label = _ref4.label,
       labelFeedback = _ref4.labelFeedback,
@@ -1982,31 +2450,24 @@ function InputIcon(_ref) {
   });
 }
 
-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 InputPressable(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/jsx(Pressable, _objectSpread$e({}, props));
+  return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
 }
 
-var _excluded$8 = ["isPasswordDefaultVisible", "right"];
-
-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 _excluded$7 = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
       isVisible = _useState2[0],
       setIsVisible = _useState2[1];
 
-  return /*#__PURE__*/jsx(InputText, _objectSpread$d(_objectSpread$d({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
     textContentType: "password",
     autoCompleteType: "password",
     autoCorrect: false,
@@ -2025,11 +2486,8 @@ function InputPassword(_ref) {
   }));
 }
 
-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 InputPhone(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$c(_objectSpread$c({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
     autoCompleteType: "tel",
     keyboardType: "number-pad",
     textContentType: "telephoneNumber"
@@ -2193,14 +2651,11 @@ function Radio(_ref16) {
   });
 }
 
-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 TextArea(_ref) {
   var props = _extends({}, _ref);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(InputText, _objectSpread$b({
+  return /*#__PURE__*/jsx(InputText, _objectSpread({
     multiline: true,
     textAlignVertical: "top",
     minHeight: theme.kitt.forms.textArea.minHeight
@@ -2353,282 +2808,77 @@ function FullScreenModalHeader(_ref6) {
 var Container$3 = /*#__PURE__*/styled.View.withConfig({
   displayName: "FullScreenModal__Container"
 })(["flex:1;background-color:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.colors.uiBackground;
-});
-function FullScreenModal(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/jsx(Container$3, {
-    children: children
-  });
-}
-FullScreenModal.Header = FullScreenModalHeader;
-FullScreenModal.Body = FullScreenModalBody;
-
-var _excluded$7 = ["as", "children"];
-
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function StyleWebWrapper(_ref) {
-  var as = _ref.as,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$7);
-
-  if (Platform.OS !== 'web') return children;
-  // as or default to div. If as is undefined, T is div but typescript is not sure
-  return /*#__PURE__*/jsx(as || 'div', _objectSpread$a(_objectSpread$a({}, props), {}, {
-    children: children
-  }));
-}
-
-var _excluded$6 = ["color", "disabled"];
-
-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; }
-var PressableIconButtonWebWrapper = undefined;
-var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "PressableIconButton__StyledPressableIconButton"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.iconButton.borderRadius;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.iconButton.height;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      disabled = _ref4.disabled;
-  var iconButton = theme.kitt.iconButton;
-
-  if (Platform.OS !== 'web') {
-    return undefined;
-  }
-
-  var transition = iconButton.transition;
-
-  if (disabled) {
-    return "\n        background-color: ".concat(iconButton.disabled.backgroundColor, ";\n      ");
-  }
-
-  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
-});
-function PressableIconButton(_ref5) {
-  var color = _ref5.color,
-      disabled = _ref5.disabled,
-      props = _objectWithoutProperties(_ref5, _excluded$6);
-
-  return /*#__PURE__*/jsx(StyleWebWrapper, {
-    as: PressableIconButtonWebWrapper,
-    $isWhite: color === 'white',
-    $isDisabled: Boolean(disabled),
-    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$9(_objectSpread$9({}, props), {}, {
-      disabled: disabled
-    }))
-  });
-}
-
-var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated$1.View).withConfig({
-  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground"
-})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], function (_ref) {
-  var theme = _ref.theme,
-      color = _ref.color,
-      disabled = _ref.disabled;
-  var iconButton = theme.kitt.iconButton;
-  if (disabled) return iconButton.disabled.backgroundColor;
-  if (color === 'white') return iconButton.white.pressedBackgroundColor;
-  return iconButton["default"].pressedBackgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.iconButton.borderRadius;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.iconButton.height;
-});
-var AnimatedViewContainer = /*#__PURE__*/styled(Animated$1.View).withConfig({
-  displayName: "PressableAnimatedContainer__AnimatedViewContainer"
-})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
-function PressableAnimatedContainer(_ref5) {
-  var disabled = _ref5.disabled,
-      _ref5$color = _ref5.color,
-      color = _ref5$color === void 0 ? 'black' : _ref5$color,
-      testID = _ref5.testID,
-      _ref5$accessibilityRo = _ref5.accessibilityRole,
-      accessibilityRole = _ref5$accessibilityRo === void 0 ? 'button' : _ref5$accessibilityRo,
-      accessibilityLabel = _ref5.accessibilityLabel,
-      children = _ref5.children,
-      onPress = _ref5.onPress;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(false);
-  var opacityStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      return {
-        opacity: withSpring(pressed.value ? 1 : 0)
-      };
-    };
-
-    _f._closure = {
-      withSpring: withSpring,
-      pressed: pressed
-    };
-    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
-    _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
-    _f.__optimalization = 2;
-
-    global.__reanimatedWorkletInit(_f);
-
-    return _f;
-  }());
-  var scaleStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      return {
-        transform: [{
-          scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base["default"])
-        }]
-      };
-    };
-
-    _f._closure = {
-      withSpring: withSpring,
-      pressed: pressed,
-      theme: {
-        kitt: {
-          iconButton: {
-            scale: {
-              base: {
-                active: theme.kitt.iconButton.scale.base.active,
-                "default": theme.kitt.iconButton.scale.base["default"]
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
-    _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
-    _f.__optimalization = 2;
-
-    global.__reanimatedWorkletInit(_f);
-
-    return _f;
-  }());
-  return /*#__PURE__*/jsx(PressableIconButton, {
-    accessibilityRole: accessibilityRole,
-    disabled: disabled,
-    color: color,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    onPress: onPress,
-    onPressIn: function onPressIn() {
-      pressed.value = true;
-    },
-    onPressOut: function onPressOut() {
-      pressed.value = false;
-    },
-    children: /*#__PURE__*/jsxs(AnimatedViewContainer, {
-      style: disabled ? [{
-        transform: [{
-          scale: 1
-        }]
-      }] : [scaleStyles],
-      children: [/*#__PURE__*/jsx(AnimatedIconButtonBackground, {
-        disabled: disabled,
-        color: color,
-        style: disabled ? [{
-          opacity: 1
-        }] : [opacityStyles]
-      }), children]
-    })
-  });
-}
-
-var IconButtonContentBorder = /*#__PURE__*/styled.View.withConfig({
-  displayName: "IconButton__IconButtonContentBorder"
-})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return "".concat(theme.kitt.iconButton.borderWidth, "px solid");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      disabled = _ref2.disabled;
-  return disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.iconButton.borderRadius;
+  var theme = _ref.theme;
+  return theme.kitt.colors.uiBackground;
 });
-
-function IconButtonContent(_ref6) {
-  var disabled = _ref6.disabled,
-      color = _ref6.color,
-      icon = _ref6.icon;
-  return /*#__PURE__*/jsx(IconButtonContentBorder, {
-    disabled: disabled,
-    children: /*#__PURE__*/jsx(TypographyIcon, {
-      color: disabled ? 'black-light' : color,
-      icon: icon
-    })
+function FullScreenModal(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/jsx(Container$3, {
+    children: children
   });
 }
+FullScreenModal.Header = FullScreenModalHeader;
+FullScreenModal.Body = FullScreenModalBody;
 
-function IconButton(_ref7) {
-  var icon = _ref7.icon,
-      color = _ref7.color,
-      disabled = _ref7.disabled,
-      testID = _ref7.testID,
-      accessibilityLabel = _ref7.accessibilityLabel,
-      accessibilityRole = _ref7.accessibilityRole,
-      onPress = _ref7.onPress;
-  return /*#__PURE__*/jsx(PressableAnimatedContainer, {
-    color: color,
-    disabled: disabled,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityRole,
-    onPress: onPress,
-    children: /*#__PURE__*/jsx(IconButtonContent, {
-      disabled: disabled,
-      color: color,
-      icon: icon
+function SpinningIcon(_ref) {
+  var icon = _ref.icon,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? defaultIconSize : _ref$size,
+      align = _ref.align,
+      color = _ref.color;
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  var animationRef = useRef(new Animated$1.Value(0));
+  var rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    var animation = Animated$1.loop(Animated$1.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return function () {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: /*#__PURE__*/jsx(Animated$1.View, {
+      style: {
+        transform: [{
+          rotate: rotation
+        }]
+      },
+      children: clonedIcon
     })
   });
 }
 
-var _excluded$5 = ["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; }
-var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
+var _excluded$6 = ["children"];
+var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
 })(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$6);
 
-  return /*#__PURE__*/jsx(ContentView$1, _objectSpread$8(_objectSpread$8({}, rest), {}, {
+  return /*#__PURE__*/jsx(ContentView, _objectSpread(_objectSpread({}, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$4 = ["children", "side"],
-    _excluded2$1 = ["children", "align"];
-
-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 _excluded$5 = ["children", "side"],
+    _excluded2$2 = ["children", "align"];
 var SideContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemSideContent__SideContainerView"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -2645,9 +2895,9 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$4);
+      rest = _objectWithoutProperties(_ref3, _excluded$5);
 
-  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
     side: side
   }, rest), {}, {
     children: children
@@ -2663,20 +2913,16 @@ function ListItemSideContent(_ref5) {
   var children = _ref5.children,
       _ref5$align = _ref5.align,
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
-      rest = _objectWithoutProperties(_ref5, _excluded2$1);
+      rest = _objectWithoutProperties(_ref5, _excluded2$2);
 
-  return /*#__PURE__*/jsx(SideContentView, _objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
     align: align
   }, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
-
-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 _excluded$4 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 var ContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItem__ContainerView"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -2715,16 +2961,16 @@ function ListItem(_ref5) {
       left = _ref5.left,
       right = _ref5.right,
       onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$3);
+      rest = _objectWithoutProperties(_ref5, _excluded$4);
 
-  var Wrapper = onPress ? Pressable : Fragment;
-  var wrapperProps = onPress ? _objectSpread$6({
+  var Wrapper = onPress ? Pressable : Fragment$1;
+  var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
     onPress: onPress
   }, rest) : undefined;
   var containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsx(Wrapper, _objectSpread$6(_objectSpread$6({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$6(_objectSpread$6({
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread(_objectSpread({
       withPadding: withPadding,
       borders: borders
     }, containerProps), {}, {
@@ -2749,11 +2995,12 @@ function getActivityIndicatorSize(size) {
   return size < 36 ? 'small' : 'large';
 }
 
+var defaultLoaderSize = defaultIconSize;
 function Loader(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 20 : _ref$size;
+      size = _ref$size === void 0 ? defaultLoaderSize : _ref$size;
   var theme = /*#__PURE__*/useTheme();
   var colorHex = theme.kitt.typography.colors[color];
   return /*#__PURE__*/jsx(ActivityIndicator, {
@@ -2923,159 +3170,6 @@ function Message(_ref) {
   });
 }
 
-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; }
-// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
-  displayName: "Overlay__OverlayPressable"
-})(function (_ref) {
-  var theme = _ref.theme;
-  return _objectSpread$5(_objectSpread$5({}, StyleSheet.absoluteFillObject), {}, {
-    backgroundColor: theme.kitt.colors.overlay.dark
-  });
-});
-function Overlay(_ref2) {
-  var onPress = _ref2.onPress;
-  return /*#__PURE__*/jsx(OverlayPressable, {
-    accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsx(View, {})
-  });
-}
-
-var BodyView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Body__BodyView"
-})(["padding:", "px ", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 6;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.spacing * 4;
-});
-function ModalBody(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/jsx(ScrollView, {
-    children: /*#__PURE__*/jsx(BodyView, {
-      children: children
-    })
-  });
-}
-
-var FooterView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Footer__FooterView"
-})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 4;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.colors.separator;
-});
-function ModalFooter(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/jsx(FooterView, {
-    children: children
-  });
-}
-
-var OnCloseContext = /*#__PURE__*/createContext(function () {});
-
-var HeaderView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__HeaderView"
-})(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 2;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.colors.separator;
-});
-var LeftIconView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__LeftIconView"
-})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.spacing * 2;
-});
-var RightIconView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__RightIconView"
-})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.spacing * 2;
-});
-var TitleView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__TitleView"
-})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
-  var theme = _ref5.theme,
-      isIconLeft = _ref5.isIconLeft;
-  return isIconLeft ? 0 : theme.kitt.spacing * 2;
-});
-function ModalHeader(_ref6) {
-  var left = _ref6.left,
-      right = _ref6.right,
-      children = _ref6.children;
-  var onClose = useContext(OnCloseContext);
-  var isIconLeft = !!left;
-  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(IconButton, {
-        icon: /*#__PURE__*/jsx(XIcon, {}),
-        onPress: onClose
-      })
-    })]
-  });
-}
-
-var ModalView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Modal__ModalView"
-})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 20;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.spacing * 4;
-});
-var ContentView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Modal__ContentView"
-})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.card.borderRadius;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.colors.uiBackgroundLight;
-});
-function Modal(_ref5) {
-  var visible = _ref5.visible,
-      children = _ref5.children,
-      onClose = _ref5.onClose,
-      onEntered = _ref5.onEntered,
-      onExited = _ref5.onExited;
-  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;
-Modal.Footer = ModalFooter;
-
 function Notification(_ref) {
   var type = _ref.type,
       children = _ref.children,
@@ -3109,7 +3203,7 @@ var Container$2 = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref2.theme;
   return theme.kitt.skeleton.flareColor;
 });
-var AnimatedLinearGradient = Animated$1.createAnimatedComponent(LinearGradient);
+var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 function SkeletonContent(_ref3) {
   var isLoading = _ref3.isLoading,
       width = _ref3.width;
@@ -3394,13 +3488,9 @@ function Story(_ref) {
   });
 }
 
-var _excluded$2 = ["title", "children", "internalIsDemoSection"],
-    _excluded2 = ["title", "children"],
+var _excluded$3 = ["title", "children", "internalIsDemoSection"],
+    _excluded2$1 = ["title", "children"],
     _excluded3 = ["title", "children"];
-
-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$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 StyledSection = /*#__PURE__*/styled.View.withConfig({
   displayName: "StorySection__StyledSection"
 })(["margin-bottom:32px;"]);
@@ -3408,10 +3498,10 @@ function StorySection(_ref) {
   var title = _ref.title,
       children = _ref.children,
       internalIsDemoSection = _ref.internalIsDemoSection,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$3);
 
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/jsxs(StyledSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
       children: title
     }), children]
@@ -3424,9 +3514,9 @@ var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
 function SubSection(_ref2) {
   var title = _ref2.title,
       children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
+      props = _objectWithoutProperties(_ref2, _excluded2$1);
 
-  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
       children: title
     }), children]
@@ -3442,7 +3532,7 @@ function BlockSection(_ref3) {
       children = _ref3.children,
       props = _objectWithoutProperties(_ref3, _excluded3);
 
-  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
       children: title
     }), children]
@@ -3556,7 +3646,7 @@ function StoryGridCol(_ref2) {
     return null;
   }
 
-  return /*#__PURE__*/jsxs(Fragment$1, {
+  return /*#__PURE__*/jsxs(Fragment, {
     children: [title ? /*#__PURE__*/jsx(StoryTitle.Level4, {
       numberOfLines: 1,
       color: titleColor,
@@ -3665,7 +3755,7 @@ function ModalDateTimePicker(_ref2) {
       setCurrentValue(value);
       onClose();
     },
-    children: visible ? /*#__PURE__*/jsxs(Fragment$1, {
+    children: visible ? /*#__PURE__*/jsxs(Fragment, {
       children: [title ? /*#__PURE__*/jsx(Title, {
         children: title
       }) : null, /*#__PURE__*/jsx(Modal.Body, {
@@ -3792,9 +3882,6 @@ function TimePicker(_ref) {
   });
 }
 
-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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledTooltipView = /*#__PURE__*/styled.View.withConfig({
   displayName: "TooltipView__StyledTooltipView"
 })(["align-items:center;"]);
@@ -3816,7 +3903,7 @@ var StyledTooltipContent = /*#__PURE__*/styled.View.withConfig({
 
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(View, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
@@ -3852,9 +3939,6 @@ function TooltipView(_ref7) {
 
 var tooltipDefaultPosition = 'top';
 
-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; }
 // Since the tooltip use absolute positionning, we need a parent to provide the relative root
 var TooltipContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "Tooltip__TooltipContainer"
@@ -3941,12 +4025,12 @@ function Tooltip(_ref) {
       ref: floating,
       accessibilityElementsHidden: !pressed.value,
       importantForAccessibility: pressed.value === true ? 'auto' : 'no-hide-descendants',
-      style: _objectSpread$2(_objectSpread$2({}, StyleSheet.absoluteFillObject), {}, {
+      style: _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
         top: y && position === 'bottom' ? y : undefined,
         bottom: y && position === 'top' ? y : undefined,
         left: x !== null && x !== void 0 ? x : 0
       }),
-      children: /*#__PURE__*/jsx(Animated$1.View, {
+      children: /*#__PURE__*/jsx(Animated.View, {
         style: [opacityStyles],
         children: /*#__PURE__*/jsx(TooltipView, {
           position: position,
@@ -3984,11 +4068,7 @@ function TypographyEmoji(_ref2) {
   });
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "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 _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 _excluded$2 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
 var TypographyLinkWebWrapper = undefined;
 var StyledLink = /*#__PURE__*/styled.Text.withConfig({
   displayName: "TypographyLink__StyledLink"
@@ -4012,9 +4092,9 @@ function TypographyLink(_ref4) {
       href = _ref4.href,
       hrefAttrs = _ref4.hrefAttrs,
       onPress = _ref4.onPress,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$1);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$2);
 
-  return /*#__PURE__*/jsx(Typography, _objectSpread$1(_objectSpread$1({}, otherProps), {}, {
+  return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, otherProps), {}, {
     accessibilityRole: "none",
     children: /*#__PURE__*/jsx(StyleWebWrapper, {
       as: TypographyLinkWebWrapper,
@@ -4036,6 +4116,39 @@ function TypographyLink(_ref4) {
   }));
 }
 
+var _excluded$1 = ["color"],
+    _excluded2 = ["color"];
+
+function TypographySpinningIconSpecifiedColor(_ref) {
+  var color = _ref.color,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(SpinningIcon, _objectSpread(_objectSpread({}, props), {}, {
+    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
+  }));
+}
+
+function TypographySpinningIconInheritColor(props) {
+  var color = useTypographyColor();
+  return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
+    color: color
+  }, props));
+}
+
+function TypographySpinningIcon(_ref2) {
+  var color = _ref2.color,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  if (color) {
+    return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
+      color: color
+    }, props));
+  }
+
+  return /*#__PURE__*/jsx(TypographySpinningIconInheritColor, _objectSpread({}, props));
+}
+
 var hex2rgba = function (hex) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   var r = parseInt(hex.slice(1, 3), 16);
@@ -4074,9 +4187,6 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-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; }
 // 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>(
@@ -4098,5 +4208,5 @@ function withTheme(WrappedComponent) {
   });
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, TypographySpinningIcon, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.android.js.map