@ornikar/kitt-universal 11.2.0 → 12.0.0

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

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
+import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback, createElement } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useSx, Text, Input, NativeBaseProvider, extendTheme, useBreakpointValue, useMediaQuery } from 'native-base';
 export { useBreakpointValue, useClipboard, useMediaQuery, useSx, useToken } from 'native-base';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
@@ -8,7 +8,7 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
 import _extends from '@babel/runtime/helpers/extends';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withTiming, Easing as Easing$1, runOnJS, useDerivedValue, useAnimatedProps, withDelay, withRepeat, interpolate } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Platform, Animated as Animated$1, Easing, useWindowDimensions, Pressable as Pressable$2, StyleSheet, Modal as Modal$1, View as View$2, ScrollView as ScrollView$2, Linking, Text as Text$1, PixelRatio } from 'react-native';
+import { Platform, Animated as Animated$1, Easing, useWindowDimensions, StyleSheet, Modal as Modal$1, ScrollView as ScrollView$2, View as View$2, Linking, Text as Text$1, Pressable as Pressable$2, PixelRatio } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
@@ -16,11 +16,11 @@ import { ArcIcon, UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon,
 export * from '@ornikar/kitt-icons';
 import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import styled, { css, ThemeProvider } from 'styled-components/native';
 import { parse } from 'twemoji-parser';
 import * as WebBrowser from 'expo-web-browser';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
+import styled, { ThemeProvider } from 'styled-components/native';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { Picker as Picker$1 } from '@react-native-picker/picker';
@@ -1044,6 +1044,10 @@ var textArea = {
   minHeight: 120
 };
 
+var timePicker = {
+  minWidth: 100
+};
+
 var forms = {
   datePicker: datePicker,
   input: input,
@@ -1052,7 +1056,8 @@ var forms = {
   textArea: textArea,
   checkbox: checkbox,
   inputTag: inputTag,
-  radioButtonGroup: radioButtonGroup
+  radioButtonGroup: radioButtonGroup,
+  timePicker: timePicker
 };
 
 var webAnimationContentDuration = 600;
@@ -1142,6 +1147,8 @@ var iconButton = {
 
 var listItem = {
   padding: '12px 16px',
+  verticalPadding: 12,
+  horizontalPadding: 16,
   borderColor: colors.separator,
   borderWidth: 1,
   innerMargin: 8
@@ -1183,6 +1190,8 @@ var picker = {
   },
   android: {
     padding: '12px 24px',
+    verticalPadding: 12,
+    horizontalPadding: 24,
     "default": {
       backgroundColor: colors.transparent
     },
@@ -1281,6 +1290,8 @@ var skeleton = {
 var tag = {
   borderRadius: 10,
   padding: '2px 12px',
+  verticalPadding: 2,
+  horizontalPadding: 12,
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
@@ -1357,6 +1368,27 @@ var tooltip = {
   }
 };
 
+var verticalSteps = {
+  active: {
+    icon: {
+      backgroundColor: colors.primary,
+      textColor: colors.white
+    }
+  },
+  done: {
+    icon: {
+      backgroundColor: lateOceanColorPalette.moonPurple,
+      textColor: colors.primary
+    }
+  },
+  "default": {
+    icon: {
+      backgroundColor: colors.disabled,
+      textColor: colors.blackDisabled
+    }
+  }
+};
+
 var breakpoints = {
   values: {
     base: 0,
@@ -1408,7 +1440,8 @@ var theme = {
   tooltip: tooltip,
   typography: typography,
   fullscreenModal: fullscreenModal,
-  actionCard: actionCard
+  actionCard: actionCard,
+  verticalSteps: verticalSteps
 };
 
 var KittThemeContext = /*#__PURE__*/createContext({
@@ -1713,7 +1746,7 @@ var isTypographyHeader = function (type, isHeaderTypographyInContext) {
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-var _excluded$E = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$G = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -1763,7 +1796,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$E);
+    otherProps = _objectWithoutProperties(_ref, _excluded$G);
   var sx = useSx();
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -1868,11 +1901,11 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$D = ["color"],
+var _excluded$F = ["color"],
   _excluded2$5 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   var sx = useSx();
   var colorStyle = sx({
     color: getTypographyColorValue(color)
@@ -1916,7 +1949,7 @@ var getTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$C = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+var _excluded$E = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -1991,7 +2024,7 @@ function ButtonContent(_ref3) {
     isHovered = _ref3.isHovered,
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
-    var props = _objectWithoutProperties(_ref3, _excluded$C);
+    var props = _objectWithoutProperties(_ref3, _excluded$E);
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -2040,7 +2073,7 @@ function ButtonPadding(_ref2) {
   });
 }
 
-function DisabledBorder$1() {
+function DisabledBorder() {
   return /*#__PURE__*/jsx(View, {
     position: "absolute",
     top: 0,
@@ -2237,7 +2270,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
             isPressed: isPressed,
             isFocused: isFocused,
             children: _children
-          }), disabled ? /*#__PURE__*/jsx(DisabledBorder$1, {}) : null, /*#__PURE__*/jsx(FocusBorder, {
+          }), disabled ? /*#__PURE__*/jsx(DisabledBorder, {}) : null, /*#__PURE__*/jsx(FocusBorder, {
             type: type,
             variant: variant,
             isFocused: isFocused || isFocusedInternal,
@@ -2324,7 +2357,7 @@ function useMatchWindowSize(options) {
   }, options);
 }
 
-var _excluded$B = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$D = ["as", "onPress", "disabled", "icon", "stretch"];
 function getCurrentStretchValue(isStretch, isMedium) {
   // Stretch will follow the value passed from the component occurence if defined
   if (isStretch) return isStretch;
@@ -2339,7 +2372,7 @@ function ActionsItem(_ref) {
     disabled = _ref.disabled,
     icon = _ref.icon,
     stretch = _ref.stretch,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   var isMedium = useMatchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
   });
@@ -2414,7 +2447,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$A = ["children", "layout"];
+var _excluded$C = ["children", "layout"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -2434,7 +2467,7 @@ function getCurrentDirection(layout) {
 function Actions(_ref) {
   var children = _ref.children,
     layout = _ref.layout,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   var currentAlignItems = getCurrentLayout(layout);
   var currentDirection = getCurrentDirection(layout);
   return /*#__PURE__*/jsx(Stack, _objectSpread(_objectSpread({
@@ -2480,7 +2513,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$z = ["size", "round", "light", "sizeVariant"];
+var _excluded$B = ["size", "round", "light", "sizeVariant"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -2519,7 +2552,7 @@ function Avatar(_ref2) {
     round = _ref2.round,
     light = _ref2.light,
     sizeVariant = _ref2.sizeVariant,
-    props = _objectWithoutProperties(_ref2, _excluded$z);
+    props = _objectWithoutProperties(_ref2, _excluded$B);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -2687,19 +2720,16 @@ function ModalBehaviour(_ref2) {
 }
 ModalBehaviour.CloseButton = CloseButton;
 
-// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled(Pressable$2).withConfig({
-  displayName: "Overlay__OverlayPressable"
-})(function (_ref) {
-  var theme = _ref.theme;
-  return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
-    backgroundColor: theme.kitt.colors.overlay.dark
-  });
-});
-function Overlay(_ref2) {
-  var onPress = _ref2.onPress;
-  return /*#__PURE__*/jsx(OverlayPressable, {
+function Overlay(_ref) {
+  var onPress = _ref.onPress;
+  return /*#__PURE__*/jsx(Pressable, {
     accessibilityRole: "none",
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    backgroundColor: "kitt.overlay.dark",
     onPress: onPress
   });
 }
@@ -2939,11 +2969,11 @@ function CardModalAnimation(_ref) {
   });
 }
 
-var _excluded$y = ["children"],
+var _excluded$A = ["children"],
   _excluded2$4 = ["children", "visible", "onClose", "onExited"];
 function CardModalScrollContainer(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   if (Platform.OS !== 'web') {
     return /*#__PURE__*/jsx(View, {
       children: children
@@ -2989,7 +3019,7 @@ function CardModalBehaviour(_ref2) {
   });
 }
 
-var _excluded$x = ["children", "paddingX", "paddingY"];
+var _excluded$z = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -2999,7 +3029,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: paddingX,
     paddingY: paddingY
@@ -3008,7 +3038,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$w = ["children", "padding", "hasSeparator"];
+var _excluded$y = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -3018,7 +3048,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -3032,7 +3062,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$v = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$x = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -3045,7 +3075,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -3083,7 +3113,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$u = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$w = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -3094,7 +3124,7 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -3112,6 +3142,59 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
+function getBackgroundColor$3(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    isHovered = _ref.isHovered,
+    isPressed = _ref.isPressed;
+  if (isDisabled) return 'kitt.choices.item.disabled.backgroundColor';
+  if (isSelected && isHovered) return 'kitt.choices.item.hoverWhenSelected.backgroundColor';
+  if (isPressed) return 'kitt.choices.item.pressed.backgroundColor';
+  if (isHovered) return 'kitt.choices.item.hover.backgroundColor';
+  if (isSelected) return 'kitt.choices.item.selected.backgroundColor';
+  return 'kitt.choices.item.default.backgroundColor';
+}
+
+function getBorderRadius(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
+  return variant === 'rounded' ? Number.MAX_SAFE_INTEGER : 'kitt.choices.item.borderRadius';
+}
+
+function AnimatedChoiceItemView(_ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
+    size = _ref.size,
+    isHovered = _ref.isHovered,
+    isPressed = _ref.isPressed,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    animatedStyles = _ref.animatedStyles;
+  var sx = useSx();
+  var style = sx({
+    position: 'relative',
+    borderRadius: getBorderRadius(variant),
+    backgroundColor: getBackgroundColor$3({
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      isHovered: isHovered,
+      isPressed: isPressed
+    }),
+    paddingX: size === 'small' ? 'kitt.4' : {
+      base: 'kitt.4',
+      small: 'kitt.6'
+    },
+    paddingY: size === 'small' ? 'kitt.2' : {
+      base: 'kitt.4',
+      small: 'kitt.6'
+    }
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [style, animatedStyles],
+    children: children
+  });
+}
+
 var useNativeAnimation$2 = function (_ref) {
   var selected = _ref.selected,
     disabled = _ref.disabled,
@@ -3202,87 +3285,22 @@ function getCurrentTextColor$1(_ref) {
   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,
-    $size = _ref6.$size;
-  var _theme$kitt$choices$i3 = theme.kitt.choices.item.padding,
-    base = _theme$kitt$choices$i3.base,
-    small = _theme$kitt$choices$i3.small;
-  if ($size === 'small') {
-    return css(["padding:", "px ", "px;"], base / 2, base);
-  }
-  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,
-    size = _ref8.size;
+function ChoiceItem(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    value = _ref.value,
+    selected = _ref.selected,
+    disabled = _ref.disabled,
+    variant = _ref.variant,
+    _children = _ref.children,
+    isPressedInternal = _ref.isPressedInternal,
+    isHoveredInternal = _ref.isHoveredInternal,
+    onPress = _ref.onPress,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    size = _ref.size;
   var _useNativeAnimation = useNativeAnimation$2({
       selected: selected,
       disabled: disabled,
@@ -3317,17 +3335,17 @@ function ChoiceItem(_ref8) {
     },
     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,
-        $size: size,
+    children: function children(_ref2) {
+      var isHovered = _ref2.isHovered,
+        isPressed = _ref2.isPressed;
+      return /*#__PURE__*/jsxs(AnimatedChoiceItemView, {
+        animatedStyles: backgroundStyles,
+        isHovered: isHovered || isHoveredInternal,
+        isDisabled: disabled,
+        isSelected: selected,
+        isPressed: isPressed || isPressedInternal,
+        variant: variant,
+        size: size,
         children: [/*#__PURE__*/jsx(Typography.SetDefaultColor, {
           value: getCurrentTextColor$1({
             isDisabled: disabled,
@@ -3336,34 +3354,37 @@ function ChoiceItem(_ref8) {
             isHovered: isHovered || isHoveredInternal
           }),
           children: _children
-        }), disabled ? /*#__PURE__*/jsx(DisabledBorder, {
-          $variant: variant,
-          style: StyleSheet.absoluteFillObject
+        }), disabled ? /*#__PURE__*/jsx(View, {
+          borderRadius: getBorderRadius(variant),
+          borderWidth: "kitt.choices.item.disabled.borderWidth",
+          borderColor: "kitt.choices.item.disabled.borderColor",
+          position: "absolute",
+          top: "0",
+          right: "0",
+          left: "0",
+          bottom: "0"
         }) : 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);
-});
+function ChoiceItemContainer(_ref) {
+  var children = _ref.children,
+    direction = _ref.direction,
+    isLast = _ref.isLast;
+  var currentItemMarginValue = isLast ? undefined : 'kitt.3';
+  return /*#__PURE__*/jsx(View, {
+    marginRight: direction === 'row' ? currentItemMarginValue : undefined,
+    marginBottom: direction === 'column' ? currentItemMarginValue : undefined,
+    children: children
+  });
+}
 
-var _excluded$t = ["direction"];
+var _excluded$v = ["direction"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
@@ -3417,8 +3438,8 @@ function Choices(_ref2) {
         selected: isForm ? child.props.value === currentValue : undefined
       }, sharedProps));
       return /*#__PURE__*/jsx(ChoiceItemContainer, {
-        $direction: direction,
-        $isLast: index === childrenArray.length - 1,
+        direction: direction,
+        isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);
     })
@@ -3657,13 +3678,13 @@ function DialogModalAnimation(_ref) {
   });
 }
 
-var _excluded$s = ["children", "visible", "onClose", "onExited"];
+var _excluded$u = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -3694,7 +3715,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$r = ["stretch"];
+var _excluded$t = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -3735,7 +3756,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$r);
+    props = _objectWithoutProperties(_ref2, _excluded$t);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -3772,7 +3793,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$q = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$s = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$3 = ["phoneNumber", "children"],
   _excluded3$2 = ["phoneNumber", "children"],
   _excluded4$1 = ["emailAddress", "children"];
@@ -3782,7 +3803,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$s);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -3877,14 +3898,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$p = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$r = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
     _ref$openLinkBehavior = _ref.openLinkBehavior,
     openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     onPress: function handleOnPress(e) {
       if (onPress) {
@@ -4211,11 +4232,15 @@ function stringToNumber(text) {
   return parseInt(text, 10);
 }
 
-var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputTextContainer"
-})(["position:relative;"]);
+function InputTextContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsx(View, {
+    position: "relative",
+    children: children
+  });
+}
 
-var _excluded$o = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var _excluded$q = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     right = _ref.right;
@@ -4235,14 +4260,13 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
     multiline = _ref.multiline,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
   });
   var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline;
   return /*#__PURE__*/jsxs(InputTextContainer, {
-    $isDisabled: disabled,
     children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
       ref: ref,
       multiline: multiline,
@@ -4279,7 +4303,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-function getCurrentInternalForcedState(_ref) {
+function getCurrentInternalForcedState$1(_ref) {
   var isDisabled = _ref.isDisabled,
     isHoveredInternal = _ref.isHoveredInternal,
     isFocusedInternal = _ref.isFocusedInternal,
@@ -4303,7 +4327,7 @@ var InputPart = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onSubmitEditing = _ref2.onSubmitEditing;
   return /*#__PURE__*/jsx(InputText, {
     ref: ref,
-    internalForceState: getCurrentInternalForcedState({
+    internalForceState: getCurrentInternalForcedState$1({
       isDisabled: disabled,
       isHoveredInternal: isHoveredInternal,
       isFocusedInternal: isFocusedInternal,
@@ -4333,7 +4357,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$n = ["value", "testID", "id", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$p = ["value", "testID", "id", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     testID = _ref.testID,
@@ -4351,7 +4375,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$n);
+    _objectWithoutProperties(_ref, _excluded$p);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -4558,7 +4582,7 @@ var PressableDateInputs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$m = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+var _excluded$o = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -4567,7 +4591,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDefaultVisible = _ref.isDefaultVisible,
     value = _ref.value,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -4644,7 +4668,7 @@ function ModalFooter(_ref3) {
   });
 }
 
-var _excluded$l = ["color", "isDisabled"];
+var _excluded$n = ["color", "isDisabled"];
 function getBackgroundColor$1(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -4662,7 +4686,7 @@ function getBackgroundColor$1(color, isDisabled) {
 function Background(_ref) {
   var color = _ref.color,
     isDisabled = _ref.isDisabled,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -4913,7 +4937,7 @@ var ModalView = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
+var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "Modal__ContentView"
 })(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
   var theme = _ref3.theme;
@@ -4945,7 +4969,7 @@ function Modal(_ref5) {
       children: /*#__PURE__*/jsxs(ModalView, {
         children: [/*#__PURE__*/jsx(Overlay, {
           onPress: onClose
-        }), /*#__PURE__*/jsx(ContentView$1, {
+        }), /*#__PURE__*/jsx(ContentView, {
           children: children
         })]
       })
@@ -4989,7 +5013,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$k = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$m = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(Modal.Header, {
@@ -5007,7 +5031,7 @@ function ModalPlatformDateTimePicker(_ref2) {
     validateButtonLabel = _ref2.validateButtonLabel,
     onClose = _ref2.onClose,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$k);
+    props = _objectWithoutProperties(_ref2, _excluded$m);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -5051,7 +5075,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$j = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+var _excluded$l = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
 var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -5065,7 +5089,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var _useState = useState(isDefaultVisible),
     _useState2 = _slicedToArray(_useState, 2),
     isPickerUIVisible = _useState2[0],
@@ -5112,7 +5136,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$i = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+var _excluded$k = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -5120,7 +5144,7 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     pickerDefaultDate = _ref.pickerDefaultDate,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -5142,14 +5166,14 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$h = ["fillMode", "returnKeyType", "value", "onSubmitEditing"];
+var _excluded$j = ["fillMode", "returnKeyType", "value", "onSubmitEditing"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$fillMode = _ref.fillMode,
     fillMode = _ref$fillMode === void 0 ? 'native' : _ref$fillMode,
     returnKeyType = _ref.returnKeyType,
     value = _ref.value,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -5252,11 +5276,11 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
 }
 
-var _excluded$g = ["isPasswordDefaultVisible", "right"];
+var _excluded$i = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -5284,7 +5308,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$f = ["returnKeyType", "autoComplete", "phoneNumberLength", "value", "onChange"];
+var _excluded$h = ["returnKeyType", "autoComplete", "phoneNumberLength", "value", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -5299,7 +5323,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     phoneNumberLength = _ref$phoneNumberLengt === void 0 ? 10 : _ref$phoneNumberLengt,
     value = _ref.value,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -5347,46 +5371,29 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
 };
-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;
-  return theme.kitt.spacing * 2;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    type = _ref2.type;
-  if (type === 'success') {
-    return theme.kitt.forms.inputTag.success.backgroundColor;
-  }
-  if (type === 'danger') {
-    return theme.kitt.forms.inputTag.danger.backgroundColor;
-  }
-  return theme.kitt.forms.inputTag["default"].backgroundColor;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.inputTag.borderRadius;
-});
-var IconContainer = /*#__PURE__*/styled(View$2).withConfig({
-  displayName: "InputTag__IconContainer"
-})(["margin-right:", "px;"], function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.spacing;
-});
-function InputTag(_ref5) {
-  var children = _ref5.children,
-    type = _ref5.type,
-    icon = _ref5.icon;
+function InputTag(_ref) {
+  var children = _ref.children,
+    type = _ref.type,
+    icon = _ref.icon;
   var typographyColor = getTypographyColor(type);
   var theme = useTheme();
-  return /*#__PURE__*/jsxs(InputTagContainer, {
-    type: type,
-    children: [icon && /*#__PURE__*/jsx(IconContainer, {
+  return /*#__PURE__*/jsxs(View, {
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    overflow: "hidden",
+    paddingX: "kitt.2",
+    backgroundColor: "kitt.forms.inputTag.".concat(type || 'default', ".backgroundColor"),
+    borderRadius: "kitt.forms.inputTag.borderRadius",
+    children: [icon ? /*#__PURE__*/jsx(View, {
+      marginRight: "kitt.1",
       children: /*#__PURE__*/jsx(TypographyIcon, {
         icon: icon,
         size: theme.kitt.forms.inputTag.iconSize,
         color: typographyColor
       })
-    }), /*#__PURE__*/jsx(Typography.Text, {
+    }) : null, /*#__PURE__*/jsx(Typography.Text, {
       base: "body-small",
       color: typographyColor,
       children: children
@@ -5561,49 +5568,22 @@ var Radio = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
-  displayName: "AnimatedContainer__StyledAnimatedView"
-})(["border-width:", "px;border-top-left-radius:", "px;border-bottom-left-radius:", "px;border-top-right-radius:", "px;border-bottom-right-radius:", "px;border-left-width:", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.forms.radioButtonGroup.item.borderWidth;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    $isFirst = _ref2.$isFirst;
-  return $isFirst ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0;
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    $isFirst = _ref3.$isFirst;
-  return $isFirst ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-    $isLast = _ref4.$isLast;
-  return $isLast ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0;
-}, function (_ref5) {
-  var theme = _ref5.theme,
-    $isLast = _ref5.$isLast;
-  return $isLast ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0;
-}, function (_ref6) {
-  var theme = _ref6.theme,
-    $isFirst = _ref6.$isFirst;
-  return $isFirst ? theme.kitt.forms.radioButtonGroup.item.borderWidth : 0;
-});
-function AnimatedContainer(_ref7) {
-  var children = _ref7.children,
-    isFocused = _ref7.isFocused,
-    isPressed = _ref7.isPressed,
-    isSelected = _ref7.isSelected,
-    isDisabled = _ref7.isDisabled,
-    isFirst = _ref7.isFirst,
-    isLast = _ref7.isLast,
-    animatedStyles = _ref7.animatedStyles;
-  return /*#__PURE__*/jsx(StyledAnimatedView, {
-    style: [animatedStyles],
-    $isFocused: isFocused,
-    $isPressed: isPressed,
-    $isSelected: isSelected,
-    $isDisabled: isDisabled,
-    $isFirst: isFirst,
-    $isLast: isLast,
+function AnimatedContainer(_ref) {
+  var children = _ref.children,
+    isFirst = _ref.isFirst,
+    isLast = _ref.isLast,
+    animatedStyles = _ref.animatedStyles;
+  var sx = useSx();
+  var styles = sx({
+    borderWidth: 'kitt.forms.radioButtonGroup.item.borderWidth',
+    borderTopLeftRadius: isFirst ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderBottomLeftRadius: isFirst ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderTopRightRadius: isLast ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderBottomRightRadius: isLast ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderLeftWidth: isFirst ? 'kitt.forms.radioButtonGroup.item.borderWidth' : 0
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [styles, animatedStyles],
     children: children
   });
 }
@@ -5808,7 +5788,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$e = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$g = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -5821,7 +5801,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$e);
+    props = _objectWithoutProperties(_ref2, _excluded$g);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -5863,13 +5843,13 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$d = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$f = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -5886,14 +5866,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$c = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$e = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   var _ref$shouldHandleBott = _ref.shouldHandleBottomNotch,
     shouldHandleBottomNotch = _ref$shouldHandleBott === void 0 ? true : _ref$shouldHandleBott,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom;
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
@@ -6109,13 +6089,13 @@ function FullscreenModalAnimation(_ref) {
   });
 }
 
-var _excluded$b = ["children", "visible", "onClose", "onExited"];
+var _excluded$d = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -6159,7 +6139,7 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$a = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+var _excluded$c = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   var _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
@@ -6170,7 +6150,7 @@ function FullscreenModalHeader(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -6283,98 +6263,57 @@ function useKittMapConfig() {
   return context;
 }
 
-var _excluded$9 = ["children"];
-var ContentView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItemContent__ContentView"
-})(["flex:1 0 0%;align-self:center;"]);
+var _excluded$b = ["children"];
 function ListItemContent(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/jsx(ContentView, _objectSpread(_objectSpread({}, rest), {}, {
+    rest = _objectWithoutProperties(_ref, _excluded$b);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    alignSelf: "center",
+    flexBasis: "0%",
+    flexGrow: 1,
+    flexShrink: 0
+  }, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$8 = ["children", "side"],
+var _excluded$a = ["children", "side"],
   _excluded2$2 = ["children", "align"];
-var SideContainerView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItemSideContent__SideContainerView"
-})(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
-  var theme = _ref.theme,
-    side = _ref.side;
-  return side === 'right' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    side = _ref2.side;
-  return side === 'left' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
-});
-
 // Handles the vertical alignment of the side elements of the list item
-function ListItemSideContainer(_ref3) {
-  var children = _ref3.children,
-    _ref3$side = _ref3.side,
-    side = _ref3$side === void 0 ? 'left' : _ref3$side,
-    rest = _objectWithoutProperties(_ref3, _excluded$8);
-  return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
-    side: side
+function ListItemSideContainer(_ref) {
+  var children = _ref.children,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'left' : _ref$side,
+    rest = _objectWithoutProperties(_ref, _excluded$a);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    flexDirection: "row",
+    marginLeft: side === 'right' ? 'kitt.2' : undefined,
+    marginRight: side === 'left' ? 'kitt.2' : undefined
   }, rest), {}, {
     children: children
   }));
 }
-var SideContentView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItemSideContent__SideContentView"
-})(["align-self:", ";"], function (_ref4) {
-  var align = _ref4.align;
-  return align;
-});
-function ListItemSideContent(_ref5) {
-  var children = _ref5.children,
-    _ref5$align = _ref5.align,
-    align = _ref5$align === void 0 ? 'auto' : _ref5$align,
-    rest = _objectWithoutProperties(_ref5, _excluded2$2);
-  return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
-    align: align
+function ListItemSideContent(_ref2) {
+  var children = _ref2.children,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? 'auto' : _ref2$align,
+    rest = _objectWithoutProperties(_ref2, _excluded2$2);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    alignSelf: align
   }, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$7 = ["children", "withPadding", "borders", "left", "right", "onPress"];
-var ContainerView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItem__ContainerView"
-})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
-  var withPadding = _ref.withPadding,
-    theme = _ref.theme;
-  return withPadding ? theme.kitt.listItem.padding : 0;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    borders = _ref2.borders;
-  var borderWidth = theme.kitt.listItem.borderWidth;
-  if (borders === 'top') {
-    return "border-top-width: ".concat(borderWidth, "px");
-  }
-  if (borders === 'bottom') {
-    return "border-bottom-width: ".concat(borderWidth, "px");
-  }
-  if (borders === 'both') {
-    return css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
-  }
-  return 'border: none';
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.listItem.borderColor;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.colors.uiBackgroundLight;
-});
-function ListItem(_ref5) {
-  var children = _ref5.children,
-    withPadding = _ref5.withPadding,
-    borders = _ref5.borders,
-    left = _ref5.left,
-    right = _ref5.right,
-    onPress = _ref5.onPress,
-    rest = _objectWithoutProperties(_ref5, _excluded$7);
+var _excluded$9 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+function ListItem(_ref) {
+  var children = _ref.children,
+    withPadding = _ref.withPadding,
+    borders = _ref.borders,
+    left = _ref.left,
+    right = _ref.right,
+    onPress = _ref.onPress,
+    rest = _objectWithoutProperties(_ref, _excluded$9);
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -6382,9 +6321,14 @@ function ListItem(_ref5) {
   }, rest) : undefined;
   var containerProps = onPress ? undefined : rest;
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread(_objectSpread({
-      withPadding: withPadding,
-      borders: borders
+    children: /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
+      flexDirection: "row",
+      paddingX: withPadding ? 'kitt.listItem.horizontalPadding' : undefined,
+      paddingY: withPadding ? 'kitt.listItem.verticalPadding' : undefined,
+      borderColor: "kitt.listItem.borderColor",
+      backgroundColor: "kitt.uiBackgroundLight",
+      borderTopWidth: borders === 'top' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
+      borderBottomWidth: borders === 'bottom' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined
     }, containerProps), {}, {
       children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
         side: "left",
@@ -6912,6 +6856,71 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           'subtle-dark': theme.button['subtle-dark'],
           disabled: theme.button.disabled
         },
+        choices: {
+          item: {
+            "default": {
+              backgroundColor: theme.choices.item.backgroundColor["default"]
+            },
+            disabled: {
+              backgroundColor: theme.choices.item.backgroundColor.disabled,
+              borderColor: theme.choices.item.disabled.border.color
+            },
+            selected: {
+              backgroundColor: theme.choices.item.backgroundColor.selected
+            },
+            pressed: {
+              backgroundColor: theme.choices.item.backgroundColor.pressed
+            },
+            hover: {
+              backgroundColor: theme.choices.item.backgroundColor.hover
+            },
+            hoverWhenSelected: {
+              backgroundColor: theme.choices.item.backgroundColor.hoverWhenSelected
+            }
+          }
+        },
+        tag: {
+          primary: {
+            fill: {
+              backgroundColor: theme.tag.primary.fill.backgroundColor,
+              borderColor: theme.tag.primary.fill.borderColor
+            },
+            outline: {
+              backgroundColor: theme.tag.primary.outline.backgroundColor,
+              borderColor: theme.tag.primary.outline.borderColor
+            }
+          },
+          "default": {
+            fill: {
+              backgroundColor: theme.tag["default"].fill.backgroundColor,
+              borderColor: theme.tag["default"].fill.borderColor
+            },
+            outline: {
+              backgroundColor: theme.tag["default"].outline.backgroundColor,
+              borderColor: theme.tag["default"].outline.borderColor
+            }
+          },
+          danger: {
+            fill: {
+              backgroundColor: theme.tag.danger.fill.backgroundColor,
+              borderColor: theme.tag.danger.fill.borderColor
+            },
+            outline: {
+              backgroundColor: theme.tag.danger.outline.backgroundColor,
+              borderColor: theme.tag.danger.outline.borderColor
+            }
+          },
+          warn: {
+            fill: {
+              backgroundColor: theme.tag.warn.fill.backgroundColor,
+              borderColor: theme.tag.warn.fill.borderColor
+            },
+            outline: {
+              backgroundColor: theme.tag.warn.outline.backgroundColor,
+              borderColor: theme.tag.warn.outline.borderColor
+            }
+          }
+        },
         tooltip: {
           backgroundColor: theme.tooltip.backgroundColor
         },
@@ -6935,6 +6944,17 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           input: {
             states: theme.forms.input.states
           },
+          inputTag: {
+            danger: {
+              backgroundColor: theme.forms.inputTag.danger.backgroundColor
+            },
+            "default": {
+              backgroundColor: theme.forms.inputTag["default"].backgroundColor
+            },
+            success: {
+              backgroundColor: theme.forms.inputTag.success.backgroundColor
+            }
+          },
           radioButtonGroup: {
             item: {
               borderColor: theme.forms.radioButtonGroup.item.borderColor,
@@ -7033,6 +7053,49 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           dark: {
             backgroundColor: theme.highlight.dark.backgroundColor
           }
+        },
+        verticalSteps: {
+          active: {
+            icon: {
+              backgroundColor: theme.verticalSteps.active.icon.backgroundColor,
+              textColor: theme.verticalSteps.active.icon.textColor
+            }
+          },
+          done: {
+            icon: {
+              backgroundColor: theme.verticalSteps.done.icon.backgroundColor,
+              textColor: theme.verticalSteps.done.icon.textColor
+            }
+          },
+          "default": {
+            icon: {
+              backgroundColor: theme.verticalSteps["default"].icon.backgroundColor,
+              textColor: theme.verticalSteps["default"].icon.textColor
+            }
+          }
+        },
+        listItem: {
+          borderColor: theme.listItem.borderColor
+        },
+        picker: {
+          ios: {
+            item: {
+              selected: {
+                color: theme.picker.ios.selected.color
+              }
+            }
+          },
+          android: {
+            item: {
+              "default": {
+                backgroundColor: theme.picker.android["default"].backgroundColor
+              },
+              selected: {
+                color: theme.picker.android.selected.color,
+                backgroundColor: theme.picker.android.selected.backgroundColor
+              }
+            }
+          }
         }
       }),
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.colors
@@ -7067,6 +7130,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         cardModal: {
           borderRadius: theme.cardModal.borderRadius
         },
+        choices: {
+          item: {
+            borderRadius: theme.choices.item.borderRadius
+          }
+        },
         dialogModal: {
           borderRadius: theme.dialogModal.borderRadius
         },
@@ -7074,6 +7142,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           input: {
             borderRadius: theme.forms.input.borderRadius
           },
+          inputTag: {
+            borderRadius: theme.forms.inputTag.borderRadius
+          },
           radioButtonGroup: {
             item: {
               borderRadius: theme.forms.radioButtonGroup.item.borderRadius
@@ -7095,6 +7166,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderRadius: theme.iconButton.borderRadius
         },
+        tag: {
+          borderRadius: theme.tag.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -7206,6 +7280,13 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           borderWidth: theme.button.borderWidth
         },
+        choices: {
+          item: {
+            disabled: {
+              borderWidth: theme.choices.item.disabled.border.width
+            }
+          }
+        },
         iconButton: {
           borderWidth: theme.iconButton.borderWidth
         },
@@ -7232,9 +7313,46 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           footer: {
             borderWidth: theme.cardModal.footer.borderWidth
           }
-        }
-      },
-      app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.borderWidths
+        },
+        listItem: {
+          borderWidth: theme.listItem.borderWidth
+        },
+        tag: {
+          primary: {
+            fill: {
+              borderWidth: theme.tag.primary.fill.borderWidth
+            },
+            outline: {
+              borderWidth: theme.tag.primary.outline.borderWidth
+            }
+          },
+          "default": {
+            fill: {
+              borderWidth: theme.tag["default"].fill.borderWidth
+            },
+            outline: {
+              borderWidth: theme.tag["default"].outline.borderWidth
+            }
+          },
+          danger: {
+            fill: {
+              borderWidth: theme.tag.danger.fill.borderWidth
+            },
+            outline: {
+              borderWidth: theme.tag.danger.outline.borderWidth
+            }
+          },
+          warn: {
+            fill: {
+              borderWidth: theme.tag.warn.fill.borderWidth
+            },
+            outline: {
+              borderWidth: theme.tag.warn.outline.borderWidth
+            }
+          }
+        }
+      },
+      app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.borderWidths
     },
     sizes: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, spaces.positive), spaces.negative), overridenNativeBaseSizeandSpaceScale), {}, {
       kitt: {
@@ -7303,6 +7421,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           },
           textArea: {
             minHeight: theme.forms.textArea.minHeight
+          },
+          timePicker: {
+            minWidth: theme.forms.timePicker.minWidth
           }
         },
         iconButton: {
@@ -7315,6 +7436,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.fullscreenModal.header.height
           }
         },
+        pageLoader: {
+          size: theme.pageLoader.size
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -7334,6 +7458,16 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               size: theme.skeleton.shape.square.size
             }
           }
+        },
+        picker: {
+          ios: {
+            "default": {
+              height: theme.picker.ios["default"].height
+            },
+            landscape: {
+              height: theme.picker.ios.landscape.height
+            }
+          }
         }
       },
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.sizes
@@ -7379,10 +7513,26 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         highlight: {
           padding: theme.highlight.padding
         },
+        listItem: {
+          verticalPadding: theme.listItem.verticalPadding,
+          horizontalPadding: theme.listItem.horizontalPadding
+        },
+        tag: {
+          verticalPadding: theme.tag.verticalPadding,
+          horizontalPadding: theme.tag.horizontalPadding
+        },
         tooltip: {
           horizontalPadding: theme.tooltip.horizontalPadding,
           verticalPadding: theme.tooltip.verticalPadding,
           floatingPadding: theme.tooltip.floatingPadding
+        },
+        picker: {
+          android: {
+            item: {
+              verticalPadding: theme.picker.android.verticalPadding,
+              horizontalPadding: theme.picker.android.horizontalPadding
+            }
+          }
         }
       },
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.space
@@ -7952,7 +8102,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$6 = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+var _excluded$8 = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
 function SimpleContainer(_ref) {
   var children = _ref.children;
   return children;
@@ -7966,7 +8116,7 @@ function NavigationModalBehaviour(_ref2) {
     onEnter = _ref2.onEnter,
     onExit = _ref2.onExit,
     onClose = _ref2.onClose,
-    props = _objectWithoutProperties(_ref2, _excluded$6);
+    props = _objectWithoutProperties(_ref2, _excluded$8);
   var AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -8234,47 +8384,46 @@ function AnimatedFilledCircle() {
   });
 }
 
-var PageLoaderContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "PageLoader__PageLoaderContainer"
-})(["transform:scale(-1) rotate(90deg);position:relative;width:", "px;height:", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.pageLoader.size;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.pageLoader.size;
-});
 function PageLoader() {
-  return /*#__PURE__*/jsxs(PageLoaderContainer, {
+  var sharedTransformStyle = {
+    style: {
+      /* Needed to make the animation starting from the top of the circles */
+      transform: [{
+        rotate: '90deg'
+      }, {
+        scale: -1
+      }]
+    }
+  };
+  return /*#__PURE__*/jsxs(View, {
+    position: "relative",
+    height: "kitt.pageLoader.size",
+    width: "kitt.pageLoader.size",
+    _ios: sharedTransformStyle,
+    _android: sharedTransformStyle,
     children: [/*#__PURE__*/jsx(AnimatedBackgroundCircle, {}), /*#__PURE__*/jsx(AnimatedFilledCircle, {})]
   });
 }
 
-var ContainerPressable = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "PickerItem__ContainerPressable"
-})(["padding:", ";background-color:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.picker.android.padding;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    $isSelected = _ref2.$isSelected;
-  return $isSelected ? theme.kitt.picker.android.selected.backgroundColor : theme.kitt.picker.android["default"].backgroundColor;
-});
-
 // This item is for Android only, iOS uses its own implementation and web is not supported yet
-function PickerItem(_ref3) {
-  var label = _ref3.label,
-    value = _ref3.value,
-    isSelected = _ref3.isSelected,
-    onPress = _ref3.onPress;
-  return /*#__PURE__*/jsx(ContainerPressable, {
+function PickerItem(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    isSelected = _ref.isSelected,
+    onPress = _ref.onPress;
+  return /*#__PURE__*/jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityState: {
       selected: isSelected
     },
-    $isSelected: isSelected,
-    onPress: onPress ? function () {
-      return onPress(value);
-    } : undefined,
+    backgroundColor: isSelected ? 'kitt.picker.android.item.selected.backgroundColor' : 'kitt.picker.android.item.default.backgroundColor',
+    paddingX: "kitt.picker.android.horizontalPadding",
+    paddingY: "kitt.picker.android.verticalPadding",
+    onPress: function handelPress() {
+      if (onPress) {
+        onPress(value);
+      }
+    },
     children: /*#__PURE__*/jsx(Typography.Text, {
       base: "body",
       color: isSelected ? 'white' : undefined,
@@ -8292,69 +8441,86 @@ function Picker(_ref) {
     testID = _ref.testID,
     onValueSelected = _ref.onValueSelected,
     onClose = _ref.onClose;
+  var sx = useSx();
+
   // Max height is based on base Modal sizes (which are not themified): padding (4*20*2) + footer (58) + header (58) + default iOS picker height (216)
   var _useMediaQuery = useMediaQuery({
       maxHeight: 492
     }),
     _useMediaQuery2 = _slicedToArray(_useMediaQuery, 1),
     isMatchingMaxHeight = _useMediaQuery2[0];
+  var iosItemStyle = sx({
+    fontSize: 'baseAndSmall.body',
+    lineHeight: 'baseAndSmall.body',
+    fontFamily: 'bodies.regular',
+    color: 'kitt.typography.black-light',
+    // As it is displayed in a modal, we must hard code an height to ensure that the picker doesn't bleed out of it
+    // We can't set a percentage as it will be computed based on the page height
+    height: isMatchingMaxHeight ? 'kitt.picker.ios.landscape.height' : 'kitt.picker.ios.default.height'
+  });
+  var getIosTextStyle = function (isSelected) {
+    return sx({
+      color: isSelected ? 'kitt.picker.ios.selected.color' : undefined
+    });
+  };
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  return /*#__PURE__*/jsxs(Modal, {
+  return /*#__PURE__*/jsx(CardModal.ModalBehaviour, {
     visible: isVisible,
     onClose: onClose,
-    children: [/*#__PURE__*/jsx(Modal.Header, {
-      children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "body",
-        variant: "bold",
-        children: title
-      })
-    }), Platform.OS === 'ios' ? /*#__PURE__*/jsx(Picker$1, {
-      testID: testID,
-      selectedValue: value
-      // As it is displayed in a modal, we must hard code an height to ensure that the picker doesn't bleed out of it
-      // We can't set a percentage as it will be computed based on the page height
-      ,
-      itemStyle: _objectSpread(_objectSpread({}, theme.picker.ios["default"]), {}, {
-        height: isMatchingMaxHeight ? theme.picker.ios.landscape.height : theme.picker.ios["default"].height
-      }),
-      onValueChange: function onValueChange(itemValue) {
-        return setValue(itemValue);
-      },
-      children: React.Children.map(children, function (child) {
-        var item = child;
+    children: /*#__PURE__*/jsxs(CardModal, {
+      children: [/*#__PURE__*/jsx(CardModal.Header, {
+        right: /*#__PURE__*/jsx(IconButton, {
+          icon: /*#__PURE__*/jsx(XIcon, {}),
+          onPress: onClose
+        }),
+        children: /*#__PURE__*/jsx(Typography.Text, {
+          base: "body",
+          variant: "bold",
+          children: title
+        })
+      }), Platform.OS === 'ios' ? /*#__PURE__*/jsx(Picker$1, {
+        testID: testID,
+        selectedValue: value,
+        itemStyle: iosItemStyle,
+        onValueChange: function onValueChange(itemValue) {
+          return setValue(itemValue);
+        },
+        children: React.Children.map(children, function (child) {
+          var item = child;
 
-        // iOS Picker doesn't support a custom Item component, we need to override its props manually for the selected one
-        return /*#__PURE__*/cloneElement(item, {
-          color: item.props.value === value ? theme.picker.ios.selected.color : undefined
-        });
-      })
-    }) : /*#__PURE__*/jsx(ScrollView$2, {
-      testID: testID,
-      children: React.Children.map(children, function (child) {
-        var item = child;
-        return /*#__PURE__*/cloneElement(item, {
-          onPress: function onPress(newValue) {
-            return setValue(newValue);
+          // iOS Picker doesn't support a custom Item component, we need to override its props manually for the selected one
+          return /*#__PURE__*/cloneElement(item, {
+            color: getIosTextStyle(item.props.value === value).color
+          });
+        })
+      }) : /*#__PURE__*/jsx(ScrollView$2, {
+        testID: testID,
+        children: React.Children.map(children, function (child) {
+          var item = child;
+          return /*#__PURE__*/cloneElement(item, {
+            onPress: function onPress(newValue) {
+              return setValue(newValue);
+            },
+            isSelected: item.props.value === value
+          });
+        })
+      }), /*#__PURE__*/jsx(CardModal.Footer, {
+        children: /*#__PURE__*/jsx(Button, {
+          stretch: true,
+          type: "primary",
+          onPress: function handleValueSelected() {
+            onValueSelected(value);
+            onClose();
           },
-          isSelected: item.props.value === value
-        });
-      })
-    }), /*#__PURE__*/jsx(Modal.Footer, {
-      children: /*#__PURE__*/jsx(Button, {
-        stretch: true,
-        type: "primary",
-        onPress: function handleValueSelected() {
-          onValueSelected(value);
-          onClose();
-        },
-        children: validateButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
-          id: "kitt-universal.Picker.validate"
+          children: validateButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+            id: "kitt-universal.Picker.validate"
+          })
         })
-      })
-    })]
+      })]
+    })
   });
 }
 Picker.Item = PickerItem;
@@ -8412,19 +8578,10 @@ function SegmentedProgressBar(_ref) {
   });
 }
 
-var Container$2 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "SkeletonContent__Container"
-})(["background-color:", ";border-color:", ";height:100%;width:100%;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.skeleton.backgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.skeleton.flareColor;
-});
 var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
-function SkeletonContent(_ref3) {
-  var isLoading = _ref3.isLoading,
-    width = _ref3.width;
+function SkeletonContent(_ref) {
+  var isLoading = _ref.isLoading,
+    width = _ref.width;
   var theme = useTheme();
   var sharedX = useSharedValue(0);
   useEffect(function () {
@@ -8450,11 +8607,15 @@ function SkeletonContent(_ref3) {
     };
     _f.asString = "function _f(){const{interpolate,sharedX,width}=jsThis._closure;{return{transform:[{translateX:interpolate(sharedX.value,[0,1],[-width,width])}]};}}";
     _f.__workletHash = 1670955855244;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (42:47)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (36:47)";
     _f.__optimalization = 3;
     return _f;
   }());
-  return /*#__PURE__*/jsx(Container$2, {
+  return /*#__PURE__*/jsx(View, {
+    height: "100%",
+    width: "100%",
+    backgroundColor: "kitt.skeleton.backgroundColor",
+    borderColor: "kitt.skeleton.flareColor",
     children: /*#__PURE__*/jsx(AnimatedLinearGradient, {
       colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
       locations: [0.1, 0.5, 0.9],
@@ -8471,7 +8632,7 @@ function SkeletonContent(_ref3) {
   });
 }
 
-var _excluded$5 = ["isLoading", "style"],
+var _excluded$7 = ["isLoading", "style"],
   _excluded2$1 = ["size"],
   _excluded3$1 = ["size"],
   _excluded4 = ["size"];
@@ -8479,7 +8640,7 @@ function Skeleton(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -8674,7 +8835,7 @@ function getShouldDisplay2x() {
   return currentDevicePixelRatio > 1;
 }
 
-var _excluded$4 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
+var _excluded$6 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
 var mapBoxMaxPictureWidth = 1280;
 
 // Mapbox requestable width for image is between 1 - 1280px
@@ -8692,7 +8853,7 @@ function StaticMap(_ref) {
     center = _ref.center,
     onLoaded = _ref.onLoaded,
     onError = _ref.onError,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var _useState = useState(getPictureWidth(width)),
     _useState2 = _slicedToArray(_useState, 2),
     currentWidth = _useState2[0],
@@ -8782,21 +8943,17 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
-var Flex = /*#__PURE__*/styled.View.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
-    return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
-  }
-}).withConfig({
-  displayName: "Flex"
-})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], function (_ref) {
-  var direction = _ref.direction;
-  return direction;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    _ref2$padding = _ref2.padding,
-    padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
-  return padding * theme.kitt.spacing;
-});
+var _excluded$5 = ["direction", "wrap"];
+function Flex(_ref) {
+  var direction = _ref.direction,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+    flexDirection: direction,
+    flexWrap: wrap
+  }));
+}
 
 var storyPadding = 'kitt.4';
 
@@ -8931,14 +9088,14 @@ function Story(_ref) {
   });
 }
 
-var _excluded$3 = ["title", "children", "internalIsDemoSection"],
+var _excluded$4 = ["title", "children", "internalIsDemoSection"],
   _excluded2 = ["title", "children"],
   _excluded3 = ["title", "children"];
 function StorySection(_ref) {
   var title = _ref.title,
     children = _ref.children,
     internalIsDemoSection = _ref.internalIsDemoSection,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
   return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
     marginBottom: "kitt.8"
@@ -9066,30 +9223,6 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var Container$1 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Tag__Container"
-})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
-  var theme = _ref.theme,
-    type = _ref.type,
-    variant = _ref.variant;
-  return theme.kitt.tag[type][variant].backgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    type = _ref2.type,
-    variant = _ref2.variant;
-  return theme.kitt.tag[type][variant].borderWidth;
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    type = _ref3.type,
-    variant = _ref3.variant;
-  return theme.kitt.tag[type][variant].borderColor;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.tag.padding;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.tag.borderRadius;
-});
 var getLabelColor = function (type, variant) {
   switch (type) {
     case 'danger':
@@ -9114,15 +9247,20 @@ var getLabelColor = function (type, variant) {
       }
   }
 };
-function Tag(_ref6) {
-  var label = _ref6.label,
-    _ref6$type = _ref6.type,
-    type = _ref6$type === void 0 ? 'default' : _ref6$type,
-    _ref6$variant = _ref6.variant,
-    variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
-  return /*#__PURE__*/jsx(Container$1, {
-    type: type,
-    variant: variant,
+function Tag(_ref) {
+  var label = _ref.label,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
+  return /*#__PURE__*/jsx(View, {
+    alignSelf: "flex-start",
+    borderRadius: "kitt.tag.borderRadius",
+    paddingX: "kitt.tag.horizontalPadding",
+    paddingY: "kitt.tag.verticalPadding",
+    backgroundColor: "kitt.tag.".concat(type, ".").concat(variant, ".backgroundColor"),
+    borderColor: "kitt.tag.".concat(type, ".").concat(variant, ".borderColor"),
+    borderWidth: "kitt.tag.".concat(type, ".").concat(variant, ".borderWidth"),
     children: /*#__PURE__*/jsx(Typography.Text, {
       base: "body-xsmall",
       color: getLabelColor(type, variant),
@@ -9131,194 +9269,200 @@ function Tag(_ref6) {
   });
 }
 
-/** @deprecated use native-base instead for SSR compatibility */
-var getTypographyTypeConfigKey = function (theme) {
-  var isMediumOrAbove = theme.responsive.matchWindowSize({
-    minWidth: KittBreakpoints.MEDIUM
-  });
-  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
-};
-/** @deprecated this mixin is not SSR compatible */
-var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
-  var theme = _ref.theme,
-    $state = _ref.$state;
-  return $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.input.borderWidth;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.input.borderRadius;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-    $state = _ref4.$state;
-  return theme.kitt.forms.input.states[$state].borderColor;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize, "px");
-}, function (_ref6) {
-  var theme = _ref6.theme,
-    $state = _ref6.$state;
-  return theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states["default"].color;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return Platform.OS === 'web' ? theme.kitt.typography.types.bodies.fontFamily.web.regular : theme.kitt.typography.types.bodies.fontFamily["native"].regular;
-});
-
-function Title(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/jsx(Modal.Header, {
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body",
-      variant: "bold",
-      children: children
-    })
-  });
-}
-function ModalDateTimePicker(_ref2) {
-  var title = _ref2.title,
-    visible = _ref2.visible,
-    value = _ref2.value,
-    validateButtonLabel = _ref2.validateButtonLabel,
-    onChange = _ref2.onChange,
-    onClose = _ref2.onClose;
+function ModalDateTimePicker(_ref) {
+  var title = _ref.title,
+    visible = _ref.visible,
+    value = _ref.value,
+    validateButtonLabel = _ref.validateButtonLabel,
+    testID = _ref.testID,
+    pickerTestID = _ref.pickerTestID,
+    onChange = _ref.onChange,
+    onClose = _ref.onClose;
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
     setCurrentValue = _useState2[1];
 
   // Prevent unsynced value between the modal and its parent state
-
-  return /*#__PURE__*/jsx(Modal, {
+  var handleClose = function () {
+    setCurrentValue(value);
+    onClose();
+  };
+  var handleChange = function (nextDate) {
+    if (nextDate) setCurrentValue(nextDate);
+  };
+  var buttonContent = validateButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+    id: "kitt-universal.ModalDateTimePicker.confirm"
+  });
+  return /*#__PURE__*/jsx(CardModal.ModalBehaviour, {
     visible: Boolean(visible),
-    onClose: function handleClose() {
-      setCurrentValue(value);
-      onClose();
-    },
-    children: visible ? /*#__PURE__*/jsxs(Fragment, {
-      children: [title ? /*#__PURE__*/jsx(Title, {
-        children: title
-      }) : null, /*#__PURE__*/jsx(Modal.Body, {
+    onClose: handleClose,
+    children: /*#__PURE__*/jsxs(CardModal, {
+      testID: testID,
+      children: [title ? /*#__PURE__*/jsx(CardModal.Header, {
+        title: title,
+        right: /*#__PURE__*/jsx(IconButton, {
+          testID: "timePicker.ModalDateTimePicker.closeButton",
+          icon: /*#__PURE__*/jsx(XIcon, {}),
+          onPress: handleClose
+        })
+      }) : null, /*#__PURE__*/jsx(CardModal.Body, {
         children: /*#__PURE__*/jsx(DateTimePicker, {
           is24Hour: true,
-          testID: "timePicker.ModalDateTimePicker.dateTimeNativePicker",
+          testID: pickerTestID,
           value: currentValue,
           mode: "time",
           display: Platform.OS === 'ios' ? 'spinner' : 'default',
-          onChange: function (_event, date) {
-            return setCurrentValue(function (prev) {
-              return date || prev;
-            });
+          onChange: function (event, date) {
+            return handleChange(date);
           }
         })
-      }), /*#__PURE__*/jsx(Modal.Footer, {
+      }), /*#__PURE__*/jsx(CardModal.Footer, {
         children: /*#__PURE__*/jsx(Button, {
           stretch: true,
+          testID: "timePicker.ModalDateTimePicker.submitButton",
           type: "primary",
           onPress: function handleSubmit() {
             onChange(currentValue);
           },
-          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
-            children: validateButtonLabel
-          }) : /*#__PURE__*/jsx(FormattedMessage, {
-            id: "kitt-universal.ModalDateTimePicker.confirm"
-          })
+          children: buttonContent
         })
       })]
-    }) : null
+    })
   });
 }
 
-var timePickerPlaceholder = '--:--';
-var formatNumberToTimeString = function (time) {
+function formatNumberToTimeString(time) {
   return "".concat(String(time).padStart(2, '0'));
-};
-var formatDateToTimeString = function (date) {
+}
+function formatDateToTimeString(date) {
   return "".concat(formatNumberToTimeString(date.getHours()), ":").concat(formatNumberToTimeString(date.getMinutes()));
-};
-var useTimePicker = function (value, onChange, onBlur, disabled, defaultValue, isDefaultVisible) {
-  var _useState = useState(Boolean(isDefaultVisible)),
-    _useState2 = _slicedToArray(_useState, 2),
-    isTimePickerModalVisible = _useState2[0],
-    setIsTimePickerModalVisible = _useState2[1];
-  var todayAtNoon = useMemo(function () {
-    var now = new Date(2000, 0, 1, 12);
-    return new Date(now.getFullYear(), now.getMonth(), now.getDay(), 12);
-  }, []);
-  var defaultDate = defaultValue || todayAtNoon;
-  var dateTimePickerValue = value || defaultDate;
-  var displayedValue = value === null ? timePickerPlaceholder : formatDateToTimeString(dateTimePickerValue);
-  var timePickerState = isTimePickerModalVisible ? 'focus' : 'default';
-  return {
-    dateTimePickerValue: dateTimePickerValue,
-    displayedValue: displayedValue,
-    timePickerState: timePickerState,
-    isTimePickerModalVisible: isTimePickerModalVisible,
-    handleInputPress: function handleInputPress() {
-      if (disabled) {
-        return;
-      }
-      setIsTimePickerModalVisible(true);
-    },
-    handleTimeChange: function handleTimeChange(date) {
-      setIsTimePickerModalVisible(false);
-      onChange(date || defaultDate);
-      onBlur();
-    },
-    handleModalClose: function handleModalClose() {
-      return setIsTimePickerModalVisible(false);
+}
+
+function getCurrentInternalForcedState(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isHoveredInternal = _ref.isHoveredInternal,
+    isFocusedInternal = _ref.isFocusedInternal,
+    isPressedInternal = _ref.isPressedInternal;
+  if (isDisabled) return 'disabled';
+  if (isHoveredInternal) return 'hover';
+  if (isFocusedInternal) return 'focus';
+  if (isPressedInternal) return 'hover';
+  return 'default';
+}
+
+function TimePickerPressable(_ref) {
+  var testID = _ref.testID,
+    disabled = _ref.disabled,
+    stretch = _ref.stretch,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    isHoveredInternal = _ref.isHoveredInternal,
+    isFocusedInternal = _ref.isFocusedInternal,
+    isPressedInternal = _ref.isPressedInternal,
+    onPress = _ref.onPress;
+  return /*#__PURE__*/jsx(Pressable, {
+    testID: testID,
+    disabled: disabled,
+    accessibilityRole: "button",
+    width: createResponsiveStyleFromProp(stretch, '100%', 'kitt.forms.timePicker.minWidth'),
+    onPress: onPress,
+    children: function children(_ref2) {
+      var isHovered = _ref2.isHovered,
+        isFocused = _ref2.isFocused,
+        isPressed = _ref2.isPressed;
+      return /*#__PURE__*/jsxs(View, {
+        position: "relative",
+        children: [/*#__PURE__*/jsx(InputText, {
+          internalForceState: getCurrentInternalForcedState({
+            isDisabled: disabled,
+            isHoveredInternal: isHovered || isHoveredInternal,
+            isFocusedInternal: isFocused || isFocusedInternal,
+            isPressedInternal: isPressed || isPressedInternal
+          }),
+          value: value ? formatDateToTimeString(value) : undefined,
+          placeholder: placeholder,
+          disabled: disabled,
+          textAlign: "center"
+        }), /*#__PURE__*/jsx(View, {
+          position: "absolute",
+          top: "0",
+          left: "0",
+          height: "100%",
+          width: "100%"
+        })]
+      });
     }
-  };
-};
+  });
+}
 
-var Container = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "TimePicker__Container"
-})(["", " width:100px;height:40px;justify-content:center;align-items:center;"], styledTextInputMixin);
 function TimePicker(_ref) {
   var title = _ref.title,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'default' : _ref$state,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    forceDefaultValue = _ref.forceDefaultValue,
+    stretch = _ref.stretch,
     value = _ref.value,
     validateButtonLabel = _ref.validateButtonLabel,
     isDefaultVisible = _ref.isDefaultVisible,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '--:--' : _ref$placeholder,
+    testID = _ref.testID,
+    modalTestID = _ref.modalTestID,
+    _ref$pickerTestID = _ref.pickerTestID,
+    pickerTestID = _ref$pickerTestID === void 0 ? 'timePicker.ModalDateTimePicker.dateTimeNativePicker' : _ref$pickerTestID,
+    isHoveredInternal = _ref.isHoveredInternal,
+    isFocusedInternal = _ref.isFocusedInternal,
+    isPressedInternal = _ref.isPressedInternal,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur;
-  var _useTimePicker = useTimePicker(value || null, onChange, onBlur, disabled, forceDefaultValue, isDefaultVisible),
-    dateTimePickerValue = _useTimePicker.dateTimePickerValue,
-    displayedValue = _useTimePicker.displayedValue,
-    timePickerState = _useTimePicker.timePickerState,
-    handleInputPress = _useTimePicker.handleInputPress,
-    handleModalClose = _useTimePicker.handleModalClose,
-    handleTimeChange = _useTimePicker.handleTimeChange,
-    isTimePickerModalVisible = _useTimePicker.isTimePickerModalVisible;
-  return /*#__PURE__*/jsxs(Container, {
-    $state: timePickerState === 'default' ? state : timePickerState,
-    accessibilityRole: "button",
-    onPress: handleInputPress,
-    children: [/*#__PURE__*/jsx(Typography.Text, {
-      base: "body",
-      color: displayedValue === timePickerPlaceholder ? 'black-light' : 'black',
-      children: displayedValue
-    }), Platform.OS === 'android' && isTimePickerModalVisible ? /*#__PURE__*/jsx(DateTimePicker, {
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentValue = _useState2[0],
+    setCurrentValue = _useState2[1];
+  var _useState3 = useState(isDefaultVisible),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPickerVisible = _useState4[0],
+    setIsPickerVisible = _useState4[1];
+  var handleChange = function (nextDate) {
+    setCurrentValue(nextDate);
+    setIsPickerVisible(false);
+    if (onChange) onChange(nextDate);
+    if (onBlur) onBlur();
+  };
+  var pickerValue = currentValue || new Date();
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TimePickerPressable, {
+      testID: testID,
+      disabled: disabled,
+      stretch: stretch,
+      value: currentValue,
+      placeholder: placeholder,
+      isHoveredInternal: isHoveredInternal,
+      isFocusedInternal: isFocusedInternal,
+      isPressedInternal: isPressedInternal,
+      onPress: function handlePress() {
+        setIsPickerVisible(true);
+      }
+    }), Platform.OS === 'android' && isPickerVisible ? /*#__PURE__*/jsx(DateTimePicker, {
       is24Hour: true,
-      testID: "timePicker.TimePicker.dateTimeNativePicker",
-      value: dateTimePickerValue,
+      testID: pickerTestID,
+      value: pickerValue,
       mode: "time",
       display: "default",
-      onChange: function (_event, date) {
-        return handleTimeChange(date);
+      onChange: function (event, date) {
+        return handleChange(date);
       }
     }) : null, Platform.OS !== 'android' ? /*#__PURE__*/jsx(ModalDateTimePicker, {
+      visible: isPickerVisible,
       title: title,
-      visible: isTimePickerModalVisible,
-      value: dateTimePickerValue,
+      testID: modalTestID,
+      pickerTestID: pickerTestID,
+      value: pickerValue,
       validateButtonLabel: validateButtonLabel,
-      onChange: handleTimeChange,
-      onClose: handleModalClose
+      onChange: handleChange,
+      onClose: function handleClose() {
+        setIsPickerVisible(false);
+      }
     }) : null]
   });
 }
@@ -9652,11 +9796,11 @@ function TypographyEmoji(_ref3) {
   });
 }
 
-var _excluded$2 = ["as", "children"];
+var _excluded$3 = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   if (Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
   return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
@@ -9664,7 +9808,7 @@ function StyleWebWrapper(_ref) {
   }));
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
+var _excluded$2 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
 // overrides :global(a) in Link styles.module.css
 var _exp = function () {
   return function (_ref) {
@@ -9694,7 +9838,7 @@ function TypographyLink(_ref3) {
     href = _ref3.href,
     hrefAttrs = _ref3.hrefAttrs,
     onPress = _ref3.onPress,
-    otherProps = _objectWithoutProperties(_ref3, _excluded$1);
+    otherProps = _objectWithoutProperties(_ref3, _excluded$2);
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: TypographyLinkWebWrapper,
     $hasNoUnderline: noUnderline,
@@ -9807,7 +9951,7 @@ var KittThemeDecorator = makeDecorator({
   }
 });
 
-var _excluded = ["children"];
+var _excluded$1 = ["children"];
 /**
  * Display children if match window size options
  *
@@ -9815,7 +9959,7 @@ var _excluded = ["children"];
  */
 function MatchWindowSize(_ref) {
   var children = _ref.children,
-    matchWindowSizeOptions = _objectWithoutProperties(_ref, _excluded);
+    matchWindowSizeOptions = _objectWithoutProperties(_ref, _excluded$1);
   var match = useMatchWindowSize(matchWindowSizeOptions);
   if (!match) return null;
   return children;
@@ -9842,5 +9986,128 @@ function withTheme(WrappedComponent) {
   });
 }
 
-export { ActionCard, Actions, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, FullscreenModal, HStack, Highlight, Icon, IconButton, Image, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createResponsiveStyleFromProp, createWindowSizeHelper, getStaticMapImageUrl, hex2rgba, matchWindowSize, theme, useBottomSheet, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, useTheme, withTheme };
+var backgroundColors = {
+  done: 'kitt.verticalSteps.done.icon.backgroundColor',
+  active: 'kitt.verticalSteps.active.icon.backgroundColor',
+  "default": 'kitt.verticalSteps.default.icon.backgroundColor'
+};
+function IconStatus(_ref) {
+  var state = _ref.state,
+    index = _ref.index;
+  if (state === 'done') {
+    return /*#__PURE__*/jsx(TypographyIcon, {
+      icon: /*#__PURE__*/jsx(CheckIcon, {}),
+      color: "kitt.verticalSteps.done.icon.textColor"
+    });
+  }
+  if (state === 'active') {
+    return /*#__PURE__*/jsx(Typography.Text, {
+      textAlign: "center",
+      variant: "bold",
+      color: "kitt.verticalSteps.active.icon.textColor",
+      children: index + 1
+    });
+  }
+  return /*#__PURE__*/jsx(Typography.Text, {
+    textAlign: "center",
+    variant: "bold",
+    color: "kitt.verticalSteps.default.icon.textColor",
+    children: index + 1
+  });
+}
+function StepIcon(_ref2) {
+  var index = _ref2.index,
+    _ref2$state = _ref2.state,
+    state = _ref2$state === void 0 ? 'default' : _ref2$state;
+  return /*#__PURE__*/jsx(View, {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: backgroundColors[state],
+    children: /*#__PURE__*/jsx(IconStatus, {
+      state: state,
+      index: index
+    })
+  });
+}
+
+function ExternalStep() {
+  return null;
+}
+function Step(_ref) {
+  var _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 0 : _ref$index,
+    children = _ref.children,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'default' : _ref$state,
+    _ref$isLast = _ref.isLast,
+    isLast = _ref$isLast === void 0 ? false : _ref$isLast,
+    _ref$shouldDisableNex = _ref.shouldDisableNextLink,
+    shouldDisableNextLink = _ref$shouldDisableNex === void 0 ? false : _ref$shouldDisableNex;
+  return /*#__PURE__*/jsxs(HStack$1, {
+    space: "kitt.2",
+    flexGrow: 1,
+    children: [/*#__PURE__*/jsxs(View, {
+      marginTop: "kitt.2",
+      paddingY: "kitt.2",
+      backgroundColor: "kitt.white",
+      children: [/*#__PURE__*/jsx(StepIcon, {
+        state: state,
+        index: index
+      }), !isLast ? /*#__PURE__*/jsx(View, {
+        backgroundColor: shouldDisableNextLink ? 'kitt.palettes.lateOcean.black100' : 'kitt.palettes.lateOcean.moonPurple',
+        width: 1,
+        position: "absolute",
+        top: 46,
+        left: 15,
+        zIndex: -1,
+        height: "100%"
+      }) : null]
+    }), /*#__PURE__*/jsx(View, {
+      flexGrow: 1,
+      children: /*#__PURE__*/jsx(ActionCard, {
+        variant: "primary",
+        children: children
+      })
+    })]
+  });
+}
+
+function getStepState(index, activeIndex) {
+  if (index === activeIndex) {
+    return 'active';
+  }
+  if (index < activeIndex) {
+    return 'done';
+  }
+  return 'default';
+}
+
+var _excluded = ["children", "activeIndex"];
+function VerticalSteps(_ref) {
+  var children = _ref.children,
+    activeIndex = _ref.activeIndex,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(VStack$1, _objectSpread(_objectSpread({
+    space: "kitt.4",
+    width: "100%"
+  }, props), {}, {
+    children: Children.map(children, function (child, index) {
+      if ((process.env.NODE_ENV !== "production") && child.type !== ExternalStep) {
+        throw new Error('VerticalSteps only accepts VerticalSteps.Step as children');
+      }
+      var isLast = index === Children.count(children) - 1;
+      return /*#__PURE__*/createElement(Step, _objectSpread(_objectSpread({}, child.props), {}, {
+        index: index,
+        isLast: isLast,
+        state: getStepState(index, activeIndex)
+      }), child.props.children);
+    })
+  }));
+}
+VerticalSteps.Step = ExternalStep;
+
+export { ActionCard, Actions, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, FullscreenModal, HStack, Highlight, Icon, IconButton, Image, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, createWindowSizeHelper, getStaticMapImageUrl, hex2rgba, matchWindowSize, theme, useBottomSheet, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, useTheme, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map