@ornikar/kitt-universal 11.2.0 → 12.0.0

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

@@ -1,4 +1,4 @@
-import { useContext, createContext, forwardRef, cloneElement, useState, useRef, useEffect, useMemo, Children, useReducer, Fragment as Fragment$1 } from 'react';
+import { useContext, createContext, forwardRef, cloneElement, useState, useRef, useEffect, useMemo, Children, useReducer, Fragment as Fragment$1, 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, useBreakpointValue, useSx, Text, Input, NativeBaseProvider, extendTheme } from 'native-base';
 export { useBreakpointValue, useClipboard, useMediaQuery, useSx, useToken } from 'native-base';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
@@ -13,14 +13,14 @@ import { ArcIcon, UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTr
 export * from '@ornikar/kitt-icons';
 import { styled } from '@linaria/react';
 import * as BabelPluginStyledComponentsReactNative from 'react-native';
-import { useWindowDimensions, Pressable as Pressable$2, StyleSheet, View as View$2, ScrollView as ScrollView$2, Linking, Modal as Modal$1 } from 'react-native';
+import { useWindowDimensions, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { Portal } from 'react-portal';
 import { CSSTransition } from 'react-transition-group';
-import styled$1, { css, ThemeProvider } from 'styled-components/native';
 import { parse } from 'twemoji-parser';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import styled$1, { ThemeProvider } from 'styled-components/native';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useFloating, autoUpdate, offset, autoPlacement, shift, arrow } from '@floating-ui/react-dom';
 import { useOnClickOutside } from 'usehooks-ts';
@@ -1040,6 +1040,10 @@ var textArea = {
   minHeight: 120
 };
 
+var timePicker = {
+  minWidth: 100
+};
+
 var forms = {
   datePicker: datePicker,
   input: input,
@@ -1048,7 +1052,8 @@ var forms = {
   textArea: textArea,
   checkbox: checkbox,
   inputTag: inputTag,
-  radioButtonGroup: radioButtonGroup
+  radioButtonGroup: radioButtonGroup,
+  timePicker: timePicker
 };
 
 var webAnimationContentDuration = 600;
@@ -1138,6 +1143,8 @@ var iconButton = {
 
 var listItem = {
   padding: '12px 16px',
+  verticalPadding: 12,
+  horizontalPadding: 16,
   borderColor: colors.separator,
   borderWidth: 1,
   innerMargin: 8
@@ -1179,6 +1186,8 @@ var picker = {
   },
   android: {
     padding: '12px 24px',
+    verticalPadding: 12,
+    horizontalPadding: 24,
     "default": {
       backgroundColor: colors.transparent
     },
@@ -1277,6 +1286,8 @@ var skeleton = {
 var tag = {
   borderRadius: 10,
   padding: '2px 12px',
+  verticalPadding: 2,
+  horizontalPadding: 12,
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
@@ -1353,6 +1364,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,
@@ -1404,7 +1436,8 @@ var theme = {
   tooltip: tooltip,
   typography: typography,
   fullscreenModal: fullscreenModal,
-  actionCard: actionCard
+  actionCard: actionCard,
+  verticalSteps: verticalSteps
 };
 
 var KittThemeContext = /*#__PURE__*/createContext({
@@ -1752,7 +1785,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$D = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$F = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -1802,7 +1835,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$D);
+    otherProps = _objectWithoutProperties(_ref, _excluded$F);
   var sx = useSx();
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -1907,11 +1940,11 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$C = ["color"],
+var _excluded$E = ["color"],
   _excluded2$5 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   var sx = useSx();
   var colorStyle = sx({
     color: getTypographyColorValue(color)
@@ -1955,7 +1988,7 @@ var getTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$B = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+var _excluded$D = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -2030,7 +2063,7 @@ function ButtonContent(_ref3) {
     isHovered = _ref3.isHovered,
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
-    var props = _objectWithoutProperties(_ref3, _excluded$B);
+    var props = _objectWithoutProperties(_ref3, _excluded$D);
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -2079,7 +2112,7 @@ function ButtonPadding(_ref2) {
   });
 }
 
-function DisabledBorder$1() {
+function DisabledBorder() {
   return /*#__PURE__*/jsx(View, {
     position: "absolute",
     top: 0,
@@ -2217,7 +2250,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,
@@ -2292,7 +2325,7 @@ function useMatchWindowSize(options) {
   }, options);
 }
 
-var _excluded$A = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$C = ["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;
@@ -2307,7 +2340,7 @@ function ActionsItem(_ref) {
     disabled = _ref.disabled,
     icon = _ref.icon,
     stretch = _ref.stretch,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   var isMedium = useMatchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
   });
@@ -2382,7 +2415,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$z = ["children", "layout"];
+var _excluded$B = ["children", "layout"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -2402,7 +2435,7 @@ function getCurrentDirection(layout) {
 function Actions(_ref) {
   var children = _ref.children,
     layout = _ref.layout,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   var currentAlignItems = getCurrentLayout(layout);
   var currentDirection = getCurrentDirection(layout);
   return /*#__PURE__*/jsx(Stack, _objectSpread(_objectSpread({
@@ -2448,7 +2481,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$y = ["size", "round", "light", "sizeVariant"];
+var _excluded$A = ["size", "round", "light", "sizeVariant"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -2487,7 +2520,7 @@ function Avatar(_ref2) {
     round = _ref2.round,
     light = _ref2.light,
     sizeVariant = _ref2.sizeVariant,
-    props = _objectWithoutProperties(_ref2, _excluded$y);
+    props = _objectWithoutProperties(_ref2, _excluded$A);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -2615,20 +2648,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$1(Pressable$2).withConfig({
-  displayName: "Overlay__OverlayPressable",
-  componentId: "kitt-universal__sc-1cz1gbr-0"
-})(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
   });
 }
@@ -2642,7 +2671,7 @@ function CardModalRotationContainer(props) {
   }, props));
 }
 
-var _excluded$x = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$z = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
 var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
 var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
@@ -2681,7 +2710,7 @@ function CardModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   var theme = useTheme();
   var animation = theme.kitt.cardModal.animation;
   var sharedProps = {
@@ -2714,11 +2743,11 @@ function CardModalAnimation(_ref) {
   }));
 }
 
-var _excluded$w = ["children"],
+var _excluded$y = ["children"],
   _excluded2$4 = ["children", "visible", "onClose", "onExited"];
 function CardModalScrollContainer(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({}, props), {}, {
     children: children
   }));
@@ -2759,7 +2788,7 @@ function CardModalBehaviour(_ref2) {
   });
 }
 
-var _excluded$v = ["children", "paddingX", "paddingY"];
+var _excluded$x = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -2769,7 +2798,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: paddingX,
     paddingY: paddingY
@@ -2778,7 +2807,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$u = ["children", "padding", "hasSeparator"];
+var _excluded$w = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -2788,7 +2817,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -2802,7 +2831,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$t = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$v = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -2815,7 +2844,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -2853,7 +2882,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$s = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$u = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -2864,7 +2893,7 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -2882,6 +2911,62 @@ 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;
+  var theme = useTheme();
+  return /*#__PURE__*/jsx(View, {
+    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'
+    },
+    _web: {
+      style: {
+        transitionProperty: theme.kitt.choices.item.transition.property,
+        transitionDuration: "".concat(theme.kitt.choices.item.transition.duration, "ms"),
+        transitionTimingFunction: theme.kitt.choices.item.transition.timingFunction
+      }
+    },
+    children: children
+  });
+}
+
 var useNativeAnimation$2 = function () {
   return {
     onPressIn: function onPressIn() {},
@@ -2900,92 +2985,26 @@ 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$1(View$2).withConfig({
-  displayName: "ChoiceItem__DisabledBorder",
-  componentId: "kitt-universal__sc-wuv3y6-0"
-})(["border-radius:", "px;", ";"], function (_ref2) {
-  var theme = _ref2.theme,
-    $variant = _ref2.$variant;
-  return getBorderRadius(theme.kitt.choices.item.borderRadius, $variant);
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  var _theme$kitt$choices$i = theme.kitt.choices.item.disabled.border,
-    width = _theme$kitt$choices$i.width,
-    color = _theme$kitt$choices$i.color;
-  return css(["border:", "px solid ", ";"], width, color);
-});
-var ChoiceItemView = /*#__PURE__*/styled$1(View$2).withConfig({
-  displayName: "ChoiceItem__ChoiceItemView",
-  componentId: "kitt-universal__sc-wuv3y6-1"
-})(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], function (_ref4) {
-  var theme = _ref4.theme,
-    $variant = _ref4.$variant;
-  return getBorderRadius(theme.kitt.choices.item.borderRadius, $variant);
-}, function (_ref5) {
-  var theme = _ref5.theme,
-    $isHovered = _ref5.$isHovered,
-    $isPressed = _ref5.$isPressed,
-    $isDisabled = _ref5.$isDisabled,
-    $isSelected = _ref5.$isSelected;
-  var _theme$kitt$choices$i2 = theme.kitt.choices.item.backgroundColor,
-    hoverWhenSelected = _theme$kitt$choices$i2.hoverWhenSelected,
-    hover = _theme$kitt$choices$i2.hover,
-    disabled = _theme$kitt$choices$i2.disabled,
-    selected = _theme$kitt$choices$i2.selected,
-    pressed = _theme$kitt$choices$i2.pressed,
-    defaultBackground = _theme$kitt$choices$i2["default"];
-  if ($isDisabled) return disabled;
-  if ($isSelected && $isHovered) return hoverWhenSelected;
-  if ($isPressed) return pressed;
-  if ($isHovered) return hover;
-  if ($isSelected) return selected;
-  return defaultBackground;
-}, function (_ref6) {
-  var theme = _ref6.theme,
-    $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;
-  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(),
     onPressIn = _useNativeAnimation.onPressIn,
-    onPressOut = _useNativeAnimation.onPressOut;
-    _useNativeAnimation.backgroundStyles;
+    onPressOut = _useNativeAnimation.onPressOut,
+    backgroundStyles = _useNativeAnimation.backgroundStyles;
   var handleChange = function () {
     if (!onChange) return;
 
@@ -3012,17 +3031,17 @@ function ChoiceItem(_ref8) {
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function children(_ref9) {
-      var isHovered = _ref9.isHovered,
-        isPressed = _ref9.isPressed;
-      return /*#__PURE__*/jsxs(ChoiceItemView, {
-        style: undefined,
-        $isHovered: isHovered || isHoveredInternal,
-        $isDisabled: disabled,
-        $isSelected: selected,
-        $isPressed: isPressed || isPressedInternal,
-        $variant: variant,
-        $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,
@@ -3031,35 +3050,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$1(View$2).withConfig({
-  displayName: "ChoiceItemContainer",
-  componentId: "kitt-universal__sc-17uuimx-0"
-})(["", ""], function (_ref) {
-  var theme = _ref.theme,
-    $isLast = _ref.$isLast,
-    $direction = _ref.$direction;
-  var _theme$kitt$choices$s = theme.kitt.choices.spacing,
-    row = _theme$kitt$choices$s.row,
-    column = _theme$kitt$choices$s.column;
-  if ($direction === 'row') {
-    return css(["margin-right:", "px;"], $isLast ? 0 : row);
-  }
-  return css(["margin-bottom:", "px;"], $isLast ? 0 : column);
-});
+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$r = ["direction"];
+var _excluded$t = ["direction"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
@@ -3113,8 +3134,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);
     })
@@ -3131,7 +3152,7 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$q = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$s = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
 var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
 var contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
@@ -3170,7 +3191,7 @@ function DialogModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var theme = useTheme();
   var animation = theme.kitt.dialogModal.animation;
   var sharedProps = {
@@ -3205,13 +3226,13 @@ function DialogModalAnimation(_ref) {
   }));
 }
 
-var _excluded$p = ["children", "visible", "onClose", "onExited"];
+var _excluded$r = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -3242,7 +3263,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$o = ["stretch"];
+var _excluded$q = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -3283,7 +3304,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$o);
+    props = _objectWithoutProperties(_ref2, _excluded$q);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -3320,7 +3341,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$n = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$p = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$3 = ["phoneNumber", "children"],
   _excluded3$2 = ["phoneNumber", "children"],
   _excluded4$1 = ["emailAddress", "children"];
@@ -3330,7 +3351,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$n);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -3425,14 +3446,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$m = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$o = ["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$m);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     href: href,
     hrefAttrs: (openLinkBehavior === null || openLinkBehavior === void 0 ? void 0 : openLinkBehavior.web) === 'targetSelf' ? undefined : {
@@ -3758,7 +3779,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled('div')({
   }
 }));
 
-var _excluded$l = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var _excluded$n = ["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;
@@ -3778,13 +3799,12 @@ 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$l);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
   });
   return /*#__PURE__*/jsxs(InputTextContainer, {
-    $isDisabled: disabled,
     children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
       ref: ref,
       multiline: multiline,
@@ -3821,7 +3841,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,
@@ -3845,7 +3865,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,
@@ -3875,7 +3895,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$k = ["value", "testID", "id", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$m = ["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,
@@ -3893,7 +3913,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$k);
+    _objectWithoutProperties(_ref, _excluded$m);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -4033,10 +4053,10 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$j = ["value"];
+var _excluded$l = ["value"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
@@ -4130,11 +4150,11 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
 }
 
-var _excluded$i = ["isPasswordDefaultVisible", "right"];
+var _excluded$k = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -4162,7 +4182,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$h = ["returnKeyType", "autoComplete", "phoneNumberLength", "value", "onChange"];
+var _excluded$j = ["returnKeyType", "autoComplete", "phoneNumberLength", "value", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -4177,7 +4197,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$h);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -4225,48 +4245,29 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
 };
-var InputTagContainer = /*#__PURE__*/styled$1(View$2).withConfig({
-  displayName: "InputTag__InputTagContainer",
-  componentId: "kitt-universal__sc-1511dsf-0"
-})(["align-items:center;justify-content:center;flex-direction:row;align-self:flex-start;overflow:hidden;padding-horizontal:", "px;background-color:", ";border-radius:", "px;"], function (_ref) {
-  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$1(View$2).withConfig({
-  displayName: "InputTag__IconContainer",
-  componentId: "kitt-universal__sc-1511dsf-1"
-})(["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
@@ -4632,7 +4633,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$g = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$i = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -4645,7 +4646,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$g);
+    props = _objectWithoutProperties(_ref2, _excluded$i);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -4687,13 +4688,13 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$f = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$h = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -4710,14 +4711,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$e = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$g = ["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$e);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom;
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
@@ -4734,7 +4735,7 @@ function FullscreenModalFooter(_ref) {
   }));
 }
 
-var _excluded$d = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$f = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
 var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
 var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
@@ -4773,7 +4774,7 @@ function FullscreenModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var theme = useTheme();
   var animation = theme.kitt.fullscreenModal.animation;
   var sharedProps = {
@@ -4800,13 +4801,13 @@ function FullscreenModalAnimation(_ref) {
   }));
 }
 
-var _excluded$c = ["children", "visible", "onClose", "onExited"];
+var _excluded$e = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4850,7 +4851,7 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$b = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+var _excluded$d = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   var _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
@@ -4861,7 +4862,7 @@ function FullscreenModalHeader(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -4949,7 +4950,7 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$a = ["color", "isDisabled"];
+var _excluded$c = ["color", "isDisabled"];
 function getBackgroundColor(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -4967,7 +4968,7 @@ function getBackgroundColor(color, isDisabled) {
 function Background(_ref) {
   var color = _ref.color,
     isDisabled = _ref.isDisabled,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -5158,102 +5159,57 @@ function useKittMapConfig() {
   return context;
 }
 
-var _excluded$9 = ["children"];
-var ContentView$1 = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "ListItemContent__ContentView",
-  componentId: "kitt-universal__sc-57q0u9-0"
-})(["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$1, _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$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "ListItemSideContent__SideContainerView",
-  componentId: "kitt-universal__sc-1vajiw-0"
-})(["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$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "ListItemSideContent__SideContentView",
-  componentId: "kitt-universal__sc-1vajiw-1"
-})(["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$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "ListItem__ContainerView",
-  componentId: "kitt-universal__sc-2afp9s-0"
-})(["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',
@@ -5261,9 +5217,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",
@@ -5936,6 +5897,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
         },
@@ -5959,6 +5985,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,
@@ -6057,6 +6094,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
@@ -6091,6 +6171,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         cardModal: {
           borderRadius: theme.cardModal.borderRadius
         },
+        choices: {
+          item: {
+            borderRadius: theme.choices.item.borderRadius
+          }
+        },
         dialogModal: {
           borderRadius: theme.dialogModal.borderRadius
         },
@@ -6098,6 +6183,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
@@ -6119,6 +6207,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderRadius: theme.iconButton.borderRadius
         },
+        tag: {
+          borderRadius: theme.tag.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -6230,6 +6321,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
         },
@@ -6256,6 +6354,43 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           footer: {
             borderWidth: theme.cardModal.footer.borderWidth
           }
+        },
+        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
@@ -6327,6 +6462,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           },
           textArea: {
             minHeight: theme.forms.textArea.minHeight
+          },
+          timePicker: {
+            minWidth: theme.forms.timePicker.minWidth
           }
         },
         iconButton: {
@@ -6339,6 +6477,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.fullscreenModal.header.height
           }
         },
+        pageLoader: {
+          size: theme.pageLoader.size
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -6358,6 +6499,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
@@ -6403,10 +6554,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
@@ -6976,7 +7143,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;
@@ -6990,7 +7157,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
@@ -7321,7 +7488,7 @@ function SkeletonContent(_ref4) {
   });
 }
 
-var _excluded$5 = ["isLoading", "style"],
+var _excluded$7 = ["isLoading", "style"],
   _excluded2$1 = ["size"],
   _excluded3$1 = ["size"],
   _excluded4 = ["size"];
@@ -7329,7 +7496,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],
@@ -7528,7 +7695,7 @@ function getShouldDisplay2x() {
   return window.devicePixelRatio ? window.devicePixelRatio > 1 : false;
 }
 
-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
@@ -7546,7 +7713,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],
@@ -7636,22 +7803,17 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
-var Flex = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
-    return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
-  }
-}).withConfig({
-  displayName: "Flex",
-  componentId: "kitt-universal__sc-15q3v3h-0"
-})(["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';
 
@@ -7786,14 +7948,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"
@@ -7918,31 +8080,6 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var Container = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Tag__Container",
-  componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
-  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':
@@ -7967,15 +8104,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, {
-    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),
@@ -7984,10 +8126,88 @@ function Tag(_ref6) {
   });
 }
 
-function TimePicker() {
-  return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body",
-    children: "TimePicker is not implemented for the web"
+function formatNumberToTimeString(time) {
+  return "".concat(String(time).padStart(2, '0'));
+}
+function formatDateToTimeString(date) {
+  return "".concat(formatNumberToTimeString(date.getHours()), ":").concat(formatNumberToTimeString(date.getMinutes()));
+}
+
+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%"
+        })]
+      });
+    }
+  });
+}
+
+function TimePicker(_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;
+  return /*#__PURE__*/jsx(TimePickerPressable, {
+    testID: testID,
+    disabled: disabled,
+    stretch: stretch,
+    value: value,
+    placeholder: placeholder,
+    isHoveredInternal: isHoveredInternal,
+    isFocusedInternal: isFocusedInternal,
+    isPressedInternal: isPressedInternal
   });
 }
 
@@ -8320,18 +8540,18 @@ 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);
   // 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), {}, {
     children: children
   }));
 }
 
-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) {
@@ -8361,7 +8581,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,
@@ -8474,7 +8694,7 @@ var KittThemeDecorator = makeDecorator({
   }
 });
 
-var _excluded = ["children"];
+var _excluded$1 = ["children"];
 /**
  * Display children if match window size options
  *
@@ -8482,7 +8702,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;
@@ -8498,5 +8718,128 @@ function useCurrentBreakpointName() {
   });
 }
 
-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.web.js.map