@ornikar/kitt-universal 9.4.0 → 9.5.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();
@@ -287,262 +421,46 @@ Typography.h4 = createHeading(4, 'header4');
 
 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");
+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,
-      $isLight = _ref2.$isLight;
-  return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
+  var $size = _ref2.$size;
+  return $size;
 }, function (_ref3) {
   var $size = _ref3.$size;
   return $size;
 }, function (_ref4) {
-  var $size = _ref4.$size;
-  return $size;
+  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
+  });
+}
 
-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
-    })
-  });
-});
-
-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 theme = _ref2.theme,
-      $isStretch = _ref2.$isStretch;
-  return $isStretch ? '100%' : "".concat(theme.kitt.button.maxWidth, "px");
-}, function (_ref3) {
-  var $isStretch = _ref3.$isStretch;
-  return $isStretch ? '100%' : 'auto';
-}, 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 _excluded$j = ["color"],
-    _excluded2$3 = ["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,112 +634,391 @@ 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, {
+    $isSubtle: isSubtle(type),
+    $isStretch: $isStretch,
+    $isIconOnly: Boolean(!children && icon),
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread(_objectSpread({
+      icon: icon,
+      type: type,
+      isDisabled: isDisabled,
+      color: color
+    }, props), {}, {
+      children: children
+    }))
+  });
+}
+
+var StyledDisabled = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StyledDisabled"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;border:", ";border-radius:", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  var _theme$kitt$button = theme.kitt.button,
+      borderWidth = _theme$kitt$button.borderWidth,
+      disabled = _theme$kitt$button.disabled;
+  return "".concat(borderWidth.disabled, "px solid ").concat(disabled["default"].borderColor);
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.button.borderRadius;
+});
+
+var allowedGhostTypes = ['primary', 'default'];
+
+var getButtonSize = function (_ref) {
+  var large = _ref.large,
+      xLarge = _ref.xLarge,
+      size = _ref.size;
+  if (large) return 'large';
+  if (xLarge) return 'xlarge';
+  return size;
+};
+
+var Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'default' : _ref2$type,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+      disabled = _ref2.disabled,
+      stretch = _ref2.stretch,
+      large = _ref2.large,
+      xLarge = _ref2.xLarge,
+      icon = _ref2.icon,
+      sizeProp = _ref2.size,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'left' : _ref2$iconPosition,
+      testID = _ref2.testID,
+      href = _ref2.href,
+      hrefAttrs = _ref2.hrefAttrs,
+      _ref2$accessibilityRo = _ref2.accessibilityRole,
+      accessibilityRole = _ref2$accessibilityRo === void 0 ? 'button' : _ref2$accessibilityRo,
+      onPress = _ref2.onPress;
+
+  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
+    throw new Error('variant=ghost is only allowed with type=primary or default');
+  }
+
+  if (large || xLarge) {
+    var deprecatedProp = large ? 'large' : 'xLarge';
+    deprecatedInComponent('Button', "".concat(deprecatedProp, " prop"), 'size');
+  }
+
+  var size = getButtonSize({
+    large: large,
+    xLarge: xLarge,
+    size: sizeProp
+  });
+  return /*#__PURE__*/jsx(AnimatedButtonPressable, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    disabled: disabled,
+    $isStretch: stretch,
+    $type: type,
+    $variant: variant,
+    onPress: onPress,
+    children: /*#__PURE__*/jsxs(BaseStyledButtonPressable, {
+      $type: type,
+      $variant: variant,
+      $isStretch: stretch,
+      $size: size,
+      $isDisabled: disabled,
+      children: [/*#__PURE__*/jsx(ButtonContent, {
+        type: type,
+        variant: variant,
+        $isStretch: stretch,
+        isDisabled: disabled,
+        icon: icon,
+        iconPosition: iconPosition,
+        children: children
+      }), 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]]);
+          }));
 
-  var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
-  return /*#__PURE__*/jsx(ButtonContentContainer, {
-    $isSubtle: isSubtle(type),
-    $isStretch: $isStretch,
-    $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread(_objectSpread({
-      icon: icon,
-      type: type,
-      isDisabled: isDisabled,
-      color: color
-    }, props), {}, {
-      children: children
+          return function () {
+            return _ref2.apply(this, arguments);
+          };
+        }();
+
+        callPressAndUpdateLoadingState();
+      }
     }))
   });
 }
 
-var StyledDisabled = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StyledDisabled"
-})(["position:absolute;top:0;left:0;right:0;bottom:0;border:", ";border-radius:", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  var _theme$kitt$button = theme.kitt.button,
-      borderWidth = _theme$kitt$button.borderWidth,
-      disabled = _theme$kitt$button.disabled;
-  return "".concat(borderWidth.disabled, "px solid ").concat(disabled["default"].borderColor);
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.button.borderRadius;
-});
+function ActionsButton(_ref) {
+  var props = _extends({}, _ref);
 
-var allowedGhostTypes = ['primary', 'default'];
+  return /*#__PURE__*/jsx(ActionsItem, _objectSpread({
+    as: Button
+  }, props));
+}
 
-var getButtonSize = function (_ref) {
-  var large = _ref.large,
-      xLarge = _ref.xLarge,
-      size = _ref.size;
-  if (large) return 'large';
-  if (xLarge) return 'xlarge';
-  return size;
+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 Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'default' : _ref2$type,
-      _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-      disabled = _ref2.disabled,
-      stretch = _ref2.stretch,
-      large = _ref2.large,
-      xLarge = _ref2.xLarge,
-      icon = _ref2.icon,
-      sizeProp = _ref2.size,
-      _ref2$iconPosition = _ref2.iconPosition,
-      iconPosition = _ref2$iconPosition === void 0 ? 'left' : _ref2$iconPosition,
-      testID = _ref2.testID,
-      href = _ref2.href,
-      hrefAttrs = _ref2.hrefAttrs,
-      _ref2$accessibilityRo = _ref2.accessibilityRole,
-      accessibilityRole = _ref2$accessibilityRo === void 0 ? 'button' : _ref2$accessibilityRo,
-      onPress = _ref2.onPress;
+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;
+});
 
-  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
-    throw new Error('variant=ghost is only allowed with type=primary or default');
+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 (large || xLarge) {
-    var deprecatedProp = large ? 'large' : 'xLarge';
-    deprecatedInComponent('Button', "".concat(deprecatedProp, " prop"), 'size');
+  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)
+    });
   }
 
-  var size = getButtonSize({
-    large: large,
-    xLarge: xLarge,
-    size: sizeProp
+  return /*#__PURE__*/jsx(Icon, {
+    icon: /*#__PURE__*/jsx(UserIcon, {}),
+    color: isLight ? 'black' : 'white',
+    size: size / 2
   });
-  return /*#__PURE__*/jsx(AnimatedButtonPressable, {
-    ref: ref,
-    accessibilityRole: accessibilityRole,
-    testID: testID,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    disabled: disabled,
-    $isStretch: stretch,
-    $type: type,
-    $variant: variant,
-    onPress: onPress,
-    children: /*#__PURE__*/jsxs(BaseStyledButtonPressable, {
-      $type: type,
-      $variant: variant,
-      $isStretch: stretch,
-      $size: size,
-      $isDisabled: disabled,
-      children: [/*#__PURE__*/jsx(ButtonContent, {
-        type: type,
-        variant: variant,
-        $isStretch: stretch,
-        isDisabled: disabled,
-        icon: icon,
-        iconPosition: iconPosition,
-        children: children
-      }), Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsx(StyledDisabled, {}) : null]
-    })
+}
+
+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"
@@ -870,7 +1067,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,
@@ -1018,7 +1215,7 @@ function ChoiceItem(_ref8) {
     onChange(value);
   };
 
-  return /*#__PURE__*/jsx(Pressable$1, {
+  return /*#__PURE__*/jsx(Pressable, {
     disabled: disabled,
     accessibilityRole: type,
     accessibilityState: {
@@ -1065,7 +1262,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 +1286,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) {
@@ -2009,28 +2206,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 +2557,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
     })
@@ -3202,7 +3377,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 +3399,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 +3699,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 +3825,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 +4010,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 +4177,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 +4284,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 +4297,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 +4356,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 +4367,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 +4377,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 +4660,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 +4748,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 +5252,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 +5359,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 +5398,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 +5504,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 +5513,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 +5737,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