@ornikar/kitt-universal 9.4.0 → 9.7.0

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

@@ -1,23 +1,23 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
-export * from '@ornikar/kitt-icons';
-import { Platform, Image, StyleSheet, View as View$1, ScrollView as ScrollView$1, Linking, useWindowDimensions, Pressable as Pressable$2, Modal as Modal$1, Text as Text$2, TextInput, Animated as Animated$1, Easing } from 'react-native';
+import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Text as Text$1, View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, NativeBaseProvider, extendTheme } from 'native-base';
+import _extends from '@babel/runtime/helpers/extends';
+import React, { forwardRef, useContext, createContext, cloneElement, useRef, useEffect, useState, Children, useMemo, Fragment as Fragment$1 } from 'react';
+import { Platform, Animated as Animated$1, Easing, useWindowDimensions, Image, StyleSheet, View as View$2, ScrollView as ScrollView$2, Linking, Pressable as Pressable$2, Modal as Modal$1, Text as Text$2, TextInput } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useDerivedValue, withTiming, useAnimatedProps, withDelay, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import React, { cloneElement, useContext, createContext, forwardRef, useState, Children, useMemo, useEffect, useRef, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Text as Text$1, Pressable as Pressable$1, Image as Image$1, NativeBaseProvider, extendTheme, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, View as View$2, ScrollView as ScrollView$2 } from 'native-base';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useDerivedValue, withTiming, useAnimatedProps, withDelay, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
-import { parse } from 'twemoji-parser';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { ArcIcon, UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+export * from '@ornikar/kitt-icons';
+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 { styled as styled$1 } from '@linaria/react';
-import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { Picker as Picker$1 } from '@react-native-picker/picker';
@@ -25,39 +25,173 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
 
-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 Stack = Stack$1;
+var VStack = VStack$1;
+var HStack = HStack$1;
+
+function warn(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(message);
+  }
+}
+function deprecatedMessage(symbol, deprecation, replaceBy) {
+  var replaceMessage = replaceBy === undefined ? '' : ", please use ".concat(replaceBy, " instead");
+  warn("[Deprecation] in ".concat(symbol, ": ").concat(deprecation, " is deprecated").concat(replaceMessage, "."));
+}
+function deprecatedInComponent(component, deprecation, replaceBy) {
+  deprecatedMessage("<".concat(component, " />"), deprecation, replaceBy);
+}
+
+var hasVariant = function (button, variant) {
+  return variant in button;
+};
+
+function getVariantValuesIfExist(theme, type, variant) {
+  var button = theme.kitt.button[type];
+
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type]["default"];
+}
+
+var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "AnimatedButtonPressable__StyledPressable"
+})(["", ""], function (_ref) {
+  var $isStretch = _ref.$isStretch;
+  if ($isStretch) return undefined;
+  return 'align-self: flex-start;';
+});
+var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
+  displayName: "AnimatedButtonPressable__StyledAnimatedView"
+})(["border-radius:", "px;"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.button.borderRadius;
+});
+var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      disabled = _ref3.disabled,
+      accessibilityRole = _ref3.accessibilityRole,
+      $type = _ref3.$type,
+      $variant = _ref3.$variant,
+      $isStretch = _ref3.$isStretch,
+      href = _ref3.href,
+      hrefAttrs = _ref3.hrefAttrs,
+      testID = _ref3.testID,
+      onPress = _ref3.onPress;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(0);
+  var color = useSharedValue(0);
+
+  var _getVariantValuesIfEx = getVariantValuesIfExist(theme, $type, $variant),
+      backgroundColor = _getVariantValuesIfEx.backgroundColor,
+      pressedBackgroundColor = _getVariantValuesIfEx.pressedBackgroundColor;
+
+  var scale = theme.kitt.button.scale;
+  var scaleStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
+        transform: [{
+          scale: withSpring(pressed.value ? scale.base.active : scale.base["default"])
+        }]
+      };
+    };
+
+    _f._closure = {
+      interpolateColor: interpolateColor,
+      color: color,
+      backgroundColor: backgroundColor,
+      pressedBackgroundColor: pressedBackgroundColor,
+      withSpring: withSpring,
+      pressed: pressed,
+      scale: {
+        base: {
+          active: scale.base.active,
+          "default": scale.base["default"]
+        }
+      }
+    };
+    _f.asString = "function _f(){const{interpolateColor,color,backgroundColor,pressedBackgroundColor,withSpring,pressed,scale}=jsThis._closure;{return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),transform:[{scale:withSpring(pressed.value?scale.base.active:scale.base.default)}]};}}";
+    _f.__workletHash = 5368461229978;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (56:41)";
+    _f.__optimalization = 2;
+    return _f;
+  }());
+
+  var handlePressInOut = function (pressIn) {
+    color.value = withSpring(pressIn ? 1 : 0);
+    pressed.value = pressIn ? 1 : 0;
+  };
+
+  return /*#__PURE__*/jsx(StyledPressable, {
+    ref: ref,
+    disabled: disabled,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    $isStretch: $isStretch,
+    $type: $type,
+    onPress: onPress,
+    onPressIn: function onPressIn() {
+      handlePressInOut(true);
+    },
+    onPressOut: function onPressOut() {
+      handlePressInOut(false);
+    },
+    children: /*#__PURE__*/jsx(StyledAnimatedView, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: children
+    })
+  });
+});
+
+var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseStyledButtonPressable"
+})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.button.minWidth;
 }, function (_ref2) {
-  var $size = _ref2.$size;
-  return $size;
+  var theme = _ref2.theme,
+      $isStretch = _ref2.$isStretch;
+  return $isStretch ? '100%' : "".concat(theme.kitt.button.maxWidth, "px");
 }, function (_ref3) {
-  var $size = _ref3.$size;
-  return $size;
+  var $isStretch = _ref3.$isStretch;
+  return $isStretch ? '100%' : 'auto';
 }, function (_ref4) {
-  var _ref4$$align = _ref4.$align,
-      $align = _ref4$$align === void 0 ? 'auto' : _ref4$$align;
-  return $align;
+  var theme = _ref4.theme;
+  return theme.kitt.button.minHeight;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.button.borderRadius;
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      $isDisabled = _ref6.$isDisabled,
+      $type = _ref6.$type,
+      $variant = _ref6.$variant;
+  if ($isDisabled) return theme.kitt.button.disabled["default"].backgroundColor;
+  if (Platform.OS !== 'web') return 'transparent';
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
+}, function (_ref7) {
+  var theme = _ref7.theme,
+      $size = _ref7.$size,
+      $isDisabled = _ref7.$isDisabled;
+  var _theme$kitt$button$co = theme.kitt.button.contentPadding,
+      large = _theme$kitt$button$co.large,
+      defaultPadding = _theme$kitt$button$co["default"],
+      disabledPadding = _theme$kitt$button$co.disabled,
+      xLarge = _theme$kitt$button$co.xLarge;
+  if ($size === 'large') return large;
+  if ($size === 'xlarge') return xLarge;
+  if ($isDisabled) return disabledPadding;
+  return defaultPadding;
 });
-function Icon(_ref5) {
-  var icon = _ref5.icon,
-      _ref5$size = _ref5.size,
-      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: clonedIcon
-  });
-}
 
 var KittBreakpoints = {
   /**
@@ -116,7 +250,7 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$l = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$n = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -188,7 +322,7 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$l);
+      otherProps = _objectWithoutProperties(_ref, _excluded$n);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -285,264 +419,48 @@ Typography.h3 = createHeading(3, 'header3');
 Typography.h4 = createHeading(4, 'header4');
 /** @deprecated use Typography.Header6 */
 
-Typography.h5 = createHeading(5, 'header5');
-
-var _excluded$k = ["size", "round", "light", "sizeVariant"];
-
-var getInitials = function (firstname, lastname) {
-  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
-};
-
-var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Avatar__StyledAvatarView"
-})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
-  var theme = _ref.theme,
-      $isRound = _ref.$isRound,
-      $size = _ref.$size,
-      $sizeVariant = _ref.$sizeVariant;
-  if ($isRound) return "".concat($size / 2, "px");
-  return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      $isLight = _ref2.$isLight;
-  return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
-}, function (_ref3) {
-  var $size = _ref3.$size;
-  return $size;
-}, function (_ref4) {
-  var $size = _ref4.$size;
-  return $size;
-});
-
-function AvatarContent(_ref5) {
-  var size = _ref5.size,
-      src = _ref5.src,
-      firstname = _ref5.firstname,
-      lastname = _ref5.lastname,
-      alt = _ref5.alt,
-      isLight = _ref5.isLight,
-      sizeVariant = _ref5.sizeVariant;
-
-  if (src) {
-    return /*#__PURE__*/jsx(Image, {
-      source: {
-        uri: src
-      },
-      style: {
-        width: size,
-        height: size
-      },
-      accessibilityLabel: alt
-    });
-  }
-
-  if (firstname && lastname) {
-    return /*#__PURE__*/jsx(Typography.Text, {
-      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
-      variant: sizeVariant === 'large' ? 'bold' : 'regular',
-      color: isLight ? 'black' : 'white',
-      children: getInitials(firstname, lastname)
-    });
-  }
-
-  return /*#__PURE__*/jsx(Icon, {
-    icon: /*#__PURE__*/jsx(UserIcon, {}),
-    color: isLight ? 'black' : 'white',
-    size: size / 2
-  });
-}
-
-function Avatar(_ref6) {
-  var _ref6$size = _ref6.size,
-      size = _ref6$size === void 0 ? 40 : _ref6$size,
-      round = _ref6.round,
-      light = _ref6.light,
-      sizeVariant = _ref6.sizeVariant,
-      props = _objectWithoutProperties(_ref6, _excluded$k);
-
-  return /*#__PURE__*/jsx(StyledAvatarView, {
-    $size: size,
-    $isRound: round,
-    $isLight: light,
-    $sizeVariant: sizeVariant,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
-      size: size,
-      isLight: light,
-      sizeVariant: sizeVariant
-    }, props))
-  });
-}
-
-function warn(message) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(message);
-  }
-}
-function deprecatedMessage(symbol, deprecation, replaceBy) {
-  var replaceMessage = replaceBy === undefined ? '' : ", please use ".concat(replaceBy, " instead");
-  warn("[Deprecation] in ".concat(symbol, ": ").concat(deprecation, " is deprecated").concat(replaceMessage, "."));
-}
-function deprecatedInComponent(component, deprecation, replaceBy) {
-  deprecatedMessage("<".concat(component, " />"), deprecation, replaceBy);
-}
-
-var hasVariant = function (button, variant) {
-  return variant in button;
-};
-
-function getVariantValuesIfExist(theme, type, variant) {
-  var button = theme.kitt.button[type];
-
-  if (hasVariant(button, variant)) {
-    return button[variant];
-  }
-
-  return theme.kitt.button[type]["default"];
-}
-
-var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "AnimatedButtonPressable__StyledPressable"
-})(["", ""], function (_ref) {
-  var $isStretch = _ref.$isStretch;
-  if ($isStretch) return undefined;
-  return 'align-self: flex-start;';
-});
-var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
-  displayName: "AnimatedButtonPressable__StyledAnimatedView"
-})(["border-radius:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.button.borderRadius;
-});
-var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-      disabled = _ref3.disabled,
-      accessibilityRole = _ref3.accessibilityRole,
-      $type = _ref3.$type,
-      $variant = _ref3.$variant,
-      $isStretch = _ref3.$isStretch,
-      href = _ref3.href,
-      hrefAttrs = _ref3.hrefAttrs,
-      testID = _ref3.testID,
-      onPress = _ref3.onPress;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(0);
-  var color = useSharedValue(0);
-
-  var _getVariantValuesIfEx = getVariantValuesIfExist(theme, $type, $variant),
-      backgroundColor = _getVariantValuesIfEx.backgroundColor,
-      pressedBackgroundColor = _getVariantValuesIfEx.pressedBackgroundColor;
-
-  var scale = theme.kitt.button.scale;
-  var scaleStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      return {
-        backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
-        transform: [{
-          scale: withSpring(pressed.value ? scale.base.active : scale.base["default"])
-        }]
-      };
-    };
-
-    _f._closure = {
-      interpolateColor: interpolateColor,
-      color: color,
-      backgroundColor: backgroundColor,
-      pressedBackgroundColor: pressedBackgroundColor,
-      withSpring: withSpring,
-      pressed: pressed,
-      scale: {
-        base: {
-          active: scale.base.active,
-          "default": scale.base["default"]
-        }
-      }
-    };
-    _f.asString = "function _f(){const{interpolateColor,color,backgroundColor,pressedBackgroundColor,withSpring,pressed,scale}=jsThis._closure;{return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),transform:[{scale:withSpring(pressed.value?scale.base.active:scale.base.default)}]};}}";
-    _f.__workletHash = 5368461229978;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (56:41)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
-
-  var handlePressInOut = function (pressIn) {
-    color.value = withSpring(pressIn ? 1 : 0);
-    pressed.value = pressIn ? 1 : 0;
-  };
-
-  return /*#__PURE__*/jsx(StyledPressable, {
-    ref: ref,
-    disabled: disabled,
-    accessibilityRole: accessibilityRole,
-    testID: testID,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    $isStretch: $isStretch,
-    $type: $type,
-    onPress: onPress,
-    onPressIn: function onPressIn() {
-      handlePressInOut(true);
-    },
-    onPressOut: function onPressOut() {
-      handlePressInOut(false);
-    },
-    children: /*#__PURE__*/jsx(StyledAnimatedView, {
-      style: disabled ? [{
-        transform: [{
-          scale: 1
-        }]
-      }] : [scaleStyles],
-      children: children
-    })
-  });
-});
+Typography.h5 = createHeading(5, 'header5');
 
-var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
-  displayName: "BaseStyledButtonPressable"
-})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.button.minWidth;
+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;
 }, function (_ref2) {
-  var theme = _ref2.theme,
-      $isStretch = _ref2.$isStretch;
-  return $isStretch ? '100%' : "".concat(theme.kitt.button.maxWidth, "px");
+  var $size = _ref2.$size;
+  return $size;
 }, function (_ref3) {
-  var $isStretch = _ref3.$isStretch;
-  return $isStretch ? '100%' : 'auto';
+  var $size = _ref3.$size;
+  return $size;
 }, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.button.minHeight;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.button.borderRadius;
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      $isDisabled = _ref6.$isDisabled,
-      $type = _ref6.$type,
-      $variant = _ref6.$variant;
-  if ($isDisabled) return theme.kitt.button.disabled["default"].backgroundColor;
-  if (Platform.OS !== 'web') return 'transparent';
-  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      $size = _ref7.$size,
-      $isDisabled = _ref7.$isDisabled;
-  var _theme$kitt$button$co = theme.kitt.button.contentPadding,
-      large = _theme$kitt$button$co.large,
-      defaultPadding = _theme$kitt$button$co["default"],
-      disabledPadding = _theme$kitt$button$co.disabled,
-      xLarge = _theme$kitt$button$co.xLarge;
-  if ($size === 'large') return large;
-  if ($size === 'xlarge') return xLarge;
-  if ($isDisabled) return disabledPadding;
-  return defaultPadding;
+  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 ? 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: clonedIcon
+  });
+}
 
-var _excluded$j = ["color"],
+var _excluded$m = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -574,7 +492,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$i = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$l = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -679,7 +597,7 @@ function ButtonContentChildren(_ref4) {
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
     children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
-      testID: "button-left-icon",
+      testID: "button.ButtonContent.leftButtonIcon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
       base: "body",
@@ -716,7 +634,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$i);
+      props = _objectWithoutProperties(_ref7, _excluded$l);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -821,7 +739,286 @@ var Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       }), Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsx(StyledDisabled, {}) : null]
     })
   });
-});
+});
+
+function SpinningIcon(_ref) {
+  var icon = _ref.icon,
+      color = _ref.color;
+
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error("Invalid color passed to SpinningIcon: ".concat(String(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(Animated$1.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: clonedIcon
+  });
+}
+
+function LoaderIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsx(SpinningIcon, {
+    color: color,
+    icon: /*#__PURE__*/jsx(ArcIcon, {})
+  });
+}
+
+var View = View$1;
+var ScrollView = ScrollView$1;
+var Pressable = Pressable$1;
+
+function matchWindowSize(_ref, _ref2) {
+  var width = _ref.width,
+      height = _ref.height;
+  var minWidth = _ref2.minWidth,
+      maxWidth = _ref2.maxWidth,
+      minHeight = _ref2.minHeight,
+      maxHeight = _ref2.maxHeight;
+  var hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  var hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
+}
+function useMatchWindowSize(options) {
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width,
+      height = _useWindowDimensions.height;
+
+  return matchWindowSize({
+    width: width,
+    height: height
+  }, options);
+}
+
+var _excluded$k = ["as", "onPress", "disabled", "icon"];
+function ActionsItem(_ref) {
+  var as = _ref.as,
+      onPress = _ref.onPress,
+      disabled = _ref.disabled,
+      icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, _excluded$k);
+
+  var isMedium = useMatchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var mountedRef = useRef(false); // effect just for tracking mounted state, as onPress can unmount the ActionButton
+
+  useEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  return /*#__PURE__*/jsx(View, {
+    children: /*#__PURE__*/jsx(as, _objectSpread(_objectSpread({}, props), {}, {
+      stretch: !isMedium ? true : undefined,
+      disabled: isLoading ? true : disabled,
+      icon: isLoading ? /*#__PURE__*/jsx(LoaderIcon, {}) : icon,
+      onPress: function handlePress(e) {
+        var callPressAndUpdateLoadingState = /*#__PURE__*/function () {
+          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            return _regeneratorRuntime.wrap(function (_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    if (onPress) {
+                      _context.next = 2;
+                      break;
+                    }
+
+                    return _context.abrupt("return");
+
+                  case 2:
+                    setIsLoading(true);
+                    _context.prev = 3;
+                    _context.next = 6;
+                    return onPress(e);
+
+                  case 6:
+                    if (mountedRef.current) {
+                      setIsLoading(false);
+                    }
+
+                    _context.next = 13;
+                    break;
+
+                  case 9:
+                    _context.prev = 9;
+                    _context.t0 = _context["catch"](3);
+
+                    if (mountedRef.current) {
+                      setIsLoading(false);
+                    }
+
+                    throw _context.t0;
+
+                  case 13:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee, null, [[3, 9]]);
+          }));
+
+          return function () {
+            return _ref2.apply(this, arguments);
+          };
+        }();
+
+        callPressAndUpdateLoadingState();
+      }
+    }))
+  });
+}
+
+function ActionsButton(_ref) {
+  var props = _extends({}, _ref);
+
+  return /*#__PURE__*/jsx(ActionsItem, _objectSpread({
+    as: Button
+  }, props));
+}
+
+var _excluded$j = ["children"];
+function Actions(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$j);
+
+  return /*#__PURE__*/jsx(Stack, _objectSpread(_objectSpread({
+    alignItems: {
+      base: 'stretch',
+      medium: 'center'
+    },
+    direction: {
+      base: 'column',
+      medium: 'row'
+    },
+    flex: 1
+  }, props), {}, {
+    space: "kitt.3",
+    children: children
+  }));
+}
+Actions.Button = ActionsButton;
+Actions.Item = ActionsItem;
+
+var _excluded$i = ["size", "round", "light", "sizeVariant"];
+
+var getInitials = function (firstname, lastname) {
+  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
+};
+
+var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Avatar__StyledAvatarView"
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
+  var theme = _ref.theme,
+      $isRound = _ref.$isRound,
+      $size = _ref.$size,
+      $sizeVariant = _ref.$sizeVariant;
+  if ($isRound) return "".concat($size / 2, "px");
+  return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $isLight = _ref2.$isLight;
+  return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
+}, function (_ref3) {
+  var $size = _ref3.$size;
+  return $size;
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  return $size;
+});
+
+function AvatarContent(_ref5) {
+  var size = _ref5.size,
+      src = _ref5.src,
+      firstname = _ref5.firstname,
+      lastname = _ref5.lastname,
+      alt = _ref5.alt,
+      isLight = _ref5.isLight,
+      sizeVariant = _ref5.sizeVariant;
+
+  if (src) {
+    return /*#__PURE__*/jsx(Image, {
+      source: {
+        uri: src
+      },
+      style: {
+        width: size,
+        height: size
+      },
+      accessibilityLabel: alt
+    });
+  }
+
+  if (firstname && lastname) {
+    return /*#__PURE__*/jsx(Typography.Text, {
+      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
+      color: isLight ? 'black' : 'white',
+      children: getInitials(firstname, lastname)
+    });
+  }
+
+  return /*#__PURE__*/jsx(Icon, {
+    icon: /*#__PURE__*/jsx(UserIcon, {}),
+    color: isLight ? 'black' : 'white',
+    size: size / 2
+  });
+}
+
+function Avatar(_ref6) {
+  var _ref6$size = _ref6.size,
+      size = _ref6$size === void 0 ? 40 : _ref6$size,
+      round = _ref6.round,
+      light = _ref6.light,
+      sizeVariant = _ref6.sizeVariant,
+      props = _objectWithoutProperties(_ref6, _excluded$i);
+
+  return /*#__PURE__*/jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    $sizeVariant: sizeVariant,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
+      size: size,
+      isLight: light,
+      sizeVariant: sizeVariant
+    }, props))
+  });
+}
 
 var Container$5 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Card__Container"
@@ -852,6 +1049,88 @@ function Card(_ref6) {
   });
 }
 
+var useNativeAnimation = function (_ref) {
+  var selected = _ref.selected,
+      disabled = _ref.disabled,
+      isPressedInternal = _ref.isPressedInternal;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(Boolean(isPressedInternal));
+  var progress = useDerivedValue(function () {
+    var _f = function () {
+      return withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: withTiming,
+      pressed: pressed,
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              transition: {
+                duration: theme.kitt.choices.item.transition.duration
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
+    _f.__workletHash = 1120030177160;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (31:35)";
+    return _f;
+  }());
+  var backgroundStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      var _theme$kitt$choices$i = theme.kitt.choices.item.backgroundColor,
+          defaultBg = _theme$kitt$choices$i["default"],
+          pressedBg = _theme$kitt$choices$i.pressed,
+          selectedBg = _theme$kitt$choices$i.selected,
+          disabledBg = _theme$kitt$choices$i.disabled;
+      if (disabled) return {
+        backgroundColor: disabledBg
+      };
+      if (selected) return {
+        backgroundColor: selectedBg
+      };
+      return {
+        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled: disabled,
+      selected: selected,
+      interpolateColor: interpolateColor,
+      progress: progress
+    };
+    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
+    _f.__workletHash = 15506726129309;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (35:44)";
+    return _f;
+  }());
+  return {
+    onPressIn: function onPressIn() {
+      pressed.value = true;
+    },
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    },
+    backgroundStyles: backgroundStyles
+  };
+};
+
 function getCurrentTextColor(_ref) {
   var isDisabled = _ref.isDisabled,
       isSelected = _ref.isSelected,
@@ -870,7 +1149,7 @@ function getBorderRadius(defaultRadius, variant) {
   return defaultRadius;
 }
 
-var DisabledBorder = /*#__PURE__*/styled(View$1).withConfig({
+var DisabledBorder = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "ChoiceItem__DisabledBorder"
 })(["border-radius:", "px;", ";"], function (_ref2) {
   var theme = _ref2.theme,
@@ -883,7 +1162,7 @@ var DisabledBorder = /*#__PURE__*/styled(View$1).withConfig({
       color = _theme$kitt$choices$i.color;
   return css(["border:", "px solid ", ";"], width, color);
 });
-var ChoiceItemView = /*#__PURE__*/styled(Animated.View).withConfig({
+var ChoiceItemView = /*#__PURE__*/styled(Platform.OS === 'web' ? View$2 : Animated.View).withConfig({
   displayName: "ChoiceItem__ChoiceItemView"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], function (_ref4) {
   var theme = _ref4.theme,
@@ -939,73 +1218,15 @@ function ChoiceItem(_ref8) {
       onChange = _ref8.onChange,
       onBlur = _ref8.onBlur,
       onFocus = _ref8.onFocus;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(Boolean(isPressedInternal));
-  var progress = useDerivedValue(function () {
-    var _f = function () {
-      return withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-
-    _f._closure = {
-      withTiming: withTiming,
-      pressed: pressed,
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              transition: {
-                duration: theme.kitt.choices.item.transition.duration
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
-    _f.__workletHash = 1120030177160;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (180:35)";
-    return _f;
-  }());
-  var backgroundStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      var _theme$kitt$choices$i5 = theme.kitt.choices.item.backgroundColor,
-          defaultBg = _theme$kitt$choices$i5["default"],
-          pressedBg = _theme$kitt$choices$i5.pressed,
-          selectedBg = _theme$kitt$choices$i5.selected,
-          disabledBg = _theme$kitt$choices$i5.disabled;
-      if (disabled) return {
-        backgroundColor: disabledBg
-      };
-      if (selected) return {
-        backgroundColor: selectedBg
-      };
-      return {
-        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
-    };
 
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled: disabled,
-      selected: selected,
-      interpolateColor: interpolateColor,
-      progress: progress
-    };
-    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
-    _f.__workletHash = 15506726129309;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (184:44)";
-    return _f;
-  }());
+  var _useNativeAnimation = useNativeAnimation({
+    selected: selected,
+    disabled: disabled,
+    isPressedInternal: isPressedInternal
+  }),
+      onPressIn = _useNativeAnimation.onPressIn,
+      onPressOut = _useNativeAnimation.onPressOut,
+      backgroundStyles = _useNativeAnimation.backgroundStyles;
 
   var handleChange = function () {
     if (!onChange) return; // Checkbox can be toggled
@@ -1018,7 +1239,7 @@ function ChoiceItem(_ref8) {
     onChange(value);
   };
 
-  return /*#__PURE__*/jsx(Pressable$1, {
+  return /*#__PURE__*/jsx(Pressable, {
     disabled: disabled,
     accessibilityRole: type,
     accessibilityState: {
@@ -1032,12 +1253,8 @@ function ChoiceItem(_ref8) {
       handleChange();
       if (onBlur) onBlur(e);
     },
-    onPressIn: function onPressIn() {
-      pressed.value = true;
-    },
-    onPressOut: function onPressOut() {
-      pressed.value = false;
-    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
     children: function children(_ref9) {
       var isHovered = _ref9.isHovered,
           isPressed = _ref9.isPressed;
@@ -1065,7 +1282,7 @@ function ChoiceItem(_ref8) {
   });
 }
 
-var ChoiceItemContainer = /*#__PURE__*/styled(View$1).withConfig({
+var ChoiceItemContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "ChoiceItemContainer"
 })(["", ""], function (_ref) {
   var theme = _ref.theme,
@@ -1089,12 +1306,12 @@ function ChoicesContainer(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$h);
 
   if (direction === 'row') {
-    return /*#__PURE__*/jsx(ScrollView$1, _objectSpread({
+    return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
     }, props));
   }
 
-  return /*#__PURE__*/jsx(View$1, _objectSpread({}, props));
+  return /*#__PURE__*/jsx(View$2, _objectSpread({}, props));
 }
 
 function Choices(_ref2) {
@@ -1751,8 +1968,14 @@ var input = {
 };
 
 var inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 var inputTag = {
@@ -2009,28 +2232,6 @@ var theme = {
   navigationModal: navigationModal
 };
 
-function matchWindowSize(_ref, _ref2) {
-  var width = _ref.width,
-      height = _ref.height;
-  var minWidth = _ref2.minWidth,
-      maxWidth = _ref2.maxWidth,
-      minHeight = _ref2.minHeight,
-      maxHeight = _ref2.maxHeight;
-  var hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
-  var hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
-  return hasWidthMatched && hasHeightMatched;
-}
-function useMatchWindowSize(options) {
-  var _useWindowDimensions = useWindowDimensions(),
-      width = _useWindowDimensions.width,
-      height = _useWindowDimensions.height;
-
-  return matchWindowSize({
-    width: width,
-    height: height
-  }, options);
-}
-
 function createWindowSizeHelper(dimensions) {
   return {
     matchWindowSize: function matchWindowSize$1(options) {
@@ -2382,7 +2583,7 @@ var BodyView = /*#__PURE__*/styled.View.withConfig({
 });
 function ModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/jsx(ScrollView$1, {
+  return /*#__PURE__*/jsx(ScrollView$2, {
     children: /*#__PURE__*/jsx(BodyView, {
       children: children
     })
@@ -3086,40 +3287,25 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldContainer"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FeedbackContainer"
-})(["", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__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,
-      input = _ref4.input,
-      feedback = _ref4.feedback;
-  return /*#__PURE__*/jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsx(LabelContainer, {
+function InputField(_ref) {
+  var label = _ref.label,
+      labelFeedback = _ref.labelFeedback,
+      input = _ref.input,
+      feedback = _ref.feedback;
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });
@@ -3202,7 +3388,7 @@ var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
 };
 
-var InputTagContainer = /*#__PURE__*/styled(View$1).withConfig({
+var InputTagContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "InputTag__InputTagContainer"
 })(["align-items:center;justify-content:center;flex-direction:row;align-self:flex-start;overflow:hidden;padding-horizontal:", "px;background-color:", ";border-radius:", "px;"], function (_ref) {
   var theme = _ref.theme;
@@ -3224,7 +3410,7 @@ var InputTagContainer = /*#__PURE__*/styled(View$1).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.forms.inputTag.borderRadius;
 });
-var IconContainer = /*#__PURE__*/styled(View$1).withConfig({
+var IconContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "InputTag__IconContainer"
 })(["margin-right:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
@@ -3524,47 +3710,6 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-function SpinningIcon(_ref) {
-  var icon = _ref.icon,
-      color = _ref.color;
-
-  if (process.env.NODE_ENV !== 'production' && !color) {
-    throw new Error("Invalid color passed to SpinningIcon: ".concat(String(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(Animated$1.View, {
-    style: {
-      transform: [{
-        rotate: rotation
-      }]
-    },
-    children: clonedIcon
-  });
-}
-
 var _excluded$7 = ["children"];
 var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
@@ -3691,14 +3836,6 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function LoaderIcon(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/jsx(SpinningIcon, {
-    color: color,
-    icon: /*#__PURE__*/jsx(ArcIcon, {})
-  });
-}
-
 function IconContent(_ref) {
   var type = _ref.type,
       color = _ref.color;
@@ -3884,7 +4021,7 @@ function CloseButton(_ref) {
   });
 }
 
-var ModalBehaviourContainer = /*#__PURE__*/styled(View$1).withConfig({
+var ModalBehaviourContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "ModalBehaviour__ModalBehaviourContainer"
 })(["", ""], function () {
   if (Platform.OS !== 'web') return undefined;
@@ -4051,16 +4188,8 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var Stack = Stack$1;
-var VStack = VStack$1;
-var HStack = HStack$1;
-
-var View = View$2;
-var ScrollView = ScrollView$2;
-var Pressable = Pressable$1;
-
 var _excluded$4 = ["children"];
-var ViewWithPadding = /*#__PURE__*/styled(View$1).withConfig({
+var ViewWithPadding = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "ContentPadding__ViewWithPadding"
 })(["padding:", ";"], function (_ref) {
   var theme = _ref.theme;
@@ -4166,7 +4295,7 @@ var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
     return theme.kitt.colors.separator;
   });
 });
-var Row = /*#__PURE__*/styled(View$1).withConfig({
+var Row = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__Row"
 })(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref7) {
   var $hasContent = _ref7.$hasContent,
@@ -4179,7 +4308,7 @@ var ButtonContainer = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref8.theme;
   return theme.kitt.iconButton.width;
 });
-var ChildrenComponent = /*#__PURE__*/styled(View$1).withConfig({
+var ChildrenComponent = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__ChildrenComponent"
 })(["flex:1;align-items:center;", ";"], function (_ref9) {
   var theme = _ref9.theme,
@@ -4238,7 +4367,7 @@ function Header(_ref12) {
   });
 }
 
-var NavigationModalContainer = /*#__PURE__*/styled(View$1).withConfig({
+var NavigationModalContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "NavigationModalContainer"
 })(["position:relative;background-color:", ";flex:1;", ""], function (_ref) {
   var theme = _ref.theme,
@@ -4249,7 +4378,7 @@ var NavigationModalContainer = /*#__PURE__*/styled(View$1).withConfig({
   return css(["min-height:100vh;"]);
 });
 
-var ContainerWithoutHeader = /*#__PURE__*/styled(View$1).withConfig({
+var ContainerWithoutHeader = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "NavigationModal__ContainerWithoutHeader"
 })(["justify-content:space-between;flex:1;"]);
 function NavigationModal(_ref) {
@@ -4259,10 +4388,10 @@ function NavigationModal(_ref) {
       backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/jsxs(NavigationModalContainer, {
     $backgroundColor: backgroundColor,
-    children: [header ? /*#__PURE__*/jsx(View$1, {
+    children: [header ? /*#__PURE__*/jsx(View$2, {
       children: header
     }) : null, /*#__PURE__*/jsxs(ContainerWithoutHeader, {
-      children: [/*#__PURE__*/jsx(ScrollView$1, {
+      children: [/*#__PURE__*/jsx(ScrollView$2, {
         bounces: false,
         contentContainerStyle: {
           flexGrow: 1,
@@ -4542,7 +4671,7 @@ function Picker(_ref) {
           color: item.props.value === value ? theme.picker.ios.selected.color : undefined
         });
       })
-    }) : /*#__PURE__*/jsx(ScrollView$1, {
+    }) : /*#__PURE__*/jsx(ScrollView$2, {
       testID: testID,
       children: React.Children.map(children, function (child) {
         var item = child;
@@ -4630,7 +4759,7 @@ function SkeletonContent(_ref3) {
   });
 }
 
-var SkeletonContainer = /*#__PURE__*/styled(View$1).withConfig({
+var SkeletonContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Skeleton__SkeletonContainer"
 })(["overflow:hidden;"]);
 function Skeleton(_ref) {
@@ -5134,7 +5263,7 @@ function ModalDateTimePicker(_ref2) {
       }) : null, /*#__PURE__*/jsx(Modal.Body, {
         children: /*#__PURE__*/jsx(DateTimePicker, {
           is24Hour: true,
-          testID: "date-picker-native-element",
+          testID: "timePicker.ModalDateTimePicker.dateTimeNativePicker",
           value: currentValue,
           mode: "time",
           display: Platform.OS === 'ios' ? 'spinner' : 'default',
@@ -5241,7 +5370,7 @@ function TimePicker(_ref) {
       children: displayedValue
     }), Platform.OS === 'android' && isTimePickerModalVisible ? /*#__PURE__*/jsx(DateTimePicker, {
       is24Hour: true,
-      testID: "date-picker-native-element",
+      testID: "timePicker.TimePicker.dateTimeNativePicker",
       value: dateTimePickerValue,
       mode: "time",
       display: "default",
@@ -5280,7 +5409,7 @@ var StyledTooltipContent = /*#__PURE__*/styled.View.withConfig({
 
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(View$1, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(View$2, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
@@ -5386,7 +5515,7 @@ function Tooltip(_ref) {
     });
   }, [x, y, reference, floating, update, refs, middlewareData, onUpdate]);
   return /*#__PURE__*/jsxs(TooltipContainer, {
-    children: [/*#__PURE__*/jsx(View$1, {
+    children: [/*#__PURE__*/jsx(View$2, {
       ref: reference,
       children: /*#__PURE__*/jsx(Pressable$2, {
         accessibilityRole: "button",
@@ -5395,7 +5524,7 @@ function Tooltip(_ref) {
         },
         children: children
       })
-    }), /*#__PURE__*/jsx(View$1, {
+    }), /*#__PURE__*/jsx(View$2, {
       ref: floating,
       accessibilityElementsHidden: !pressed.value,
       importantForAccessibility: pressed.value === true ? 'auto' : 'no-hide-descendants',
@@ -5619,5 +5748,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, ChoicesElements, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Actions, Avatar, Button, Card, Checkbox, ChoicesElements, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map