@ornikar/kitt-universal 11.2.0 → 13.0.0

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

@@ -10,7 +10,6 @@ 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');
@@ -20,7 +19,6 @@ const Svg = require('react-native-svg');
 const picker$1 = require('@react-native-picker/picker');
 const expoLinearGradient = require('expo-linear-gradient');
 const reactNative$1 = require('@floating-ui/react-native');
-const react = require('@linaria/react');
 const addons = require('@storybook/addons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
@@ -39,7 +37,6 @@ 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 Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
@@ -932,6 +929,9 @@ const inputStatesStyle = {
     color: colors.black
   }
 };
+const webAnimationDuration = '200ms';
+const webAnimationTimingFunction = 'ease-in-out';
+const webAnimationProperty = 'border-color';
 const input = {
   minHeight: 40,
   color: {
@@ -951,9 +951,9 @@ const input = {
     vertical: 5
   },
   transition: {
-    property: 'border-color',
-    duration: '200ms',
-    timingFunction: 'ease-in-out'
+    property: webAnimationProperty,
+    duration: webAnimationDuration,
+    timingFunction: webAnimationTimingFunction
   },
   states: inputStatesStyle
 };
@@ -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,25 +1155,34 @@ const iconButton = {
 
 const listItem = {
   padding: '12px 16px',
+  verticalPadding: 12,
+  horizontalPadding: 16,
   borderColor: colors.separator,
   borderWidth: 1,
   innerMargin: 8
 };
 
+const pageLoaderSize = 60;
+const pageLoaderStrokeWidth = 3;
+const webAnimationDelay = 500;
+const webAnimationCircleBackgroundFillDuration = 1000;
+const webAnimationFilledCircleFillDuration = 1800;
+const webAnimationFilledCircleRotationDuration = 2160;
+const fillEasingFunction = [0.39, 0.575, 0.565, 1];
 const 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
   }
 };
 
@@ -1191,6 +1205,8 @@ const picker = {
   },
   android: {
     padding: '12px 24px',
+    verticalPadding: 12,
+    horizontalPadding: 24,
     default: {
       backgroundColor: colors.transparent
     },
@@ -1266,9 +1282,11 @@ const shadows = {
   }
 };
 
+const skeletonBackgroundColor = lateOceanColorPalette.black100;
+const skeletonFlareColor = lateOceanColorPalette.black200;
 const skeleton = {
-  backgroundColor: lateOceanColorPalette.black100,
-  flareColor: lateOceanColorPalette.black200,
+  backgroundColor: skeletonBackgroundColor,
+  flareColor: skeletonFlareColor,
   animationDuration: 1000,
   shape: {
     bar: {
@@ -1289,6 +1307,8 @@ const skeleton = {
 const tag = {
   borderRadius: 10,
   padding: '2px 12px',
+  verticalPadding: 2,
+  horizontalPadding: 12,
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
@@ -1365,6 +1385,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 +1457,8 @@ const theme = {
   tooltip,
   typography,
   fullscreenModal,
-  actionCard
+  actionCard,
+  verticalSteps
 };
 
 const KittThemeContext = /*#__PURE__*/React.createContext({
@@ -2058,7 +2100,7 @@ function ButtonPadding({
   });
 }
 
-function DisabledBorder$1() {
+function DisabledBorder() {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     position: "absolute",
     top: 0,
@@ -2262,7 +2304,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,
@@ -2644,18 +2686,18 @@ function ModalBehaviourPortal({
   });
 }
 
-const OnCloseContext$1 = /*#__PURE__*/React.createContext(() => {});
+const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
 function OnCloseProvider({
   children,
   onClose
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext$1.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
     value: onClose,
     children: children
   });
 }
 function useOnCloseModalBehaviour() {
-  const onClose = React.useContext(OnCloseContext$1);
+  const onClose = React.useContext(OnCloseContext);
   return onClose;
 }
 
@@ -2695,21 +2737,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 +3146,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 +3294,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 +3348,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 +3364,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 +3449,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 +4214,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 +4244,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 +4278,7 @@ const InputText = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-function getCurrentInternalForcedState({
+function getCurrentInternalForcedState$1({
   isDisabled,
   isHoveredInternal,
   isFocusedInternal,
@@ -4280,7 +4304,7 @@ const InputPart = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
-    internalForceState: getCurrentInternalForcedState({
+    internalForceState: getCurrentInternalForcedState$1({
       isDisabled: disabled,
       isHoveredInternal,
       isFocusedInternal,
@@ -4578,445 +4602,97 @@ const DatePickerAndroid = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-const BodyView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Body__BodyView",
-  componentId: "kitt-universal__sc-17fwpo4-0"
-})(["padding:", "px ", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 6, ({
-  theme
-}) => theme.kitt.spacing * 4);
-function ModalBody({
-  children
+function getDatePickerDisplayMode() {
+  if (reactNative.Platform.OS === 'android') return 'calendar';
+  if (reactNative.Platform.OS === 'ios') return 'spinner';
+  return 'default';
+}
+function PlatformDateTimePicker({
+  value,
+  defaultDate = new Date(),
+  maximumDate,
+  minimuDate,
+  testID,
+  onChange
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
-    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
-      children: children
-    })
+  const theme = useTheme();
+  const displayMode = getDatePickerDisplayMode();
+  const iosProps = reactNative.Platform.OS === 'ios' ? {
+    textColor: theme.kitt.colors.primary
+  } : {};
+  return /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
+    is24Hour: true,
+    testID: testID,
+    value: value || defaultDate,
+    mode: "date",
+    maximumDate: maximumDate,
+    minimumDate: minimuDate,
+    display: displayMode,
+    ...iosProps,
+    onChange: (_event, date) => onChange(date)
   });
 }
 
-const FooterView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Footer__FooterView",
-  componentId: "kitt-universal__sc-1ujq2dc-0"
-})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme
-}) => theme.kitt.colors.separator);
-function ModalFooter({
+function ModalTitle({
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(FooterView, {
-    children: children
+  return /*#__PURE__*/jsxRuntime.jsx(CardModal.Header, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body",
+      variant: "bold",
+      children: children
+    })
   });
 }
-
-function getBackgroundColor$1(color, isDisabled) {
-  if (isDisabled) {
-    return 'kitt.iconButton.disabled.backgroundColor';
-  }
-  switch (color) {
-    case 'primary':
-      return 'kitt.iconButton.primary.pressed.backgroundColor';
-    case 'white':
-      return 'kitt.iconButton.white.pressed.backgroundColor';
-    case 'black':
-    default:
-      return 'kitt.iconButton.black.pressed.backgroundColor';
-  }
-}
-function Background({
-  color,
-  isDisabled,
+function ModalPlatformDateTimePicker({
+  title,
+  isVisible,
+  value,
+  validateButtonLabel,
+  onClose,
+  onChange,
   ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    width: "100%",
-    height: "100%",
-    borderRadius: "kitt.iconButton.borderRadius",
-    backgroundColor: getBackgroundColor$1(color, isDisabled)
-  });
-}
+  const [currentValue, setCurrentValue] = React.useState(value);
 
-function AnimatedBackground({
-  color,
-  isDisabled,
-  opacityStyles
-}) {
-  const sx = nativeBase.useSx();
-  const currentOpacityStyles = isDisabled ? {
-    opacity: 1
-  } : opacityStyles;
-  const styles = sx({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%'
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [styles, currentOpacityStyles],
-    children: /*#__PURE__*/jsxRuntime.jsx(Background, {
-      color: color,
-      isDisabled: isDisabled
-    })
-  });
-}
+  // Prevent unsynced value between the modal and its parent state
 
-function AnimatedScale({
-  isDisabled,
-  scaleStyles,
-  children
-}) {
-  const sx = nativeBase.useSx();
-  const currentOpacityStyles = isDisabled ? {
-    transform: [{
-      scale: 1
-    }]
-  } : scaleStyles;
-  const styles = sx({
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%'
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [styles, currentOpacityStyles],
-    children: children
-  });
-}
-
-function useNativeAnimation$1({
-  isPressed
-}) {
-  const theme = useTheme();
-  const pressed = Animated.useSharedValue(!!isPressed);
-  const opacityStyles = Animated.useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        opacity: Animated.withSpring(pressed.value ? 1 : 0)
-      };
-    };
-    _f._closure = {
-      withSpring: Animated.withSpring,
-      pressed
-    };
-    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
-    _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/hooks/useNativeAnimation.ts (24:41)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
-  const scaleStyles = Animated.useAnimatedStyle(function () {
-    const _f = function () {
-      return {
-        transform: [{
-          scale: Animated.withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
-        }]
-      };
-    };
-    _f._closure = {
-      withSpring: Animated.withSpring,
-      pressed,
-      theme: {
-        kitt: {
-          iconButton: {
-            scale: {
-              base: {
-                active: theme.kitt.iconButton.scale.base.active,
-                default: theme.kitt.iconButton.scale.base.default
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
-    _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/hooks/useNativeAnimation.ts (30:39)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
-  return {
-    opacityStyles,
-    scaleStyles,
-    onPressIn: () => {
-      pressed.value = true;
-    },
-    onPressOut: () => {
-      pressed.value = false;
-    }
-  };
-}
-
-function IconButton({
-  icon,
-  color = 'black',
-  disabled,
-  testID,
-  accessibilityLabel,
-  accessibilityRole = 'button',
-  isHoveredInternal,
-  isPressedInternal,
-  isFocusedInternal,
-  onPress
-}) {
-  const {
-    onPressIn,
-    onPressOut,
-    opacityStyles,
-    scaleStyles
-  } = useNativeAnimation$1({
-    isDisabled: disabled,
-    isPressed: isPressedInternal
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
-    testID: testID,
-    disabled: disabled,
-    width: "kitt.iconButton.width",
-    height: "kitt.iconButton.height",
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityRole,
-    _web: {
-      style: {
-        backfaceVisibility: 'hidden',
-        transform: [{
-          translate3d: '0'
-        }]
-      }
-    },
-    borderRadius: "kitt.iconButton.borderRadius",
-    borderColor: disabled ? 'kitt.iconButton.disabled.borderColor' : 'kitt.iconButton.borderColor',
-    borderWidth: disabled ? 'kitt.iconButton.borderWidth' : 0,
-    onPress: onPress,
-    onPressIn: onPressIn,
-    onPressOut: onPressOut,
-    children: ({
-      isHovered,
-      isPressed,
-      isFocused
-    }) => {
-      const isCurrentHovered = isHovered || isHoveredInternal;
-      const isCurrentPressed = isPressed || isPressedInternal;
-      return /*#__PURE__*/jsxRuntime.jsxs(AnimatedScale, {
-        isDisabled: disabled,
-        isHovered: isCurrentHovered,
-        isPressed: isCurrentPressed,
-        scaleStyles: scaleStyles,
-        children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedBackground, {
-          color: color,
-          isDisabled: disabled,
-          isHovered: isCurrentHovered,
-          isPressed: isCurrentPressed,
-          isFocused: isFocused || isFocusedInternal,
-          opacityStyles: opacityStyles
-        }), /*#__PURE__*/jsxRuntime.jsx(View, {
-          alignItems: "center",
-          justifyContent: "center",
-          children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-            color: disabled ? 'black-light' : color,
-            icon: icon
-          })
-        })]
-      });
-    }
-  });
-}
-
-const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
-
-const HeaderView = /*#__PURE__*/styled__default.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;"], ({
-  theme
-}) => theme.kitt.spacing * 2, ({
-  theme
-}) => theme.kitt.colors.separator);
-const LeftIconView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Header__LeftIconView",
-  componentId: "kitt-universal__sc-1iwabch-1"
-})(["align-self:flex-start;margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 2);
-const RightIconView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Header__RightIconView",
-  componentId: "kitt-universal__sc-1iwabch-2"
-})(["align-self:flex-start;margin-left:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 2);
-const TitleView = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Header__TitleView",
-  componentId: "kitt-universal__sc-1iwabch-3"
-})(["padding-left:", "px;flex-shrink:1;"], ({
-  theme,
-  isIconLeft
-}) => isIconLeft ? 0 : theme.kitt.spacing * 2);
-function ModalHeader({
-  left,
-  right,
-  children
-}) {
-  const onClose = React.useContext(OnCloseContext);
-  const isIconLeft = !!left;
-  return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
-    children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
-      children: left
-    }), /*#__PURE__*/jsxRuntime.jsx(TitleView, {
-      isIconLeft: isIconLeft,
-      children: children
-    }), right !== undefined ? right : /*#__PURE__*/jsxRuntime.jsx(RightIconView, {
-      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
-        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
-        onPress: onClose
-      })
-    })]
-  });
-}
-
-const ModalView = /*#__PURE__*/styled__default.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;"], ({
-  theme
-}) => theme.kitt.spacing * 20, ({
-  theme
-}) => theme.kitt.spacing * 4);
-const ContentView$1 = /*#__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:", ";"], ({
-  theme
-}) => theme.kitt.card.borderRadius, ({
-  theme
-}) => theme.kitt.colors.uiBackgroundLight);
-
-/**
- * @deprecated This component will be deleted in a later Kitt Universal version. Use CardModal instead
- */
-function Modal({
-  visible,
-  children,
-  onClose,
-  onEntered,
-  onExited
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
-    value: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactNative.Modal, {
-      transparent: true,
-      animationType: "fade",
-      supportedOrientations: ['landscape', 'portrait'],
-      visible: visible,
-      onShow: onEntered,
-      onDismiss: onExited,
-      onRequestClose: onClose,
-      children: /*#__PURE__*/jsxRuntime.jsxs(ModalView, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(Overlay, {
-          onPress: onClose
-        }), /*#__PURE__*/jsxRuntime.jsx(ContentView$1, {
-          children: children
-        })]
-      })
-    })
-  });
-}
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;
-
-function getDatePickerDisplayMode() {
-  if (reactNative.Platform.OS === 'android') return 'calendar';
-  if (reactNative.Platform.OS === 'ios') return 'spinner';
-  return 'default';
-}
-function PlatformDateTimePicker({
-  value,
-  defaultDate = new Date(),
-  maximumDate,
-  minimuDate,
-  testID,
-  onChange
-}) {
-  const theme = useTheme();
-  const displayMode = getDatePickerDisplayMode();
-  const iosProps = reactNative.Platform.OS === 'ios' ? {
-    textColor: theme.kitt.colors.primary
-  } : {};
-  return /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
-    is24Hour: true,
-    testID: testID,
-    value: value || defaultDate,
-    mode: "date",
-    maximumDate: maximumDate,
-    minimumDate: minimuDate,
-    display: displayMode,
-    ...iosProps,
-    onChange: (_event, date) => onChange(date)
-  });
-}
-
-function ModalTitle({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body",
-      variant: "bold",
-      children: children
-    })
-  });
-}
-function ModalPlatformDateTimePicker({
-  title,
-  isVisible,
-  value,
-  validateButtonLabel,
-  onClose,
-  onChange,
-  ...props
-}) {
-  const [currentValue, setCurrentValue] = React.useState(value);
-
-  // Prevent unsynced value between the modal and its parent state
-
-  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
-    visible: Boolean(isVisible),
-    onClose: () => {
-      setCurrentValue(value);
-      onClose();
-    },
-    children: isVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [title ? /*#__PURE__*/jsxRuntime.jsx(ModalTitle, {
-        children: title
-      }) : null, /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
-        children: /*#__PURE__*/jsxRuntime.jsx(PlatformDateTimePicker, {
-          ...props,
-          value: currentValue,
-          onChange: newDate => {
-            setCurrentValue(prev => {
-              return newDate || prev;
-            });
-          }
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-          stretch: true,
-          type: "primary",
-          onPress: () => {
-            onChange(currentValue);
-          },
-          children: validateButtonLabel ? /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
-            children: validateButtonLabel
-          }) : /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
-            id: "kitt-universal.ModalPlatformDateTimePicker.confirm"
-          })
-        })
-      })]
-    }) : null
+  return /*#__PURE__*/jsxRuntime.jsx(CardModal.ModalBehaviour, {
+    visible: Boolean(isVisible),
+    onClose: () => {
+      setCurrentValue(value);
+      onClose();
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(CardModal, {
+      children: isVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [title ? /*#__PURE__*/jsxRuntime.jsx(ModalTitle, {
+          children: title
+        }) : null, /*#__PURE__*/jsxRuntime.jsx(CardModal.Body, {
+          children: /*#__PURE__*/jsxRuntime.jsx(PlatformDateTimePicker, {
+            ...props,
+            value: currentValue,
+            onChange: newDate => {
+              setCurrentValue(prev => {
+                return newDate || prev;
+              });
+            }
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(CardModal.Footer, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+            stretch: true,
+            type: "primary",
+            onPress: () => {
+              onChange(currentValue);
+            },
+            children: validateButtonLabel ? /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
+              children: validateButtonLabel
+            }) : /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+              id: "kitt-universal.ModalPlatformDateTimePicker.confirm"
+            })
+          })
+        })]
+      }) : null
+    })
   });
 }
 
@@ -5307,31 +4983,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 +4990,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
@@ -5401,7 +5060,7 @@ function InnerCircle({
   });
 }
 
-function getBackgroundColor({
+function getBackgroundColor$1({
   isDisabled,
   isPressed,
   isHovered,
@@ -5447,7 +5106,7 @@ function OuterCircle({
     width: "kitt.forms.radio.size",
     height: "kitt.forms.radio.size",
     borderRadius: "kitt.forms.radio.borderRadius",
-    backgroundColor: getBackgroundColor({
+    backgroundColor: getBackgroundColor$1({
       isChecked,
       isDisabled,
       isFocused,
@@ -5527,45 +5186,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
   });
 }
@@ -5604,7 +5241,7 @@ function HoverBorder({
   });
 }
 
-const useNativeAnimation = ({
+const useNativeAnimation$1 = ({
   isDisabled,
   isSelected,
   isPressedInternal
@@ -5717,7 +5354,7 @@ function RadioButton({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation({
+  } = useNativeAnimation$1({
     isDisabled: disabled,
     isSelected: selected,
     isPressedInternal
@@ -6185,45 +5822,259 @@ function FullscreenModalHeader({
   });
 }
 
-function FullscreenModal({
-  body,
-  header,
-  footer,
-  backgroundColor
+function FullscreenModal({
+  body,
+  header,
+  footer,
+  backgroundColor
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(FullscreenModalContainer, {
+    backgroundColor: backgroundColor,
+    children: [header ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      children: header
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexGrow: 1,
+      flexShrink: 1,
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+        bounces: false,
+        contentContainerStyle: {
+          flexGrow: 1,
+          position: 'relative'
+        },
+        children: body
+      }), footer || null]
+    })]
+  });
+}
+FullscreenModal.Header = FullscreenModalHeader;
+FullscreenModal.Footer = FullscreenModalFooter;
+FullscreenModal.Body = FullscreenModalBody;
+FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
+
+function Highlight({
+  variant = 'regular',
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    borderRadius: "kitt.highlight.borderRadius",
+    padding: "kitt.highlight.padding",
+    backgroundColor: `kitt.highlight.${variant}.backgroundColor`,
+    children: children
+  });
+}
+
+function getBackgroundColor(color, isDisabled) {
+  if (isDisabled) {
+    return 'kitt.iconButton.disabled.backgroundColor';
+  }
+  switch (color) {
+    case 'primary':
+      return 'kitt.iconButton.primary.pressed.backgroundColor';
+    case 'white':
+      return 'kitt.iconButton.white.pressed.backgroundColor';
+    case 'black':
+    default:
+      return 'kitt.iconButton.black.pressed.backgroundColor';
+  }
+}
+function Background({
+  color,
+  isDisabled,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    ...props,
+    width: "100%",
+    height: "100%",
+    borderRadius: "kitt.iconButton.borderRadius",
+    backgroundColor: getBackgroundColor(color, isDisabled)
+  });
+}
+
+function AnimatedBackground({
+  color,
+  isDisabled,
+  opacityStyles
+}) {
+  const sx = nativeBase.useSx();
+  const currentOpacityStyles = isDisabled ? {
+    opacity: 1
+  } : opacityStyles;
+  const styles = sx({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%'
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [styles, currentOpacityStyles],
+    children: /*#__PURE__*/jsxRuntime.jsx(Background, {
+      color: color,
+      isDisabled: isDisabled
+    })
+  });
+}
+
+function AnimatedScale({
+  isDisabled,
+  scaleStyles,
+  children
+}) {
+  const sx = nativeBase.useSx();
+  const currentOpacityStyles = isDisabled ? {
+    transform: [{
+      scale: 1
+    }]
+  } : scaleStyles;
+  const styles = sx({
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%'
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [styles, currentOpacityStyles],
+    children: children
+  });
+}
+
+function useNativeAnimation({
+  isPressed
+}) {
+  const theme = useTheme();
+  const pressed = Animated.useSharedValue(!!isPressed);
+  const opacityStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        opacity: Animated.withSpring(pressed.value ? 1 : 0)
+      };
+    };
+    _f._closure = {
+      withSpring: Animated.withSpring,
+      pressed
+    };
+    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
+    _f.__workletHash = 10645190329247;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/hooks/useNativeAnimation.ts (24:41)";
+    _f.__optimalization = 2;
+    return _f;
+  }());
+  const scaleStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        transform: [{
+          scale: Animated.withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
+        }]
+      };
+    };
+    _f._closure = {
+      withSpring: Animated.withSpring,
+      pressed,
+      theme: {
+        kitt: {
+          iconButton: {
+            scale: {
+              base: {
+                active: theme.kitt.iconButton.scale.base.active,
+                default: theme.kitt.iconButton.scale.base.default
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
+    _f.__workletHash = 13861998831411;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/hooks/useNativeAnimation.ts (30:39)";
+    _f.__optimalization = 2;
+    return _f;
+  }());
+  return {
+    opacityStyles,
+    scaleStyles,
+    onPressIn: () => {
+      pressed.value = true;
+    },
+    onPressOut: () => {
+      pressed.value = false;
+    }
+  };
+}
+
+function IconButton({
+  icon,
+  color = 'black',
+  disabled,
+  testID,
+  accessibilityLabel,
+  accessibilityRole = 'button',
+  isHoveredInternal,
+  isPressedInternal,
+  isFocusedInternal,
+  onPress
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FullscreenModalContainer, {
-    backgroundColor: backgroundColor,
-    children: [header ? /*#__PURE__*/jsxRuntime.jsx(View, {
-      children: header
-    }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
-      flexGrow: 1,
-      flexShrink: 1,
-      justifyContent: "space-between",
-      children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
-        bounces: false,
-        contentContainerStyle: {
-          flexGrow: 1,
-          position: 'relative'
-        },
-        children: body
-      }), footer || null]
-    })]
+  const {
+    onPressIn,
+    onPressOut,
+    opacityStyles,
+    scaleStyles
+  } = useNativeAnimation({
+    isDisabled: disabled,
+    isPressed: isPressedInternal
   });
-}
-FullscreenModal.Header = FullscreenModalHeader;
-FullscreenModal.Footer = FullscreenModalFooter;
-FullscreenModal.Body = FullscreenModalBody;
-FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
-
-function Highlight({
-  variant = 'regular',
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    borderRadius: "kitt.highlight.borderRadius",
-    padding: "kitt.highlight.padding",
-    backgroundColor: `kitt.highlight.${variant}.backgroundColor`,
-    children: children
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    testID: testID,
+    disabled: disabled,
+    width: "kitt.iconButton.width",
+    height: "kitt.iconButton.height",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    _web: {
+      style: {
+        backfaceVisibility: 'hidden',
+        transform: [{
+          translate3d: '0'
+        }]
+      }
+    },
+    borderRadius: "kitt.iconButton.borderRadius",
+    borderColor: disabled ? 'kitt.iconButton.disabled.borderColor' : 'kitt.iconButton.borderColor',
+    borderWidth: disabled ? 'kitt.iconButton.borderWidth' : 0,
+    onPress: onPress,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    children: ({
+      isHovered,
+      isPressed,
+      isFocused
+    }) => {
+      const isCurrentHovered = isHovered || isHoveredInternal;
+      const isCurrentPressed = isPressed || isPressedInternal;
+      return /*#__PURE__*/jsxRuntime.jsxs(AnimatedScale, {
+        isDisabled: disabled,
+        isHovered: isCurrentHovered,
+        isPressed: isCurrentPressed,
+        scaleStyles: scaleStyles,
+        children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedBackground, {
+          color: color,
+          isDisabled: disabled,
+          isHovered: isCurrentHovered,
+          isPressed: isCurrentPressed,
+          isFocused: isFocused || isFocusedInternal,
+          opacityStyles: opacityStyles
+        }), /*#__PURE__*/jsxRuntime.jsx(View, {
+          alignItems: "center",
+          justifyContent: "center",
+          children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+            color: disabled ? 'black-light' : color,
+            icon: icon
+          })
+        })]
+      });
+    }
   });
 }
 
@@ -6251,89 +6102,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 +6160,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 +6684,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 +6772,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 +6881,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 +6959,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         cardModal: {
           borderRadius: theme.cardModal.borderRadius
         },
+        choices: {
+          item: {
+            borderRadius: theme.choices.item.borderRadius
+          }
+        },
         dialogModal: {
           borderRadius: theme.dialogModal.borderRadius
         },
@@ -7034,6 +6971,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 +6995,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderRadius: theme.iconButton.borderRadius
         },
+        tag: {
+          borderRadius: theme.tag.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -7166,6 +7109,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 +7142,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 +7253,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           },
           textArea: {
             minHeight: theme.forms.textArea.minHeight
+          },
+          timePicker: {
+            minWidth: theme.forms.timePicker.minWidth
           }
         },
         iconButton: {
@@ -7278,6 +7268,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.fullscreenModal.header.height
           }
         },
+        pageLoader: {
+          size: theme.pageLoader.size
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -7297,6 +7290,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 +7348,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 +8227,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 +8255,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 +8286,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 +8410,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 +8440,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 +8763,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 +9058,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 +9087,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 +9103,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]
   });
 }
@@ -9584,35 +9614,13 @@ function TypographyEmoji({
   });
 }
 
-function StyleWebWrapper({
-  as,
+function TypographyLinkWebWrapper({
   children,
   ...props
 }) {
-  if (reactNative.Platform.OS !== 'web') return children;
-  // as or default to div. If as is undefined, T is div but typescript is not sure
-  return /*#__PURE__*/jsxRuntime.jsx(as || 'div', {
-    ...props,
-    children: children
-  });
+  return children;
 }
 
-// overrides :global(a) in Link styles.module.css
-const _exp = () => ({
-  $hasNoUnderline
-}) => $hasNoUnderline ? 'none' : 'underline';
-const _exp2 = () => ({
-  $hasNoUnderline
-}) => $hasNoUnderline ? 'underline' : 'none';
-const TypographyLinkWebWrapper = /*#__PURE__*/react.styled('span')({
-  name: "TypographyLinkWebWrapper",
-  class: "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
-  propsAsIs: false,
-  vars: {
-    "tcwz3nt-0": [_exp()],
-    "tcwz3nt-1": [_exp2()]
-  }
-});
 function TypographyLink({
   children,
   disabled,
@@ -9622,9 +9630,8 @@ function TypographyLink({
   onPress,
   ...otherProps
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
-    as: TypographyLinkWebWrapper,
-    $hasNoUnderline: noUnderline,
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyLinkWebWrapper, {
+    hasNoUnderline: noUnderline,
     children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
       underline: !noUnderline,
       color: disabled ? 'black-disabled' : undefined,
@@ -9656,38 +9663,12 @@ function TypographyLink({
   });
 }
 
-// eslint-disable-next-line no-restricted-imports
-/** @deprecated use native-base responsive props or `useBreakpointValue` or `useMatchWindowSize` instead */
-function createWindowSizeHelper(dimensions) {
-  return {
-    matchWindowSize: options => matchWindowSize(dimensions, options),
-    ifWindowSizeMatches: (options, valueIfTrue, valueIfFalse) => matchWindowSize(dimensions, options) ? valueIfTrue : valueIfFalse,
-    mapWindowWidth: (...widthList) => {
-      if ((process.env.NODE_ENV !== "production")) {
-        widthList.slice(1).forEach(([minWidth], index) => {
-          const previousMinWidth = widthList[index][0];
-          if (previousMinWidth > minWidth) {
-            throw new Error(`mapWindowWidth: sort your values to be mobile first. ${minWidth} is < ${previousMinWidth}, so ${minWidth} should be before ${previousMinWidth}.`);
-          }
-        });
-      }
-      const found = widthList.find(([minWidth, value]) => matchWindowSize(dimensions, {
-        minWidth: Number(minWidth)
-      }));
-      if (!found) return null;
-      return found[1];
-    }
-  };
-}
-
 function useKittTheme() {
-  const dimensions = reactNative.useWindowDimensions();
   return React.useMemo(() => {
     return {
-      kitt: theme,
-      responsive: createWindowSizeHelper(dimensions)
+      kitt: theme
     };
-  }, [dimensions]);
+  }, []);
 }
 
 function KittThemeProvider({
@@ -9696,14 +9677,11 @@ function KittThemeProvider({
   appTheme
 }) {
   const theme = useKittTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+  return /*#__PURE__*/jsxRuntime.jsx(KittNativeBaseProvider, {
     theme: theme,
-    children: /*#__PURE__*/jsxRuntime.jsx(KittNativeBaseProvider, {
-      theme: theme,
-      isSSR: isSSR,
-      appTheme: appTheme,
-      children: children
-    })
+    isSSR: isSSR,
+    appTheme: appTheme,
+    children: children
   });
 }
 const KittThemeDecorator = addons.makeDecorator({
@@ -9720,6 +9698,22 @@ const KittThemeDecorator = addons.makeDecorator({
   }
 });
 
+/**
+ * @deprecated Use react-native Platform instead
+ */
+function StyleWebWrapper({
+  as,
+  children,
+  ...props
+}) {
+  if (reactNative.Platform.OS !== 'web') return children;
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsxRuntime.jsx(as || 'div', {
+    ...props,
+    children: children
+  });
+}
+
 /**
  * Display children if match window size options
  *
@@ -9744,17 +9738,127 @@ function useCurrentBreakpointName() {
   });
 }
 
-function withTheme(WrappedComponent) {
-  // eslint-disable-next-line prefer-arrow-callback
-  return /*#__PURE__*/React.forwardRef(function (props, ref) {
-    const theme = useTheme();
-    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
-      ref: ref,
-      theme: theme,
-      ...props
+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;
@@ -9807,7 +9911,6 @@ exports.MapMarkerPosition = MapMarkerPosition;
 exports.MapMarkerSimple = MapMarkerSimple;
 exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
-exports.Modal = Modal;
 exports.ModalBehaviour = ModalBehaviour;
 exports.NavigationModal = NavigationModal;
 exports.Notification = Notification;
@@ -9842,10 +9945,10 @@ exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.VStack = VStack;
+exports.VerticalSteps = VerticalSteps;
 exports.View = View;
 exports.createChoicesComponent = createChoicesComponent;
 exports.createResponsiveStyleFromProp = createResponsiveStyleFromProp;
-exports.createWindowSizeHelper = createWindowSizeHelper;
 exports.getStaticMapImageUrl = getStaticMapImageUrl;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
@@ -9859,7 +9962,6 @@ exports.useMatchWindowSize = useMatchWindowSize;
 exports.useStaticBottomSheet = useStaticBottomSheet;
 exports.useStoryBlockColor = useStoryBlockColor;
 exports.useTheme = useTheme;
-exports.withTheme = withTheme;
 for (const k in kittIcons) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = kittIcons[k];
 }