@ornikar/kitt-universal 9.46.2 → 9.47.1

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext, createContext, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
-import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useSx, Text, Input, NativeBaseProvider, extendTheme, useBreakpointValue } from 'native-base';
-export { useBreakpointValue, useClipboard, useSx, useToken } from 'native-base';
+import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useSx, Text, Input, NativeBaseProvider, extendTheme, useMediaQuery, useBreakpointValue } from 'native-base';
+export { useBreakpointValue, useClipboard, useMediaQuery, useSx, useToken } from 'native-base';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
@@ -4636,7 +4636,7 @@ ListItem.SideContainer = ListItemSideContainer;
 
 var SvgMarkerLargeinline = function SvgMarkerLargeinline(props) {
   return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
-    fill: "none",
+    fill: "currentColor",
     viewBox: "0 0 54 56",
     width: 54,
     xmlns: "http://www.w3.org/2000/svg"
@@ -4708,7 +4708,7 @@ var SvgMarkerLargeinline = function SvgMarkerLargeinline(props) {
 var SvgMarkerinline = function SvgMarkerinline(props) {
   return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
     viewBox: "0 0 40 39",
-    fill: "none",
+    fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {}, {
     children: [/*#__PURE__*/jsx("path", {
@@ -4832,20 +4832,34 @@ function MapMarkerSimple(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? 40 : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 39 : _ref$height;
+    height = _ref$height === void 0 ? 39 : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? lateOceanColorPalette.lateOcean : _ref$color;
+  var sx = useSx();
+  var styles = sx({
+    color: color
+  });
   return /*#__PURE__*/jsx(SvgMarkerinline, {
     width: width,
-    height: height
+    height: height,
+    color: styles.color
   });
 }
 function MapMarkerLarge(_ref2) {
   var _ref2$width = _ref2.width,
     width = _ref2$width === void 0 ? 54 : _ref2$width,
     _ref2$height = _ref2.height,
-    height = _ref2$height === void 0 ? 56 : _ref2$height;
+    height = _ref2$height === void 0 ? 56 : _ref2$height,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? lateOceanColorPalette.lateOcean : _ref2$color;
+  var sx = useSx();
+  var styles = sx({
+    color: color
+  });
   return /*#__PURE__*/jsx(SvgMarkerLargeinline, {
     width: width,
-    height: height
+    height: height,
+    color: styles.color
   });
 }
 function MapMarkerPosition(_ref3) {
@@ -7510,8 +7524,13 @@ var picker = {
       fontFamily: typography.types.bodies.fontFamily["native"].regular
     }, typography.types.bodies.configs.body.baseAndSmall), {}, {
       fontSize: 16,
-      color: typography.colors['black-light']
+      color: typography.colors['black-light'],
+      // Default height is hard coded in module because of iOS constraint (https://github.com/react-native-picker/picker/blob/abd5f9076baa3ef2277ea7e711fa5823683c110e/js/PickerIOS.ios.js#L156)
+      height: 216
     }),
+    landscape: {
+      height: 108
+    },
     selected: {
       color: typography.colors.primary
     }
@@ -7789,6 +7808,12 @@ function Picker(_ref) {
     testID = _ref.testID,
     onValueSelected = _ref.onValueSelected,
     onClose = _ref.onClose;
+  // Max height is based on base Modal sizes (which are not themified): padding (4*20*2) + footer (58) + header (58) + default iOS picker height (216)
+  var _useMediaQuery = useMediaQuery({
+      maxHeight: 492
+    }),
+    _useMediaQuery2 = _slicedToArray(_useMediaQuery, 1),
+    isMatchingMaxHeight = _useMediaQuery2[0];
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -7804,8 +7829,13 @@ function Picker(_ref) {
       })
     }), Platform.OS === 'ios' ? /*#__PURE__*/jsx(Picker$1, {
       testID: testID,
-      selectedValue: value,
-      itemStyle: theme.picker.ios["default"],
+      selectedValue: value
+      // As it is displayed in a modal, we must hard code an height to ensure that the picker doesn't bleed out of it
+      // We can't set a percentage as it will be computed based on the page height
+      ,
+      itemStyle: _objectSpread(_objectSpread({}, theme.picker.ios["default"]), {}, {
+        height: isMatchingMaxHeight ? theme.picker.ios.landscape.height : theme.picker.ios["default"].height
+      }),
       onValueChange: function onValueChange(itemValue) {
         return setValue(itemValue);
       },