@ornikar/kitt-universal 2.1.1 → 2.5.0

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

@@ -2,11 +2,12 @@ import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { UserIcon, EyeIcon, EyeOffIcon, LoaderIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import React, { createContext, forwardRef, useContext, useState, Fragment, useMemo } from 'react';
+import React, { createContext, forwardRef, useContext, useState, useMemo, Fragment } from 'react';
 import { Image, TextInput, useWindowDimensions, TouchableOpacity, StyleSheet, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { css, keyframes, useTheme, ThemeProvider } from 'styled-components';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { parse } from 'twemoji-parser';
 import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { makeDecorator } from '@storybook/addons';
@@ -19,7 +20,7 @@ var mapAccessibilityRoleToAriaRole = {
   paragraph: 'paragraph'
 };
 var PrimitiveTextAncestorContext = /*#__PURE__*/createContext(false);
-var PrimitiveTextWithClassName$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var PrimitiveTextWithClassName = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       accessibilityRole = _ref.accessibilityRole,
@@ -50,7 +51,7 @@ var PrimitiveTextWithClassName$1 = /*#__PURE__*/forwardRef(function (_ref, ref)
   }, element);
 });
 var textResetMixin = /*#__PURE__*/css(["", " display:inline;white-space:pre-wrap;word-wrap:break-word;color:inherit;font:inherit;"], resetMixin);
-var PrimitiveText = /*#__PURE__*/styled(PrimitiveTextWithClassName$1).withConfig({
+var PrimitiveText = /*#__PURE__*/styled(PrimitiveTextWithClassName).withConfig({
   displayName: "PrimitiveTextweb__PrimitiveText",
   componentId: "kitt-universal__sc-8bfguf-0"
 })(["", " ", ";", ""], textResetMixin, function (_ref2) {
@@ -86,23 +87,53 @@ function createPressKeyUpHandler(onPress) {
   };
 }
 
+var resetPrimitiveViewMixin = /*#__PURE__*/css(["", " align-items:stretch;flex-basis:auto;flex-direction:column;flex-shrink:0;min-height:0;min-width:0;position:'relative';z-index:0;"], resetMixin);
 var StyledDiv = /*#__PURE__*/styled('div').withConfig({
   displayName: "PrimitiveViewweb__StyledDiv",
   componentId: "kitt-universal__sc-1t2oiuz-0"
-})(["", " align-items:stretch;display:", ";flex-basis:auto;flex-direction:column;flex-shrink:0;min-height:0;min-width:0;position:'relative';z-index:0;"], resetMixin, function (_ref) {
+})(["", " display:", ";"], resetPrimitiveViewMixin, function (_ref) {
   var hasTextAncestor = _ref.hasTextAncestor;
   return hasTextAncestor ? 'inline-flex' : 'flex';
 });
-var PrimitiveView = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-      className = _ref2.className,
-      style = _ref2.style,
-      accessibilityRole = _ref2.accessibilityRole,
-      nativeID = _ref2.nativeID,
-      testID = _ref2.testID,
-      tabIndex = _ref2.tabIndex,
-      onPress = _ref2.onPress;
+var StyledAnchor = /*#__PURE__*/styled('a').withConfig({
+  displayName: "PrimitiveViewweb__StyledAnchor",
+  componentId: "kitt-universal__sc-1t2oiuz-1"
+})(["", " display:", ";text-decoration:none;"], resetPrimitiveViewMixin, function (_ref2) {
+  var hasTextAncestor = _ref2.hasTextAncestor;
+  return hasTextAncestor ? 'inline-flex' : 'flex';
+});
+var PrimitiveView = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      className = _ref3.className,
+      style = _ref3.style,
+      accessibilityRole = _ref3.accessibilityRole,
+      accessibilityLabel = _ref3.accessibilityLabel,
+      nativeID = _ref3.nativeID,
+      testID = _ref3.testID,
+      tabIndex = _ref3.tabIndex,
+      href = _ref3.href,
+      hrefAttrs = _ref3.hrefAttrs,
+      onPress = _ref3.onPress;
   var hasTextAncestor = React.useContext(PrimitiveTextAncestorContext);
+
+  if (href != null) {
+    return /*#__PURE__*/React.createElement(StyledAnchor, _extends({
+      ref: ref,
+      hasTextAncestor: hasTextAncestor,
+      id: nativeID,
+      className: className,
+      style: style,
+      "data-testid": testID,
+      role: accessibilityRole,
+      "aria-label": accessibilityLabel,
+      tabIndex: tabIndex,
+      href: href
+    }, hrefAttrs, {
+      onClick: createPressClickHandler(onPress),
+      onKeyUp: createPressKeyUpHandler(onPress)
+    }), children);
+  }
+
   return /*#__PURE__*/React.createElement(StyledDiv, {
     ref: ref,
     hasTextAncestor: hasTextAncestor,
@@ -111,6 +142,7 @@ var PrimitiveView = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     style: style,
     "data-testid": testID,
     role: accessibilityRole,
+    "aria-label": accessibilityLabel,
     tabIndex: tabIndex,
     onClick: createPressClickHandler(onPress),
     onKeyUp: createPressKeyUpHandler(onPress)
@@ -157,7 +189,7 @@ function Icon(_ref5) {
   }, spin ? /*#__PURE__*/React.createElement(SpinningIcon, null, clonedIcon) : clonedIcon);
 }
 
-var _excluded$a = ["accessibilityRole", "base", "variant", "color"];
+var _excluded$b = ["accessibilityRole", "base", "variant", "color"];
 var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -196,7 +228,7 @@ function Typography(_ref3) {
       base = _ref3.base,
       variant = _ref3.variant,
       color = _ref3.color,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$a);
+      otherProps = _objectWithoutProperties(_ref3, _excluded$b);
 
   var typeInContext = useContext(TypographyTypeContext);
   var isHeader = isTypographyHeader(base, typeInContext);
@@ -275,7 +307,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$9 = ["size"];
+var _excluded$a = ["size"];
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -342,7 +374,7 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      rest = _objectWithoutProperties(_ref6, _excluded$9);
+      rest = _objectWithoutProperties(_ref6, _excluded$a);
 
   return /*#__PURE__*/React.createElement(StyledAvatarView, _extends({}, rest, {
     size: size
@@ -351,98 +383,7 @@ function Avatar(_ref6) {
   })));
 }
 
-var getTabIndex = function (_ref) {
-  var focusable = _ref.focusable,
-      disabled = _ref.disabled;
-  if (disabled) return -1;
-  if (focusable === false) return -1;
-  return 0;
-};
-
-var handlePressPreventDefault = function (e) {
-  e.preventDefault();
-};
-
-var PrimitivePressableWithClassName = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var disabled = _ref2.disabled,
-      focusable = _ref2.focusable,
-      children = _ref2.children,
-      className = _ref2.className,
-      accessibilityRole = _ref2.accessibilityRole,
-      nativeID = _ref2.nativeID,
-      testID = _ref2.testID,
-      onPress = _ref2.onPress;
-  return /*#__PURE__*/React.createElement(PrimitiveView, {
-    ref: ref,
-    nativeID: nativeID,
-    testID: testID,
-    className: className,
-    "aria-disabled": !!disabled,
-    accessibilityRole: accessibilityRole
-    /* https://necolas.github.io/react-native-web/docs/accessibility/#keyboard-focus */
-    ,
-    tabIndex: getTabIndex({
-      focusable: focusable,
-      disabled: disabled
-    }),
-    onPress: disabled ? handlePressPreventDefault : onPress
-  }, children);
-});
-var PrimitivePressable = /*#__PURE__*/styled(PrimitivePressableWithClassName).withConfig({
-  displayName: "PrimitivePressableweb__PrimitivePressable",
-  componentId: "kitt-universal__sc-1pzco2e-0"
-})(["cursor:", ";touch-action:", ";"], function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? 'none' : 'manipulation';
-});
-
-var ButtonContainer = /*#__PURE__*/styled(PrimitivePressable).withConfig({
-  displayName: "ButtonContainer",
-  componentId: "kitt-universal__sc-ofbpwm-0"
-})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], 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$8 = ["color"],
+var _excluded$9 = ["color"],
     _excluded2$2 = ["color"];
 
 function TypographyIconInheritColor(props) {
@@ -455,7 +396,7 @@ function TypographyIconInheritColor(props) {
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$8);
+      otherProps = _objectWithoutProperties(_ref, _excluded$9);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
@@ -588,23 +529,103 @@ function ButtonContent(_ref4) {
   })) : null);
 }
 
-var useButton = function () {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isPressed = _useState2[0],
-      setIsPressed = _useState2[1];
+var getTabIndex = function (_ref) {
+  var focusable = _ref.focusable,
+      disabled = _ref.disabled;
+  if (disabled) return -1;
+  if (focusable === false) return -1;
+  return 0;
+};
 
-  return {
-    isPressed: isPressed,
-    handleButtonPressIn: function handleButtonPressIn() {
-      return setIsPressed(true);
-    },
-    handleButtonPressOut: function handleButtonPressOut() {
-      return setIsPressed(false);
-    }
-  };
+var handlePressPreventDefault = function (e) {
+  e.preventDefault();
 };
 
+var PrimitivePressableWithClassName = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var disabled = _ref2.disabled,
+      focusable = _ref2.focusable,
+      children = _ref2.children,
+      className = _ref2.className,
+      accessibilityRole = _ref2.accessibilityRole,
+      accessibilityLabel = _ref2.accessibilityLabel,
+      nativeID = _ref2.nativeID,
+      testID = _ref2.testID,
+      href = _ref2.href,
+      hrefAttrs = _ref2.hrefAttrs,
+      onPress = _ref2.onPress;
+  return /*#__PURE__*/React.createElement(PrimitiveView, {
+    ref: ref,
+    nativeID: nativeID,
+    testID: testID,
+    className: className,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    accessibilityRole: accessibilityRole,
+    accessibilityLabel: accessibilityLabel,
+    "aria-disabled": !!disabled
+    /* https://necolas.github.io/react-native-web/docs/accessibility/#keyboard-focus */
+    ,
+    tabIndex: getTabIndex({
+      focusable: focusable,
+      disabled: disabled
+    }),
+    onPress: disabled ? handlePressPreventDefault : onPress
+  }, children);
+});
+var PrimitivePressable = /*#__PURE__*/styled(PrimitivePressableWithClassName).withConfig({
+  displayName: "PrimitivePressableweb__PrimitivePressable",
+  componentId: "kitt-universal__sc-1pzco2e-0"
+})(["cursor:", ";touch-action:", ";"], function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled ? 'none' : 'manipulation';
+});
+
+var ButtonPressable = /*#__PURE__*/styled(PrimitivePressable).withConfig({
+  displayName: "ButtonPressable",
+  componentId: "kitt-universal__sc-7ckel6-0"
+})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], 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,
       _ref$type = _ref.type,
@@ -615,29 +636,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,
@@ -674,6 +703,83 @@ function Card(_ref6) {
   }, children);
 }
 
+var StyledImage = /*#__PURE__*/styled('img').withConfig({
+  displayName: "PrimitiveImageweb__StyledImage",
+  componentId: "kitt-universal__sc-1iw8ewp-0"
+})(["box-sizing:border-box;display:inline-flex;"]);
+function PrimitiveImage(_ref) {
+  var source = _ref.source,
+      className = _ref.className,
+      accessibilityLabel = _ref.accessibilityLabel;
+  return /*#__PURE__*/React.createElement(StyledImage, {
+    draggable: false,
+    className: className,
+    src: source.uri,
+    alt: accessibilityLabel
+  });
+}
+
+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: 'svg'
+    });
+  }, [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$8 = ["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$8);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    href: href,
+    hrefAttrs: (openLinkBehavior === null || openLinkBehavior === void 0 ? void 0 : openLinkBehavior.web) === 'targetSelf' ? undefined : {
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    },
+    onPress: onPress
+  }));
+}
+
 var getColorFromState = function (state) {
   switch (state) {
     case 'invalid':
@@ -1630,11 +1736,12 @@ function Overlay(_ref2) {
   }, /*#__PURE__*/React.createElement(PrimitiveView, null));
 }
 
-var _excluded$3 = ["contentContainerStyle", "children"];
+var _excluded$3 = ["contentContainerStyle", "children", "bounces"];
 var PrimitiveScrollView = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var contentContainerStyle = _ref.contentContainerStyle,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      children = _ref.children;
+      _ref.bounces;
+      var props = _objectWithoutProperties(_ref, _excluded$3);
 
   return /*#__PURE__*/React.createElement(PrimitiveView, _extends({
     ref: ref
@@ -1785,18 +1892,24 @@ function Notification(_ref) {
   }, children);
 }
 
-var PrimitiveTextWithClassName = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var PrimitiveLinkWithClassName = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
+      href = _ref.href,
+      hrefAttrs = _ref.hrefAttrs,
       onPress = _ref.onPress;
-  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
-  // if (href) {
-  //   return (
-  //     <a ref={ref} href={href} className={className}>
-  //       {children}
-  //     </a>
-  //   );
-  // }
+
+  if (href != null) {
+    return /*#__PURE__*/React.createElement("a", _extends({
+      ref: ref,
+      href: href
+    }, hrefAttrs, {
+      className: className,
+      onClick: createPressClickHandler(onPress),
+      onKeyUp: createPressKeyUpHandler(onPress)
+    }), children);
+  }
+
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
     role: "button",
@@ -1806,12 +1919,12 @@ var PrimitiveTextWithClassName = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onKeyUp: createPressKeyUpHandler(onPress)
   }, children);
 });
-var PrimitiveLink = /*#__PURE__*/styled(PrimitiveTextWithClassName).withConfig({
+var PrimitiveLink = /*#__PURE__*/styled(PrimitiveLinkWithClassName).withConfig({
   displayName: "PrimitiveLinkweb__PrimitiveLink",
   componentId: "kitt-universal__sc-24w4og-0"
-})(["", " background-color:transparent;color:inherit;font:inherit;list-style:none;text-align:inherit;text-decoration:none;", ";", ";"], textResetMixin, function (_ref2) {
+})(["", " background-color:transparent;color:inherit;font:inherit !important;list-style:none;text-align:inherit;text-decoration:none;", ";", ";"], textResetMixin, function (_ref2) {
   var selectable = _ref2.selectable;
-  return selectable == null ? undefined : "user-select: ".concat(selectable ? 'none' : 'text');
+  return selectable == null ? undefined : "user-select: ".concat(selectable ? 'text' : 'none');
 }, function (_ref3) {
   var onPress = _ref3.onPress;
   return onPress ? 'cursor: pointer;' : undefined;
@@ -2127,26 +2240,63 @@ var StoryGrid = {
 var Container = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], 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));
 }
 
@@ -2201,9 +2351,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: {
@@ -2404,13 +2554,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
+    }
   }
 };
 
@@ -2538,7 +2715,46 @@ function Tooltip(_ref) {
   return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "onPress"];
+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;
+
+  /* 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) {
     return !['disabled', 'noUnderline'].includes(prop);
@@ -2559,6 +2775,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);
 
@@ -2567,6 +2785,8 @@ function TypographyLink(_ref3) {
   }), /*#__PURE__*/React.createElement(StyledLink, {
     disabled: disabled,
     noUnderline: noUnderline,
+    href: href,
+    hrefAttrs: hrefAttrs,
     accessibilityRole: "link",
     onPress: disabled ? undefined : onPress
   }, children));
@@ -2675,5 +2895,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.web.js.map