@ornikar/kitt-universal 2.3.0 → 2.4.0

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

@@ -2,11 +2,12 @@ import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { UserIcon, EyeIcon, EyeOffIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import React, { useRef, useEffect, useContext, createContext, useState, forwardRef, Fragment, useMemo } from 'react';
-import { View, Animated, Easing, Text as Text$1, Image, Pressable, Linking, TextInput, Platform, useWindowDimensions, ActivityIndicator, TouchableOpacity, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
+import React, { useRef, useEffect, useContext, createContext, useState, useMemo, forwardRef, Fragment } from 'react';
+import { View, Animated, Easing, Text as Text$1, Image, Pressable, Platform, Linking, TextInput, useWindowDimensions, ActivityIndicator, TouchableOpacity, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
 import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
 import Animated$1, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
@@ -544,6 +545,45 @@ function Card(_ref6) {
   }, children);
 }
 
+var PrimitiveImage = Image;
+
+var StyledEmoji = /*#__PURE__*/styled(PrimitiveImage).withConfig({
+  displayName: "Emoji__StyledEmoji",
+  componentId: "kitt-universal__sc-ggl6wj-0"
+})(["width:", "px;height:", "px;"], function (_ref) {
+  var size = _ref.size;
+  return size;
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size;
+});
+function Emoji(_ref3) {
+  var emoji = _ref3.emoji,
+      size = _ref3.size,
+      style = _ref3.style,
+      className = _ref3.className;
+
+  var _useMemo = useMemo(function () {
+    return parse(emoji, {
+      // on native plaforms, you can't display svg as Image
+      assetType: Platform.OS === 'web' ? 'svg' : 'png'
+    });
+  }, [emoji]),
+      _useMemo2 = _slicedToArray(_useMemo, 1),
+      emojiData = _useMemo2[0];
+
+  if (!emojiData) return null;
+  return /*#__PURE__*/React.createElement(StyledEmoji, {
+    size: size,
+    accessibilityLabel: emojiData.text,
+    source: {
+      uri: emojiData.url
+    },
+    style: style,
+    className: className
+  });
+}
+
 var defaultOpenLinkBehavior = {
   "native": 'openInModal',
   web: 'targetBlank'
@@ -2555,6 +2595,46 @@ function Tooltip(_ref) {
   return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
 }
 
+var isBody = function (value) {
+  return ['body-large', 'body-medium', 'body', 'body-small', 'body-xsmall'].includes(value);
+};
+
+function getDimensions(base, theme) {
+  if (isBody(base)) {
+    return theme.kitt.typography.types.bodies.configs[base];
+  }
+
+  return theme.kitt.typography.types.headers.configs[base];
+}
+
+var StyledTypographyEmoji = /*#__PURE__*/styled(Emoji).withConfig({
+  displayName: "TypographyEmoji__StyledTypographyEmoji",
+  componentId: "kitt-universal__sc-1if5guu-0"
+})(["align-self:center;", ""], function (_ref) {
+  var size = _ref.size;
+  if (Platform.OS !== 'web') return undefined;
+  /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+
+  return "\n      margin: 0 ".concat(size / 20, "px 0 ").concat(size / 10, "px;\n      transform: translateY(").concat(size / 10 * 2, "px);\n    ");
+});
+function TypographyEmoji(_ref2) {
+  var emoji = _ref2.emoji,
+      _ref2$base = _ref2.base,
+      base = _ref2$base === void 0 ? 'body' : _ref2$base;
+  var theme = /*#__PURE__*/useTheme();
+  var dimensions = getDimensions(base, theme);
+  var fontSize = dimensions.baseAndSmall.fontSize;
+
+  if ((process.env.NODE_ENV !== "production")) {
+    if (!fontSize.endsWith('px')) throw new Error("Unexpected font-size value: ".concat(fontSize));
+  }
+
+  return /*#__PURE__*/React.createElement(StyledTypographyEmoji, {
+    size: parseInt(fontSize.slice(0, -2), 10),
+    emoji: emoji
+  });
+}
+
 var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
 var StyledLink = /*#__PURE__*/styled(PrimitiveLink).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2696,5 +2776,5 @@ function MatchWindowSize(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }
 
-export { Avatar, Button, Card, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, PrimitiveLink, PrimitivePressable, PrimitiveScrollView, PrimitiveText, PrimitiveView, Radio, SafeAreaProviderDecorator, DeprecatedSection as Section, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, Tag, TextArea, Tooltip, Typography, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor };
+export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, PrimitiveImage, PrimitiveLink, PrimitivePressable, PrimitiveScrollView, PrimitiveText, PrimitiveView, Radio, SafeAreaProviderDecorator, DeprecatedSection as Section, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, Tag, TextArea, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor };
 //# sourceMappingURL=index-browser-all.es.js.map