@ornikar/kitt-universal 11.2.0 → 12.0.0

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

@@ -10,10 +10,10 @@ const react$1 = require('@linaria/react');
 const BabelPluginStyledComponentsReactNative = 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');
+const styled = require('styled-components/native');
 const reactDom = require('@floating-ui/react-dom');
 const usehooksTs = require('usehooks-ts');
 const addons = require('@storybook/addons');
@@ -1043,6 +1043,10 @@ const textArea = {
   minHeight: 120
 };
 
+const timePicker = {
+  minWidth: 100
+};
+
 const forms = {
   datePicker,
   input,
@@ -1051,7 +1055,8 @@ const forms = {
   textArea,
   checkbox,
   inputTag,
-  radioButtonGroup
+  radioButtonGroup,
+  timePicker
 };
 
 const webAnimationContentDuration = 600;
@@ -1141,6 +1146,8 @@ const iconButton = {
 
 const listItem = {
   padding: '12px 16px',
+  verticalPadding: 12,
+  horizontalPadding: 16,
   borderColor: colors.separator,
   borderWidth: 1,
   innerMargin: 8
@@ -1182,6 +1189,8 @@ const picker = {
   },
   android: {
     padding: '12px 24px',
+    verticalPadding: 12,
+    horizontalPadding: 24,
     default: {
       backgroundColor: colors.transparent
     },
@@ -1280,6 +1289,8 @@ const skeleton = {
 const tag = {
   borderRadius: 10,
   padding: '2px 12px',
+  verticalPadding: 2,
+  horizontalPadding: 12,
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
@@ -1356,6 +1367,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,
@@ -1407,7 +1439,8 @@ const theme = {
   tooltip,
   typography,
   fullscreenModal,
-  actionCard
+  actionCard,
+  verticalSteps
 };
 
 const KittThemeContext = /*#__PURE__*/react.createContext({
@@ -2095,7 +2128,7 @@ function ButtonPadding({
   });
 }
 
-function DisabledBorder$1() {
+function DisabledBorder() {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     position: "absolute",
     top: 0,
@@ -2236,7 +2269,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,
@@ -2622,21 +2655,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 +2916,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 +2993,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 +3043,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,31 +3059,32 @@ 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,
@@ -3128,8 +3144,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);
     })
@@ -3775,7 +3791,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 +3825,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-function getCurrentInternalForcedState({
+function getCurrentInternalForcedState$1({
   isDisabled,
   isHoveredInternal,
   isFocusedInternal,
@@ -3836,7 +3851,7 @@ const InputPart = /*#__PURE__*/react.forwardRef(({
 }, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
-    internalForceState: getCurrentInternalForcedState({
+    internalForceState: getCurrentInternalForcedState$1({
       isDisabled: disabled,
       isHoveredInternal,
       isFocusedInternal,
@@ -4204,31 +4219,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 +4226,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
@@ -5165,89 +5163,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,
@@ -5266,9 +5221,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",
@@ -5921,6 +5881,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 +5969,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 +6078,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 +6156,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         cardModal: {
           borderRadius: theme.cardModal.borderRadius
         },
+        choices: {
+          item: {
+            borderRadius: theme.choices.item.borderRadius
+          }
+        },
         dialogModal: {
           borderRadius: theme.dialogModal.borderRadius
         },
@@ -6084,6 +6168,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 +6192,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderRadius: theme.iconButton.borderRadius
         },
+        tag: {
+          borderRadius: theme.tag.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -6216,6 +6306,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 +6339,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 +6450,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           },
           textArea: {
             minHeight: theme.forms.textArea.minHeight
+          },
+          timePicker: {
+            minWidth: theme.forms.timePicker.minWidth
           }
         },
         iconButton: {
@@ -6328,6 +6465,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.fullscreenModal.header.height
           }
         },
+        pageLoader: {
+          size: theme.pageLoader.size
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -6347,6 +6487,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 +6545,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
@@ -7593,17 +7759,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 +8053,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 +8082,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 +8098,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
   });
 }
 
@@ -8441,6 +8672,128 @@ 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;
@@ -8527,6 +8880,7 @@ exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.VStack = VStack;
+exports.VerticalSteps = VerticalSteps;
 exports.View = View;
 exports.createChoicesComponent = createChoicesComponent;
 exports.createResponsiveStyleFromProp = createResponsiveStyleFromProp;