@ornikar/kitt-universal 4.4.0 → 4.5.0

package/dist/index-browser-all.es.web.js

@@ -1,24 +1,26 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { View, Text as Text$1, useWindowDimensions, Image, Pressable, TextInput, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
+import { View, Text as Text$1, useWindowDimensions, Image, Pressable, StyleSheet, ScrollView, Modal as Modal$1, TextInput } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, LoaderIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, LoaderIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import styled$1, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { forwardRef, cloneElement, useContext, createContext, useMemo, useState, Fragment, Children, useEffect } from 'react';
+import { forwardRef, cloneElement, useContext, createContext, useMemo, useState, Fragment as Fragment$1, Children, useEffect } from 'react';
 import { styled } from '@linaria/react';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { parse } from 'twemoji-parser';
+import { FormattedMessage } from 'react-intl';
+import DateTimePicker from '@react-native-community/datetimepicker';
 import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useFloating, offset, shift, flip, getScrollParents } from '@floating-ui/react-dom';
 import { makeDecorator } from '@storybook/addons';
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 // type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
 // export function withTheme<Props extends { theme: DefaultTheme }, C>(
@@ -33,7 +35,7 @@ function withTheme(WrappedComponent) {
   // eslint-disable-next-line prefer-arrow-callback
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var theme = /*#__PURE__*/useTheme();
-    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$l({
+    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$o({
       ref: ref,
       theme: theme
     }, props));
@@ -51,7 +53,7 @@ function SpinningIcon(_ref) {
   });
 }
 
-var IconContainer = /*#__PURE__*/styled$1(View).withConfig({
+var IconContainer$1 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
@@ -78,7 +80,7 @@ function Icon(_ref5) {
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/jsx(IconContainer, {
+  return /*#__PURE__*/jsx(IconContainer$1, {
     align: align,
     size: size,
     color: color,
@@ -136,11 +138,11 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$f = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$g = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -217,7 +219,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$f);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$g);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -234,14 +236,14 @@ function Typography(_ref4) {
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$k({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$n({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$k({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$n({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -254,13 +256,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$k({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$n({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$k({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$n({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -268,7 +270,7 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/jsx(Typography, _objectSpread$k(_objectSpread$k({
+    return /*#__PURE__*/jsx(Typography, _objectSpread$n(_objectSpread$n({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -304,11 +306,11 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$e = ["size", "base", "round", "light"];
+var _excluded$f = ["size", "base", "round", "light"];
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -380,13 +382,13 @@ function Avatar(_ref6) {
       base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
       round = _ref6.round,
       light = _ref6.light,
-      props = _objectWithoutProperties(_ref6, _excluded$e);
+      props = _objectWithoutProperties(_ref6, _excluded$f);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$j({
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$m({
       size: size,
       base: base,
       isLight: light
@@ -398,11 +400,11 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$d = ["$type", "$isStretch", "disabled"];
+var _excluded$e = ["$type", "$isStretch", "disabled"];
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("div")({
   name: "AnimatedButtonPressableContainer",
   "class": "a1vkj3mh",
@@ -501,14 +503,14 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
   var $type = _ref18.$type,
       $isStretch = _ref18.$isStretch,
       disabled = _ref18.disabled,
-      props = _objectWithoutProperties(_ref18, _excluded$d);
+      props = _objectWithoutProperties(_ref18, _excluded$e);
 
   return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
     ref: ref,
     $type: $type,
     $isDisabled: !!disabled,
     $isStretch: $isStretch,
-    children: /*#__PURE__*/jsx(Pressable, _objectSpread$i({
+    children: /*#__PURE__*/jsx(Pressable, _objectSpread$l({
       disabled: disabled
     }, props))
   });
@@ -552,26 +554,26 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled$1(View).withConfig({
   return defaultPadding;
 });
 
-var _excluded$c = ["color"],
+var _excluded$d = ["color"],
     _excluded2$2 = ["color"];
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$h(_objectSpread$h({}, props), {}, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread$k(_objectSpread$k({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$h({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$k({
     color: color
   }, props));
 }
@@ -581,19 +583,19 @@ function TypographyIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$h({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$k({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$h({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$k({}, props));
 }
 
-var _excluded$b = ["type", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$c = ["type", "isDisabled", "$isStretch", "icon", "children"];
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextColorByType = function (type) {
   switch (type) {
@@ -701,7 +703,7 @@ function ButtonContentChildren(_ref4) {
     color: isWebSubtle ? 'inherit' : color
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$g(_objectSpread$g({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$j(_objectSpread$j({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -712,7 +714,7 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$g(_objectSpread$g({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$j(_objectSpread$j({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
@@ -736,14 +738,14 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$b);
+      props = _objectWithoutProperties(_ref7, _excluded$c);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$g(_objectSpread$g({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$j(_objectSpread$j({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -869,20 +871,20 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$a = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$b = ["as", "href", "openLinkBehavior", "onPress"];
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
       _ref$openLinkBehavior = _ref.openLinkBehavior,
       openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
       onPress = _ref.onPress,
-      rest = _objectWithoutProperties(_ref, _excluded$a);
+      rest = _objectWithoutProperties(_ref, _excluded$b);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$f(_objectSpread$f({}, rest), {}, {
+  return /*#__PURE__*/jsx(Component, _objectSpread$i(_objectSpread$i({}, rest), {}, {
     href: href,
     hrefAttrs: (openLinkBehavior === null || openLinkBehavior === void 0 ? void 0 : openLinkBehavior.web) === 'targetSelf' ? undefined : {
       target: '_blank',
@@ -1068,6 +1070,18 @@ var checkbox = {
   markColor: colors.uiBackgroundLight
 };
 
+var datePicker = {
+  day: {
+    minWidth: 64
+  },
+  month: {
+    minWidth: 64
+  },
+  year: {
+    minWidth: 82
+  }
+};
+
 var calcLineHeight = function (fontSize, lineHeightMultiplier) {
   return Math.round(fontSize * lineHeightMultiplier);
 };
@@ -1179,6 +1193,7 @@ var inputStatesStyle = {
   }
 };
 var input = {
+  minHeight: 40,
   color: {
     selection: colors.primary,
     placeholder: typography.colors['black-light']
@@ -1205,6 +1220,23 @@ var inputField = {
   iconMarginLeft: 6
 };
 
+var inputTag = {
+  success: {
+    backgroundColor: colors.success,
+    labelColor: colors.uiBackgroundLight
+  },
+  danger: {
+    backgroundColor: colors.danger,
+    labelColor: colors.uiBackgroundLight
+  },
+  "default": {
+    backgroundColor: lateOceanColorPalette.black50,
+    labelColor: colors.black
+  },
+  borderRadius: 10,
+  iconSize: 13.5
+};
+
 var radio = {
   size: 18,
   unchecked: {
@@ -1228,11 +1260,13 @@ var textArea = {
 };
 
 var forms = {
+  datePicker: datePicker,
   input: input,
   radio: radio,
   inputField: inputField,
   textArea: textArea,
-  checkbox: checkbox
+  checkbox: checkbox,
+  inputTag: inputTag
 };
 
 var fullScreenModal = {
@@ -1535,6 +1569,16 @@ function Checkbox(_ref6) {
   });
 }
 
+function getInputUIState(_ref) {
+  var isFocused = _ref.isFocused,
+      isDisabled = _ref.isDisabled,
+      formState = _ref.formState;
+  if (isDisabled) return 'disabled';
+  if (isFocused) return 'focus';
+  if (formState === 'invalid') return 'invalid';
+  return 'default';
+}
+
 var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
   var theme = _ref.theme,
       $state = _ref.$state;
@@ -1562,75 +1606,666 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
 
-function getInputUIState(_ref) {
-  var isFocused = _ref.isFocused,
-      isDisabled = _ref.isDisabled,
-      formState = _ref.formState;
-  if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
-  return 'default';
+var StyledTypographyText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
+  displayName: "DatePickerInputPart__StyledTypographyText",
+  componentId: "kitt-universal__sc-11fmlmi-0"
+})(["text-align:center;"]);
+var ViewInput = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "DatePickerInputPart__ViewInput",
+  componentId: "kitt-universal__sc-11fmlmi-1"
+})(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.forms.input.padding["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.forms.input.minHeight;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      $partName = _ref3.$partName;
+
+  if (!$partName) {
+    return undefined;
+  }
+
+  return "".concat(theme.kitt.forms.datePicker[$partName].minWidth, "px");
+});
+function DatePickerInputPart(_ref4) {
+  var $state = _ref4.$state,
+      placeholder = _ref4.placeholder,
+      value = _ref4.value,
+      partName = _ref4.partName,
+      disabled = _ref4.disabled;
+  return /*#__PURE__*/jsx(ViewInput, {
+    $state: $state,
+    $partName: partName,
+    children: placeholder || value ? /*#__PURE__*/jsx(StyledTypographyText, {
+      color: !value || disabled ? 'black-light' : undefined,
+      children: value || placeholder
+    }) : null
+  });
 }
 
-var InputTextContainer = withTheme( /*#__PURE__*/styled("div")({
-  name: "InputTextContainer",
-  "class": "i1encr9g",
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+var OverlayPressable = /*#__PURE__*/styled$1(Pressable).withConfig({
+  displayName: "Overlay__OverlayPressable",
+  componentId: "kitt-universal__sc-1cz1gbr-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _objectSpread$h(_objectSpread$h({}, StyleSheet.absoluteFillObject), {}, {
+    backgroundColor: theme.kitt.colors.overlay.dark
+  });
+});
+function Overlay(_ref2) {
+  var onPress = _ref2.onPress;
+  return /*#__PURE__*/jsx(OverlayPressable, {
+    accessibilityRole: "none",
+    onPress: onPress,
+    children: /*#__PURE__*/jsx(View, {})
+  });
+}
+
+var BodyView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Body__BodyView",
+  componentId: "kitt-universal__sc-17fwpo4-0"
+})(["padding:", "px ", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 6;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.spacing * 4;
+});
+function ModalBody(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/jsx(ScrollView, {
+    children: /*#__PURE__*/jsx(BodyView, {
+      children: children
+    })
+  });
+}
+
+var FooterView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Footer__FooterView",
+  componentId: "kitt-universal__sc-1ujq2dc-0"
+})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 4;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.separator;
+});
+function ModalFooter(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/jsx(FooterView, {
+    children: children
+  });
+}
+
+var _excluded$a = ["as", "children"];
+
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function StyleWebWrapper(_ref) {
+  var as = _ref.as,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$a);
+
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsx(as || 'div', _objectSpread$g(_objectSpread$g({}, props), {}, {
+    children: children
+  }));
+}
+
+var _excluded$9 = ["color", "disabled"];
+
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
+  name: "PressableIconButtonWebWrapper",
+  "class": "p1nlccvg",
   vars: {
-    "i1encr9g-0": [function (_ref) {
-      var $isDisabled = _ref.$isDisabled;
-      return $isDisabled ? 'not-allowed' : 'inherit';
+    "p1nlccvg-0": [function (_ref) {
+      var theme = _ref.theme,
+          $isDisabled = _ref.$isDisabled;
+      return $isDisabled ? 1 : theme.kitt.iconButton.scale.base.hover;
     }],
-    "i1encr9g-1": [function (_ref2) {
-      var theme = _ref2.theme;
-      var _theme$kitt$forms$inp = theme.kitt.forms.input.transition,
-          property = _theme$kitt$forms$inp.property,
-          duration = _theme$kitt$forms$inp.duration,
-          timingFunction = _theme$kitt$forms$inp.timingFunction;
-      return "".concat(property, " ").concat(duration, " ").concat(timingFunction);
+    "p1nlccvg-2": [function (_ref2) {
+      var theme = _ref2.theme,
+          $isDisabled = _ref2.$isDisabled;
+      return $isDisabled ? 1 : theme.kitt.iconButton.scale.medium.hover;
     }],
-    "i1encr9g-2": [function (_ref3) {
+    "p1nlccvg-3": [function (_ref3) {
       var theme = _ref3.theme,
           $isDisabled = _ref3.$isDisabled;
-      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
-      return theme.kitt.forms.input.states.hover.borderColor;
+      return $isDisabled ? 1 : theme.kitt.iconButton.scale.base.active;
     }],
-    "i1encr9g-3": [function (_ref4) {
+    "p1nlccvg-4": [function (_ref4) {
       var theme = _ref4.theme,
+          $isWhite = _ref4.$isWhite,
           $isDisabled = _ref4.$isDisabled;
-      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
-      return theme.kitt.forms.input.states.focus.borderColor;
+      if ($isDisabled) return theme.kitt.iconButton.disabled.backgroundColor;
+      var _theme$kitt$iconButto = theme.kitt.iconButton,
+          white = _theme$kitt$iconButto.white,
+          defaultIconButton = _theme$kitt$iconButto["default"];
+      if ($isWhite) return white.pressedBackgroundColor;
+      return defaultIconButton.pressedBackgroundColor;
     }]
   }
 }));
+var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
+  displayName: "PressableIconButton__StyledPressableIconButton",
+  componentId: "kitt-universal__sc-1m6jo3s-0"
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.iconButton.borderRadius;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.kitt.iconButton.width;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.iconButton.height;
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      disabled = _ref8.disabled;
+  var iconButton = theme.kitt.iconButton;
+  var transition = iconButton.transition;
 
-var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+  if (disabled) {
+    return "\n        background-color: ".concat(iconButton.disabled.backgroundColor, ";\n      ");
+  }
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
+});
+function PressableIconButton(_ref9) {
+  var color = _ref9.color,
+      disabled = _ref9.disabled,
+      props = _objectWithoutProperties(_ref9, _excluded$9);
 
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
-  displayName: "InputText__StyledTextInput",
-  componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
-  var theme = _ref.theme,
-      multiline = _ref.multiline;
+  return /*#__PURE__*/jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    $isWhite: color === 'white',
+    $isDisabled: Boolean(disabled),
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$f(_objectSpread$f({}, props), {}, {
+      disabled: disabled
+    }))
+  });
+}
 
-  if (!multiline && "web" === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
-  }
+function PressableAnimatedContainer(_ref) {
+  var children = _ref.children,
+      color = _ref.color,
+      disabled = _ref.disabled,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/jsx(PressableIconButton, {
+    accessibilityRole: "button",
+    color: color,
+    disabled: disabled,
+    onPress: onPress,
+    children: children
+  });
+}
 
-  return theme.kitt.forms.input.padding["default"];
+var IconButtonContentBorder = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "IconButton__IconButtonContentBorder",
+  componentId: "kitt-universal__sc-swelbf-0"
+})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return "".concat(theme.kitt.iconButton.borderWidth, "px solid");
 }, function (_ref2) {
   var theme = _ref2.theme,
-      multiline = _ref2.multiline;
-  if (!multiline && "web" === 'ios') return 0;
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
+      disabled = _ref2.disabled;
+  return disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor;
 }, function (_ref3) {
-  var $minHeight = _ref3.$minHeight;
-  return $minHeight;
-});
-var RightInputContainer = /*#__PURE__*/styled$1(View).withConfig({
+  var theme = _ref3.theme;
+  return theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.iconButton.borderRadius;
+});
+
+function IconButtonContent(_ref6) {
+  var disabled = _ref6.disabled,
+      color = _ref6.color,
+      icon = _ref6.icon;
+  return /*#__PURE__*/jsx(IconButtonContentBorder, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsx(TypographyIcon, {
+      color: disabled ? 'black-light' : color,
+      icon: icon
+    })
+  });
+}
+
+function IconButton(_ref7) {
+  var icon = _ref7.icon,
+      color = _ref7.color,
+      disabled = _ref7.disabled,
+      testID = _ref7.testID,
+      accessibilityLabel = _ref7.accessibilityLabel,
+      accessibilityRole = _ref7.accessibilityRole,
+      onPress = _ref7.onPress;
+  return /*#__PURE__*/jsx(PressableAnimatedContainer, {
+    color: color,
+    disabled: disabled,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    onPress: onPress,
+    children: /*#__PURE__*/jsx(IconButtonContent, {
+      disabled: disabled,
+      color: color,
+      icon: icon
+    })
+  });
+}
+
+var OnCloseContext = /*#__PURE__*/createContext(function () {});
+
+var HeaderView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Header__HeaderView",
+  componentId: "kitt-universal__sc-1iwabch-0"
+})(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.separator;
+});
+var LeftIconView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Header__LeftIconView",
+  componentId: "kitt-universal__sc-1iwabch-1"
+})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.spacing * 2;
+});
+var RightIconView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Header__RightIconView",
+  componentId: "kitt-universal__sc-1iwabch-2"
+})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing * 2;
+});
+var TitleView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Header__TitleView",
+  componentId: "kitt-universal__sc-1iwabch-3"
+})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
+  var theme = _ref5.theme,
+      isIconLeft = _ref5.isIconLeft;
+  return isIconLeft ? 0 : theme.kitt.spacing * 2;
+});
+function ModalHeader(_ref6) {
+  var left = _ref6.left,
+      right = _ref6.right,
+      children = _ref6.children;
+  var onClose = useContext(OnCloseContext);
+  var isIconLeft = !!left;
+  return /*#__PURE__*/jsxs(HeaderView, {
+    children: [isIconLeft && /*#__PURE__*/jsx(LeftIconView, {
+      children: left
+    }), /*#__PURE__*/jsx(TitleView, {
+      isIconLeft: isIconLeft,
+      children: children
+    }), right !== undefined ? right : /*#__PURE__*/jsx(RightIconView, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        icon: /*#__PURE__*/jsx(XIcon, {}),
+        onPress: onClose
+      })
+    })]
+  });
+}
+
+var ModalView = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Modal__ModalView",
+  componentId: "kitt-universal__sc-1xy2w5u-0"
+})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 20;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.spacing * 4;
+});
+var ContentView$1 = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Modal__ContentView",
+  componentId: "kitt-universal__sc-1xy2w5u-1"
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.card.borderRadius;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.colors.uiBackgroundLight;
+});
+function Modal(_ref5) {
+  var visible = _ref5.visible,
+      children = _ref5.children,
+      onClose = _ref5.onClose,
+      onEntered = _ref5.onEntered,
+      onExited = _ref5.onExited;
+  return /*#__PURE__*/jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: /*#__PURE__*/jsx(Modal$1, {
+      transparent: true,
+      animationType: "fade",
+      visible: visible,
+      onShow: onEntered,
+      onDismiss: onExited,
+      onRequestClose: onClose,
+      children: /*#__PURE__*/jsxs(ModalView, {
+        children: [/*#__PURE__*/jsx(Overlay, {
+          onPress: onClose
+        }), /*#__PURE__*/jsx(ContentView$1, {
+          children: children
+        })]
+      })
+    })
+  });
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function getDatePickerDisplayMode() {
+  return 'default';
+}
+
+function PlatformDateTimePicker(_ref) {
+  var value = _ref.value,
+      _ref$defaultDate = _ref.defaultDate,
+      defaultDate = _ref$defaultDate === void 0 ? new Date() : _ref$defaultDate,
+      maximumDate = _ref.maximumDate,
+      minimuDate = _ref.minimuDate,
+      testID = _ref.testID,
+      _onChange = _ref.onChange;
+  var displayMode = getDatePickerDisplayMode();
+  var iosProps = {};
+  return /*#__PURE__*/jsx(DateTimePicker, _objectSpread$e(_objectSpread$e({
+    is24Hour: true,
+    testID: testID,
+    value: value || defaultDate,
+    mode: "date",
+    maximumDate: maximumDate,
+    minimumDate: minimuDate,
+    display: displayMode
+  }, iosProps), {}, {
+    onChange: function onChange(_event, date) {
+      return _onChange(date);
+    }
+  }));
+}
+
+var _excluded$8 = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function ModalTitle(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsx(Modal.Header, {
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      base: "body",
+      variant: "bold",
+      children: children
+    })
+  });
+}
+
+function ModalPlatformDateTimePicker(_ref2) {
+  var title = _ref2.title,
+      isVisible = _ref2.isVisible,
+      value = _ref2.value,
+      validateButtonLabel = _ref2.validateButtonLabel,
+      onClose = _ref2.onClose,
+      onChange = _ref2.onChange,
+      props = _objectWithoutProperties(_ref2, _excluded$8);
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1]; // Prevent unsynced value between the modal and its parent state
+
+
+  return /*#__PURE__*/jsx(Modal, {
+    visible: Boolean(isVisible),
+    onClose: function handleClose() {
+      setCurrentValue(value);
+      onClose();
+    },
+    children: isVisible ? /*#__PURE__*/jsxs(Fragment, {
+      children: [title ? /*#__PURE__*/jsx(ModalTitle, {
+        children: title
+      }) : null, /*#__PURE__*/jsx(Modal.Body, {
+        children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread$d(_objectSpread$d({}, props), {}, {
+          value: currentValue,
+          onChange: function handleChange(newDate) {
+            setCurrentValue(function (prev) {
+              return newDate || prev;
+            });
+          }
+        }))
+      }), /*#__PURE__*/jsx(Modal.Footer, {
+        children: /*#__PURE__*/jsx(Button, {
+          stretch: true,
+          type: "primary",
+          onPress: function handleSubmit() {
+            onChange(currentValue);
+          },
+          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
+            children: validateButtonLabel
+          }) : /*#__PURE__*/jsx(FormattedMessage, {
+            id: "kitt-universal.ModalDateTimePicker.confirm"
+          })
+        })
+      })]
+    }) : null
+  });
+}
+
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function prefixWithZero(value) {
+  return "".concat(value).padStart(2, '0');
+}
+
+var PartContainer = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "DatePicker__PartContainer",
+  componentId: "kitt-universal__sc-ebllsn-0"
+})(["margin-right:", ";", ";"], function (_ref) {
+  var theme = _ref.theme,
+      $isLast = _ref.$isLast;
+  return !$isLast ? "".concat(theme.kitt.spacing * 2, "px") : 0;
+}, function (_ref2) {
+  var $isStretch = _ref2.$isStretch;
+  return $isStretch ? css(["flex:0.33;flex-grow:1;"]) : undefined;
+});
+var DatePickerPressable = /*#__PURE__*/styled$1(Pressable).withConfig({
+  displayName: "DatePicker__DatePickerPressable",
+  componentId: "kitt-universal__sc-ebllsn-1"
+})(["display:flex;flex-direction:row;", ";"], function (_ref3) {
+  var $isStretch = _ref3.$isStretch;
+
+  if ($isStretch) {
+    return css(["width:100%;"]);
+  }
+
+  return css(["align-self:baseline;"]);
+});
+function DatePicker(_ref4) {
+  var value = _ref4.value,
+      id = _ref4.id,
+      disabled = _ref4.disabled,
+      placeholder = _ref4.placeholder,
+      state = _ref4.state,
+      internalForceState = _ref4.internalForceState,
+      testID = _ref4.testID,
+      stretch = _ref4.stretch,
+      pickerDefaultDate = _ref4.pickerDefaultDate,
+      pickerUITestID = _ref4.pickerUITestID,
+      pickerUITitle = _ref4.pickerUITitle,
+      pickerUIValidateButtonLabel = _ref4.pickerUIValidateButtonLabel,
+      onChange = _ref4.onChange,
+      onFocus = _ref4.onFocus,
+      onBlur = _ref4.onBlur;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPickerUIVisible = _useState2[0],
+      setIsPickerUIVisible = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
+
+  var _useState5 = useState(value),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentValue = _useState6[0],
+      setCurrentValue = _useState6[1];
+
+  var handleModalClose = function () {
+    if (onBlur) onBlur();
+    setIsPickerUIVisible(false);
+    setIsFocused(false);
+  };
+
+  var handleChange = function (newDate) {
+    setCurrentValue(newDate);
+    onChange(newDate);
+    handleModalClose();
+  };
+
+  var currentState = internalForceState || getInputUIState({
+    isFocused: isFocused,
+    isDisabled: Boolean(disabled),
+    formState: state
+  });
+  var sharedPickerProps = {
+    testID: pickerUITestID,
+    value: currentValue,
+    onChange: handleChange
+  };
+  var sharedPartProps = {
+    disabled: disabled,
+    $state: currentState,
+    defaultDate: pickerDefaultDate
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(DatePickerPressable, {
+      $isStretch: stretch,
+      nativeID: id,
+      disabled: disabled,
+      testID: testID,
+      onPress: function handleModalOpen() {
+        if (onFocus) onFocus();
+        setIsPickerUIVisible(true);
+        setIsFocused(true);
+      },
+      children: [/*#__PURE__*/jsx(PartContainer, {
+        $isStretch: stretch,
+        children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$c(_objectSpread$c({}, sharedPartProps), {}, {
+          partName: "day",
+          value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
+          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day
+        }))
+      }), /*#__PURE__*/jsx(PartContainer, {
+        $isStretch: stretch,
+        children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$c(_objectSpread$c({}, sharedPartProps), {}, {
+          partName: "month",
+          value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
+          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month
+        }))
+      }), /*#__PURE__*/jsx(PartContainer, {
+        $isLast: true,
+        $isStretch: stretch,
+        children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$c(_objectSpread$c({}, sharedPartProps), {}, {
+          partName: "year",
+          value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.getFullYear(),
+          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year
+        }))
+      })]
+    }), /*#__PURE__*/jsxs(Fragment, {
+      children: [null, /*#__PURE__*/jsx(ModalPlatformDateTimePicker, _objectSpread$c(_objectSpread$c({}, sharedPickerProps), {}, {
+        isVisible: isPickerUIVisible,
+        title: pickerUITitle,
+        validateButtonLabel: pickerUIValidateButtonLabel,
+        onClose: handleModalClose,
+        onChange: handleChange
+      }))]
+    })]
+  });
+}
+
+var InputTextContainer = withTheme( /*#__PURE__*/styled("div")({
+  name: "InputTextContainer",
+  "class": "i1encr9g",
+  vars: {
+    "i1encr9g-0": [function (_ref) {
+      var $isDisabled = _ref.$isDisabled;
+      return $isDisabled ? 'not-allowed' : 'inherit';
+    }],
+    "i1encr9g-1": [function (_ref2) {
+      var theme = _ref2.theme;
+      var _theme$kitt$forms$inp = theme.kitt.forms.input.transition,
+          property = _theme$kitt$forms$inp.property,
+          duration = _theme$kitt$forms$inp.duration,
+          timingFunction = _theme$kitt$forms$inp.timingFunction;
+      return "".concat(property, " ").concat(duration, " ").concat(timingFunction);
+    }],
+    "i1encr9g-2": [function (_ref3) {
+      var theme = _ref3.theme,
+          $isDisabled = _ref3.$isDisabled;
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.hover.borderColor;
+    }],
+    "i1encr9g-3": [function (_ref4) {
+      var theme = _ref4.theme,
+          $isDisabled = _ref4.$isDisabled;
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.focus.borderColor;
+    }]
+  }
+}));
+
+var _excluded$7 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
+  displayName: "InputText__StyledTextInput",
+  componentId: "kitt-universal__sc-uke279-0"
+})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
+  var theme = _ref.theme,
+      multiline = _ref.multiline;
+
+  if (!multiline && "web" === 'ios') {
+    return theme.kitt.forms.input.padding.iOSSingleLine;
+  }
+
+  return theme.kitt.forms.input.padding["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      multiline = _ref2.multiline;
+  if (!multiline && "web" === 'ios') return 0;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
+}, function (_ref3) {
+  var $minHeight = _ref3.$minHeight;
+  return $minHeight;
+});
+var RightInputContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "InputText__RightInputContainer",
   componentId: "kitt-universal__sc-uke279-1"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
@@ -1653,7 +2288,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
       _onFocus = _ref4.onFocus,
       _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$9);
+      props = _objectWithoutProperties(_ref4, _excluded$7);
 
   var theme = /*#__PURE__*/useTheme();
 
@@ -1669,7 +2304,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   });
   return /*#__PURE__*/jsxs(InputTextContainer, {
     $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$e(_objectSpread$e({
+    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$b(_objectSpread$b({
       ref: ref,
       nativeID: id,
       editable: !disabled,
@@ -1696,11 +2331,11 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   });
 });
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputEmail(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$d({
+  return /*#__PURE__*/jsx(InputText, _objectSpread$a({
     autoCompleteType: "email",
     keyboardType: "email-address",
     textContentType: "emailAddress"
@@ -1801,31 +2436,31 @@ function InputIcon(_ref) {
   });
 }
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputPressable(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/jsx(Pressable, _objectSpread$c({}, props));
+  return /*#__PURE__*/jsx(Pressable, _objectSpread$9({}, props));
 }
 
-var _excluded$8 = ["isPasswordDefaultVisible", "right"];
+var _excluded$6 = ["isPasswordDefaultVisible", "right"];
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
       isVisible = _useState2[0],
       setIsVisible = _useState2[1];
 
-  return /*#__PURE__*/jsx(InputText, _objectSpread$b(_objectSpread$b({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread$8(_objectSpread$8({}, props), {}, {
     textContentType: "password",
     autoCompleteType: "password",
     autoCorrect: false,
@@ -1844,17 +2479,73 @@ function InputPassword(_ref) {
   }));
 }
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function InputPhone(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$a(_objectSpread$a({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread$7(_objectSpread$7({}, props), {}, {
     autoCompleteType: "tel",
     keyboardType: "number-pad",
     textContentType: "telephoneNumber"
   }));
 }
 
+var getTypographyColor = function (type) {
+  return type ? 'white' : 'black';
+};
+
+var InputTagContainer = /*#__PURE__*/styled$1(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;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 2;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      type = _ref2.type;
+
+  if (type === 'success') {
+    return theme.kitt.forms.inputTag.success.backgroundColor;
+  }
+
+  if (type === 'danger') {
+    return theme.kitt.forms.inputTag.danger.backgroundColor;
+  }
+
+  return theme.kitt.forms.inputTag["default"].backgroundColor;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.forms.inputTag.borderRadius;
+});
+var IconContainer = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "InputTag__IconContainer",
+  componentId: "kitt-universal__sc-1511dsf-1"
+})(["margin-right:", "px;"], function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing;
+});
+function InputTag(_ref5) {
+  var children = _ref5.children,
+      type = _ref5.type,
+      icon = _ref5.icon;
+  var typographyColor = getTypographyColor(type);
+  var theme = useKittTheme();
+  return /*#__PURE__*/jsxs(InputTagContainer, {
+    type: type,
+    children: [icon && /*#__PURE__*/jsx(IconContainer, {
+      children: /*#__PURE__*/jsx(TypographyIcon, {
+        icon: icon,
+        size: theme.kitt.forms.inputTag.iconSize,
+        color: typographyColor
+      })
+    }), /*#__PURE__*/jsx(Typography.Text, {
+      base: "body-small",
+      color: typographyColor,
+      children: children
+    })]
+  });
+}
+
 function Label(_ref) {
   var htmlFor = _ref.htmlFor,
       children = _ref.children;
@@ -1963,14 +2654,14 @@ function Radio(_ref16) {
   });
 }
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function TextArea(_ref) {
   var props = _extends({}, _ref);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(InputText, _objectSpread$9({
+  return /*#__PURE__*/jsx(InputText, _objectSpread$6({
     multiline: true,
     textAlignVertical: "top",
     minHeight: theme.kitt.forms.textArea.minHeight
@@ -2101,214 +2792,51 @@ function FullScreenModalHeader(_ref6) {
 
     setRightWidth(event.nativeEvent.layout.width);
   };
-
-  return /*#__PURE__*/jsxs(Header, {
-    insetTop: top,
-    children: [left ? /*#__PURE__*/jsx(SideContainer, {
-      onLayout: function onLayout(e) {
-        return handleLayoutChange(e, 'left');
-      },
-      children: left
-    }) : null, /*#__PURE__*/jsx(HeaderContent, {
-      windowWidth: dimensions.width,
-      leftWidth: leftWidth,
-      rightWidth: rightWidth,
-      children: children
-    }), right ? /*#__PURE__*/jsx(SideContainer, {
-      side: "right",
-      onLayout: function onLayout(e) {
-        return handleLayoutChange(e, 'right');
-      },
-      children: right
-    }) : null]
-  });
-}
-
-var Container$1 = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "FullScreenModal__Container",
-  componentId: "kitt-universal__sc-11qpbe3-0"
-})(["flex:1;background-color:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.colors.uiBackground;
-});
-function FullScreenModal(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/jsx(Container$1, {
-    children: children
-  });
-}
-FullScreenModal.Header = FullScreenModalHeader;
-FullScreenModal.Body = FullScreenModalBody;
-
-var _excluded$7 = ["as", "children"];
-
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function StyleWebWrapper(_ref) {
-  var as = _ref.as,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$7);
-
-  // as or default to div. If as is undefined, T is div but typescript is not sure
-  return /*#__PURE__*/jsx(as || 'div', _objectSpread$8(_objectSpread$8({}, props), {}, {
-    children: children
-  }));
-}
-
-var _excluded$6 = ["color", "disabled"];
-
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled("div")({
-  name: "PressableIconButtonWebWrapper",
-  "class": "p1nlccvg",
-  vars: {
-    "p1nlccvg-0": [function (_ref) {
-      var theme = _ref.theme,
-          $isDisabled = _ref.$isDisabled;
-      return $isDisabled ? 1 : theme.kitt.iconButton.scale.base.hover;
-    }],
-    "p1nlccvg-2": [function (_ref2) {
-      var theme = _ref2.theme,
-          $isDisabled = _ref2.$isDisabled;
-      return $isDisabled ? 1 : theme.kitt.iconButton.scale.medium.hover;
-    }],
-    "p1nlccvg-3": [function (_ref3) {
-      var theme = _ref3.theme,
-          $isDisabled = _ref3.$isDisabled;
-      return $isDisabled ? 1 : theme.kitt.iconButton.scale.base.active;
-    }],
-    "p1nlccvg-4": [function (_ref4) {
-      var theme = _ref4.theme,
-          $isWhite = _ref4.$isWhite,
-          $isDisabled = _ref4.$isDisabled;
-      if ($isDisabled) return theme.kitt.iconButton.disabled.backgroundColor;
-      var _theme$kitt$iconButto = theme.kitt.iconButton,
-          white = _theme$kitt$iconButto.white,
-          defaultIconButton = _theme$kitt$iconButto["default"];
-      if ($isWhite) return white.pressedBackgroundColor;
-      return defaultIconButton.pressedBackgroundColor;
-    }]
-  }
-}));
-var StyledPressableIconButton = /*#__PURE__*/styled$1(Pressable).withConfig({
-  displayName: "PressableIconButton__StyledPressableIconButton",
-  componentId: "kitt-universal__sc-1m6jo3s-0"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.iconButton.borderRadius;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.kitt.iconButton.height;
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      disabled = _ref8.disabled;
-  var iconButton = theme.kitt.iconButton;
-  var transition = iconButton.transition;
-
-  if (disabled) {
-    return "\n        background-color: ".concat(iconButton.disabled.backgroundColor, ";\n      ");
-  }
-
-  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
-});
-function PressableIconButton(_ref9) {
-  var color = _ref9.color,
-      disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$6);
-
-  return /*#__PURE__*/jsx(StyleWebWrapper, {
-    as: PressableIconButtonWebWrapper,
-    $isWhite: color === 'white',
-    $isDisabled: Boolean(disabled),
-    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$7(_objectSpread$7({}, props), {}, {
-      disabled: disabled
-    }))
-  });
-}
-
-function PressableAnimatedContainer(_ref) {
-  var children = _ref.children,
-      color = _ref.color,
-      disabled = _ref.disabled,
-      onPress = _ref.onPress;
-  return /*#__PURE__*/jsx(PressableIconButton, {
-    accessibilityRole: "button",
-    color: color,
-    disabled: disabled,
-    onPress: onPress,
-    children: children
+
+  return /*#__PURE__*/jsxs(Header, {
+    insetTop: top,
+    children: [left ? /*#__PURE__*/jsx(SideContainer, {
+      onLayout: function onLayout(e) {
+        return handleLayoutChange(e, 'left');
+      },
+      children: left
+    }) : null, /*#__PURE__*/jsx(HeaderContent, {
+      windowWidth: dimensions.width,
+      leftWidth: leftWidth,
+      rightWidth: rightWidth,
+      children: children
+    }), right ? /*#__PURE__*/jsx(SideContainer, {
+      side: "right",
+      onLayout: function onLayout(e) {
+        return handleLayoutChange(e, 'right');
+      },
+      children: right
+    }) : null]
   });
 }
 
-var IconButtonContentBorder = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "IconButton__IconButtonContentBorder",
-  componentId: "kitt-universal__sc-swelbf-0"
-})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
+var Container$1 = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "FullScreenModal__Container",
+  componentId: "kitt-universal__sc-11qpbe3-0"
+})(["flex:1;background-color:", ";"], function (_ref) {
   var theme = _ref.theme;
-  return "".concat(theme.kitt.iconButton.borderWidth, "px solid");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      disabled = _ref2.disabled;
-  return disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.iconButton.borderRadius;
+  return theme.kitt.colors.uiBackground;
 });
-
-function IconButtonContent(_ref6) {
-  var disabled = _ref6.disabled,
-      color = _ref6.color,
-      icon = _ref6.icon;
-  return /*#__PURE__*/jsx(IconButtonContentBorder, {
-    disabled: disabled,
-    children: /*#__PURE__*/jsx(TypographyIcon, {
-      color: disabled ? 'black-light' : color,
-      icon: icon
-    })
-  });
-}
-
-function IconButton(_ref7) {
-  var icon = _ref7.icon,
-      color = _ref7.color,
-      disabled = _ref7.disabled,
-      testID = _ref7.testID,
-      accessibilityLabel = _ref7.accessibilityLabel,
-      accessibilityRole = _ref7.accessibilityRole,
-      onPress = _ref7.onPress;
-  return /*#__PURE__*/jsx(PressableAnimatedContainer, {
-    color: color,
-    disabled: disabled,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityRole,
-    onPress: onPress,
-    children: /*#__PURE__*/jsx(IconButtonContent, {
-      disabled: disabled,
-      color: color,
-      icon: icon
-    })
+function FullScreenModal(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/jsx(Container$1, {
+    children: children
   });
 }
+FullScreenModal.Header = FullScreenModalHeader;
+FullScreenModal.Body = FullScreenModalBody;
 
 var _excluded$5 = ["children"];
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ContentView$1 = /*#__PURE__*/styled$1(View).withConfig({
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ContentView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -2316,7 +2844,7 @@ function ListItemContent(_ref) {
   var children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/jsx(ContentView$1, _objectSpread$6(_objectSpread$6({}, rest), {}, {
+  return /*#__PURE__*/jsx(ContentView, _objectSpread$5(_objectSpread$5({}, rest), {}, {
     children: children
   }));
 }
@@ -2324,9 +2852,9 @@ function ListItemContent(_ref) {
 var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SideContainerView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
@@ -2346,7 +2874,7 @@ function ListItemSideContainer(_ref3) {
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
       rest = _objectWithoutProperties(_ref3, _excluded$4);
 
-  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$4(_objectSpread$4({
     side: side
   }, rest), {}, {
     children: children
@@ -2365,7 +2893,7 @@ function ListItemSideContent(_ref5) {
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
       rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
-  return /*#__PURE__*/jsx(SideContentView, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsx(SideContentView, _objectSpread$4(_objectSpread$4({
     align: align
   }, rest), {}, {
     children: children
@@ -2374,9 +2902,9 @@ function ListItemSideContent(_ref5) {
 
 var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ContainerView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
@@ -2418,14 +2946,14 @@ function ListItem(_ref5) {
       onPress = _ref5.onPress,
       rest = _objectWithoutProperties(_ref5, _excluded$3);
 
-  var Wrapper = onPress ? Pressable : Fragment;
-  var wrapperProps = onPress ? _objectSpread$4({
+  var Wrapper = onPress ? Pressable : Fragment$1;
+  var wrapperProps = onPress ? _objectSpread$3({
     accessibilityRole: 'button',
     onPress: onPress
   }, rest) : undefined;
   var containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsx(Wrapper, _objectSpread$4(_objectSpread$4({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread$3(_objectSpread$3({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$3(_objectSpread$3({
       withPadding: withPadding,
       borders: borders
     }, containerProps), {}, {
@@ -2654,169 +3182,6 @@ function Message(_ref) {
   });
 }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled$1(Pressable).withConfig({
-  displayName: "Overlay__OverlayPressable",
-  componentId: "kitt-universal__sc-1cz1gbr-0"
-})(function (_ref) {
-  var theme = _ref.theme;
-  return _objectSpread$3(_objectSpread$3({}, StyleSheet.absoluteFillObject), {}, {
-    backgroundColor: theme.kitt.colors.overlay.dark
-  });
-});
-function Overlay(_ref2) {
-  var onPress = _ref2.onPress;
-  return /*#__PURE__*/jsx(OverlayPressable, {
-    accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsx(View, {})
-  });
-}
-
-var BodyView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Body__BodyView",
-  componentId: "kitt-universal__sc-17fwpo4-0"
-})(["padding:", "px ", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 6;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.spacing * 4;
-});
-function ModalBody(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/jsx(ScrollView, {
-    children: /*#__PURE__*/jsx(BodyView, {
-      children: children
-    })
-  });
-}
-
-var FooterView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Footer__FooterView",
-  componentId: "kitt-universal__sc-1ujq2dc-0"
-})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 4;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.colors.separator;
-});
-function ModalFooter(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/jsx(FooterView, {
-    children: children
-  });
-}
-
-var OnCloseContext = /*#__PURE__*/createContext(function () {});
-
-var HeaderView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Header__HeaderView",
-  componentId: "kitt-universal__sc-1iwabch-0"
-})(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 2;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.colors.separator;
-});
-var LeftIconView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Header__LeftIconView",
-  componentId: "kitt-universal__sc-1iwabch-1"
-})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.spacing * 2;
-});
-var RightIconView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Header__RightIconView",
-  componentId: "kitt-universal__sc-1iwabch-2"
-})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.spacing * 2;
-});
-var TitleView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Header__TitleView",
-  componentId: "kitt-universal__sc-1iwabch-3"
-})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
-  var theme = _ref5.theme,
-      isIconLeft = _ref5.isIconLeft;
-  return isIconLeft ? 0 : theme.kitt.spacing * 2;
-});
-function ModalHeader(_ref6) {
-  var left = _ref6.left,
-      right = _ref6.right,
-      children = _ref6.children;
-  var onClose = useContext(OnCloseContext);
-  var isIconLeft = !!left;
-  return /*#__PURE__*/jsxs(HeaderView, {
-    children: [isIconLeft && /*#__PURE__*/jsx(LeftIconView, {
-      children: left
-    }), /*#__PURE__*/jsx(TitleView, {
-      isIconLeft: isIconLeft,
-      children: children
-    }), right !== undefined ? right : /*#__PURE__*/jsx(RightIconView, {
-      children: /*#__PURE__*/jsx(Button, {
-        type: "subtle-dark",
-        icon: /*#__PURE__*/jsx(XIcon, {}),
-        onPress: onClose
-      })
-    })]
-  });
-}
-
-var ModalView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Modal__ModalView",
-  componentId: "kitt-universal__sc-1xy2w5u-0"
-})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 20;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.spacing * 4;
-});
-var ContentView = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "Modal__ContentView",
-  componentId: "kitt-universal__sc-1xy2w5u-1"
-})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.card.borderRadius;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.colors.uiBackgroundLight;
-});
-function Modal(_ref5) {
-  var visible = _ref5.visible,
-      children = _ref5.children,
-      onClose = _ref5.onClose,
-      onEntered = _ref5.onEntered,
-      onExited = _ref5.onExited;
-  return /*#__PURE__*/jsx(OnCloseContext.Provider, {
-    value: onClose,
-    children: /*#__PURE__*/jsx(Modal$1, {
-      transparent: true,
-      animationType: "fade",
-      visible: visible,
-      onShow: onEntered,
-      onDismiss: onExited,
-      onRequestClose: onClose,
-      children: /*#__PURE__*/jsxs(ModalView, {
-        children: [/*#__PURE__*/jsx(Overlay, {
-          onPress: onClose
-        }), /*#__PURE__*/jsx(ContentView, {
-          children: children
-        })]
-      })
-    })
-  });
-}
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;
-
 function Notification(_ref) {
   var type = _ref.type,
       children = _ref.children,
@@ -3273,7 +3638,7 @@ function StoryGridCol(_ref2) {
     return null;
   }
 
-  return /*#__PURE__*/jsxs(Fragment$1, {
+  return /*#__PURE__*/jsxs(Fragment, {
     children: [title ? /*#__PURE__*/jsx(StoryTitle.Level4, {
       numberOfLines: 1,
       color: titleColor,
@@ -3520,7 +3885,7 @@ function Tooltip(_ref3) {
       middlewareData: middlewareData
     });
   }, [x, y, reference, floating, strategy, update, refs, middlewareData, onUpdate]);
-  return /*#__PURE__*/jsxs(Fragment$1, {
+  return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(StyledTooltipTrigger, {
       ref: reference,
       accessibilityRole: "button",
@@ -3683,5 +4048,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.web.js.map