@ornikar/kitt-universal 2.1.1 → 2.5.0

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

@@ -3,11 +3,13 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 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, TextInput, 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, 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';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -46,8 +48,8 @@ function SpinningIcon(_ref) {
   }, children);
 }
 
-var _templateObject$u;
-var IconContainer$2 = styled(PrimitiveView)(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-self: ", ";\n"])), function (_ref) {
+var _templateObject$w;
+var IconContainer$2 = styled(PrimitiveView)(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-self: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return color;
 }, function (_ref2) {
@@ -80,15 +82,15 @@ function Icon(_ref5) {
 
 var PrimitiveText = Text$1;
 
-var _excluded$9 = ["accessibilityRole", "base", "variant", "color"];
+var _excluded$a = ["accessibilityRole", "base", "variant", "color"];
 
-var _templateObject$t;
+var _templateObject$v;
 var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-var StyledTypography = styled(PrimitiveText)(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  /* font */\n  ", "\n\n  /* color */\n  ", "\n"])), function (_ref) {
+var StyledTypography = styled(PrimitiveText)(_templateObject$v || (_templateObject$v = _taggedTemplateLiteral(["\n  /* font */\n  ", "\n\n  /* color */\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       isHeader = _ref.isHeader,
       type = _ref.type,
@@ -118,7 +120,7 @@ function Typography(_ref3) {
       base = _ref3.base,
       variant = _ref3.variant,
       color = _ref3.color,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$9);
+      otherProps = _objectWithoutProperties(_ref3, _excluded$a);
 
   var typeInContext = useContext(TypographyTypeContext);
   var isHeader = isTypographyHeader(base, typeInContext);
@@ -197,9 +199,9 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$8 = ["size"];
+var _excluded$9 = ["size"];
 
-var _templateObject$s;
+var _templateObject$u;
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -209,7 +211,7 @@ var getInitials = function (firstname, lastname) {
   return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 };
 
-var StyledAvatarView = styled(PrimitiveView)(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  height: ", "px;\n  width: ", "px;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var StyledAvatarView = styled(PrimitiveView)(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  height: ", "px;\n  width: ", "px;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var round = _ref.round,
       size = _ref.size;
   return round ? size / 2 : 10;
@@ -263,7 +265,7 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      rest = _objectWithoutProperties(_ref6, _excluded$8);
+      rest = _objectWithoutProperties(_ref6, _excluded$9);
 
   return /*#__PURE__*/React.createElement(StyledAvatarView, _extends({}, rest, {
     size: size
@@ -272,50 +274,7 @@ function Avatar(_ref6) {
   })));
 }
 
-var PrimitivePressable = Pressable;
-
-var _templateObject$r;
-var ButtonContainer = styled(PrimitivePressable)(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  min-width: ", ";\n  max-width: ", ";\n  width: ", ";\n  min-height: ", ";\n  background-color: ", ";\n  padding: ", ";\n  flex-direction: row;\n\n  /* Emulate inline-* css display by making the button taking only its necessary space */\n  align-self: flex-start;\n  border-radius: ", ";\n  border-color: ", ";\n  border-width: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.button.minWidth;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      stretch = _ref2.stretch;
-  return stretch ? 'auto' : theme.kitt.button.maxWidth;
-}, function (_ref3) {
-  var stretch = _ref3.stretch;
-  return stretch ? '100%' : 'auto';
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.button.minHeight;
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      isPressed = _ref5.isPressed,
-      disabled = _ref5.disabled,
-      type = _ref5.type;
-
-  if (disabled) {
-    return theme.kitt.button[type].disabledBackgroundColor;
-  }
-
-  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.kitt.button.contentPadding["default"];
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.kitt.button.borderRadius;
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      disabled = _ref8.disabled,
-      type = _ref8.type;
-  return disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent';
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.kitt.button.borderWidth;
-});
-
-var _excluded$7 = ["color"],
+var _excluded$8 = ["color"],
     _excluded2$2 = ["color"];
 
 function TypographyIconInheritColor(props) {
@@ -328,7 +287,7 @@ function TypographyIconInheritColor(props) {
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$7);
+      otherProps = _objectWithoutProperties(_ref, _excluded$8);
 
   var theme = useTheme();
   return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
@@ -349,7 +308,7 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/React.createElement(TypographyIconInheritColor, otherProps);
 }
 
-var _templateObject$q, _templateObject2$c, _templateObject3$8;
+var _templateObject$t, _templateObject2$c, _templateObject3$8;
 
 var getTextColorByType = function (type, isPressed, disabled) {
   if (disabled) return 'black-light';
@@ -370,7 +329,7 @@ var getTextColorByType = function (type, isPressed, disabled) {
   }
 };
 
-var ButtonText = styled(Typography.Text)(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  /* On native code, this is the only way to ensure that the text is centered */\n  text-align: center;\n"])));
+var ButtonText = styled(Typography.Text)(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  /* On native code, this is the only way to ensure that the text is centered */\n  text-align: center;\n"])));
 var Content$1 = styled(PrimitiveView)(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n\n  /*\n    On native code flex grow does not work as expected which cause an issue with the flex props.\n    In order to occupy only the needed space, we enable flex grow only when stretched\n  */\n  flex: ", ";\n"])), function (_ref) {
   var stretch = _ref.stretch,
       iconOnly = _ref.iconOnly;
@@ -454,22 +413,48 @@ function ButtonContent(_ref4) {
   })) : null);
 }
 
-var useButton = function () {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isPressed = _useState2[0],
-      setIsPressed = _useState2[1];
+var PrimitivePressable = Pressable;
 
-  return {
-    isPressed: isPressed,
-    handleButtonPressIn: function handleButtonPressIn() {
-      return setIsPressed(true);
-    },
-    handleButtonPressOut: function handleButtonPressOut() {
-      return setIsPressed(false);
-    }
-  };
-};
+var _templateObject$s;
+var ButtonPressable = styled(PrimitivePressable)(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n  min-width: ", ";\n  max-width: ", ";\n  width: ", ";\n  min-height: ", ";\n  background-color: ", ";\n  padding: ", ";\n  flex-direction: row;\n\n  /* Emulate inline-* css display by making the button taking only its necessary space */\n  align-self: flex-start;\n  border-radius: ", ";\n  border-color: ", ";\n  border-width: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.button.minWidth;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      stretch = _ref2.stretch;
+  return stretch ? 'auto' : theme.kitt.button.maxWidth;
+}, function (_ref3) {
+  var stretch = _ref3.stretch;
+  return stretch ? '100%' : 'auto';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.button.minHeight;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      isPressed = _ref5.isPressed,
+      disabled = _ref5.disabled,
+      type = _ref5.type;
+
+  if (disabled) {
+    return theme.kitt.button[type].disabledBackgroundColor;
+  }
+
+  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.kitt.button.contentPadding["default"];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.button.borderRadius;
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      disabled = _ref8.disabled,
+      type = _ref8.type;
+  return disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent';
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.button.borderWidth;
+});
 
 function Button(_ref) {
   var children = _ref.children,
@@ -481,29 +466,37 @@ function Button(_ref) {
       iconSpin = _ref.iconSpin,
       stretch = _ref.stretch,
       disabled = _ref.disabled,
-      onPress = _ref.onPress,
-      testID = _ref.testID;
+      testID = _ref.testID,
+      href = _ref.href,
+      hrefAttrs = _ref.hrefAttrs,
+      onPress = _ref.onPress;
 
-  var _useButton = useButton(),
-      isPressed = _useButton.isPressed,
-      handleButtonPressIn = _useButton.handleButtonPressIn,
-      handleButtonPressOut = _useButton.handleButtonPressOut;
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPressed = _useState2[0],
+      setIsPressed = _useState2[1];
 
   var sharedProps = {
     type: type,
     stretch: stretch,
     disabled: disabled
   };
-  return /*#__PURE__*/React.createElement(ButtonContainer // eslint-disable-next-line unicorn/expiring-todo-comments
+  return /*#__PURE__*/React.createElement(ButtonPressable // eslint-disable-next-line unicorn/expiring-todo-comments
   // TODO: When designs are defined, update with the proper onPress styles to mimic TouchableHighlight
   // underlayColor={globalTheme.button[type].pressedBackgroundColor}
   , _extends({}, sharedProps, {
     isPressed: isPressed,
     accessibilityRole: "button",
     testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
     onPress: onPress,
-    onPressIn: handleButtonPressIn,
-    onPressOut: handleButtonPressOut
+    onPressIn: function handleButtonPressIn() {
+      return setIsPressed(true);
+    },
+    onPressOut: function handleButtonPressOut() {
+      return setIsPressed(false);
+    }
   }), /*#__PURE__*/React.createElement(ButtonContent, _extends({}, sharedProps, {
     icon: icon,
     iconPosition: iconPosition,
@@ -511,8 +504,8 @@ function Button(_ref) {
   }), children));
 }
 
-var _templateObject$p;
-var Container$5 = styled(PrimitiveView)(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+var _templateObject$r;
+var Container$5 = styled(PrimitiveView)(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme,
       type = _ref.type;
   return theme.kitt.card[type].backgroundColor;
@@ -538,6 +531,86 @@ function Card(_ref6) {
   }, children);
 }
 
+var PrimitiveImage = Image;
+
+var _templateObject$q;
+var StyledEmoji = styled(PrimitiveImage)(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n"])), 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: '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'
+};
+
+var _excluded$7 = ["as", "href", "openLinkBehavior", "onPress"];
+function ExternalLink(_ref) {
+  var Component = _ref.as,
+      href = _ref.href,
+      _ref$openLinkBehavior = _ref.openLinkBehavior,
+      openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
+      onPress = _ref.onPress,
+      rest = _objectWithoutProperties(_ref, _excluded$7);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    onPress: function handleOnPress() {
+      if (onPress) onPress();
+      if (!href) return;
+
+      switch (openLinkBehavior["native"]) {
+        case 'openInModal':
+        case undefined:
+          Linking.openURL(href)["catch"](function (err) {
+            console.error("An error occurred while opening ".concat(href), err);
+          });
+          break;
+
+        case 'openBrowserApp':
+          openBrowserAsync(href)["catch"](function (err) {
+            console.error("An error occurred while opening ".concat(href), err);
+          });
+          break;
+
+        default:
+          if ((process.env.NODE_ENV !== "production")) {
+            throw new Error("Invalid ExternalLink native behavior: ".concat(openLinkBehavior["native"]));
+          }
+
+      }
+    }
+  }));
+}
+
 var getColorFromState = function (state) {
   switch (state) {
     case 'invalid':
@@ -607,8 +680,8 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _templateObject$o, _templateObject2$b, _templateObject3$7, _templateObject4$6;
-var FieldContainer = styled(PrimitiveView)(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  padding: 5px 0 10px;\n"])));
+var _templateObject$p, _templateObject2$b, _templateObject3$7, _templateObject4$6;
+var FieldContainer = styled(PrimitiveView)(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  padding: 5px 0 10px;\n"])));
 var FeedbackContainer = styled(PrimitiveView)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
@@ -661,8 +734,8 @@ var useInputText = function () {
 
 var _excluded$6 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
 
-var _templateObject$n, _templateObject2$a, _templateObject3$6, _templateObject4$5;
-var styledTextInputMixin = css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-property-value-allowed-list */\n  background-color: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  font-size: ", ";\n  color: ", ";\n  font-family: ", ";\n"])), function (_ref) {
+var _templateObject$o, _templateObject2$a, _templateObject3$6, _templateObject4$5;
+var styledTextInputMixin = css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-property-value-allowed-list */\n  background-color: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  font-size: ", ";\n  color: ", ";\n  font-family: ", ";\n"])), function (_ref) {
   var theme = _ref.theme,
       state = _ref.state;
   return state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
@@ -811,8 +884,8 @@ function Label(_ref) {
   }, children);
 }
 
-var _templateObject$m, _templateObject2$9, _templateObject3$5, _templateObject4$4, _templateObject5;
-var OuterRadio = styled(PrimitiveView)(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+var _templateObject$n, _templateObject2$9, _templateObject3$5, _templateObject4$4, _templateObject5;
+var OuterRadio = styled(PrimitiveView)(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
@@ -901,8 +974,8 @@ function TextArea(_ref) {
   }));
 }
 
-var _templateObject$l;
-var Body = styled(PrimitiveView)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  flex: 1;\n"])), function (_ref) {
+var _templateObject$m;
+var Body = styled(PrimitiveView)(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  flex: 1;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.MEDIUM
@@ -916,8 +989,8 @@ function FullScreenModalBody(_ref3) {
   return /*#__PURE__*/React.createElement(Body, null, children);
 }
 
-var _templateObject$k, _templateObject2$8, _templateObject3$4;
-var SideContainer = styled(PrimitiveView)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+var _templateObject$l, _templateObject2$8, _templateObject3$4;
+var SideContainer = styled(PrimitiveView)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side;
@@ -1032,8 +1105,8 @@ function FullScreenModalHeader(_ref6) {
   }, right) : null);
 }
 
-var _templateObject$j;
-var Container$2 = styled(PrimitiveView)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$k;
+var Container$2 = styled(PrimitiveView)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.colors.uiBackground;
 });
@@ -1044,8 +1117,8 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-var _templateObject$i;
-var PressableIconButton = styled(PrimitivePressable)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  background-color: transparent;\n\n  ", ";\n"])), function (_ref) {
+var _templateObject$j;
+var PressableIconButton = styled(PrimitivePressable)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  background-color: transparent;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.iconButton.borderRadius;
 }, function (_ref2) {
@@ -1062,8 +1135,8 @@ var PressableIconButton = styled(PrimitivePressable)(_templateObject$i || (_temp
   return undefined;
 });
 
-var _templateObject$h, _templateObject2$7;
-var AnimatedIconButtonBackground = styled(Animated$1.View)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])), function (_ref) {
+var _templateObject$i, _templateObject2$7;
+var AnimatedIconButtonBackground = styled(Animated$1.View)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  height: ", "px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])), function (_ref) {
   var theme = _ref.theme,
       color = _ref.color,
       disabled = _ref.disabled;
@@ -1170,8 +1243,8 @@ function PressableAnimatedContainer(_ref5) {
   }), children));
 }
 
-var _templateObject$g;
-var IconButtonContentBorder = styled(PrimitiveView)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  border: ", ";\n  border-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", "px;\n"])), function (_ref) {
+var _templateObject$h;
+var IconButtonContentBorder = styled(PrimitiveView)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  border: ", ";\n  border-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", "px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return "".concat(theme.kitt.iconButton.borderWidth, "px solid");
 }, function (_ref2) {
@@ -1219,8 +1292,8 @@ function IconButton(_ref7) {
 
 var _excluded$5 = ["children"];
 
-var _templateObject$f;
-var ContentView$1 = styled(PrimitiveView)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  flex: 1 0 0%;\n  align-self: center;\n"])));
+var _templateObject$g;
+var ContentView$1 = styled(PrimitiveView)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  flex: 1 0 0%;\n  align-self: center;\n"])));
 function ListItemContent(_ref) {
   var children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$5);
@@ -1231,8 +1304,8 @@ function ListItemContent(_ref) {
 var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
 
-var _templateObject$e, _templateObject2$6;
-var SideContainerView = styled(PrimitiveView)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
+var _templateObject$f, _templateObject2$6;
+var SideContainerView = styled(PrimitiveView)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
   var theme = _ref.theme,
       side = _ref.side;
   return side === 'right' ? theme.kitt.listItem.innerMargin : 0;
@@ -1269,12 +1342,12 @@ function ListItemSideContent(_ref5) {
 
 var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 
-var _templateObject$d;
+var _templateObject$e;
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ContainerView = styled(PrimitiveView)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  flex-direction: row;\n  padding: ", ";\n  ", ";\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_ref) {
+var ContainerView = styled(PrimitiveView)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  flex-direction: row;\n  padding: ", ";\n  ", ";\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_ref) {
   var withPadding = _ref.withPadding,
       theme = _ref.theme;
   return withPadding ? theme.kitt.listItem.padding : 0;
@@ -1358,10 +1431,10 @@ function LargeLoader(_ref) {
   });
 }
 
-var _templateObject$c, _templateObject2$5, _templateObject3$3, _templateObject4$3;
+var _templateObject$d, _templateObject2$5, _templateObject3$3, _templateObject4$3;
 var xIconSize = 14;
 var mainIconSize = 20;
-var Container$1 = styled(PrimitiveView)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n"])), function (_ref) {
+var Container$1 = styled(PrimitiveView)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n"])), function (_ref) {
   var theme = _ref.theme,
       noRadius = _ref.noRadius;
   return noRadius ? 0 : theme.kitt.spacing * 5;
@@ -1484,8 +1557,8 @@ function Overlay(_ref2) {
 
 var PrimitiveScrollView = ScrollView;
 
-var _templateObject$b;
-var BodyView = styled(PrimitiveView)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  padding: ", "px ", "px;\n"])), function (_ref) {
+var _templateObject$c;
+var BodyView = styled(PrimitiveView)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  padding: ", "px ", "px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 6;
 }, function (_ref2) {
@@ -1497,8 +1570,8 @@ function ModalBody(_ref3) {
   return /*#__PURE__*/React.createElement(PrimitiveScrollView, null, /*#__PURE__*/React.createElement(BodyView, null, children));
 }
 
-var _templateObject$a;
-var FooterView = styled(PrimitiveView)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  padding: ", "px;\n  border-top-width: 1px;\n  border-top-color: ", ";\n"])), function (_ref) {
+var _templateObject$b;
+var FooterView = styled(PrimitiveView)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  padding: ", "px;\n  border-top-width: 1px;\n  border-top-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 4;
 }, function (_ref2) {
@@ -1512,8 +1585,8 @@ function ModalFooter(_ref3) {
 
 var OnCloseContext = /*#__PURE__*/createContext(function () {});
 
-var _templateObject$9, _templateObject2$4, _templateObject3$2, _templateObject4$2;
-var HeaderView = styled(PrimitiveView)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: ", "px;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: 1px;\n  border-bottom-color: ", ";\n  min-height: 57px;\n"])), function (_ref) {
+var _templateObject$a, _templateObject2$4, _templateObject3$2, _templateObject4$2;
+var HeaderView = styled(PrimitiveView)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  position: relative;\n  padding: ", "px;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: 1px;\n  border-bottom-color: ", ";\n  min-height: 57px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 2;
 }, function (_ref2) {
@@ -1548,8 +1621,8 @@ function ModalHeader(_ref6) {
   })));
 }
 
-var _templateObject$8, _templateObject2$3;
-var ModalView = styled(PrimitiveView)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", "px ", "px;\n"])), function (_ref) {
+var _templateObject$9, _templateObject2$3;
+var ModalView = styled(PrimitiveView)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", "px ", "px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 20;
 }, function (_ref2) {
@@ -1608,12 +1681,12 @@ function Notification(_ref) {
 
 var PrimitiveLink = Text$1;
 
-var _templateObject$7;
+var _templateObject$8;
 var Flex = styled(PrimitiveView).withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
   }
-})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: wrap;\n  padding: ", "px;\n"])), function (_ref) {
+})(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: wrap;\n  padding: ", "px;\n"])), function (_ref) {
   var direction = _ref.direction;
   return direction;
 }, function (_ref2) {
@@ -1625,7 +1698,7 @@ var Flex = styled(PrimitiveView).withConfig({
 
 var storyPadding = 16;
 
-var _templateObject$6;
+var _templateObject$7;
 
 var getBackgroundColorFromBlockColor = function (theme) {
   var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'transparent';
@@ -1665,7 +1738,7 @@ var useStoryBlockColor = function (color) {
   var storyBlockColor = useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-var StyledStoryBlockView = styled(PrimitiveView)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  padding: 16px ", "px 0;\n  margin: 0 -", "px;\n  background: ", ";\n"])), storyPadding, storyPadding, function (_ref) {
+var StyledStoryBlockView = styled(PrimitiveView)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  padding: 16px ", "px 0;\n  margin: 0 -", "px;\n  background: ", ";\n"])), storyPadding, storyPadding, function (_ref) {
   var theme = _ref.theme,
       background = _ref.background;
   return getBackgroundColorFromBlockColor(theme, background);
@@ -1682,8 +1755,8 @@ function StoryBlock(_ref2) {
   }, children)));
 }
 
-var _templateObject$5, _templateObject2$2;
-var StoryTitleContainer = styled(PrimitiveView)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
+var _templateObject$6, _templateObject2$2;
+var StoryTitleContainer = styled(PrimitiveView)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
 var StorySubTitleContainer = styled(PrimitiveView)(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n"])));
 function StoryTitle(_ref) {
   var color = _ref.color,
@@ -1744,8 +1817,8 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var _templateObject$4;
-var StoryContainer$1 = styled(PrimitiveScrollView)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  padding: ", "px;\n"])), storyPadding);
+var _templateObject$5;
+var StoryContainer$1 = styled(PrimitiveScrollView)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  padding: ", "px;\n"])), storyPadding);
 function Story(_ref) {
   var title = _ref.title,
       contentContainerStyle = _ref.contentContainerStyle,
@@ -1759,8 +1832,8 @@ var _excluded$2 = ["title", "className", "children", "internalIsDemoSection"],
     _excluded2 = ["title", "className", "children"],
     _excluded3 = ["title", "className", "children"];
 
-var _templateObject$3, _templateObject2$1, _templateObject3$1, _templateObject4$1;
-var StyledSection = styled(PrimitiveView)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  margin-bottom: 32px;\n"])));
+var _templateObject$4, _templateObject2$1, _templateObject3$1, _templateObject4$1;
+var StyledSection = styled(PrimitiveView)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: 32px;\n"])));
 function StorySection(_ref) {
   var title = _ref.title;
       _ref.className;
@@ -1833,8 +1906,8 @@ function StoryDecorator(storyFn, context) {
   }, storyFn());
 }
 
-var _templateObject$2, _templateObject2, _templateObject3, _templateObject4;
-var SmallScreenRow = styled(PrimitiveView)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  margin: 0;\n"])));
+var _templateObject$3, _templateObject2, _templateObject3, _templateObject4;
+var SmallScreenRow = styled(PrimitiveView)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  margin: 0;\n"])));
 var SmallScreenCol = styled(PrimitiveView)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0 16px;\n"])));
 var FlexRow = styled(PrimitiveView)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin: 0 -4px 16px;\n"])));
 var FlexCol = styled(PrimitiveView)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  flex-basis: 0;\n  margin: 0 8px;\n"])));
@@ -1884,27 +1957,64 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var _templateObject$1;
-var Container = styled(PrimitiveView)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  align-self: flex-start;\n"])), function (_ref) {
+var _templateObject$2;
+var Container = styled(PrimitiveView)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  align-self: flex-start;\n"])), function (_ref) {
   var theme = _ref.theme,
-      type = _ref.type;
-  return theme.kitt.tag[type].backgroundColor;
+      type = _ref.type,
+      variant = _ref.variant;
+  return theme.kitt.tag[type][variant].backgroundColor;
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.tag.padding;
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant;
+  return theme.kitt.tag[type][variant].borderWidth;
 }, function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+      type = _ref3.type,
+      variant = _ref3.variant;
+  return theme.kitt.tag[type][variant].borderColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.tag.padding;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.kitt.tag.borderRadius;
 });
-function Tag(_ref4) {
-  var label = _ref4.label,
-      _ref4$type = _ref4.type,
-      type = _ref4$type === void 0 ? 'default' : _ref4$type;
+var getLabelColor = function (type, variant) {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
+function Tag(_ref6) {
+  var label = _ref6.label,
+      _ref6$type = _ref6.type,
+      type = _ref6$type === void 0 ? 'default' : _ref6$type,
+      _ref6$variant = _ref6.variant,
+      variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
   return /*#__PURE__*/React.createElement(Container, {
-    type: type
+    type: type,
+    variant: variant
   }, /*#__PURE__*/React.createElement(Typography.Text, {
     base: "body-xsmall",
-    color: type === 'primary' ? 'primary-light' : undefined
+    color: getLabelColor(type, variant)
   }, label));
 }
 
@@ -1959,9 +2069,9 @@ var buttonLateOceanTheme = {
     disabledBorderColor: lateOceanColorPalette.black100
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
     disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.black100,
+    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
     disabledBorderColor: lateOceanColorPalette.black100
   },
   subtle: {
@@ -2162,13 +2272,40 @@ var tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
   primary: {
-    backgroundColor: lateOceanColorPalette.moonPurpleLight1
+    fill: {
+      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.lateOcean
+    }
   },
   "default": {
-    backgroundColor: lateOceanColorPalette.black50
+    fill: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.black1000
+    }
   },
   danger: {
-    backgroundColor: lateOceanColorPalette.warmEmbrace
+    fill: {
+      backgroundColor: lateOceanColorPalette.warmEmbrace,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: colorsLateOceanTheme.danger
+    }
   }
 };
 
@@ -2296,7 +2433,44 @@ function Tooltip(_ref) {
   return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "onPress"];
+var _templateObject$1;
+
+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 = styled(Emoji)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  align-self: center;\n\n  ", "\n"])), function (_ref) {
+  _ref.size;
+  return undefined;
+  /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+});
+function TypographyEmoji(_ref2) {
+  var emoji = _ref2.emoji,
+      _ref2$base = _ref2.base,
+      base = _ref2$base === void 0 ? 'body' : _ref2$base;
+  var theme = 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 _templateObject;
 var StyledLink = styled(PrimitiveLink).withConfig({
@@ -2316,6 +2490,8 @@ function TypographyLink(_ref3) {
   var children = _ref3.children,
       disabled = _ref3.disabled,
       noUnderline = _ref3.noUnderline,
+      href = _ref3.href,
+      hrefAttrs = _ref3.hrefAttrs,
       onPress = _ref3.onPress,
       otherProps = _objectWithoutProperties(_ref3, _excluded$1);
 
@@ -2324,6 +2500,8 @@ function TypographyLink(_ref3) {
   }), /*#__PURE__*/React.createElement(StyledLink, {
     disabled: disabled,
     noUnderline: noUnderline,
+    href: href,
+    hrefAttrs: hrefAttrs,
     accessibilityRole: "link",
     onPress: disabled ? undefined : onPress
   }, children));
@@ -2432,5 +2610,5 @@ function MatchWindowSize(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }
 
-export { Avatar, Button, Card, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, 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.ios.js.map