@ornikar/kitt-universal 11.2.0 → 13.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';
@@ -11,13 +11,10 @@ import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import { ArcIcon, UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, RotateCCWIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 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 } 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';
@@ -920,6 +917,9 @@ var inputStatesStyle = {
     color: colors.black
   }
 };
+var webAnimationDuration = '200ms';
+var webAnimationTimingFunction = 'ease-in-out';
+var webAnimationProperty = 'border-color';
 var input = {
   minHeight: 40,
   color: {
@@ -939,9 +939,9 @@ var input = {
     vertical: 5
   },
   transition: {
-    property: 'border-color',
-    duration: '200ms',
-    timingFunction: 'ease-in-out'
+    property: webAnimationProperty,
+    duration: webAnimationDuration,
+    timingFunction: webAnimationTimingFunction
   },
   states: inputStatesStyle
 };
@@ -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,25 +1143,34 @@ var iconButton = {
 
 var listItem = {
   padding: '12px 16px',
+  verticalPadding: 12,
+  horizontalPadding: 16,
   borderColor: colors.separator,
   borderWidth: 1,
   innerMargin: 8
 };
 
+var pageLoaderSize = 60;
+var pageLoaderStrokeWidth = 3;
+var webAnimationDelay = 500;
+var webAnimationCircleBackgroundFillDuration = 1000;
+var webAnimationFilledCircleFillDuration = 1800;
+var webAnimationFilledCircleRotationDuration = 2160;
+var fillEasingFunction = [0.39, 0.575, 0.565, 1];
 var pageLoader = {
-  size: 60,
-  strokeWidth: 3,
+  size: pageLoaderSize,
+  strokeWidth: pageLoaderStrokeWidth,
   colors: {
     base: colors.separator,
     fill: colors.primary
   },
   animation: {
-    delay: 500,
-    circleBackgroundFillDuration: 1000,
-    filledCircleFillDuration: 1800,
+    delay: webAnimationDelay,
+    circleBackgroundFillDuration: webAnimationCircleBackgroundFillDuration,
+    filledCircleFillDuration: webAnimationFilledCircleFillDuration,
     groupFilledCircleRotationDuration: 1800,
-    filledCircleRotationDuration: 2160,
-    fillEasingFunction: [0.39, 0.575, 0.565, 1]
+    filledCircleRotationDuration: webAnimationFilledCircleRotationDuration,
+    fillEasingFunction: fillEasingFunction
   }
 };
 
@@ -1179,6 +1193,8 @@ var picker = {
   },
   android: {
     padding: '12px 24px',
+    verticalPadding: 12,
+    horizontalPadding: 24,
     "default": {
       backgroundColor: colors.transparent
     },
@@ -1254,9 +1270,11 @@ var shadows = {
   }
 };
 
-var skeleton = {
-  backgroundColor: lateOceanColorPalette.black100,
-  flareColor: lateOceanColorPalette.black200,
+var skeletonBackgroundColor = lateOceanColorPalette.black100;
+var skeletonFlareColor = lateOceanColorPalette.black200;
+var skeleton$1 = {
+  backgroundColor: skeletonBackgroundColor,
+  flareColor: skeletonFlareColor,
   animationDuration: 1000,
   shape: {
     bar: {
@@ -1277,6 +1295,8 @@ var skeleton = {
 var tag = {
   borderRadius: 10,
   padding: '2px 12px',
+  verticalPadding: 2,
+  horizontalPadding: 12,
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
@@ -1353,6 +1373,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,
@@ -1399,12 +1440,13 @@ var theme = {
   pageLoader: pageLoader,
   picker: picker,
   shadows: shadows,
-  skeleton: skeleton,
+  skeleton: skeleton$1,
   tag: tag,
   tooltip: tooltip,
   typography: typography,
   fullscreenModal: fullscreenModal,
-  actionCard: actionCard
+  actionCard: actionCard,
+  verticalSteps: verticalSteps
 };
 
 var KittThemeContext = /*#__PURE__*/createContext({
@@ -1752,7 +1794,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 +1844,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 +1949,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 +1997,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 +2072,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 +2121,7 @@ function ButtonPadding(_ref2) {
   });
 }
 
-function DisabledBorder$1() {
+function DisabledBorder() {
   return /*#__PURE__*/jsx(View, {
     position: "absolute",
     top: 0,
@@ -2217,7 +2259,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,
@@ -2230,29 +2272,15 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-function withTheme(WrappedComponent) {
-  // eslint-disable-next-line prefer-arrow-callback
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    var theme = useTheme();
-    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread({
-      ref: ref,
-      theme: theme
-    }, props));
-  });
-}
-
-var StyledSpinningIconContainer = withTheme( /*#__PURE__*/styled('div')({
-  name: "StyledSpinningIconContainer",
-  "class": "kitt-u_StyledSpinningIconContainer_ssn8o83",
-  propsAsIs: false
-}));
+var spinningIcon = "kitt-u_spinningIcon_ssn8o83";
 function SpinningIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color;
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/jsx(StyledSpinningIconContainer, {
+  return /*#__PURE__*/jsx("div", {
+    className: spinningIcon,
     children: clonedIcon
   });
 }
@@ -2292,7 +2320,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 +2335,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 +2410,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 +2430,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 +2476,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 +2515,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
@@ -2567,17 +2595,17 @@ function ModalBehaviourPortal(_ref) {
   });
 }
 
-var OnCloseContext$1 = /*#__PURE__*/createContext(function () {});
+var OnCloseContext = /*#__PURE__*/createContext(function () {});
 function OnCloseProvider(_ref) {
   var children = _ref.children,
     onClose = _ref.onClose;
-  return /*#__PURE__*/jsx(OnCloseContext$1.Provider, {
+  return /*#__PURE__*/jsx(OnCloseContext.Provider, {
     value: onClose,
     children: children
   });
 }
 function useOnCloseModalBehaviour() {
-  var onClose = useContext(OnCloseContext$1);
+  var onClose = useContext(OnCloseContext);
   return onClose;
 }
 
@@ -2615,20 +2643,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 +2666,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 +2705,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 +2738,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 +2783,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 +2793,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 +2802,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 +2812,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 +2826,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 +2839,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 +2877,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 +2888,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 +2906,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 +2980,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 +3026,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 +3045,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 +3129,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 +3147,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 +3186,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 +3221,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 +3258,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$o = ["stretch"];
+var _excluded$q = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -3283,7 +3299,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 +3336,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 +3346,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 +3441,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 : {
@@ -3739,26 +3755,14 @@ function stringToNumber(text) {
   return parseInt(text, 10);
 }
 
-var _exp$2 = function () {
-  return function (_ref) {
-    var theme = _ref.theme;
-    var _theme$kitt$forms$inp = theme.kitt.forms.input.transition,
-      property = _theme$kitt$forms$inp.property,
-      duration = _theme$kitt$forms$inp.duration,
-      timingFunction = _theme$kitt$forms$inp.timingFunction;
-    return "".concat(property, " ").concat(duration, " ").concat(timingFunction);
-  };
-};
-var InputTextContainer = withTheme( /*#__PURE__*/styled('div')({
-  name: "InputTextContainer",
-  "class": "kitt-u_InputTextContainer_i1encr9g",
-  propsAsIs: false,
-  vars: {
-    "i1encr9g-0": [_exp$2()]
-  }
-}));
+var inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
+function InputTextContainer(props) {
+  return /*#__PURE__*/jsx("div", _objectSpread({
+    className: inputTextContainer
+  }, props));
+}
 
-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 +3782,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 +3824,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 +3848,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 +3878,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 +3896,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 +4036,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 +4133,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 +4165,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 +4180,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 +4228,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 +4616,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 +4629,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 +4671,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 +4694,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 +4718,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 +4757,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 +4784,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 +4834,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 +4845,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 +4933,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 +4951,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 +5142,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 +5200,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",
@@ -5638,151 +5582,6 @@ function Message(_ref) {
   });
 }
 
-var BodyView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Body__BodyView",
-  componentId: "kitt-universal__sc-17fwpo4-0"
-})(["padding:", "px ", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 6;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.spacing * 4;
-});
-function ModalBody(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/jsx(ScrollView$2, {
-    children: /*#__PURE__*/jsx(BodyView, {
-      children: children
-    })
-  });
-}
-
-var FooterView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Footer__FooterView",
-  componentId: "kitt-universal__sc-1ujq2dc-0"
-})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 4;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.colors.separator;
-});
-function ModalFooter(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/jsx(FooterView, {
-    children: children
-  });
-}
-
-var OnCloseContext = /*#__PURE__*/createContext(function () {});
-
-var HeaderView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Header__HeaderView",
-  componentId: "kitt-universal__sc-1iwabch-0"
-})(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 2;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.colors.separator;
-});
-var LeftIconView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Header__LeftIconView",
-  componentId: "kitt-universal__sc-1iwabch-1"
-})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.spacing * 2;
-});
-var RightIconView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Header__RightIconView",
-  componentId: "kitt-universal__sc-1iwabch-2"
-})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.spacing * 2;
-});
-var TitleView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Header__TitleView",
-  componentId: "kitt-universal__sc-1iwabch-3"
-})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
-  var theme = _ref5.theme,
-    isIconLeft = _ref5.isIconLeft;
-  return isIconLeft ? 0 : theme.kitt.spacing * 2;
-});
-function ModalHeader(_ref6) {
-  var left = _ref6.left,
-    right = _ref6.right,
-    children = _ref6.children;
-  var onClose = useContext(OnCloseContext);
-  var isIconLeft = !!left;
-  return /*#__PURE__*/jsxs(HeaderView, {
-    children: [isIconLeft && /*#__PURE__*/jsx(LeftIconView, {
-      children: left
-    }), /*#__PURE__*/jsx(TitleView, {
-      isIconLeft: isIconLeft,
-      children: children
-    }), right !== undefined ? right : /*#__PURE__*/jsx(RightIconView, {
-      children: /*#__PURE__*/jsx(IconButton, {
-        icon: /*#__PURE__*/jsx(XIcon, {}),
-        onPress: onClose
-      })
-    })]
-  });
-}
-
-var ModalView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Modal__ModalView",
-  componentId: "kitt-universal__sc-1xy2w5u-0"
-})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 20;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.spacing * 4;
-});
-var ContentView = /*#__PURE__*/styled$1(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Modal__ContentView",
-  componentId: "kitt-universal__sc-1xy2w5u-1"
-})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.card.borderRadius;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.colors.uiBackgroundLight;
-});
-
-/**
- * @deprecated This component will be deleted in a later Kitt Universal version. Use CardModal instead
- */
-function Modal(_ref5) {
-  var visible = _ref5.visible,
-    children = _ref5.children,
-    onClose = _ref5.onClose,
-    onEntered = _ref5.onEntered,
-    onExited = _ref5.onExited;
-  return /*#__PURE__*/jsx(OnCloseContext.Provider, {
-    value: onClose,
-    children: /*#__PURE__*/jsx(Modal$1, {
-      transparent: true,
-      animationType: "fade",
-      supportedOrientations: ['landscape', 'portrait'],
-      visible: visible,
-      onShow: onEntered,
-      onDismiss: onExited,
-      onRequestClose: onClose,
-      children: /*#__PURE__*/jsxs(ModalView, {
-        children: [/*#__PURE__*/jsx(Overlay, {
-          onPress: onClose
-        }), /*#__PURE__*/jsx(ContentView, {
-          children: children
-        })]
-      })
-    })
-  });
-}
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;
-
 var createKittSpaces = function (spacing) {
   var sizes = {
     positive: {},
@@ -5936,6 +5735,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 +5823,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 +5932,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 +6009,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         cardModal: {
           borderRadius: theme.cardModal.borderRadius
         },
+        choices: {
+          item: {
+            borderRadius: theme.choices.item.borderRadius
+          }
+        },
         dialogModal: {
           borderRadius: theme.dialogModal.borderRadius
         },
@@ -6098,6 +6021,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 +6045,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderRadius: theme.iconButton.borderRadius
         },
+        tag: {
+          borderRadius: theme.tag.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -6230,6 +6159,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 +6192,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 +6300,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           },
           textArea: {
             minHeight: theme.forms.textArea.minHeight
+          },
+          timePicker: {
+            minWidth: theme.forms.timePicker.minWidth
           }
         },
         iconButton: {
@@ -6339,6 +6315,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.fullscreenModal.header.height
           }
         },
+        pageLoader: {
+          size: theme.pageLoader.size
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -6358,6 +6337,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 +6392,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 +6981,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 +6995,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
@@ -7110,94 +7115,11 @@ function Notification(_ref) {
   });
 }
 
-var _exp3$1 = function () {
-  return function (_ref) {
-    var $circlePerimeter = _ref.$circlePerimeter;
-    return $circlePerimeter * 0.2;
-  };
-};
-var _exp5 = function () {
-  return function (_ref2) {
-    var theme = _ref2.theme;
-    return theme.kitt.pageLoader.size;
-  };
-};
-var _exp6 = function () {
-  return function (_ref3) {
-    var theme = _ref3.theme;
-    return theme.kitt.pageLoader.strokeWidth;
-  };
-};
-var _exp8 = function () {
-  return function (_ref4) {
-    var $circlePerimeter = _ref4.$circlePerimeter;
-    return $circlePerimeter;
-  };
-};
-var _exp9 = function () {
-  return function (_ref5) {
-    var theme = _ref5.theme;
-    return theme.kitt.pageLoader.colors.base;
-  };
-};
-var _exp10 = function () {
-  return function (_ref6) {
-    var theme = _ref6.theme;
-    var animation = theme.kitt.pageLoader.animation;
-    var _animation$fillEasing = _slicedToArray(animation.fillEasingFunction, 4),
-      x1 = _animation$fillEasing[0],
-      y1 = _animation$fillEasing[1],
-      x2 = _animation$fillEasing[2],
-      y2 = _animation$fillEasing[3];
-    return "".concat(animation.circleBackgroundFillDuration, "ms cubic-bezier(").concat(x1, ", ").concat(y1, ", ").concat(x2, ", ").concat(y2, ") ").concat(animation.delay, "ms forwards");
-  };
-};
-var _exp11 = function () {
-  return function (_ref7) {
-    var theme = _ref7.theme;
-    var animation = theme.kitt.pageLoader.animation;
-    return "".concat(animation.filledCircleFillDuration, "ms linear ").concat(animation.delay, "ms infinite");
-  };
-};
-var _exp12 = function () {
-  return function (_ref8) {
-    var theme = _ref8.theme;
-    return theme.kitt.pageLoader.colors.fill;
-  };
-};
-var _exp13 = function () {
-  return function (_ref9) {
-    var theme = _ref9.theme;
-    var animation = theme.kitt.pageLoader.animation;
-    var _animation$fillEasing2 = _slicedToArray(animation.fillEasingFunction, 4),
-      x1 = _animation$fillEasing2[0],
-      y1 = _animation$fillEasing2[1],
-      x2 = _animation$fillEasing2[2],
-      y2 = _animation$fillEasing2[3];
-    var fillAnimation = "".concat(animation.filledCircleFillDuration, "ms cubic-bezier(").concat(x1, ", ").concat(y1, ", ").concat(x2, ", ").concat(y2, ") ").concat(animation.delay, "ms infinite alternate");
-    var rotationAnimation = "".concat(animation.filledCircleRotationDuration, "ms linear ").concat(animation.delay, "ms infinite");
-    return [fillAnimation, rotationAnimation].join(',');
-  };
-};
-var PageLoaderContainer = withTheme( /*#__PURE__*/styled('div')({
-  name: "PageLoaderContainer",
-  "class": "kitt-u_PageLoaderContainer_ptkwz2j",
-  propsAsIs: false,
-  vars: {
-    "ptkwz2j-0": [_exp8(), "px"],
-    "ptkwz2j-1": [_exp3$1(), "px"],
-    "ptkwz2j-2": [_exp5(), "px"],
-    "ptkwz2j-3": [_exp6(), "px"],
-    "ptkwz2j-4": [_exp9()],
-    "ptkwz2j-5": [_exp10()],
-    "ptkwz2j-6": [_exp11()],
-    "ptkwz2j-7": [_exp12()],
-    "ptkwz2j-8": [_exp13()]
-  }
-}));
+var pageLoaderContainer = "kitt-u_pageLoaderContainer_ptkwz2j";
 function PageLoader() {
   var theme = useTheme();
   var _theme$kitt$pageLoade = theme.kitt.pageLoader,
+    colors = _theme$kitt$pageLoade.colors,
     size = _theme$kitt$pageLoade.size,
     strokeWidth = _theme$kitt$pageLoade.strokeWidth;
   var center = size * 0.5;
@@ -7207,19 +7129,27 @@ function PageLoader() {
     cx: center,
     cy: center,
     r: radius,
-    fill: 'none'
+    fill: 'none',
+    strokeWidth: strokeWidth,
+    strokeDasharray: circlePerimeter,
+    strokeDashoffset: circlePerimeter,
+    strokeLinecap: 'round'
   };
-  return /*#__PURE__*/jsx(PageLoaderContainer, {
-    $circlePerimeter: circlePerimeter,
+  return /*#__PURE__*/jsx("div", {
+    className: pageLoaderContainer,
     children: /*#__PURE__*/jsxs("svg", {
       width: size,
       height: size,
       children: [/*#__PURE__*/jsx("g", {
         "data-large-loader": "base",
-        children: /*#__PURE__*/jsx("circle", _objectSpread({}, sharedProps))
+        children: /*#__PURE__*/jsx("circle", _objectSpread(_objectSpread({}, sharedProps), {}, {
+          stroke: colors.base
+        }))
       }), /*#__PURE__*/jsx("g", {
         "data-large-loader": "fill",
-        children: /*#__PURE__*/jsx("circle", _objectSpread({}, sharedProps))
+        children: /*#__PURE__*/jsx("circle", _objectSpread(_objectSpread({}, sharedProps), {}, {
+          stroke: colors.fill
+        }))
       })]
     })
   });
@@ -7285,43 +7215,15 @@ function SegmentedProgressBar(_ref) {
   });
 }
 
-var _exp$1 = function () {
-  return function (_ref) {
-    var theme = _ref.theme;
-    return theme.kitt.skeleton.backgroundColor;
-  };
-};
-var _exp2$1 = function () {
-  return function (_ref2) {
-    var $isLoading = _ref2.$isLoading,
-      theme = _ref2.theme;
-    return $isLoading ? "linear-gradient(\n      -90deg,\n      ".concat(theme.kitt.skeleton.backgroundColor, ",\n      ").concat(theme.kitt.skeleton.flareColor, " 50%,\n      ").concat(theme.kitt.skeleton.backgroundColor, " 100%\n      )") : 'none';
-  };
-};
-var _exp3 = function () {
-  return function (_ref3) {
-    var $isLoading = _ref3.$isLoading;
-    return $isLoading ? '1s ease-in-out infinite' : 'none';
-  };
-};
-var StyledSkeleton = withTheme( /*#__PURE__*/styled('div')({
-  name: "StyledSkeleton",
-  "class": "kitt-u_StyledSkeleton_sc3upcl",
-  propsAsIs: false,
-  vars: {
-    "sc3upcl-0": [_exp$1()],
-    "sc3upcl-1": [_exp2$1()],
-    "sc3upcl-2": [_exp3()]
-  }
-}));
-function SkeletonContent(_ref4) {
-  var isLoading = _ref4.isLoading;
-  return /*#__PURE__*/jsx(StyledSkeleton, {
-    $isLoading: isLoading
+var skeleton = "kitt-u_skeleton_sc3upcl";
+function SkeletonContent(_ref) {
+  var isLoading = _ref.isLoading;
+  return /*#__PURE__*/jsx("div", {
+    className: (skeleton ) + " " + ((!isLoading ? "skeletonWithoutAnimation" : "") || "")
   });
 }
 
-var _excluded$5 = ["isLoading", "style"],
+var _excluded$7 = ["isLoading", "style"],
   _excluded2$1 = ["size"],
   _excluded3$1 = ["size"],
   _excluded4 = ["size"];
@@ -7329,7 +7231,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 +7430,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 +7448,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 +7538,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 +7683,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 +7815,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 +7839,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 +7861,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,51 +8275,29 @@ function TypographyEmoji(_ref3) {
   });
 }
 
-var _excluded$2 = ["as", "children"];
-function StyleWebWrapper(_ref) {
-  var as = _ref.as,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  // 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), {}, {
+// overrides :global(a) in Link styles.module.css
+var displayUnderline = "kitt-u_displayUnderline_dch42t";
+var displayUnderlineWhenHovered = "kitt-u_displayUnderlineWhenHovered_d80w0t7";
+function TypographyLinkWebWrapper(_ref) {
+  var children = _ref.children,
+    hasNoUnderline = _ref.hasNoUnderline;
+  return /*#__PURE__*/jsx("span", {
+    className: (displayUnderline ) + " " + ((hasNoUnderline ? displayUnderlineWhenHovered : undefined) || ""),
     children: children
-  }));
+  });
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
-// overrides :global(a) in Link styles.module.css
-var _exp = function () {
-  return function (_ref) {
-    var $hasNoUnderline = _ref.$hasNoUnderline;
-    return $hasNoUnderline ? 'none' : 'underline';
-  };
-};
-var _exp2 = function () {
-  return function (_ref2) {
-    var $hasNoUnderline = _ref2.$hasNoUnderline;
-    return $hasNoUnderline ? 'underline' : 'none';
-  };
-};
-var TypographyLinkWebWrapper = /*#__PURE__*/styled('span')({
-  name: "TypographyLinkWebWrapper",
-  "class": "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
-  propsAsIs: false,
-  vars: {
-    "tcwz3nt-0": [_exp()],
-    "tcwz3nt-1": [_exp2()]
-  }
-});
-function TypographyLink(_ref3) {
-  var children = _ref3.children,
-    disabled = _ref3.disabled,
-    noUnderline = _ref3.noUnderline,
-    href = _ref3.href,
-    hrefAttrs = _ref3.hrefAttrs,
-    onPress = _ref3.onPress,
-    otherProps = _objectWithoutProperties(_ref3, _excluded$1);
-  return /*#__PURE__*/jsx(StyleWebWrapper, {
-    as: TypographyLinkWebWrapper,
-    $hasNoUnderline: noUnderline,
+var _excluded$3 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
+function TypographyLink(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    noUnderline = _ref.noUnderline,
+    href = _ref.href,
+    hrefAttrs = _ref.hrefAttrs,
+    onPress = _ref.onPress,
+    otherProps = _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/jsx(TypographyLinkWebWrapper, {
+    hasNoUnderline: noUnderline,
     children: /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
       underline: !noUnderline,
       color: disabled ? 'black-disabled' : undefined,
@@ -8396,51 +8329,12 @@ function TypographyLink(_ref3) {
   });
 }
 
-/** @deprecated use native-base responsive props or `useBreakpointValue` or `useMatchWindowSize` instead */
-function createWindowSizeHelper(dimensions) {
-  return {
-    matchWindowSize: function matchWindowSize$1(options) {
-      return matchWindowSize(dimensions, options);
-    },
-    ifWindowSizeMatches: function ifWindowSizeMatches(options, valueIfTrue, valueIfFalse) {
-      return matchWindowSize(dimensions, options) ? valueIfTrue : valueIfFalse;
-    },
-    mapWindowWidth: function mapWindowWidth() {
-      for (var _len = arguments.length, widthList = new Array(_len), _key = 0; _key < _len; _key++) {
-        widthList[_key] = arguments[_key];
-      }
-      if ((process.env.NODE_ENV !== "production")) {
-        widthList.slice(1).forEach(function (_ref, index) {
-          var _ref2 = _slicedToArray(_ref, 1),
-            minWidth = _ref2[0];
-          var previousMinWidth = widthList[index][0];
-          if (previousMinWidth > minWidth) {
-            throw new Error("mapWindowWidth: sort your values to be mobile first. ".concat(minWidth, " is < ").concat(previousMinWidth, ", so ").concat(minWidth, " should be before ").concat(previousMinWidth, "."));
-          }
-        });
-      }
-      var found = widthList.find(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          minWidth = _ref4[0];
-          _ref4[1];
-        return matchWindowSize(dimensions, {
-          minWidth: Number(minWidth)
-        });
-      });
-      if (!found) return null;
-      return found[1];
-    }
-  };
-}
-
 function useKittTheme() {
-  var dimensions = useWindowDimensions();
   return useMemo(function () {
     return {
-      kitt: theme,
-      responsive: createWindowSizeHelper(dimensions)
+      kitt: theme
     };
-  }, [dimensions]);
+  }, []);
 }
 
 function KittThemeProvider(_ref) {
@@ -8448,14 +8342,11 @@ function KittThemeProvider(_ref) {
     children = _ref.children,
     appTheme = _ref.appTheme;
   var theme = useKittTheme();
-  return /*#__PURE__*/jsx(ThemeProvider, {
+  return /*#__PURE__*/jsx(KittNativeBaseProvider, {
     theme: theme,
-    children: /*#__PURE__*/jsx(KittNativeBaseProvider, {
-      theme: theme,
-      isSSR: isSSR,
-      appTheme: appTheme,
-      children: children
-    })
+    isSSR: isSSR,
+    appTheme: appTheme,
+    children: children
   });
 }
 var KittThemeDecorator = makeDecorator({
@@ -8474,7 +8365,21 @@ var KittThemeDecorator = makeDecorator({
   }
 });
 
-var _excluded = ["children"];
+var _excluded$2 = ["as", "children"];
+/**
+ * @deprecated Use react-native Platform instead
+ */
+function StyleWebWrapper(_ref) {
+  var as = _ref.as,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  // 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"];
 /**
  * Display children if match window size options
  *
@@ -8482,7 +8387,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 +8403,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, 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, getStaticMapImageUrl, hex2rgba, matchWindowSize, theme, useBottomSheet, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-browser-all.es.web.js.map