@ornikar/kitt-universal 9.4.0 → 9.7.0

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

@@ -1,60 +1,249 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { View as View$1, Image, Pressable as Pressable$1, StyleSheet, ScrollView as ScrollView$1, Linking, useWindowDimensions, TextInput, Modal as Modal$1, Text as Text$2 } from 'react-native';
+import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Text as Text$1, View as View$2, ScrollView as ScrollView$1, Pressable as Pressable$2, Image as Image$1, NativeBaseProvider, extendTheme } from 'native-base';
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useContext, createContext, cloneElement, useState, useRef, useEffect, Children, useMemo, Fragment } from 'react';
+import { styled } from '@linaria/react';
+import { Pressable as Pressable$1, View as View$1, useWindowDimensions, Image, StyleSheet, ScrollView as ScrollView$2, Linking, TextInput, Modal as Modal$1, Text as Text$2 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
-export * from '@ornikar/kitt-icons';
-import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { cloneElement, useContext, createContext, forwardRef, useState, Children, useMemo, Fragment, useEffect } from 'react';
+import styled$1, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Text as Text$1, Pressable as Pressable$2, 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 { styled as styled$1 } from '@linaria/react';
-import Animated, { useSharedValue, useDerivedValue, withTiming, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
-import { parse } from 'twemoji-parser';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import _extends from '@babel/runtime/helpers/extends';
+import { ArcIcon, UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+export * from '@ornikar/kitt-icons';
+import { parse } from 'twemoji-parser';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-portal';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useFloating, offset, shift, flip, getScrollParents } from '@floating-ui/react-dom';
 import { makeDecorator } from '@storybook/addons';
 
-var defaultIconSize = 20;
-var IconContainer$1 = /*#__PURE__*/styled(View$1).withConfig({
-  displayName: "Icon__IconContainer",
-  componentId: "kitt-universal__sc-usm0ol-0"
-})(["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);
+}
+
+// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
+// export function withTheme<Props extends { theme: DefaultTheme }, C>(
+//   WrappedComponent: ComponentType<Props> & C,
+// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
+//   return function ThemedComponent(props) {
+//     const theme = useTheme();
+//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
+//   };
+// }
+function withTheme(WrappedComponent) {
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var theme = /*#__PURE__*/useTheme();
+    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread({
+      ref: ref,
+      theme: theme
+    }, props));
+  });
+}
+
+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"];
+}
+
+function isSubtle(type) {
+  return type.startsWith('subtle');
+}
+
+var _excluded$m = ["$type", "$variant", "$isStretch", "disabled"];
+var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("div")({
+  name: "AnimatedButtonPressableContainer",
+  "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
+  vars: {
+    "a1vkj3mh-0": [function (_ref) {
+      var $isStretch = _ref.$isStretch;
+      return $isStretch ? 'inherit' : 'inline-flex';
+    }],
+    "a1vkj3mh-1": [function (_ref2) {
+      var $isStretch = _ref2.$isStretch;
+      return $isStretch ? 'stretch' : 'baseline';
+    }],
+    "a1vkj3mh-3": [function (_ref3) {
+      var theme = _ref3.theme;
+      return theme.kitt.button.scale.medium.hover;
+    }],
+    "a1vkj3mh-4": [function (_ref4) {
+      var theme = _ref4.theme,
+          $isDisabled = _ref4.$isDisabled;
+      return "scale(".concat($isDisabled ? 1 : theme.kitt.button.scale.base.active, ")");
+    }],
+    "a1vkj3mh-5": [function (_ref5) {
+      var theme = _ref5.theme,
+          $type = _ref5.$type,
+          $variant = _ref5.$variant,
+          $isDisabled = _ref5.$isDisabled;
+      if ($isDisabled) return theme.kitt.button.disabled["default"].hoverBackgroundColor;
+      return getVariantValuesIfExist(theme, $type, $variant).hoverBackgroundColor;
+    }],
+    "a1vkj3mh-6": [function (_ref6) {
+      var theme = _ref6.theme;
+      var _theme$kitt$button$tr = theme.kitt.button.transition,
+          duration = _theme$kitt$button$tr.duration,
+          timingFunction = _theme$kitt$button$tr.timingFunction;
+      return "color, background, border-color, ".concat(duration, " ").concat(timingFunction);
+    }],
+    "a1vkj3mh-7": [function (_ref7) {
+      var theme = _ref7.theme;
+      return theme.kitt.button.borderRadius;
+    }, "px"],
+    "a1vkj3mh-8": [function (_ref8) {
+      var theme = _ref8.theme;
+      return "opacity ".concat(theme.kitt.button.transition.duration, " ").concat(theme.kitt.button.transition.timingFunction);
+    }],
+    "a1vkj3mh-9": [function (_ref9) {
+      var $isDisabled = _ref9.$isDisabled;
+      return $isDisabled ? 1 : 0;
+    }],
+    "a1vkj3mh-10": [function (_ref10) {
+      var theme = _ref10.theme;
+      return "-".concat(theme.kitt.button.borderWidth.disabled, "px");
+    }],
+    "a1vkj3mh-12": [function (_ref11) {
+      var theme = _ref11.theme;
+      return "calc(100% - ".concat(theme.kitt.button.borderWidth.disabled * 0.5, "px)");
+    }],
+    "a1vkj3mh-14": [function (_ref12) {
+      var theme = _ref12.theme;
+      return "".concat(theme.kitt.button.borderWidth.disabled, "px solid ").concat(theme.kitt.button.disabled["default"].borderColor);
+    }],
+    "a1vkj3mh-15": [function (_ref13) {
+      var theme = _ref13.theme,
+          $type = _ref13.$type,
+          $variant = _ref13.$variant;
+      return "".concat(theme.kitt.button.borderWidth.focus, "px solid ").concat(getVariantValuesIfExist(theme, $type, $variant).focusBorderColor);
+    }],
+    "a1vkj3mh-16": [function (_ref14) {
+      var theme = _ref14.theme;
+      return "-".concat(theme.kitt.button.borderWidth.focus, "px");
+    }],
+    "a1vkj3mh-18": [function (_ref15) {
+      var theme = _ref15.theme,
+          $type = _ref15.$type,
+          $isDisabled = _ref15.$isDisabled;
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type]["default"].color;
+      }
+
+      return 'inherit';
+    }],
+    "a1vkj3mh-19": [function (_ref16) {
+      var theme = _ref16.theme,
+          $type = _ref16.$type,
+          $isDisabled = _ref16.$isDisabled;
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type]["default"].hoverColor;
+      }
+
+      return 'inherit';
+    }],
+    "a1vkj3mh-20": [function (_ref17) {
+      var theme = _ref17.theme,
+          $type = _ref17.$type,
+          $isDisabled = _ref17.$isDisabled;
+      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
+
+      if (isSubtle($type)) {
+        return theme.kitt.button[$type]["default"].activeColor;
+      }
+
+      return 'inherit';
+    }]
+  }
+}));
+var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
+  var $type = _ref18.$type,
+      $variant = _ref18.$variant,
+      $isStretch = _ref18.$isStretch,
+      disabled = _ref18.disabled,
+      props = _objectWithoutProperties(_ref18, _excluded$m);
+
+  return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
+    ref: ref,
+    $type: $type,
+    $variant: $variant,
+    $isDisabled: !!disabled,
+    $isStretch: $isStretch,
+    children: /*#__PURE__*/jsx(Pressable$1, _objectSpread({
+      disabled: disabled
+    }, props))
+  });
+});
+
+var BaseStyledButtonPressable = /*#__PURE__*/styled$1(View$1).withConfig({
+  displayName: "BaseStyledButtonPressable",
+  componentId: "kitt-universal__sc-4k8lse-0"
+})(["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;
+  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 = {
   /**
@@ -113,7 +302,7 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$k = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$l = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -185,7 +374,7 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$k);
+      otherProps = _objectWithoutProperties(_ref, _excluded$l);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -284,320 +473,47 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$j = ["size", "round", "light", "sizeVariant"];
-
-var getInitials = function (firstname, lastname) {
-  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
-};
-
-var StyledAvatarView = /*#__PURE__*/styled(View$1).withConfig({
-  displayName: "Avatar__StyledAvatarView",
-  componentId: "kitt-universal__sc-9miubv-0"
-})(["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$1(View$1).withConfig({
+  displayName: "Icon__IconContainer",
+  componentId: "kitt-universal__sc-usm0ol-0"
+})(["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 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 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
   });
-}
-
-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$j);
-
-  return /*#__PURE__*/jsx(StyledAvatarView, {
+  return /*#__PURE__*/jsx(IconContainer$1, {
+    $align: align,
     $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);
-}
-
-// type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
-// type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
-// export function withTheme<Props extends { theme: DefaultTheme }, C>(
-//   WrappedComponent: ComponentType<Props> & C,
-// ): ComponentType<SetOptional<Props, 'theme'>> & hoistNonReactStatics.NonReactStatics<typeof WrappedComponent> {
-//   return function ThemedComponent(props) {
-//     const theme = useTheme();
-//     return (<WrappedComponent theme={theme} {...(props as any)} />) as any;
-//   };
-// }
-function withTheme(WrappedComponent) {
-  // eslint-disable-next-line prefer-arrow-callback
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    var theme = /*#__PURE__*/useTheme();
-    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread({
-      ref: ref,
-      theme: theme
-    }, props));
-  });
-}
-
-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"];
-}
-
-function isSubtle(type) {
-  return type.startsWith('subtle');
-}
-
-var _excluded$i = ["$type", "$variant", "$isStretch", "disabled"];
-var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
-  name: "AnimatedButtonPressableContainer",
-  "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
-  vars: {
-    "a1vkj3mh-0": [function (_ref) {
-      var $isStretch = _ref.$isStretch;
-      return $isStretch ? 'inherit' : 'inline-flex';
-    }],
-    "a1vkj3mh-1": [function (_ref2) {
-      var $isStretch = _ref2.$isStretch;
-      return $isStretch ? 'stretch' : 'baseline';
-    }],
-    "a1vkj3mh-3": [function (_ref3) {
-      var theme = _ref3.theme;
-      return theme.kitt.button.scale.medium.hover;
-    }],
-    "a1vkj3mh-4": [function (_ref4) {
-      var theme = _ref4.theme,
-          $isDisabled = _ref4.$isDisabled;
-      return "scale(".concat($isDisabled ? 1 : theme.kitt.button.scale.base.active, ")");
-    }],
-    "a1vkj3mh-5": [function (_ref5) {
-      var theme = _ref5.theme,
-          $type = _ref5.$type,
-          $variant = _ref5.$variant,
-          $isDisabled = _ref5.$isDisabled;
-      if ($isDisabled) return theme.kitt.button.disabled["default"].hoverBackgroundColor;
-      return getVariantValuesIfExist(theme, $type, $variant).hoverBackgroundColor;
-    }],
-    "a1vkj3mh-6": [function (_ref6) {
-      var theme = _ref6.theme;
-      var _theme$kitt$button$tr = theme.kitt.button.transition,
-          duration = _theme$kitt$button$tr.duration,
-          timingFunction = _theme$kitt$button$tr.timingFunction;
-      return "color, background, border-color, ".concat(duration, " ").concat(timingFunction);
-    }],
-    "a1vkj3mh-7": [function (_ref7) {
-      var theme = _ref7.theme;
-      return theme.kitt.button.borderRadius;
-    }, "px"],
-    "a1vkj3mh-8": [function (_ref8) {
-      var theme = _ref8.theme;
-      return "opacity ".concat(theme.kitt.button.transition.duration, " ").concat(theme.kitt.button.transition.timingFunction);
-    }],
-    "a1vkj3mh-9": [function (_ref9) {
-      var $isDisabled = _ref9.$isDisabled;
-      return $isDisabled ? 1 : 0;
-    }],
-    "a1vkj3mh-10": [function (_ref10) {
-      var theme = _ref10.theme;
-      return "-".concat(theme.kitt.button.borderWidth.disabled, "px");
-    }],
-    "a1vkj3mh-12": [function (_ref11) {
-      var theme = _ref11.theme;
-      return "calc(100% - ".concat(theme.kitt.button.borderWidth.disabled * 0.5, "px)");
-    }],
-    "a1vkj3mh-14": [function (_ref12) {
-      var theme = _ref12.theme;
-      return "".concat(theme.kitt.button.borderWidth.disabled, "px solid ").concat(theme.kitt.button.disabled["default"].borderColor);
-    }],
-    "a1vkj3mh-15": [function (_ref13) {
-      var theme = _ref13.theme,
-          $type = _ref13.$type,
-          $variant = _ref13.$variant;
-      return "".concat(theme.kitt.button.borderWidth.focus, "px solid ").concat(getVariantValuesIfExist(theme, $type, $variant).focusBorderColor);
-    }],
-    "a1vkj3mh-16": [function (_ref14) {
-      var theme = _ref14.theme;
-      return "-".concat(theme.kitt.button.borderWidth.focus, "px");
-    }],
-    "a1vkj3mh-18": [function (_ref15) {
-      var theme = _ref15.theme,
-          $type = _ref15.$type,
-          $isDisabled = _ref15.$isDisabled;
-      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-
-      if (isSubtle($type)) {
-        return theme.kitt.button[$type]["default"].color;
-      }
-
-      return 'inherit';
-    }],
-    "a1vkj3mh-19": [function (_ref16) {
-      var theme = _ref16.theme,
-          $type = _ref16.$type,
-          $isDisabled = _ref16.$isDisabled;
-      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-
-      if (isSubtle($type)) {
-        return theme.kitt.button[$type]["default"].hoverColor;
-      }
-
-      return 'inherit';
-    }],
-    "a1vkj3mh-20": [function (_ref17) {
-      var theme = _ref17.theme,
-          $type = _ref17.$type,
-          $isDisabled = _ref17.$isDisabled;
-      if ($isDisabled) return theme.kitt.typography.colors['black-light'];
-
-      if (isSubtle($type)) {
-        return theme.kitt.button[$type]["default"].activeColor;
-      }
-
-      return 'inherit';
-    }]
-  }
-}));
-var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
-  var $type = _ref18.$type,
-      $variant = _ref18.$variant,
-      $isStretch = _ref18.$isStretch,
-      disabled = _ref18.disabled,
-      props = _objectWithoutProperties(_ref18, _excluded$i);
-
-  return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
-    ref: ref,
-    $type: $type,
-    $variant: $variant,
-    $isDisabled: !!disabled,
-    $isStretch: $isStretch,
-    children: /*#__PURE__*/jsx(Pressable$1, _objectSpread({
-      disabled: disabled
-    }, props))
-  });
-});
-
-var BaseStyledButtonPressable = /*#__PURE__*/styled(View$1).withConfig({
-  displayName: "BaseStyledButtonPressable",
-  componentId: "kitt-universal__sc-4k8lse-0"
-})(["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;
-  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;
-});
+    $color: color,
+    children: clonedIcon
+  });
+}
 
-var _excluded$h = ["color"],
+var _excluded$k = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -625,7 +541,7 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
-var _excluded$g = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$j = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -649,7 +565,7 @@ var getTextColorByType = function (type, variant) {
   }
 };
 
-var StyledButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
+var StyledButtonText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   displayName: "ButtonContent__StyledButtonText",
   componentId: "kitt-universal__sc-dnyw3n-0"
 })(["text-align:center;", " ", ""], function () {
@@ -667,7 +583,7 @@ var StyledButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
   if ($isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-var StyledIconContainer$1 = /*#__PURE__*/styled(View$1).withConfig({
+var StyledIconContainer$1 = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["", ""], function (_ref2) {
@@ -697,7 +613,7 @@ function ButtonIcon(_ref3) {
   });
 }
 
-var StyledChildrenWithIcon = /*#__PURE__*/styled(View$1).withConfig({
+var StyledChildrenWithIcon = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ButtonContent__StyledChildrenWithIcon",
   componentId: "kitt-universal__sc-dnyw3n-2"
 })(["align-items:center;justify-content:center;flex-direction:row;"]);
@@ -732,7 +648,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",
@@ -747,7 +663,7 @@ function ButtonContentChildren(_ref4) {
     })) : null]
   });
 }
-var ButtonContentContainer = /*#__PURE__*/styled(View$1).withConfig({
+var ButtonContentContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ButtonContent__ButtonContentContainer",
   componentId: "kitt-universal__sc-dnyw3n-3"
 })(["line-height:16px;", " ", ";"], function (_ref5) {
@@ -767,7 +683,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$g);
+      props = _objectWithoutProperties(_ref7, _excluded$j);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -861,7 +777,261 @@ var Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   });
 });
 
-var Container$3 = /*#__PURE__*/styled(View$1).withConfig({
+var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled("div")({
+  name: "StyledSpinningIconContainer",
+  "class": "kitt-u_StyledSpinningIconContainer_ssn8o83"
+}));
+function SpinningIcon(_ref) {
+  var icon = _ref.icon,
+      color = _ref.color;
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
+    children: clonedIcon
+  });
+}
+
+function LoaderIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsx(SpinningIcon, {
+    color: color,
+    icon: /*#__PURE__*/jsx(ArcIcon, {})
+  });
+}
+
+var View = View$2;
+var ScrollView = ScrollView$1;
+var Pressable = Pressable$2;
+
+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$i = ["as", "onPress", "disabled", "icon"];
+function ActionsItem(_ref) {
+  var as = _ref.as,
+      onPress = _ref.onPress,
+      disabled = _ref.disabled,
+      icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, _excluded$i);
+
+  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$h = ["children"];
+function Actions(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$h);
+
+  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$g = ["size", "round", "light", "sizeVariant"];
+
+var getInitials = function (firstname, lastname) {
+  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
+};
+
+var StyledAvatarView = /*#__PURE__*/styled$1(View$1).withConfig({
+  displayName: "Avatar__StyledAvatarView",
+  componentId: "kitt-universal__sc-9miubv-0"
+})(["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$g);
+
+  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$3 = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
@@ -891,6 +1061,14 @@ function Card(_ref6) {
   });
 }
 
+var useNativeAnimation = function () {
+  return {
+    onPressIn: function onPressIn() {},
+    onPressOut: function onPressOut() {},
+    backgroundStyles: undefined
+  };
+};
+
 function getCurrentTextColor(_ref) {
   var isDisabled = _ref.isDisabled,
       isSelected = _ref.isSelected,
@@ -909,7 +1087,7 @@ function getBorderRadius(defaultRadius, variant) {
   return defaultRadius;
 }
 
-var DisabledBorder = /*#__PURE__*/styled(View$1).withConfig({
+var DisabledBorder = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ChoiceItem__DisabledBorder",
   componentId: "kitt-universal__sc-wuv3y6-0"
 })(["border-radius:", "px;", ";"], function (_ref2) {
@@ -923,7 +1101,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$1(View$1).withConfig({
   displayName: "ChoiceItem__ChoiceItemView",
   componentId: "kitt-universal__sc-wuv3y6-1"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], function (_ref4) {
@@ -979,73 +1157,10 @@ 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;
-  }());
-  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(),
+      onPressIn = _useNativeAnimation.onPressIn,
+      onPressOut = _useNativeAnimation.onPressOut;
 
   var handleChange = function () {
     if (!onChange) return; // Checkbox can be toggled
@@ -1058,7 +1173,7 @@ function ChoiceItem(_ref8) {
     onChange(value);
   };
 
-  return /*#__PURE__*/jsx(Pressable$2, {
+  return /*#__PURE__*/jsx(Pressable, {
     disabled: disabled,
     accessibilityRole: type,
     accessibilityState: {
@@ -1072,12 +1187,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;
@@ -1105,7 +1216,7 @@ function ChoiceItem(_ref8) {
   });
 }
 
-var ChoiceItemContainer = /*#__PURE__*/styled(View$1).withConfig({
+var ChoiceItemContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ChoiceItemContainer",
   componentId: "kitt-universal__sc-17uuimx-0"
 })(["", ""], function (_ref) {
@@ -1130,7 +1241,7 @@ function ChoicesContainer(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$f);
 
   if (direction === 'row') {
-    return /*#__PURE__*/jsx(ScrollView$1, _objectSpread({
+    return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
     }, props));
   }
@@ -1769,8 +1880,14 @@ var input = {
 };
 
 var inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 var inputTag = {
@@ -2027,28 +2144,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) {
@@ -2100,11 +2195,11 @@ function useKittTheme() {
   }, [dimensions]);
 }
 
-var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled(Pressable$1).withConfig({
+var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled$1(Pressable$1).withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
 })(["display:flex;flex-direction:row;"]);
-var CheckboxContainer = /*#__PURE__*/styled(View$1).withConfig({
+var CheckboxContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], function (_ref) {
@@ -2209,11 +2304,11 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
 
-var StyledTypographyText = /*#__PURE__*/styled(Typography.Text).withConfig({
+var StyledTypographyText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   displayName: "DatePickerInputPart__StyledTypographyText",
   componentId: "kitt-universal__sc-11fmlmi-0"
 })(["text-align:center;"]);
-var ViewInput = /*#__PURE__*/styled(View$1).withConfig({
+var ViewInput = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "DatePickerInputPart__ViewInput",
   componentId: "kitt-universal__sc-11fmlmi-1"
 })(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, function (_ref) {
@@ -2252,7 +2347,7 @@ function prefixWithZero(value) {
   return "".concat(value).padStart(2, '0');
 }
 
-var PartContainer = /*#__PURE__*/styled(View$1).withConfig({
+var PartContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "DatePickerInputs__PartContainer",
   componentId: "kitt-universal__sc-j9hin5-0"
 })(["margin-right:", ";", ";"], function (_ref) {
@@ -2263,7 +2358,7 @@ var PartContainer = /*#__PURE__*/styled(View$1).withConfig({
   var $isStretch = _ref2.$isStretch;
   return $isStretch ? css(["flex:0.33;flex-grow:1;"]) : undefined;
 });
-var DatePickerPressable = /*#__PURE__*/styled(Pressable$1).withConfig({
+var DatePickerPressable = /*#__PURE__*/styled$1(Pressable$1).withConfig({
   displayName: "DatePickerInputs__DatePickerPressable",
   componentId: "kitt-universal__sc-j9hin5-1"
 })(["display:flex;flex-direction:row;", ";"], function (_ref3) {
@@ -2341,7 +2436,7 @@ function DatePicker(_ref) {
   }, props));
 }
 
-var InputTextContainer = withTheme( /*#__PURE__*/styled$1("div")({
+var InputTextContainer = withTheme( /*#__PURE__*/styled("div")({
   name: "InputTextContainer",
   "class": "kitt-u_InputTextContainer_i1encr9g",
   vars: {
@@ -2373,7 +2468,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled$1("div")({
 }));
 
 var _excluded$b = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
-var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
+var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
@@ -2392,7 +2487,7 @@ var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
       $minHeight = _ref3$$minHeight === void 0 ? theme.kitt.forms.input.minHeight : _ref3$$minHeight;
   return $minHeight;
 });
-var RightInputContainer = /*#__PURE__*/styled(View$1).withConfig({
+var RightInputContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "InputText__RightInputContainer",
   componentId: "kitt-universal__sc-uke279-1"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
@@ -2495,44 +2590,25 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled(View$1).withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled(View$1).withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__PURE__*/styled(View$1).withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
-});
-var LabelContainer = /*#__PURE__*/styled(View$1).withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["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]
   });
@@ -2615,7 +2691,7 @@ var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
 };
 
-var InputTagContainer = /*#__PURE__*/styled(View$1).withConfig({
+var InputTagContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "InputTag__InputTagContainer",
   componentId: "kitt-universal__sc-1511dsf-0"
 })(["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) {
@@ -2638,7 +2714,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$1(View$1).withConfig({
   displayName: "InputTag__IconContainer",
   componentId: "kitt-universal__sc-1511dsf-1"
 })(["margin-right:", "px;"], function (_ref4) {
@@ -2679,7 +2755,7 @@ function Label(_ref) {
   });
 }
 
-var OuterRadio = /*#__PURE__*/styled(View$1).withConfig({
+var OuterRadio = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
@@ -2703,7 +2779,7 @@ var OuterRadio = /*#__PURE__*/styled(View$1).withConfig({
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = /*#__PURE__*/styled(View$1).withConfig({
+var SelectedOuterRadio = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Radio__SelectedOuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-1"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
@@ -2719,7 +2795,7 @@ var SelectedOuterRadio = /*#__PURE__*/styled(View$1).withConfig({
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = /*#__PURE__*/styled(View$1).withConfig({
+var SelectedInnerRadio = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Radio__SelectedInnerRadio",
   componentId: "kitt-universal__sc-1mdgr2o-2"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
@@ -2735,11 +2811,11 @@ var SelectedInnerRadio = /*#__PURE__*/styled(View$1).withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$2 = /*#__PURE__*/styled(Pressable$1).withConfig({
+var Container$2 = /*#__PURE__*/styled$1(Pressable$1).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
-var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
+var Text = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   displayName: "Radio__Text",
   componentId: "kitt-universal__sc-1mdgr2o-4"
 })(["margin-left:", "px;"], function (_ref15) {
@@ -2786,7 +2862,7 @@ function TextArea(_ref) {
   }, props));
 }
 
-var Body$1 = /*#__PURE__*/styled(View$1).withConfig({
+var Body$1 = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], function (_ref) {
@@ -2805,7 +2881,7 @@ function FullScreenModalBody(_ref3) {
   });
 }
 
-var SideContainer = /*#__PURE__*/styled(View$1).withConfig({
+var SideContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__SideContainer",
   componentId: "kitt-universal__sc-dfmxi1-0"
 })(["", ""], function (_ref) {
@@ -2825,7 +2901,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header$1 = /*#__PURE__*/styled(View$1).withConfig({
+var Header$1 = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
@@ -2843,7 +2919,7 @@ var Header$1 = /*#__PURE__*/styled(View$1).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = /*#__PURE__*/styled(View$1).withConfig({
+var HeaderContent = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__HeaderContent",
   componentId: "kitt-universal__sc-dfmxi1-2"
 })(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
@@ -2933,7 +3009,7 @@ function FullScreenModalHeader(_ref6) {
   });
 }
 
-var Container$1 = /*#__PURE__*/styled(View$1).withConfig({
+var Container$1 = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], function (_ref) {
@@ -2949,21 +3025,6 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled$1("div")({
-  name: "StyledSpinningIconContainer",
-  "class": "kitt-u_StyledSpinningIconContainer_ssn8o83"
-}));
-function SpinningIcon(_ref) {
-  var icon = _ref.icon,
-      color = _ref.color;
-  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
-    color: color
-  });
-  return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
-    children: clonedIcon
-  });
-}
-
 var _excluded$9 = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
@@ -2977,7 +3038,7 @@ function StyleWebWrapper(_ref) {
 }
 
 var _excluded$8 = ["color", "disabled"];
-var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
+var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
   vars: {
@@ -3009,7 +3070,7 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
     }]
   }
 }));
-var StyledPressableIconButton = /*#__PURE__*/styled(Pressable$1).withConfig({
+var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable$1).withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton",
   componentId: "kitt-universal__sc-1m6jo3s-0"
 })(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref5) {
@@ -3062,7 +3123,7 @@ function PressableAnimatedContainer(_ref) {
   });
 }
 
-var IconButtonContentBorder = /*#__PURE__*/styled(View$1).withConfig({
+var IconButtonContentBorder = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "IconButton__IconButtonContentBorder",
   componentId: "kitt-universal__sc-swelbf-0"
 })(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
@@ -3120,7 +3181,7 @@ function IconButton(_ref7) {
 }
 
 var _excluded$7 = ["children"];
-var ContentView$1 = /*#__PURE__*/styled(View$1).withConfig({
+var ContentView$1 = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -3135,7 +3196,7 @@ function ListItemContent(_ref) {
 
 var _excluded$6 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
-var SideContainerView = /*#__PURE__*/styled(View$1).withConfig({
+var SideContainerView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -3160,7 +3221,7 @@ function ListItemSideContainer(_ref3) {
     children: children
   }));
 }
-var SideContentView = /*#__PURE__*/styled(View$1).withConfig({
+var SideContentView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ListItemSideContent__SideContentView",
   componentId: "kitt-universal__sc-1vajiw-1"
 })(["align-self:", ";"], function (_ref4) {
@@ -3181,7 +3242,7 @@ function ListItemSideContent(_ref5) {
 }
 
 var _excluded$5 = ["children", "withPadding", "borders", "left", "right", "onPress"];
-var ContainerView = /*#__PURE__*/styled(View$1).withConfig({
+var ContainerView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -3249,14 +3310,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;
@@ -3309,7 +3362,7 @@ var getIconButtonColor = function (messageType) {
   }
 };
 
-var StyledMessageContainer = /*#__PURE__*/styled(View$1).withConfig({
+var StyledMessageContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "BaseMessage__StyledMessageContainer",
   componentId: "kitt-universal__sc-eepeiz-0"
 })(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], function (_ref) {
@@ -3326,7 +3379,7 @@ var StyledMessageContainer = /*#__PURE__*/styled(View$1).withConfig({
       $type = _ref3.$type;
   return theme.kitt.feedbackMessage[$type].backgroundColor;
 });
-var StyledDismissWrapper = /*#__PURE__*/styled(View$1).withConfig({
+var StyledDismissWrapper = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "BaseMessage__StyledDismissWrapper",
   componentId: "kitt-universal__sc-eepeiz-1"
 })(["align-items:center;align-items:flex-start;margin:", ";"], function (_ref4) {
@@ -3334,7 +3387,7 @@ var StyledDismissWrapper = /*#__PURE__*/styled(View$1).withConfig({
   var spacing = theme.kitt.spacing;
   return "".concat(spacing * 2.5, "px  ").concat(spacing * 2, "px 0 ").concat(spacing * 5, "px");
 });
-var StyledIconContainer = /*#__PURE__*/styled(View$1).withConfig({
+var StyledIconContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "BaseMessage__StyledIconContainer",
   componentId: "kitt-universal__sc-eepeiz-2"
 })(["margin:", ";"], function (_ref5) {
@@ -3342,14 +3395,14 @@ var StyledIconContainer = /*#__PURE__*/styled(View$1).withConfig({
   var spacing = theme.kitt.spacing;
   return "".concat(spacing, "px ").concat(spacing * 5, "px 0 0");
 });
-var StyledTextContent = /*#__PURE__*/styled(Typography.Text).withConfig({
+var StyledTextContent = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   displayName: "BaseMessage__StyledTextContent",
   componentId: "kitt-universal__sc-eepeiz-3"
 })(["flex:1;text-align:", ";"], function (_ref6) {
   var $isCenteredText = _ref6.$isCenteredText;
   return $isCenteredText ? 'center' : 'left';
 });
-var StyledMessageContent = /*#__PURE__*/styled(View$1).withConfig({
+var StyledMessageContent = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "BaseMessage__StyledMessageContent",
   componentId: "kitt-universal__sc-eepeiz-4"
 })(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], function (_ref7) {
@@ -3414,7 +3467,7 @@ function Message(_ref) {
 }
 
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled(Pressable$1).withConfig({
+var OverlayPressable = /*#__PURE__*/styled$1(Pressable$1).withConfig({
   displayName: "Overlay__OverlayPressable",
   componentId: "kitt-universal__sc-1cz1gbr-0"
 })(function (_ref) {
@@ -3431,7 +3484,7 @@ function Overlay(_ref2) {
   });
 }
 
-var BodyView = /*#__PURE__*/styled(View$1).withConfig({
+var BodyView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Body__BodyView",
   componentId: "kitt-universal__sc-17fwpo4-0"
 })(["padding:", "px ", "px;"], function (_ref) {
@@ -3443,14 +3496,14 @@ var BodyView = /*#__PURE__*/styled(View$1).withConfig({
 });
 function ModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/jsx(ScrollView$1, {
+  return /*#__PURE__*/jsx(ScrollView$2, {
     children: /*#__PURE__*/jsx(BodyView, {
       children: children
     })
   });
 }
 
-var FooterView = /*#__PURE__*/styled(View$1).withConfig({
+var FooterView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Footer__FooterView",
   componentId: "kitt-universal__sc-1ujq2dc-0"
 })(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
@@ -3469,7 +3522,7 @@ function ModalFooter(_ref3) {
 
 var OnCloseContext$1 = /*#__PURE__*/createContext(function () {});
 
-var HeaderView = /*#__PURE__*/styled(View$1).withConfig({
+var HeaderView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__HeaderView",
   componentId: "kitt-universal__sc-1iwabch-0"
 })(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
@@ -3479,21 +3532,21 @@ var HeaderView = /*#__PURE__*/styled(View$1).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = /*#__PURE__*/styled(View$1).withConfig({
+var LeftIconView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__LeftIconView",
   componentId: "kitt-universal__sc-1iwabch-1"
 })(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = /*#__PURE__*/styled(View$1).withConfig({
+var RightIconView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__RightIconView",
   componentId: "kitt-universal__sc-1iwabch-2"
 })(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = /*#__PURE__*/styled(View$1).withConfig({
+var TitleView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__TitleView",
   componentId: "kitt-universal__sc-1iwabch-3"
 })(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
@@ -3522,7 +3575,7 @@ function ModalHeader(_ref6) {
   });
 }
 
-var ModalView = /*#__PURE__*/styled(View$1).withConfig({
+var ModalView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Modal__ModalView",
   componentId: "kitt-universal__sc-1xy2w5u-0"
 })(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
@@ -3532,7 +3585,7 @@ var ModalView = /*#__PURE__*/styled(View$1).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = /*#__PURE__*/styled(View$1).withConfig({
+var ContentView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Modal__ContentView",
   componentId: "kitt-universal__sc-1xy2w5u-1"
 })(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
@@ -3618,7 +3671,7 @@ function CloseButton(_ref) {
   });
 }
 
-var ModalBehaviourContainer = /*#__PURE__*/styled(View$1).withConfig({
+var ModalBehaviourContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ModalBehaviour__ModalBehaviourContainer",
   componentId: "kitt-universal__sc-tj3606-0"
 })(["", ""], function () {
@@ -3785,16 +3838,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$2;
-
 var _excluded$4 = ["children"];
-var ViewWithPadding = /*#__PURE__*/styled(View$1).withConfig({
+var ViewWithPadding = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "ContentPadding__ViewWithPadding",
   componentId: "kitt-universal__sc-1rprqcv-0"
 })(["padding:", ";"], function (_ref) {
@@ -3811,7 +3856,7 @@ function ContentPadding(_ref2) {
 }
 
 var _excluded$3 = ["children", "shouldHandleBottomNotch", "style"];
-var StyledViewWithPadding = /*#__PURE__*/styled(ContentPadding).withConfig({
+var StyledViewWithPadding = /*#__PURE__*/styled$1(ContentPadding).withConfig({
   displayName: "Body__StyledViewWithPadding",
   componentId: "kitt-universal__sc-oc39vn-0"
 })(["padding-top:", "px;padding-bottom:", "px;"], function (_ref) {
@@ -3839,7 +3884,7 @@ function Body(_ref3) {
   }));
 }
 
-var FooterContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
+var FooterContainer = /*#__PURE__*/styled$1(ContentPadding).withConfig({
   displayName: "Footer__FooterContainer",
   componentId: "kitt-universal__sc-1yjprfg-0"
 })(["padding-top:", "px;padding-bottom:", "px;", ";"], function (_ref) {
@@ -3877,7 +3922,7 @@ function Footer(_ref5) {
   });
 }
 
-var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
+var HeaderContainer = /*#__PURE__*/styled$1(ContentPadding).withConfig({
   displayName: "Header__HeaderContainer",
   componentId: "kitt-universal__sc-1g7sbq-0"
 })(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;", ";"], function (_ref) {
@@ -3904,7 +3949,7 @@ var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
     return theme.kitt.colors.separator;
   });
 });
-var Row = /*#__PURE__*/styled(View$1).withConfig({
+var Row = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__Row",
   componentId: "kitt-universal__sc-1g7sbq-1"
 })(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref7) {
@@ -3912,14 +3957,14 @@ var Row = /*#__PURE__*/styled(View$1).withConfig({
       $hasLeft = _ref7.$hasLeft;
   return !$hasContent && !$hasLeft ? 'flex-end' : 'space-between';
 });
-var ButtonContainer = /*#__PURE__*/styled(View$1).withConfig({
+var ButtonContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__ButtonContainer",
   componentId: "kitt-universal__sc-1g7sbq-2"
 })(["width:", "px;"], function (_ref8) {
   var theme = _ref8.theme;
   return theme.kitt.iconButton.width;
 });
-var ChildrenComponent = /*#__PURE__*/styled(View$1).withConfig({
+var ChildrenComponent = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Header__ChildrenComponent",
   componentId: "kitt-universal__sc-1g7sbq-3"
 })(["flex:1;align-items:center;", ";"], function (_ref9) {
@@ -3929,7 +3974,7 @@ var ChildrenComponent = /*#__PURE__*/styled(View$1).withConfig({
   var paddingHorizontal = theme.kitt.spacing * 2;
   return css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
 });
-var HeaderTitle = /*#__PURE__*/styled(Typography.Text).withConfig({
+var HeaderTitle = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   displayName: "Header__HeaderTitle",
   componentId: "kitt-universal__sc-1g7sbq-4"
 })(["flex:1;text-align:", ";", ";"], function (_ref10) {
@@ -3980,7 +4025,7 @@ function Header(_ref12) {
   });
 }
 
-var NavigationModalContainer = /*#__PURE__*/styled(View$1).withConfig({
+var NavigationModalContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "NavigationModalContainer",
   componentId: "kitt-universal__sc-n0bwvk-0"
 })(["position:relative;background-color:", ";flex:1;", ""], function (_ref) {
@@ -3991,7 +4036,7 @@ var NavigationModalContainer = /*#__PURE__*/styled(View$1).withConfig({
   return css(["min-height:100vh;"]);
 });
 
-var ContainerWithoutHeader = /*#__PURE__*/styled(View$1).withConfig({
+var ContainerWithoutHeader = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "NavigationModal__ContainerWithoutHeader",
   componentId: "kitt-universal__sc-ls8t24-0"
 })(["justify-content:space-between;flex:1;"]);
@@ -4005,7 +4050,7 @@ function NavigationModal(_ref) {
     children: [header ? /*#__PURE__*/jsx(View$1, {
       children: header
     }) : null, /*#__PURE__*/jsxs(ContainerWithoutHeader, {
-      children: [/*#__PURE__*/jsx(ScrollView$1, {
+      children: [/*#__PURE__*/jsx(ScrollView$2, {
         bounces: false,
         contentContainerStyle: {
           flexGrow: 1,
@@ -4045,7 +4090,7 @@ function Notification(_ref) {
   });
 }
 
-var PageLoaderContainer = withTheme( /*#__PURE__*/styled$1("div")({
+var PageLoaderContainer = withTheme( /*#__PURE__*/styled("div")({
   name: "PageLoaderContainer",
   "class": "kitt-u_PageLoaderContainer_ptkwz2j",
   vars: {
@@ -4143,7 +4188,7 @@ function Picker() {
   });
 }
 
-var StyledSkeleton = withTheme( /*#__PURE__*/styled$1("div")({
+var StyledSkeleton = withTheme( /*#__PURE__*/styled("div")({
   name: "StyledSkeleton",
   "class": "kitt-u_StyledSkeleton_sc3upcl",
   vars: {
@@ -4169,7 +4214,7 @@ function SkeletonContent(_ref4) {
   });
 }
 
-var SkeletonContainer = /*#__PURE__*/styled(View$1).withConfig({
+var SkeletonContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Skeleton__SkeletonContainer",
   componentId: "kitt-universal__sc-1w5cm3i-0"
 })(["overflow:hidden;"]);
@@ -4194,7 +4239,7 @@ function Skeleton(_ref) {
     })
   });
 }
-var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
+var Bar = /*#__PURE__*/styled$1(Skeleton).withConfig({
   displayName: "Skeleton__Bar",
   componentId: "kitt-universal__sc-1w5cm3i-1"
 })(["width:100%;height:", "px;border-radius:", "px;"], function (_ref3) {
@@ -4204,7 +4249,7 @@ var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
+var Circle = /*#__PURE__*/styled$1(Skeleton).withConfig({
   displayName: "Skeleton__Circle",
   componentId: "kitt-universal__sc-1w5cm3i-2"
 })(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref5) {
@@ -4217,7 +4262,7 @@ var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
   var theme = _ref7.theme;
   return theme.kitt.spacing * 6;
 });
-var Square = /*#__PURE__*/styled(Skeleton).withConfig({
+var Square = /*#__PURE__*/styled$1(Skeleton).withConfig({
   displayName: "Skeleton__Square",
   componentId: "kitt-universal__sc-1w5cm3i-3"
 })(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref8) {
@@ -4234,7 +4279,7 @@ Skeleton.Bar = Bar;
 Skeleton.Circle = Circle;
 Skeleton.Square = Square;
 
-var Flex = /*#__PURE__*/styled(View$1).withConfig({
+var Flex = /*#__PURE__*/styled$1(View$1).withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
   }
@@ -4291,7 +4336,7 @@ var useStoryBlockColor = function (color) {
   var storyBlockColor = useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-var StyledStoryBlockView = /*#__PURE__*/styled(View$1).withConfig({
+var StyledStoryBlockView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StoryBlock__StyledStoryBlockView",
   componentId: "kitt-universal__sc-3w4hdm-0"
 })(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
@@ -4314,11 +4359,11 @@ function StoryBlock(_ref2) {
   });
 }
 
-var StoryTitleContainer = /*#__PURE__*/styled(View$1).withConfig({
+var StoryTitleContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StoryTitle__StoryTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-0"
 })(["margin-bottom:30px;"]);
-var StorySubTitleContainer = /*#__PURE__*/styled(View$1).withConfig({
+var StorySubTitleContainer = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StoryTitle__StorySubTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-1"
 })(["margin-bottom:10px;"]);
@@ -4393,7 +4438,7 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var StoryContainer$1 = /*#__PURE__*/styled(ScrollView$1).withConfig({
+var StoryContainer$1 = /*#__PURE__*/styled$1(ScrollView$2).withConfig({
   displayName: "Story__StoryContainer",
   componentId: "kitt-universal__sc-1kwdg2p-0"
 })(["padding:", "px;"], storyPadding);
@@ -4412,7 +4457,7 @@ function Story(_ref) {
 var _excluded$2 = ["title", "children", "internalIsDemoSection"],
     _excluded2 = ["title", "children"],
     _excluded3 = ["title", "children"];
-var StyledSection = /*#__PURE__*/styled(View$1).withConfig({
+var StyledSection = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StorySection__StyledSection",
   componentId: "kitt-universal__sc-1b3liv5-0"
 })(["margin-bottom:32px;"]);
@@ -4429,7 +4474,7 @@ function StorySection(_ref) {
     }), children]
   }));
 }
-var StyledSubSection = /*#__PURE__*/styled(View$1).withConfig({
+var StyledSubSection = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StorySection__StyledSubSection",
   componentId: "kitt-universal__sc-1b3liv5-1"
 })(["margin-bottom:16px;"]);
@@ -4446,7 +4491,7 @@ function SubSection(_ref2) {
   }));
 }
 
-var StyledBlockSection = /*#__PURE__*/styled(View$1).withConfig({
+var StyledBlockSection = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StorySection__StyledBlockSection",
   componentId: "kitt-universal__sc-1b3liv5-2"
 })(["margin-bottom:16px;"]);
@@ -4463,7 +4508,7 @@ function BlockSection(_ref3) {
   }));
 }
 
-var StyledDemoSection = /*#__PURE__*/styled(View$1).withConfig({
+var StyledDemoSection = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StorySection__StyledDemoSection",
   componentId: "kitt-universal__sc-1b3liv5-3"
 })(["margin-bottom:64px;"]);
@@ -4512,19 +4557,19 @@ function StoryDecorator(storyFn, context) {
   });
 }
 
-var SmallScreenRow = /*#__PURE__*/styled(View$1).withConfig({
+var SmallScreenRow = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StoryGrid__SmallScreenRow",
   componentId: "kitt-universal__sc-4z5new-0"
 })(["flex-direction:column;margin:0;"]);
-var SmallScreenCol = /*#__PURE__*/styled(View$1).withConfig({
+var SmallScreenCol = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StoryGrid__SmallScreenCol",
   componentId: "kitt-universal__sc-4z5new-1"
 })(["padding:8px 0 16px;"]);
-var FlexRow = /*#__PURE__*/styled(View$1).withConfig({
+var FlexRow = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StoryGrid__FlexRow",
   componentId: "kitt-universal__sc-4z5new-2"
 })(["flex-direction:row;margin:0 -4px 16px;"]);
-var FlexCol = /*#__PURE__*/styled(View$1).withConfig({
+var FlexCol = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "StoryGrid__FlexCol",
   componentId: "kitt-universal__sc-4z5new-3"
 })(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
@@ -4585,7 +4630,7 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var Container = /*#__PURE__*/styled(View$1).withConfig({
+var Container = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
 })(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
@@ -4657,11 +4702,11 @@ function TimePicker() {
   });
 }
 
-var StyledTooltipView = /*#__PURE__*/styled(View$1).withConfig({
+var StyledTooltipView = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "TooltipView__StyledTooltipView",
   componentId: "kitt-universal__sc-156zm6m-0"
 })(["align-items:center;"]);
-var StyledTooltipContent = /*#__PURE__*/styled(View$1).withConfig({
+var StyledTooltipContent = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "TooltipView__StyledTooltipContent",
   componentId: "kitt-universal__sc-156zm6m-1"
 })(["background-color:", ";border-radius:", "px;opacity:", ";padding:", ";"], function (_ref) {
@@ -4687,7 +4732,7 @@ function ArrowView(props) {
   }));
 }
 
-var StyledArrow = /*#__PURE__*/styled(ArrowView).withConfig({
+var StyledArrow = /*#__PURE__*/styled$1(ArrowView).withConfig({
   displayName: "TooltipView__StyledArrow",
   componentId: "kitt-universal__sc-156zm6m-2"
 })(["color:", ";transform:", ";"], function (_ref5) {
@@ -4720,11 +4765,11 @@ var tooltipDefaultFloatingStrategy = {
   web: 'absolute'
 };
 
-var StyledTooltipTrigger = /*#__PURE__*/styled(Pressable$1).withConfig({
+var StyledTooltipTrigger = /*#__PURE__*/styled$1(Pressable$1).withConfig({
   displayName: "Tooltipweb__StyledTooltipTrigger",
   componentId: "kitt-universal__sc-zn1y6f-0"
 })(["display:inline-flex;align-self:baseline;"]);
-var WebAnimatedTooltip = /*#__PURE__*/styled(View$1).withConfig({
+var WebAnimatedTooltip = /*#__PURE__*/styled$1(View$1).withConfig({
   displayName: "Tooltipweb__WebAnimatedTooltip",
   componentId: "kitt-universal__sc-zn1y6f-1"
 })(["opacity:", ";transition:opacity 200ms;visibility:", ";"], function (_ref) {
@@ -4853,7 +4898,7 @@ function Tooltip(_ref3) {
 }
 Tooltip.View = TooltipView;
 
-var EmojiWebWrapper = withTheme( /*#__PURE__*/styled$1("span")({
+var EmojiWebWrapper = withTheme( /*#__PURE__*/styled("span")({
   name: "EmojiWebWrapper",
   "class": "kitt-u_EmojiWebWrapper_ej7a4r3"
 }));
@@ -4952,7 +4997,7 @@ function TypographyEmoji(_ref3) {
 }
 
 var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
-var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled$1("span")({
+var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled("span")({
   name: "TypographyLinkWebWrapper",
   "class": "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
   vars: {
@@ -4962,7 +5007,7 @@ var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled$1("span")({
     }]
   }
 }));
-var StyledLink = /*#__PURE__*/styled(Text$2).withConfig({
+var StyledLink = /*#__PURE__*/styled$1(Text$2).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
 })(["text-decoration:", ";", ";", ";"], function (_ref2) {
@@ -5056,5 +5101,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.web.js.map