@ornikar/kitt-universal 9.26.0 → 9.28.0

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

@@ -30,6 +30,10 @@ const View = nativeBase.View;
 const ScrollView = nativeBase.ScrollView;
 const Pressable = nativeBase.Pressable;
 const Image = nativeBase.Image;
+// See: https://fettblog.eu/typescript-react-generic-forward-refs/
+const FlatList = nativeBase.FlatList;
+// See: https://fettblog.eu/typescript-react-generic-forward-refs/
+const SectionList = nativeBase.SectionList;
 
 function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valueIfFalse) {
   // Handles simple boolean values
@@ -924,27 +928,112 @@ function Actions({
 Actions.Button = ActionsButton;
 Actions.Item = ActionsItem;
 
-const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
+const 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'
+};
 
-const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Avatar__StyledAvatarView",
-  componentId: "kitt-universal__sc-9miubv-0"
-})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
-  theme,
-  $isRound,
-  $size,
-  $sizeVariant
-}) => {
-  if ($isRound) return `${$size / 2}px`;
-  return `${$sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius}px`;
-}, ({
-  theme,
-  $isLight
-}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
-  $size
-}) => $size, ({
-  $size
-}) => $size);
+const 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)'
+  }
+};
+
+const defaultAvatarSize = 40;
+const defaultAvatarIconSize = 20;
+const largeAvatarSize = 120;
+const largeAvatarIconSize = 30;
+const avatar = {
+  borderRadius: 10,
+  size: defaultAvatarSize,
+  iconSize: defaultAvatarIconSize,
+  default: {
+    backgroundColor: colors.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30,
+    size: largeAvatarSize,
+    iconSize: largeAvatarIconSize
+  }
+};
+
+function getCurrentRadius({
+  size,
+  sizeVariant,
+  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({
+  size,
+  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 `${firstname[0]}${lastname[0]}`.toUpperCase();
+}
 
 function AvatarContent({
   size,
@@ -956,14 +1045,13 @@ function AvatarContent({
   sizeVariant
 }) {
   if (src) {
-    return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Image, {
+    return /*#__PURE__*/jsxRuntime.jsx(Image, {
       source: {
         uri: src
       },
-      style: {
-        width: size,
-        height: size
-      },
+      width: size,
+      height: size,
+      alt: alt,
       accessibilityLabel: alt
     });
   }
@@ -980,24 +1068,36 @@ function AvatarContent({
   return /*#__PURE__*/jsxRuntime.jsx(Icon, {
     icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
     color: isLight ? 'black' : 'white',
-    size: size / 2
+    size: getIconSize(size, sizeVariant)
   });
 }
 
 function Avatar({
-  size = 40,
+  size,
   round,
   light,
   sizeVariant,
   ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
-    $size: size,
-    $isRound: round,
-    $isLight: light,
-    $sizeVariant: sizeVariant,
+  const currentSize = getCurrentSize({
+    size,
+    sizeVariant
+  });
+  const currentBorderRadius = getCurrentRadius({
+    size,
+    sizeVariant,
+    round
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    width: currentSize,
+    height: currentSize,
+    borderRadius: currentBorderRadius,
+    backgroundColor: `kitt.avatar.${light ? 'light' : 'default'}.backgroundColor`,
     children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
-      size: size,
+      size: currentSize,
       isLight: light,
       sizeVariant: sizeVariant,
       ...props
@@ -1055,9 +1155,10 @@ function ModalBehaviourPortal({
   visible,
   children
 }) {
-  useBlockBodyScroll(Boolean(visible));
+  useBlockBodyScroll(Boolean(visible)); // eslint-disable-next-line react/jsx-no-useless-fragment -- Portal propTypes define a required children, preventing a null children value
+
   return /*#__PURE__*/jsxRuntime.jsx(reactPortal.Portal, {
-    children: children
+    children: children || /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {})
   });
 }
 
@@ -1898,71 +1999,6 @@ function ExternalLink({
   });
 }
 
-const 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'
-};
-
-const 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)'
-  }
-};
-
-const avatar = {
-  borderRadius: 10,
-  default: {
-    backgroundColor: colors.primary
-  },
-  light: {
-    backgroundColor: lateOceanColorPalette.black100
-  },
-  large: {
-    borderRadius: 30
-  }
-};
-
 const spacing = 4;
 
 const bottomSheet = {
@@ -2620,7 +2656,21 @@ const shadows = {
 const 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
+    }
+  }
 };
 
 const tag = {
@@ -3819,6 +3869,32 @@ function IconButton({
   });
 }
 
+const KittMapConfigProviderContext = /*#__PURE__*/react.createContext(undefined);
+function KittMapConfigProvider({
+  children,
+  mapId,
+  apiToken
+}) {
+  const providerValue = react.useMemo(() => ({
+    mapId,
+    apiToken
+  }), [mapId, apiToken]);
+  return /*#__PURE__*/jsxRuntime.jsx(KittMapConfigProviderContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+}
+
+function useKittMapConfig() {
+  const context = react.useContext(KittMapConfigProviderContext);
+
+  if (!context) {
+    throw new Error('<KittMapConfigProvider> missing in the react tree');
+  }
+
+  return context;
+}
+
 const ContentView$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
@@ -3941,6 +4017,222 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
+const SvgMarkerLargeinline = props => /*#__PURE__*/jsxRuntime.jsxs("svg", {
+  fill: "none",
+  viewBox: "0 0 54 56",
+  width: 54,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: [/*#__PURE__*/jsxRuntime.jsxs("linearGradient", {
+    id: "marker-large_inline_svg__b",
+    gradientUnits: "userSpaceOnUse",
+    x1: 26.828,
+    x2: 7.181,
+    y1: 5.072,
+    y2: 39.102,
+    children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+      offset: 0,
+      stopOpacity: 0.01
+    }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+      offset: 1
+    })]
+  }), /*#__PURE__*/jsxRuntime.jsxs("filter", {
+    id: "marker-large_inline_svg__a",
+    colorInterpolationFilters: "sRGB",
+    filterUnits: "userSpaceOnUse",
+    height: 48.706,
+    width: 42.761,
+    x: 10.437,
+    y: 5.167,
+    children: [/*#__PURE__*/jsxRuntime.jsx("feFlood", {
+      floodOpacity: 0,
+      result: "BackgroundImageFix"
+    }), /*#__PURE__*/jsxRuntime.jsx("feBlend", {
+      in: "SourceGraphic",
+      in2: "BackgroundImageFix",
+      result: "shape"
+    }), /*#__PURE__*/jsxRuntime.jsx("feGaussianBlur", {
+      result: "effect1_foregroundBlur_257_3018",
+      stdDeviation: 2.718
+    })]
+  }), /*#__PURE__*/jsxRuntime.jsx("mask", {
+    id: "marker-large_inline_svg__c",
+    height: 43,
+    maskUnits: "userSpaceOnUse",
+    width: 31,
+    x: 3,
+    y: 3,
+    children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("g", {
+    filter: "url(#marker-large_inline_svg__a)",
+    opacity: 0.25,
+    children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("g", {
+    mask: "url(#marker-large_inline_svg__c)",
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M3 3h31v43H3z",
+      fill: "#4c34e0"
+    })
+  }), /*#__PURE__*/jsxRuntime.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
+  })]
+});
+
+const SvgMarkerinline = props => /*#__PURE__*/jsxRuntime.jsxs("svg", {
+  viewBox: "0 0 40 39",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("mask", {
+    id: "marker_inline_svg__c",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: 3,
+    y: 3,
+    width: 20,
+    height: 28,
+    children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("g", {
+    mask: "url(#marker_inline_svg__c)",
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      fill: "#4C34E0",
+      d: "M3 3h20v27H3z"
+    })
+  }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("defs", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("linearGradient", {
+      id: "marker_inline_svg__a",
+      x1: 18.616,
+      y1: 0.226,
+      x2: 3.501,
+      y2: 26.405,
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+        stopOpacity: 0.01
+      }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+        offset: 1
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("filter", {
+      id: "marker_inline_svg__b",
+      x: 6.046,
+      y: 0.339,
+      width: 32.817,
+      height: 37.4,
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB",
+      children: [/*#__PURE__*/jsxRuntime.jsx("feFlood", {
+        floodOpacity: 0,
+        result: "BackgroundImageFix"
+      }), /*#__PURE__*/jsxRuntime.jsx("feBlend", {
+        in: "SourceGraphic",
+        in2: "BackgroundImageFix",
+        result: "shape"
+      }), /*#__PURE__*/jsxRuntime.jsx("feGaussianBlur", {
+        stdDeviation: 2.071,
+        result: "effect1_foregroundBlur_257_3020"
+      })]
+    })]
+  })]
+});
+
+const SvgPositionMarkerinline = props => /*#__PURE__*/jsxRuntime.jsxs("svg", {
+  viewBox: "0 0 47 47",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("circle", {
+    cx: 23.5,
+    cy: 18.5,
+    r: 2.5,
+    fill: "#fff"
+  }), /*#__PURE__*/jsxRuntime.jsx("defs", {
+    children: /*#__PURE__*/jsxRuntime.jsxs("filter", {
+      id: "position-marker_inline_svg__a",
+      x: 0.127,
+      y: 0.127,
+      width: 46.746,
+      height: 46.746,
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB",
+      children: [/*#__PURE__*/jsxRuntime.jsx("feFlood", {
+        floodOpacity: 0,
+        result: "BackgroundImageFix"
+      }), /*#__PURE__*/jsxRuntime.jsx("feBlend", {
+        in: "SourceGraphic",
+        in2: "BackgroundImageFix",
+        result: "shape"
+      }), /*#__PURE__*/jsxRuntime.jsx("feGaussianBlur", {
+        stdDeviation: 5.437,
+        result: "effect1_foregroundBlur_257_3019"
+      })]
+    })
+  })]
+});
+
+function MapMarkerSimple({
+  width = 40,
+  height = 39
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(SvgMarkerinline, {
+    width: width,
+    height: height
+  });
+}
+function MapMarkerLarge({
+  width = 54,
+  height = 56
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(SvgMarkerLargeinline, {
+    width: width,
+    height: height
+  });
+}
+function MapMarkerPosition({
+  width = 47,
+  height = 47
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(SvgPositionMarkerinline, {
+    width: width,
+    height: height
+  });
+}
+
 function IconContent({
   type,
   color
@@ -4250,6 +4542,14 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
   const extendedTheme = nativeBase.extendTheme({
     colors: {
       kitt: { ...theme.colors,
+        avatar: {
+          default: {
+            backgroundColor: theme.colors.primary
+          },
+          light: {
+            backgroundColor: theme.palettes.lateOcean.black100
+          }
+        },
         button: {
           default: theme.button.default,
           primary: theme.button.primary,
@@ -4269,13 +4569,31 @@ 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?.colors
     },
     radii: {
+      // 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,
+      // Allow values like kitt.X
+      ...spaces,
       kitt: {
+        avatar: {
+          borderRadius: theme.avatar.borderRadius,
+          large: {
+            borderRadius: theme.avatar.large.borderRadius
+          }
+        },
         borderRadius: theme.card.borderRadius,
         button: {
           borderRadius: theme.button.borderRadius
@@ -4298,6 +4616,19 @@ 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?.radii
@@ -4328,6 +4659,14 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
     sizes: { ...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,
@@ -4359,6 +4698,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?.sizes
@@ -5111,16 +5463,14 @@ function SkeletonContent({
   });
 }
 
-const SkeletonContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Skeleton__SkeletonContainer",
-  componentId: "kitt-universal__sc-1w5cm3i-0"
-})(["overflow:hidden;"]);
 function Skeleton({
-  isLoading,
-  style
+  isLoading = false,
+  style,
+  ...props
 }) {
   const [width, setWidth] = react.useState(0);
-  return /*#__PURE__*/jsxRuntime.jsx(SkeletonContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx(View, { ...props,
+    overflow: "hidden",
     style: style,
     onLayout: ({
       nativeEvent
@@ -5131,38 +5481,288 @@ function Skeleton({
     })
   });
 }
-const Bar = /*#__PURE__*/styled__default(Skeleton).withConfig({
-  displayName: "Skeleton__Bar",
-  componentId: "kitt-universal__sc-1w5cm3i-1"
-})(["width:100%;height:", "px;border-radius:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 2, ({
-  theme
-}) => theme.kitt.spacing * 2);
-const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
-  displayName: "Skeleton__Circle",
-  componentId: "kitt-universal__sc-1w5cm3i-2"
-})(["width:", "px;height:", "px;border-radius:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 12, ({
-  theme
-}) => theme.kitt.spacing * 12, ({
-  theme
-}) => theme.kitt.spacing * 6);
-const Square = /*#__PURE__*/styled__default(Skeleton).withConfig({
-  displayName: "Skeleton__Square",
-  componentId: "kitt-universal__sc-1w5cm3i-3"
-})(["width:", "px;height:", "px;border-radius:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 12, ({
-  theme
-}) => theme.kitt.spacing * 12, ({
-  theme
-}) => theme.kitt.spacing * 1.5);
+
+function Bar({
+  size,
+  ...props
+}) {
+  const currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.bar.borderRadius';
+  return /*#__PURE__*/jsxRuntime.jsx(Skeleton, { ...props,
+    width: "100%",
+    height: size || 'kitt.skeleton.shape.bar.size',
+    borderRadius: currentBorderRadius
+  });
+}
+
+function Circle({
+  size,
+  ...props
+}) {
+  const currentSize = size || 'kitt.skeleton.shape.circle.size';
+  const currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.circle.borderRadius';
+  return /*#__PURE__*/jsxRuntime.jsx(Skeleton, { ...props,
+    width: currentSize,
+    height: currentSize,
+    borderRadius: currentBorderRadius
+  });
+}
+
+function Square({
+  size,
+  ...props
+}) {
+  const currentSize = size || 'kitt.skeleton.shape.square.size';
+  const currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.square.borderRadius';
+  return /*#__PURE__*/jsxRuntime.jsx(Skeleton, { ...props,
+    width: currentSize,
+    height: currentSize,
+    borderRadius: currentBorderRadius
+  });
+}
+
 Skeleton.Bar = Bar;
 Skeleton.Circle = Circle;
 Skeleton.Square = Square;
 
+function getStaticMapImageUrl({
+  mapId,
+  apiToken,
+  mapWidth,
+  mapHeight,
+  center,
+  is2x
+}) {
+  const width = Math.round(mapWidth);
+  const height = Math.round(mapHeight);
+  const centerPart = `${center.long},${center.lat},${center.zoom}/`;
+  const urlParts = [`https://api.mapbox.com/styles/v1/ornikar/${mapId}/static/`, centerPart, `${width}x${height}`, is2x ? '@2x' : ''];
+  const mapImageUrl = new URL(urlParts.join(''));
+  mapImageUrl.searchParams.append('access_token', apiToken);
+  return mapImageUrl.toString();
+}
+
+function useGetStaticMapImageUrl({
+  forceMapId,
+  forceApiToken,
+  mapWidth,
+  mapHeight,
+  center,
+  is2x
+}) {
+  const {
+    mapId,
+    apiToken
+  } = useKittMapConfig();
+  const [currentUrl, setCurrentUrl] = react.useState('');
+  const currentMapIdRef = react.useRef(forceMapId || mapId);
+  const currentApiTokenRef = react.useRef(forceApiToken || apiToken);
+  react.useEffect(() => {
+    const newUrl = getStaticMapImageUrl({
+      center,
+      is2x,
+      mapHeight,
+      mapWidth,
+      mapId: currentMapIdRef.current,
+      apiToken: currentApiTokenRef.current
+    });
+    setCurrentUrl(newUrl);
+  }, [mapHeight, mapWidth, center, is2x]);
+  return currentUrl;
+}
+
+function StaticMapError({
+  onReload
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    backgroundColor: "kitt.separator",
+    children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.RotateCCWIcon, {}),
+      onPress: onReload
+    })
+  });
+}
+
+function StaticMapImage({
+  url,
+  alt,
+  width,
+  height,
+  onLoadEnd,
+  onError
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Image, {
+    source: {
+      uri: url
+    },
+    width: width,
+    height: height,
+    alt: alt,
+    onError: onError,
+    onLoadEnd: onLoadEnd
+  });
+}
+
+function StaticMapLoader() {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    children: /*#__PURE__*/jsxRuntime.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({
+  variant = 'simple'
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      style: {
+        transform: getMarkerPosition(variant)
+      },
+      children: [variant === 'position' ? /*#__PURE__*/jsxRuntime.jsx(MapMarkerPosition, {}) : null, variant === 'large' ? /*#__PURE__*/jsxRuntime.jsx(MapMarkerLarge, {}) : null, variant === 'simple' ? /*#__PURE__*/jsxRuntime.jsx(MapMarkerSimple, {}) : null]
+    })
+  });
+}
+
+function getRangedWidthValue(nextWidth, maxValue) {
+  const rangedMapWidth = Math.max(1, Math.min(nextWidth, maxValue));
+  return rangedMapWidth;
+}
+
+function getShouldDisplay2x() {
+  if (typeof window === 'undefined') {
+    return true;
+  } // requesting retina picture is up to the device capabilities;
+
+
+  return window.devicePixelRatio ? window.devicePixelRatio > 1 : false;
+}
+
+const mapBoxMaxPictureWidth = 1280; // Mapbox requestable width for image is between 1 - 1280px
+
+function getPictureWidth(nextWidth) {
+  return getRangedWidthValue(nextWidth, mapBoxMaxPictureWidth);
+}
+
+function StaticMap({
+  width = 0,
+  height,
+  alt,
+  apiToken,
+  mapId,
+  marker,
+  center,
+  onLoaded,
+  onError,
+  ...props
+}) {
+  const [currentWidth, setCurrentWidth] = react.useState(getPictureWidth(width));
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [hasError, setHasError] = react.useState(false);
+  const [currentMapKey, setCurrentMapKey] = react.useState(0);
+  const shouldDisplay2xImage = getShouldDisplay2x();
+  const mapUrl = useGetStaticMapImageUrl({
+    forceApiToken: apiToken,
+    forceMapId: mapId,
+    mapWidth: currentWidth,
+    mapHeight: height,
+    center,
+    is2x: shouldDisplay2xImage
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    position: "relative",
+    maxWidth: mapBoxMaxPictureWidth,
+    height: height,
+    onLayout: event => {
+      const {
+        nativeEvent
+      } = event;
+      const rangedMapWidth = getPictureWidth(nativeEvent.layout.width);
+      setCurrentWidth(rangedMapWidth);
+    },
+    ...props,
+    "data-chromatic": process.env.KITT_MAP_CHROMATIC_IGNORE === 'true' ? 'ignore' : undefined,
+    children: [currentWidth > 1 && mapUrl ? /*#__PURE__*/jsxRuntime.jsx(StaticMapImage, {
+      url: mapUrl,
+      width: currentWidth,
+      height: height,
+      alt: alt,
+      onLoadEnd: () => {
+        setIsLoading(false);
+        if (onLoaded) onLoaded();
+      },
+      onError: () => {
+        setHasError(true);
+        if (onError) onError();
+      }
+    }, `map-key-${currentMapKey}`) : null, marker && !isLoading && !hasError ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      children: marker
+    }) : null, isLoading ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      children: /*#__PURE__*/jsxRuntime.jsx(StaticMapLoader, {})
+    }) : null, hasError ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      children: /*#__PURE__*/jsxRuntime.jsx(StaticMapError, {
+        onReload: () => {
+          setHasError(false);
+          setIsLoading(true);
+          setCurrentMapKey(prev => prev + 1);
+        }
+      })
+    }) : null]
+  });
+}
+StaticMap.Image = StaticMapImage;
+StaticMap.Loader = StaticMapLoader;
+StaticMap.Error = StaticMapError;
+StaticMap.Marker = StaticMapMarker;
+
 const Flex = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
 }).withConfig({
@@ -6028,6 +6628,7 @@ exports.DialogModal = DialogModal;
 exports.Emoji = Emoji;
 exports.ExternalAppLink = ExternalAppLink;
 exports.ExternalLink = ExternalLink;
+exports.FlatList = FlatList;
 exports.Flex = Flex;
 exports.HStack = HStack;
 exports.Highlight = Highlight;
@@ -6045,12 +6646,16 @@ exports.InputTag = InputTag;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;
 exports.KittBreakpointsMax = KittBreakpointsMax;
+exports.KittMapConfigProvider = KittMapConfigProvider;
 exports.KittNativeBaseProvider = KittNativeBaseProvider;
 exports.KittThemeDecorator = KittThemeDecorator;
 exports.KittThemeProvider = KittThemeProvider;
 exports.Label = Label;
 exports.ListItem = ListItem;
 exports.LoaderIcon = LoaderIcon;
+exports.MapMarkerLarge = MapMarkerLarge;
+exports.MapMarkerPosition = MapMarkerPosition;
+exports.MapMarkerSimple = MapMarkerSimple;
 exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
@@ -6065,9 +6670,11 @@ exports.Radio = Radio;
 exports.RadioButtonGroup = RadioButtonGroup;
 exports.ScrollView = ScrollView;
 exports.Section = DeprecatedSection;
+exports.SectionList = SectionList;
 exports.Skeleton = Skeleton;
 exports.SpinningIcon = SpinningIcon;
 exports.Stack = Stack;
+exports.StaticMap = StaticMap;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;
@@ -6089,11 +6696,14 @@ exports.View = View;
 exports.createChoicesComponent = createChoicesComponent;
 exports.createResponsiveStyleFromProp = createResponsiveStyleFromProp;
 exports.createWindowSizeHelper = createWindowSizeHelper;
+exports.getStaticMapImageUrl = getStaticMapImageUrl;
 exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
 exports.theme = theme;
 exports.useBottomSheet = useBottomSheet;
 exports.useCurrentBreakpointName = useCurrentBreakpointName;
+exports.useGetStaticMapImageUrl = useGetStaticMapImageUrl;
+exports.useKittMapConfig = useKittMapConfig;
 exports.useKittTheme = useKittTheme;
 exports.useMatchWindowSize = useMatchWindowSize;
 exports.useStaticBottomSheet = useStaticBottomSheet;