@ornikar/kitt-universal 9.3.2 → 9.6.0

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

@@ -1,23 +1,23 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
-export * from '@ornikar/kitt-icons';
-import { Platform, Image, Linking, useWindowDimensions, Pressable as Pressable$1, StyleSheet, ScrollView as ScrollView$1, Modal as Modal$1, Text as Text$2, TextInput, View as View$1, Animated as Animated$1, Easing } from 'react-native';
+import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Text as Text$1, View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, NativeBaseProvider, extendTheme } from 'native-base';
+import _extends from '@babel/runtime/helpers/extends';
+import React, { forwardRef, useContext, createContext, cloneElement, useRef, useEffect, useState, Children, useMemo, Fragment as Fragment$1 } from 'react';
+import { Platform, Animated as Animated$1, Easing, useWindowDimensions, Image, StyleSheet, View as View$2, ScrollView as ScrollView$2, Linking, Pressable as Pressable$2, Modal as Modal$1, Text as Text$2, TextInput } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useDerivedValue, withTiming, useAnimatedProps, withDelay, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import React, { cloneElement, useContext, createContext, forwardRef, useMemo, useEffect, useState, useRef, Fragment as Fragment$1, Children } from 'react';
 import { jsx, jsxs, Fragment } 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 Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useAnimatedProps, withDelay, withTiming, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
-import { parse } from 'twemoji-parser';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { ArcIcon, UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+export * from '@ornikar/kitt-icons';
+import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
 import { styled as styled$1 } from '@linaria/react';
-import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { Picker as Picker$1 } from '@react-native-picker/picker';
@@ -25,39 +25,173 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
 
-var defaultIconSize = 20;
-var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Icon__IconContainer"
-})(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
-  var $color = _ref.$color;
-  return $color;
+var Stack = Stack$1;
+var VStack = VStack$1;
+var HStack = HStack$1;
+
+function warn(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(message);
+  }
+}
+function deprecatedMessage(symbol, deprecation, replaceBy) {
+  var replaceMessage = replaceBy === undefined ? '' : ", please use ".concat(replaceBy, " instead");
+  warn("[Deprecation] in ".concat(symbol, ": ").concat(deprecation, " is deprecated").concat(replaceMessage, "."));
+}
+function deprecatedInComponent(component, deprecation, replaceBy) {
+  deprecatedMessage("<".concat(component, " />"), deprecation, replaceBy);
+}
+
+var hasVariant = function (button, variant) {
+  return variant in button;
+};
+
+function getVariantValuesIfExist(theme, type, variant) {
+  var button = theme.kitt.button[type];
+
+  if (hasVariant(button, variant)) {
+    return button[variant];
+  }
+
+  return theme.kitt.button[type]["default"];
+}
+
+var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "AnimatedButtonPressable__StyledPressable"
+})(["", ""], function (_ref) {
+  var $isStretch = _ref.$isStretch;
+  if ($isStretch) return undefined;
+  return 'align-self: flex-start;';
+});
+var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
+  displayName: "AnimatedButtonPressable__StyledAnimatedView"
+})(["border-radius:", "px;"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.button.borderRadius;
+});
+var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      disabled = _ref3.disabled,
+      accessibilityRole = _ref3.accessibilityRole,
+      $type = _ref3.$type,
+      $variant = _ref3.$variant,
+      $isStretch = _ref3.$isStretch,
+      href = _ref3.href,
+      hrefAttrs = _ref3.hrefAttrs,
+      testID = _ref3.testID,
+      onPress = _ref3.onPress;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(0);
+  var color = useSharedValue(0);
+
+  var _getVariantValuesIfEx = getVariantValuesIfExist(theme, $type, $variant),
+      backgroundColor = _getVariantValuesIfEx.backgroundColor,
+      pressedBackgroundColor = _getVariantValuesIfEx.pressedBackgroundColor;
+
+  var scale = theme.kitt.button.scale;
+  var scaleStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
+        transform: [{
+          scale: withSpring(pressed.value ? scale.base.active : scale.base["default"])
+        }]
+      };
+    };
+
+    _f._closure = {
+      interpolateColor: interpolateColor,
+      color: color,
+      backgroundColor: backgroundColor,
+      pressedBackgroundColor: pressedBackgroundColor,
+      withSpring: withSpring,
+      pressed: pressed,
+      scale: {
+        base: {
+          active: scale.base.active,
+          "default": scale.base["default"]
+        }
+      }
+    };
+    _f.asString = "function _f(){const{interpolateColor,color,backgroundColor,pressedBackgroundColor,withSpring,pressed,scale}=jsThis._closure;{return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),transform:[{scale:withSpring(pressed.value?scale.base.active:scale.base.default)}]};}}";
+    _f.__workletHash = 5368461229978;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (56:41)";
+    _f.__optimalization = 2;
+    return _f;
+  }());
+
+  var handlePressInOut = function (pressIn) {
+    color.value = withSpring(pressIn ? 1 : 0);
+    pressed.value = pressIn ? 1 : 0;
+  };
+
+  return /*#__PURE__*/jsx(StyledPressable, {
+    ref: ref,
+    disabled: disabled,
+    accessibilityRole: accessibilityRole,
+    testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    $isStretch: $isStretch,
+    $type: $type,
+    onPress: onPress,
+    onPressIn: function onPressIn() {
+      handlePressInOut(true);
+    },
+    onPressOut: function onPressOut() {
+      handlePressInOut(false);
+    },
+    children: /*#__PURE__*/jsx(StyledAnimatedView, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: children
+    })
+  });
+});
+
+var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseStyledButtonPressable"
+})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.button.minWidth;
 }, function (_ref2) {
-  var $size = _ref2.$size;
-  return $size;
+  var theme = _ref2.theme,
+      $isStretch = _ref2.$isStretch;
+  return $isStretch ? '100%' : "".concat(theme.kitt.button.maxWidth, "px");
 }, function (_ref3) {
-  var $size = _ref3.$size;
-  return $size;
+  var $isStretch = _ref3.$isStretch;
+  return $isStretch ? '100%' : 'auto';
 }, function (_ref4) {
-  var _ref4$$align = _ref4.$align,
-      $align = _ref4$$align === void 0 ? 'auto' : _ref4$$align;
-  return $align;
+  var theme = _ref4.theme;
+  return theme.kitt.button.minHeight;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.button.borderRadius;
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      $isDisabled = _ref6.$isDisabled,
+      $type = _ref6.$type,
+      $variant = _ref6.$variant;
+  if ($isDisabled) return theme.kitt.button.disabled["default"].backgroundColor;
+  if (Platform.OS !== 'web') return 'transparent';
+  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
+}, function (_ref7) {
+  var theme = _ref7.theme,
+      $size = _ref7.$size,
+      $isDisabled = _ref7.$isDisabled;
+  var _theme$kitt$button$co = theme.kitt.button.contentPadding,
+      large = _theme$kitt$button$co.large,
+      defaultPadding = _theme$kitt$button$co["default"],
+      disabledPadding = _theme$kitt$button$co.disabled,
+      xLarge = _theme$kitt$button$co.xLarge;
+  if ($size === 'large') return large;
+  if ($size === 'xlarge') return xLarge;
+  if ($isDisabled) return disabledPadding;
+  return defaultPadding;
 });
-function Icon(_ref5) {
-  var icon = _ref5.icon,
-      _ref5$size = _ref5.size,
-      size = _ref5$size === void 0 ? defaultIconSize : _ref5$size,
-      align = _ref5.align,
-      color = _ref5.color;
-  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
-    color: color
-  });
-  return /*#__PURE__*/jsx(IconContainer$1, {
-    $align: align,
-    $size: size,
-    $color: color,
-    children: clonedIcon
-  });
-}
 
 var KittBreakpoints = {
   /**
@@ -116,14 +250,20 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$k = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$n = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   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
@@ -158,6 +298,11 @@ function createNativeBaseFontSize(type) {
   });
   return fontSizeForNativeBase;
 }
+
+function getNBThemeColorFromColorProps(colorName) {
+  return colorName ? "kitt.typography.".concat(colorName) : undefined;
+}
+
 function Typography(_ref) {
   var _type$base;
 
@@ -177,9 +322,10 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$k);
+      otherProps = _objectWithoutProperties(_ref, _excluded$n);
 
   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);
@@ -200,14 +346,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, {
@@ -248,6 +396,7 @@ var createHeading = function (level, defaultBase) {
   return TypographyHeading;
 };
 
+Typography.SetDefaultColor = TypographyDefaultColorContext.Provider;
 Typography.Text = TypographyText;
 Typography.Paragraph = TypographyParagraph;
 Typography.Header1 = createHeading(1);
@@ -265,269 +414,53 @@ 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$j = ["size", "round", "light", "sizeVariant"];
-
-var getInitials = function (firstname, lastname) {
-  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
-};
-
-var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Avatar__StyledAvatarView"
-})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
-  var theme = _ref.theme,
-      $isRound = _ref.$isRound,
-      $size = _ref.$size,
-      $sizeVariant = _ref.$sizeVariant;
-  if ($isRound) return "".concat($size / 2, "px");
-  return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      $isLight = _ref2.$isLight;
-  return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
-}, function (_ref3) {
-  var $size = _ref3.$size;
-  return $size;
-}, function (_ref4) {
-  var $size = _ref4.$size;
-  return $size;
-});
-
-function AvatarContent(_ref5) {
-  var size = _ref5.size,
-      src = _ref5.src,
-      firstname = _ref5.firstname,
-      lastname = _ref5.lastname,
-      alt = _ref5.alt,
-      isLight = _ref5.isLight,
-      sizeVariant = _ref5.sizeVariant;
-
-  if (src) {
-    return /*#__PURE__*/jsx(Image, {
-      source: {
-        uri: src
-      },
-      style: {
-        width: size,
-        height: size
-      },
-      accessibilityLabel: alt
-    });
-  }
-
-  if (firstname && lastname) {
-    return /*#__PURE__*/jsx(Typography.Text, {
-      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
-      variant: sizeVariant === 'large' ? 'bold' : 'regular',
-      color: isLight ? 'black' : 'white',
-      children: getInitials(firstname, lastname)
-    });
-  }
-
-  return /*#__PURE__*/jsx(Icon, {
-    icon: /*#__PURE__*/jsx(UserIcon, {}),
-    color: isLight ? 'black' : 'white',
-    size: size / 2
-  });
-}
-
-function Avatar(_ref6) {
-  var _ref6$size = _ref6.size,
-      size = _ref6$size === void 0 ? 40 : _ref6$size,
-      round = _ref6.round,
-      light = _ref6.light,
-      sizeVariant = _ref6.sizeVariant,
-      props = _objectWithoutProperties(_ref6, _excluded$j);
-
-  return /*#__PURE__*/jsx(StyledAvatarView, {
-    $size: size,
-    $isRound: round,
-    $isLight: light,
-    $sizeVariant: sizeVariant,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
-      size: size,
-      isLight: light,
-      sizeVariant: sizeVariant
-    }, props))
-  });
-}
-
-function warn(message) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(message);
-  }
-}
-function deprecatedMessage(symbol, deprecation, replaceBy) {
-  var replaceMessage = replaceBy === undefined ? '' : ", please use ".concat(replaceBy, " instead");
-  warn("[Deprecation] in ".concat(symbol, ": ").concat(deprecation, " is deprecated").concat(replaceMessage, "."));
-}
-function deprecatedInComponent(component, deprecation, replaceBy) {
-  deprecatedMessage("<".concat(component, " />"), deprecation, replaceBy);
-}
-
-var hasVariant = function (button, variant) {
-  return variant in button;
-};
-
-function getVariantValuesIfExist(theme, type, variant) {
-  var button = theme.kitt.button[type];
-
-  if (hasVariant(button, variant)) {
-    return button[variant];
-  }
-
-  return theme.kitt.button[type]["default"];
-}
-
-var StyledPressable = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "AnimatedButtonPressable__StyledPressable"
-})(["", ""], function (_ref) {
-  var $isStretch = _ref.$isStretch;
-  if ($isStretch) return undefined;
-  return 'align-self: flex-start;';
-});
-var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
-  displayName: "AnimatedButtonPressable__StyledAnimatedView"
-})(["border-radius:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.button.borderRadius;
-});
-var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-      disabled = _ref3.disabled,
-      accessibilityRole = _ref3.accessibilityRole,
-      $type = _ref3.$type,
-      $variant = _ref3.$variant,
-      $isStretch = _ref3.$isStretch,
-      href = _ref3.href,
-      hrefAttrs = _ref3.hrefAttrs,
-      testID = _ref3.testID,
-      onPress = _ref3.onPress;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(0);
-  var color = useSharedValue(0);
-
-  var _getVariantValuesIfEx = getVariantValuesIfExist(theme, $type, $variant),
-      backgroundColor = _getVariantValuesIfEx.backgroundColor,
-      pressedBackgroundColor = _getVariantValuesIfEx.pressedBackgroundColor;
-
-  var scale = theme.kitt.button.scale;
-  var scaleStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      return {
-        backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
-        transform: [{
-          scale: withSpring(pressed.value ? scale.base.active : scale.base["default"])
-        }]
-      };
-    };
-
-    _f._closure = {
-      interpolateColor: interpolateColor,
-      color: color,
-      backgroundColor: backgroundColor,
-      pressedBackgroundColor: pressedBackgroundColor,
-      withSpring: withSpring,
-      pressed: pressed,
-      scale: {
-        base: {
-          active: scale.base.active,
-          "default": scale.base["default"]
-        }
-      }
-    };
-    _f.asString = "function _f(){const{interpolateColor,color,backgroundColor,pressedBackgroundColor,withSpring,pressed,scale}=jsThis._closure;{return{backgroundColor:interpolateColor(color.value,[0,1],[backgroundColor,pressedBackgroundColor]),transform:[{scale:withSpring(pressed.value?scale.base.active:scale.base.default)}]};}}";
-    _f.__workletHash = 5368461229978;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Button/AnimatedButtonPressable.tsx (56:41)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
-
-  var handlePressInOut = function (pressIn) {
-    color.value = withSpring(pressIn ? 1 : 0);
-    pressed.value = pressIn ? 1 : 0;
-  };
+/** @deprecated use Typography.Header4 */
 
-  return /*#__PURE__*/jsx(StyledPressable, {
-    ref: ref,
-    disabled: disabled,
-    accessibilityRole: accessibilityRole,
-    testID: testID,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    $isStretch: $isStretch,
-    $type: $type,
-    onPress: onPress,
-    onPressIn: function onPressIn() {
-      handlePressInOut(true);
-    },
-    onPressOut: function onPressOut() {
-      handlePressInOut(false);
-    },
-    children: /*#__PURE__*/jsx(StyledAnimatedView, {
-      style: disabled ? [{
-        transform: [{
-          scale: 1
-        }]
-      }] : [scaleStyles],
-      children: children
-    })
-  });
-});
+Typography.h4 = createHeading(4, 'header4');
+/** @deprecated use Typography.Header6 */
 
-var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
-  displayName: "BaseStyledButtonPressable"
-})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.button.minWidth;
+Typography.h5 = createHeading(5, 'header5');
+
+var defaultIconSize = 20;
+var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Icon__IconContainer"
+})(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
+  var $color = _ref.$color;
+  return $color;
 }, function (_ref2) {
-  var theme = _ref2.theme,
-      $isStretch = _ref2.$isStretch;
-  return $isStretch ? '100%' : "".concat(theme.kitt.button.maxWidth, "px");
+  var $size = _ref2.$size;
+  return $size;
 }, function (_ref3) {
-  var $isStretch = _ref3.$isStretch;
-  return $isStretch ? '100%' : 'auto';
+  var $size = _ref3.$size;
+  return $size;
 }, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.button.minHeight;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.button.borderRadius;
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      $isDisabled = _ref6.$isDisabled,
-      $type = _ref6.$type,
-      $variant = _ref6.$variant;
-  if ($isDisabled) return theme.kitt.button.disabled["default"].backgroundColor;
-  if (Platform.OS !== 'web') return 'transparent';
-  return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      $size = _ref7.$size,
-      $isDisabled = _ref7.$isDisabled;
-  var _theme$kitt$button$co = theme.kitt.button.contentPadding,
-      large = _theme$kitt$button$co.large,
-      defaultPadding = _theme$kitt$button$co["default"],
-      disabledPadding = _theme$kitt$button$co.disabled,
-      xLarge = _theme$kitt$button$co.xLarge;
-  if ($size === 'large') return large;
-  if ($size === 'xlarge') return xLarge;
-  if ($isDisabled) return disabledPadding;
-  return defaultPadding;
+  var _ref4$$align = _ref4.$align,
+      $align = _ref4$$align === void 0 ? 'auto' : _ref4$$align;
+  return $align;
 });
+function Icon(_ref5) {
+  var icon = _ref5.icon,
+      _ref5$size = _ref5.size,
+      size = _ref5$size === void 0 ? defaultIconSize : _ref5$size,
+      align = _ref5.align,
+      color = _ref5.color;
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  return /*#__PURE__*/jsx(IconContainer$1, {
+    $align: align,
+    $size: size,
+    $color: color,
+    children: clonedIcon
+  });
+}
 
-var _excluded$i = ["color"],
+var _excluded$m = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -559,7 +492,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$h = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$l = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -664,7 +597,7 @@ function ButtonContentChildren(_ref4) {
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
     children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
-      testID: "button-left-icon",
+      testID: "button.ButtonContent.leftButtonIcon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
       base: "body",
@@ -701,7 +634,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$h);
+      props = _objectWithoutProperties(_ref7, _excluded$l);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -806,7 +739,286 @@ var Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       }), Platform.OS !== 'web' && disabled ? /*#__PURE__*/jsx(StyledDisabled, {}) : null]
     })
   });
-});
+});
+
+function SpinningIcon(_ref) {
+  var icon = _ref.icon,
+      color = _ref.color;
+
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error("Invalid color passed to SpinningIcon: ".concat(String(color)));
+  }
+
+  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: color
+  });
+  var animationRef = useRef(new Animated$1.Value(0));
+  var rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'test') return undefined;
+    var animation = Animated$1.loop(Animated$1.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return function () {
+      if (process.env.NODE_ENV === 'test') return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: clonedIcon
+  });
+}
+
+function LoaderIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsx(SpinningIcon, {
+    color: color,
+    icon: /*#__PURE__*/jsx(ArcIcon, {})
+  });
+}
+
+var View = View$1;
+var ScrollView = ScrollView$1;
+var Pressable = Pressable$1;
+
+function matchWindowSize(_ref, _ref2) {
+  var width = _ref.width,
+      height = _ref.height;
+  var minWidth = _ref2.minWidth,
+      maxWidth = _ref2.maxWidth,
+      minHeight = _ref2.minHeight,
+      maxHeight = _ref2.maxHeight;
+  var hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  var hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
+}
+function useMatchWindowSize(options) {
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width,
+      height = _useWindowDimensions.height;
+
+  return matchWindowSize({
+    width: width,
+    height: height
+  }, options);
+}
+
+var _excluded$k = ["as", "onPress", "disabled", "icon"];
+function ActionsItem(_ref) {
+  var as = _ref.as,
+      onPress = _ref.onPress,
+      disabled = _ref.disabled,
+      icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, _excluded$k);
+
+  var isMedium = useMatchWindowSize({
+    minWidth: KittBreakpoints.MEDIUM
+  });
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var mountedRef = useRef(false); // effect just for tracking mounted state, as onPress can unmount the ActionButton
+
+  useEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  return /*#__PURE__*/jsx(View, {
+    children: /*#__PURE__*/jsx(as, _objectSpread(_objectSpread({}, props), {}, {
+      stretch: !isMedium ? true : undefined,
+      disabled: isLoading ? true : disabled,
+      icon: isLoading ? /*#__PURE__*/jsx(LoaderIcon, {}) : icon,
+      onPress: function handlePress(e) {
+        var callPressAndUpdateLoadingState = /*#__PURE__*/function () {
+          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            return _regeneratorRuntime.wrap(function (_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    if (onPress) {
+                      _context.next = 2;
+                      break;
+                    }
+
+                    return _context.abrupt("return");
+
+                  case 2:
+                    setIsLoading(true);
+                    _context.prev = 3;
+                    _context.next = 6;
+                    return onPress(e);
+
+                  case 6:
+                    if (mountedRef.current) {
+                      setIsLoading(false);
+                    }
+
+                    _context.next = 13;
+                    break;
+
+                  case 9:
+                    _context.prev = 9;
+                    _context.t0 = _context["catch"](3);
+
+                    if (mountedRef.current) {
+                      setIsLoading(false);
+                    }
+
+                    throw _context.t0;
+
+                  case 13:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee, null, [[3, 9]]);
+          }));
+
+          return function () {
+            return _ref2.apply(this, arguments);
+          };
+        }();
+
+        callPressAndUpdateLoadingState();
+      }
+    }))
+  });
+}
+
+function ActionsButton(_ref) {
+  var props = _extends({}, _ref);
+
+  return /*#__PURE__*/jsx(ActionsItem, _objectSpread({
+    as: Button
+  }, props));
+}
+
+var _excluded$j = ["children"];
+function Actions(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$j);
+
+  return /*#__PURE__*/jsx(Stack, _objectSpread(_objectSpread({
+    alignItems: {
+      base: 'stretch',
+      medium: 'center'
+    },
+    direction: {
+      base: 'column',
+      medium: 'row'
+    },
+    flex: 1
+  }, props), {}, {
+    space: "kitt.3",
+    children: children
+  }));
+}
+Actions.Button = ActionsButton;
+Actions.Item = ActionsItem;
+
+var _excluded$i = ["size", "round", "light", "sizeVariant"];
+
+var getInitials = function (firstname, lastname) {
+  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
+};
+
+var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Avatar__StyledAvatarView"
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
+  var theme = _ref.theme,
+      $isRound = _ref.$isRound,
+      $size = _ref.$size,
+      $sizeVariant = _ref.$sizeVariant;
+  if ($isRound) return "".concat($size / 2, "px");
+  return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $isLight = _ref2.$isLight;
+  return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
+}, function (_ref3) {
+  var $size = _ref3.$size;
+  return $size;
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  return $size;
+});
+
+function AvatarContent(_ref5) {
+  var size = _ref5.size,
+      src = _ref5.src,
+      firstname = _ref5.firstname,
+      lastname = _ref5.lastname,
+      alt = _ref5.alt,
+      isLight = _ref5.isLight,
+      sizeVariant = _ref5.sizeVariant;
+
+  if (src) {
+    return /*#__PURE__*/jsx(Image, {
+      source: {
+        uri: src
+      },
+      style: {
+        width: size,
+        height: size
+      },
+      accessibilityLabel: alt
+    });
+  }
+
+  if (firstname && lastname) {
+    return /*#__PURE__*/jsx(Typography.Text, {
+      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
+      color: isLight ? 'black' : 'white',
+      children: getInitials(firstname, lastname)
+    });
+  }
+
+  return /*#__PURE__*/jsx(Icon, {
+    icon: /*#__PURE__*/jsx(UserIcon, {}),
+    color: isLight ? 'black' : 'white',
+    size: size / 2
+  });
+}
+
+function Avatar(_ref6) {
+  var _ref6$size = _ref6.size,
+      size = _ref6$size === void 0 ? 40 : _ref6$size,
+      round = _ref6.round,
+      light = _ref6.light,
+      sizeVariant = _ref6.sizeVariant,
+      props = _objectWithoutProperties(_ref6, _excluded$i);
+
+  return /*#__PURE__*/jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    $sizeVariant: sizeVariant,
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
+      size: size,
+      isLight: light,
+      sizeVariant: sizeVariant
+    }, props))
+  });
+}
 
 var Container$5 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Card__Container"
@@ -837,6 +1049,333 @@ function Card(_ref6) {
   });
 }
 
+var useNativeAnimation = function (_ref) {
+  var selected = _ref.selected,
+      disabled = _ref.disabled,
+      isPressedInternal = _ref.isPressedInternal;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(Boolean(isPressedInternal));
+  var progress = useDerivedValue(function () {
+    var _f = function () {
+      return withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: withTiming,
+      pressed: pressed,
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              transition: {
+                duration: theme.kitt.choices.item.transition.duration
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
+    _f.__workletHash = 1120030177160;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (31:35)";
+    return _f;
+  }());
+  var backgroundStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      var _theme$kitt$choices$i = theme.kitt.choices.item.backgroundColor,
+          defaultBg = _theme$kitt$choices$i["default"],
+          pressedBg = _theme$kitt$choices$i.pressed,
+          selectedBg = _theme$kitt$choices$i.selected,
+          disabledBg = _theme$kitt$choices$i.disabled;
+      if (disabled) return {
+        backgroundColor: disabledBg
+      };
+      if (selected) return {
+        backgroundColor: selectedBg
+      };
+      return {
+        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled: disabled,
+      selected: selected,
+      interpolateColor: interpolateColor,
+      progress: progress
+    };
+    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
+    _f.__workletHash = 15506726129309;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (35:44)";
+    return _f;
+  }());
+  return {
+    onPressIn: function onPressIn() {
+      pressed.value = true;
+    },
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    },
+    backgroundStyles: backgroundStyles
+  };
+};
+
+function getCurrentTextColor(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isSelected = _ref.isSelected,
+      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(View$2).withConfig({
+  displayName: "ChoiceItem__DisabledBorder"
+})(["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(Platform.OS === 'web' ? View$2 : Animated.View).withConfig({
+  displayName: "ChoiceItem__ChoiceItemView"
+})(["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;
+  if (Platform.OS !== 'web') return undefined;
+  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({
+    selected: selected,
+    disabled: disabled,
+    isPressedInternal: isPressedInternal
+  }),
+      onPressIn = _useNativeAnimation.onPressIn,
+      onPressOut = _useNativeAnimation.onPressOut,
+      backgroundStyles = _useNativeAnimation.backgroundStyles;
+
+  var handleChange = function () {
+    if (!onChange) return; // Checkbox can be toggled
+
+    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: Platform.OS !== 'web' ? [backgroundStyles] : 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(View$2).withConfig({
+  displayName: "ChoiceItemContainer"
+})(["", ""], 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$h = ["direction"];
+
+function ChoicesContainer(_ref) {
+  var direction = _ref.direction,
+      props = _objectWithoutProperties(_ref, _excluded$h);
+
+  if (direction === 'row') {
+    return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
+      horizontal: true
+    }, props));
+  }
+
+  return /*#__PURE__*/jsx(View$2, _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,
@@ -1221,6 +1760,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
@@ -1396,8 +1968,14 @@ var input = {
 };
 
 var inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 var inputTag = {
@@ -1638,6 +2216,7 @@ var theme = {
   breakpoints: breakpoints,
   button: button,
   card: card,
+  choices: choices,
   feedbackMessage: feedbackMessage,
   forms: forms,
   fullScreenModal: fullScreenModal,
@@ -1653,28 +2232,6 @@ var theme = {
   navigationModal: navigationModal
 };
 
-function matchWindowSize(_ref, _ref2) {
-  var width = _ref.width,
-      height = _ref.height;
-  var minWidth = _ref2.minWidth,
-      maxWidth = _ref2.maxWidth,
-      minHeight = _ref2.minHeight,
-      maxHeight = _ref2.maxHeight;
-  var hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
-  var hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
-  return hasWidthMatched && hasHeightMatched;
-}
-function useMatchWindowSize(options) {
-  var _useWindowDimensions = useWindowDimensions(),
-      width = _useWindowDimensions.width,
-      height = _useWindowDimensions.height;
-
-  return matchWindowSize({
-    width: width,
-    height: height
-  }, options);
-}
-
 function createWindowSizeHelper(dimensions) {
   return {
     matchWindowSize: function matchWindowSize$1(options) {
@@ -1999,7 +2556,7 @@ function DatePickerAndroid(_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(Pressable$2).withConfig({
   displayName: "Overlay__OverlayPressable"
 })(function (_ref) {
   var theme = _ref.theme;
@@ -2026,7 +2583,7 @@ var BodyView = /*#__PURE__*/styled.View.withConfig({
 });
 function ModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/jsx(ScrollView$1, {
+  return /*#__PURE__*/jsx(ScrollView$2, {
     children: /*#__PURE__*/jsx(BodyView, {
       children: children
     })
@@ -2730,40 +3287,25 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldContainer"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FeedbackContainer"
-})(["", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldLabelContainer"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
-});
-var LabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__LabelContainer"
-})(["margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.inputField.iconMarginLeft;
-});
-function InputField(_ref4) {
-  var label = _ref4.label,
-      labelFeedback = _ref4.labelFeedback,
-      input = _ref4.input,
-      feedback = _ref4.feedback;
-  return /*#__PURE__*/jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsx(LabelContainer, {
+function InputField(_ref) {
+  var label = _ref.label,
+      labelFeedback = _ref.labelFeedback,
+      input = _ref.input,
+      feedback = _ref.feedback;
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });
@@ -2800,7 +3342,7 @@ function InputIcon(_ref) {
 function InputPressable(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/jsx(Pressable$1, _objectSpread({}, props));
+  return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
 }
 
 var _excluded$8 = ["isPasswordDefaultVisible", "right"];
@@ -2846,7 +3388,7 @@ var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
 };
 
-var InputTagContainer = /*#__PURE__*/styled(View$1).withConfig({
+var InputTagContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "InputTag__InputTagContainer"
 })(["align-items:center;justify-content:center;flex-direction:row;align-self:flex-start;overflow:hidden;padding-horizontal:", "px;background-color:", ";border-radius:", "px;"], function (_ref) {
   var theme = _ref.theme;
@@ -2868,7 +3410,7 @@ var InputTagContainer = /*#__PURE__*/styled(View$1).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.forms.inputTag.borderRadius;
 });
-var IconContainer = /*#__PURE__*/styled(View$1).withConfig({
+var IconContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "InputTag__IconContainer"
 })(["margin-right:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
@@ -3168,47 +3710,6 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-function SpinningIcon(_ref) {
-  var icon = _ref.icon,
-      color = _ref.color;
-
-  if (process.env.NODE_ENV !== 'production' && !color) {
-    throw new Error("Invalid color passed to SpinningIcon: ".concat(String(color)));
-  }
-
-  var clonedIcon = /*#__PURE__*/cloneElement(icon, {
-    color: color
-  });
-  var animationRef = useRef(new Animated$1.Value(0));
-  var rotation = animationRef.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
-  });
-  useEffect(function () {
-    if (process.env.NODE_ENV === 'test') return undefined;
-    var animation = Animated$1.loop(Animated$1.timing(animationRef.current, {
-      toValue: 1,
-      duration: 1100,
-      easing: Easing.linear,
-      useNativeDriver: true
-    }));
-    animation.start();
-    return function () {
-      if (process.env.NODE_ENV === 'test') return undefined;
-      animation.stop();
-      return undefined;
-    };
-  }, []);
-  return /*#__PURE__*/jsx(Animated$1.View, {
-    style: {
-      transform: [{
-        rotate: rotation
-      }]
-    },
-    children: clonedIcon
-  });
-}
-
 var _excluded$7 = ["children"];
 var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
@@ -3308,7 +3809,7 @@ function ListItem(_ref5) {
       onPress = _ref5.onPress,
       rest = _objectWithoutProperties(_ref5, _excluded$5);
 
-  var Wrapper = onPress ? Pressable$1 : Fragment$1;
+  var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
     onPress: onPress
@@ -3335,14 +3836,6 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function LoaderIcon(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/jsx(SpinningIcon, {
-    color: color,
-    icon: /*#__PURE__*/jsx(ArcIcon, {})
-  });
-}
-
 function IconContent(_ref) {
   var type = _ref.type,
       color = _ref.color;
@@ -3528,7 +4021,7 @@ function CloseButton(_ref) {
   });
 }
 
-var ModalBehaviourContainer = /*#__PURE__*/styled(View$1).withConfig({
+var ModalBehaviourContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "ModalBehaviour__ModalBehaviourContainer"
 })(["", ""], function () {
   if (Platform.OS !== 'web') return undefined;
@@ -3695,16 +4188,8 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var Stack = Stack$1;
-var VStack = VStack$1;
-var HStack = HStack$1;
-
-var View = View$2;
-var ScrollView = ScrollView$2;
-var Pressable = Pressable$2;
-
 var _excluded$4 = ["children"];
-var ViewWithPadding = /*#__PURE__*/styled(View$1).withConfig({
+var ViewWithPadding = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "ContentPadding__ViewWithPadding"
 })(["padding:", ";"], function (_ref) {
   var theme = _ref.theme;
@@ -3810,7 +4295,7 @@ var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
     return theme.kitt.colors.separator;
   });
 });
-var Row = /*#__PURE__*/styled(View$1).withConfig({
+var Row = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__Row"
 })(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref7) {
   var $hasContent = _ref7.$hasContent,
@@ -3823,7 +4308,7 @@ var ButtonContainer = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref8.theme;
   return theme.kitt.iconButton.width;
 });
-var ChildrenComponent = /*#__PURE__*/styled(View$1).withConfig({
+var ChildrenComponent = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__ChildrenComponent"
 })(["flex:1;align-items:center;", ";"], function (_ref9) {
   var theme = _ref9.theme,
@@ -3882,7 +4367,7 @@ function Header(_ref12) {
   });
 }
 
-var NavigationModalContainer = /*#__PURE__*/styled(View$1).withConfig({
+var NavigationModalContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "NavigationModalContainer"
 })(["position:relative;background-color:", ";flex:1;", ""], function (_ref) {
   var theme = _ref.theme,
@@ -3893,7 +4378,7 @@ var NavigationModalContainer = /*#__PURE__*/styled(View$1).withConfig({
   return css(["min-height:100vh;"]);
 });
 
-var ContainerWithoutHeader = /*#__PURE__*/styled(View$1).withConfig({
+var ContainerWithoutHeader = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "NavigationModal__ContainerWithoutHeader"
 })(["justify-content:space-between;flex:1;"]);
 function NavigationModal(_ref) {
@@ -3903,10 +4388,10 @@ function NavigationModal(_ref) {
       backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/jsxs(NavigationModalContainer, {
     $backgroundColor: backgroundColor,
-    children: [header ? /*#__PURE__*/jsx(View$1, {
+    children: [header ? /*#__PURE__*/jsx(View$2, {
       children: header
     }) : null, /*#__PURE__*/jsxs(ContainerWithoutHeader, {
-      children: [/*#__PURE__*/jsx(ScrollView$1, {
+      children: [/*#__PURE__*/jsx(ScrollView$2, {
         bounces: false,
         contentContainerStyle: {
           flexGrow: 1,
@@ -4186,7 +4671,7 @@ function Picker(_ref) {
           color: item.props.value === value ? theme.picker.ios.selected.color : undefined
         });
       })
-    }) : /*#__PURE__*/jsx(ScrollView$1, {
+    }) : /*#__PURE__*/jsx(ScrollView$2, {
       testID: testID,
       children: React.Children.map(children, function (child) {
         var item = child;
@@ -4274,7 +4759,7 @@ function SkeletonContent(_ref3) {
   });
 }
 
-var SkeletonContainer = /*#__PURE__*/styled(View$1).withConfig({
+var SkeletonContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Skeleton__SkeletonContainer"
 })(["overflow:hidden;"]);
 function Skeleton(_ref) {
@@ -4778,7 +5263,7 @@ function ModalDateTimePicker(_ref2) {
       }) : null, /*#__PURE__*/jsx(Modal.Body, {
         children: /*#__PURE__*/jsx(DateTimePicker, {
           is24Hour: true,
-          testID: "date-picker-native-element",
+          testID: "timePicker.ModalDateTimePicker.dateTimeNativePicker",
           value: currentValue,
           mode: "time",
           display: Platform.OS === 'ios' ? 'spinner' : 'default',
@@ -4885,7 +5370,7 @@ function TimePicker(_ref) {
       children: displayedValue
     }), Platform.OS === 'android' && isTimePickerModalVisible ? /*#__PURE__*/jsx(DateTimePicker, {
       is24Hour: true,
-      testID: "date-picker-native-element",
+      testID: "timePicker.TimePicker.dateTimeNativePicker",
       value: dateTimePickerValue,
       mode: "time",
       display: "default",
@@ -4924,7 +5409,7 @@ var StyledTooltipContent = /*#__PURE__*/styled.View.withConfig({
 
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(View$1, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(View$2, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
@@ -5030,16 +5515,16 @@ function Tooltip(_ref) {
     });
   }, [x, y, reference, floating, update, refs, middlewareData, onUpdate]);
   return /*#__PURE__*/jsxs(TooltipContainer, {
-    children: [/*#__PURE__*/jsx(View$1, {
+    children: [/*#__PURE__*/jsx(View$2, {
       ref: reference,
-      children: /*#__PURE__*/jsx(Pressable$1, {
+      children: /*#__PURE__*/jsx(Pressable$2, {
         accessibilityRole: "button",
         onPress: function handlePress() {
           pressed.value = !pressed.value;
         },
         children: children
       })
-    }), /*#__PURE__*/jsx(View$1, {
+    }), /*#__PURE__*/jsx(View$2, {
       ref: floating,
       accessibilityElementsHidden: !pressed.value,
       importantForAccessibility: pressed.value === true ? 'auto' : 'no-hide-descendants',
@@ -5263,5 +5748,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.js.map