@ornikar/kitt-universal 9.26.0 → 9.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/babel-plugin-csf-to-jest.js +121 -0
  2. package/dist/definitions/Avatar/Avatar.d.ts +1 -7
  3. package/dist/definitions/Avatar/Avatar.d.ts.map +1 -1
  4. package/dist/definitions/Avatar/utils/getCurrentRadius.d.ts +9 -0
  5. package/dist/definitions/Avatar/utils/getCurrentRadius.d.ts.map +1 -0
  6. package/dist/definitions/Avatar/utils/getCurrentSize.d.ts +8 -0
  7. package/dist/definitions/Avatar/utils/getCurrentSize.d.ts.map +1 -0
  8. package/dist/definitions/Avatar/utils/getIconSize.d.ts +3 -0
  9. package/dist/definitions/Avatar/utils/getIconSize.d.ts.map +1 -0
  10. package/dist/definitions/Avatar/utils/getInitials.d.ts +2 -0
  11. package/dist/definitions/Avatar/utils/getInitials.d.ts.map +1 -0
  12. package/dist/definitions/KittMapConfigProvider/KittMapConfigProvider.d.ts +13 -0
  13. package/dist/definitions/KittMapConfigProvider/KittMapConfigProvider.d.ts.map +1 -0
  14. package/dist/definitions/KittMapConfigProvider/hooks/useKittMapConfig.d.ts +3 -0
  15. package/dist/definitions/KittMapConfigProvider/hooks/useKittMapConfig.d.ts.map +1 -0
  16. package/dist/definitions/MapMarker/MapMarker.d.ts +15 -0
  17. package/dist/definitions/MapMarker/MapMarker.d.ts.map +1 -0
  18. package/dist/definitions/ModalBehaviour/ModalBehaviourPortal.web.d.ts.map +1 -1
  19. package/dist/definitions/Skeleton/Skeleton.d.ts +15 -6
  20. package/dist/definitions/Skeleton/Skeleton.d.ts.map +1 -1
  21. package/dist/definitions/StaticMap/StaticMap.d.ts +34 -0
  22. package/dist/definitions/StaticMap/StaticMap.d.ts.map +1 -0
  23. package/dist/definitions/StaticMap/StaticMapError.d.ts +7 -0
  24. package/dist/definitions/StaticMap/StaticMapError.d.ts.map +1 -0
  25. package/dist/definitions/StaticMap/StaticMapImage.d.ts +12 -0
  26. package/dist/definitions/StaticMap/StaticMapImage.d.ts.map +1 -0
  27. package/dist/definitions/StaticMap/StaticMapLoader.d.ts +3 -0
  28. package/dist/definitions/StaticMap/StaticMapLoader.d.ts.map +1 -0
  29. package/dist/definitions/StaticMap/StaticMapMarker.d.ts +8 -0
  30. package/dist/definitions/StaticMap/StaticMapMarker.d.ts.map +1 -0
  31. package/dist/definitions/StaticMap/hooks/useGetStaticMapImageUrl.d.ts +8 -0
  32. package/dist/definitions/StaticMap/hooks/useGetStaticMapImageUrl.d.ts.map +1 -0
  33. package/dist/definitions/StaticMap/utils/getRangedWidthValue.d.ts +2 -0
  34. package/dist/definitions/StaticMap/utils/getRangedWidthValue.d.ts.map +1 -0
  35. package/dist/definitions/StaticMap/utils/getShouldDisplay2x.d.ts +2 -0
  36. package/dist/definitions/StaticMap/utils/getShouldDisplay2x.d.ts.map +1 -0
  37. package/dist/definitions/StaticMap/utils/getShouldDisplay2x.web.d.ts +2 -0
  38. package/dist/definitions/StaticMap/utils/getShouldDisplay2x.web.d.ts.map +1 -0
  39. package/dist/definitions/StaticMap/utils/getStaticMapImageUrl.d.ts +15 -0
  40. package/dist/definitions/StaticMap/utils/getStaticMapImageUrl.d.ts.map +1 -0
  41. package/dist/definitions/index.d.ts +9 -0
  42. package/dist/definitions/index.d.ts.map +1 -1
  43. package/dist/definitions/native-base/KittNativeBaseProvider.d.ts +121 -0
  44. package/dist/definitions/native-base/KittNativeBaseProvider.d.ts.map +1 -1
  45. package/dist/definitions/native-base/primitives.d.ts +17 -1
  46. package/dist/definitions/native-base/primitives.d.ts.map +1 -1
  47. package/dist/definitions/themes/late-ocean/avatar.d.ts +8 -0
  48. package/dist/definitions/themes/late-ocean/avatar.d.ts.map +1 -1
  49. package/dist/definitions/themes/late-ocean/skeleton.d.ts +6 -0
  50. package/dist/definitions/themes/late-ocean/skeleton.d.ts.map +1 -1
  51. package/dist/index-browser-all.es.android.js +796 -235
  52. package/dist/index-browser-all.es.android.js.map +1 -1
  53. package/dist/index-browser-all.es.ios.js +796 -235
  54. package/dist/index-browser-all.es.ios.js.map +1 -1
  55. package/dist/index-browser-all.es.js +852 -232
  56. package/dist/index-browser-all.es.js.map +1 -1
  57. package/dist/index-browser-all.es.web.js +865 -245
  58. package/dist/index-browser-all.es.web.js.map +1 -1
  59. package/dist/index-node-14.17.cjs.js +739 -134
  60. package/dist/index-node-14.17.cjs.js.map +1 -1
  61. package/dist/index-node-14.17.cjs.web.js +746 -136
  62. package/dist/index-node-14.17.cjs.web.js.map +1 -1
  63. package/dist/linaria-themes-browser-all.es.android.js +24 -2
  64. package/dist/linaria-themes-browser-all.es.android.js.map +1 -1
  65. package/dist/linaria-themes-browser-all.es.ios.js +24 -2
  66. package/dist/linaria-themes-browser-all.es.ios.js.map +1 -1
  67. package/dist/linaria-themes-browser-all.es.js +24 -2
  68. package/dist/linaria-themes-browser-all.es.js.map +1 -1
  69. package/dist/linaria-themes-browser-all.es.web.js +24 -2
  70. package/dist/linaria-themes-browser-all.es.web.js.map +1 -1
  71. package/dist/linaria-themes-node-14.17.cjs.js +24 -2
  72. package/dist/linaria-themes-node-14.17.cjs.js.map +1 -1
  73. package/dist/linaria-themes-node-14.17.cjs.web.js +24 -2
  74. package/dist/linaria-themes-node-14.17.cjs.web.js.map +1 -1
  75. package/dist/tsbuildinfo +1 -1
  76. package/package.json +2 -2
@@ -1,17 +1,17 @@
1
1
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
- 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, useBreakpointValue, Text as Text$1, Input, NativeBaseProvider, extendTheme } from 'native-base';
3
+ 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, useBreakpointValue, Text as Text$1, Input, NativeBaseProvider, extendTheme } from 'native-base';
4
4
  export { useBreakpointValue, useClipboard, useToken } from 'native-base';
5
5
  import _extends from '@babel/runtime/helpers/extends';
6
- import { useContext, createContext, cloneElement, forwardRef, useState, useRef, useEffect, useMemo, Children, Fragment } from 'react';
6
+ import { useContext, createContext, cloneElement, forwardRef, useState, useRef, useEffect, useMemo, Children, Fragment as Fragment$1 } from 'react';
7
7
  import styled, { useTheme, css, withTheme as withTheme$1, ThemeProvider } from 'styled-components/native';
8
- import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
8
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
9
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
10
- import { View as View$2, useWindowDimensions, Image as Image$2, Pressable as Pressable$2, StyleSheet, ScrollView as ScrollView$2, Linking, Modal as Modal$1, Text as Text$2 } from 'react-native';
10
+ import { View as View$2, useWindowDimensions, Pressable as Pressable$2, StyleSheet, ScrollView as ScrollView$2, Linking, Modal as Modal$1, Text as Text$2 } from 'react-native';
11
11
  export { useWindowDimensions as useWindowSize } from 'react-native';
12
12
  import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
13
13
  import _regeneratorRuntime from '@babel/runtime/regenerator';
14
- import { ArcIcon, UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
14
+ import { ArcIcon, UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, RotateCCWIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
15
15
  export * from '@ornikar/kitt-icons';
16
16
  import { styled as styled$1 } from '@linaria/react';
17
17
  import { Portal } from 'react-portal';
@@ -31,6 +31,10 @@ var View = View$1;
31
31
  var ScrollView = ScrollView$1;
32
32
  var Pressable = Pressable$1;
33
33
  var Image = Image$1;
34
+ // See: https://fettblog.eu/typescript-react-generic-forward-refs/
35
+ var FlatList = FlatList$1;
36
+ // See: https://fettblog.eu/typescript-react-generic-forward-refs/
37
+ var SectionList = SectionList$1;
34
38
 
35
39
  function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valueIfFalse) {
36
40
  // Handles simple boolean values
@@ -205,7 +209,7 @@ var KittBreakpointNameEnum;
205
209
  KittBreakpointNameEnum["WIDE"] = "wide";
206
210
  })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
207
211
 
208
- var _excluded$x = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
212
+ var _excluded$z = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
209
213
  var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
210
214
  var TypographyColorContext = /*#__PURE__*/createContext('black');
211
215
  function useTypographyColor() {
@@ -277,7 +281,7 @@ function Typography(_ref) {
277
281
  } : _ref$type,
278
282
  variant = _ref.variant,
279
283
  color = _ref.color,
280
- otherProps = _objectWithoutProperties(_ref, _excluded$x);
284
+ otherProps = _objectWithoutProperties(_ref, _excluded$z);
281
285
 
282
286
  var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
283
287
  var defaultColor = useTypographyDefaultColor();
@@ -411,12 +415,12 @@ function Icon(_ref5) {
411
415
  });
412
416
  }
413
417
 
414
- var _excluded$w = ["color"],
415
- _excluded2$4 = ["color"];
418
+ var _excluded$y = ["color"],
419
+ _excluded2$5 = ["color"];
416
420
 
417
421
  function TypographyIconSpecifiedColor(_ref) {
418
422
  var color = _ref.color,
419
- props = _objectWithoutProperties(_ref, _excluded$w);
423
+ props = _objectWithoutProperties(_ref, _excluded$y);
420
424
 
421
425
  var theme = /*#__PURE__*/useTheme();
422
426
  return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -433,7 +437,7 @@ function TypographyIconInheritColor(props) {
433
437
 
434
438
  function TypographyIcon(_ref2) {
435
439
  var color = _ref2.color,
436
- props = _objectWithoutProperties(_ref2, _excluded2$4);
440
+ props = _objectWithoutProperties(_ref2, _excluded2$5);
437
441
 
438
442
  if (color) {
439
443
  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
@@ -468,7 +472,7 @@ var getTextColorByType = function (type, variant, isHovered, isPressed) {
468
472
  }
469
473
  };
470
474
 
471
- var _excluded$v = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
475
+ var _excluded$x = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
472
476
 
473
477
  function ButtonIcon(_ref) {
474
478
  var icon = _ref.icon,
@@ -546,7 +550,7 @@ function ButtonContent(_ref3) {
546
550
  isHovered = _ref3.isHovered,
547
551
  isPressed = _ref3.isPressed;
548
552
  _ref3.isFocused;
549
- var props = _objectWithoutProperties(_ref3, _excluded$v);
553
+ var props = _objectWithoutProperties(_ref3, _excluded$x);
550
554
 
551
555
  var color = isDisabled ? 'black-light' : getTextColorByType(type, variant, isHovered, isPressed);
552
556
  return /*#__PURE__*/jsx(View, {
@@ -827,7 +831,7 @@ function useMatchWindowSize(options) {
827
831
  }, options);
828
832
  }
829
833
 
830
- var _excluded$u = ["as", "onPress", "disabled", "icon", "stretch"];
834
+ var _excluded$w = ["as", "onPress", "disabled", "icon", "stretch"];
831
835
 
832
836
  function getCurrentStretchValue(isStretch, isMedium) {
833
837
  // Stretch will follow the value passed from the component occurence if defined
@@ -841,7 +845,7 @@ function ActionsItem(_ref) {
841
845
  disabled = _ref.disabled,
842
846
  icon = _ref.icon,
843
847
  stretch = _ref.stretch,
844
- props = _objectWithoutProperties(_ref, _excluded$u);
848
+ props = _objectWithoutProperties(_ref, _excluded$w);
845
849
 
846
850
  var isMedium = useMatchWindowSize({
847
851
  minWidth: KittBreakpoints.MEDIUM
@@ -931,7 +935,7 @@ function ActionsButton(_ref) {
931
935
  }, props));
932
936
  }
933
937
 
934
- var _excluded$t = ["children", "layout"];
938
+ var _excluded$v = ["children", "layout"];
935
939
 
936
940
  function getCurrentLayout(layout) {
937
941
  if (!layout) return {
@@ -954,7 +958,7 @@ function getCurrentDirection(layout) {
954
958
  function Actions(_ref) {
955
959
  var children = _ref.children,
956
960
  layout = _ref.layout,
957
- props = _objectWithoutProperties(_ref, _excluded$t);
961
+ props = _objectWithoutProperties(_ref, _excluded$v);
958
962
 
959
963
  var currentAlignItems = getCurrentLayout(layout);
960
964
  var currentDirection = getCurrentDirection(layout);
@@ -970,52 +974,131 @@ function Actions(_ref) {
970
974
  Actions.Button = ActionsButton;
971
975
  Actions.Item = ActionsItem;
972
976
 
973
- var _excluded$s = ["size", "round", "light", "sizeVariant"];
977
+ var lateOceanColorPalette = {
978
+ lateOcean: '#4C34E0',
979
+ lateOceanLight1: '#705DE6',
980
+ lateOceanLight2: '#9485EC',
981
+ lateOceanLight3: '#D6BAF9',
982
+ warmEmbrace: '#F4D3CE',
983
+ warmEmbraceLight1: '#FFEDE6',
984
+ black1000: '#000000',
985
+ black800: '#333333',
986
+ black555: '#737373',
987
+ black400: '#999999',
988
+ black200: '#CCCCCC',
989
+ black100: '#E5E5E5',
990
+ black50: '#F2F2F2',
991
+ black25: '#F9F9F9',
992
+ white: '#FFFFFF',
993
+ viride: '#38836D',
994
+ englishVermillon: '#D44148',
995
+ goldCrayola: '#F8C583',
996
+ aero: '#89BDDD',
997
+ transparent: 'transparent',
998
+ moonPurple: '#DBD6F9',
999
+ moonPurpleLight1: '#EDEBFC'
1000
+ };
974
1001
 
975
- var getInitials = function (firstname, lastname) {
976
- return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
1002
+ var colors = {
1003
+ primary: lateOceanColorPalette.lateOcean,
1004
+ primaryLight: lateOceanColorPalette.lateOceanLight1,
1005
+ accent: lateOceanColorPalette.warmEmbrace,
1006
+ accentLight: lateOceanColorPalette.warmEmbraceLight1,
1007
+ success: lateOceanColorPalette.viride,
1008
+ correct: lateOceanColorPalette.viride,
1009
+ danger: lateOceanColorPalette.englishVermillon,
1010
+ info: lateOceanColorPalette.aero,
1011
+ warning: lateOceanColorPalette.goldCrayola,
1012
+ separator: lateOceanColorPalette.black100,
1013
+ hover: lateOceanColorPalette.black100,
1014
+ white: lateOceanColorPalette.white,
1015
+ black: lateOceanColorPalette.black1000,
1016
+ blackDisabled: lateOceanColorPalette.black400,
1017
+ blackLight: lateOceanColorPalette.black555,
1018
+ blackAnthracite: lateOceanColorPalette.black800,
1019
+ uiBackground: lateOceanColorPalette.black25,
1020
+ uiBackgroundLight: lateOceanColorPalette.white,
1021
+ transparent: lateOceanColorPalette.transparent,
1022
+ disabled: lateOceanColorPalette.black50,
1023
+ overlay: {
1024
+ dark: 'rgba(41, 48, 51, 0.25)',
1025
+ light: 'rgba(255, 255, 255, 0.90)'
1026
+ }
977
1027
  };
978
1028
 
979
- var StyledAvatarView = /*#__PURE__*/styled(View$2).withConfig({
980
- displayName: "Avatar__StyledAvatarView",
981
- componentId: "kitt-universal__sc-9miubv-0"
982
- })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
983
- var theme = _ref.theme,
984
- $isRound = _ref.$isRound,
985
- $size = _ref.$size,
986
- $sizeVariant = _ref.$sizeVariant;
987
- if ($isRound) return "".concat($size / 2, "px");
988
- return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
989
- }, function (_ref2) {
990
- var theme = _ref2.theme,
991
- $isLight = _ref2.$isLight;
992
- return $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
993
- }, function (_ref3) {
994
- var $size = _ref3.$size;
995
- return $size;
996
- }, function (_ref4) {
997
- var $size = _ref4.$size;
998
- return $size;
999
- });
1029
+ var defaultAvatarSize = 40;
1030
+ var defaultAvatarIconSize = 20;
1031
+ var largeAvatarSize = 120;
1032
+ var largeAvatarIconSize = 30;
1033
+ var avatar = {
1034
+ borderRadius: 10,
1035
+ size: defaultAvatarSize,
1036
+ iconSize: defaultAvatarIconSize,
1037
+ "default": {
1038
+ backgroundColor: colors.primary
1039
+ },
1040
+ light: {
1041
+ backgroundColor: lateOceanColorPalette.black100
1042
+ },
1043
+ large: {
1044
+ borderRadius: 30,
1045
+ size: largeAvatarSize,
1046
+ iconSize: largeAvatarIconSize
1047
+ }
1048
+ };
1000
1049
 
1001
- function AvatarContent(_ref5) {
1002
- var size = _ref5.size,
1003
- src = _ref5.src,
1004
- firstname = _ref5.firstname,
1005
- lastname = _ref5.lastname,
1006
- alt = _ref5.alt,
1007
- isLight = _ref5.isLight,
1008
- sizeVariant = _ref5.sizeVariant;
1050
+ function getCurrentRadius(_ref) {
1051
+ var size = _ref.size,
1052
+ sizeVariant = _ref.sizeVariant,
1053
+ round = _ref.round;
1054
+
1055
+ if (round) {
1056
+ if (size) return size * 0.5;
1057
+ if (sizeVariant === 'large') return largeAvatarSize * 0.5;
1058
+ return defaultAvatarSize * 0.5;
1059
+ }
1060
+
1061
+ if (sizeVariant === 'large') return 'kitt.avatar.large.borderRadius';
1062
+ return 'kitt.avatar.borderRadius';
1063
+ }
1064
+
1065
+ function getCurrentSize(_ref) {
1066
+ var size = _ref.size,
1067
+ sizeVariant = _ref.sizeVariant;
1068
+ if (size) return size;
1069
+ if (sizeVariant === 'large') return 'kitt.avatar.large.size';
1070
+ return 'kitt.avatar.size';
1071
+ }
1072
+
1073
+ function getIconSize(size, sizeVariant) {
1074
+ if (typeof size === 'number') return size * 0.5;
1075
+ if (sizeVariant === 'large') return largeAvatarIconSize;
1076
+ return defaultAvatarIconSize;
1077
+ }
1078
+
1079
+ function getInitials(firstname, lastname) {
1080
+ return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
1081
+ }
1082
+
1083
+ var _excluded$u = ["size", "round", "light", "sizeVariant"];
1084
+
1085
+ function AvatarContent(_ref) {
1086
+ var size = _ref.size,
1087
+ src = _ref.src,
1088
+ firstname = _ref.firstname,
1089
+ lastname = _ref.lastname,
1090
+ alt = _ref.alt,
1091
+ isLight = _ref.isLight,
1092
+ sizeVariant = _ref.sizeVariant;
1009
1093
 
1010
1094
  if (src) {
1011
- return /*#__PURE__*/jsx(Image$2, {
1095
+ return /*#__PURE__*/jsx(Image, {
1012
1096
  source: {
1013
1097
  uri: src
1014
1098
  },
1015
- style: {
1016
- width: size,
1017
- height: size
1018
- },
1099
+ width: size,
1100
+ height: size,
1101
+ alt: alt,
1019
1102
  accessibilityLabel: alt
1020
1103
  });
1021
1104
  }
@@ -1032,25 +1115,36 @@ function AvatarContent(_ref5) {
1032
1115
  return /*#__PURE__*/jsx(Icon, {
1033
1116
  icon: /*#__PURE__*/jsx(UserIcon, {}),
1034
1117
  color: isLight ? 'black' : 'white',
1035
- size: size / 2
1118
+ size: getIconSize(size, sizeVariant)
1036
1119
  });
1037
1120
  }
1038
1121
 
1039
- function Avatar(_ref6) {
1040
- var _ref6$size = _ref6.size,
1041
- size = _ref6$size === void 0 ? 40 : _ref6$size,
1042
- round = _ref6.round,
1043
- light = _ref6.light,
1044
- sizeVariant = _ref6.sizeVariant,
1045
- props = _objectWithoutProperties(_ref6, _excluded$s);
1122
+ function Avatar(_ref2) {
1123
+ var size = _ref2.size,
1124
+ round = _ref2.round,
1125
+ light = _ref2.light,
1126
+ sizeVariant = _ref2.sizeVariant,
1127
+ props = _objectWithoutProperties(_ref2, _excluded$u);
1046
1128
 
1047
- return /*#__PURE__*/jsx(StyledAvatarView, {
1048
- $size: size,
1049
- $isRound: round,
1050
- $isLight: light,
1051
- $sizeVariant: sizeVariant,
1129
+ var currentSize = getCurrentSize({
1130
+ size: size,
1131
+ sizeVariant: sizeVariant
1132
+ });
1133
+ var currentBorderRadius = getCurrentRadius({
1134
+ size: size,
1135
+ sizeVariant: sizeVariant,
1136
+ round: round
1137
+ });
1138
+ return /*#__PURE__*/jsx(View, {
1139
+ overflow: "hidden",
1140
+ alignItems: "center",
1141
+ justifyContent: "center",
1142
+ width: currentSize,
1143
+ height: currentSize,
1144
+ borderRadius: currentBorderRadius,
1145
+ backgroundColor: "kitt.avatar.".concat(light ? 'light' : 'default', ".backgroundColor"),
1052
1146
  children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
1053
- size: size,
1147
+ size: currentSize,
1054
1148
  isLight: light,
1055
1149
  sizeVariant: sizeVariant
1056
1150
  }, props))
@@ -1108,9 +1202,10 @@ function useBlockBodyScroll(isScrollBlocked) {
1108
1202
  function ModalBehaviourPortal(_ref) {
1109
1203
  var visible = _ref.visible,
1110
1204
  children = _ref.children;
1111
- useBlockBodyScroll(Boolean(visible));
1205
+ useBlockBodyScroll(Boolean(visible)); // eslint-disable-next-line react/jsx-no-useless-fragment -- Portal propTypes define a required children, preventing a null children value
1206
+
1112
1207
  return /*#__PURE__*/jsx(Portal, {
1113
- children: children
1208
+ children: children || /*#__PURE__*/jsx(Fragment, {})
1114
1209
  });
1115
1210
  }
1116
1211
 
@@ -1181,7 +1276,7 @@ function Overlay(_ref2) {
1181
1276
  });
1182
1277
  }
1183
1278
 
1184
- var _excluded$r = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
1279
+ var _excluded$t = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
1185
1280
  var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
1186
1281
  var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
1187
1282
  var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
@@ -1220,7 +1315,7 @@ function CardModalAnimation(_ref) {
1220
1315
  onExit = _ref.onExit,
1221
1316
  onExited = _ref.onExited,
1222
1317
  onClose = _ref.onClose,
1223
- props = _objectWithoutProperties(_ref, _excluded$r);
1318
+ props = _objectWithoutProperties(_ref, _excluded$t);
1224
1319
 
1225
1320
  var theme = /*#__PURE__*/useTheme();
1226
1321
  var animation = theme.kitt.cardModal.animation;
@@ -1256,12 +1351,12 @@ function CardModalAnimation(_ref) {
1256
1351
  }));
1257
1352
  }
1258
1353
 
1259
- var _excluded$q = ["children"],
1260
- _excluded2$3 = ["children", "visible", "onClose", "onExited"];
1354
+ var _excluded$s = ["children"],
1355
+ _excluded2$4 = ["children", "visible", "onClose", "onExited"];
1261
1356
 
1262
1357
  function ScrollContainer(_ref) {
1263
1358
  var children = _ref.children,
1264
- props = _objectWithoutProperties(_ref, _excluded$q);
1359
+ props = _objectWithoutProperties(_ref, _excluded$s);
1265
1360
 
1266
1361
  return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({}, props), {}, {
1267
1362
  children: children
@@ -1273,7 +1368,7 @@ function CardModalBehaviour(_ref2) {
1273
1368
  visible = _ref2.visible,
1274
1369
  onClose = _ref2.onClose,
1275
1370
  onExited = _ref2.onExited,
1276
- props = _objectWithoutProperties(_ref2, _excluded2$3);
1371
+ props = _objectWithoutProperties(_ref2, _excluded2$4);
1277
1372
 
1278
1373
  var _useState = useState(visible),
1279
1374
  _useState2 = _slicedToArray(_useState, 2),
@@ -1306,7 +1401,7 @@ function CardModalBehaviour(_ref2) {
1306
1401
  });
1307
1402
  }
1308
1403
 
1309
- var _excluded$p = ["children", "paddingX", "paddingY"];
1404
+ var _excluded$r = ["children", "paddingX", "paddingY"];
1310
1405
  function CardModalBody(_ref) {
1311
1406
  var children = _ref.children,
1312
1407
  _ref$paddingX = _ref.paddingX,
@@ -1316,7 +1411,7 @@ function CardModalBody(_ref) {
1316
1411
  } : _ref$paddingX,
1317
1412
  _ref$paddingY = _ref.paddingY,
1318
1413
  paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
1319
- props = _objectWithoutProperties(_ref, _excluded$p);
1414
+ props = _objectWithoutProperties(_ref, _excluded$r);
1320
1415
 
1321
1416
  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
1322
1417
  paddingX: paddingX,
@@ -1326,7 +1421,7 @@ function CardModalBody(_ref) {
1326
1421
  }));
1327
1422
  }
1328
1423
 
1329
- var _excluded$o = ["children", "padding", "hasSeparator"];
1424
+ var _excluded$q = ["children", "padding", "hasSeparator"];
1330
1425
  function CardModalFooter(_ref) {
1331
1426
  var children = _ref.children,
1332
1427
  _ref$padding = _ref.padding,
@@ -1336,7 +1431,7 @@ function CardModalFooter(_ref) {
1336
1431
  } : _ref$padding,
1337
1432
  _ref$hasSeparator = _ref.hasSeparator,
1338
1433
  hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
1339
- props = _objectWithoutProperties(_ref, _excluded$o);
1434
+ props = _objectWithoutProperties(_ref, _excluded$q);
1340
1435
 
1341
1436
  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
1342
1437
  marginTop: "kitt.2",
@@ -1351,7 +1446,7 @@ function CardModalFooter(_ref) {
1351
1446
  }));
1352
1447
  }
1353
1448
 
1354
- var _excluded$n = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
1449
+ var _excluded$p = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
1355
1450
  function CardModalHeader(_ref) {
1356
1451
  var children = _ref.children,
1357
1452
  title = _ref.title,
@@ -1364,7 +1459,7 @@ function CardModalHeader(_ref) {
1364
1459
  hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
1365
1460
  right = _ref.right,
1366
1461
  left = _ref.left,
1367
- props = _objectWithoutProperties(_ref, _excluded$n);
1462
+ props = _objectWithoutProperties(_ref, _excluded$p);
1368
1463
 
1369
1464
  var defaultContainerPadding = {
1370
1465
  base: 'kitt.4',
@@ -1403,7 +1498,7 @@ function CardModalHeader(_ref) {
1403
1498
  }));
1404
1499
  }
1405
1500
 
1406
- var _excluded$m = ["children", "backgroundColor", "maxWidth", "withoutShadow"];
1501
+ var _excluded$o = ["children", "backgroundColor", "maxWidth", "withoutShadow"];
1407
1502
  function CardModal(_ref) {
1408
1503
  var children = _ref.children,
1409
1504
  _ref$backgroundColor = _ref.backgroundColor,
@@ -1411,7 +1506,7 @@ function CardModal(_ref) {
1411
1506
  _ref$maxWidth = _ref.maxWidth,
1412
1507
  maxWidth = _ref$maxWidth === void 0 ? 'kitt.cardModal.maxWidth' : _ref$maxWidth,
1413
1508
  withoutShadow = _ref.withoutShadow,
1414
- props = _objectWithoutProperties(_ref, _excluded$m);
1509
+ props = _objectWithoutProperties(_ref, _excluded$o);
1415
1510
 
1416
1511
  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
1417
1512
  overflow: "hidden",
@@ -1608,11 +1703,11 @@ var ChoiceItemContainer = /*#__PURE__*/styled(View$2).withConfig({
1608
1703
  return css(["margin-bottom:", "px;"], $isLast ? 0 : column);
1609
1704
  });
1610
1705
 
1611
- var _excluded$l = ["direction"];
1706
+ var _excluded$n = ["direction"];
1612
1707
 
1613
1708
  function ChoicesContainer(_ref) {
1614
1709
  var direction = _ref.direction,
1615
- props = _objectWithoutProperties(_ref, _excluded$l);
1710
+ props = _objectWithoutProperties(_ref, _excluded$n);
1616
1711
 
1617
1712
  if (direction === 'row') {
1618
1713
  return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
@@ -1687,7 +1782,7 @@ var ChoicesElements = {
1687
1782
  ButtonChoices: ButtonChoices
1688
1783
  };
1689
1784
 
1690
- var _excluded$k = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
1785
+ var _excluded$m = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
1691
1786
  var contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
1692
1787
  var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
1693
1788
  var contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
@@ -1726,7 +1821,7 @@ function DialogModalAnimation(_ref) {
1726
1821
  onExit = _ref.onExit,
1727
1822
  onExited = _ref.onExited,
1728
1823
  onClose = _ref.onClose,
1729
- props = _objectWithoutProperties(_ref, _excluded$k);
1824
+ props = _objectWithoutProperties(_ref, _excluded$m);
1730
1825
 
1731
1826
  var theme = /*#__PURE__*/useTheme();
1732
1827
  var animation = theme.kitt.dialogModal.animation;
@@ -1762,13 +1857,13 @@ function DialogModalAnimation(_ref) {
1762
1857
  }));
1763
1858
  }
1764
1859
 
1765
- var _excluded$j = ["children", "visible", "onClose", "onExited"];
1860
+ var _excluded$l = ["children", "visible", "onClose", "onExited"];
1766
1861
  function DialogModalBehaviour(_ref) {
1767
1862
  var children = _ref.children,
1768
1863
  visible = _ref.visible,
1769
1864
  onClose = _ref.onClose,
1770
1865
  onExited = _ref.onExited,
1771
- props = _objectWithoutProperties(_ref, _excluded$j);
1866
+ props = _objectWithoutProperties(_ref, _excluded$l);
1772
1867
 
1773
1868
  var _useState = useState(visible),
1774
1869
  _useState2 = _slicedToArray(_useState, 2),
@@ -1801,7 +1896,7 @@ function DialogModalBehaviour(_ref) {
1801
1896
  });
1802
1897
  }
1803
1898
 
1804
- var _excluded$i = ["stretch"];
1899
+ var _excluded$k = ["stretch"];
1805
1900
  function DialogModal(_ref) {
1806
1901
  var illustration = _ref.illustration,
1807
1902
  title = _ref.title,
@@ -1843,7 +1938,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
1843
1938
  function DialogModalButton(_ref2) {
1844
1939
  var _ref2$stretch = _ref2.stretch,
1845
1940
  stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
1846
- props = _objectWithoutProperties(_ref2, _excluded$i);
1941
+ props = _objectWithoutProperties(_ref2, _excluded$k);
1847
1942
 
1848
1943
  return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
1849
1944
  stretch: stretch
@@ -1882,17 +1977,17 @@ function Emoji(_ref) {
1882
1977
  });
1883
1978
  }
1884
1979
 
1885
- var _excluded$h = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
1886
- _excluded2$2 = ["phoneNumber", "children"],
1887
- _excluded3$1 = ["phoneNumber", "children"],
1888
- _excluded4 = ["emailAddress", "children"];
1980
+ var _excluded$j = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
1981
+ _excluded2$3 = ["phoneNumber", "children"],
1982
+ _excluded3$2 = ["phoneNumber", "children"],
1983
+ _excluded4$1 = ["emailAddress", "children"];
1889
1984
  function ExternalAppLink(_ref) {
1890
1985
  var Component = _ref.as,
1891
1986
  appScheme = _ref.appScheme,
1892
1987
  appValue = _ref.appValue,
1893
1988
  onPress = _ref.onPress,
1894
1989
  onOpenAppError = _ref.onOpenAppError,
1895
- rest = _objectWithoutProperties(_ref, _excluded$h);
1990
+ rest = _objectWithoutProperties(_ref, _excluded$j);
1896
1991
 
1897
1992
  var href = "".concat(appScheme, ":").concat(appValue);
1898
1993
 
@@ -1972,7 +2067,7 @@ function ExternalAppLink(_ref) {
1972
2067
  ExternalAppLink.Sms = function (_ref3) {
1973
2068
  var phoneNumber = _ref3.phoneNumber,
1974
2069
  children = _ref3.children,
1975
- rest = _objectWithoutProperties(_ref3, _excluded2$2);
2070
+ rest = _objectWithoutProperties(_ref3, _excluded2$3);
1976
2071
 
1977
2072
  return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
1978
2073
  appScheme: "sms",
@@ -1984,7 +2079,7 @@ ExternalAppLink.Sms = function (_ref3) {
1984
2079
  ExternalAppLink.Tel = function (_ref4) {
1985
2080
  var phoneNumber = _ref4.phoneNumber,
1986
2081
  children = _ref4.children,
1987
- rest = _objectWithoutProperties(_ref4, _excluded3$1);
2082
+ rest = _objectWithoutProperties(_ref4, _excluded3$2);
1988
2083
 
1989
2084
  return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
1990
2085
  appScheme: "tel",
@@ -1996,7 +2091,7 @@ ExternalAppLink.Tel = function (_ref4) {
1996
2091
  ExternalAppLink.Mail = function (_ref5) {
1997
2092
  var emailAddress = _ref5.emailAddress,
1998
2093
  children = _ref5.children,
1999
- rest = _objectWithoutProperties(_ref5, _excluded4);
2094
+ rest = _objectWithoutProperties(_ref5, _excluded4$1);
2000
2095
 
2001
2096
  return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
2002
2097
  appScheme: "mailto",
@@ -2010,14 +2105,14 @@ var defaultOpenLinkBehavior = {
2010
2105
  web: 'targetBlank'
2011
2106
  };
2012
2107
 
2013
- var _excluded$g = ["as", "href", "openLinkBehavior", "onPress"];
2108
+ var _excluded$i = ["as", "href", "openLinkBehavior", "onPress"];
2014
2109
  function ExternalLink(_ref) {
2015
2110
  var Component = _ref.as,
2016
2111
  href = _ref.href,
2017
2112
  _ref$openLinkBehavior = _ref.openLinkBehavior,
2018
2113
  openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
2019
2114
  onPress = _ref.onPress,
2020
- rest = _objectWithoutProperties(_ref, _excluded$g);
2115
+ rest = _objectWithoutProperties(_ref, _excluded$i);
2021
2116
 
2022
2117
  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
2023
2118
  href: href,
@@ -2029,71 +2124,6 @@ function ExternalLink(_ref) {
2029
2124
  }));
2030
2125
  }
2031
2126
 
2032
- var lateOceanColorPalette = {
2033
- lateOcean: '#4C34E0',
2034
- lateOceanLight1: '#705DE6',
2035
- lateOceanLight2: '#9485EC',
2036
- lateOceanLight3: '#D6BAF9',
2037
- warmEmbrace: '#F4D3CE',
2038
- warmEmbraceLight1: '#FFEDE6',
2039
- black1000: '#000000',
2040
- black800: '#333333',
2041
- black555: '#737373',
2042
- black400: '#999999',
2043
- black200: '#CCCCCC',
2044
- black100: '#E5E5E5',
2045
- black50: '#F2F2F2',
2046
- black25: '#F9F9F9',
2047
- white: '#FFFFFF',
2048
- viride: '#38836D',
2049
- englishVermillon: '#D44148',
2050
- goldCrayola: '#F8C583',
2051
- aero: '#89BDDD',
2052
- transparent: 'transparent',
2053
- moonPurple: '#DBD6F9',
2054
- moonPurpleLight1: '#EDEBFC'
2055
- };
2056
-
2057
- var colors = {
2058
- primary: lateOceanColorPalette.lateOcean,
2059
- primaryLight: lateOceanColorPalette.lateOceanLight1,
2060
- accent: lateOceanColorPalette.warmEmbrace,
2061
- accentLight: lateOceanColorPalette.warmEmbraceLight1,
2062
- success: lateOceanColorPalette.viride,
2063
- correct: lateOceanColorPalette.viride,
2064
- danger: lateOceanColorPalette.englishVermillon,
2065
- info: lateOceanColorPalette.aero,
2066
- warning: lateOceanColorPalette.goldCrayola,
2067
- separator: lateOceanColorPalette.black100,
2068
- hover: lateOceanColorPalette.black100,
2069
- white: lateOceanColorPalette.white,
2070
- black: lateOceanColorPalette.black1000,
2071
- blackDisabled: lateOceanColorPalette.black400,
2072
- blackLight: lateOceanColorPalette.black555,
2073
- blackAnthracite: lateOceanColorPalette.black800,
2074
- uiBackground: lateOceanColorPalette.black25,
2075
- uiBackgroundLight: lateOceanColorPalette.white,
2076
- transparent: lateOceanColorPalette.transparent,
2077
- disabled: lateOceanColorPalette.black50,
2078
- overlay: {
2079
- dark: 'rgba(41, 48, 51, 0.25)',
2080
- light: 'rgba(255, 255, 255, 0.90)'
2081
- }
2082
- };
2083
-
2084
- var avatar = {
2085
- borderRadius: 10,
2086
- "default": {
2087
- backgroundColor: colors.primary
2088
- },
2089
- light: {
2090
- backgroundColor: lateOceanColorPalette.black100
2091
- },
2092
- large: {
2093
- borderRadius: 30
2094
- }
2095
- };
2096
-
2097
2127
  var spacing = 4;
2098
2128
 
2099
2129
  var bottomSheet = {
@@ -2755,7 +2785,21 @@ var shadows = {
2755
2785
  var skeleton = {
2756
2786
  backgroundColor: lateOceanColorPalette.black100,
2757
2787
  flareColor: lateOceanColorPalette.black200,
2758
- animationDuration: 1000
2788
+ animationDuration: 1000,
2789
+ shape: {
2790
+ bar: {
2791
+ size: 8,
2792
+ borderRadius: 4
2793
+ },
2794
+ circle: {
2795
+ size: 48,
2796
+ borderRadius: 24
2797
+ },
2798
+ square: {
2799
+ size: 48,
2800
+ borderRadius: 6
2801
+ }
2802
+ }
2759
2803
  };
2760
2804
 
2761
2805
  var tag = {
@@ -3178,12 +3222,12 @@ function DatePickerInputs(_ref4) {
3178
3222
  });
3179
3223
  }
3180
3224
 
3181
- var _excluded$f = ["value"];
3225
+ var _excluded$h = ["value"];
3182
3226
  // This is not yet implemented
3183
3227
  // We still display the inputs for chromatic
3184
3228
  function DatePicker(_ref) {
3185
3229
  var value = _ref.value,
3186
- props = _objectWithoutProperties(_ref, _excluded$f);
3230
+ props = _objectWithoutProperties(_ref, _excluded$h);
3187
3231
 
3188
3232
  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
3189
3233
  handleModalOpen: function handleModalOpen() {},
@@ -3211,7 +3255,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled$1('div')({
3211
3255
  }
3212
3256
  }));
3213
3257
 
3214
- var _excluded$e = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
3258
+ var _excluded$g = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
3215
3259
  var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
3216
3260
  var id = _ref.id,
3217
3261
  right = _ref.right;
@@ -3231,7 +3275,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
3231
3275
  keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
3232
3276
  multiline = _ref.multiline,
3233
3277
  onSubmitEditing = _ref.onSubmitEditing,
3234
- props = _objectWithoutProperties(_ref, _excluded$e);
3278
+ props = _objectWithoutProperties(_ref, _excluded$g);
3235
3279
 
3236
3280
  var theme = /*#__PURE__*/useTheme();
3237
3281
  var fontSizeForNativeBase = createNativeBaseFontSize({
@@ -3364,11 +3408,11 @@ function InputPressable(_ref) {
3364
3408
  return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
3365
3409
  }
3366
3410
 
3367
- var _excluded$d = ["isPasswordDefaultVisible", "right"];
3411
+ var _excluded$f = ["isPasswordDefaultVisible", "right"];
3368
3412
  function InputPassword(_ref) {
3369
3413
  var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
3370
3414
  right = _ref.right,
3371
- props = _objectWithoutProperties(_ref, _excluded$d);
3415
+ props = _objectWithoutProperties(_ref, _excluded$f);
3372
3416
 
3373
3417
  var _useState = useState(Boolean(isPasswordDefaultVisible)),
3374
3418
  _useState2 = _slicedToArray(_useState, 2),
@@ -3760,7 +3804,7 @@ function RadioButton(_ref) {
3760
3804
  });
3761
3805
  }
3762
3806
 
3763
- var _excluded$c = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
3807
+ var _excluded$e = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
3764
3808
 
3765
3809
  function RadioButtonGroupItem(_ref) {
3766
3810
  var props = _extends({}, _ref);
@@ -3776,7 +3820,7 @@ function RadioButtonGroup(_ref2) {
3776
3820
  onFocus = _ref2.onFocus,
3777
3821
  onBlur = _ref2.onBlur,
3778
3822
  onChange = _ref2.onChange,
3779
- props = _objectWithoutProperties(_ref2, _excluded$c);
3823
+ props = _objectWithoutProperties(_ref2, _excluded$e);
3780
3824
 
3781
3825
  var _useState = useState(value),
3782
3826
  _useState2 = _slicedToArray(_useState, 2),
@@ -3838,11 +3882,11 @@ function Highlight(_ref) {
3838
3882
  });
3839
3883
  }
3840
3884
 
3841
- var _excluded$b = ["as", "children"];
3885
+ var _excluded$d = ["as", "children"];
3842
3886
  function StyleWebWrapper(_ref) {
3843
3887
  var as = _ref.as,
3844
3888
  children = _ref.children,
3845
- props = _objectWithoutProperties(_ref, _excluded$b);
3889
+ props = _objectWithoutProperties(_ref, _excluded$d);
3846
3890
 
3847
3891
  // as or default to div. If as is undefined, T is div but typescript is not sure
3848
3892
  return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
@@ -3902,7 +3946,7 @@ var PressableIconButtonWebWrapperWithTheme = /*#__PURE__*/styled$1('div')({
3902
3946
  }
3903
3947
  });
3904
3948
 
3905
- var _excluded$a = ["color", "disabled"];
3949
+ var _excluded$c = ["color", "disabled"];
3906
3950
  var PressableIconButtonWebWrapper = /*#__PURE__*/withTheme$1(PressableIconButtonWebWrapperWithTheme);
3907
3951
  var StyledPressableIconButton = /*#__PURE__*/styled(Pressable$2).withConfig({
3908
3952
  displayName: "PressableIconButton__StyledPressableIconButton",
@@ -3931,7 +3975,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled(Pressable$2).withConfig({
3931
3975
  function PressableIconButton(_ref5) {
3932
3976
  var color = _ref5.color,
3933
3977
  disabled = _ref5.disabled,
3934
- props = _objectWithoutProperties(_ref5, _excluded$a);
3978
+ props = _objectWithoutProperties(_ref5, _excluded$c);
3935
3979
 
3936
3980
  return /*#__PURE__*/jsx(StyleWebWrapper, {
3937
3981
  as: PressableIconButtonWebWrapper,
@@ -4015,22 +4059,49 @@ function IconButton(_ref7) {
4015
4059
  });
4016
4060
  }
4017
4061
 
4018
- var _excluded$9 = ["children"];
4062
+ var KittMapConfigProviderContext = /*#__PURE__*/createContext(undefined);
4063
+ function KittMapConfigProvider(_ref) {
4064
+ var children = _ref.children,
4065
+ mapId = _ref.mapId,
4066
+ apiToken = _ref.apiToken;
4067
+ var providerValue = useMemo(function () {
4068
+ return {
4069
+ mapId: mapId,
4070
+ apiToken: apiToken
4071
+ };
4072
+ }, [mapId, apiToken]);
4073
+ return /*#__PURE__*/jsx(KittMapConfigProviderContext.Provider, {
4074
+ value: providerValue,
4075
+ children: children
4076
+ });
4077
+ }
4078
+
4079
+ function useKittMapConfig() {
4080
+ var context = useContext(KittMapConfigProviderContext);
4081
+
4082
+ if (!context) {
4083
+ throw new Error('<KittMapConfigProvider> missing in the react tree');
4084
+ }
4085
+
4086
+ return context;
4087
+ }
4088
+
4089
+ var _excluded$b = ["children"];
4019
4090
  var ContentView$1 = /*#__PURE__*/styled(View$2).withConfig({
4020
4091
  displayName: "ListItemContent__ContentView",
4021
4092
  componentId: "kitt-universal__sc-57q0u9-0"
4022
4093
  })(["flex:1 0 0%;align-self:center;"]);
4023
4094
  function ListItemContent(_ref) {
4024
4095
  var children = _ref.children,
4025
- rest = _objectWithoutProperties(_ref, _excluded$9);
4096
+ rest = _objectWithoutProperties(_ref, _excluded$b);
4026
4097
 
4027
4098
  return /*#__PURE__*/jsx(ContentView$1, _objectSpread(_objectSpread({}, rest), {}, {
4028
4099
  children: children
4029
4100
  }));
4030
4101
  }
4031
4102
 
4032
- var _excluded$8 = ["children", "side"],
4033
- _excluded2$1 = ["children", "align"];
4103
+ var _excluded$a = ["children", "side"],
4104
+ _excluded2$2 = ["children", "align"];
4034
4105
  var SideContainerView = /*#__PURE__*/styled(View$2).withConfig({
4035
4106
  displayName: "ListItemSideContent__SideContainerView",
4036
4107
  componentId: "kitt-universal__sc-1vajiw-0"
@@ -4048,7 +4119,7 @@ function ListItemSideContainer(_ref3) {
4048
4119
  var children = _ref3.children,
4049
4120
  _ref3$side = _ref3.side,
4050
4121
  side = _ref3$side === void 0 ? 'left' : _ref3$side,
4051
- rest = _objectWithoutProperties(_ref3, _excluded$8);
4122
+ rest = _objectWithoutProperties(_ref3, _excluded$a);
4052
4123
 
4053
4124
  return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
4054
4125
  side: side
@@ -4067,7 +4138,7 @@ function ListItemSideContent(_ref5) {
4067
4138
  var children = _ref5.children,
4068
4139
  _ref5$align = _ref5.align,
4069
4140
  align = _ref5$align === void 0 ? 'auto' : _ref5$align,
4070
- rest = _objectWithoutProperties(_ref5, _excluded2$1);
4141
+ rest = _objectWithoutProperties(_ref5, _excluded2$2);
4071
4142
 
4072
4143
  return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
4073
4144
  align: align
@@ -4076,7 +4147,7 @@ function ListItemSideContent(_ref5) {
4076
4147
  }));
4077
4148
  }
4078
4149
 
4079
- var _excluded$7 = ["children", "withPadding", "borders", "left", "right", "onPress"];
4150
+ var _excluded$9 = ["children", "withPadding", "borders", "left", "right", "onPress"];
4080
4151
  var ContainerView = /*#__PURE__*/styled(View$2).withConfig({
4081
4152
  displayName: "ListItem__ContainerView",
4082
4153
  componentId: "kitt-universal__sc-2afp9s-0"
@@ -4116,9 +4187,9 @@ function ListItem(_ref5) {
4116
4187
  left = _ref5.left,
4117
4188
  right = _ref5.right,
4118
4189
  onPress = _ref5.onPress,
4119
- rest = _objectWithoutProperties(_ref5, _excluded$7);
4190
+ rest = _objectWithoutProperties(_ref5, _excluded$9);
4120
4191
 
4121
- var Wrapper = onPress ? Pressable$2 : Fragment;
4192
+ var Wrapper = onPress ? Pressable$2 : Fragment$1;
4122
4193
  var wrapperProps = onPress ? _objectSpread({
4123
4194
  accessibilityRole: 'button',
4124
4195
  onPress: onPress
@@ -4145,6 +4216,231 @@ ListItem.Content = ListItemContent;
4145
4216
  ListItem.SideContent = ListItemSideContent;
4146
4217
  ListItem.SideContainer = ListItemSideContainer;
4147
4218
 
4219
+ var SvgMarkerLargeinline = function SvgMarkerLargeinline(props) {
4220
+ return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
4221
+ fill: "none",
4222
+ viewBox: "0 0 54 56",
4223
+ width: 54,
4224
+ xmlns: "http://www.w3.org/2000/svg"
4225
+ }, props), {}, {
4226
+ children: [/*#__PURE__*/jsxs("linearGradient", {
4227
+ id: "marker-large_inline_svg__b",
4228
+ gradientUnits: "userSpaceOnUse",
4229
+ x1: 26.828,
4230
+ x2: 7.181,
4231
+ y1: 5.072,
4232
+ y2: 39.102,
4233
+ children: [/*#__PURE__*/jsx("stop", {
4234
+ offset: 0,
4235
+ stopOpacity: 0.01
4236
+ }), /*#__PURE__*/jsx("stop", {
4237
+ offset: 1
4238
+ })]
4239
+ }), /*#__PURE__*/jsxs("filter", {
4240
+ id: "marker-large_inline_svg__a",
4241
+ colorInterpolationFilters: "sRGB",
4242
+ filterUnits: "userSpaceOnUse",
4243
+ height: 48.706,
4244
+ width: 42.761,
4245
+ x: 10.437,
4246
+ y: 5.167,
4247
+ children: [/*#__PURE__*/jsx("feFlood", {
4248
+ floodOpacity: 0,
4249
+ result: "BackgroundImageFix"
4250
+ }), /*#__PURE__*/jsx("feBlend", {
4251
+ "in": "SourceGraphic",
4252
+ in2: "BackgroundImageFix",
4253
+ result: "shape"
4254
+ }), /*#__PURE__*/jsx("feGaussianBlur", {
4255
+ result: "effect1_foregroundBlur_257_3018",
4256
+ stdDeviation: 2.718
4257
+ })]
4258
+ }), /*#__PURE__*/jsx("mask", {
4259
+ id: "marker-large_inline_svg__c",
4260
+ height: 43,
4261
+ maskUnits: "userSpaceOnUse",
4262
+ width: 31,
4263
+ x: 3,
4264
+ y: 3,
4265
+ children: /*#__PURE__*/jsx("path", {
4266
+ 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",
4267
+ fill: "#fff"
4268
+ })
4269
+ }), /*#__PURE__*/jsx("g", {
4270
+ filter: "url(#marker-large_inline_svg__a)",
4271
+ opacity: 0.25,
4272
+ children: /*#__PURE__*/jsx("path", {
4273
+ 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",
4274
+ fill: "url(#marker-large_inline_svg__b)"
4275
+ })
4276
+ }), /*#__PURE__*/jsx("g", {
4277
+ mask: "url(#marker-large_inline_svg__c)",
4278
+ children: /*#__PURE__*/jsx("path", {
4279
+ d: "M3 3h31v43H3z",
4280
+ fill: "#4c34e0"
4281
+ })
4282
+ }), /*#__PURE__*/jsx("path", {
4283
+ 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",
4284
+ stroke: "#fff",
4285
+ strokeWidth: 3
4286
+ })]
4287
+ }));
4288
+ };
4289
+
4290
+ var SvgMarkerinline = function SvgMarkerinline(props) {
4291
+ return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
4292
+ viewBox: "0 0 40 39",
4293
+ fill: "none",
4294
+ xmlns: "http://www.w3.org/2000/svg"
4295
+ }, props), {}, {
4296
+ children: [/*#__PURE__*/jsx("path", {
4297
+ 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",
4298
+ fill: "url(#marker_inline_svg__a)",
4299
+ opacity: 0.25,
4300
+ filter: "url(#marker_inline_svg__b)"
4301
+ }), /*#__PURE__*/jsx("path", {
4302
+ 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",
4303
+ fill: "#4C34E0"
4304
+ }), /*#__PURE__*/jsx("mask", {
4305
+ id: "marker_inline_svg__c",
4306
+ style: {
4307
+ maskType: "alpha"
4308
+ },
4309
+ maskUnits: "userSpaceOnUse",
4310
+ x: 3,
4311
+ y: 3,
4312
+ width: 20,
4313
+ height: 28,
4314
+ children: /*#__PURE__*/jsx("path", {
4315
+ 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",
4316
+ fill: "#fff"
4317
+ })
4318
+ }), /*#__PURE__*/jsx("g", {
4319
+ mask: "url(#marker_inline_svg__c)",
4320
+ children: /*#__PURE__*/jsx("path", {
4321
+ fill: "#4C34E0",
4322
+ d: "M3 3h20v27H3z"
4323
+ })
4324
+ }), /*#__PURE__*/jsx("path", {
4325
+ 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",
4326
+ stroke: "#fff",
4327
+ strokeWidth: 3
4328
+ }), /*#__PURE__*/jsxs("defs", {
4329
+ children: [/*#__PURE__*/jsxs("linearGradient", {
4330
+ id: "marker_inline_svg__a",
4331
+ x1: 18.616,
4332
+ y1: 0.226,
4333
+ x2: 3.501,
4334
+ y2: 26.405,
4335
+ gradientUnits: "userSpaceOnUse",
4336
+ children: [/*#__PURE__*/jsx("stop", {
4337
+ stopOpacity: 0.01
4338
+ }), /*#__PURE__*/jsx("stop", {
4339
+ offset: 1
4340
+ })]
4341
+ }), /*#__PURE__*/jsxs("filter", {
4342
+ id: "marker_inline_svg__b",
4343
+ x: 6.046,
4344
+ y: 0.339,
4345
+ width: 32.817,
4346
+ height: 37.4,
4347
+ filterUnits: "userSpaceOnUse",
4348
+ colorInterpolationFilters: "sRGB",
4349
+ children: [/*#__PURE__*/jsx("feFlood", {
4350
+ floodOpacity: 0,
4351
+ result: "BackgroundImageFix"
4352
+ }), /*#__PURE__*/jsx("feBlend", {
4353
+ "in": "SourceGraphic",
4354
+ in2: "BackgroundImageFix",
4355
+ result: "shape"
4356
+ }), /*#__PURE__*/jsx("feGaussianBlur", {
4357
+ stdDeviation: 2.071,
4358
+ result: "effect1_foregroundBlur_257_3020"
4359
+ })]
4360
+ })]
4361
+ })]
4362
+ }));
4363
+ };
4364
+
4365
+ var SvgPositionMarkerinline = function SvgPositionMarkerinline(props) {
4366
+ return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
4367
+ viewBox: "0 0 47 47",
4368
+ fill: "none",
4369
+ xmlns: "http://www.w3.org/2000/svg"
4370
+ }, props), {}, {
4371
+ children: [/*#__PURE__*/jsx("path", {
4372
+ fillRule: "evenodd",
4373
+ clipRule: "evenodd",
4374
+ 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",
4375
+ fill: "#38836D",
4376
+ opacity: 0.8,
4377
+ filter: "url(#position-marker_inline_svg__a)"
4378
+ }), /*#__PURE__*/jsx("path", {
4379
+ d: "M31 18.5a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z",
4380
+ fill: "#fff",
4381
+ stroke: "#38836D",
4382
+ strokeWidth: 10
4383
+ }), /*#__PURE__*/jsx("circle", {
4384
+ cx: 23.5,
4385
+ cy: 18.5,
4386
+ r: 2.5,
4387
+ fill: "#fff"
4388
+ }), /*#__PURE__*/jsx("defs", {
4389
+ children: /*#__PURE__*/jsxs("filter", {
4390
+ id: "position-marker_inline_svg__a",
4391
+ x: 0.127,
4392
+ y: 0.127,
4393
+ width: 46.746,
4394
+ height: 46.746,
4395
+ filterUnits: "userSpaceOnUse",
4396
+ colorInterpolationFilters: "sRGB",
4397
+ children: [/*#__PURE__*/jsx("feFlood", {
4398
+ floodOpacity: 0,
4399
+ result: "BackgroundImageFix"
4400
+ }), /*#__PURE__*/jsx("feBlend", {
4401
+ "in": "SourceGraphic",
4402
+ in2: "BackgroundImageFix",
4403
+ result: "shape"
4404
+ }), /*#__PURE__*/jsx("feGaussianBlur", {
4405
+ stdDeviation: 5.437,
4406
+ result: "effect1_foregroundBlur_257_3019"
4407
+ })]
4408
+ })
4409
+ })]
4410
+ }));
4411
+ };
4412
+
4413
+ function MapMarkerSimple(_ref) {
4414
+ var _ref$width = _ref.width,
4415
+ width = _ref$width === void 0 ? 40 : _ref$width,
4416
+ _ref$height = _ref.height,
4417
+ height = _ref$height === void 0 ? 39 : _ref$height;
4418
+ return /*#__PURE__*/jsx(SvgMarkerinline, {
4419
+ width: width,
4420
+ height: height
4421
+ });
4422
+ }
4423
+ function MapMarkerLarge(_ref2) {
4424
+ var _ref2$width = _ref2.width,
4425
+ width = _ref2$width === void 0 ? 54 : _ref2$width,
4426
+ _ref2$height = _ref2.height,
4427
+ height = _ref2$height === void 0 ? 56 : _ref2$height;
4428
+ return /*#__PURE__*/jsx(SvgMarkerLargeinline, {
4429
+ width: width,
4430
+ height: height
4431
+ });
4432
+ }
4433
+ function MapMarkerPosition(_ref3) {
4434
+ var _ref3$width = _ref3.width,
4435
+ width = _ref3$width === void 0 ? 47 : _ref3$width,
4436
+ _ref3$height = _ref3.height,
4437
+ height = _ref3$height === void 0 ? 47 : _ref3$height;
4438
+ return /*#__PURE__*/jsx(SvgPositionMarkerinline, {
4439
+ width: width,
4440
+ height: height
4441
+ });
4442
+ }
4443
+
4148
4444
  function IconContent(_ref) {
4149
4445
  var type = _ref.type,
4150
4446
  color = _ref.color;
@@ -4462,6 +4758,14 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
4462
4758
  var extendedTheme = extendTheme({
4463
4759
  colors: {
4464
4760
  kitt: _objectSpread(_objectSpread({}, theme.colors), {}, {
4761
+ avatar: {
4762
+ "default": {
4763
+ backgroundColor: theme.colors.primary
4764
+ },
4765
+ light: {
4766
+ backgroundColor: theme.palettes.lateOcean.black100
4767
+ }
4768
+ },
4465
4769
  button: {
4466
4770
  "default": theme.button["default"],
4467
4771
  primary: theme.button.primary,
@@ -4481,13 +4785,30 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
4481
4785
  borderColor: theme.forms.radioButtonGroup.item.borderColor,
4482
4786
  backgroundColor: theme.forms.radioButtonGroup.item.backgroundColor
4483
4787
  }
4788
+ },
4789
+ skeleton: {
4790
+ backgroundColor: theme.skeleton.backgroundColor,
4791
+ flareColor: theme.skeleton.flareColor
4484
4792
  }
4485
4793
  }
4486
4794
  }),
4487
4795
  app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.colors
4488
4796
  },
4489
- radii: {
4797
+ radii: _objectSpread(_objectSpread({
4798
+ // Make original native base values unsusable
4799
+ lg: Number.MAX_SAFE_INTEGER,
4800
+ md: Number.MAX_SAFE_INTEGER,
4801
+ sm: Number.MAX_SAFE_INTEGER,
4802
+ xl: Number.MAX_SAFE_INTEGER,
4803
+ xs: Number.MAX_SAFE_INTEGER
4804
+ }, spaces), {}, {
4490
4805
  kitt: {
4806
+ avatar: {
4807
+ borderRadius: theme.avatar.borderRadius,
4808
+ large: {
4809
+ borderRadius: theme.avatar.large.borderRadius
4810
+ }
4811
+ },
4491
4812
  borderRadius: theme.card.borderRadius,
4492
4813
  button: {
4493
4814
  borderRadius: theme.button.borderRadius
@@ -4510,10 +4831,23 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
4510
4831
  },
4511
4832
  tooltip: {
4512
4833
  borderRadius: theme.tooltip.borderRadius
4834
+ },
4835
+ skeleton: {
4836
+ shape: {
4837
+ bar: {
4838
+ borderRadius: theme.skeleton.shape.bar.borderRadius
4839
+ },
4840
+ circle: {
4841
+ borderRadius: theme.skeleton.shape.circle.borderRadius
4842
+ },
4843
+ square: {
4844
+ borderRadius: theme.skeleton.shape.square.borderRadius
4845
+ }
4846
+ }
4513
4847
  }
4514
4848
  },
4515
4849
  app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.radii
4516
- },
4850
+ }),
4517
4851
  borderWidths: {
4518
4852
  kitt: {
4519
4853
  button: {
@@ -4539,6 +4873,14 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
4539
4873
  },
4540
4874
  sizes: _objectSpread(_objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale), {}, {
4541
4875
  kitt: {
4876
+ avatar: {
4877
+ size: theme.avatar.size,
4878
+ iconSize: theme.avatar.iconSize,
4879
+ large: {
4880
+ size: theme.avatar.large.size,
4881
+ iconSize: theme.avatar.large.iconSize
4882
+ }
4883
+ },
4542
4884
  button: {
4543
4885
  minWidth: theme.button.minWidth,
4544
4886
  maxWidth: theme.button.maxWidth,
@@ -4570,6 +4912,19 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
4570
4912
  width: theme.tooltip.arrow.width,
4571
4913
  height: theme.tooltip.arrow.height
4572
4914
  }
4915
+ },
4916
+ skeleton: {
4917
+ shape: {
4918
+ bar: {
4919
+ size: theme.skeleton.shape.bar.size
4920
+ },
4921
+ circle: {
4922
+ size: theme.skeleton.shape.circle.size
4923
+ },
4924
+ square: {
4925
+ size: theme.skeleton.shape.square.size
4926
+ }
4927
+ }
4573
4928
  }
4574
4929
  },
4575
4930
  app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.sizes
@@ -4842,7 +5197,7 @@ function KittNativeBaseProvider(_ref) {
4842
5197
  });
4843
5198
  }
4844
5199
 
4845
- var _excluded$6 = ["children"];
5200
+ var _excluded$8 = ["children"];
4846
5201
  var ViewWithPadding = /*#__PURE__*/styled(View$2).withConfig({
4847
5202
  displayName: "ContentPadding__ViewWithPadding",
4848
5203
  componentId: "kitt-universal__sc-1rprqcv-0"
@@ -4852,14 +5207,14 @@ var ViewWithPadding = /*#__PURE__*/styled(View$2).withConfig({
4852
5207
  });
4853
5208
  function ContentPadding(_ref2) {
4854
5209
  var children = _ref2.children,
4855
- props = _objectWithoutProperties(_ref2, _excluded$6);
5210
+ props = _objectWithoutProperties(_ref2, _excluded$8);
4856
5211
 
4857
5212
  return /*#__PURE__*/jsx(ViewWithPadding, _objectSpread(_objectSpread({}, props), {}, {
4858
5213
  children: children
4859
5214
  }));
4860
5215
  }
4861
5216
 
4862
- var _excluded$5 = ["children", "shouldHandleBottomNotch", "style"];
5217
+ var _excluded$7 = ["children", "shouldHandleBottomNotch", "style"];
4863
5218
  var StyledViewWithPadding = /*#__PURE__*/styled(ContentPadding).withConfig({
4864
5219
  displayName: "Body__StyledViewWithPadding",
4865
5220
  componentId: "kitt-universal__sc-oc39vn-0"
@@ -4875,7 +5230,7 @@ function Body(_ref3) {
4875
5230
  var children = _ref3.children,
4876
5231
  shouldHandleBottomNotch = _ref3.shouldHandleBottomNotch,
4877
5232
  style = _ref3.style,
4878
- props = _objectWithoutProperties(_ref3, _excluded$5);
5233
+ props = _objectWithoutProperties(_ref3, _excluded$7);
4879
5234
 
4880
5235
  var _useSafeAreaInsets = useSafeAreaInsets(),
4881
5236
  bottom = _useSafeAreaInsets.bottom;
@@ -5029,7 +5384,7 @@ function Header(_ref12) {
5029
5384
  });
5030
5385
  }
5031
5386
 
5032
- var _excluded$4 = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
5387
+ var _excluded$6 = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
5033
5388
  var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_snip8j1";
5034
5389
  var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_s15204zx";
5035
5390
  var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_s13f3hlc";
@@ -5068,7 +5423,7 @@ function NavigationModalAnimation(_ref) {
5068
5423
  onExit = _ref.onExit,
5069
5424
  onExited = _ref.onExited,
5070
5425
  onClose = _ref.onClose,
5071
- props = _objectWithoutProperties(_ref, _excluded$4);
5426
+ props = _objectWithoutProperties(_ref, _excluded$6);
5072
5427
 
5073
5428
  var theme = /*#__PURE__*/useTheme();
5074
5429
  var animation = theme.kitt.navigationModal.animation;
@@ -5096,13 +5451,13 @@ function NavigationModalAnimation(_ref) {
5096
5451
  }));
5097
5452
  }
5098
5453
 
5099
- var _excluded$3 = ["children", "visible", "onClose", "onExited"];
5454
+ var _excluded$5 = ["children", "visible", "onClose", "onExited"];
5100
5455
  function NavigationModalBehaviour(_ref) {
5101
5456
  var children = _ref.children,
5102
5457
  visible = _ref.visible,
5103
5458
  onClose = _ref.onClose,
5104
5459
  onExited = _ref.onExited,
5105
- props = _objectWithoutProperties(_ref, _excluded$3);
5460
+ props = _objectWithoutProperties(_ref, _excluded$5);
5106
5461
 
5107
5462
  var _useState = useState(visible),
5108
5463
  _useState2 = _slicedToArray(_useState, 2),
@@ -5366,20 +5721,23 @@ function SkeletonContent(_ref4) {
5366
5721
  });
5367
5722
  }
5368
5723
 
5369
- var SkeletonContainer = /*#__PURE__*/styled(View$2).withConfig({
5370
- displayName: "Skeleton__SkeletonContainer",
5371
- componentId: "kitt-universal__sc-1w5cm3i-0"
5372
- })(["overflow:hidden;"]);
5724
+ var _excluded$4 = ["isLoading", "style"],
5725
+ _excluded2$1 = ["size"],
5726
+ _excluded3$1 = ["size"],
5727
+ _excluded4 = ["size"];
5373
5728
  function Skeleton(_ref) {
5374
- var isLoading = _ref.isLoading,
5375
- style = _ref.style;
5729
+ var _ref$isLoading = _ref.isLoading,
5730
+ isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
5731
+ style = _ref.style,
5732
+ props = _objectWithoutProperties(_ref, _excluded$4);
5376
5733
 
5377
5734
  var _useState = useState(0),
5378
5735
  _useState2 = _slicedToArray(_useState, 2),
5379
5736
  width = _useState2[0],
5380
5737
  setWidth = _useState2[1];
5381
5738
 
5382
- return /*#__PURE__*/jsx(SkeletonContainer, {
5739
+ return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
5740
+ overflow: "hidden",
5383
5741
  style: style,
5384
5742
  onLayout: function onLayout(_ref2) {
5385
5743
  var nativeEvent = _ref2.nativeEvent;
@@ -5389,48 +5747,310 @@ function Skeleton(_ref) {
5389
5747
  isLoading: isLoading,
5390
5748
  width: width
5391
5749
  })
5392
- });
5750
+ }));
5393
5751
  }
5394
- var Bar = /*#__PURE__*/styled(Skeleton).withConfig({
5395
- displayName: "Skeleton__Bar",
5396
- componentId: "kitt-universal__sc-1w5cm3i-1"
5397
- })(["width:100%;height:", "px;border-radius:", "px;"], function (_ref3) {
5398
- var theme = _ref3.theme;
5399
- return theme.kitt.spacing * 2;
5400
- }, function (_ref4) {
5401
- var theme = _ref4.theme;
5402
- return theme.kitt.spacing * 2;
5403
- });
5404
- var Circle = /*#__PURE__*/styled(Skeleton).withConfig({
5405
- displayName: "Skeleton__Circle",
5406
- componentId: "kitt-universal__sc-1w5cm3i-2"
5407
- })(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref5) {
5408
- var theme = _ref5.theme;
5409
- return theme.kitt.spacing * 12;
5410
- }, function (_ref6) {
5411
- var theme = _ref6.theme;
5412
- return theme.kitt.spacing * 12;
5413
- }, function (_ref7) {
5414
- var theme = _ref7.theme;
5415
- return theme.kitt.spacing * 6;
5416
- });
5417
- var Square = /*#__PURE__*/styled(Skeleton).withConfig({
5418
- displayName: "Skeleton__Square",
5419
- componentId: "kitt-universal__sc-1w5cm3i-3"
5420
- })(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref8) {
5421
- var theme = _ref8.theme;
5422
- return theme.kitt.spacing * 12;
5423
- }, function (_ref9) {
5424
- var theme = _ref9.theme;
5425
- return theme.kitt.spacing * 12;
5426
- }, function (_ref10) {
5427
- var theme = _ref10.theme;
5428
- return theme.kitt.spacing * 1.5;
5429
- });
5752
+
5753
+ function Bar(_ref3) {
5754
+ var size = _ref3.size,
5755
+ props = _objectWithoutProperties(_ref3, _excluded2$1);
5756
+
5757
+ var currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.bar.borderRadius';
5758
+ return /*#__PURE__*/jsx(Skeleton, _objectSpread(_objectSpread({}, props), {}, {
5759
+ width: "100%",
5760
+ height: size || 'kitt.skeleton.shape.bar.size',
5761
+ borderRadius: currentBorderRadius
5762
+ }));
5763
+ }
5764
+
5765
+ function Circle(_ref4) {
5766
+ var size = _ref4.size,
5767
+ props = _objectWithoutProperties(_ref4, _excluded3$1);
5768
+
5769
+ var currentSize = size || 'kitt.skeleton.shape.circle.size';
5770
+ var currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.circle.borderRadius';
5771
+ return /*#__PURE__*/jsx(Skeleton, _objectSpread(_objectSpread({}, props), {}, {
5772
+ width: currentSize,
5773
+ height: currentSize,
5774
+ borderRadius: currentBorderRadius
5775
+ }));
5776
+ }
5777
+
5778
+ function Square(_ref5) {
5779
+ var size = _ref5.size,
5780
+ props = _objectWithoutProperties(_ref5, _excluded4);
5781
+
5782
+ var currentSize = size || 'kitt.skeleton.shape.square.size';
5783
+ var currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.square.borderRadius';
5784
+ return /*#__PURE__*/jsx(Skeleton, _objectSpread(_objectSpread({}, props), {}, {
5785
+ width: currentSize,
5786
+ height: currentSize,
5787
+ borderRadius: currentBorderRadius
5788
+ }));
5789
+ }
5790
+
5430
5791
  Skeleton.Bar = Bar;
5431
5792
  Skeleton.Circle = Circle;
5432
5793
  Skeleton.Square = Square;
5433
5794
 
5795
+ function getStaticMapImageUrl(_ref) {
5796
+ var mapId = _ref.mapId,
5797
+ apiToken = _ref.apiToken,
5798
+ mapWidth = _ref.mapWidth,
5799
+ mapHeight = _ref.mapHeight,
5800
+ center = _ref.center,
5801
+ is2x = _ref.is2x;
5802
+ var width = Math.round(mapWidth);
5803
+ var height = Math.round(mapHeight);
5804
+ var centerPart = "".concat(center["long"], ",").concat(center.lat, ",").concat(center.zoom, "/");
5805
+ var sizePart = "".concat(width, "x").concat(height);
5806
+ var urlParts = ["https://api.mapbox.com/styles/v1/ornikar/".concat(mapId, "/static/"), centerPart, sizePart, is2x ? '@2x' : ''];
5807
+ var mapImageUrl = new URL(urlParts.join(''));
5808
+ mapImageUrl.searchParams.append('access_token', apiToken);
5809
+ return mapImageUrl.toString();
5810
+ }
5811
+
5812
+ function useGetStaticMapImageUrl(_ref) {
5813
+ var forceMapId = _ref.forceMapId,
5814
+ forceApiToken = _ref.forceApiToken,
5815
+ mapWidth = _ref.mapWidth,
5816
+ mapHeight = _ref.mapHeight,
5817
+ center = _ref.center,
5818
+ is2x = _ref.is2x;
5819
+
5820
+ var _useKittMapConfig = useKittMapConfig(),
5821
+ mapId = _useKittMapConfig.mapId,
5822
+ apiToken = _useKittMapConfig.apiToken;
5823
+
5824
+ var _useState = useState(''),
5825
+ _useState2 = _slicedToArray(_useState, 2),
5826
+ currentUrl = _useState2[0],
5827
+ setCurrentUrl = _useState2[1];
5828
+
5829
+ var currentMapIdRef = useRef(forceMapId || mapId);
5830
+ var currentApiTokenRef = useRef(forceApiToken || apiToken);
5831
+ useEffect(function () {
5832
+ var newUrl = getStaticMapImageUrl({
5833
+ center: center,
5834
+ is2x: is2x,
5835
+ mapHeight: mapHeight,
5836
+ mapWidth: mapWidth,
5837
+ mapId: currentMapIdRef.current,
5838
+ apiToken: currentApiTokenRef.current
5839
+ });
5840
+ setCurrentUrl(newUrl);
5841
+ }, [mapHeight, mapWidth, center, is2x]);
5842
+ return currentUrl;
5843
+ }
5844
+
5845
+ function StaticMapError(_ref) {
5846
+ var onReload = _ref.onReload;
5847
+ return /*#__PURE__*/jsx(View, {
5848
+ alignItems: "center",
5849
+ justifyContent: "center",
5850
+ height: "100%",
5851
+ backgroundColor: "kitt.separator",
5852
+ children: /*#__PURE__*/jsx(IconButton, {
5853
+ icon: /*#__PURE__*/jsx(RotateCCWIcon, {}),
5854
+ onPress: onReload
5855
+ })
5856
+ });
5857
+ }
5858
+
5859
+ function StaticMapImage(_ref) {
5860
+ var url = _ref.url,
5861
+ alt = _ref.alt,
5862
+ width = _ref.width,
5863
+ height = _ref.height,
5864
+ onLoadEnd = _ref.onLoadEnd,
5865
+ onError = _ref.onError;
5866
+ return /*#__PURE__*/jsx(Image, {
5867
+ source: {
5868
+ uri: url
5869
+ },
5870
+ width: width,
5871
+ height: height,
5872
+ alt: alt,
5873
+ onError: onError,
5874
+ onLoadEnd: onLoadEnd
5875
+ });
5876
+ }
5877
+
5878
+ function StaticMapLoader() {
5879
+ return /*#__PURE__*/jsx(View, {
5880
+ alignItems: "center",
5881
+ justifyContent: "center",
5882
+ height: "100%",
5883
+ children: /*#__PURE__*/jsx(Skeleton, {
5884
+ isLoading: true,
5885
+ width: "100%",
5886
+ height: "100%"
5887
+ })
5888
+ });
5889
+ }
5890
+
5891
+ function getMarkerPosition(variant) {
5892
+ if (variant === 'position') return [{
5893
+ translateX: -2
5894
+ }, {
5895
+ translateY: 8
5896
+ }];
5897
+ if (variant === 'large') return [{
5898
+ translateX: 8
5899
+ }, {
5900
+ translateY: -20
5901
+ }];
5902
+ return [{
5903
+ translateX: 6
5904
+ }, {
5905
+ translateY: -15
5906
+ }];
5907
+ }
5908
+
5909
+ function StaticMapMarker(_ref) {
5910
+ var _ref$variant = _ref.variant,
5911
+ variant = _ref$variant === void 0 ? 'simple' : _ref$variant;
5912
+ return /*#__PURE__*/jsx(View, {
5913
+ position: "absolute",
5914
+ top: "0",
5915
+ left: "0",
5916
+ width: "100%",
5917
+ height: "100%",
5918
+ children: /*#__PURE__*/jsxs(View, {
5919
+ justifyContent: "center",
5920
+ alignItems: "center",
5921
+ height: "100%",
5922
+ style: {
5923
+ transform: getMarkerPosition(variant)
5924
+ },
5925
+ children: [variant === 'position' ? /*#__PURE__*/jsx(MapMarkerPosition, {}) : null, variant === 'large' ? /*#__PURE__*/jsx(MapMarkerLarge, {}) : null, variant === 'simple' ? /*#__PURE__*/jsx(MapMarkerSimple, {}) : null]
5926
+ })
5927
+ });
5928
+ }
5929
+
5930
+ function getRangedWidthValue(nextWidth, maxValue) {
5931
+ var rangedMapWidth = Math.max(1, Math.min(nextWidth, maxValue));
5932
+ return rangedMapWidth;
5933
+ }
5934
+
5935
+ function getShouldDisplay2x() {
5936
+ if (typeof window === 'undefined') {
5937
+ return true;
5938
+ } // requesting retina picture is up to the device capabilities;
5939
+
5940
+
5941
+ return window.devicePixelRatio ? window.devicePixelRatio > 1 : false;
5942
+ }
5943
+
5944
+ var _excluded$3 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
5945
+ var mapBoxMaxPictureWidth = 1280; // Mapbox requestable width for image is between 1 - 1280px
5946
+
5947
+ function getPictureWidth(nextWidth) {
5948
+ return getRangedWidthValue(nextWidth, mapBoxMaxPictureWidth);
5949
+ }
5950
+
5951
+ function StaticMap(_ref) {
5952
+ var _ref$width = _ref.width,
5953
+ width = _ref$width === void 0 ? 0 : _ref$width,
5954
+ height = _ref.height,
5955
+ alt = _ref.alt,
5956
+ apiToken = _ref.apiToken,
5957
+ mapId = _ref.mapId,
5958
+ marker = _ref.marker,
5959
+ center = _ref.center,
5960
+ onLoaded = _ref.onLoaded,
5961
+ onError = _ref.onError,
5962
+ props = _objectWithoutProperties(_ref, _excluded$3);
5963
+
5964
+ var _useState = useState(getPictureWidth(width)),
5965
+ _useState2 = _slicedToArray(_useState, 2),
5966
+ currentWidth = _useState2[0],
5967
+ setCurrentWidth = _useState2[1];
5968
+
5969
+ var _useState3 = useState(true),
5970
+ _useState4 = _slicedToArray(_useState3, 2),
5971
+ isLoading = _useState4[0],
5972
+ setIsLoading = _useState4[1];
5973
+
5974
+ var _useState5 = useState(false),
5975
+ _useState6 = _slicedToArray(_useState5, 2),
5976
+ hasError = _useState6[0],
5977
+ setHasError = _useState6[1];
5978
+
5979
+ var _useState7 = useState(0),
5980
+ _useState8 = _slicedToArray(_useState7, 2),
5981
+ currentMapKey = _useState8[0],
5982
+ setCurrentMapKey = _useState8[1];
5983
+
5984
+ var shouldDisplay2xImage = getShouldDisplay2x();
5985
+ var mapUrl = useGetStaticMapImageUrl({
5986
+ forceApiToken: apiToken,
5987
+ forceMapId: mapId,
5988
+ mapWidth: currentWidth,
5989
+ mapHeight: height,
5990
+ center: center,
5991
+ is2x: shouldDisplay2xImage
5992
+ });
5993
+ return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
5994
+ position: "relative",
5995
+ maxWidth: mapBoxMaxPictureWidth,
5996
+ height: height,
5997
+ onLayout: function handleParentLayout(event) {
5998
+ var nativeEvent = event.nativeEvent;
5999
+ var rangedMapWidth = getPictureWidth(nativeEvent.layout.width);
6000
+ setCurrentWidth(rangedMapWidth);
6001
+ }
6002
+ }, props), {}, {
6003
+ "data-chromatic": process.env.KITT_MAP_CHROMATIC_IGNORE === 'true' ? 'ignore' : undefined,
6004
+ children: [currentWidth > 1 && mapUrl ? /*#__PURE__*/jsx(StaticMapImage, {
6005
+ url: mapUrl,
6006
+ width: currentWidth,
6007
+ height: height,
6008
+ alt: alt,
6009
+ onLoadEnd: function handleImageLoadEnd() {
6010
+ setIsLoading(false);
6011
+ if (onLoaded) onLoaded();
6012
+ },
6013
+ onError: function handleError() {
6014
+ setHasError(true);
6015
+ if (onError) onError();
6016
+ }
6017
+ }, "map-key-".concat(currentMapKey)) : null, marker && !isLoading && !hasError ? /*#__PURE__*/jsx(View, {
6018
+ position: "absolute",
6019
+ top: "0",
6020
+ left: "0",
6021
+ width: "100%",
6022
+ height: "100%",
6023
+ children: marker
6024
+ }) : null, isLoading ? /*#__PURE__*/jsx(View, {
6025
+ position: "absolute",
6026
+ top: "0",
6027
+ left: "0",
6028
+ width: "100%",
6029
+ height: "100%",
6030
+ children: /*#__PURE__*/jsx(StaticMapLoader, {})
6031
+ }) : null, hasError ? /*#__PURE__*/jsx(View, {
6032
+ position: "absolute",
6033
+ top: "0",
6034
+ left: "0",
6035
+ width: "100%",
6036
+ height: "100%",
6037
+ children: /*#__PURE__*/jsx(StaticMapError, {
6038
+ onReload: function handleReload() {
6039
+ setHasError(false);
6040
+ setIsLoading(true);
6041
+ setCurrentMapKey(function (prev) {
6042
+ return prev + 1;
6043
+ });
6044
+ }
6045
+ })
6046
+ }) : null]
6047
+ }));
6048
+ }
6049
+ StaticMap.Image = StaticMapImage;
6050
+ StaticMap.Loader = StaticMapLoader;
6051
+ StaticMap.Error = StaticMapError;
6052
+ StaticMap.Marker = StaticMapMarker;
6053
+
5434
6054
  var Flex = /*#__PURE__*/styled(View$2).withConfig({
5435
6055
  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
5436
6056
  return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
@@ -5768,7 +6388,7 @@ function StoryGridCol(_ref2) {
5768
6388
  return null;
5769
6389
  }
5770
6390
 
5771
- return /*#__PURE__*/jsxs(Fragment$1, {
6391
+ return /*#__PURE__*/jsxs(Fragment, {
5772
6392
  children: [title ? /*#__PURE__*/jsx(StoryTitle.Level4, {
5773
6393
  numberOfLines: 1,
5774
6394
  color: titleColor,
@@ -6311,5 +6931,5 @@ function useCurrentBreakpointName() {
6311
6931
  });
6312
6932
  }
6313
6933
 
6314
- 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 };
6934
+ 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 };
6315
6935
  //# sourceMappingURL=index-browser-all.es.web.js.map