@ornikar/kitt-universal 3.0.0 → 3.0.1

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

@@ -11,7 +11,6 @@ const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const Animated = require('react-native-reanimated');
-const react$1 = require('@linaria/react');
 const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
 const reactNative$1 = require('@floating-ui/react-native');
@@ -630,7 +629,7 @@ function Emoji({
 }) {
   const [emojiData] = react.useMemo(() => twemojiParser.parse(emoji, {
     // on native plaforms, you can't display svg as Image
-    assetType: 'svg'
+    assetType: reactNative.Platform.OS === 'web' ? 'svg' : 'png'
   }), [emoji]);
   if (!emojiData) return null;
   return /*#__PURE__*/jsxRuntime.jsx(StyledEmoji, {
@@ -787,11 +786,11 @@ const Input = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
 })(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
   theme,
   multiline
-}) => !multiline && "web" === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
+}) => !multiline && reactNative.Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
   theme,
   multiline
 }) => {
-  if (!multiline && "web" === 'ios') return 0;
+  if (!multiline && reactNative.Platform.OS === 'ios') return 0;
   const typeConfigKey = getTypographyTypeConfigKey(theme);
   return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
 }, ({
@@ -912,10 +911,10 @@ function Label({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
     base: "body",
-    children: /*#__PURE__*/jsxRuntime.jsx("label", {
+    children: reactNative.Platform.OS === 'web' ? /*#__PURE__*/jsxRuntime.jsx("label", {
       htmlFor: htmlFor,
       children: children
-    })
+    }) : children
   });
 }
 
@@ -1129,7 +1128,7 @@ function FullScreenModalHeader({
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(Header, {
-    insetTop: top,
+    insetTop: reactNative.Platform.OS === 'ios' ? undefined : top,
     children: [left ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
       onLayout: e => handleLayoutChange(e, 'left'),
       children: left
@@ -1167,6 +1166,7 @@ function StyleWebWrapper({
   children,
   ...props
 }) {
+  if (reactNative.Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
   return /*#__PURE__*/jsxRuntime.jsx(as || 'div', { ...props,
     children: children
@@ -1194,7 +1194,7 @@ WrappedComponent) {
   };
 }
 
-const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
+const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styledLinaria("div")({
   name: "PressableIconButtonWebWrapper",
   class: "p1nlccvg",
   vars: {
@@ -1234,6 +1234,11 @@ const StyledPressableIconButton = /*#__PURE__*/styled__default.Pressable.withCon
   const {
     iconButton
   } = theme.kitt;
+
+  if (reactNative.Platform.OS !== 'web') {
+    return undefined;
+  }
+
   const {
     transition
   } = iconButton;
@@ -1546,6 +1551,7 @@ ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
 function getActivityIndicatorSize(size) {
+  if (reactNative.Platform.OS === 'android') return size;
   return size < 36 ? 'small' : 'large';
 }
 
@@ -2172,7 +2178,13 @@ function StoryGridCol({
   children,
   platform = 'all'
 }) {
-  if (platform === 'native') {
+  const isNative = reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android';
+
+  if (reactNative.Platform.OS === 'web' && platform === 'native') {
+    return null;
+  }
+
+  if (isNative && platform === 'web') {
     return null;
   }
 
@@ -2578,8 +2590,8 @@ const typographyLateOceanTheme = {
   types: {
     headers: {
       fontFamily: {
-        regular: 'Moderat',
-        bold: 'Moderat'
+        regular: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
       },
       fontWeight: 400,
       fontStyle: 'normal',
@@ -2598,8 +2610,8 @@ const typographyLateOceanTheme = {
     },
     bodies: {
       fontFamily: {
-        regular: 'Noto Sans',
-        bold: 'Noto Sans'
+        regular: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
+        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
       },
       fontWeight: {
         regular: 400,
@@ -2703,7 +2715,7 @@ function ModalDateTimePicker({
           testID: "date-picker-native-element",
           value: currentValue,
           mode: "time",
-          display: 'default',
+          display: reactNative.Platform.OS === 'ios' ? 'spinner' : 'default',
           onChange: (_event, date) => setCurrentValue(prev => {
             return date || prev;
           })
@@ -2792,14 +2804,21 @@ function TimePicker({
       base: "body",
       color: displayedValue === timePickerPlaceholder ? 'black-light' : 'black',
       children: displayedValue
-    }), null, /*#__PURE__*/jsxRuntime.jsx(ModalDateTimePicker, {
+    }), reactNative.Platform.OS === 'android' && isTimePickerModalVisible ? /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
+      is24Hour: true,
+      testID: "date-picker-native-element",
+      value: dateTimePickerValue,
+      mode: "time",
+      display: "default",
+      onChange: (_event, date) => handleTimeChange(date)
+    }) : null, reactNative.Platform.OS !== 'android' ? /*#__PURE__*/jsxRuntime.jsx(ModalDateTimePicker, {
       title: title,
       visible: isTimePickerModalVisible,
       value: dateTimePickerValue,
       validateButtonLabel: validateButtonLabel,
       onChange: handleTimeChange,
       onClose: handleModalClose
-    })]
+    }) : null]
   });
 }
 
@@ -2985,7 +3004,9 @@ const StyledTypographyEmoji = /*#__PURE__*/styled__default(Emoji).withConfig({
 })(["align-self:center;", ""], ({
   size
 }) => {
+  if (reactNative.Platform.OS !== 'web') return undefined;
   /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+
   return `
       margin: 0 ${size / 20}px 0 ${size / 10}px;
       transform: translateY(${size / 10 * 2}px);
@@ -3016,7 +3037,7 @@ function TypographyEmoji({
   });
 }
 
-const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react$1.styled("span")({
+const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styledLinaria("span")({
   name: "TypographyLinkWebWrapper",
   class: "tcwz3nt"
 }));
@@ -3028,6 +3049,7 @@ const StyledLink = /*#__PURE__*/styled__default.Text.withConfig({
 }) => $noUnderline ? 'none' : 'underline', ({
   $disabled
 }) => {
+  if (reactNative.Platform.OS !== 'web') return undefined;
   return `
       text-decoration-color: inherit;
       transition: color 0.2s ease-in-out;