@ornikar/kitt-universal 9.3.2 → 9.6.0

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

@@ -1,59 +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, Linking, useWindowDimensions, TextInput, StyleSheet, ScrollView as ScrollView$1, 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, useMemo, useState, Fragment, useEffect, Children } 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, 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, Pressable as Pressable$2 } from 'native-base';
-import { styled as styled$1 } from '@linaria/react';
-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 = {
   /**
@@ -112,14 +302,20 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$j = ["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() {
   return useContext(TypographyColorContext);
 }
+var TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
+
+function useTypographyDefaultColor() {
+  return useContext(TypographyDefaultColorContext);
+}
 /** @deprecated use native-base instead for SSR compatibility */
 
+
 var getTypographyTypeConfigKey = function (theme) {
   var isMediumOrAbove = theme.responsive.matchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
@@ -154,6 +350,11 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
+
+function getNBThemeColorFromColorProps(colorName) {
+  return colorName ? "kitt.typography.".concat(colorName) : undefined;
+}
+
 function Typography(_ref) {
   var _type$base;
 
@@ -173,9 +374,10 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$j);
+      otherProps = _objectWithoutProperties(_ref, _excluded$l);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
+  var defaultColor = useTypographyDefaultColor();
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
   var baseOrDefaultToBody = hasTypographyAncestor ? type.base : (_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body';
   var isHeader = isTypographyHeader(baseOrDefaultToBody, isHeaderTypographyInContext);
@@ -196,14 +398,16 @@ function Typography(_ref) {
     });
   }
 
+  var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
+
   var text = /*#__PURE__*/jsx(Text$1, _objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
     fontWeight: isHeader ? "headers.".concat(nonNullableVariant) : "bodies.".concat(nonNullableVariant),
     fontFamily: isHeader ? "headers.".concat(nonNullableVariant) : "bodies.".concat(nonNullableVariant),
-    color: color ? "kitt.typography.".concat(color) : undefined,
-    textDecorationColor: color ? "kitt.typography.".concat(color) : undefined
+    color: getNBThemeColorFromColorProps(currentColor),
+    textDecorationColor: getNBThemeColorFromColorProps(currentColor)
   }, otherProps));
 
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
@@ -244,6 +448,7 @@ var createHeading = function (level, defaultBase) {
   return TypographyHeading;
 };
 
+Typography.SetDefaultColor = TypographyDefaultColorContext.Provider;
 Typography.Text = TypographyText;
 Typography.Paragraph = TypographyParagraph;
 Typography.Header1 = createHeading(1);
@@ -261,327 +466,54 @@ Typography.h2 = createHeading(2, 'header2');
 /** @deprecated use Typography.Header3 */
 
 Typography.h3 = createHeading(3, 'header3');
-/** @deprecated use Typography.Header4 */
-
-Typography.h4 = createHeading(4, 'header4');
-/** @deprecated use Typography.Header6 */
-
-Typography.h5 = createHeading(5, 'header5');
-
-var _excluded$i = ["size", "round", "light", "sizeVariant"];
-
-var getInitials = function (firstname, lastname) {
-  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
-};
-
-var StyledAvatarView = /*#__PURE__*/styled(View$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$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))
-  });
-}
-
-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$h = ["$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;
-      }
+/** @deprecated use Typography.Header4 */
 
-      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$h);
+Typography.h4 = createHeading(4, 'header4');
+/** @deprecated use Typography.Header6 */
 
-  return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
-    ref: ref,
-    $type: $type,
-    $variant: $variant,
-    $isDisabled: !!disabled,
-    $isStretch: $isStretch,
-    children: /*#__PURE__*/jsx(Pressable$1, _objectSpread({
-      disabled: disabled
-    }, props))
-  });
-});
+Typography.h5 = createHeading(5, 'header5');
 
-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;
+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,
-      $isStretch = _ref2.$isStretch;
-  return $isStretch ? '100%' : "".concat(theme.kitt.button.maxWidth, "px");
+  var $size = _ref2.$size;
+  return $size;
 }, function (_ref3) {
-  var $isStretch = _ref3.$isStretch;
-  return $isStretch ? '100%' : 'auto';
+  var $size = _ref3.$size;
+  return $size;
 }, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.button.minHeight;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.button.borderRadius;
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      $isDisabled = _ref6.$isDisabled,
-      $type = _ref6.$type,
-      $variant = _ref6.$variant;
-  if ($isDisabled) return theme.kitt.button.disabled["default"].backgroundColor;
-  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      $size = _ref7.$size,
-      $isDisabled = _ref7.$isDisabled;
-  var _theme$kitt$button$co = theme.kitt.button.contentPadding,
-      large = _theme$kitt$button$co.large,
-      defaultPadding = _theme$kitt$button$co["default"],
-      disabledPadding = _theme$kitt$button$co.disabled,
-      xLarge = _theme$kitt$button$co.xLarge;
-  if ($size === 'large') return large;
-  if ($size === 'xlarge') return xLarge;
-  if ($isDisabled) return disabledPadding;
-  return defaultPadding;
+  var _ref4$$align = _ref4.$align,
+      $align = _ref4$$align === void 0 ? 'auto' : _ref4$$align;
+  return $align;
 });
+function Icon(_ref5) {
+  var icon = _ref5.icon,
+      _ref5$size = _ref5.size,
+      size = _ref5$size === void 0 ? defaultIconSize : _ref5$size,
+      align = _ref5.align,
+      color = _ref5.color;
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  return /*#__PURE__*/jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
+  });
+}
 
-var _excluded$g = ["color"],
+var _excluded$k = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -609,7 +541,7 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
-var _excluded$f = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$j = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -633,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 () {
@@ -651,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) {
@@ -681,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;"]);
@@ -716,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",
@@ -731,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) {
@@ -751,7 +683,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$f);
+      props = _objectWithoutProperties(_ref7, _excluded$j);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -780,72 +712,326 @@ var getButtonSize = function (_ref) {
   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;
+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
+      }), null]
+    })
+  });
+});
+
+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 ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
-    throw new Error('variant=ghost is only allowed with type=primary or default');
+  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
-      }), 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$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(View$1).withConfig({
+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) {
@@ -875,6 +1061,256 @@ 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,
+      isPressed = _ref.isPressed,
+      isHovered = _ref.isHovered;
+  if (isDisabled) return 'black-light';
+  if (isSelected && isHovered) return 'white';
+  if (isSelected || isPressed) return 'white';
+  return 'black';
+}
+
+function getBorderRadius(defaultRadius, variant) {
+  // The clean way to have the rounded effect would have been to know the children height since radius >= height * 0.5
+  // We don't control over the height of the rendered children we just go with a arbitrary really high value
+  if (variant === 'rounded') return 800;
+  return defaultRadius;
+}
+
+var DisabledBorder = /*#__PURE__*/styled$1(View$1).withConfig({
+  displayName: "ChoiceItem__DisabledBorder",
+  componentId: "kitt-universal__sc-wuv3y6-0"
+})(["border-radius:", "px;", ";"], function (_ref2) {
+  var theme = _ref2.theme,
+      $variant = _ref2.$variant;
+  return getBorderRadius(theme.kitt.choices.item.borderRadius, $variant);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  var _theme$kitt$choices$i = theme.kitt.choices.item.disabled.border,
+      width = _theme$kitt$choices$i.width,
+      color = _theme$kitt$choices$i.color;
+  return css(["border:", "px solid ", ";"], width, color);
+});
+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) {
+  var theme = _ref4.theme,
+      $variant = _ref4.$variant;
+  return getBorderRadius(theme.kitt.choices.item.borderRadius, $variant);
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      $isHovered = _ref5.$isHovered,
+      $isPressed = _ref5.$isPressed,
+      $isDisabled = _ref5.$isDisabled,
+      $isSelected = _ref5.$isSelected;
+  var _theme$kitt$choices$i2 = theme.kitt.choices.item.backgroundColor,
+      hoverWhenSelected = _theme$kitt$choices$i2.hoverWhenSelected,
+      hover = _theme$kitt$choices$i2.hover,
+      disabled = _theme$kitt$choices$i2.disabled,
+      selected = _theme$kitt$choices$i2.selected,
+      pressed = _theme$kitt$choices$i2.pressed,
+      defaultBackground = _theme$kitt$choices$i2["default"];
+  if ($isDisabled) return disabled;
+  if ($isSelected && $isHovered) return hoverWhenSelected;
+  if ($isPressed) return pressed;
+  if ($isHovered) return hover;
+  if ($isSelected) return selected;
+  return defaultBackground;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  var _theme$kitt$choices$i3 = theme.kitt.choices.item.padding,
+      base = _theme$kitt$choices$i3.base,
+      small = _theme$kitt$choices$i3.small;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.SMALL
+  }, css(["padding:", "px;"], small), css(["padding:", "px;"], base));
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  var _theme$kitt$choices$i4 = theme.kitt.choices.item.transition,
+      property = _theme$kitt$choices$i4.property,
+      duration = _theme$kitt$choices$i4.duration,
+      timingFunction = _theme$kitt$choices$i4.timingFunction;
+  return css(["transition:", " ", "ms ", ";"], property, duration, timingFunction);
+});
+function ChoiceItem(_ref8) {
+  var _ref8$type = _ref8.type,
+      type = _ref8$type === void 0 ? 'button' : _ref8$type,
+      value = _ref8.value,
+      selected = _ref8.selected,
+      disabled = _ref8.disabled,
+      variant = _ref8.variant,
+      _children = _ref8.children,
+      isPressedInternal = _ref8.isPressedInternal,
+      isHoveredInternal = _ref8.isHoveredInternal,
+      onPress = _ref8.onPress,
+      onChange = _ref8.onChange,
+      onBlur = _ref8.onBlur,
+      onFocus = _ref8.onFocus;
+
+  var _useNativeAnimation = useNativeAnimation(),
+      onPressIn = _useNativeAnimation.onPressIn,
+      onPressOut = _useNativeAnimation.onPressOut;
+
+  var handleChange = function () {
+    if (!onChange) return; // Checkbox can be toggled
+
+    if (type === 'checkbox') {
+      onChange(selected ? undefined : value);
+      return;
+    }
+
+    onChange(value);
+  };
+
+  return /*#__PURE__*/jsx(Pressable, {
+    disabled: disabled,
+    accessibilityRole: type,
+    accessibilityState: {
+      checked: selected
+    },
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onPress: function handlePress(e) {
+      if (onFocus) onFocus(e);
+      if (onPress) onPress();
+      handleChange();
+      if (onBlur) onBlur(e);
+    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    children: function children(_ref9) {
+      var isHovered = _ref9.isHovered,
+          isPressed = _ref9.isPressed;
+      return /*#__PURE__*/jsxs(ChoiceItemView, {
+        style: undefined,
+        $isHovered: isHovered || isHoveredInternal,
+        $isDisabled: disabled,
+        $isSelected: selected,
+        $isPressed: isPressed || isPressedInternal,
+        $variant: variant,
+        children: [/*#__PURE__*/jsx(Typography.SetDefaultColor, {
+          value: getCurrentTextColor({
+            isDisabled: disabled,
+            isSelected: selected || isPressedInternal,
+            isPressed: isPressed,
+            isHovered: isHovered || isHoveredInternal
+          }),
+          children: _children
+        }), disabled ? /*#__PURE__*/jsx(DisabledBorder, {
+          $variant: variant,
+          style: StyleSheet.absoluteFillObject
+        }) : null]
+      });
+    }
+  });
+}
+
+var ChoiceItemContainer = /*#__PURE__*/styled$1(View$1).withConfig({
+  displayName: "ChoiceItemContainer",
+  componentId: "kitt-universal__sc-17uuimx-0"
+})(["", ""], function (_ref) {
+  var theme = _ref.theme,
+      $isLast = _ref.$isLast,
+      $direction = _ref.$direction;
+  var _theme$kitt$choices$s = theme.kitt.choices.spacing,
+      row = _theme$kitt$choices$s.row,
+      column = _theme$kitt$choices$s.column;
+
+  if ($direction === 'row') {
+    return css(["margin-right:", "px;"], $isLast ? 0 : row);
+  }
+
+  return css(["margin-bottom:", "px;"], $isLast ? 0 : column);
+});
+
+var _excluded$f = ["direction"];
+
+function ChoicesContainer(_ref) {
+  var direction = _ref.direction,
+      props = _objectWithoutProperties(_ref, _excluded$f);
+
+  if (direction === 'row') {
+    return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
+      horizontal: true
+    }, props));
+  }
+
+  return /*#__PURE__*/jsx(View$1, _objectSpread({}, props));
+}
+
+function Choices(_ref2) {
+  var id = _ref2.id,
+      testID = _ref2.testID,
+      type = _ref2.type,
+      _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? 'column' : _ref2$direction,
+      disabled = _ref2.disabled,
+      children = _ref2.children,
+      value = _ref2.value,
+      variant = _ref2.variant,
+      onPress = _ref2.onPress,
+      onChange = _ref2.onChange,
+      onFocus = _ref2.onFocus,
+      onBlur = _ref2.onBlur;
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  var isForm = type && ['radio', 'checkbox'].includes(type);
+  var childrenArray = Children.toArray(children);
+  var sharedProps = {
+    type: type,
+    disabled: disabled,
+    variant: variant,
+    onPress: !isForm ? onPress : undefined,
+    onChange: isForm ? function handleChange(newValue) {
+      setCurrentValue(newValue);
+      if (onChange) onChange(newValue);
+    } : undefined,
+    onFocus: onFocus,
+    onBlur: onBlur
+  };
+  return /*#__PURE__*/jsx(ChoicesContainer, {
+    direction: direction,
+    testID: testID,
+    nativeID: id,
+    children: childrenArray.map(function (child, index) {
+      var element = /*#__PURE__*/cloneElement(child, _objectSpread({
+        selected: isForm ? child.props.value === currentValue : undefined
+      }, sharedProps));
+      return /*#__PURE__*/jsx(ChoiceItemContainer, {
+        $direction: direction,
+        $isLast: index === childrenArray.length - 1,
+        children: element
+      }, child.key);
+    })
+  });
+}
+
+Choices.Item = ChoiceItem;
+function createChoicesComponent() {
+  return Choices;
+}
+var ButtonChoices = createChoicesComponent();
+Choices.ButtonChoices = ButtonChoices;
+var ChoicesElements = {
+  Item: ChoiceItem,
+  ButtonChoices: ButtonChoices
+};
+
 function Emoji(_ref) {
   var emoji = _ref.emoji,
       size = _ref.size,
@@ -1236,6 +1672,39 @@ var card = {
   }
 };
 
+var choices = {
+  spacing: {
+    row: 12,
+    column: 12
+  },
+  item: {
+    borderRadius: 10,
+    padding: {
+      base: 16,
+      small: 24
+    },
+    backgroundColor: {
+      "default": lateOceanColorPalette.black50,
+      disabled: colors.disabled,
+      selected: colors.primary,
+      pressed: lateOceanColorPalette.lateOceanLight1,
+      hover: lateOceanColorPalette.black100,
+      hoverWhenSelected: lateOceanColorPalette.lateOceanLight1
+    },
+    disabled: {
+      border: {
+        width: 2,
+        color: lateOceanColorPalette.black100
+      }
+    },
+    transition: {
+      property: 'all',
+      duration: 300,
+      timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
+    }
+  }
+};
+
 var feedbackMessage = {
   danger: {
     backgroundColor: colors.danger
@@ -1411,8 +1880,14 @@ var input = {
 };
 
 var inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 var inputTag = {
@@ -1653,6 +2128,7 @@ var theme = {
   breakpoints: breakpoints,
   button: button,
   card: card,
+  choices: choices,
   feedbackMessage: feedbackMessage,
   forms: forms,
   fullScreenModal: fullScreenModal,
@@ -1668,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) {
@@ -1741,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) {
@@ -1850,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) {
@@ -1893,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) {
@@ -1904,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) {
@@ -1982,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: {
@@ -2014,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) {
@@ -2033,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;"]);
@@ -2136,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]
   });
@@ -2256,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) {
@@ -2279,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) {
@@ -2320,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) {
@@ -2344,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) {
@@ -2360,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) {
@@ -2376,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) {
@@ -2427,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) {
@@ -2446,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) {
@@ -2466,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) {
@@ -2484,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) {
@@ -2574,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) {
@@ -2590,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,
@@ -2618,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: {
@@ -2650,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) {
@@ -2703,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) {
@@ -2761,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;"]);
@@ -2776,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) {
@@ -2801,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) {
@@ -2822,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) {
@@ -2890,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;
@@ -2950,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) {
@@ -2967,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) {
@@ -2975,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) {
@@ -2983,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) {
@@ -3055,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) {
@@ -3072,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) {
@@ -3084,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) {
@@ -3110,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) {
@@ -3120,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) {
@@ -3163,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) {
@@ -3173,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) {
@@ -3259,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 () {
@@ -3426,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) {
@@ -3452,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) {
@@ -3480,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) {
@@ -3518,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) {
@@ -3545,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) {
@@ -3553,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) {
@@ -3570,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) {
@@ -3621,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) {
@@ -3632,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;"]);
@@ -3646,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,
@@ -3686,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: {
@@ -3784,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: {
@@ -3810,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;"]);
@@ -3835,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) {
@@ -3845,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) {
@@ -3858,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) {
@@ -3875,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);
   }
@@ -3932,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) {
@@ -3955,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;"]);
@@ -4034,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);
@@ -4053,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;"]);
@@ -4070,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;"]);
@@ -4087,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;"]);
@@ -4104,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;"]);
@@ -4153,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;"]);
@@ -4226,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) {
@@ -4298,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) {
@@ -4328,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) {
@@ -4361,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) {
@@ -4494,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"
 }));
@@ -4593,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: {
@@ -4603,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) {
@@ -4697,5 +5101,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, 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, 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