@ornikar/kitt-universal 4.3.1 → 4.4.0

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

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, TextInput, Pressable, ActivityIndicator, View, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
@@ -137,9 +137,9 @@ var KittBreakpointsMax = {
 
 var _excluded$e = ["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$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$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$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 IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -232,14 +232,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$l({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$k({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$l({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -252,13 +252,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$k({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$l({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$k({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$l({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -266,7 +266,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$l(_objectSpread$l({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -304,9 +304,9 @@ Typography.h5 = createHeading(5, 'header5');
 
 var _excluded$d = ["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$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$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$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; }
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -383,7 +383,7 @@ function Avatar(_ref6) {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$j({
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$k({
       size: size,
       base: base,
       isLight: light
@@ -528,23 +528,23 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
 var _excluded$c = ["color"],
     _excluded2$2 = ["color"];
 
-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$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$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$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 TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
       props = _objectWithoutProperties(_ref, _excluded$c);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$i(_objectSpread$i({}, props), {}, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread$j(_objectSpread$j({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$i({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$j({
     color: color
   }, props));
 }
@@ -554,12 +554,12 @@ function TypographyIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$i({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$j({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$i({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$j({}, props));
 }
 
 function isSubtle(type) {
@@ -568,9 +568,9 @@ function isSubtle(type) {
 
 var _excluded$b = ["type", "isDisabled", "$isStretch", "icon", "children"];
 
-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$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$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$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; }
 
 var getTextColorByType = function (type) {
   switch (type) {
@@ -676,7 +676,7 @@ function ButtonContentChildren(_ref4) {
     color: isWebSubtle ? 'inherit' : color
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$h(_objectSpread$h({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$i(_objectSpread$i({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -687,7 +687,7 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$h(_objectSpread$h({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$i(_objectSpread$i({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
@@ -720,7 +720,7 @@ function ButtonContent(_ref7) {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$h(_objectSpread$h({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$i(_objectSpread$i({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -859,9 +859,9 @@ var defaultOpenLinkBehavior = {
 
 var _excluded$a = ["as", "href", "openLinkBehavior", "onPress"];
 
-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$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$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$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 ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
@@ -870,7 +870,7 @@ function ExternalLink(_ref) {
       onPress = _ref.onPress,
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$g(_objectSpread$g({}, rest), {}, {
+  return /*#__PURE__*/jsx(Component, _objectSpread$h(_objectSpread$h({}, rest), {}, {
     onPress: function handleOnPress() {
       if (onPress) onPress();
       if (!href) return;
@@ -899,2310 +899,2478 @@ function ExternalLink(_ref) {
   }));
 }
 
-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;
-  return $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.input.borderWidth;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.input.borderRadius;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      $state = _ref4.$state;
-  return theme.kitt.forms.input.states[$state].borderColor;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize, "px");
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      $state = _ref6.$state;
-  return theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color];
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  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 lateOceanColorPalette = {
+  lateOcean: '#4C34E0',
+  lateOceanLight1: '#705DE6',
+  lateOceanLight2: '#9485EC',
+  lateOceanLight3: '#D6BAF9',
+  warmEmbrace: '#F4D3CE',
+  warmEmbraceLight1: '#FFEDE6',
+  black1000: '#000000',
+  black800: '#2C293D',
+  black555: '#737373',
+  black200: '#CCCCCC',
+  black100: '#E5E5E5',
+  black50: '#F2F2F2',
+  black25: '#F9F9F9',
+  white: '#FFFFFF',
+  viride: '#38836D',
+  englishVermillon: '#D44148',
+  goldCrayola: '#F8C583',
+  aero: '#89BDDD',
+  transparent: 'transparent',
+  moonPurple: '#DBD6F9',
+  moonPurpleLight1: '#EDEBFC'
+};
 
-var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputTextContainer"
-})(["position:relative;"]);
+var colors = {
+  primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
+  accent: lateOceanColorPalette.warmEmbrace,
+  accentLight: lateOceanColorPalette.warmEmbraceLight1,
+  success: lateOceanColorPalette.viride,
+  correct: lateOceanColorPalette.viride,
+  danger: lateOceanColorPalette.englishVermillon,
+  info: lateOceanColorPalette.aero,
+  warning: lateOceanColorPalette.goldCrayola,
+  separator: lateOceanColorPalette.black100,
+  hover: lateOceanColorPalette.black100,
+  black: lateOceanColorPalette.black1000,
+  uiBackground: lateOceanColorPalette.black25,
+  uiBackgroundLight: lateOceanColorPalette.white,
+  transparent: lateOceanColorPalette.transparent,
+  disabled: lateOceanColorPalette.black50,
+  overlay: {
+    dark: 'rgba(41, 48, 51, 0.25)',
+    light: 'rgba(255, 255, 255, 0.90)',
+    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
+  }
+};
 
-var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+var avatar = {
+  borderRadius: 10,
+  "default": {
+    backgroundColor: colors.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
 
-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; }
+var button = {
+  borderRadius: 30,
+  borderWidth: {
+    disabled: 2,
+    focus: 3
+  },
+  minHeight: 40,
+  minWidth: 40,
+  maxWidth: 335,
+  scale: {
+    base: {
+      "default": 1,
+      hover: 0.95,
+      active: 0.95
+    },
+    medium: {
+      hover: 1.05
+    }
+  },
+  contentPadding: {
+    "default": '8px 16px 7px',
+    large: '12px 24px 11px',
+    disabled: '6px 14px 5px'
+  },
+  transition: {
+    duration: '200ms',
+    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
+  },
+  "default": {
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+    hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+    focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+  },
+  primary: {
+    backgroundColor: colors.primary,
+    pressedBackgroundColor: colors.primaryLight,
+    hoverBackgroundColor: colors.primaryLight,
+    focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+  },
+  white: {
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+    focusBorderColor: 'rgba(255, 255, 255, 0.1)'
+  },
+  subtle: {
+    backgroundColor: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
+    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
+    color: colors.primary,
+    hoverColor: 'rgba(76, 52, 224, 0.8)',
+    activeColor: 'rgba(76, 52, 224, 0.8)'
+  },
+  'subtle-dark': {
+    backgroundColor: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
+    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
+    color: colors.black,
+    hoverColor: 'rgba(0, 0, 0, 0.8)',
+    activeColor: 'rgba(0, 0, 0, 0.8)'
+  },
+  disabled: {
+    backgroundColor: colors.disabled,
+    pressedBackgroundColor: colors.disabled,
+    hoverBackgroundColor: colors.disabled,
+    focusBorderColor: lateOceanColorPalette.black100,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
 
-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 StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
-  displayName: "InputText__StyledTextInput"
-})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
-  var theme = _ref.theme,
-      multiline = _ref.multiline;
+var card = {
+  borderRadius: 20,
+  borderWidth: 2,
+  primary: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.primary
+  },
+  secondary: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator
+  },
+  subtle: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: colors.separator
+  }
+};
 
-  if (!multiline && Platform.OS === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
+var feedbackMessage = {
+  danger: {
+    backgroundColor: colors.danger
+  },
+  success: {
+    backgroundColor: colors.success
+  },
+  info: {
+    backgroundColor: colors.info
+  },
+  warning: {
+    backgroundColor: colors.warning
   }
+};
 
-  return theme.kitt.forms.input.padding["default"];
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      multiline = _ref2.multiline;
-  if (!multiline && Platform.OS === '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.View.withConfig({
-  displayName: "InputText__RightInputContainer"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
-var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var id = _ref4.id,
-      right = _ref4.right,
-      _ref4$minHeight = _ref4.minHeight,
-      minHeight = _ref4$minHeight === void 0 ? 0 : _ref4$minHeight,
-      formState = _ref4.state,
-      internalForceState = _ref4.internalForceState,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      _ref4$autoCorrect = _ref4.autoCorrect,
-      autoCorrect = _ref4$autoCorrect === void 0 ? true : _ref4$autoCorrect,
-      _ref4$textContentType = _ref4.textContentType,
-      textContentType = _ref4$textContentType === void 0 ? 'none' : _ref4$textContentType,
-      _ref4$autoCompleteTyp = _ref4.autoCompleteType,
-      autoCompleteType = _ref4$autoCompleteTyp === void 0 ? 'off' : _ref4$autoCompleteTyp,
-      _ref4$keyboardType = _ref4.keyboardType,
-      keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
-      _onFocus = _ref4.onFocus,
-      _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$9);
-
-  var theme = /*#__PURE__*/useTheme();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
+var checkbox = {
+  borderWidth: 2,
+  borderRadius: 5,
+  height: 20,
+  width: 20,
+  iconSize: 14,
+  borderColor: colors.separator,
+  backgroundColor: colors.uiBackgroundLight,
+  checkedBorderColor: colors.primary,
+  checkedBackgroundColor: colors.primary,
+  markColor: colors.uiBackgroundLight
+};
 
-  var state = internalForceState || getInputUIState({
-    isFocused: isFocused,
-    isDisabled: disabled,
-    formState: formState
-  });
-  return /*#__PURE__*/jsxs(InputTextContainer, {
-    $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$f(_objectSpread$f({
-      ref: ref,
-      nativeID: id,
-      editable: !disabled,
-      keyboardType: keyboardType,
-      autoCompleteType: autoCompleteType,
-      autoCorrect: autoCorrect,
-      $minHeight: minHeight,
-      textContentType: textContentType,
-      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
-      selectionColor: theme.kitt.forms.input.color.selection
-    }, props), {}, {
-      $state: state,
-      onFocus: function onFocus(e) {
-        setIsFocused(true);
-        if (_onFocus) _onFocus(e);
+var calcLineHeight = function (fontSize, lineHeightMultiplier) {
+  return Math.round(fontSize * lineHeightMultiplier);
+};
+var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) {
+  return {
+    baseAndSmall: {
+      fontSize: baseAndSmallFontSize,
+      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)
+    },
+    mediumAndWide: {
+      fontSize: mediumAndWideFontSize,
+      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)
+    }
+  };
+};
+var typography = {
+  colors: {
+    black: lateOceanColorPalette.black1000,
+    'black-anthracite': lateOceanColorPalette.black800,
+    'black-light': lateOceanColorPalette.black555,
+    white: lateOceanColorPalette.white,
+    'white-light': lateOceanColorPalette.white,
+    primary: lateOceanColorPalette.lateOcean,
+    'primary-light': lateOceanColorPalette.lateOceanLight1,
+    accent: lateOceanColorPalette.warmEmbrace,
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon
+  },
+  types: {
+    headers: {
+      fontFamily: {
+        regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
       },
-      onBlur: function onBlur(e) {
-        setIsFocused(false);
-        if (_onBlur) _onBlur(e);
+      fontWeight: 400,
+      fontStyle: 'normal',
+      configs: {
+        // also known as xxlarge
+        header1: createTypographyTypeConfig(1.3, 38, 62),
+        // also known as xlarge
+        header2: createTypographyTypeConfig(1.3, 32, 48),
+        // also known as medium
+        header3: createTypographyTypeConfig(1.3, 24, 36),
+        // also known as xsmall
+        header4: createTypographyTypeConfig(1.3, 18, 24),
+        // also known as xxsmall
+        header5: createTypographyTypeConfig(1.3, 18, 18)
       }
-    })), right ? /*#__PURE__*/jsx(RightInputContainer, {
-      children: right
-    }) : null]
-  });
-});
-
-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; }
+    },
+    bodies: {
+      fontFamily: {
+        regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
+        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
+      configs: {
+        'body-large': createTypographyTypeConfig(1.6, 18, 24),
+        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
+        body: createTypographyTypeConfig(1.6, 16, 16),
+        'body-small': createTypographyTypeConfig(1.6, 14, 14),
+        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
+      }
+    }
+  },
+  link: {
+    disabledColor: lateOceanColorPalette.black200
+  }
+};
 
-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 InputEmail(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread$e({
-    autoCompleteType: "email",
-    keyboardType: "email-address",
-    textContentType: "emailAddress"
-  }, props));
-}
+var inputStatesStyle = {
+  "default": {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
+    color: 'black'
+  },
+  pending: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
+    color: 'black'
+  },
+  valid: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: lateOceanColorPalette.black100,
+    color: 'black'
+  },
+  hover: {
+    borderColor: lateOceanColorPalette.black200,
+    color: 'black'
+  },
+  focus: {
+    borderColor: colors.primary,
+    color: 'black'
+  },
+  disabled: {
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator,
+    color: 'black-light'
+  },
+  invalid: {
+    borderColor: colors.separator,
+    color: 'black'
+  }
+};
+var input = {
+  color: {
+    selection: colors.primary,
+    placeholder: typography.colors['black-light']
+  },
+  borderWidth: 2,
+  borderRadius: 10,
+  icon: {
+    size: 20
+  },
+  padding: {
+    "default": '5px 16px',
+    iOSSingleLine: '7px 16px'
+  },
+  transition: {
+    property: 'border-color',
+    duration: '200ms',
+    timingFunction: 'ease-in-out'
+  },
+  states: inputStatesStyle
+};
 
-var getColorFromState = function (state) {
-  switch (state) {
-    case 'invalid':
-      return 'danger';
+var inputField = {
+  labelContainerPaddingBottom: 5,
+  iconMarginLeft: 6
+};
 
-    case 'valid':
-    default:
-      return 'black-light';
+var radio = {
+  size: 18,
+  unchecked: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderWidth: 2,
+    borderColor: lateOceanColorPalette.black200
+  },
+  checked: {
+    backgroundColor: colors.primary,
+    innerSize: 5,
+    innerBackgroundColor: colors.uiBackgroundLight
+  },
+  disabled: {
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator
   }
 };
 
-function InputFeedback(_ref) {
-  var state = _ref.state,
-      testID = _ref.testID,
-      children = _ref.children;
-  return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body-small",
-    color: getColorFromState(state),
-    testID: testID,
-    children: children
-  });
-}
+var textArea = {
+  minHeight: 120
+};
 
-var FieldContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldContainer"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FeedbackContainer"
-})(["", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldLabelContainer"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
-});
-var LabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__LabelContainer"
-})(["margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.inputField.iconMarginLeft;
-});
-function InputField(_ref4) {
-  var label = _ref4.label,
-      labelFeedback = _ref4.labelFeedback,
-      input = _ref4.input,
-      feedback = _ref4.feedback;
-  return /*#__PURE__*/jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsx(LabelContainer, {
-        children: label
-      }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
-      children: feedback
-    }) : null]
-  });
-}
+var forms = {
+  input: input,
+  radio: radio,
+  inputField: inputField,
+  textArea: textArea,
+  checkbox: checkbox
+};
 
-function getIconColor(state, disabled) {
-  if (disabled) return 'black-light';
+var fullScreenModal = {
+  header: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
 
-  switch (state) {
-    case 'invalid':
-      return 'danger';
+var iconButton = {
+  backgroundColor: 'transparent',
+  width: 40,
+  height: 40,
+  borderRadius: 20,
+  borderWidth: 2,
+  borderColor: 'transparent',
+  transition: {
+    property: 'all',
+    duration: '200ms',
+    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1);'
+  },
+  scale: {
+    base: {
+      "default": 1,
+      hover: 0.95,
+      active: 0.95
+    },
+    medium: {
+      hover: 1.05
+    }
+  },
+  disabled: {
+    scale: 1,
+    backgroundColor: button.disabled.backgroundColor,
+    borderColor: button.disabled.borderColor
+  },
+  "default": {
+    pressedBackgroundColor: button["default"].pressedBackgroundColor
+  },
+  white: {
+    pressedBackgroundColor: button.white.hoverBackgroundColor
+  }
+};
 
-    case 'valid':
-      return 'success';
+var listItem = {
+  padding: '12px 16px',
+  borderColor: colors.separator,
+  borderWidth: 1,
+  innerMargin: 8
+};
 
-    default:
-      return undefined;
+var shadows = {
+  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
+};
+
+var skeleton = {
+  backgroundColor: lateOceanColorPalette.black100,
+  flareColor: lateOceanColorPalette.black200,
+  animationDuration: 1000
+};
+
+var tag = {
+  borderRadius: 10,
+  padding: '2px 12px',
+  primary: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
+      borderWidth: 0,
+      borderColor: colors.transparent
+    },
+    outline: {
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.primary
+    }
+  },
+  "default": {
+    fill: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderWidth: 0,
+      borderColor: colors.transparent
+    },
+    outline: {
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.black
+    }
+  },
+  danger: {
+    fill: {
+      backgroundColor: lateOceanColorPalette.warmEmbrace,
+      borderWidth: 0,
+      borderColor: colors.transparent
+    },
+    outline: {
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.danger
+    }
   }
-}
+};
 
-function InputIcon(_ref) {
-  var icon = _ref.icon,
-      state = _ref.state,
-      disabled = _ref.disabled;
-  var theme = /*#__PURE__*/useTheme();
-  var color = getIconColor(state, disabled);
-  return /*#__PURE__*/jsx(TypographyIcon, {
-    color: color,
-    icon: icon,
-    size: theme.kitt.forms.input.icon.size
-  });
-}
+var tooltip = {
+  backgroundColor: colors.black,
+  borderRadius: 10,
+  opacity: 0.95,
+  horizontalPadding: 16,
+  verticalPadding: 4,
+  floatingPadding: 8
+};
 
-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; }
+var breakpoints = {
+  values: {
+    base: 0,
+    small: 480,
+    medium: 768,
+    large: 1024,
+    wide: 1280
+  },
+  min: {
+    smallBreakpoint: 'min-width: 480px',
+    mediumBreakpoint: 'min-width: 768px',
+    largeBreakpoint: 'min-width: 1024px',
+    wideBreakpoint: 'min-width: 1280px'
+  },
+  max: {
+    smallBreakpoint: 'max-width: 479px',
+    mediumBreakpoint: 'max-width: 767px',
+    largeBreakpoint: 'max-width: 1023px',
+    wideBreakpoint: 'max-width: 1279px'
+  }
+}; // eslint-disable-next-line unicorn/expiring-todo-comments
+// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 
-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 InputPressable(_ref) {
-  var props = _extends({}, _ref);
+var theme = {
+  spacing: 4,
+  colors: colors,
+  palettes: {
+    lateOcean: lateOceanColorPalette
+  },
+  avatar: avatar,
+  button: button,
+  card: card,
+  feedbackMessage: feedbackMessage,
+  forms: forms,
+  typography: typography,
+  tag: tag,
+  shadows: shadows,
+  fullScreenModal: fullScreenModal,
+  iconButton: iconButton,
+  listItem: listItem,
+  tooltip: tooltip,
+  skeleton: skeleton,
+  breakpoints: breakpoints
+};
 
-  return /*#__PURE__*/jsx(Pressable, _objectSpread$d({}, props));
+function matchWindowSize(_ref, _ref2) {
+  var width = _ref.width,
+      height = _ref.height;
+  var minWidth = _ref2.minWidth,
+      maxWidth = _ref2.maxWidth,
+      minHeight = _ref2.minHeight,
+      maxHeight = _ref2.maxHeight;
+  var hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
+  var hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
+  return hasWidthMatched && hasHeightMatched;
 }
+function useMatchWindowSize(options) {
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width,
+      height = _useWindowDimensions.height;
 
-var _excluded$8 = ["isPasswordDefaultVisible", "right"];
+  return matchWindowSize({
+    width: width,
+    height: height
+  }, options);
+}
 
-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 createWindowSizeHelper(dimensions) {
+  return {
+    matchWindowSize: function matchWindowSize$1(options) {
+      return matchWindowSize(dimensions, options);
+    },
+    ifWindowSizeMatches: function ifWindowSizeMatches(options, valueIfTrue, valueIfFalse) {
+      return matchWindowSize(dimensions, options) ? valueIfTrue : valueIfFalse;
+    },
+    mapWindowWidth: function mapWindowWidth() {
+      for (var _len = arguments.length, widthList = new Array(_len), _key = 0; _key < _len; _key++) {
+        widthList[_key] = arguments[_key];
+      }
 
-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 InputPassword(_ref) {
-  var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
-      right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      if ((process.env.NODE_ENV !== "production")) {
+        widthList.slice(1).forEach(function (_ref, index) {
+          var _ref2 = _slicedToArray(_ref, 1),
+              minWidth = _ref2[0];
 
-  var _useState = useState(Boolean(isPasswordDefaultVisible)),
-      _useState2 = _slicedToArray(_useState, 2),
-      isVisible = _useState2[0],
-      setIsVisible = _useState2[1];
+          var previousMinWidth = widthList[index][0];
 
-  return /*#__PURE__*/jsx(InputText, _objectSpread$c(_objectSpread$c({}, props), {}, {
-    textContentType: "password",
-    autoCompleteType: "password",
-    autoCorrect: false,
-    secureTextEntry: !isVisible,
-    right: right || /*#__PURE__*/jsx(InputPressable, {
-      accessibilityRole: "button",
-      onPress: function onPress() {
-        return setIsVisible(function (prev) {
-          return !prev;
+          if (previousMinWidth > minWidth) {
+            throw new Error("mapWindowWidth: sort your values to be mobile first. ".concat(minWidth, " is < ").concat(previousMinWidth, ", so ").concat(minWidth, " should be before ").concat(previousMinWidth, "."));
+          }
         });
-      },
-      children: /*#__PURE__*/jsx(InputIcon, {
-        icon: isVisible ? /*#__PURE__*/jsx(EyeOffIcon, {}) : /*#__PURE__*/jsx(EyeIcon, {})
-      })
-    })
-  }));
-}
+      }
 
-function Label(_ref) {
-  var htmlFor = _ref.htmlFor,
-      children = _ref.children;
-  return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body",
-    children: Platform.OS === 'web' ? /*#__PURE__*/jsx("label", {
-      htmlFor: htmlFor,
-      children: children
-    }) : children
-  });
+      var found = widthList.find(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            minWidth = _ref4[0];
+            _ref4[1];
+
+        return matchWindowSize(dimensions, {
+          minWidth: Number(minWidth)
+        });
+      });
+      if (!found) return null;
+      return found[1];
+    }
+  };
 }
 
-var OuterRadio = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Radio__OuterRadio"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
+function useKittTheme() {
+  var dimensions = useWindowDimensions();
+  return useMemo(function () {
+    return {
+      kitt: theme,
+      responsive: createWindowSizeHelper(dimensions)
+    };
+  }, [dimensions]);
+}
+
+var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "Checkbox__CheckboxAndLabelPressableWrapper"
+})(["display:flex;flex-direction:row;align-items:center;"]);
+var CheckboxContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Checkbox__CheckboxContainer"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.forms.checkbox.height;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.forms.checkbox.width;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.forms.checkbox.borderRadius;
+}, function (_ref4) {
+  var $isChecked = _ref4.$isChecked,
+      theme = _ref4.theme;
+  var _theme$kitt$forms$che = theme.kitt.forms.checkbox,
+      checkedBackgroundColor = _theme$kitt$forms$che.checkedBackgroundColor,
+      checkedBorderColor = _theme$kitt$forms$che.checkedBorderColor,
+      borderColor = _theme$kitt$forms$che.borderColor,
+      borderWidth = _theme$kitt$forms$che.borderWidth,
+      backgroundColor = _theme$kitt$forms$che.backgroundColor;
+
+  if ($isChecked) {
+    return css(["background-color:", ";border:", ";"], checkedBackgroundColor, "".concat(borderWidth, "px solid ").concat(checkedBorderColor));
+  }
+
+  return css(["background-color:", ";border:", ";"], backgroundColor, "".concat(borderWidth, "px solid ").concat(borderColor));
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      $hasLabel = _ref5.$hasLabel;
+  if (!$hasLabel) return '0px';
+  return "".concat(theme.kitt.spacing * 2.5, "px;");
+});
+function Checkbox(_ref6) {
+  var onChange = _ref6.onChange,
+      onBlur = _ref6.onBlur,
+      onFocus = _ref6.onFocus,
+      value = _ref6.value,
+      _ref6$hitSlop = _ref6.hitSlop,
+      hitSlop = _ref6$hitSlop === void 0 ? 40 : _ref6$hitSlop,
+      id = _ref6.id,
+      children = _ref6.children;
+  var theme = useKittTheme();
+  return /*#__PURE__*/jsxs(CheckboxAndLabelPressableWrapper, {
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: value
+    },
+    hitSlop: hitSlop,
+    onPress: function handlePress(e) {
+      if (onFocus) onFocus(e);
+      if (onChange) onChange(e);
+      if (onBlur) onBlur(e);
+    },
+    children: [/*#__PURE__*/jsx(CheckboxContainer, {
+      $isChecked: value,
+      $hasLabel: !!children,
+      testID: id,
+      children: value ? /*#__PURE__*/jsx(Icon, {
+        align: "center",
+        color: theme.kitt.forms.checkbox.markColor,
+        size: theme.kitt.forms.checkbox.iconSize,
+        icon: /*#__PURE__*/jsx(CheckboxMark, {})
+      }) : null
+    }), children]
+  });
+}
+
+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,
-      disabled = _ref.disabled;
-  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
+      $state = _ref.$state;
+  return $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.kitt.forms.radio.size;
+  return theme.kitt.forms.input.borderWidth;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.forms.radio.size;
+  return theme.kitt.forms.input.borderRadius;
 }, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.forms.radio.size / 2;
+  var theme = _ref4.theme,
+      $state = _ref4.$state;
+  return theme.kitt.forms.input.states[$state].borderColor;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.kitt.forms.radio.unchecked.borderWidth;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize, "px");
 }, function (_ref6) {
   var theme = _ref6.theme,
-      disabled = _ref6.disabled;
-  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
-});
-var SelectedOuterRadio = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Radio__SelectedOuterRadio"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
+      $state = _ref6.$state;
+  return theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color];
+}, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.kitt.forms.radio.checked.backgroundColor;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.kitt.forms.radio.size;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.kitt.forms.radio.size;
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.kitt.forms.radio.size / 2;
-});
-var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Radio__SelectedInnerRadio"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.kitt.forms.radio.checked.innerBackgroundColor;
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.kitt.forms.radio.checked.innerSize;
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.kitt.forms.radio.checked.innerSize;
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.kitt.forms.radio.checked.innerSize / 2;
-});
-var Container$4 = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "Radio__Container"
-})(["flex-direction:row;align-items:center;"]);
-var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
-  displayName: "Radio__Text"
-})(["margin-left:", "px;"], function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.kitt.spacing * 2;
+  return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
-function Radio(_ref16) {
-  var id = _ref16.id,
-      checked = _ref16.checked,
-      onChange = _ref16.onChange,
-      value = _ref16.value,
-      _ref16$disabled = _ref16.disabled,
-      disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
-      children = _ref16.children;
-  return /*#__PURE__*/jsxs(Container$4, {
-    nativeID: id,
-    disabled: disabled,
-    accessibilityRole: "radio",
-    "aria-checked": checked,
-    focusable: checked && !disabled,
-    onPress: function handlePress() {
-      onChange(value);
-    },
-    children: [checked && !disabled ? /*#__PURE__*/jsx(SelectedOuterRadio, {
-      children: /*#__PURE__*/jsx(SelectedInnerRadio, {})
-    }) : /*#__PURE__*/jsx(OuterRadio, {
-      disabled: disabled
-    }), /*#__PURE__*/jsx(Text, {
-      base: "body",
-      color: disabled ? 'black-light' : 'black',
-      children: children
-    })]
-  });
-}
 
-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 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';
+}
 
-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 TextArea(_ref) {
-  var props = _extends({}, _ref);
+var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputTextContainer"
+})(["position:relative;"]);
 
-  var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(InputText, _objectSpread$b({
-    multiline: true,
-    textAlignVertical: "top",
-    minHeight: theme.kitt.forms.textArea.minHeight
-  }, props));
-}
+var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
 
-var Body = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Body"
-})(["", " background-color:", ";flex:1;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.MEDIUM
-  }, "padding-right: ".concat(theme.kitt.spacing * 12, "px;\n      padding-left: ").concat(theme.kitt.spacing * 12, "px;"), "padding-right: ".concat(theme.kitt.spacing * 6, "px;\n      padding-left: ").concat(theme.kitt.spacing * 6, "px;"));
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.colors.uiBackgroundLight;
-});
-function FullScreenModalBody(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/jsx(Body, {
-    children: 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; }
 
-var SideContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__SideContainer"
-})(["", ""], function (_ref) {
+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; }
+var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
+  displayName: "InputText__StyledTextInput"
+})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
   var theme = _ref.theme,
-      _ref$side = _ref.side,
-      side = _ref$side === void 0 ? 'left' : _ref$side;
-  var padding = theme.kitt.spacing * 2;
+      multiline = _ref.multiline;
 
-  if (side === 'left') {
-    return "padding-right: ".concat(padding, "px;");
+  if (!multiline && Platform.OS === 'ios') {
+    return theme.kitt.forms.input.padding.iOSSingleLine;
   }
 
-  return "padding-left: ".concat(padding, "px;");
-});
-
-function getHeaderHorizontalMediumPadding(spacing) {
-  return spacing * 6;
-}
-
-var Header = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header"
-})(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
+  return theme.kitt.forms.input.padding["default"];
+}, function (_ref2) {
   var theme = _ref2.theme,
-      _ref2$insetTop = _ref2.insetTop,
-      insetTop = _ref2$insetTop === void 0 ? 0 : _ref2$insetTop;
-  var paddingTop = insetTop + theme.kitt.fullScreenModal.header.paddingVertical;
-  var _theme$kitt$fullScree = theme.kitt.fullScreenModal.header,
-      paddingVertical = _theme$kitt$fullScree.paddingVertical,
-      paddingHorizontal = _theme$kitt$fullScree.paddingHorizontal;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.MEDIUM
-  }, "padding: ".concat(paddingTop, "px ").concat(getHeaderHorizontalMediumPadding(theme.kitt.spacing), "px ").concat(paddingVertical, "px;"), "padding: ".concat(paddingTop, "px ").concat(paddingHorizontal, "px ").concat(paddingVertical, "px;"));
+      multiline = _ref2.multiline;
+  if (!multiline && Platform.OS === 'ios') return 0;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
 }, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.fullScreenModal.header.borderColor;
+  var $minHeight = _ref3.$minHeight;
+  return $minHeight;
 });
-var HeaderContent = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__HeaderContent"
-})(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
-  var theme = _ref4.theme,
-      leftWidth = _ref4.leftWidth,
-      rightWidth = _ref4.rightWidth,
-      windowWidth = _ref4.windowWidth;
+var RightInputContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputText__RightInputContainer"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
+var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var id = _ref4.id,
+      right = _ref4.right,
+      _ref4$minHeight = _ref4.minHeight,
+      minHeight = _ref4$minHeight === void 0 ? 0 : _ref4$minHeight,
+      formState = _ref4.state,
+      internalForceState = _ref4.internalForceState,
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      _ref4$autoCorrect = _ref4.autoCorrect,
+      autoCorrect = _ref4$autoCorrect === void 0 ? true : _ref4$autoCorrect,
+      _ref4$textContentType = _ref4.textContentType,
+      textContentType = _ref4$textContentType === void 0 ? 'none' : _ref4$textContentType,
+      _ref4$autoCompleteTyp = _ref4.autoCompleteType,
+      autoCompleteType = _ref4$autoCompleteTyp === void 0 ? 'off' : _ref4$autoCompleteTyp,
+      _ref4$keyboardType = _ref4.keyboardType,
+      keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
+      _onFocus = _ref4.onFocus,
+      _onBlur = _ref4.onBlur,
+      props = _objectWithoutProperties(_ref4, _excluded$9);
 
-  /*
-   * Since we don't have controll over the rendered left and right elements,
-   * we must apply some logic to give the title all the available space
-   */
-  var sideElementMaxWidth = Math.max(leftWidth, rightWidth);
-  var parentHorizontalPadding = theme.kitt.fullScreenModal.header.paddingHorizontal * 2;
-  var parentHorizontalPaddingMedium = getHeaderHorizontalMediumPadding(theme.kitt.spacing) * 2;
-
-  var computeWidth = function (breakpointPadding) {
-    return windowWidth - breakpointPadding - sideElementMaxWidth * 2;
-  };
-
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.MEDIUM
-  }, "width: ".concat(computeWidth(parentHorizontalPaddingMedium), "px;"), "width: ".concat(computeWidth(parentHorizontalPadding), "px;"));
-}, function (_ref5) {
-  var leftWidth = _ref5.leftWidth,
-      rightWidth = _ref5.rightWidth;
-  // Depending of the wider element, we must add a margin to fill the diff in space between elements
-  var deltaMargin = Math.abs(leftWidth - rightWidth);
+  var theme = /*#__PURE__*/useTheme();
 
-  if (leftWidth > rightWidth) {
-    return "margin-right: ".concat(deltaMargin, "px;");
-  }
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
 
-  return "margin-left: ".concat(deltaMargin, "px;");
+  var state = internalForceState || getInputUIState({
+    isFocused: isFocused,
+    isDisabled: disabled,
+    formState: formState
+  });
+  return /*#__PURE__*/jsxs(InputTextContainer, {
+    $isDisabled: disabled,
+    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$g(_objectSpread$g({
+      ref: ref,
+      nativeID: id,
+      editable: !disabled,
+      keyboardType: keyboardType,
+      autoCompleteType: autoCompleteType,
+      autoCorrect: autoCorrect,
+      $minHeight: minHeight,
+      textContentType: textContentType,
+      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
+      selectionColor: theme.kitt.forms.input.color.selection
+    }, props), {}, {
+      $state: state,
+      onFocus: function onFocus(e) {
+        setIsFocused(true);
+        if (_onFocus) _onFocus(e);
+      },
+      onBlur: function onBlur(e) {
+        setIsFocused(false);
+        if (_onBlur) _onBlur(e);
+      }
+    })), right ? /*#__PURE__*/jsx(RightInputContainer, {
+      children: right
+    }) : null]
+  });
 });
-function FullScreenModalHeader(_ref6) {
-  var children = _ref6.children,
-      right = _ref6.right,
-      left = _ref6.left;
-
-  var _useSafeAreaInsets = useSafeAreaInsets(),
-      top = _useSafeAreaInsets.top;
-
-  var dimensions = useWindowDimensions();
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      leftWidth = _useState2[0],
-      setLeftWidth = _useState2[1];
 
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      rightWidth = _useState4[0],
-      setRightWidth = _useState4[1];
+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; }
 
-  var handleLayoutChange = function (event, side) {
-    // Prevents react to nullify event on rerenders
-    event.persist();
+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 InputEmail(props) {
+  return /*#__PURE__*/jsx(InputText, _objectSpread$f({
+    autoCompleteType: "email",
+    keyboardType: "email-address",
+    textContentType: "emailAddress"
+  }, props));
+}
 
-    if (side === 'left') {
-      setLeftWidth(event.nativeEvent.layout.width);
-      return;
-    }
+var getColorFromState = function (state) {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
 
-    setRightWidth(event.nativeEvent.layout.width);
-  };
+    case 'valid':
+    default:
+      return 'black-light';
+  }
+};
 
-  return /*#__PURE__*/jsxs(Header, {
-    insetTop: Platform.OS === 'ios' ? undefined : 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]
+function InputFeedback(_ref) {
+  var state = _ref.state,
+      testID = _ref.testID,
+      children = _ref.children;
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body-small",
+    color: getColorFromState(state),
+    testID: testID,
+    children: children
   });
 }
 
-var Container$3 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "FullScreenModal__Container"
-})(["flex:1;background-color:", ";"], function (_ref) {
+var FieldContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldContainer"
+})(["padding:5px 0 10px;"]);
+var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FeedbackContainer"
+})(["", ";"], function (_ref) {
   var theme = _ref.theme;
-  return theme.kitt.colors.uiBackground;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.SMALL
+  }, 'padding-top: 10px', 'padding-top: 5px');
 });
-function FullScreenModal(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/jsx(Container$3, {
-    children: children
+var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldLabelContainer"
+})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
+});
+var LabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__LabelContainer"
+})(["margin-right:", "px;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.forms.inputField.iconMarginLeft;
+});
+function InputField(_ref4) {
+  var label = _ref4.label,
+      labelFeedback = _ref4.labelFeedback,
+      input = _ref4.input,
+      feedback = _ref4.feedback;
+  return /*#__PURE__*/jsxs(FieldContainer, {
+    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
+      children: [/*#__PURE__*/jsx(LabelContainer, {
+        children: label
+      }), labelFeedback]
+    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+      children: feedback
+    }) : null]
   });
 }
-FullScreenModal.Header = FullScreenModalHeader;
-FullScreenModal.Body = FullScreenModalBody;
 
-var _excluded$7 = ["as", "children"];
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
 
-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; }
+  switch (state) {
+    case 'invalid':
+      return 'danger';
 
-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 StyleWebWrapper(_ref) {
-  var as = _ref.as,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+    case 'valid':
+      return 'success';
 
-  if (Platform.OS !== 'web') return children;
-  // as or default to div. If as is undefined, T is div but typescript is not sure
-  return /*#__PURE__*/jsx(as || 'div', _objectSpread$a(_objectSpread$a({}, props), {}, {
-    children: children
-  }));
+    default:
+      return undefined;
+  }
 }
 
-var _excluded$6 = ["color", "disabled"];
+function InputIcon(_ref) {
+  var icon = _ref.icon,
+      state = _ref.state,
+      disabled = _ref.disabled;
+  var theme = /*#__PURE__*/useTheme();
+  var color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
 
-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$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$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; }
-var PressableIconButtonWebWrapper = undefined;
-var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "PressableIconButton__StyledPressableIconButton"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.iconButton.borderRadius;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.iconButton.height;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      disabled = _ref4.disabled;
-  var iconButton = theme.kitt.iconButton;
+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 InputPressable(_ref) {
+  var props = _extends({}, _ref);
 
-  if (Platform.OS !== 'web') {
-    return undefined;
-  }
+  return /*#__PURE__*/jsx(Pressable, _objectSpread$e({}, props));
+}
 
-  var transition = iconButton.transition;
+var _excluded$8 = ["isPasswordDefaultVisible", "right"];
 
-  if (disabled) {
-    return "\n        background-color: ".concat(iconButton.disabled.backgroundColor, ";\n      ");
-  }
+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; }
 
-  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n    ");
-});
-function PressableIconButton(_ref5) {
-  var color = _ref5.color,
-      disabled = _ref5.disabled,
-      props = _objectWithoutProperties(_ref5, _excluded$6);
+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 InputPassword(_ref) {
+  var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
+      right = _ref.right,
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
-  return /*#__PURE__*/jsx(StyleWebWrapper, {
-    as: PressableIconButtonWebWrapper,
-    $isWhite: color === 'white',
-    $isDisabled: Boolean(disabled),
-    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$9(_objectSpread$9({}, props), {}, {
-      disabled: disabled
-    }))
-  });
-}
-
-var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated$1.View).withConfig({
-  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground"
-})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], function (_ref) {
-  var theme = _ref.theme,
-      color = _ref.color,
-      disabled = _ref.disabled;
-  var iconButton = theme.kitt.iconButton;
-  if (disabled) return iconButton.disabled.backgroundColor;
-  if (color === 'white') return iconButton.white.pressedBackgroundColor;
-  return iconButton["default"].pressedBackgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.iconButton.borderRadius;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.iconButton.height;
-});
-var AnimatedViewContainer = /*#__PURE__*/styled(Animated$1.View).withConfig({
-  displayName: "PressableAnimatedContainer__AnimatedViewContainer"
-})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
-function PressableAnimatedContainer(_ref5) {
-  var disabled = _ref5.disabled,
-      _ref5$color = _ref5.color,
-      color = _ref5$color === void 0 ? 'black' : _ref5$color,
-      testID = _ref5.testID,
-      _ref5$accessibilityRo = _ref5.accessibilityRole,
-      accessibilityRole = _ref5$accessibilityRo === void 0 ? 'button' : _ref5$accessibilityRo,
-      accessibilityLabel = _ref5.accessibilityLabel,
-      children = _ref5.children,
-      onPress = _ref5.onPress;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(false);
-  var opacityStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      return {
-        opacity: withSpring(pressed.value ? 1 : 0)
-      };
-    };
-
-    _f._closure = {
-      withSpring: withSpring,
-      pressed: pressed
-    };
-    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
-    _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
-    _f.__optimalization = 2;
-
-    global.__reanimatedWorkletInit(_f);
+  var _useState = useState(Boolean(isPasswordDefaultVisible)),
+      _useState2 = _slicedToArray(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
 
-    return _f;
-  }());
-  var scaleStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      return {
-        transform: [{
-          scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base["default"])
-        }]
-      };
-    };
+  return /*#__PURE__*/jsx(InputText, _objectSpread$d(_objectSpread$d({}, props), {}, {
+    textContentType: "password",
+    autoCompleteType: "password",
+    autoCorrect: false,
+    secureTextEntry: !isVisible,
+    right: right || /*#__PURE__*/jsx(InputPressable, {
+      accessibilityRole: "button",
+      onPress: function onPress() {
+        return setIsVisible(function (prev) {
+          return !prev;
+        });
+      },
+      children: /*#__PURE__*/jsx(InputIcon, {
+        icon: isVisible ? /*#__PURE__*/jsx(EyeOffIcon, {}) : /*#__PURE__*/jsx(EyeIcon, {})
+      })
+    })
+  }));
+}
 
-    _f._closure = {
-      withSpring: withSpring,
-      pressed: pressed,
-      theme: {
-        kitt: {
-          iconButton: {
-            scale: {
-              base: {
-                active: theme.kitt.iconButton.scale.base.active,
-                "default": theme.kitt.iconButton.scale.base["default"]
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
-    _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
-    _f.__optimalization = 2;
+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; }
 
-    global.__reanimatedWorkletInit(_f);
+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 InputPhone(props) {
+  return /*#__PURE__*/jsx(InputText, _objectSpread$c(_objectSpread$c({}, props), {}, {
+    autoCompleteType: "tel",
+    keyboardType: "number-pad",
+    textContentType: "telephoneNumber"
+  }));
+}
 
-    return _f;
-  }());
-  return /*#__PURE__*/jsx(PressableIconButton, {
-    accessibilityRole: accessibilityRole,
-    disabled: disabled,
-    color: color,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    onPress: onPress,
-    onPressIn: function onPressIn() {
-      pressed.value = true;
-    },
-    onPressOut: function onPressOut() {
-      pressed.value = false;
-    },
-    children: /*#__PURE__*/jsxs(AnimatedViewContainer, {
-      style: disabled ? [{
-        transform: [{
-          scale: 1
-        }]
-      }] : [scaleStyles],
-      children: [/*#__PURE__*/jsx(AnimatedIconButtonBackground, {
-        disabled: disabled,
-        color: color,
-        style: disabled ? [{
-          opacity: 1
-        }] : [opacityStyles]
-      }), children]
-    })
+function Label(_ref) {
+  var htmlFor = _ref.htmlFor,
+      children = _ref.children;
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body",
+    children: Platform.OS === 'web' ? /*#__PURE__*/jsx("label", {
+      htmlFor: htmlFor,
+      children: children
+    }) : children
   });
 }
 
-var IconButtonContentBorder = /*#__PURE__*/styled.View.withConfig({
-  displayName: "IconButton__IconButtonContentBorder"
-})(["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");
+var OuterRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__OuterRadio"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
+  var theme = _ref.theme,
+      disabled = _ref.disabled;
+  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
 }, function (_ref2) {
-  var theme = _ref2.theme,
-      disabled = _ref2.disabled;
-  return disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor;
+  var theme = _ref2.theme;
+  return theme.kitt.forms.radio.size;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth;
+  return theme.kitt.forms.radio.size;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth;
+  return theme.kitt.forms.radio.size / 2;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.kitt.iconButton.borderRadius;
+  return theme.kitt.forms.radio.unchecked.borderWidth;
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      disabled = _ref6.disabled;
+  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-
-function IconButtonContent(_ref6) {
-  var disabled = _ref6.disabled,
-      color = _ref6.color,
-      icon = _ref6.icon;
-  return /*#__PURE__*/jsx(IconButtonContentBorder, {
+var SelectedOuterRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__SelectedOuterRadio"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.forms.radio.checked.backgroundColor;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.kitt.forms.radio.size;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.forms.radio.size;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.kitt.forms.radio.size / 2;
+});
+var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__SelectedInnerRadio"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.kitt.forms.radio.checked.innerBackgroundColor;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.kitt.forms.radio.checked.innerSize;
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.kitt.forms.radio.checked.innerSize;
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.kitt.forms.radio.checked.innerSize / 2;
+});
+var Container$4 = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "Radio__Container"
+})(["flex-direction:row;align-items:center;"]);
+var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "Radio__Text"
+})(["margin-left:", "px;"], function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.kitt.spacing * 2;
+});
+function Radio(_ref16) {
+  var id = _ref16.id,
+      checked = _ref16.checked,
+      onChange = _ref16.onChange,
+      value = _ref16.value,
+      _ref16$disabled = _ref16.disabled,
+      disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
+      children = _ref16.children;
+  return /*#__PURE__*/jsxs(Container$4, {
+    nativeID: id,
     disabled: disabled,
-    children: /*#__PURE__*/jsx(TypographyIcon, {
-      color: disabled ? 'black-light' : color,
-      icon: icon
-    })
+    accessibilityRole: "radio",
+    "aria-checked": checked,
+    focusable: checked && !disabled,
+    onPress: function handlePress() {
+      onChange(value);
+    },
+    children: [checked && !disabled ? /*#__PURE__*/jsx(SelectedOuterRadio, {
+      children: /*#__PURE__*/jsx(SelectedInnerRadio, {})
+    }) : /*#__PURE__*/jsx(OuterRadio, {
+      disabled: disabled
+    }), /*#__PURE__*/jsx(Text, {
+      base: "body",
+      color: disabled ? 'black-light' : 'black',
+      children: children
+    })]
   });
 }
 
-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 _excluded$5 = ["children"];
+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 TextArea(_ref) {
+  var props = _extends({}, _ref);
 
-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; }
-var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItemContent__ContentView"
-})(["flex:1 0 0%;align-self:center;"]);
-function ListItemContent(_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(InputText, _objectSpread$b({
+    multiline: true,
+    textAlignVertical: "top",
+    minHeight: theme.kitt.forms.textArea.minHeight
+  }, props));
+}
 
-  return /*#__PURE__*/jsx(ContentView$1, _objectSpread$8(_objectSpread$8({}, rest), {}, {
+var Body = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Body"
+})(["", " background-color:", ";flex:1;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, "padding-right: ".concat(theme.kitt.spacing * 12, "px;\n      padding-left: ").concat(theme.kitt.spacing * 12, "px;"), "padding-right: ".concat(theme.kitt.spacing * 6, "px;\n      padding-left: ").concat(theme.kitt.spacing * 6, "px;"));
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.uiBackgroundLight;
+});
+function FullScreenModalBody(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/jsx(Body, {
     children: children
-  }));
+  });
 }
 
-var _excluded$4 = ["children", "side"],
-    _excluded2$1 = ["children", "align"];
-
-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 SideContainerView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItemSideContent__SideContainerView"
-})(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
+var SideContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__SideContainer"
+})(["", ""], function (_ref) {
   var theme = _ref.theme,
-      side = _ref.side;
-  return side === 'right' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      side = _ref2.side;
-  return side === 'left' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
-}); // Handles the vertical alignment of the side elements of the list item
+      _ref$side = _ref.side,
+      side = _ref$side === void 0 ? 'left' : _ref$side;
+  var padding = theme.kitt.spacing * 2;
 
-function ListItemSideContainer(_ref3) {
-  var children = _ref3.children,
-      _ref3$side = _ref3.side,
-      side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$4);
+  if (side === 'left') {
+    return "padding-right: ".concat(padding, "px;");
+  }
 
-  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$7(_objectSpread$7({
-    side: side
-  }, rest), {}, {
-    children: children
-  }));
-}
-var SideContentView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItemSideContent__SideContentView"
-})(["align-self:", ";"], function (_ref4) {
-  var align = _ref4.align;
-  return align;
+  return "padding-left: ".concat(padding, "px;");
 });
-function ListItemSideContent(_ref5) {
-  var children = _ref5.children,
-      _ref5$align = _ref5.align,
-      align = _ref5$align === void 0 ? 'auto' : _ref5$align,
-      rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
-  return /*#__PURE__*/jsx(SideContentView, _objectSpread$7(_objectSpread$7({
-    align: align
-  }, rest), {}, {
-    children: children
-  }));
+function getHeaderHorizontalMediumPadding(spacing) {
+  return spacing * 6;
 }
 
-var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
-
-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$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 ContainerView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "ListItem__ContainerView"
-})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
-  var withPadding = _ref.withPadding,
-      theme = _ref.theme;
-  return withPadding ? theme.kitt.listItem.padding : 0;
-}, function (_ref2) {
+var Header = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header"
+})(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
   var theme = _ref2.theme,
-      borders = _ref2.borders;
-  var borderWidth = theme.kitt.listItem.borderWidth;
+      _ref2$insetTop = _ref2.insetTop,
+      insetTop = _ref2$insetTop === void 0 ? 0 : _ref2$insetTop;
+  var paddingTop = insetTop + theme.kitt.fullScreenModal.header.paddingVertical;
+  var _theme$kitt$fullScree = theme.kitt.fullScreenModal.header,
+      paddingVertical = _theme$kitt$fullScree.paddingVertical,
+      paddingHorizontal = _theme$kitt$fullScree.paddingHorizontal;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, "padding: ".concat(paddingTop, "px ").concat(getHeaderHorizontalMediumPadding(theme.kitt.spacing), "px ").concat(paddingVertical, "px;"), "padding: ".concat(paddingTop, "px ").concat(paddingHorizontal, "px ").concat(paddingVertical, "px;"));
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.fullScreenModal.header.borderColor;
+});
+var HeaderContent = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__HeaderContent"
+})(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
+  var theme = _ref4.theme,
+      leftWidth = _ref4.leftWidth,
+      rightWidth = _ref4.rightWidth,
+      windowWidth = _ref4.windowWidth;
 
-  if (borders === 'top') {
-    return "border-top-width: ".concat(borderWidth, "px");
-  }
+  /*
+   * Since we don't have controll over the rendered left and right elements,
+   * we must apply some logic to give the title all the available space
+   */
+  var sideElementMaxWidth = Math.max(leftWidth, rightWidth);
+  var parentHorizontalPadding = theme.kitt.fullScreenModal.header.paddingHorizontal * 2;
+  var parentHorizontalPaddingMedium = getHeaderHorizontalMediumPadding(theme.kitt.spacing) * 2;
 
-  if (borders === 'bottom') {
-    return "border-bottom-width: ".concat(borderWidth, "px");
-  }
+  var computeWidth = function (breakpointPadding) {
+    return windowWidth - breakpointPadding - sideElementMaxWidth * 2;
+  };
 
-  if (borders === 'both') {
-    return css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, "width: ".concat(computeWidth(parentHorizontalPaddingMedium), "px;"), "width: ".concat(computeWidth(parentHorizontalPadding), "px;"));
+}, function (_ref5) {
+  var leftWidth = _ref5.leftWidth,
+      rightWidth = _ref5.rightWidth;
+  // Depending of the wider element, we must add a margin to fill the diff in space between elements
+  var deltaMargin = Math.abs(leftWidth - rightWidth);
+
+  if (leftWidth > rightWidth) {
+    return "margin-right: ".concat(deltaMargin, "px;");
   }
 
-  return 'border: none';
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.listItem.borderColor;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.colors.uiBackgroundLight;
+  return "margin-left: ".concat(deltaMargin, "px;");
 });
-function ListItem(_ref5) {
-  var children = _ref5.children,
-      withPadding = _ref5.withPadding,
-      borders = _ref5.borders,
-      left = _ref5.left,
-      right = _ref5.right,
-      onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$3);
+function FullScreenModalHeader(_ref6) {
+  var children = _ref6.children,
+      right = _ref6.right,
+      left = _ref6.left;
 
-  var Wrapper = onPress ? Pressable : Fragment;
-  var wrapperProps = onPress ? _objectSpread$6({
-    accessibilityRole: 'button',
-    onPress: onPress
-  }, rest) : undefined;
-  var containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsx(Wrapper, _objectSpread$6(_objectSpread$6({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$6(_objectSpread$6({
-      withPadding: withPadding,
-      borders: borders
-    }, containerProps), {}, {
-      children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
-        side: "left",
-        children: left
-      }) : null, /*#__PURE__*/jsx(ListItemContent, {
-        children: children
-      }), right ? /*#__PURE__*/jsx(ListItemSideContainer, {
-        side: "right",
-        children: right
-      }) : null]
-    }))
-  }));
-}
-ListItem.Content = ListItemContent;
-ListItem.SideContent = ListItemSideContent;
-ListItem.SideContainer = ListItemSideContainer;
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+      top = _useSafeAreaInsets.top;
 
-function getActivityIndicatorSize(size) {
-  if (Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
-}
+  var dimensions = useWindowDimensions();
 
-function Loader(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 20 : _ref$size;
-  var theme = /*#__PURE__*/useTheme();
-  var colorHex = theme.kitt.typography.colors[color];
-  return /*#__PURE__*/jsx(ActivityIndicator, {
-    testID: "ActivityIndicator",
-    color: colorHex,
-    size: getActivityIndicatorSize(size)
-  });
-}
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      leftWidth = _useState2[0],
+      setLeftWidth = _useState2[1];
 
-function LargeLoader(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color;
-  return /*#__PURE__*/jsx(Loader, {
-    color: color,
-    size: 60
-  });
-}
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      rightWidth = _useState4[0],
+      setRightWidth = _useState4[1];
 
-function IconContent(_ref) {
-  var type = _ref.type,
-      color = _ref.color;
-
-  switch (type) {
-    case 'warning':
-      return /*#__PURE__*/jsx(AlertCircleIcon, {
-        color: color
-      });
-
-    case 'success':
-      return /*#__PURE__*/jsx(CheckIcon, {
-        color: color
-      });
-
-    case 'danger':
-      return /*#__PURE__*/jsx(AlertTriangleIcon, {
-        color: color
-      });
-
-    default:
-      return /*#__PURE__*/jsx(InfoIcon, {
-        color: color
-      });
-  }
-}
-
-var getColorByType = function (type) {
-  switch (type) {
-    case 'success':
-      return 'white';
-
-    case 'danger':
-      return 'white';
-
-    case 'warning':
-    default:
-      return 'black';
-  }
-};
-var getIconButtonColor = function (messageType) {
-  switch (messageType) {
-    case 'success':
-    case 'danger':
-      return 'white';
+  var handleLayoutChange = function (event, side) {
+    // Prevents react to nullify event on rerenders
+    event.persist();
 
-    case 'warning':
-    default:
-      return 'black';
-  }
-};
+    if (side === 'left') {
+      setLeftWidth(event.nativeEvent.layout.width);
+      return;
+    }
 
-var StyledMessageContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "BaseMessage__StyledMessageContainer"
-})(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], function (_ref) {
-  var _$insets$top;
+    setRightWidth(event.nativeEvent.layout.width);
+  };
 
-  var $insets = _ref.$insets;
-  return (_$insets$top = $insets === null || $insets === void 0 ? void 0 : $insets.top) !== null && _$insets$top !== void 0 ? _$insets$top : 0;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      $hasNoRadius = _ref2.$hasNoRadius;
-  return $hasNoRadius ? 0 : theme.kitt.spacing * 5;
-}, function (_ref3) {
-  var theme = _ref3.theme,
-      $type = _ref3.$type;
-  return theme.kitt.feedbackMessage[$type].backgroundColor;
-});
-var StyledDismissWrapper = /*#__PURE__*/styled.View.withConfig({
-  displayName: "BaseMessage__StyledDismissWrapper"
-})(["align-items:center;align-items:flex-start;margin:", ";"], function (_ref4) {
-  var theme = _ref4.theme;
-  var spacing = theme.kitt.spacing;
-  return "".concat(spacing * 2.5, "px  ").concat(spacing * 2, "px 0 ").concat(spacing * 5, "px");
-});
-var StyledIconContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "BaseMessage__StyledIconContainer"
-})(["margin:", ";"], function (_ref5) {
-  var theme = _ref5.theme;
-  var spacing = theme.kitt.spacing;
-  return "".concat(spacing, "px ").concat(spacing * 5, "px 0 0");
-});
-var StyledTextContent = /*#__PURE__*/styled(Typography.Text).withConfig({
-  displayName: "BaseMessage__StyledTextContent"
-})(["flex:1;text-align:", ";"], function (_ref6) {
-  var $isCenteredText = _ref6.$isCenteredText;
-  return $isCenteredText ? 'center' : 'left';
-});
-var StyledMessageContent = /*#__PURE__*/styled.View.withConfig({
-  displayName: "BaseMessage__StyledMessageContent"
-})(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], function (_ref7) {
-  var theme = _ref7.theme;
-  var spacing = theme.kitt.spacing;
-  return "".concat(spacing * 4, "px ").concat(spacing * 5, "px");
-});
-function BaseMessage(_ref8) {
-  var _ref8$type = _ref8.type,
-      type = _ref8$type === void 0 ? 'info' : _ref8$type,
-      children = _ref8.children,
-      hasNoRadius = _ref8.hasNoRadius,
-      centeredText = _ref8.centeredText,
-      insets = _ref8.insets,
-      onDismiss = _ref8.onDismiss;
-  var color = getColorByType(type);
-  return /*#__PURE__*/jsxs(StyledMessageContainer, {
-    $type: type,
-    $hasNoRadius: hasNoRadius,
-    $insets: insets,
-    children: [/*#__PURE__*/jsxs(StyledMessageContent, {
-      children: [centeredText ? null : /*#__PURE__*/jsx(StyledIconContainer, {
-        children: /*#__PURE__*/jsx(Icon, {
-          color: color,
-          icon: /*#__PURE__*/jsx(IconContent, {
-            type: type,
-            color: color
-          })
-        })
-      }), /*#__PURE__*/jsx(StyledTextContent, {
-        $isCenteredText: centeredText,
-        base: "body",
-        color: color,
-        children: children
-      })]
-    }), onDismiss ? /*#__PURE__*/jsx(StyledDismissWrapper, {
-      children: /*#__PURE__*/jsx(IconButton, {
-        color: getIconButtonColor(type),
-        icon: /*#__PURE__*/jsx(XIcon, {}),
-        onPress: onDismiss
-      })
+  return /*#__PURE__*/jsxs(Header, {
+    insetTop: Platform.OS === 'ios' ? undefined : 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]
   });
 }
 
-function Message(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'info' : _ref$type,
-      children = _ref.children,
-      hasNoRadius = _ref.hasNoRadius,
-      centeredText = _ref.centeredText,
-      insets = _ref.insets,
-      onDismiss = _ref.onDismiss;
-  return /*#__PURE__*/jsx(BaseMessage, {
-    insets: insets,
-    hasNoRadius: hasNoRadius,
-    type: type,
-    centeredText: centeredText,
-    onDismiss: onDismiss,
+var Container$3 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "FullScreenModal__Container"
+})(["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$3, {
     children: children
   });
 }
+FullScreenModal.Header = FullScreenModalHeader;
+FullScreenModal.Body = FullScreenModalBody;
 
-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; }
+var _excluded$7 = ["as", "children"];
 
-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; }
-// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
-  displayName: "Overlay__OverlayPressable"
-})(function (_ref) {
-  var theme = _ref.theme;
-  return _objectSpread$5(_objectSpread$5({}, 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, {})
-  });
-}
+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; }
 
-var BodyView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Body__BodyView"
-})(["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
-    })
-  });
-}
+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 StyleWebWrapper(_ref) {
+  var as = _ref.as,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
-var FooterView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Footer__FooterView"
-})(["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, {
+  if (Platform.OS !== 'web') return children;
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsx(as || 'div', _objectSpread$a(_objectSpread$a({}, props), {}, {
     children: children
-  });
+  }));
 }
 
-var OnCloseContext = /*#__PURE__*/createContext(function () {});
+var _excluded$6 = ["color", "disabled"];
 
-var HeaderView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__HeaderView"
-})(["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) {
+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$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; }
+var PressableIconButtonWebWrapper = undefined;
+var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "PressableIconButton__StyledPressableIconButton"
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref) {
   var theme = _ref.theme;
-  return theme.kitt.spacing * 2;
+  return theme.kitt.iconButton.borderRadius;
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.kitt.colors.separator;
-});
-var LeftIconView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__LeftIconView"
-})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
+  return theme.kitt.iconButton.width;
+}, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.spacing * 2;
-});
-var RightIconView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__RightIconView"
-})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.spacing * 2;
-});
-var TitleView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Header__TitleView"
-})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
-  var theme = _ref5.theme,
-      isIconLeft = _ref5.isIconLeft;
-  return isIconLeft ? 0 : theme.kitt.spacing * 2;
+  return theme.kitt.iconButton.height;
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      disabled = _ref4.disabled;
+  var iconButton = theme.kitt.iconButton;
+
+  if (Platform.OS !== 'web') {
+    return undefined;
+  }
+
+  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 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
-      })
-    })]
+function PressableIconButton(_ref5) {
+  var color = _ref5.color,
+      disabled = _ref5.disabled,
+      props = _objectWithoutProperties(_ref5, _excluded$6);
+
+  return /*#__PURE__*/jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    $isWhite: color === 'white',
+    $isDisabled: Boolean(disabled),
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$9(_objectSpread$9({}, props), {}, {
+      disabled: disabled
+    }))
   });
 }
 
-var ModalView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Modal__ModalView"
-})(["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;
+var AnimatedIconButtonBackground = /*#__PURE__*/styled(Animated$1.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground"
+})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], function (_ref) {
+  var theme = _ref.theme,
+      color = _ref.color,
+      disabled = _ref.disabled;
+  var iconButton = theme.kitt.iconButton;
+  if (disabled) return iconButton.disabled.backgroundColor;
+  if (color === 'white') return iconButton.white.pressedBackgroundColor;
+  return iconButton["default"].pressedBackgroundColor;
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.kitt.spacing * 4;
-});
-var ContentView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Modal__ContentView"
-})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
+  return theme.kitt.iconButton.borderRadius;
+}, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.card.borderRadius;
+  return theme.kitt.iconButton.width;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.kitt.colors.uiBackgroundLight;
+  return theme.kitt.iconButton.height;
 });
-function Modal(_ref5) {
-  var visible = _ref5.visible,
+var AnimatedViewContainer = /*#__PURE__*/styled(Animated$1.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedViewContainer"
+})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
+function PressableAnimatedContainer(_ref5) {
+  var disabled = _ref5.disabled,
+      _ref5$color = _ref5.color,
+      color = _ref5$color === void 0 ? 'black' : _ref5$color,
+      testID = _ref5.testID,
+      _ref5$accessibilityRo = _ref5.accessibilityRole,
+      accessibilityRole = _ref5$accessibilityRo === void 0 ? 'button' : _ref5$accessibilityRo,
+      accessibilityLabel = _ref5.accessibilityLabel,
       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,
-      centeredText = _ref.centeredText,
-      insets = _ref.insets,
-      onDelete = _ref.onDelete,
-      onDismiss = _ref.onDismiss;
+      onPress = _ref5.onPress;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(false);
+  var opacityStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        opacity: withSpring(pressed.value ? 1 : 0)
+      };
+    };
 
-  if ((process.env.NODE_ENV !== "production")) {
-    if (onDelete) {
-      throw new Error('onDelete is deprecated us onDismiss instead');
-    }
-  }
+    _f._closure = {
+      withSpring: withSpring,
+      pressed: pressed
+    };
+    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
+    _f.__workletHash = 10645190329247;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
+    _f.__optimalization = 2;
 
-  return /*#__PURE__*/jsx(BaseMessage, {
-    hasNoRadius: true,
-    type: type,
-    centeredText: centeredText,
-    insets: insets,
-    onDismiss: onDismiss,
-    children: children
-  });
-}
+    global.__reanimatedWorkletInit(_f);
 
-var Container$2 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "SkeletonContent__Container"
-})(["background-color:", ";border-color:", ";height:100%;width:100%;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.skeleton.backgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.skeleton.flareColor;
-});
-var AnimatedLinearGradient = Animated$1.createAnimatedComponent(LinearGradient);
-function SkeletonContent(_ref3) {
-  var isLoading = _ref3.isLoading,
-      width = _ref3.width;
-  var theme = /*#__PURE__*/useTheme();
-  var sharedX = useSharedValue(0);
-  useEffect(function () {
-    if (isLoading) {
-      sharedX.value = withRepeat(withTiming(1, {
-        duration: theme.kitt.skeleton.animationDuration,
-        easing: Easing$1.inOut(Easing$1.ease)
-      }), -1);
-    }
-  }, [sharedX, width, isLoading, theme]);
-  var linearGradientStyle = useAnimatedStyle(function () {
+    return _f;
+  }());
+  var scaleStyles = useAnimatedStyle(function () {
     var _f = function () {
       return {
         transform: [{
-          translateX: interpolate(sharedX.value, [0, 1], [-width, width])
+          scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base["default"])
         }]
       };
     };
 
     _f._closure = {
-      interpolate: interpolate,
-      sharedX: sharedX,
-      width: width
+      withSpring: withSpring,
+      pressed: pressed,
+      theme: {
+        kitt: {
+          iconButton: {
+            scale: {
+              base: {
+                active: theme.kitt.iconButton.scale.base.active,
+                "default": theme.kitt.iconButton.scale.base["default"]
+              }
+            }
+          }
+        }
+      }
     };
-    _f.asString = "function _f(){const{interpolate,sharedX,width}=jsThis._closure;{return{transform:[{translateX:interpolate(sharedX.value,[0,1],[-width,width])}]};}}";
-    _f.__workletHash = 1670955855244;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (41:47)";
-    _f.__optimalization = 3;
+    _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
+    _f.__workletHash = 13861998831411;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
+    _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
 
     return _f;
   }());
-  return /*#__PURE__*/jsx(Container$2, {
-    children: /*#__PURE__*/jsx(AnimatedLinearGradient, {
-      colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
-      locations: [0.1, 0.5, 0.9],
-      start: {
-        x: 0,
-        y: 0
-      },
-      end: {
-        x: 1,
-        y: 0
-      },
-      style: [StyleSheet.absoluteFill, linearGradientStyle]
-    })
-  });
-}
-
-var SkeletonContainer = /*#__PURE__*/styled(View).withConfig({
-  displayName: "Skeleton__SkeletonContainer"
-})(["overflow:hidden;"]);
-function Skeleton(_ref) {
-  var isLoading = _ref.isLoading,
-      style = _ref.style;
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  return /*#__PURE__*/jsx(SkeletonContainer, {
-    style: style,
-    onLayout: function onLayout(_ref2) {
-      var nativeEvent = _ref2.nativeEvent;
-      return setWidth(nativeEvent.layout.width);
+  return /*#__PURE__*/jsx(PressableIconButton, {
+    accessibilityRole: accessibilityRole,
+    disabled: disabled,
+    color: color,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    onPress: onPress,
+    onPressIn: function onPressIn() {
+      pressed.value = true;
     },
-    children: /*#__PURE__*/jsx(SkeletonContent, {
-      isLoading: isLoading,
-      width: width
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    },
+    children: /*#__PURE__*/jsxs(AnimatedViewContainer, {
+      style: disabled ? [{
+        transform: [{
+          scale: 1
+        }]
+      }] : [scaleStyles],
+      children: [/*#__PURE__*/jsx(AnimatedIconButtonBackground, {
+        disabled: disabled,
+        color: color,
+        style: disabled ? [{
+          opacity: 1
+        }] : [opacityStyles]
+      }), children]
     })
   });
 }
-var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
-  displayName: "Skeleton__Bar"
-})(["width:100%;height:", "px;border-radius:", "px;"], function (_ref3) {
+
+var IconButtonContentBorder = /*#__PURE__*/styled.View.withConfig({
+  displayName: "IconButton__IconButtonContentBorder"
+})(["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,
+      disabled = _ref2.disabled;
+  return disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor;
+}, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.spacing * 2;
+  return theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.kitt.spacing * 2;
-});
-var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
-  displayName: "Skeleton__Circle"
-})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref5) {
+  return theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth;
+}, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.kitt.spacing * 12;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.kitt.spacing * 12;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.kitt.spacing * 6;
-});
-var Square = /*#__PURE__*/styled(Skeleton).withConfig({
-  displayName: "Skeleton__Square"
-})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.kitt.spacing * 12;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.kitt.spacing * 12;
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.kitt.spacing * 1.5;
-});
-Skeleton.Bar = Bar;
-Skeleton.Circle = Circle;
-Skeleton.Square = Square;
-
-var Flex = /*#__PURE__*/styled.View.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
-    return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
-  }
-}).withConfig({
-  displayName: "Flex"
-})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], function (_ref) {
-  var direction = _ref.direction;
-  return direction;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      _ref2$padding = _ref2.padding,
-      padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
-  return padding * theme.kitt.spacing;
+  return theme.kitt.iconButton.borderRadius;
 });
 
-var storyPadding = 16;
-
-var getBackgroundColorFromBlockColor = function (theme) {
-  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'transparent';
-
-  switch (color) {
-    case 'dark':
-      return '#293033';
-
-    case 'light':
-      return '#ffffff';
-
-    case 'primary':
-      return theme.kitt.palettes.lateOcean.lateOcean;
-
-    default:
-      return 'transparent';
-  }
-};
-
-var getTypographyColorFromBlockColor = function () {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
-
-  switch (color) {
-    case 'dark':
-    case 'primary':
-      return 'white';
-
-    case 'light':
-    default:
-      return 'black';
-  }
-};
-
-var StoryBlockBackgroundContext = /*#__PURE__*/createContext('transparent');
-var StoryBlockColorContext = /*#__PURE__*/createContext('black');
-var useStoryBlockColor = function (color) {
-  var storyBlockColor = useContext(StoryBlockColorContext);
-  return color || storyBlockColor;
-};
-var StyledStoryBlockView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryBlock__StyledStoryBlockView"
-})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
-  var theme = _ref.theme,
-      background = _ref.background;
-  return getBackgroundColorFromBlockColor(theme, background);
-});
-function StoryBlock(_ref2) {
-  var children = _ref2.children,
-      background = _ref2.background;
-  return /*#__PURE__*/jsx(StyledStoryBlockView, {
-    background: background,
-    children: /*#__PURE__*/jsx(StoryBlockColorContext.Provider, {
-      value: getTypographyColorFromBlockColor(background),
-      children: /*#__PURE__*/jsx(StoryBlockBackgroundContext.Provider, {
-        value: background,
-        children: children
-      })
+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
     })
   });
 }
 
-var StoryTitleContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryTitle__StoryTitleContainer"
-})(["margin-bottom:30px;"]);
-var StorySubTitleContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryTitle__StorySubTitleContainer"
-})(["margin-bottom:10px;"]);
-function StoryTitle(_ref) {
-  var color = _ref.color,
-      children = _ref.children,
-      numberOfLines = _ref.numberOfLines;
-  return /*#__PURE__*/jsx(StoryTitleContainer, {
-    children: /*#__PURE__*/jsx(Typography.Header1, {
-      variant: "bold",
-      base: "header1",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
+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 StoryTitleLevel2(_ref2) {
-  var color = _ref2.color,
-      children = _ref2.children,
-      numberOfLines = _ref2.numberOfLines;
-  return /*#__PURE__*/jsx(StoryTitleContainer, {
-    children: /*#__PURE__*/jsx(Typography.Header2, {
-      variant: "bold",
-      base: "header2",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
-    })
-  });
-}
+var _excluded$5 = ["children"];
 
-StoryTitleLevel2.displayName = 'StoryTitle.Level2';
+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 StoryTitleLevel3(_ref3) {
-  var color = _ref3.color,
-      children = _ref3.children,
-      numberOfLines = _ref3.numberOfLines;
-  return /*#__PURE__*/jsx(StorySubTitleContainer, {
-    children: /*#__PURE__*/jsx(Typography.Header3, {
-      variant: "bold",
-      base: "header3",
-      medium: "header4",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
-    })
-  });
+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; }
+var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemContent__ContentView"
+})(["flex:1 0 0%;align-self:center;"]);
+function ListItemContent(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded$5);
+
+  return /*#__PURE__*/jsx(ContentView$1, _objectSpread$8(_objectSpread$8({}, rest), {}, {
+    children: children
+  }));
 }
 
-StoryTitleLevel3.displayName = 'StoryTitle.Level3';
+var _excluded$4 = ["children", "side"],
+    _excluded2$1 = ["children", "align"];
 
-function StoryTitleLevel4(_ref4) {
-  var color = _ref4.color,
-      children = _ref4.children,
-      numberOfLines = _ref4.numberOfLines;
-  return /*#__PURE__*/jsx(StorySubTitleContainer, {
-    children: /*#__PURE__*/jsx(Typography.Header4, {
-      variant: "bold",
-      base: "header4",
-      medium: "header5",
-      color: useStoryBlockColor(color),
-      numberOfLines: numberOfLines,
-      children: children
-    })
-  });
-}
+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; }
 
-StoryTitleLevel4.displayName = 'StoryTitle.Level3';
-StoryTitle.Level2 = StoryTitleLevel2;
-StoryTitle.Level3 = StoryTitleLevel3;
-StoryTitle.Level4 = StoryTitleLevel4;
-
-var StoryContainer$1 = /*#__PURE__*/styled.ScrollView.withConfig({
-  displayName: "Story__StoryContainer"
-})(["padding:", "px;"], storyPadding);
-function Story(_ref) {
-  var title = _ref.title,
-      contentContainerStyle = _ref.contentContainerStyle,
-      children = _ref.children;
-  return /*#__PURE__*/jsxs(StoryContainer$1, {
-    contentContainerStyle: contentContainerStyle,
-    children: [/*#__PURE__*/jsx(StoryTitle, {
-      children: title
-    }), children]
-  });
-}
-
-var _excluded$2 = ["title", "children", "internalIsDemoSection"],
-    _excluded2 = ["title", "children"],
-    _excluded3 = ["title", "children"];
-
-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$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 SideContainerView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemSideContent__SideContainerView"
+})(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
+  var theme = _ref.theme,
+      side = _ref.side;
+  return side === 'right' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      side = _ref2.side;
+  return side === 'left' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
+}); // Handles the vertical alignment of the side elements of the list item
 
-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 StyledSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledSection"
-})(["margin-bottom:32px;"]);
-function StorySection(_ref) {
-  var title = _ref.title,
-      children = _ref.children,
-      internalIsDemoSection = _ref.internalIsDemoSection,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+function ListItemSideContainer(_ref3) {
+  var children = _ref3.children,
+      _ref3$side = _ref3.side,
+      side = _ref3$side === void 0 ? 'left' : _ref3$side,
+      rest = _objectWithoutProperties(_ref3, _excluded$4);
 
-  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/jsxs(StyledSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
-      children: title
-    }), children]
+  return /*#__PURE__*/jsx(SideContainerView, _objectSpread$7(_objectSpread$7({
+    side: side
+  }, rest), {}, {
+    children: children
   }));
 }
-var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledSubSection"
-})(["margin-bottom:16px;"]);
-
-function SubSection(_ref2) {
-  var title = _ref2.title,
-      children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
+var SideContentView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemSideContent__SideContentView"
+})(["align-self:", ";"], function (_ref4) {
+  var align = _ref4.align;
+  return align;
+});
+function ListItemSideContent(_ref5) {
+  var children = _ref5.children,
+      _ref5$align = _ref5.align,
+      align = _ref5$align === void 0 ? 'auto' : _ref5$align,
+      rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
-  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
-      children: title
-    }), children]
+  return /*#__PURE__*/jsx(SideContentView, _objectSpread$7(_objectSpread$7({
+    align: align
+  }, rest), {}, {
+    children: children
   }));
 }
 
-var StyledBlockSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledBlockSection"
-})(["margin-bottom:16px;"]);
+var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 
-function BlockSection(_ref3) {
-  var title = _ref3.title,
-      children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+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; }
 
-  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
-      children: title
-    }), children]
-  }));
-}
+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 ContainerView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItem__ContainerView"
+})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
+  var withPadding = _ref.withPadding,
+      theme = _ref.theme;
+  return withPadding ? theme.kitt.listItem.padding : 0;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      borders = _ref2.borders;
+  var borderWidth = theme.kitt.listItem.borderWidth;
 
-var StyledDemoSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledDemoSection"
-})(["margin-bottom:64px;"]);
+  if (borders === 'top') {
+    return "border-top-width: ".concat(borderWidth, "px");
+  }
 
-function DemoSection(_ref4) {
-  var children = _ref4.children;
-  return /*#__PURE__*/jsx(StyledDemoSection, {
-    children: /*#__PURE__*/jsx(StorySection, {
-      internalIsDemoSection: true,
-      title: "Demo",
-      children: children
-    })
-  });
-}
+  if (borders === 'bottom') {
+    return "border-bottom-width: ".concat(borderWidth, "px");
+  }
 
-StorySection.SubSection = SubSection;
-StorySection.BlockSection = BlockSection;
-/** @deprecated use StorySection.Demo instead */
+  if (borders === 'both') {
+    return css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
+  }
 
-StorySection.DemoSection = DemoSection;
-StorySection.Demo = DemoSection;
-/** @deprecated use StorySection instead */
+  return 'border: none';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.listItem.borderColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.colors.uiBackgroundLight;
+});
+function ListItem(_ref5) {
+  var children = _ref5.children,
+      withPadding = _ref5.withPadding,
+      borders = _ref5.borders,
+      left = _ref5.left,
+      right = _ref5.right,
+      onPress = _ref5.onPress,
+      rest = _objectWithoutProperties(_ref5, _excluded$3);
 
-var DeprecatedSection = StorySection;
+  var Wrapper = onPress ? Pressable : Fragment;
+  var wrapperProps = onPress ? _objectSpread$6({
+    accessibilityRole: 'button',
+    onPress: onPress
+  }, rest) : undefined;
+  var containerProps = onPress ? undefined : rest;
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread$6(_objectSpread$6({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(ContainerView, _objectSpread$6(_objectSpread$6({
+      withPadding: withPadding,
+      borders: borders
+    }, containerProps), {}, {
+      children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "left",
+        children: left
+      }) : null, /*#__PURE__*/jsx(ListItemContent, {
+        children: children
+      }), right ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "right",
+        children: right
+      }) : null]
+    }))
+  }));
+}
+ListItem.Content = ListItemContent;
+ListItem.SideContent = ListItemSideContent;
+ListItem.SideContainer = ListItemSideContainer;
 
-function StoryContainer(_ref) {
-  var children = _ref.children,
-      title = _ref.title,
-      _ref$state = _ref.state,
-      state = _ref$state === void 0 ? 'none' : _ref$state,
-      _ref$platform = _ref.platform,
-      platform = _ref$platform === void 0 ? 'all' : _ref$platform;
-  if (platform === 'web') return null;
-  return /*#__PURE__*/jsx(StorySection.BlockSection, {
-    testID: state,
-    title: title,
-    children: children
-  });
+function getActivityIndicatorSize(size) {
+  if (Platform.OS === 'android') return size;
+  return size < 36 ? 'small' : 'large';
 }
 
-function StoryDecorator(storyFn, context) {
-  return /*#__PURE__*/jsx(Story, {
-    title: context.name,
-    children: storyFn()
+function Loader(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 20 : _ref$size;
+  var theme = /*#__PURE__*/useTheme();
+  var colorHex = theme.kitt.typography.colors[color];
+  return /*#__PURE__*/jsx(ActivityIndicator, {
+    testID: "ActivityIndicator",
+    color: colorHex,
+    size: getActivityIndicatorSize(size)
   });
 }
 
-var SmallScreenRow = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__SmallScreenRow"
-})(["flex-direction:column;margin:0;"]);
-var SmallScreenCol = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__SmallScreenCol"
-})(["padding:8px 0 16px;"]);
-var FlexRow = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__FlexRow"
-})(["flex-direction:row;margin:0 -4px 16px;"]);
-var FlexCol = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__FlexCol"
-})(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
+function LargeLoader(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color;
+  return /*#__PURE__*/jsx(Loader, {
+    color: color,
+    size: 60
+  });
+}
 
-function StoryGridRow(_ref) {
-  var children = _ref.children,
-      _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? 'small' : _ref$breakpoint;
+function IconContent(_ref) {
+  var type = _ref.type,
+      color = _ref.color;
 
-  // eslint-disable-next-line unicorn/expiring-todo-comments
-  // TODO use useBreakpoint instead
-  var _useWindowDimensions = useWindowDimensions(),
-      width = _useWindowDimensions.width;
+  switch (type) {
+    case 'warning':
+      return /*#__PURE__*/jsx(AlertCircleIcon, {
+        color: color
+      });
 
-  var breakpointValue = breakpoint === 'small' ? 480 : 768;
+    case 'success':
+      return /*#__PURE__*/jsx(CheckIcon, {
+        color: color
+      });
 
-  if (width < breakpointValue) {
-    return /*#__PURE__*/jsx(SmallScreenRow, {
-      children: Children.map(children, function (child) {
-        return /*#__PURE__*/jsx(SmallScreenCol, {
-          children: child
-        });
-      })
-    });
-  }
+    case 'danger':
+      return /*#__PURE__*/jsx(AlertTriangleIcon, {
+        color: color
+      });
 
-  return /*#__PURE__*/jsx(FlexRow, {
-    children: Children.map(children, function (child) {
-      return /*#__PURE__*/jsx(FlexCol, {
-        children: child
+    default:
+      return /*#__PURE__*/jsx(InfoIcon, {
+        color: color
       });
-    })
-  });
+  }
 }
 
-function StoryGridCol(_ref2) {
-  var title = _ref2.title,
-      titleColor = _ref2.titleColor,
-      children = _ref2.children,
-      _ref2$platform = _ref2.platform,
-      platform = _ref2$platform === void 0 ? 'all' : _ref2$platform;
-  var isNative = Platform.OS === 'ios' || Platform.OS === 'android';
+var getColorByType = function (type) {
+  switch (type) {
+    case 'success':
+      return 'white';
 
-  if (Platform.OS === 'web' && platform === 'native') {
-    return null;
-  }
+    case 'danger':
+      return 'white';
 
-  if (isNative && platform === 'web') {
-    return null;
+    case 'warning':
+    default:
+      return 'black';
   }
+};
+var getIconButtonColor = function (messageType) {
+  switch (messageType) {
+    case 'success':
+    case 'danger':
+      return 'white';
 
-  return /*#__PURE__*/jsxs(Fragment$1, {
-    children: [title ? /*#__PURE__*/jsx(StoryTitle.Level4, {
-      numberOfLines: 1,
-      color: titleColor,
-      children: title
-    }) : null, children]
-  });
-}
-
-var StoryGrid = {
-  Row: StoryGridRow,
-  Col: StoryGridCol
+    case 'warning':
+    default:
+      return 'black';
+  }
 };
 
-var Container$1 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Tag__Container"
-})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
-  var theme = _ref.theme,
-      type = _ref.type,
-      variant = _ref.variant;
-  return theme.kitt.tag[type][variant].backgroundColor;
+var StyledMessageContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledMessageContainer"
+})(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], function (_ref) {
+  var _$insets$top;
+
+  var $insets = _ref.$insets;
+  return (_$insets$top = $insets === null || $insets === void 0 ? void 0 : $insets.top) !== null && _$insets$top !== void 0 ? _$insets$top : 0;
 }, function (_ref2) {
   var theme = _ref2.theme,
-      type = _ref2.type,
-      variant = _ref2.variant;
-  return theme.kitt.tag[type][variant].borderWidth;
+      $hasNoRadius = _ref2.$hasNoRadius;
+  return $hasNoRadius ? 0 : theme.kitt.spacing * 5;
 }, function (_ref3) {
   var theme = _ref3.theme,
-      type = _ref3.type,
-      variant = _ref3.variant;
-  return theme.kitt.tag[type][variant].borderColor;
-}, function (_ref4) {
+      $type = _ref3.$type;
+  return theme.kitt.feedbackMessage[$type].backgroundColor;
+});
+var StyledDismissWrapper = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledDismissWrapper"
+})(["align-items:center;align-items:flex-start;margin:", ";"], function (_ref4) {
   var theme = _ref4.theme;
-  return theme.kitt.tag.padding;
-}, function (_ref5) {
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing * 2.5, "px  ").concat(spacing * 2, "px 0 ").concat(spacing * 5, "px");
+});
+var StyledIconContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledIconContainer"
+})(["margin:", ";"], function (_ref5) {
   var theme = _ref5.theme;
-  return theme.kitt.tag.borderRadius;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing, "px ").concat(spacing * 5, "px 0 0");
 });
-var getLabelColor = function (type, variant) {
-  switch (type) {
-    case 'danger':
-      {
-        return variant === 'outline' ? 'danger' : 'black';
-      }
+var StyledTextContent = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "BaseMessage__StyledTextContent"
+})(["flex:1;text-align:", ";"], function (_ref6) {
+  var $isCenteredText = _ref6.$isCenteredText;
+  return $isCenteredText ? 'center' : 'left';
+});
+var StyledMessageContent = /*#__PURE__*/styled.View.withConfig({
+  displayName: "BaseMessage__StyledMessageContent"
+})(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], function (_ref7) {
+  var theme = _ref7.theme;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing * 4, "px ").concat(spacing * 5, "px");
+});
+function BaseMessage(_ref8) {
+  var _ref8$type = _ref8.type,
+      type = _ref8$type === void 0 ? 'info' : _ref8$type,
+      children = _ref8.children,
+      hasNoRadius = _ref8.hasNoRadius,
+      centeredText = _ref8.centeredText,
+      insets = _ref8.insets,
+      onDismiss = _ref8.onDismiss;
+  var color = getColorByType(type);
+  return /*#__PURE__*/jsxs(StyledMessageContainer, {
+    $type: type,
+    $hasNoRadius: hasNoRadius,
+    $insets: insets,
+    children: [/*#__PURE__*/jsxs(StyledMessageContent, {
+      children: [centeredText ? null : /*#__PURE__*/jsx(StyledIconContainer, {
+        children: /*#__PURE__*/jsx(Icon, {
+          color: color,
+          icon: /*#__PURE__*/jsx(IconContent, {
+            type: type,
+            color: color
+          })
+        })
+      }), /*#__PURE__*/jsx(StyledTextContent, {
+        $isCenteredText: centeredText,
+        base: "body",
+        color: color,
+        children: children
+      })]
+    }), onDismiss ? /*#__PURE__*/jsx(StyledDismissWrapper, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        color: getIconButtonColor(type),
+        icon: /*#__PURE__*/jsx(XIcon, {}),
+        onPress: onDismiss
+      })
+    }) : null]
+  });
+}
 
-    case 'primary':
-      {
-        return 'primary';
-      }
+function Message(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'info' : _ref$type,
+      children = _ref.children,
+      hasNoRadius = _ref.hasNoRadius,
+      centeredText = _ref.centeredText,
+      insets = _ref.insets,
+      onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/jsx(BaseMessage, {
+    insets: insets,
+    hasNoRadius: hasNoRadius,
+    type: type,
+    centeredText: centeredText,
+    onDismiss: onDismiss,
+    children: children
+  });
+}
 
-    case 'default':
-      {
-        return 'black';
-      }
+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; }
 
-    default:
-      {
-        return 'black';
-      }
-  }
-};
-function Tag(_ref6) {
-  var label = _ref6.label,
-      _ref6$type = _ref6.type,
-      type = _ref6$type === void 0 ? 'default' : _ref6$type,
-      _ref6$variant = _ref6.variant,
-      variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
-  return /*#__PURE__*/jsx(Container$1, {
-    type: type,
-    variant: variant,
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-xsmall",
-      color: getLabelColor(type, variant),
-      children: label
+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; }
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
+  displayName: "Overlay__OverlayPressable"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _objectSpread$5(_objectSpread$5({}, 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.View.withConfig({
+  displayName: "Body__BodyView"
+})(["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 lateOceanColorPalette = {
-  lateOcean: '#4C34E0',
-  lateOceanLight1: '#705DE6',
-  lateOceanLight2: '#9485EC',
-  lateOceanLight3: '#D6BAF9',
-  warmEmbrace: '#F4D3CE',
-  warmEmbraceLight1: '#FFEDE6',
-  black1000: '#000000',
-  black800: '#2C293D',
-  black555: '#737373',
-  black200: '#CCCCCC',
-  black100: '#E5E5E5',
-  black50: '#F2F2F2',
-  black25: '#F9F9F9',
-  white: '#FFFFFF',
-  viride: '#38836D',
-  englishVermillon: '#D44148',
-  goldCrayola: '#F8C583',
-  aero: '#89BDDD',
-  transparent: 'transparent',
-  moonPurple: '#DBD6F9',
-  moonPurpleLight1: '#EDEBFC'
-};
+var FooterView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Footer__FooterView"
+})(["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 colors = {
-  primary: lateOceanColorPalette.lateOcean,
-  primaryLight: lateOceanColorPalette.lateOceanLight1,
-  accent: lateOceanColorPalette.warmEmbrace,
-  accentLight: lateOceanColorPalette.warmEmbraceLight1,
-  success: lateOceanColorPalette.viride,
-  correct: lateOceanColorPalette.viride,
-  danger: lateOceanColorPalette.englishVermillon,
-  info: lateOceanColorPalette.aero,
-  warning: lateOceanColorPalette.goldCrayola,
-  separator: lateOceanColorPalette.black100,
-  hover: lateOceanColorPalette.black100,
-  black: lateOceanColorPalette.black1000,
-  uiBackground: lateOceanColorPalette.black25,
-  uiBackgroundLight: lateOceanColorPalette.white,
-  transparent: lateOceanColorPalette.transparent,
-  disabled: lateOceanColorPalette.black50,
-  overlay: {
-    dark: 'rgba(41, 48, 51, 0.25)',
-    light: 'rgba(255, 255, 255, 0.90)',
-    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
-  }
-};
+var OnCloseContext = /*#__PURE__*/createContext(function () {});
 
-var avatar = {
-  borderRadius: 10,
-  "default": {
-    backgroundColor: colors.primary
-  },
-  light: {
-    backgroundColor: lateOceanColorPalette.black100
+var HeaderView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__HeaderView"
+})(["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.View.withConfig({
+  displayName: "Header__LeftIconView"
+})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.spacing * 2;
+});
+var RightIconView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__RightIconView"
+})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing * 2;
+});
+var TitleView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__TitleView"
+})(["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.View.withConfig({
+  displayName: "Modal__ModalView"
+})(["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.View.withConfig({
+  displayName: "Modal__ContentView"
+})(["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,
+      centeredText = _ref.centeredText,
+      insets = _ref.insets,
+      onDelete = _ref.onDelete,
+      onDismiss = _ref.onDismiss;
+
+  if ((process.env.NODE_ENV !== "production")) {
+    if (onDelete) {
+      throw new Error('onDelete is deprecated us onDismiss instead');
+    }
   }
-};
 
-var button = {
-  borderRadius: 30,
-  borderWidth: {
-    disabled: 2,
-    focus: 3
-  },
-  minHeight: 40,
-  minWidth: 40,
-  maxWidth: 335,
-  scale: {
-    base: {
-      "default": 1,
-      hover: 0.95,
-      active: 0.95
-    },
-    medium: {
-      hover: 1.05
+  return /*#__PURE__*/jsx(BaseMessage, {
+    hasNoRadius: true,
+    type: type,
+    centeredText: centeredText,
+    insets: insets,
+    onDismiss: onDismiss,
+    children: children
+  });
+}
+
+var Container$2 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "SkeletonContent__Container"
+})(["background-color:", ";border-color:", ";height:100%;width:100%;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.skeleton.backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.skeleton.flareColor;
+});
+var AnimatedLinearGradient = Animated$1.createAnimatedComponent(LinearGradient);
+function SkeletonContent(_ref3) {
+  var isLoading = _ref3.isLoading,
+      width = _ref3.width;
+  var theme = /*#__PURE__*/useTheme();
+  var sharedX = useSharedValue(0);
+  useEffect(function () {
+    if (isLoading) {
+      sharedX.value = withRepeat(withTiming(1, {
+        duration: theme.kitt.skeleton.animationDuration,
+        easing: Easing$1.inOut(Easing$1.ease)
+      }), -1);
     }
-  },
-  contentPadding: {
-    "default": '8px 16px 7px',
-    large: '12px 24px 11px',
-    disabled: '6px 14px 5px'
-  },
-  transition: {
-    duration: '200ms',
-    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
-  },
-  "default": {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)'
-  },
-  primary: {
-    backgroundColor: colors.primary,
-    pressedBackgroundColor: colors.primaryLight,
-    hoverBackgroundColor: colors.primaryLight,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)'
-  },
-  white: {
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-    pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
-    focusBorderColor: 'rgba(255, 255, 255, 0.1)'
-  },
-  subtle: {
-    backgroundColor: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-    color: colors.primary,
-    hoverColor: 'rgba(76, 52, 224, 0.8)',
-    activeColor: 'rgba(76, 52, 224, 0.8)'
-  },
-  'subtle-dark': {
-    backgroundColor: colors.transparent,
-    pressedBackgroundColor: colors.transparent,
-    hoverBackgroundColor: colors.transparent,
-    focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-    color: colors.black,
-    hoverColor: 'rgba(0, 0, 0, 0.8)',
-    activeColor: 'rgba(0, 0, 0, 0.8)'
-  },
-  disabled: {
-    backgroundColor: colors.disabled,
-    pressedBackgroundColor: colors.disabled,
-    hoverBackgroundColor: colors.disabled,
-    focusBorderColor: lateOceanColorPalette.black100,
-    borderColor: lateOceanColorPalette.black100
+  }, [sharedX, width, isLoading, theme]);
+  var linearGradientStyle = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        transform: [{
+          translateX: interpolate(sharedX.value, [0, 1], [-width, width])
+        }]
+      };
+    };
+
+    _f._closure = {
+      interpolate: interpolate,
+      sharedX: sharedX,
+      width: width
+    };
+    _f.asString = "function _f(){const{interpolate,sharedX,width}=jsThis._closure;{return{transform:[{translateX:interpolate(sharedX.value,[0,1],[-width,width])}]};}}";
+    _f.__workletHash = 1670955855244;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (41:47)";
+    _f.__optimalization = 3;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  return /*#__PURE__*/jsx(Container$2, {
+    children: /*#__PURE__*/jsx(AnimatedLinearGradient, {
+      colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
+      locations: [0.1, 0.5, 0.9],
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 0
+      },
+      style: [StyleSheet.absoluteFill, linearGradientStyle]
+    })
+  });
+}
+
+var SkeletonContainer = /*#__PURE__*/styled(View).withConfig({
+  displayName: "Skeleton__SkeletonContainer"
+})(["overflow:hidden;"]);
+function Skeleton(_ref) {
+  var isLoading = _ref.isLoading,
+      style = _ref.style;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  return /*#__PURE__*/jsx(SkeletonContainer, {
+    style: style,
+    onLayout: function onLayout(_ref2) {
+      var nativeEvent = _ref2.nativeEvent;
+      return setWidth(nativeEvent.layout.width);
+    },
+    children: /*#__PURE__*/jsx(SkeletonContent, {
+      isLoading: isLoading,
+      width: width
+    })
+  });
+}
+var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
+  displayName: "Skeleton__Bar"
+})(["width:100%;height:", "px;border-radius:", "px;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.spacing * 2;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing * 2;
+});
+var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
+  displayName: "Skeleton__Circle"
+})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.spacing * 6;
+});
+var Square = /*#__PURE__*/styled(Skeleton).withConfig({
+  displayName: "Skeleton__Square"
+})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.spacing * 12;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.kitt.spacing * 1.5;
+});
+Skeleton.Bar = Bar;
+Skeleton.Circle = Circle;
+Skeleton.Square = Square;
+
+var Flex = /*#__PURE__*/styled.View.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
+    return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
   }
-};
+}).withConfig({
+  displayName: "Flex"
+})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], function (_ref) {
+  var direction = _ref.direction;
+  return direction;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      _ref2$padding = _ref2.padding,
+      padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
+  return padding * theme.kitt.spacing;
+});
 
-var card = {
-  borderRadius: 20,
-  borderWidth: 2,
-  primary: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.primary
-  },
-  secondary: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator
-  },
-  subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: colors.separator
+var storyPadding = 16;
+
+var getBackgroundColorFromBlockColor = function (theme) {
+  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'transparent';
+
+  switch (color) {
+    case 'dark':
+      return '#293033';
+
+    case 'light':
+      return '#ffffff';
+
+    case 'primary':
+      return theme.kitt.palettes.lateOcean.lateOcean;
+
+    default:
+      return 'transparent';
   }
 };
 
-var feedbackMessage = {
-  danger: {
-    backgroundColor: colors.danger
-  },
-  success: {
-    backgroundColor: colors.success
-  },
-  info: {
-    backgroundColor: colors.info
-  },
-  warning: {
-    backgroundColor: colors.warning
+var getTypographyColorFromBlockColor = function () {
+  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
+
+  switch (color) {
+    case 'dark':
+    case 'primary':
+      return 'white';
+
+    case 'light':
+    default:
+      return 'black';
   }
 };
 
-var calcLineHeight = function (fontSize, lineHeightMultiplier) {
-  return Math.round(fontSize * lineHeightMultiplier);
-};
-var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) {
-  return {
-    baseAndSmall: {
-      fontSize: baseAndSmallFontSize,
-      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)
-    },
-    mediumAndWide: {
-      fontSize: mediumAndWideFontSize,
-      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)
-    }
-  };
-};
-var typography = {
-  colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-anthracite': lateOceanColorPalette.black800,
-    'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
-  },
-  types: {
-    headers: {
-      fontFamily: {
-        regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
-      },
-      fontWeight: 400,
-      fontStyle: 'normal',
-      configs: {
-        // also known as xxlarge
-        header1: createTypographyTypeConfig(1.3, 38, 62),
-        // also known as xlarge
-        header2: createTypographyTypeConfig(1.3, 32, 48),
-        // also known as medium
-        header3: createTypographyTypeConfig(1.3, 24, 36),
-        // also known as xsmall
-        header4: createTypographyTypeConfig(1.3, 18, 24),
-        // also known as xxsmall
-        header5: createTypographyTypeConfig(1.3, 18, 18)
-      }
-    },
-    bodies: {
-      fontFamily: {
-        regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
-      configs: {
-        'body-large': createTypographyTypeConfig(1.6, 18, 24),
-        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
-        body: createTypographyTypeConfig(1.6, 16, 16),
-        'body-small': createTypographyTypeConfig(1.6, 14, 14),
-        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
-      }
-    }
-  },
-  link: {
-    disabledColor: lateOceanColorPalette.black200
-  }
+var StoryBlockBackgroundContext = /*#__PURE__*/createContext('transparent');
+var StoryBlockColorContext = /*#__PURE__*/createContext('black');
+var useStoryBlockColor = function (color) {
+  var storyBlockColor = useContext(StoryBlockColorContext);
+  return color || storyBlockColor;
 };
+var StyledStoryBlockView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryBlock__StyledStoryBlockView"
+})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
+  var theme = _ref.theme,
+      background = _ref.background;
+  return getBackgroundColorFromBlockColor(theme, background);
+});
+function StoryBlock(_ref2) {
+  var children = _ref2.children,
+      background = _ref2.background;
+  return /*#__PURE__*/jsx(StyledStoryBlockView, {
+    background: background,
+    children: /*#__PURE__*/jsx(StoryBlockColorContext.Provider, {
+      value: getTypographyColorFromBlockColor(background),
+      children: /*#__PURE__*/jsx(StoryBlockBackgroundContext.Provider, {
+        value: background,
+        children: children
+      })
+    })
+  });
+}
+
+var StoryTitleContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryTitle__StoryTitleContainer"
+})(["margin-bottom:30px;"]);
+var StorySubTitleContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryTitle__StorySubTitleContainer"
+})(["margin-bottom:10px;"]);
+function StoryTitle(_ref) {
+  var color = _ref.color,
+      children = _ref.children,
+      numberOfLines = _ref.numberOfLines;
+  return /*#__PURE__*/jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header1, {
+      variant: "bold",
+      base: "header1",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+function StoryTitleLevel2(_ref2) {
+  var color = _ref2.color,
+      children = _ref2.children,
+      numberOfLines = _ref2.numberOfLines;
+  return /*#__PURE__*/jsx(StoryTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header2, {
+      variant: "bold",
+      base: "header2",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+StoryTitleLevel2.displayName = 'StoryTitle.Level2';
+
+function StoryTitleLevel3(_ref3) {
+  var color = _ref3.color,
+      children = _ref3.children,
+      numberOfLines = _ref3.numberOfLines;
+  return /*#__PURE__*/jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header3, {
+      variant: "bold",
+      base: "header3",
+      medium: "header4",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+StoryTitleLevel3.displayName = 'StoryTitle.Level3';
+
+function StoryTitleLevel4(_ref4) {
+  var color = _ref4.color,
+      children = _ref4.children,
+      numberOfLines = _ref4.numberOfLines;
+  return /*#__PURE__*/jsx(StorySubTitleContainer, {
+    children: /*#__PURE__*/jsx(Typography.Header4, {
+      variant: "bold",
+      base: "header4",
+      medium: "header5",
+      color: useStoryBlockColor(color),
+      numberOfLines: numberOfLines,
+      children: children
+    })
+  });
+}
+
+StoryTitleLevel4.displayName = 'StoryTitle.Level3';
+StoryTitle.Level2 = StoryTitleLevel2;
+StoryTitle.Level3 = StoryTitleLevel3;
+StoryTitle.Level4 = StoryTitleLevel4;
+
+var StoryContainer$1 = /*#__PURE__*/styled.ScrollView.withConfig({
+  displayName: "Story__StoryContainer"
+})(["padding:", "px;"], storyPadding);
+function Story(_ref) {
+  var title = _ref.title,
+      contentContainerStyle = _ref.contentContainerStyle,
+      children = _ref.children;
+  return /*#__PURE__*/jsxs(StoryContainer$1, {
+    contentContainerStyle: contentContainerStyle,
+    children: [/*#__PURE__*/jsx(StoryTitle, {
+      children: title
+    }), children]
+  });
+}
+
+var _excluded$2 = ["title", "children", "internalIsDemoSection"],
+    _excluded2 = ["title", "children"],
+    _excluded3 = ["title", "children"];
+
+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$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 StyledSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledSection"
+})(["margin-bottom:32px;"]);
+function StorySection(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      internalIsDemoSection = _ref.internalIsDemoSection,
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
-var inputStatesStyle = {
-  "default": {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: 'black'
-  },
-  pending: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: 'black'
-  },
-  valid: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black'
-  },
-  hover: {
-    borderColor: lateOceanColorPalette.black200,
-    color: 'black'
-  },
-  focus: {
-    borderColor: colors.primary,
-    color: 'black'
-  },
-  disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator,
-    color: 'black-light'
-  },
-  invalid: {
-    borderColor: colors.separator,
-    color: 'black'
-  }
-};
-var input = {
-  color: {
-    selection: colors.primary,
-    placeholder: typography.colors['black-light']
-  },
-  borderWidth: 2,
-  borderRadius: 10,
-  icon: {
-    size: 20
-  },
-  padding: {
-    "default": '5px 16px',
-    iOSSingleLine: '7px 16px'
-  },
-  transition: {
-    property: 'border-color',
-    duration: '200ms',
-    timingFunction: 'ease-in-out'
-  },
-  states: inputStatesStyle
-};
+  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
+  return /*#__PURE__*/jsxs(StyledSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
+      children: title
+    }), children]
+  }));
+}
+var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledSubSection"
+})(["margin-bottom:16px;"]);
 
-var inputField = {
-  labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
-};
+function SubSection(_ref2) {
+  var title = _ref2.title,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
-var radio = {
-  size: 18,
-  unchecked: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderWidth: 2,
-    borderColor: lateOceanColorPalette.black200
-  },
-  checked: {
-    backgroundColor: colors.primary,
-    innerSize: 5,
-    innerBackgroundColor: colors.uiBackgroundLight
-  },
-  disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator
-  }
-};
+  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
+      children: title
+    }), children]
+  }));
+}
 
-var textArea = {
-  minHeight: 120
-};
+var StyledBlockSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledBlockSection"
+})(["margin-bottom:16px;"]);
 
-var forms = {
-  input: input,
-  radio: radio,
-  inputField: inputField,
-  textArea: textArea
-};
+function BlockSection(_ref3) {
+  var title = _ref3.title,
+      children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
-var fullScreenModal = {
-  header: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderColor: lateOceanColorPalette.black100
+  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
+      children: title
+    }), children]
+  }));
+}
+
+var StyledDemoSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StorySection__StyledDemoSection"
+})(["margin-bottom:64px;"]);
+
+function DemoSection(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/jsx(StyledDemoSection, {
+    children: /*#__PURE__*/jsx(StorySection, {
+      internalIsDemoSection: true,
+      title: "Demo",
+      children: children
+    })
+  });
+}
+
+StorySection.SubSection = SubSection;
+StorySection.BlockSection = BlockSection;
+/** @deprecated use StorySection.Demo instead */
+
+StorySection.DemoSection = DemoSection;
+StorySection.Demo = DemoSection;
+/** @deprecated use StorySection instead */
+
+var DeprecatedSection = StorySection;
+
+function StoryContainer(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? 'none' : _ref$state,
+      _ref$platform = _ref.platform,
+      platform = _ref$platform === void 0 ? 'all' : _ref$platform;
+  if (platform === 'web') return null;
+  return /*#__PURE__*/jsx(StorySection.BlockSection, {
+    testID: state,
+    title: title,
+    children: children
+  });
+}
+
+function StoryDecorator(storyFn, context) {
+  return /*#__PURE__*/jsx(Story, {
+    title: context.name,
+    children: storyFn()
+  });
+}
+
+var SmallScreenRow = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__SmallScreenRow"
+})(["flex-direction:column;margin:0;"]);
+var SmallScreenCol = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__SmallScreenCol"
+})(["padding:8px 0 16px;"]);
+var FlexRow = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__FlexRow"
+})(["flex-direction:row;margin:0 -4px 16px;"]);
+var FlexCol = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__FlexCol"
+})(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
+
+function StoryGridRow(_ref) {
+  var children = _ref.children,
+      _ref$breakpoint = _ref.breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? 'small' : _ref$breakpoint;
+
+  // eslint-disable-next-line unicorn/expiring-todo-comments
+  // TODO use useBreakpoint instead
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width;
+
+  var breakpointValue = breakpoint === 'small' ? 480 : 768;
+
+  if (width < breakpointValue) {
+    return /*#__PURE__*/jsx(SmallScreenRow, {
+      children: Children.map(children, function (child) {
+        return /*#__PURE__*/jsx(SmallScreenCol, {
+          children: child
+        });
+      })
+    });
   }
-};
 
-var iconButton = {
-  backgroundColor: 'transparent',
-  width: 40,
-  height: 40,
-  borderRadius: 20,
-  borderWidth: 2,
-  borderColor: 'transparent',
-  transition: {
-    property: 'all',
-    duration: '200ms',
-    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1);'
-  },
-  scale: {
-    base: {
-      "default": 1,
-      hover: 0.95,
-      active: 0.95
-    },
-    medium: {
-      hover: 1.05
-    }
-  },
-  disabled: {
-    scale: 1,
-    backgroundColor: button.disabled.backgroundColor,
-    borderColor: button.disabled.borderColor
-  },
-  "default": {
-    pressedBackgroundColor: button["default"].pressedBackgroundColor
-  },
-  white: {
-    pressedBackgroundColor: button.white.hoverBackgroundColor
+  return /*#__PURE__*/jsx(FlexRow, {
+    children: Children.map(children, function (child) {
+      return /*#__PURE__*/jsx(FlexCol, {
+        children: child
+      });
+    })
+  });
+}
+
+function StoryGridCol(_ref2) {
+  var title = _ref2.title,
+      titleColor = _ref2.titleColor,
+      children = _ref2.children,
+      _ref2$platform = _ref2.platform,
+      platform = _ref2$platform === void 0 ? 'all' : _ref2$platform;
+  var isNative = Platform.OS === 'ios' || Platform.OS === 'android';
+
+  if (Platform.OS === 'web' && platform === 'native') {
+    return null;
   }
-};
 
-var listItem = {
-  padding: '12px 16px',
-  borderColor: colors.separator,
-  borderWidth: 1,
-  innerMargin: 8
-};
+  if (isNative && platform === 'web') {
+    return null;
+  }
 
-var shadows = {
-  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
-};
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [title ? /*#__PURE__*/jsx(StoryTitle.Level4, {
+      numberOfLines: 1,
+      color: titleColor,
+      children: title
+    }) : null, children]
+  });
+}
 
-var skeleton = {
-  backgroundColor: lateOceanColorPalette.black100,
-  flareColor: lateOceanColorPalette.black200,
-  animationDuration: 1000
+var StoryGrid = {
+  Row: StoryGridRow,
+  Col: StoryGridCol
 };
 
-var tag = {
-  borderRadius: 10,
-  padding: '2px 12px',
-  primary: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.primary
-    }
-  },
-  "default": {
-    fill: {
-      backgroundColor: lateOceanColorPalette.black50,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.black
-    }
-  },
-  danger: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.warmEmbrace,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.danger
-    }
-  }
-};
+var Container$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Tag__Container"
+})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
+  var theme = _ref.theme,
+      type = _ref.type,
+      variant = _ref.variant;
+  return theme.kitt.tag[type][variant].backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant;
+  return theme.kitt.tag[type][variant].borderWidth;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      type = _ref3.type,
+      variant = _ref3.variant;
+  return theme.kitt.tag[type][variant].borderColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.tag.padding;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.tag.borderRadius;
+});
+var getLabelColor = function (type, variant) {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
 
-var tooltip = {
-  backgroundColor: colors.black,
-  borderRadius: 10,
-  opacity: 0.95,
-  horizontalPadding: 16,
-  verticalPadding: 4,
-  floatingPadding: 8
-};
+    case 'primary':
+      {
+        return 'primary';
+      }
 
-var breakpoints = {
-  values: {
-    base: 0,
-    small: 480,
-    medium: 768,
-    large: 1024,
-    wide: 1280
-  },
-  min: {
-    smallBreakpoint: 'min-width: 480px',
-    mediumBreakpoint: 'min-width: 768px',
-    largeBreakpoint: 'min-width: 1024px',
-    wideBreakpoint: 'min-width: 1280px'
-  },
-  max: {
-    smallBreakpoint: 'max-width: 479px',
-    mediumBreakpoint: 'max-width: 767px',
-    largeBreakpoint: 'max-width: 1023px',
-    wideBreakpoint: 'max-width: 1279px'
-  }
-}; // eslint-disable-next-line unicorn/expiring-todo-comments
-// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
+    case 'default':
+      {
+        return 'black';
+      }
 
-var theme = {
-  spacing: 4,
-  colors: colors,
-  palettes: {
-    lateOcean: lateOceanColorPalette
-  },
-  avatar: avatar,
-  button: button,
-  card: card,
-  feedbackMessage: feedbackMessage,
-  forms: forms,
-  typography: typography,
-  tag: tag,
-  shadows: shadows,
-  fullScreenModal: fullScreenModal,
-  iconButton: iconButton,
-  listItem: listItem,
-  tooltip: tooltip,
-  skeleton: skeleton,
-  breakpoints: breakpoints
+    default:
+      {
+        return 'black';
+      }
+  }
 };
+function Tag(_ref6) {
+  var label = _ref6.label,
+      _ref6$type = _ref6.type,
+      type = _ref6$type === void 0 ? 'default' : _ref6$type,
+      _ref6$variant = _ref6.variant,
+      variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
+  return /*#__PURE__*/jsx(Container$1, {
+    type: type,
+    variant: variant,
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      base: "body-xsmall",
+      color: getLabelColor(type, variant),
+      children: label
+    })
+  });
+}
 
 function Title(_ref) {
   var children = _ref.children;
@@ -3606,79 +3774,6 @@ function TypographyLink(_ref4) {
   }));
 }
 
-function matchWindowSize(_ref, _ref2) {
-  var width = _ref.width,
-      height = _ref.height;
-  var minWidth = _ref2.minWidth,
-      maxWidth = _ref2.maxWidth,
-      minHeight = _ref2.minHeight,
-      maxHeight = _ref2.maxHeight;
-  var hasWidthMatched = width ? (!minWidth || width >= minWidth) && (!maxWidth || width <= maxWidth) : true;
-  var hasHeightMatched = height ? (!minHeight || height >= minHeight) && (!maxHeight || height <= maxHeight) : true;
-  return hasWidthMatched && hasHeightMatched;
-}
-function useMatchWindowSize(options) {
-  var _useWindowDimensions = useWindowDimensions(),
-      width = _useWindowDimensions.width,
-      height = _useWindowDimensions.height;
-
-  return matchWindowSize({
-    width: width,
-    height: height
-  }, options);
-}
-
-function createWindowSizeHelper(dimensions) {
-  return {
-    matchWindowSize: function matchWindowSize$1(options) {
-      return matchWindowSize(dimensions, options);
-    },
-    ifWindowSizeMatches: function ifWindowSizeMatches(options, valueIfTrue, valueIfFalse) {
-      return matchWindowSize(dimensions, options) ? valueIfTrue : valueIfFalse;
-    },
-    mapWindowWidth: function mapWindowWidth() {
-      for (var _len = arguments.length, widthList = new Array(_len), _key = 0; _key < _len; _key++) {
-        widthList[_key] = arguments[_key];
-      }
-
-      if ((process.env.NODE_ENV !== "production")) {
-        widthList.slice(1).forEach(function (_ref, index) {
-          var _ref2 = _slicedToArray(_ref, 1),
-              minWidth = _ref2[0];
-
-          var previousMinWidth = widthList[index][0];
-
-          if (previousMinWidth > minWidth) {
-            throw new Error("mapWindowWidth: sort your values to be mobile first. ".concat(minWidth, " is < ").concat(previousMinWidth, ", so ").concat(minWidth, " should be before ").concat(previousMinWidth, "."));
-          }
-        });
-      }
-
-      var found = widthList.find(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-            minWidth = _ref4[0];
-            _ref4[1];
-
-        return matchWindowSize(dimensions, {
-          minWidth: Number(minWidth)
-        });
-      });
-      if (!found) return null;
-      return found[1];
-    }
-  };
-}
-
-function useKittTheme() {
-  var dimensions = useWindowDimensions();
-  return useMemo(function () {
-    return {
-      kitt: theme,
-      responsive: createWindowSizeHelper(dimensions)
-    };
-  }, [dimensions]);
-}
-
 var hex2rgba = function (hex) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   var r = parseInt(hex.slice(1, 3), 16);
@@ -3741,5 +3836,5 @@ function withTheme(WrappedComponent) {
   });
 }
 
-export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, 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, 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 };
 //# sourceMappingURL=index-browser-all.es.ios.js.map