@ornikar/kitt-universal 11.2.0 → 12.0.0

package/dist/index-node-14.17.cjs.js

@@ -10,11 +10,11 @@ const reactNative = require('react-native');
 const kittIcons = require('@ornikar/kitt-icons');
 const bottomSheet$1 = require('@gorhom/bottom-sheet');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
-const styled = require('styled-components/native');
 const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
 const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
+const styled = require('styled-components/native');
 const libphonenumberJs = require('libphonenumber-js');
 const Svg = require('react-native-svg');
 const picker$1 = require('@react-native-picker/picker');
@@ -39,9 +39,9 @@ function _interopNamespace(e) {
 
 const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
-const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const WebBrowser__namespace = /*#__PURE__*/_interopNamespace(WebBrowser);
 const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
+const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
 
 const View = nativeBase.View;
@@ -1052,6 +1052,10 @@ const textArea = {
   minHeight: 120
 };
 
+const timePicker = {
+  minWidth: 100
+};
+
 const forms = {
   datePicker,
   input,
@@ -1060,7 +1064,8 @@ const forms = {
   textArea,
   checkbox,
   inputTag,
-  radioButtonGroup
+  radioButtonGroup,
+  timePicker
 };
 
 const webAnimationContentDuration = 600;
@@ -1150,6 +1155,8 @@ const iconButton = {
 
 const listItem = {
   padding: '12px 16px',
+  verticalPadding: 12,
+  horizontalPadding: 16,
   borderColor: colors.separator,
   borderWidth: 1,
   innerMargin: 8
@@ -1191,6 +1198,8 @@ const picker = {
   },
   android: {
     padding: '12px 24px',
+    verticalPadding: 12,
+    horizontalPadding: 24,
     default: {
       backgroundColor: colors.transparent
     },
@@ -1289,6 +1298,8 @@ const skeleton = {
 const tag = {
   borderRadius: 10,
   padding: '2px 12px',
+  verticalPadding: 2,
+  horizontalPadding: 12,
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
@@ -1365,6 +1376,27 @@ const tooltip = {
   }
 };
 
+const 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
+    }
+  }
+};
+
 const breakpoints = {
   values: {
     base: 0,
@@ -1416,7 +1448,8 @@ const theme = {
   tooltip,
   typography,
   fullscreenModal,
-  actionCard
+  actionCard,
+  verticalSteps
 };
 
 const KittThemeContext = /*#__PURE__*/React.createContext({
@@ -2058,7 +2091,7 @@ function ButtonPadding({
   });
 }
 
-function DisabledBorder$1() {
+function DisabledBorder() {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     position: "absolute",
     top: 0,
@@ -2262,7 +2295,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
           isPressed: isPressed,
           isFocused: isFocused,
           children: children
-        }), disabled ? /*#__PURE__*/jsxRuntime.jsx(DisabledBorder$1, {}) : null, /*#__PURE__*/jsxRuntime.jsx(FocusBorder, {
+        }), disabled ? /*#__PURE__*/jsxRuntime.jsx(DisabledBorder, {}) : null, /*#__PURE__*/jsxRuntime.jsx(FocusBorder, {
           type: type,
           variant: variant,
           isFocused: isFocused || isFocusedInternal,
@@ -2695,21 +2728,17 @@ function ModalBehaviour({
 }
 ModalBehaviour.CloseButton = CloseButton;
 
-// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-const OverlayPressable = /*#__PURE__*/styled__default(reactNative.Pressable).withConfig({
-  displayName: "Overlay__OverlayPressable",
-  componentId: "kitt-universal__sc-1cz1gbr-0"
-})(({
-  theme
-}) => ({
-  ...reactNative.StyleSheet.absoluteFillObject,
-  backgroundColor: theme.kitt.colors.overlay.dark
-}));
 function Overlay({
   onPress
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
     accessibilityRole: "none",
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    backgroundColor: "kitt.overlay.dark",
     onPress: onPress
   });
 }
@@ -3108,6 +3137,61 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
+function getBackgroundColor$3({
+  isDisabled,
+  isSelected,
+  isHovered,
+  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({
+  children,
+  variant,
+  size,
+  isHovered,
+  isPressed,
+  isDisabled,
+  isSelected,
+  animatedStyles
+}) {
+  const sx = nativeBase.useSx();
+  const style = sx({
+    position: 'relative',
+    borderRadius: getBorderRadius(variant),
+    backgroundColor: getBackgroundColor$3({
+      isDisabled,
+      isSelected,
+      isHovered,
+      isPressed
+    }),
+    paddingX: size === 'small' ? 'kitt.4' : {
+      base: 'kitt.4',
+      small: 'kitt.6'
+    },
+    paddingY: size === 'small' ? 'kitt.2' : {
+      base: 'kitt.4',
+      small: 'kitt.6'
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [style, animatedStyles],
+    children: children
+  });
+}
+
 const useNativeAnimation$2 = ({
   selected,
   disabled,
@@ -3201,80 +3285,7 @@ function getCurrentTextColor$1({
   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;
-}
-const DisabledBorder = /*#__PURE__*/styled__default(reactNative.View).withConfig({
-  displayName: "ChoiceItem__DisabledBorder",
-  componentId: "kitt-universal__sc-wuv3y6-0"
-})(["border-radius:", "px;", ";"], ({
-  theme,
-  $variant
-}) => getBorderRadius(theme.kitt.choices.item.borderRadius, $variant), ({
-  theme
-}) => {
-  const {
-    width,
-    color
-  } = theme.kitt.choices.item.disabled.border;
-  return styled.css(["border:", "px solid ", ";"], width, color);
-});
-const ChoiceItemView = /*#__PURE__*/styled__default(reactNative.Platform.OS === 'web' ? reactNative.View : Animated__default.View).withConfig({
-  displayName: "ChoiceItem__ChoiceItemView",
-  componentId: "kitt-universal__sc-wuv3y6-1"
-})(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], ({
-  theme,
-  $variant
-}) => getBorderRadius(theme.kitt.choices.item.borderRadius, $variant), ({
-  theme,
-  $isHovered,
-  $isPressed,
-  $isDisabled,
-  $isSelected
-}) => {
-  const {
-    hoverWhenSelected,
-    hover,
-    disabled,
-    selected,
-    pressed,
-    default: defaultBackground
-  } = theme.kitt.choices.item.backgroundColor;
-  if ($isDisabled) return disabled;
-  if ($isSelected && $isHovered) return hoverWhenSelected;
-  if ($isPressed) return pressed;
-  if ($isHovered) return hover;
-  if ($isSelected) return selected;
-  return defaultBackground;
-}, ({
-  theme,
-  $size
-}) => {
-  const {
-    base,
-    small
-  } = theme.kitt.choices.item.padding;
-  if ($size === 'small') {
-    return styled.css(["padding:", "px ", "px;"], base / 2, base);
-  }
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, styled.css(["padding:", "px;"], small), styled.css(["padding:", "px;"], base));
-}, ({
-  theme
-}) => {
-  if (reactNative.Platform.OS !== 'web') return undefined;
-  const {
-    property,
-    duration,
-    timingFunction
-  } = theme.kitt.choices.item.transition;
-  return styled.css(["transition:", " ", "ms ", ";"], property, duration, timingFunction);
-});
 function ChoiceItem({
   type = 'button',
   value,
@@ -3328,14 +3339,14 @@ function ChoiceItem({
     children: ({
       isHovered,
       isPressed
-    }) => /*#__PURE__*/jsxRuntime.jsxs(ChoiceItemView, {
-      style: reactNative.Platform.OS !== 'web' ? [backgroundStyles] : undefined,
-      $isHovered: isHovered || isHoveredInternal,
-      $isDisabled: disabled,
-      $isSelected: selected,
-      $isPressed: isPressed || isPressedInternal,
-      $variant: variant,
-      $size: size,
+    }) => /*#__PURE__*/jsxRuntime.jsxs(AnimatedChoiceItemView, {
+      animatedStyles: backgroundStyles,
+      isHovered: isHovered || isHoveredInternal,
+      isDisabled: disabled,
+      isSelected: selected,
+      isPressed: isPressed || isPressedInternal,
+      variant: variant,
+      size: size,
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography.SetDefaultColor, {
         value: getCurrentTextColor$1({
           isDisabled: disabled,
@@ -3344,31 +3355,32 @@ function ChoiceItem({
           isHovered: isHovered || isHoveredInternal
         }),
         children: children
-      }), disabled ? /*#__PURE__*/jsxRuntime.jsx(DisabledBorder, {
-        $variant: variant,
-        style: reactNative.StyleSheet.absoluteFillObject
+      }), disabled ? /*#__PURE__*/jsxRuntime.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]
     })
   });
 }
 
-const ChoiceItemContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
-  displayName: "ChoiceItemContainer",
-  componentId: "kitt-universal__sc-17uuimx-0"
-})(["", ""], ({
-  theme,
-  $isLast,
-  $direction
-}) => {
-  const {
-    row,
-    column
-  } = theme.kitt.choices.spacing;
-  if ($direction === 'row') {
-    return styled.css(["margin-right:", "px;"], $isLast ? 0 : row);
-  }
-  return styled.css(["margin-bottom:", "px;"], $isLast ? 0 : column);
-});
+function ChoiceItemContainer({
+  children,
+  direction,
+  isLast
+}) {
+  const currentItemMarginValue = isLast ? undefined : 'kitt.3';
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    marginRight: direction === 'row' ? currentItemMarginValue : undefined,
+    marginBottom: direction === 'column' ? currentItemMarginValue : undefined,
+    children: children
+  });
+}
 
 function ChoicesContainer({
   direction,
@@ -3428,8 +3440,8 @@ function Choices({
         ...sharedProps
       });
       return /*#__PURE__*/jsxRuntime.jsx(ChoiceItemContainer, {
-        $direction: direction,
-        $isLast: index === childrenArray.length - 1,
+        direction: direction,
+        isLast: index === childrenArray.length - 1,
         children: element
       }, child.key);
     })
@@ -4193,10 +4205,14 @@ function stringToNumber(text) {
   return parseInt(text, 10);
 }
 
-const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputTextContainer",
-  componentId: "kitt-universal__sc-8j6fjq-0"
-})(["position:relative;"]);
+function InputTextContainer({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    position: "relative",
+    children: children
+  });
+}
 
 const InputText = /*#__PURE__*/React.forwardRef(({
   id,
@@ -4219,7 +4235,6 @@ const InputText = /*#__PURE__*/React.forwardRef(({
   });
   const shouldHandleSingleLineOnIOS = reactNative.Platform.OS === 'ios' && !multiline;
   return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
-    $isDisabled: disabled,
     children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
       ref: ref,
       multiline: multiline,
@@ -4254,7 +4269,7 @@ const InputText = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-function getCurrentInternalForcedState({
+function getCurrentInternalForcedState$1({
   isDisabled,
   isHoveredInternal,
   isFocusedInternal,
@@ -4280,7 +4295,7 @@ const InputPart = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
-    internalForceState: getCurrentInternalForcedState({
+    internalForceState: getCurrentInternalForcedState$1({
       isDisabled: disabled,
       isHoveredInternal,
       isFocusedInternal,
@@ -4885,7 +4900,7 @@ const ModalView = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.spacing * 20, ({
   theme
 }) => theme.kitt.spacing * 4);
-const ContentView$1 = /*#__PURE__*/styled__default.View.withConfig({
+const ContentView = /*#__PURE__*/styled__default.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:", ";"], ({
@@ -4917,7 +4932,7 @@ function Modal({
       children: /*#__PURE__*/jsxRuntime.jsxs(ModalView, {
         children: [/*#__PURE__*/jsxRuntime.jsx(Overlay, {
           onPress: onClose
-        }), /*#__PURE__*/jsxRuntime.jsx(ContentView$1, {
+        }), /*#__PURE__*/jsxRuntime.jsx(ContentView, {
           children: children
         })]
       })
@@ -5307,31 +5322,6 @@ const InputPhone = /*#__PURE__*/React.forwardRef(({
 });
 
 const getTypographyColor = type => type ? 'white' : 'black';
-const InputTagContainer = /*#__PURE__*/styled__default(reactNative.View).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;"], ({
-  theme
-}) => theme.kitt.spacing * 2, ({
-  theme,
-  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;
-}, ({
-  theme
-}) => theme.kitt.forms.inputTag.borderRadius);
-const IconContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
-  displayName: "InputTag__IconContainer",
-  componentId: "kitt-universal__sc-1511dsf-1"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.spacing);
 function InputTag({
   children,
   type,
@@ -5339,15 +5329,23 @@ function InputTag({
 }) {
   const typographyColor = getTypographyColor(type);
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsxs(InputTagContainer, {
-    type: type,
-    children: [icon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    overflow: "hidden",
+    paddingX: "kitt.2",
+    backgroundColor: `kitt.forms.inputTag.${type || 'default'}.backgroundColor`,
+    borderRadius: "kitt.forms.inputTag.borderRadius",
+    children: [icon ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      marginRight: "kitt.1",
       children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
         icon: icon,
         size: theme.kitt.forms.inputTag.iconSize,
         color: typographyColor
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
       base: "body-small",
       color: typographyColor,
       children: children
@@ -5527,45 +5525,23 @@ const Radio = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-const StyledAnimatedView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
-  displayName: "AnimatedContainer__StyledAnimatedView",
-  componentId: "kitt-universal__sc-qzh0y7-0"
-})(["border-width:", "px;border-top-left-radius:", "px;border-bottom-left-radius:", "px;border-top-right-radius:", "px;border-bottom-right-radius:", "px;border-left-width:", "px;"], ({
-  theme
-}) => theme.kitt.forms.radioButtonGroup.item.borderWidth, ({
-  theme,
-  $isFirst
-}) => $isFirst ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0, ({
-  theme,
-  $isFirst
-}) => $isFirst ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0, ({
-  theme,
-  $isLast
-}) => $isLast ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0, ({
-  theme,
-  $isLast
-}) => $isLast ? theme.kitt.forms.radioButtonGroup.item.borderRadius : 0, ({
-  theme,
-  $isFirst
-}) => $isFirst ? theme.kitt.forms.radioButtonGroup.item.borderWidth : 0);
 function AnimatedContainer({
   children,
-  isFocused,
-  isPressed,
-  isSelected,
-  isDisabled,
   isFirst,
   isLast,
   animatedStyles
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAnimatedView, {
-    style: [animatedStyles],
-    $isFocused: isFocused,
-    $isPressed: isPressed,
-    $isSelected: isSelected,
-    $isDisabled: isDisabled,
-    $isFirst: isFirst,
-    $isLast: isLast,
+  const sx = nativeBase.useSx();
+  const styles = sx({
+    borderWidth: 'kitt.forms.radioButtonGroup.item.borderWidth',
+    borderTopLeftRadius: isFirst ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderBottomLeftRadius: isFirst ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderTopRightRadius: isLast ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderBottomRightRadius: isLast ? 'kitt.forms.radioButtonGroup.item.borderRadius' : 0,
+    borderLeftWidth: isFirst ? 'kitt.forms.radioButtonGroup.item.borderWidth' : 0
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [styles, animatedStyles],
     children: children
   });
 }
@@ -6251,89 +6227,46 @@ function useKittMapConfig() {
   return context;
 }
 
-const ContentView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "ListItemContent__ContentView",
-  componentId: "kitt-universal__sc-57q0u9-0"
-})(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent({
   children,
   ...rest
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(ContentView, {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignSelf: "center",
+    flexBasis: "0%",
+    flexGrow: 1,
+    flexShrink: 0,
     ...rest,
     children: children
   });
 }
 
-const SideContainerView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "ListItemSideContent__SideContainerView",
-  componentId: "kitt-universal__sc-1vajiw-0"
-})(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
-  theme,
-  side
-}) => side === 'right' ? `${theme.kitt.listItem.innerMargin}px` : 0, ({
-  theme,
-  side
-}) => side === 'left' ? `${theme.kitt.listItem.innerMargin}px` : 0);
-
 // Handles the vertical alignment of the side elements of the list item
 function ListItemSideContainer({
   children,
   side = 'left',
   ...rest
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(SideContainerView, {
-    side: side,
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    flexDirection: "row",
+    marginLeft: side === 'right' ? 'kitt.2' : undefined,
+    marginRight: side === 'left' ? 'kitt.2' : undefined,
     ...rest,
     children: children
   });
 }
-const SideContentView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "ListItemSideContent__SideContentView",
-  componentId: "kitt-universal__sc-1vajiw-1"
-})(["align-self:", ";"], ({
-  align
-}) => align);
 function ListItemSideContent({
   children,
   align = 'auto',
   ...rest
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(SideContentView, {
-    align: align,
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignSelf: align,
     ...rest,
     children: children
   });
 }
 
-const ContainerView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "ListItem__ContainerView",
-  componentId: "kitt-universal__sc-2afp9s-0"
-})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], ({
-  withPadding,
-  theme
-}) => withPadding ? theme.kitt.listItem.padding : 0, ({
-  theme,
-  borders
-}) => {
-  const {
-    borderWidth
-  } = theme.kitt.listItem;
-  if (borders === 'top') {
-    return `border-top-width: ${borderWidth}px`;
-  }
-  if (borders === 'bottom') {
-    return `border-bottom-width: ${borderWidth}px`;
-  }
-  if (borders === 'both') {
-    return styled.css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
-  }
-  return 'border: none';
-}, ({
-  theme
-}) => theme.kitt.listItem.borderColor, ({
-  theme
-}) => theme.kitt.colors.uiBackgroundLight);
 function ListItem({
   children,
   withPadding,
@@ -6352,9 +6285,14 @@ function ListItem({
   const containerProps = onPress ? undefined : rest;
   return /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
     ...wrapperProps,
-    children: /*#__PURE__*/jsxRuntime.jsxs(ContainerView, {
-      withPadding: withPadding,
-      borders: borders,
+    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      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__*/jsxRuntime.jsx(ListItemSideContainer, {
         side: "left",
@@ -6871,6 +6809,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
         },
@@ -6894,6 +6897,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,
@@ -6992,6 +7006,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?.colors
@@ -7027,6 +7084,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         cardModal: {
           borderRadius: theme.cardModal.borderRadius
         },
+        choices: {
+          item: {
+            borderRadius: theme.choices.item.borderRadius
+          }
+        },
         dialogModal: {
           borderRadius: theme.dialogModal.borderRadius
         },
@@ -7034,6 +7096,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
@@ -7055,6 +7120,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderRadius: theme.iconButton.borderRadius
         },
+        tag: {
+          borderRadius: theme.tag.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -7166,6 +7234,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
         },
@@ -7192,6 +7267,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?.borderWidths
@@ -7266,6 +7378,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           },
           textArea: {
             minHeight: theme.forms.textArea.minHeight
+          },
+          timePicker: {
+            minWidth: theme.forms.timePicker.minWidth
           }
         },
         iconButton: {
@@ -7278,6 +7393,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.fullscreenModal.header.height
           }
         },
+        pageLoader: {
+          size: theme.pageLoader.size
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -7297,6 +7415,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?.sizes
@@ -7345,10 +7473,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?.space
@@ -8208,30 +8352,27 @@ function AnimatedFilledCircle() {
   });
 }
 
-const PageLoaderContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "PageLoader__PageLoaderContainer",
-  componentId: "kitt-universal__sc-1l9zwqg-0"
-})(["transform:scale(-1) rotate(90deg);position:relative;width:", "px;height:", "px;"], ({
-  theme
-}) => theme.kitt.pageLoader.size, ({
-  theme
-}) => theme.kitt.pageLoader.size);
 function PageLoader() {
-  return /*#__PURE__*/jsxRuntime.jsxs(PageLoaderContainer, {
+  const sharedTransformStyle = {
+    style: {
+      /* Needed to make the animation starting from the top of the circles */
+      transform: [{
+        rotate: '90deg'
+      }, {
+        scale: -1
+      }]
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    position: "relative",
+    height: "kitt.pageLoader.size",
+    width: "kitt.pageLoader.size",
+    _ios: sharedTransformStyle,
+    _android: sharedTransformStyle,
     children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedBackgroundCircle, {}), /*#__PURE__*/jsxRuntime.jsx(AnimatedFilledCircle, {})]
   });
 }
 
-const ContainerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "PickerItem__ContainerPressable",
-  componentId: "kitt-universal__sc-w7n3sn-0"
-})(["padding:", ";background-color:", ";"], ({
-  theme
-}) => theme.kitt.picker.android.padding, ({
-  theme,
-  $isSelected
-}) => $isSelected ? theme.kitt.picker.android.selected.backgroundColor : theme.kitt.picker.android.default.backgroundColor);
-
 // This item is for Android only, iOS uses its own implementation and web is not supported yet
 function PickerItem({
   label,
@@ -8239,13 +8380,19 @@ function PickerItem({
   isSelected,
   onPress
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(ContainerPressable, {
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityState: {
       selected: isSelected
     },
-    $isSelected: isSelected,
-    onPress: onPress ? () => onPress(value) : undefined,
+    backgroundColor: isSelected ? 'kitt.picker.android.item.selected.backgroundColor' : 'kitt.picker.android.item.default.backgroundColor',
+    paddingX: "kitt.picker.android.horizontalPadding",
+    paddingY: "kitt.picker.android.verticalPadding",
+    onPress: () => {
+      if (onPress) {
+        onPress(value);
+      }
+    },
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
       base: "body",
       color: isSelected ? 'white' : undefined,
@@ -8264,61 +8411,77 @@ function Picker({
   onValueSelected,
   onClose
 }) {
+  const sx = nativeBase.useSx();
+
   // Max height is based on base Modal sizes (which are not themified): padding (4*20*2) + footer (58) + header (58) + default iOS picker height (216)
   const [isMatchingMaxHeight] = nativeBase.useMediaQuery({
     maxHeight: 492
   });
+  const iosItemStyle = sx({
+    fontSize: 'baseAndSmall.body',
+    lineHeight: 'baseAndSmall.body',
+    fontFamily: 'bodies.regular',
+    color: 'kitt.typography.black-light',
+    // As it is displayed in a modal, we must hard code an height to ensure that the picker doesn't bleed out of it
+    // We can't set a percentage as it will be computed based on the page height
+    height: isMatchingMaxHeight ? 'kitt.picker.ios.landscape.height' : 'kitt.picker.ios.default.height'
+  });
+  const getIosTextStyle = isSelected => {
+    return sx({
+      color: isSelected ? 'kitt.picker.ios.selected.color' : undefined
+    });
+  };
   const [value, setValue] = React.useState(initialValue);
-  return /*#__PURE__*/jsxRuntime.jsxs(Modal, {
+  return /*#__PURE__*/jsxRuntime.jsx(CardModal.ModalBehaviour, {
     visible: isVisible,
     onClose: onClose,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-        base: "body",
-        variant: "bold",
-        children: title
-      })
-    }), reactNative.Platform.OS === 'ios' ? /*#__PURE__*/jsxRuntime.jsx(picker$1.Picker, {
-      testID: testID,
-      selectedValue: value
-      // As it is displayed in a modal, we must hard code an height to ensure that the picker doesn't bleed out of it
-      // We can't set a percentage as it will be computed based on the page height
-      ,
-      itemStyle: {
-        ...theme.picker.ios.default,
-        height: isMatchingMaxHeight ? theme.picker.ios.landscape.height : theme.picker.ios.default.height
-      },
-      onValueChange: itemValue => setValue(itemValue),
-      children: React__default.Children.map(children, child => {
-        const item = child;
-
-        // iOS Picker doesn't support a custom Item component, we need to override its props manually for the selected one
-        return /*#__PURE__*/React.cloneElement(item, {
-          color: item.props.value === value ? theme.picker.ios.selected.color : undefined
-        });
-      })
-    }) : /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
-      testID: testID,
-      children: React__default.Children.map(children, child => {
-        const item = child;
-        return /*#__PURE__*/React.cloneElement(item, {
-          onPress: newValue => setValue(newValue),
-          isSelected: item.props.value === value
-        });
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-        stretch: true,
-        type: "primary",
-        onPress: () => {
-          onValueSelected(value);
-          onClose();
-        },
-        children: validateButtonLabel || /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
-          id: "kitt-universal.Picker.validate"
+    children: /*#__PURE__*/jsxRuntime.jsxs(CardModal, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(CardModal.Header, {
+        right: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+          onPress: onClose
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+          base: "body",
+          variant: "bold",
+          children: title
         })
-      })
-    })]
+      }), reactNative.Platform.OS === 'ios' ? /*#__PURE__*/jsxRuntime.jsx(picker$1.Picker, {
+        testID: testID,
+        selectedValue: value,
+        itemStyle: iosItemStyle,
+        onValueChange: itemValue => setValue(itemValue),
+        children: React__default.Children.map(children, child => {
+          const item = child;
+
+          // iOS Picker doesn't support a custom Item component, we need to override its props manually for the selected one
+          return /*#__PURE__*/React.cloneElement(item, {
+            color: getIosTextStyle(item.props.value === value).color
+          });
+        })
+      }) : /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+        testID: testID,
+        children: React__default.Children.map(children, child => {
+          const item = child;
+          return /*#__PURE__*/React.cloneElement(item, {
+            onPress: newValue => setValue(newValue),
+            isSelected: item.props.value === value
+          });
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(CardModal.Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          stretch: true,
+          type: "primary",
+          onPress: () => {
+            onValueSelected(value);
+            onClose();
+          },
+          children: validateButtonLabel || /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+            id: "kitt-universal.Picker.validate"
+          })
+        })
+      })]
+    })
   });
 }
 Picker.Item = PickerItem;
@@ -8372,14 +8535,6 @@ function SegmentedProgressBar({
   });
 }
 
-const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "SkeletonContent__Container",
-  componentId: "kitt-universal__sc-1u3chjb-0"
-})(["background-color:", ";border-color:", ";height:100%;width:100%;"], ({
-  theme
-}) => theme.kitt.skeleton.backgroundColor, ({
-  theme
-}) => theme.kitt.skeleton.flareColor);
 const AnimatedLinearGradient = Animated__default.createAnimatedComponent(expoLinearGradient.LinearGradient);
 function SkeletonContent({
   isLoading,
@@ -8410,11 +8565,15 @@ function SkeletonContent({
     };
     _f.asString = "function _f(){const{interpolate,sharedX,width}=jsThis._closure;{return{transform:[{translateX:interpolate(sharedX.value,[0,1],[-width,width])}]};}}";
     _f.__workletHash = 1670955855244;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (42:47)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (36:47)";
     _f.__optimalization = 3;
     return _f;
   }());
-  return /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    height: "100%",
+    width: "100%",
+    backgroundColor: "kitt.skeleton.backgroundColor",
+    borderColor: "kitt.skeleton.flareColor",
     children: /*#__PURE__*/jsxRuntime.jsx(AnimatedLinearGradient, {
       colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
       locations: [0.1, 0.5, 0.9],
@@ -8729,17 +8888,17 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
-const Flex = /*#__PURE__*/styled__default.View.withConfig({
-  shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
-}).withConfig({
-  displayName: "Flex",
-  componentId: "kitt-universal__sc-15q3v3h-0"
-})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], ({
-  direction
-}) => direction, ({
-  theme,
-  padding = 0
-}) => padding * theme.kitt.spacing);
+function Flex({
+  direction,
+  wrap = 'wrap',
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    ...props,
+    flexDirection: direction,
+    flexWrap: wrap
+  });
+}
 
 const storyPadding = 'kitt.4';
 
@@ -9024,26 +9183,6 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-const Container$1 = /*#__PURE__*/styled__default.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;"], ({
-  theme,
-  type,
-  variant
-}) => theme.kitt.tag[type][variant].backgroundColor, ({
-  theme,
-  type,
-  variant
-}) => theme.kitt.tag[type][variant].borderWidth, ({
-  theme,
-  type,
-  variant
-}) => theme.kitt.tag[type][variant].borderColor, ({
-  theme
-}) => theme.kitt.tag.padding, ({
-  theme
-}) => theme.kitt.tag.borderRadius);
 const getLabelColor = (type, variant) => {
   switch (type) {
     case 'danger':
@@ -9073,9 +9212,14 @@ function Tag({
   type = 'default',
   variant = 'fill'
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
-    type: type,
-    variant: variant,
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignSelf: "flex-start",
+    borderRadius: "kitt.tag.borderRadius",
+    paddingX: "kitt.tag.horizontalPadding",
+    paddingY: "kitt.tag.verticalPadding",
+    backgroundColor: `kitt.tag.${type}.${variant}.backgroundColor`,
+    borderColor: `kitt.tag.${type}.${variant}.borderColor`,
+    borderWidth: `kitt.tag.${type}.${variant}.borderWidth`,
     children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
       base: "body-xsmall",
       color: getLabelColor(type, variant),
@@ -9084,176 +9228,187 @@ function Tag({
   });
 }
 
-/** @deprecated use native-base instead for SSR compatibility */
-const getTypographyTypeConfigKey = theme => {
-  const isMediumOrAbove = theme.responsive.matchWindowSize({
-    minWidth: KittBreakpoints.MEDIUM
-  });
-  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
-};
-/** @deprecated this mixin is not SSR compatible */
-const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
-  theme,
-  $state
-}) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
-  theme
-}) => theme.kitt.forms.input.borderWidth, ({
-  theme
-}) => theme.kitt.forms.input.borderRadius, ({
-  theme,
-  $state
-}) => theme.kitt.forms.input.states[$state].borderColor, ({
-  theme
-}) => {
-  const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize}px`;
-}, ({
-  theme,
-  $state
-}) => theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states.default.color, ({
-  theme
-}) => reactNative.Platform.OS === 'web' ? theme.kitt.typography.types.bodies.fontFamily.web.regular : theme.kitt.typography.types.bodies.fontFamily.native.regular);
-
-function Title({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body",
-      variant: "bold",
-      children: children
-    })
-  });
-}
 function ModalDateTimePicker({
   title,
   visible,
   value,
   validateButtonLabel,
+  testID,
+  pickerTestID,
   onChange,
   onClose
 }) {
   const [currentValue, setCurrentValue] = React.useState(value);
 
   // Prevent unsynced value between the modal and its parent state
-
-  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
+  const handleClose = () => {
+    setCurrentValue(value);
+    onClose();
+  };
+  const handleChange = nextDate => {
+    if (nextDate) setCurrentValue(nextDate);
+  };
+  const buttonContent = validateButtonLabel || /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+    id: "kitt-universal.ModalDateTimePicker.confirm"
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(CardModal.ModalBehaviour, {
     visible: Boolean(visible),
-    onClose: () => {
-      setCurrentValue(value);
-      onClose();
-    },
-    children: visible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [title ? /*#__PURE__*/jsxRuntime.jsx(Title, {
-        children: title
-      }) : null, /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
+    onClose: handleClose,
+    children: /*#__PURE__*/jsxRuntime.jsxs(CardModal, {
+      testID: testID,
+      children: [title ? /*#__PURE__*/jsxRuntime.jsx(CardModal.Header, {
+        title: title,
+        right: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+          testID: "timePicker.ModalDateTimePicker.closeButton",
+          icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+          onPress: handleClose
+        })
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(CardModal.Body, {
         children: /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
           is24Hour: true,
-          testID: "timePicker.ModalDateTimePicker.dateTimeNativePicker",
+          testID: pickerTestID,
           value: currentValue,
           mode: "time",
           display: reactNative.Platform.OS === 'ios' ? 'spinner' : 'default',
-          onChange: (_event, date) => setCurrentValue(prev => {
-            return date || prev;
-          })
+          onChange: (event, date) => handleChange(date)
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
+      }), /*#__PURE__*/jsxRuntime.jsx(CardModal.Footer, {
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
           stretch: true,
+          testID: "timePicker.ModalDateTimePicker.submitButton",
           type: "primary",
           onPress: () => {
             onChange(currentValue);
           },
-          children: validateButtonLabel ? /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
-            children: validateButtonLabel
-          }) : /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
-            id: "kitt-universal.ModalDateTimePicker.confirm"
-          })
+          children: buttonContent
         })
       })]
-    }) : null
+    })
   });
 }
 
-const timePickerPlaceholder = '--:--';
-const formatNumberToTimeString = time => `${String(time).padStart(2, '0')}`;
-const formatDateToTimeString = date => `${formatNumberToTimeString(date.getHours())}:${formatNumberToTimeString(date.getMinutes())}`;
-const useTimePicker = (value, onChange, onBlur, disabled, defaultValue, isDefaultVisible) => {
-  const [isTimePickerModalVisible, setIsTimePickerModalVisible] = React.useState(Boolean(isDefaultVisible));
-  const todayAtNoon = React.useMemo(() => {
-    const now = new Date(2000, 0, 1, 12);
-    return new Date(now.getFullYear(), now.getMonth(), now.getDay(), 12);
-  }, []);
-  const defaultDate = defaultValue || todayAtNoon;
-  const dateTimePickerValue = value || defaultDate;
-  const displayedValue = value === null ? timePickerPlaceholder : formatDateToTimeString(dateTimePickerValue);
-  const timePickerState = isTimePickerModalVisible ? 'focus' : 'default';
-  return {
-    dateTimePickerValue,
-    displayedValue,
-    timePickerState,
-    isTimePickerModalVisible,
-    handleInputPress: () => {
-      if (disabled) {
-        return;
-      }
-      setIsTimePickerModalVisible(true);
-    },
-    handleTimeChange: date => {
-      setIsTimePickerModalVisible(false);
-      onChange(date || defaultDate);
-      onBlur();
-    },
-    handleModalClose: () => setIsTimePickerModalVisible(false)
-  };
-};
+function formatNumberToTimeString(time) {
+  return `${String(time).padStart(2, '0')}`;
+}
+function formatDateToTimeString(date) {
+  return `${formatNumberToTimeString(date.getHours())}:${formatNumberToTimeString(date.getMinutes())}`;
+}
+
+function getCurrentInternalForcedState({
+  isDisabled,
+  isHoveredInternal,
+  isFocusedInternal,
+  isPressedInternal
+}) {
+  if (isDisabled) return 'disabled';
+  if (isHoveredInternal) return 'hover';
+  if (isFocusedInternal) return 'focus';
+  if (isPressedInternal) return 'hover';
+  return 'default';
+}
+
+function TimePickerPressable({
+  testID,
+  disabled,
+  stretch,
+  value,
+  placeholder,
+  isHoveredInternal,
+  isFocusedInternal,
+  isPressedInternal,
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    testID: testID,
+    disabled: disabled,
+    accessibilityRole: "button",
+    width: createResponsiveStyleFromProp(stretch, '100%', 'kitt.forms.timePicker.minWidth'),
+    onPress: onPress,
+    children: ({
+      isHovered,
+      isFocused,
+      isPressed
+    }) => /*#__PURE__*/jsxRuntime.jsxs(View, {
+      position: "relative",
+      children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(View, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        height: "100%",
+        width: "100%"
+      })]
+    })
+  });
+}
 
-const Container = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "TimePicker__Container",
-  componentId: "kitt-universal__sc-18zhpwp-0"
-})(["", " width:100px;height:40px;justify-content:center;align-items:center;"], styledTextInputMixin);
 function TimePicker({
   title,
-  state = 'default',
   disabled = false,
-  forceDefaultValue,
+  stretch,
   value,
   validateButtonLabel,
   isDefaultVisible,
+  placeholder = '--:--',
+  testID,
+  modalTestID,
+  pickerTestID = 'timePicker.ModalDateTimePicker.dateTimeNativePicker',
+  isHoveredInternal,
+  isFocusedInternal,
+  isPressedInternal,
   onChange,
   onBlur
 }) {
-  const {
-    dateTimePickerValue,
-    displayedValue,
-    timePickerState,
-    handleInputPress,
-    handleModalClose,
-    handleTimeChange,
-    isTimePickerModalVisible
-  } = useTimePicker(value || null, onChange, onBlur, disabled, forceDefaultValue, isDefaultVisible);
-  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
-    $state: timePickerState === 'default' ? state : timePickerState,
-    accessibilityRole: "button",
-    onPress: handleInputPress,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body",
-      color: displayedValue === timePickerPlaceholder ? 'black-light' : 'black',
-      children: displayedValue
-    }), reactNative.Platform.OS === 'android' && isTimePickerModalVisible ? /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
+  const [currentValue, setCurrentValue] = React.useState(value);
+  const [isPickerVisible, setIsPickerVisible] = React.useState(isDefaultVisible);
+  const handleChange = nextDate => {
+    setCurrentValue(nextDate);
+    setIsPickerVisible(false);
+    if (onChange) onChange(nextDate);
+    if (onBlur) onBlur();
+  };
+  const pickerValue = currentValue || new Date();
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(TimePickerPressable, {
+      testID: testID,
+      disabled: disabled,
+      stretch: stretch,
+      value: currentValue,
+      placeholder: placeholder,
+      isHoveredInternal: isHoveredInternal,
+      isFocusedInternal: isFocusedInternal,
+      isPressedInternal: isPressedInternal,
+      onPress: () => {
+        setIsPickerVisible(true);
+      }
+    }), reactNative.Platform.OS === 'android' && isPickerVisible ? /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
       is24Hour: true,
-      testID: "timePicker.TimePicker.dateTimeNativePicker",
-      value: dateTimePickerValue,
+      testID: pickerTestID,
+      value: pickerValue,
       mode: "time",
       display: "default",
-      onChange: (_event, date) => handleTimeChange(date)
+      onChange: (event, date) => handleChange(date)
     }) : null, reactNative.Platform.OS !== 'android' ? /*#__PURE__*/jsxRuntime.jsx(ModalDateTimePicker, {
+      visible: isPickerVisible,
       title: title,
-      visible: isTimePickerModalVisible,
-      value: dateTimePickerValue,
+      testID: modalTestID,
+      pickerTestID: pickerTestID,
+      value: pickerValue,
       validateButtonLabel: validateButtonLabel,
-      onChange: handleTimeChange,
-      onClose: handleModalClose
+      onChange: handleChange,
+      onClose: () => {
+        setIsPickerVisible(false);
+      }
     }) : null]
   });
 }
@@ -9756,6 +9911,128 @@ function withTheme(WrappedComponent) {
   });
 }
 
+const backgroundColors = {
+  done: 'kitt.verticalSteps.done.icon.backgroundColor',
+  active: 'kitt.verticalSteps.active.icon.backgroundColor',
+  default: 'kitt.verticalSteps.default.icon.backgroundColor'
+};
+function IconStatus({
+  state,
+  index
+}) {
+  if (state === 'done') {
+    return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckIcon, {}),
+      color: "kitt.verticalSteps.done.icon.textColor"
+    });
+  }
+  if (state === 'active') {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      textAlign: "center",
+      variant: "bold",
+      color: "kitt.verticalSteps.active.icon.textColor",
+      children: index + 1
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    textAlign: "center",
+    variant: "bold",
+    color: "kitt.verticalSteps.default.icon.textColor",
+    children: index + 1
+  });
+}
+function StepIcon({
+  index,
+  state = 'default'
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: backgroundColors[state],
+    children: /*#__PURE__*/jsxRuntime.jsx(IconStatus, {
+      state: state,
+      index: index
+    })
+  });
+}
+
+function ExternalStep() {
+  return null;
+}
+function Step({
+  index = 0,
+  children,
+  state = 'default',
+  isLast = false,
+  shouldDisableNextLink = false
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(nativeBase.HStack, {
+    space: "kitt.2",
+    flexGrow: 1,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(View, {
+      marginTop: "kitt.2",
+      paddingY: "kitt.2",
+      backgroundColor: "kitt.white",
+      children: [/*#__PURE__*/jsxRuntime.jsx(StepIcon, {
+        state: state,
+        index: index
+      }), !isLast ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(View, {
+      flexGrow: 1,
+      children: /*#__PURE__*/jsxRuntime.jsx(ActionCard, {
+        variant: "primary",
+        children: children
+      })
+    })]
+  });
+}
+
+function getStepState(index, activeIndex) {
+  if (index === activeIndex) {
+    return 'active';
+  }
+  if (index < activeIndex) {
+    return 'done';
+  }
+  return 'default';
+}
+
+function VerticalSteps({
+  children,
+  activeIndex,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(nativeBase.VStack, {
+    space: "kitt.4",
+    width: "100%",
+    ...props,
+    children: React.Children.map(children, (child, index) => {
+      if ((process.env.NODE_ENV !== "production") && child.type !== ExternalStep) {
+        throw new Error('VerticalSteps only accepts VerticalSteps.Step as children');
+      }
+      const isLast = index === React.Children.count(children) - 1;
+      return /*#__PURE__*/React.createElement(Step, {
+        ...child.props,
+        index,
+        isLast,
+        state: getStepState(index, activeIndex)
+      }, child.props.children);
+    })
+  });
+}
+VerticalSteps.Step = ExternalStep;
+
 exports.useBreakpointValue = nativeBase.useBreakpointValue;
 exports.useClipboard = nativeBase.useClipboard;
 exports.useMediaQuery = nativeBase.useMediaQuery;
@@ -9842,6 +10119,7 @@ exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.VStack = VStack;
+exports.VerticalSteps = VerticalSteps;
 exports.View = View;
 exports.createChoicesComponent = createChoicesComponent;
 exports.createResponsiveStyleFromProp = createResponsiveStyleFromProp;