@ornikar/kitt-universal 11.2.0 → 13.0.0

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

@@ -6,11 +6,9 @@ const react = require('react');
 const nativeBase = require('native-base');
 const jsxRuntime = require('react/jsx-runtime');
 const kittIcons = require('@ornikar/kitt-icons');
-const react$1 = require('@linaria/react');
-const BabelPluginStyledComponentsReactNative = require('react-native');
+const reactNative = require('react-native');
 const reactPortal = require('react-portal');
 const reactTransitionGroup = require('react-transition-group');
-const styled = require('styled-components/native');
 const twemojiParser = require('twemoji-parser');
 const libphonenumberJs = require('libphonenumber-js');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
@@ -18,23 +16,6 @@ const reactDom = require('@floating-ui/react-dom');
 const usehooksTs = require('usehooks-ts');
 const addons = require('@storybook/addons');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  const n = Object.create(null);
-  if (e) {
-    for (const k in e) {
-      n[k] = e[k];
-    }
-  }
-  n["default"] = e;
-  return n;
-}
-
-const BabelPluginStyledComponentsReactNative__namespace = /*#__PURE__*/_interopNamespace(BabelPluginStyledComponentsReactNative);
-const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
 const View = nativeBase.View;
 const ScrollView = nativeBase.ScrollView;
 const Pressable = nativeBase.Pressable;
@@ -923,6 +904,9 @@ const inputStatesStyle = {
     color: colors.black
   }
 };
+const webAnimationDuration = '200ms';
+const webAnimationTimingFunction = 'ease-in-out';
+const webAnimationProperty = 'border-color';
 const input = {
   minHeight: 40,
   color: {
@@ -942,9 +926,9 @@ const input = {
     vertical: 5
   },
   transition: {
-    property: 'border-color',
-    duration: '200ms',
-    timingFunction: 'ease-in-out'
+    property: webAnimationProperty,
+    duration: webAnimationDuration,
+    timingFunction: webAnimationTimingFunction
   },
   states: inputStatesStyle
 };
@@ -1043,6 +1027,10 @@ const textArea = {
   minHeight: 120
 };
 
+const timePicker = {
+  minWidth: 100
+};
+
 const forms = {
   datePicker,
   input,
@@ -1051,7 +1039,8 @@ const forms = {
   textArea,
   checkbox,
   inputTag,
-  radioButtonGroup
+  radioButtonGroup,
+  timePicker
 };
 
 const webAnimationContentDuration = 600;
@@ -1141,25 +1130,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
   }
 };
 
@@ -1182,6 +1180,8 @@ const picker = {
   },
   android: {
     padding: '12px 24px',
+    verticalPadding: 12,
+    horizontalPadding: 24,
     default: {
       backgroundColor: colors.transparent
     },
@@ -1257,9 +1257,11 @@ const shadows = {
   }
 };
 
-const skeleton = {
-  backgroundColor: lateOceanColorPalette.black100,
-  flareColor: lateOceanColorPalette.black200,
+const skeletonBackgroundColor = lateOceanColorPalette.black100;
+const skeletonFlareColor = lateOceanColorPalette.black200;
+const skeleton$1 = {
+  backgroundColor: skeletonBackgroundColor,
+  flareColor: skeletonFlareColor,
   animationDuration: 1000,
   shape: {
     bar: {
@@ -1280,6 +1282,8 @@ const skeleton = {
 const tag = {
   borderRadius: 10,
   padding: '2px 12px',
+  verticalPadding: 2,
+  horizontalPadding: 12,
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
@@ -1356,6 +1360,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,
@@ -1402,12 +1427,13 @@ const theme = {
   pageLoader,
   picker,
   shadows,
-  skeleton,
+  skeleton: skeleton$1,
   tag,
   tooltip,
   typography,
   fullscreenModal,
-  actionCard
+  actionCard,
+  verticalSteps
 };
 
 const KittThemeContext = /*#__PURE__*/react.createContext({
@@ -2095,7 +2121,7 @@ function ButtonPadding({
   });
 }
 
-function DisabledBorder$1() {
+function DisabledBorder() {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     position: "absolute",
     top: 0,
@@ -2236,7 +2262,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,
@@ -2248,23 +2274,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-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 StyledSpinningIconContainer = withTheme( /*#__PURE__*/react$1.styled('div')({
-  name: "StyledSpinningIconContainer",
-  class: "kitt-u_StyledSpinningIconContainer_ssn8o83",
-  propsAsIs: false
-}));
+const spinningIcon = "kitt-u_spinningIcon_ssn8o83";
 function SpinningIcon({
   icon,
   color
@@ -2272,7 +2282,8 @@ function SpinningIcon({
   const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/jsxRuntime.jsx(StyledSpinningIconContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: spinningIcon,
     children: clonedIcon
   });
 }
@@ -2309,7 +2320,7 @@ function useMatchWindowSize(options) {
   const {
     width,
     height
-  } = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  } = reactNative.useWindowDimensions();
   return matchWindowSize({
     width,
     height
@@ -2571,18 +2582,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;
 }
 
@@ -2622,21 +2633,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(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
-  displayName: "Overlay__OverlayPressable",
-  componentId: "kitt-universal__sc-1cz1gbr-0"
-})(({
-  theme
-}) => ({
-  ...BabelPluginStyledComponentsReactNative.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
   });
 }
@@ -2887,6 +2894,64 @@ 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
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    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'
+    },
+    _web: {
+      style: {
+        transitionProperty: theme.kitt.choices.item.transition.property,
+        transitionDuration: `${theme.kitt.choices.item.transition.duration}ms`,
+        transitionTimingFunction: theme.kitt.choices.item.transition.timingFunction
+      }
+    },
+    children: children
+  });
+}
+
 const useNativeAnimation$2 = () => {
   return {
     onPressIn: () => {},
@@ -2906,79 +2971,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(BabelPluginStyledComponentsReactNative.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(BabelPluginStyledComponentsReactNative.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
-}) => {
-  const {
-    property,
-    duration,
-    timingFunction
-  } = theme.kitt.choices.item.transition;
-  return styled.css(["transition:", " ", "ms ", ";"], property, duration, timingFunction);
-});
 function ChoiceItem({
   type = 'button',
   value,
@@ -3028,14 +3021,14 @@ function ChoiceItem({
     children: ({
       isHovered,
       isPressed
-    }) => /*#__PURE__*/jsxRuntime.jsxs(ChoiceItemView, {
-      style: 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,
@@ -3044,43 +3037,44 @@ function ChoiceItem({
           isHovered: isHovered || isHoveredInternal
         }),
         children: children
-      }), disabled ? /*#__PURE__*/jsxRuntime.jsx(DisabledBorder, {
-        $variant: variant,
-        style: BabelPluginStyledComponentsReactNative.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(BabelPluginStyledComponentsReactNative.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,
   ...props
 }) {
   if (direction === 'row') {
-    return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
+    return /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
       horizontal: true,
       ...props
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
     ...props
   });
 }
@@ -3128,8 +3122,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);
     })
@@ -3347,13 +3341,13 @@ function ExternalAppLink({
     ...rest,
     onPress: async e => {
       try {
-        const canOpen = await BabelPluginStyledComponentsReactNative.Linking.canOpenURL(href);
+        const canOpen = await reactNative.Linking.canOpenURL(href);
         if (canOpen) {
           if (onPress) {
             onPress(e);
             if (e?.defaultPrevented) return;
           }
-          BabelPluginStyledComponentsReactNative.Linking.openURL(href).catch(error => {
+          reactNative.Linking.openURL(href).catch(error => {
             console.error(`An error occurred while opening ${href}`, error);
             onOpenAppError?.(`An error occurred while opening ${href}`);
           });
@@ -3736,24 +3730,13 @@ function stringToNumber(text) {
   return parseInt(text, 10);
 }
 
-const _exp$2 = () => ({
-  theme
-}) => {
-  const {
-    property,
-    duration,
-    timingFunction
-  } = theme.kitt.forms.input.transition;
-  return `${property} ${duration} ${timingFunction}`;
-};
-const InputTextContainer = withTheme( /*#__PURE__*/react$1.styled('div')({
-  name: "InputTextContainer",
-  class: "kitt-u_InputTextContainer_i1encr9g",
-  propsAsIs: false,
-  vars: {
-    "i1encr9g-0": [_exp$2()]
-  }
-}));
+const inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
+function InputTextContainer(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: inputTextContainer,
+    ...props
+  });
+}
 
 const InputText = /*#__PURE__*/react.forwardRef(({
   id,
@@ -3775,7 +3758,6 @@ const InputText = /*#__PURE__*/react.forwardRef(({
     base: 'body'
   });
   return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
-    $isDisabled: disabled,
     children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
       ref: ref,
       multiline: multiline,
@@ -3810,7 +3792,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-function getCurrentInternalForcedState({
+function getCurrentInternalForcedState$1({
   isDisabled,
   isHoveredInternal,
   isFocusedInternal,
@@ -3836,7 +3818,7 @@ const InputPart = /*#__PURE__*/react.forwardRef(({
 }, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
-    internalForceState: getCurrentInternalForcedState({
+    internalForceState: getCurrentInternalForcedState$1({
       isDisabled: disabled,
       isHoveredInternal,
       isFocusedInternal,
@@ -4113,7 +4095,7 @@ function InputIcon({
 function InputPressable({
   ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Pressable, {
     ...props
   });
 }
@@ -4204,31 +4186,6 @@ const InputPhone = /*#__PURE__*/react.forwardRef(({
 });
 
 const getTypographyColor = type => type ? 'white' : 'black';
-const InputTagContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputTag__IconContainer",
-  componentId: "kitt-universal__sc-1511dsf-1"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.spacing);
 function InputTag({
   children,
   type,
@@ -4236,15 +4193,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
@@ -4921,7 +4886,7 @@ function FullscreenModal({
       flexGrow: 1,
       flexShrink: 1,
       justifyContent: "space-between",
-      children: [/*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
         bounces: false,
         contentContainerStyle: {
           flexGrow: 1,
@@ -5165,89 +5130,46 @@ function useKittMapConfig() {
   return context;
 }
 
-const ContentView$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignSelf: "center",
+    flexBasis: "0%",
+    flexGrow: 1,
+    flexShrink: 0,
     ...rest,
     children: children
   });
 }
 
-const SideContainerView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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(BabelPluginStyledComponentsReactNative__namespace.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(BabelPluginStyledComponentsReactNative__namespace.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,
@@ -5257,7 +5179,7 @@ function ListItem({
   onPress,
   ...rest
 }) {
-  const Wrapper = onPress ? BabelPluginStyledComponentsReactNative.Pressable : react.Fragment;
+  const Wrapper = onPress ? reactNative.Pressable : react.Fragment;
   const wrapperProps = onPress ? {
     accessibilityRole: 'button',
     onPress,
@@ -5266,9 +5188,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",
@@ -5633,142 +5560,6 @@ function Message({
   });
 }
 
-const BodyView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
-    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
-      children: children
-    })
-  });
-}
-
-const FooterView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(FooterView, {
-    children: children
-  });
-}
-
-const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
-
-const HeaderView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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(BabelPluginStyledComponentsReactNative__namespace.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(BabelPluginStyledComponentsReactNative__namespace.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(BabelPluginStyledComponentsReactNative__namespace.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(BabelPluginStyledComponentsReactNative__namespace.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 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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(BabelPluginStyledComponentsReactNative.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, {
-          children: children
-        })]
-      })
-    })
-  });
-}
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;
-
 const createKittSpaces = spacing => {
   const sizes = {
     positive: {},
@@ -5921,6 +5712,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
         },
@@ -5944,6 +5800,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,
@@ -6042,6 +5909,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
@@ -6077,6 +5987,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         cardModal: {
           borderRadius: theme.cardModal.borderRadius
         },
+        choices: {
+          item: {
+            borderRadius: theme.choices.item.borderRadius
+          }
+        },
         dialogModal: {
           borderRadius: theme.dialogModal.borderRadius
         },
@@ -6084,6 +5999,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
@@ -6105,6 +6023,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderRadius: theme.iconButton.borderRadius
         },
+        tag: {
+          borderRadius: theme.tag.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -6216,6 +6137,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
         },
@@ -6242,6 +6170,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
@@ -6316,6 +6281,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           },
           textArea: {
             minHeight: theme.forms.textArea.minHeight
+          },
+          timePicker: {
+            minWidth: theme.forms.timePicker.minWidth
           }
         },
         iconButton: {
@@ -6328,6 +6296,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.fullscreenModal.header.height
           }
         },
+        pageLoader: {
+          size: theme.pageLoader.size
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -6347,6 +6318,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
@@ -6395,10 +6376,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
@@ -7105,71 +7102,11 @@ function Notification({
   });
 }
 
-const _exp3$1 = () => ({
-  $circlePerimeter
-}) => $circlePerimeter * 0.2;
-const _exp5 = () => ({
-  theme
-}) => theme.kitt.pageLoader.size;
-const _exp6 = () => ({
-  theme
-}) => theme.kitt.pageLoader.strokeWidth;
-const _exp8 = () => ({
-  $circlePerimeter
-}) => $circlePerimeter;
-const _exp9 = () => ({
-  theme
-}) => theme.kitt.pageLoader.colors.base;
-const _exp10 = () => ({
-  theme
-}) => {
-  const {
-    animation
-  } = theme.kitt.pageLoader;
-  const [x1, y1, x2, y2] = animation.fillEasingFunction;
-  return `${animation.circleBackgroundFillDuration}ms cubic-bezier(${x1}, ${y1}, ${x2}, ${y2}) ${animation.delay}ms forwards`;
-};
-const _exp11 = () => ({
-  theme
-}) => {
-  const {
-    animation
-  } = theme.kitt.pageLoader;
-  return `${animation.filledCircleFillDuration}ms linear ${animation.delay}ms infinite`;
-};
-const _exp12 = () => ({
-  theme
-}) => theme.kitt.pageLoader.colors.fill;
-const _exp13 = () => ({
-  theme
-}) => {
-  const {
-    animation
-  } = theme.kitt.pageLoader;
-  const [x1, y1, x2, y2] = animation.fillEasingFunction;
-  const fillAnimation = `${animation.filledCircleFillDuration}ms cubic-bezier(${x1}, ${y1}, ${x2}, ${y2}) ${animation.delay}ms infinite alternate`;
-  const rotationAnimation = `${animation.filledCircleRotationDuration}ms linear ${animation.delay}ms infinite`;
-  return [fillAnimation, rotationAnimation].join(',');
-};
-const PageLoaderContainer = withTheme( /*#__PURE__*/react$1.styled('div')({
-  name: "PageLoaderContainer",
-  class: "kitt-u_PageLoaderContainer_ptkwz2j",
-  propsAsIs: false,
-  vars: {
-    "ptkwz2j-0": [_exp8(), "px"],
-    "ptkwz2j-1": [_exp3$1(), "px"],
-    "ptkwz2j-2": [_exp5(), "px"],
-    "ptkwz2j-3": [_exp6(), "px"],
-    "ptkwz2j-4": [_exp9()],
-    "ptkwz2j-5": [_exp10()],
-    "ptkwz2j-6": [_exp11()],
-    "ptkwz2j-7": [_exp12()],
-    "ptkwz2j-8": [_exp13()]
-  }
-}));
+const pageLoaderContainer = "kitt-u_pageLoaderContainer_ptkwz2j";
 function PageLoader() {
   const theme = useTheme();
   const {
+    colors,
     size,
     strokeWidth
   } = theme.kitt.pageLoader;
@@ -7180,22 +7117,28 @@ function PageLoader() {
     cx: center,
     cy: center,
     r: radius,
-    fill: 'none'
+    fill: 'none',
+    strokeWidth,
+    strokeDasharray: circlePerimeter,
+    strokeDashoffset: circlePerimeter,
+    strokeLinecap: 'round'
   };
-  return /*#__PURE__*/jsxRuntime.jsx(PageLoaderContainer, {
-    $circlePerimeter: circlePerimeter,
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: pageLoaderContainer,
     children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
       width: size,
       height: size,
       children: [/*#__PURE__*/jsxRuntime.jsx("g", {
         "data-large-loader": "base",
         children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          ...sharedProps
+          ...sharedProps,
+          stroke: colors.base
         })
       }), /*#__PURE__*/jsxRuntime.jsx("g", {
         "data-large-loader": "fill",
         children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-          ...sharedProps
+          ...sharedProps,
+          stroke: colors.fill
         })
       })]
     })
@@ -7258,36 +7201,12 @@ function SegmentedProgressBar({
   });
 }
 
-const _exp$1 = () => ({
-  theme
-}) => theme.kitt.skeleton.backgroundColor;
-const _exp2$1 = () => ({
-  $isLoading,
-  theme
-}) => $isLoading ? `linear-gradient(
-      -90deg,
-      ${theme.kitt.skeleton.backgroundColor},
-      ${theme.kitt.skeleton.flareColor} 50%,
-      ${theme.kitt.skeleton.backgroundColor} 100%
-      )` : 'none';
-const _exp3 = () => ({
-  $isLoading
-}) => $isLoading ? '1s ease-in-out infinite' : 'none';
-const StyledSkeleton = withTheme( /*#__PURE__*/react$1.styled('div')({
-  name: "StyledSkeleton",
-  class: "kitt-u_StyledSkeleton_sc3upcl",
-  propsAsIs: false,
-  vars: {
-    "sc3upcl-0": [_exp$1()],
-    "sc3upcl-1": [_exp2$1()],
-    "sc3upcl-2": [_exp3()]
-  }
-}));
+const skeleton = "kitt-u_skeleton_sc3upcl";
 function SkeletonContent({
   isLoading
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledSkeleton, {
-    $isLoading: isLoading
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: (skeleton ) + " " + ((!isLoading ? "skeletonWithoutAnimation" : "") || "")
   });
 }
 
@@ -7593,17 +7512,17 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
-const Flex = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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';
 
@@ -7887,26 +7806,6 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-const Container = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative__namespace.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':
@@ -7936,9 +7835,14 @@ function Tag({
   type = 'default',
   variant = 'fill'
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container, {
-    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),
@@ -7947,10 +7851,90 @@ function Tag({
   });
 }
 
-function TimePicker() {
-  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-    base: "body",
-    children: "TimePicker is not implemented for the web"
+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%"
+      })]
+    })
+  });
+}
+
+function TimePicker({
+  testID,
+  disabled,
+  stretch,
+  value,
+  placeholder,
+  isHoveredInternal,
+  isFocusedInternal,
+  isPressedInternal
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(TimePickerPressable, {
+    testID: testID,
+    disabled: disabled,
+    stretch: stretch,
+    value: value,
+    placeholder: placeholder,
+    isHoveredInternal: isHoveredInternal,
+    isFocusedInternal: isFocusedInternal,
+    isPressedInternal: isPressedInternal
   });
 }
 
@@ -8282,34 +8266,19 @@ function TypographyEmoji({
   });
 }
 
-function StyleWebWrapper({
-  as,
+// overrides :global(a) in Link styles.module.css
+const displayUnderline = "kitt-u_displayUnderline_dch42t";
+const displayUnderlineWhenHovered = "kitt-u_displayUnderlineWhenHovered_d80w0t7";
+function TypographyLinkWebWrapper({
   children,
-  ...props
+  hasNoUnderline
 }) {
-  // as or default to div. If as is undefined, T is div but typescript is not sure
-  return /*#__PURE__*/jsxRuntime.jsx(as || 'div', {
-    ...props,
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: (displayUnderline ) + " " + ((hasNoUnderline ? displayUnderlineWhenHovered : undefined) || ""),
     children: 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$1.styled('span')({
-  name: "TypographyLinkWebWrapper",
-  class: "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
-  propsAsIs: false,
-  vars: {
-    "tcwz3nt-0": [_exp()],
-    "tcwz3nt-1": [_exp2()]
-  }
-});
 function TypographyLink({
   children,
   disabled,
@@ -8319,9 +8288,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,
@@ -8353,38 +8321,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 = BabelPluginStyledComponentsReactNative.useWindowDimensions();
   return react.useMemo(() => {
     return {
-      kitt: theme,
-      responsive: createWindowSizeHelper(dimensions)
+      kitt: theme
     };
-  }, [dimensions]);
+  }, []);
 }
 
 function KittThemeProvider({
@@ -8393,14 +8335,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({
@@ -8417,6 +8356,21 @@ const KittThemeDecorator = addons.makeDecorator({
   }
 });
 
+/**
+ * @deprecated Use react-native Platform instead
+ */
+function StyleWebWrapper({
+  as,
+  children,
+  ...props
+}) {
+  // 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
  *
@@ -8441,12 +8395,134 @@ function useCurrentBreakpointName() {
   });
 }
 
+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;
 exports.useSx = nativeBase.useSx;
 exports.useToken = nativeBase.useToken;
-exports.useWindowSize = BabelPluginStyledComponentsReactNative.useWindowDimensions;
+exports.useWindowSize = reactNative.useWindowDimensions;
 exports.ActionCard = ActionCard;
 exports.Actions = Actions;
 exports.Avatar = Avatar;
@@ -8492,7 +8568,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;
@@ -8527,10 +8602,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;
@@ -8544,7 +8619,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];
 }