@ornikar/kitt-universal 9.26.0 → 9.28.0

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

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, Text as Text$1, Input, NativeBaseProvider, extendTheme, useBreakpointValue } from 'native-base';
+import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Text as Text$1, Input, NativeBaseProvider, extendTheme, useBreakpointValue } from 'native-base';
 export { useBreakpointValue, useClipboard, useToken } from 'native-base';
 import _extends from '@babel/runtime/helpers/extends';
 import React, { useContext, createContext, cloneElement, forwardRef, useRef, useEffect, useState, useMemo, Children, Fragment as Fragment$1, useCallback } from 'react';
@@ -8,11 +8,11 @@ import Animated, { withSpring, useSharedValue, useAnimatedStyle, interpolateColo
 import styled, { useTheme, css, withTheme as withTheme$1, ThemeProvider } from 'styled-components/native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Platform, Animated as Animated$1, Easing, useWindowDimensions, Image as Image$2, View as View$2, Pressable as Pressable$2, StyleSheet, Modal as Modal$1, ScrollView as ScrollView$2, Linking, Text as Text$2 } from 'react-native';
+import { Platform, Animated as Animated$1, Easing, useWindowDimensions, View as View$2, Pressable as Pressable$2, StyleSheet, Modal as Modal$1, ScrollView as ScrollView$2, Linking, Text as Text$2, PixelRatio } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { ArcIcon, UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { ArcIcon, UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, RotateCCWIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -20,9 +20,9 @@ import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
-import Svg, { Circle as Circle$1 } from 'react-native-svg';
+import Svg, { LinearGradient, Stop, Mask, Path, G, Defs, Circle as Circle$1 } from 'react-native-svg';
 import { Picker as Picker$1 } from '@react-native-picker/picker';
-import { LinearGradient } from 'expo-linear-gradient';
+import { LinearGradient as LinearGradient$1 } from 'expo-linear-gradient';
 import { useFloating, offset, autoPlacement } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
 
@@ -35,6 +35,10 @@ var View = View$1;
 var ScrollView = ScrollView$1;
 var Pressable = Pressable$1;
 var Image = Image$1;
+// See: https://fettblog.eu/typescript-react-generic-forward-refs/
+var FlatList = FlatList$1;
+// See: https://fettblog.eu/typescript-react-generic-forward-refs/
+var SectionList = SectionList$1;
 
 function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valueIfFalse) {
   // Handles simple boolean values
@@ -141,7 +145,7 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$w = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$y = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -213,7 +217,7 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$w);
+      otherProps = _objectWithoutProperties(_ref, _excluded$y);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -346,12 +350,12 @@ function Icon(_ref5) {
   });
 }
 
-var _excluded$v = ["color"],
-    _excluded2$4 = ["color"];
+var _excluded$x = ["color"],
+    _excluded2$5 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$v);
+      props = _objectWithoutProperties(_ref, _excluded$x);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -368,7 +372,7 @@ function TypographyIconInheritColor(props) {
 
 function TypographyIcon(_ref2) {
   var color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2$4);
+      props = _objectWithoutProperties(_ref2, _excluded2$5);
 
   if (color) {
     return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
@@ -403,7 +407,7 @@ var getTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$u = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+var _excluded$w = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
@@ -481,7 +485,7 @@ function ButtonContent(_ref3) {
       isHovered = _ref3.isHovered,
       isPressed = _ref3.isPressed;
       _ref3.isFocused;
-      var props = _objectWithoutProperties(_ref3, _excluded$u);
+      var props = _objectWithoutProperties(_ref3, _excluded$w);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
@@ -832,7 +836,7 @@ function useMatchWindowSize(options) {
   }, options);
 }
 
-var _excluded$t = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$v = ["as", "onPress", "disabled", "icon", "stretch"];
 
 function getCurrentStretchValue(isStretch, isMedium) {
   // Stretch will follow the value passed from the component occurence if defined
@@ -846,7 +850,7 @@ function ActionsItem(_ref) {
       disabled = _ref.disabled,
       icon = _ref.icon,
       stretch = _ref.stretch,
-      props = _objectWithoutProperties(_ref, _excluded$t);
+      props = _objectWithoutProperties(_ref, _excluded$v);
 
   var isMedium = useMatchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
@@ -936,7 +940,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$s = ["children", "layout"];
+var _excluded$u = ["children", "layout"];
 
 function getCurrentLayout(layout) {
   if (!layout) return {
@@ -959,7 +963,7 @@ function getCurrentDirection(layout) {
 function Actions(_ref) {
   var children = _ref.children,
       layout = _ref.layout,
-      props = _objectWithoutProperties(_ref, _excluded$s);
+      props = _objectWithoutProperties(_ref, _excluded$u);
 
   var currentAlignItems = getCurrentLayout(layout);
   var currentDirection = getCurrentDirection(layout);
@@ -975,51 +979,131 @@ function Actions(_ref) {
 Actions.Button = ActionsButton;
 Actions.Item = ActionsItem;
 
-var _excluded$r = ["size", "round", "light", "sizeVariant"];
+var lateOceanColorPalette = {
+  lateOcean: '#4C34E0',
+  lateOceanLight1: '#705DE6',
+  lateOceanLight2: '#9485EC',
+  lateOceanLight3: '#D6BAF9',
+  warmEmbrace: '#F4D3CE',
+  warmEmbraceLight1: '#FFEDE6',
+  black1000: '#000000',
+  black800: '#333333',
+  black555: '#737373',
+  black400: '#999999',
+  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 getInitials = function (firstname, lastname) {
-  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
+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,
+  white: lateOceanColorPalette.white,
+  black: lateOceanColorPalette.black1000,
+  blackDisabled: lateOceanColorPalette.black400,
+  blackLight: lateOceanColorPalette.black555,
+  blackAnthracite: lateOceanColorPalette.black800,
+  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)'
+  }
 };
 
-var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Avatar__StyledAvatarView"
-})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
-  var theme = _ref.theme,
-      $isRound = _ref.$isRound,
-      $size = _ref.$size,
-      $sizeVariant = _ref.$sizeVariant;
-  if ($isRound) return "".concat($size / 2, "px");
-  return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      $isLight = _ref2.$isLight;
-  return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
-}, function (_ref3) {
-  var $size = _ref3.$size;
-  return $size;
-}, function (_ref4) {
-  var $size = _ref4.$size;
-  return $size;
-});
+var defaultAvatarSize = 40;
+var defaultAvatarIconSize = 20;
+var largeAvatarSize = 120;
+var largeAvatarIconSize = 30;
+var avatar = {
+  borderRadius: 10,
+  size: defaultAvatarSize,
+  iconSize: defaultAvatarIconSize,
+  "default": {
+    backgroundColor: colors.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30,
+    size: largeAvatarSize,
+    iconSize: largeAvatarIconSize
+  }
+};
 
-function AvatarContent(_ref5) {
-  var size = _ref5.size,
-      src = _ref5.src,
-      firstname = _ref5.firstname,
-      lastname = _ref5.lastname,
-      alt = _ref5.alt,
-      isLight = _ref5.isLight,
-      sizeVariant = _ref5.sizeVariant;
+function getCurrentRadius(_ref) {
+  var size = _ref.size,
+      sizeVariant = _ref.sizeVariant,
+      round = _ref.round;
+
+  if (round) {
+    if (size) return size * 0.5;
+    if (sizeVariant === 'large') return largeAvatarSize * 0.5;
+    return defaultAvatarSize * 0.5;
+  }
+
+  if (sizeVariant === 'large') return 'kitt.avatar.large.borderRadius';
+  return 'kitt.avatar.borderRadius';
+}
+
+function getCurrentSize(_ref) {
+  var size = _ref.size,
+      sizeVariant = _ref.sizeVariant;
+  if (size) return size;
+  if (sizeVariant === 'large') return 'kitt.avatar.large.size';
+  return 'kitt.avatar.size';
+}
+
+function getIconSize(size, sizeVariant) {
+  if (typeof size === 'number') return size * 0.5;
+  if (sizeVariant === 'large') return largeAvatarIconSize;
+  return defaultAvatarIconSize;
+}
+
+function getInitials(firstname, lastname) {
+  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
+}
+
+var _excluded$t = ["size", "round", "light", "sizeVariant"];
+
+function AvatarContent(_ref) {
+  var size = _ref.size,
+      src = _ref.src,
+      firstname = _ref.firstname,
+      lastname = _ref.lastname,
+      alt = _ref.alt,
+      isLight = _ref.isLight,
+      sizeVariant = _ref.sizeVariant;
 
   if (src) {
-    return /*#__PURE__*/jsx(Image$2, {
+    return /*#__PURE__*/jsx(Image, {
       source: {
         uri: src
       },
-      style: {
-        width: size,
-        height: size
-      },
+      width: size,
+      height: size,
+      alt: alt,
       accessibilityLabel: alt
     });
   }
@@ -1036,25 +1120,36 @@ function AvatarContent(_ref5) {
   return /*#__PURE__*/jsx(Icon, {
     icon: /*#__PURE__*/jsx(UserIcon, {}),
     color: isLight ? 'black' : 'white',
-    size: size / 2
+    size: getIconSize(size, sizeVariant)
   });
 }
 
-function Avatar(_ref6) {
-  var _ref6$size = _ref6.size,
-      size = _ref6$size === void 0 ? 40 : _ref6$size,
-      round = _ref6.round,
-      light = _ref6.light,
-      sizeVariant = _ref6.sizeVariant,
-      props = _objectWithoutProperties(_ref6, _excluded$r);
+function Avatar(_ref2) {
+  var size = _ref2.size,
+      round = _ref2.round,
+      light = _ref2.light,
+      sizeVariant = _ref2.sizeVariant,
+      props = _objectWithoutProperties(_ref2, _excluded$t);
 
-  return /*#__PURE__*/jsx(StyledAvatarView, {
-    $size: size,
-    $isRound: round,
-    $isLight: light,
-    $sizeVariant: sizeVariant,
+  var currentSize = getCurrentSize({
+    size: size,
+    sizeVariant: sizeVariant
+  });
+  var currentBorderRadius = getCurrentRadius({
+    size: size,
+    sizeVariant: sizeVariant,
+    round: round
+  });
+  return /*#__PURE__*/jsx(View, {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    width: currentSize,
+    height: currentSize,
+    borderRadius: currentBorderRadius,
+    backgroundColor: "kitt.avatar.".concat(light ? 'light' : 'default', ".backgroundColor"),
     children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
-      size: size,
+      size: currentSize,
       isLight: light,
       sizeVariant: sizeVariant
     }, props))
@@ -1468,12 +1563,12 @@ function CardModalAnimation(_ref) {
   });
 }
 
-var _excluded$q = ["children"],
-    _excluded2$3 = ["children", "visible", "onClose", "onExited"];
+var _excluded$s = ["children"],
+    _excluded2$4 = ["children", "visible", "onClose", "onExited"];
 
 function ScrollContainer(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   if (Platform.OS !== 'web') {
     return /*#__PURE__*/jsx(View, {
@@ -1491,7 +1586,7 @@ function CardModalBehaviour(_ref2) {
       visible = _ref2.visible,
       onClose = _ref2.onClose,
       onExited = _ref2.onExited,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
+      props = _objectWithoutProperties(_ref2, _excluded2$4);
 
   var _useState = useState(visible),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1524,7 +1619,7 @@ function CardModalBehaviour(_ref2) {
   });
 }
 
-var _excluded$p = ["children", "paddingX", "paddingY"];
+var _excluded$r = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
       _ref$paddingX = _ref.paddingX,
@@ -1534,7 +1629,7 @@ function CardModalBody(_ref) {
   } : _ref$paddingX,
       _ref$paddingY = _ref.paddingY,
       paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: paddingX,
@@ -1544,7 +1639,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$o = ["children", "padding", "hasSeparator"];
+var _excluded$q = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
       _ref$padding = _ref.padding,
@@ -1554,7 +1649,7 @@ function CardModalFooter(_ref) {
   } : _ref$padding,
       _ref$hasSeparator = _ref.hasSeparator,
       hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
@@ -1569,7 +1664,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$n = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$p = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
       title = _ref.title,
@@ -1582,7 +1677,7 @@ function CardModalHeader(_ref) {
       hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
       right = _ref.right,
       left = _ref.left,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
   var defaultContainerPadding = {
     base: 'kitt.4',
@@ -1621,7 +1716,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$m = ["children", "backgroundColor", "maxWidth", "withoutShadow"];
+var _excluded$o = ["children", "backgroundColor", "maxWidth", "withoutShadow"];
 function CardModal(_ref) {
   var children = _ref.children,
       _ref$backgroundColor = _ref.backgroundColor,
@@ -1629,7 +1724,7 @@ function CardModal(_ref) {
       _ref$maxWidth = _ref.maxWidth,
       maxWidth = _ref$maxWidth === void 0 ? 'kitt.cardModal.maxWidth' : _ref$maxWidth,
       withoutShadow = _ref.withoutShadow,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
@@ -1903,11 +1998,11 @@ var ChoiceItemContainer = /*#__PURE__*/styled(View$2).withConfig({
   return css(["margin-bottom:", "px;"], $isLast ? 0 : column);
 });
 
-var _excluded$l = ["direction"];
+var _excluded$n = ["direction"];
 
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
@@ -2219,13 +2314,13 @@ function DialogModalAnimation(_ref) {
   });
 }
 
-var _excluded$k = ["children", "visible", "onClose", "onExited"];
+var _excluded$m = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
       visible = _ref.visible,
       onClose = _ref.onClose,
       onExited = _ref.onExited,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var _useState = useState(visible),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2258,7 +2353,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$j = ["stretch"];
+var _excluded$l = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
       title = _ref.title,
@@ -2300,7 +2395,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
       stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-      props = _objectWithoutProperties(_ref2, _excluded$j);
+      props = _objectWithoutProperties(_ref2, _excluded$l);
 
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
@@ -2339,17 +2434,17 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$i = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
-    _excluded2$2 = ["phoneNumber", "children"],
-    _excluded3$1 = ["phoneNumber", "children"],
-    _excluded4 = ["emailAddress", "children"];
+var _excluded$k = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+    _excluded2$3 = ["phoneNumber", "children"],
+    _excluded3$2 = ["phoneNumber", "children"],
+    _excluded4$1 = ["emailAddress", "children"];
 function ExternalAppLink(_ref) {
   var Component = _ref.as,
       appScheme = _ref.appScheme,
       appValue = _ref.appValue,
       onPress = _ref.onPress,
       onOpenAppError = _ref.onOpenAppError,
-      rest = _objectWithoutProperties(_ref, _excluded$i);
+      rest = _objectWithoutProperties(_ref, _excluded$k);
 
   var href = "".concat(appScheme, ":").concat(appValue);
 
@@ -2429,7 +2524,7 @@ function ExternalAppLink(_ref) {
 ExternalAppLink.Sms = function (_ref3) {
   var phoneNumber = _ref3.phoneNumber,
       children = _ref3.children,
-      rest = _objectWithoutProperties(_ref3, _excluded2$2);
+      rest = _objectWithoutProperties(_ref3, _excluded2$3);
 
   return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
     appScheme: "sms",
@@ -2441,7 +2536,7 @@ ExternalAppLink.Sms = function (_ref3) {
 ExternalAppLink.Tel = function (_ref4) {
   var phoneNumber = _ref4.phoneNumber,
       children = _ref4.children,
-      rest = _objectWithoutProperties(_ref4, _excluded3$1);
+      rest = _objectWithoutProperties(_ref4, _excluded3$2);
 
   return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
     appScheme: "tel",
@@ -2453,7 +2548,7 @@ ExternalAppLink.Tel = function (_ref4) {
 ExternalAppLink.Mail = function (_ref5) {
   var emailAddress = _ref5.emailAddress,
       children = _ref5.children,
-      rest = _objectWithoutProperties(_ref5, _excluded4);
+      rest = _objectWithoutProperties(_ref5, _excluded4$1);
 
   return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
     appScheme: "mailto",
@@ -2467,14 +2562,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$h = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$j = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
       _ref$openLinkBehavior = _ref.openLinkBehavior,
       openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
       onPress = _ref.onPress,
-      rest = _objectWithoutProperties(_ref, _excluded$h);
+      rest = _objectWithoutProperties(_ref, _excluded$j);
 
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     onPress: function handleOnPress(e) {
@@ -2509,71 +2604,6 @@ function ExternalLink(_ref) {
   }));
 }
 
-var lateOceanColorPalette = {
-  lateOcean: '#4C34E0',
-  lateOceanLight1: '#705DE6',
-  lateOceanLight2: '#9485EC',
-  lateOceanLight3: '#D6BAF9',
-  warmEmbrace: '#F4D3CE',
-  warmEmbraceLight1: '#FFEDE6',
-  black1000: '#000000',
-  black800: '#333333',
-  black555: '#737373',
-  black400: '#999999',
-  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 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,
-  white: lateOceanColorPalette.white,
-  black: lateOceanColorPalette.black1000,
-  blackDisabled: lateOceanColorPalette.black400,
-  blackLight: lateOceanColorPalette.black555,
-  blackAnthracite: lateOceanColorPalette.black800,
-  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)'
-  }
-};
-
-var avatar = {
-  borderRadius: 10,
-  "default": {
-    backgroundColor: colors.primary
-  },
-  light: {
-    backgroundColor: lateOceanColorPalette.black100
-  },
-  large: {
-    borderRadius: 30
-  }
-};
-
 var spacing = 4;
 
 var bottomSheet = {
@@ -3235,7 +3265,21 @@ var shadows = {
 var skeleton = {
   backgroundColor: lateOceanColorPalette.black100,
   flareColor: lateOceanColorPalette.black200,
-  animationDuration: 1000
+  animationDuration: 1000,
+  shape: {
+    bar: {
+      size: 8,
+      borderRadius: 4
+    },
+    circle: {
+      size: 48,
+      borderRadius: 24
+    },
+    square: {
+      size: 48,
+      borderRadius: 6
+    }
+  }
 };
 
 var tag = {
@@ -3652,7 +3696,7 @@ function DatePickerInputs(_ref4) {
   });
 }
 
-var _excluded$g = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
+var _excluded$i = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
 function DatePickerAndroid(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
@@ -3664,7 +3708,7 @@ function DatePickerAndroid(_ref) {
       setCurrentValue = _ref.setCurrentValue,
       _onChange = _ref.onChange,
       isFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   var handleClose = function () {
     if (onBlur) onBlur();
@@ -3737,11 +3781,11 @@ function ModalFooter(_ref3) {
   });
 }
 
-var _excluded$f = ["as", "children"];
+var _excluded$h = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   if (Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
@@ -3754,7 +3798,7 @@ function PressableIconButtonWebWrapperWithTheme() {
   throw new Error('This component is not supposed to be called in native');
 }
 
-var _excluded$e = ["color", "disabled"];
+var _excluded$g = ["color", "disabled"];
 var PressableIconButtonWebWrapper = /*#__PURE__*/withTheme$1(PressableIconButtonWebWrapperWithTheme);
 var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton"
@@ -3787,7 +3831,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 function PressableIconButton(_ref5) {
   var color = _ref5.color,
       disabled = _ref5.disabled,
-      props = _objectWithoutProperties(_ref5, _excluded$e);
+      props = _objectWithoutProperties(_ref5, _excluded$g);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -4102,7 +4146,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$d = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$f = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 
 function ModalTitle(_ref) {
   var children = _ref.children;
@@ -4122,7 +4166,7 @@ function ModalPlatformDateTimePicker(_ref2) {
       validateButtonLabel = _ref2.validateButtonLabel,
       onClose = _ref2.onClose,
       onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded$d);
+      props = _objectWithoutProperties(_ref2, _excluded$f);
 
   var _useState = useState(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4166,7 +4210,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$c = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
+var _excluded$e = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
 function DatePicker(_ref) {
   var value = _ref.value,
       pickerUITestID = _ref.pickerUITestID,
@@ -4177,7 +4221,7 @@ function DatePicker(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       pickerDefaultDate = _ref.pickerDefaultDate,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   var _useState = useState(isDefaultVisible),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4244,7 +4288,7 @@ var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "InputTextContainer"
 })(["position:relative;"]);
 
-var _excluded$b = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var _excluded$d = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
       right = _ref.right;
@@ -4264,7 +4308,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
       keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
       multiline = _ref.multiline,
       onSubmitEditing = _ref.onSubmitEditing,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var theme = /*#__PURE__*/useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
@@ -4398,11 +4442,11 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
 }
 
-var _excluded$a = ["isPasswordDefaultVisible", "right"];
+var _excluded$c = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4846,7 +4890,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$9 = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$b = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, _ref);
@@ -4862,7 +4906,7 @@ function RadioButtonGroup(_ref2) {
       onFocus = _ref2.onFocus,
       onBlur = _ref2.onBlur,
       onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded$9);
+      props = _objectWithoutProperties(_ref2, _excluded$b);
 
   var _useState = useState(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4924,21 +4968,48 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$8 = ["children"];
+var KittMapConfigProviderContext = /*#__PURE__*/createContext(undefined);
+function KittMapConfigProvider(_ref) {
+  var children = _ref.children,
+      mapId = _ref.mapId,
+      apiToken = _ref.apiToken;
+  var providerValue = useMemo(function () {
+    return {
+      mapId: mapId,
+      apiToken: apiToken
+    };
+  }, [mapId, apiToken]);
+  return /*#__PURE__*/jsx(KittMapConfigProviderContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+}
+
+function useKittMapConfig() {
+  var context = useContext(KittMapConfigProviderContext);
+
+  if (!context) {
+    throw new Error('<KittMapConfigProvider> missing in the react tree');
+  }
+
+  return context;
+}
+
+var _excluded$a = ["children"];
 var ContentView = /*#__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$8);
+      rest = _objectWithoutProperties(_ref, _excluded$a);
 
   return /*#__PURE__*/jsx(ContentView, _objectSpread(_objectSpread({}, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$7 = ["children", "side"],
-    _excluded2$1 = ["children", "align"];
+var _excluded$9 = ["children", "side"],
+    _excluded2$2 = ["children", "align"];
 var SideContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemSideContent__SideContainerView"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -4955,7 +5026,7 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$7);
+      rest = _objectWithoutProperties(_ref3, _excluded$9);
 
   return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
     side: side
@@ -4973,7 +5044,7 @@ function ListItemSideContent(_ref5) {
   var children = _ref5.children,
       _ref5$align = _ref5.align,
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
-      rest = _objectWithoutProperties(_ref5, _excluded2$1);
+      rest = _objectWithoutProperties(_ref5, _excluded2$2);
 
   return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
     align: align
@@ -4982,7 +5053,7 @@ function ListItemSideContent(_ref5) {
   }));
 }
 
-var _excluded$6 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$8 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 var ContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItem__ContainerView"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -5021,7 +5092,7 @@ function ListItem(_ref5) {
       left = _ref5.left,
       right = _ref5.right,
       onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$6);
+      rest = _objectWithoutProperties(_ref5, _excluded$8);
 
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
@@ -5050,6 +5121,172 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
+var SvgMarkerLargeinline = function SvgMarkerLargeinline(props) {
+  return /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
+    fill: "none",
+    viewBox: "0 0 54 56",
+    width: 54,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxs(LinearGradient, {
+      id: "marker-large_inline_svg__b",
+      gradientUnits: "userSpaceOnUse",
+      x1: 26.828,
+      x2: 7.181,
+      y1: 5.072,
+      y2: 39.102,
+      children: [/*#__PURE__*/jsx(Stop, {
+        offset: 0,
+        stopOpacity: 0.01
+      }), /*#__PURE__*/jsx(Stop, {
+        offset: 1
+      })]
+    }), /*#__PURE__*/jsx(Mask, {
+      id: "marker-large_inline_svg__c",
+      height: 43,
+      maskUnits: "userSpaceOnUse",
+      width: 31,
+      x: 3,
+      y: 3,
+      children: /*#__PURE__*/jsx(Path, {
+        d: "M16.303 44.99a3.002 3.002 0 004.394 0C29.631 35.38 34 26.678 34 18.938 34 10.12 27.04 3 18.5 3S3 10.12 3 18.938c0 7.74 4.369 16.442 13.303 26.052z",
+        fill: "#fff"
+      })
+    }), /*#__PURE__*/jsx(G, {
+      filter: "url(#marker-large_inline_svg__a)",
+      opacity: 0.25,
+      children: /*#__PURE__*/jsx(Path, {
+        d: "M24.022 48.149c-3.018 1.02-6.128-.775-6.753-3.899-1.372-6.862-2.799-18.548 1.348-25.73C22.966 10.985 32.545 8.374 40 12.678c7.454 4.303 9.982 13.903 5.63 21.44-4.146 7.182-14.98 11.79-21.608 14.032z",
+        fill: "url(#marker-large_inline_svg__b)"
+      })
+    }), /*#__PURE__*/jsx(G, {
+      mask: "url(#marker-large_inline_svg__c)",
+      children: /*#__PURE__*/jsx(Path, {
+        d: "M3 3h31v43H3z",
+        fill: "#4c34e0"
+      })
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M15.677 46.315c-2.682-3.029-6.253-7.443-9.145-12.356C3.622 29.015 1.5 23.735 1.5 18.938 1.5 9.27 9.152 1.5 18.5 1.5c9.349 0 17 7.771 17 17.438 0 4.797-2.122 10.077-5.032 15.02-2.892 4.914-6.463 9.328-9.145 12.357-1.536 1.735-4.11 1.735-5.646 0z",
+      stroke: "#fff",
+      strokeWidth: 3
+    })]
+  }));
+};
+
+var SvgMarkerinline = function SvgMarkerinline(props) {
+  return /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
+    viewBox: "0 0 40 39",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsx(Path, {
+      d: "M16.417 33.38c-2.3.776-4.668-.592-5.146-2.971-1.059-5.274-2.171-14.297 1.027-19.837 3.348-5.798 10.717-7.806 16.452-4.495 5.735 3.31 7.68 10.697 4.333 16.495-3.198 5.54-11.57 9.088-16.666 10.808z",
+      fill: "url(#marker_inline_svg__a)",
+      opacity: 0.25,
+      filter: "url(#marker_inline_svg__b)"
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M10.89 29.536a2.81 2.81 0 004.22 0C20.428 23.492 23 18.054 23 13.256 23 7.58 18.507 3 13 3S3 7.58 3 13.256c0 4.798 2.572 10.236 7.89 16.28z",
+      fill: "#4C34E0"
+    }), /*#__PURE__*/jsx(Mask, {
+      id: "marker_inline_svg__c",
+      style: {
+        maskType: "alpha"
+      },
+      maskUnits: "userSpaceOnUse",
+      x: 3,
+      y: 3,
+      width: 20,
+      height: 28,
+      children: /*#__PURE__*/jsx(Path, {
+        d: "M10.89 29.536a2.81 2.81 0 004.22 0C20.428 23.492 23 18.054 23 13.256 23 7.58 18.507 3 13 3S3 7.58 3 13.256c0 4.798 2.572 10.236 7.89 16.28z",
+        fill: "#fff"
+      })
+    }), /*#__PURE__*/jsx(G, {
+      mask: "url(#marker_inline_svg__c)",
+      children: /*#__PURE__*/jsx(Path, {
+        fill: "#4C34E0",
+        d: "M3 3h20v27H3z"
+      })
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M10.374 31c-1.884-2.216-4.125-5.144-5.888-8.307C2.71 19.505 1.5 16.22 1.5 13.256 1.5 6.734 6.681 1.5 13 1.5s11.5 5.234 11.5 11.756c0 2.964-1.21 6.249-2.986 9.437-1.763 3.163-4.004 6.091-5.888 8.307-1.414 1.662-3.838 1.662-5.252 0z",
+      stroke: "#fff",
+      strokeWidth: 3
+    }), /*#__PURE__*/jsx(Defs, {
+      children: /*#__PURE__*/jsxs(LinearGradient, {
+        id: "marker_inline_svg__a",
+        x1: 18.616,
+        y1: 0.226,
+        x2: 3.501,
+        y2: 26.405,
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/jsx(Stop, {
+          stopOpacity: 0.01
+        }), /*#__PURE__*/jsx(Stop, {
+          offset: 1
+        })]
+      })
+    })]
+  }));
+};
+
+var SvgPositionMarkerinline = function SvgPositionMarkerinline(props) {
+  return /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
+    viewBox: "0 0 47 47",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsx(Path, {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23.5 36C30.404 36 36 30.404 36 23.5S30.404 11 23.5 11 11 16.596 11 23.5 16.596 36 23.5 36z",
+      fill: "#38836D",
+      opacity: 0.8,
+      filter: "url(#position-marker_inline_svg__a)"
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M31 18.5a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z",
+      fill: "#fff",
+      stroke: "#38836D",
+      strokeWidth: 10
+    }), /*#__PURE__*/jsx(Circle$1, {
+      cx: 23.5,
+      cy: 18.5,
+      r: 2.5,
+      fill: "#fff"
+    }), /*#__PURE__*/jsx(Defs, {})]
+  }));
+};
+
+function MapMarkerSimple(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 40 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 39 : _ref$height;
+  return /*#__PURE__*/jsx(SvgMarkerinline, {
+    width: width,
+    height: height
+  });
+}
+function MapMarkerLarge(_ref2) {
+  var _ref2$width = _ref2.width,
+      width = _ref2$width === void 0 ? 54 : _ref2$width,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? 56 : _ref2$height;
+  return /*#__PURE__*/jsx(SvgMarkerLargeinline, {
+    width: width,
+    height: height
+  });
+}
+function MapMarkerPosition(_ref3) {
+  var _ref3$width = _ref3.width,
+      width = _ref3$width === void 0 ? 47 : _ref3$width,
+      _ref3$height = _ref3.height,
+      height = _ref3$height === void 0 ? 47 : _ref3$height;
+  return /*#__PURE__*/jsx(SvgPositionMarkerinline, {
+    width: width,
+    height: height
+  });
+}
+
 function IconContent(_ref) {
   var type = _ref.type,
       color = _ref.color;
@@ -5222,6 +5459,14 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
   var extendedTheme = extendTheme({
     colors: {
       kitt: _objectSpread(_objectSpread({}, theme.colors), {}, {
+        avatar: {
+          "default": {
+            backgroundColor: theme.colors.primary
+          },
+          light: {
+            backgroundColor: theme.palettes.lateOcean.black100
+          }
+        },
         button: {
           "default": theme.button["default"],
           primary: theme.button.primary,
@@ -5241,13 +5486,30 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               borderColor: theme.forms.radioButtonGroup.item.borderColor,
               backgroundColor: theme.forms.radioButtonGroup.item.backgroundColor
             }
+          },
+          skeleton: {
+            backgroundColor: theme.skeleton.backgroundColor,
+            flareColor: theme.skeleton.flareColor
           }
         }
       }),
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.colors
     },
-    radii: {
+    radii: _objectSpread(_objectSpread({
+      // Make original native base values unsusable
+      lg: Number.MAX_SAFE_INTEGER,
+      md: Number.MAX_SAFE_INTEGER,
+      sm: Number.MAX_SAFE_INTEGER,
+      xl: Number.MAX_SAFE_INTEGER,
+      xs: Number.MAX_SAFE_INTEGER
+    }, spaces), {}, {
       kitt: {
+        avatar: {
+          borderRadius: theme.avatar.borderRadius,
+          large: {
+            borderRadius: theme.avatar.large.borderRadius
+          }
+        },
         borderRadius: theme.card.borderRadius,
         button: {
           borderRadius: theme.button.borderRadius
@@ -5270,10 +5532,23 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
+        },
+        skeleton: {
+          shape: {
+            bar: {
+              borderRadius: theme.skeleton.shape.bar.borderRadius
+            },
+            circle: {
+              borderRadius: theme.skeleton.shape.circle.borderRadius
+            },
+            square: {
+              borderRadius: theme.skeleton.shape.square.borderRadius
+            }
+          }
         }
       },
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.radii
-    },
+    }),
     borderWidths: {
       kitt: {
         button: {
@@ -5299,6 +5574,14 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
     },
     sizes: _objectSpread(_objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale), {}, {
       kitt: {
+        avatar: {
+          size: theme.avatar.size,
+          iconSize: theme.avatar.iconSize,
+          large: {
+            size: theme.avatar.large.size,
+            iconSize: theme.avatar.large.iconSize
+          }
+        },
         button: {
           minWidth: theme.button.minWidth,
           maxWidth: theme.button.maxWidth,
@@ -5330,6 +5613,19 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             width: theme.tooltip.arrow.width,
             height: theme.tooltip.arrow.height
           }
+        },
+        skeleton: {
+          shape: {
+            bar: {
+              size: theme.skeleton.shape.bar.size
+            },
+            circle: {
+              size: theme.skeleton.shape.circle.size
+            },
+            square: {
+              size: theme.skeleton.shape.square.size
+            }
+          }
         }
       },
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.sizes
@@ -5602,7 +5898,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$5 = ["children"];
+var _excluded$7 = ["children"];
 var ViewWithPadding = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "ContentPadding__ViewWithPadding"
 })(["padding:", ";"], function (_ref) {
@@ -5611,14 +5907,14 @@ var ViewWithPadding = /*#__PURE__*/styled(View$2).withConfig({
 });
 function ContentPadding(_ref2) {
   var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded$5);
+      props = _objectWithoutProperties(_ref2, _excluded$7);
 
   return /*#__PURE__*/jsx(ViewWithPadding, _objectSpread(_objectSpread({}, props), {}, {
     children: children
   }));
 }
 
-var _excluded$4 = ["children", "shouldHandleBottomNotch", "style"];
+var _excluded$6 = ["children", "shouldHandleBottomNotch", "style"];
 var StyledViewWithPadding = /*#__PURE__*/styled(ContentPadding).withConfig({
   displayName: "Body__StyledViewWithPadding"
 })(["padding-top:", "px;padding-bottom:", "px;"], function (_ref) {
@@ -5633,7 +5929,7 @@ function Body(_ref3) {
   var children = _ref3.children,
       shouldHandleBottomNotch = _ref3.shouldHandleBottomNotch,
       style = _ref3.style,
-      props = _objectWithoutProperties(_ref3, _excluded$4);
+      props = _objectWithoutProperties(_ref3, _excluded$6);
 
   var _useSafeAreaInsets = useSafeAreaInsets(),
       bottom = _useSafeAreaInsets.bottom;
@@ -5994,13 +6290,13 @@ function NavigationModalAnimation(_ref) {
   });
 }
 
-var _excluded$3 = ["children", "visible", "onClose", "onExited"];
+var _excluded$5 = ["children", "visible", "onClose", "onExited"];
 function NavigationModalBehaviour(_ref) {
   var children = _ref.children,
       visible = _ref.visible,
       onClose = _ref.onClose,
       onExited = _ref.onExited,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$5);
 
   var _useState = useState(visible),
       _useState2 = _slicedToArray(_useState, 2),
@@ -6368,7 +6664,7 @@ var Container$2 = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref2.theme;
   return theme.kitt.skeleton.flareColor;
 });
-var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient$1);
 function SkeletonContent(_ref3) {
   var isLoading = _ref3.isLoading,
       width = _ref3.width;
@@ -6419,19 +6715,23 @@ function SkeletonContent(_ref3) {
   });
 }
 
-var SkeletonContainer = /*#__PURE__*/styled(View$2).withConfig({
-  displayName: "Skeleton__SkeletonContainer"
-})(["overflow:hidden;"]);
+var _excluded$4 = ["isLoading", "style"],
+    _excluded2$1 = ["size"],
+    _excluded3$1 = ["size"],
+    _excluded4 = ["size"];
 function Skeleton(_ref) {
-  var isLoading = _ref.isLoading,
-      style = _ref.style;
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      style = _ref.style,
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       width = _useState2[0],
       setWidth = _useState2[1];
 
-  return /*#__PURE__*/jsx(SkeletonContainer, {
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+    overflow: "hidden",
     style: style,
     onLayout: function onLayout(_ref2) {
       var nativeEvent = _ref2.nativeEvent;
@@ -6441,45 +6741,306 @@ function Skeleton(_ref) {
       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;
-});
+
+function Bar(_ref3) {
+  var size = _ref3.size,
+      props = _objectWithoutProperties(_ref3, _excluded2$1);
+
+  var currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.bar.borderRadius';
+  return /*#__PURE__*/jsx(Skeleton, _objectSpread(_objectSpread({}, props), {}, {
+    width: "100%",
+    height: size || 'kitt.skeleton.shape.bar.size',
+    borderRadius: currentBorderRadius
+  }));
+}
+
+function Circle(_ref4) {
+  var size = _ref4.size,
+      props = _objectWithoutProperties(_ref4, _excluded3$1);
+
+  var currentSize = size || 'kitt.skeleton.shape.circle.size';
+  var currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.circle.borderRadius';
+  return /*#__PURE__*/jsx(Skeleton, _objectSpread(_objectSpread({}, props), {}, {
+    width: currentSize,
+    height: currentSize,
+    borderRadius: currentBorderRadius
+  }));
+}
+
+function Square(_ref5) {
+  var size = _ref5.size,
+      props = _objectWithoutProperties(_ref5, _excluded4);
+
+  var currentSize = size || 'kitt.skeleton.shape.square.size';
+  var currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.square.borderRadius';
+  return /*#__PURE__*/jsx(Skeleton, _objectSpread(_objectSpread({}, props), {}, {
+    width: currentSize,
+    height: currentSize,
+    borderRadius: currentBorderRadius
+  }));
+}
+
 Skeleton.Bar = Bar;
 Skeleton.Circle = Circle;
 Skeleton.Square = Square;
 
+function getStaticMapImageUrl(_ref) {
+  var mapId = _ref.mapId,
+      apiToken = _ref.apiToken,
+      mapWidth = _ref.mapWidth,
+      mapHeight = _ref.mapHeight,
+      center = _ref.center,
+      is2x = _ref.is2x;
+  var width = Math.round(mapWidth);
+  var height = Math.round(mapHeight);
+  var centerPart = "".concat(center["long"], ",").concat(center.lat, ",").concat(center.zoom, "/");
+  var sizePart = "".concat(width, "x").concat(height);
+  var urlParts = ["https://api.mapbox.com/styles/v1/ornikar/".concat(mapId, "/static/"), centerPart, sizePart, is2x ? '@2x' : ''];
+  var mapImageUrl = new URL(urlParts.join(''));
+  mapImageUrl.searchParams.append('access_token', apiToken);
+  return mapImageUrl.toString();
+}
+
+function useGetStaticMapImageUrl(_ref) {
+  var forceMapId = _ref.forceMapId,
+      forceApiToken = _ref.forceApiToken,
+      mapWidth = _ref.mapWidth,
+      mapHeight = _ref.mapHeight,
+      center = _ref.center,
+      is2x = _ref.is2x;
+
+  var _useKittMapConfig = useKittMapConfig(),
+      mapId = _useKittMapConfig.mapId,
+      apiToken = _useKittMapConfig.apiToken;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentUrl = _useState2[0],
+      setCurrentUrl = _useState2[1];
+
+  var currentMapIdRef = useRef(forceMapId || mapId);
+  var currentApiTokenRef = useRef(forceApiToken || apiToken);
+  useEffect(function () {
+    var newUrl = getStaticMapImageUrl({
+      center: center,
+      is2x: is2x,
+      mapHeight: mapHeight,
+      mapWidth: mapWidth,
+      mapId: currentMapIdRef.current,
+      apiToken: currentApiTokenRef.current
+    });
+    setCurrentUrl(newUrl);
+  }, [mapHeight, mapWidth, center, is2x]);
+  return currentUrl;
+}
+
+function StaticMapError(_ref) {
+  var onReload = _ref.onReload;
+  return /*#__PURE__*/jsx(View, {
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    backgroundColor: "kitt.separator",
+    children: /*#__PURE__*/jsx(IconButton, {
+      icon: /*#__PURE__*/jsx(RotateCCWIcon, {}),
+      onPress: onReload
+    })
+  });
+}
+
+function StaticMapImage(_ref) {
+  var url = _ref.url,
+      alt = _ref.alt,
+      width = _ref.width,
+      height = _ref.height,
+      onLoadEnd = _ref.onLoadEnd,
+      onError = _ref.onError;
+  return /*#__PURE__*/jsx(Image, {
+    source: {
+      uri: url
+    },
+    width: width,
+    height: height,
+    alt: alt,
+    onError: onError,
+    onLoadEnd: onLoadEnd
+  });
+}
+
+function StaticMapLoader() {
+  return /*#__PURE__*/jsx(View, {
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    children: /*#__PURE__*/jsx(Skeleton, {
+      isLoading: true,
+      width: "100%",
+      height: "100%"
+    })
+  });
+}
+
+function getMarkerPosition(variant) {
+  if (variant === 'position') return [{
+    translateX: -2
+  }, {
+    translateY: 8
+  }];
+  if (variant === 'large') return [{
+    translateX: 8
+  }, {
+    translateY: -20
+  }];
+  return [{
+    translateX: 6
+  }, {
+    translateY: -15
+  }];
+}
+
+function StaticMapMarker(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'simple' : _ref$variant;
+  return /*#__PURE__*/jsx(View, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    children: /*#__PURE__*/jsxs(View, {
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      style: {
+        transform: getMarkerPosition(variant)
+      },
+      children: [variant === 'position' ? /*#__PURE__*/jsx(MapMarkerPosition, {}) : null, variant === 'large' ? /*#__PURE__*/jsx(MapMarkerLarge, {}) : null, variant === 'simple' ? /*#__PURE__*/jsx(MapMarkerSimple, {}) : null]
+    })
+  });
+}
+
+function getRangedWidthValue(nextWidth, maxValue) {
+  var rangedMapWidth = Math.max(1, Math.min(nextWidth, maxValue));
+  return rangedMapWidth;
+}
+
+function getShouldDisplay2x() {
+  var currentDevicePixelRatio = PixelRatio.get();
+  return currentDevicePixelRatio > 1;
+}
+
+var _excluded$3 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
+var mapBoxMaxPictureWidth = 1280; // Mapbox requestable width for image is between 1 - 1280px
+
+function getPictureWidth(nextWidth) {
+  return getRangedWidthValue(nextWidth, mapBoxMaxPictureWidth);
+}
+
+function StaticMap(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 0 : _ref$width,
+      height = _ref.height,
+      alt = _ref.alt,
+      apiToken = _ref.apiToken,
+      mapId = _ref.mapId,
+      marker = _ref.marker,
+      center = _ref.center,
+      onLoaded = _ref.onLoaded,
+      onError = _ref.onError,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  var _useState = useState(getPictureWidth(width)),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentWidth = _useState2[0],
+      setCurrentWidth = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isLoading = _useState4[0],
+      setIsLoading = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasError = _useState6[0],
+      setHasError = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentMapKey = _useState8[0],
+      setCurrentMapKey = _useState8[1];
+
+  var shouldDisplay2xImage = getShouldDisplay2x();
+  var mapUrl = useGetStaticMapImageUrl({
+    forceApiToken: apiToken,
+    forceMapId: mapId,
+    mapWidth: currentWidth,
+    mapHeight: height,
+    center: center,
+    is2x: shouldDisplay2xImage
+  });
+  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
+    position: "relative",
+    maxWidth: mapBoxMaxPictureWidth,
+    height: height,
+    onLayout: function handleParentLayout(event) {
+      var nativeEvent = event.nativeEvent;
+      var rangedMapWidth = getPictureWidth(nativeEvent.layout.width);
+      setCurrentWidth(rangedMapWidth);
+    }
+  }, props), {}, {
+    "data-chromatic": process.env.KITT_MAP_CHROMATIC_IGNORE === 'true' ? 'ignore' : undefined,
+    children: [currentWidth > 1 && mapUrl ? /*#__PURE__*/jsx(StaticMapImage, {
+      url: mapUrl,
+      width: currentWidth,
+      height: height,
+      alt: alt,
+      onLoadEnd: function handleImageLoadEnd() {
+        setIsLoading(false);
+        if (onLoaded) onLoaded();
+      },
+      onError: function handleError() {
+        setHasError(true);
+        if (onError) onError();
+      }
+    }, "map-key-".concat(currentMapKey)) : null, marker && !isLoading && !hasError ? /*#__PURE__*/jsx(View, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      children: marker
+    }) : null, isLoading ? /*#__PURE__*/jsx(View, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      children: /*#__PURE__*/jsx(StaticMapLoader, {})
+    }) : null, hasError ? /*#__PURE__*/jsx(View, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      children: /*#__PURE__*/jsx(StaticMapError, {
+        onReload: function handleReload() {
+          setHasError(false);
+          setIsLoading(true);
+          setCurrentMapKey(function (prev) {
+            return prev + 1;
+          });
+        }
+      })
+    }) : null]
+  }));
+}
+StaticMap.Image = StaticMapImage;
+StaticMap.Loader = StaticMapLoader;
+StaticMap.Error = StaticMapError;
+StaticMap.Marker = StaticMapMarker;
+
 var Flex = /*#__PURE__*/styled.View.withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
@@ -7522,5 +8083,5 @@ function withTheme(WrappedComponent) {
   });
 }
 
-export { Actions, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, Flex, HStack, Highlight, Icon, IconButton, Image, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createResponsiveStyleFromProp, createWindowSizeHelper, hex2rgba, matchWindowSize, theme, useBottomSheet, useCurrentBreakpointName, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, withTheme };
+export { Actions, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, HStack, Highlight, Icon, IconButton, Image, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createResponsiveStyleFromProp, createWindowSizeHelper, getStaticMapImageUrl, hex2rgba, matchWindowSize, theme, useBottomSheet, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.android.js.map