@ornikar/kitt-universal 2.0.0 → 2.3.0

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

@@ -4,10 +4,11 @@ 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 { 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 { 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';
@@ -80,7 +81,7 @@ 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 TypographyTypeContext = /*#__PURE__*/createContext(undefined);
@@ -118,7 +119,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,7 +198,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$8 = ["size"];
+var _excluded$9 = ["size"];
 
 var _templateObject$s;
 
@@ -263,7 +264,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 +273,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 +286,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 +307,7 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/React.createElement(TypographyIconInheritColor, otherProps);
 }
 
-var _templateObject$q, _templateObject2$c, _templateObject3$8;
+var _templateObject$r, _templateObject2$c, _templateObject3$8;
 
 var getTextColorByType = function (type, isPressed, disabled) {
   if (disabled) return 'black-light';
@@ -370,7 +328,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$r || (_templateObject$r = _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 +412,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$q;
+var ButtonPressable = styled(PrimitivePressable)(_templateObject$q || (_templateObject$q = _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 +465,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,
@@ -538,6 +530,49 @@ function Card(_ref6) {
   }, children);
 }
 
+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':
@@ -1063,33 +1098,31 @@ var PressableIconButton = styled(PrimitivePressable)(_templateObject$i || (_temp
 });
 
 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 (_ref2) {
-  var theme = _ref2.theme,
-      color = _ref2.color,
-      disabled = _ref2.disabled;
+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 theme = _ref.theme,
+      color = _ref.color,
+      disabled = _ref.disabled;
   var iconButton = theme.kitt.iconButton;
   if (disabled) return iconButton.disabled.backgroundColor;
   if (color === 'white') return iconButton.white.pressedBackgroundColor;
   return iconButton["default"].pressedBackgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.iconButton.borderRadius;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.kitt.iconButton.borderRadius;
+  return theme.kitt.iconButton.width;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.kitt.iconButton.width;
-}, function (_ref5) {
-  var theme = _ref5.theme;
   return theme.kitt.iconButton.height;
 });
 var AnimatedViewContainer = styled(Animated$1.View)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"])));
-
-function NativeAnimatedContainer(_ref6) {
-  var disabled = _ref6.disabled,
-      _ref6$color = _ref6.color,
-      color = _ref6$color === void 0 ? 'black' : _ref6$color,
-      children = _ref6.children,
-      onPress = _ref6.onPress;
+function PressableAnimatedContainer(_ref5) {
+  var disabled = _ref5.disabled,
+      _ref5$color = _ref5.color,
+      color = _ref5$color === void 0 ? 'black' : _ref5$color,
+      children = _ref5.children,
+      onPress = _ref5.onPress;
   var theme = useTheme();
   var pressed = useSharedValue(false);
   var opacityStyles = useAnimatedStyle(function () {
@@ -1105,7 +1138,7 @@ function NativeAnimatedContainer(_ref6) {
     };
     _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
     _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (64:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (55:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1139,7 +1172,7 @@ function NativeAnimatedContainer(_ref6) {
     };
     _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
     _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (70:39)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (61:39)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1172,8 +1205,6 @@ function NativeAnimatedContainer(_ref6) {
   }), children));
 }
 
-var PressableAnimatedContainer = NativeAnimatedContainer;
-
 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 theme = _ref.theme;
@@ -1275,9 +1306,9 @@ var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPre
 
 var _templateObject$d;
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 withPadding = _ref.withPadding,
       theme = _ref.theme;
@@ -1469,9 +1500,9 @@ function Message(_ref11) {
   })) : null);
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var OverlayPressable = styled(PrimitivePressable)(function (_ref) {
   var theme = _ref.theme;
   return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
@@ -1889,26 +1920,63 @@ var StoryGrid = {
 };
 
 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 Container = styled(PrimitiveView)(_templateObject$1 || (_templateObject$1 = _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));
 }
 
@@ -1963,9 +2031,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: {
@@ -2166,13 +2234,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
+    }
   }
 };
 
@@ -2300,7 +2395,7 @@ function Tooltip(_ref) {
   return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "onPress"];
+var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
 
 var _templateObject;
 var StyledLink = styled(PrimitiveLink).withConfig({
@@ -2320,6 +2415,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);
 
@@ -2328,6 +2425,8 @@ function TypographyLink(_ref3) {
   }), /*#__PURE__*/React.createElement(StyledLink, {
     disabled: disabled,
     noUnderline: noUnderline,
+    href: href,
+    hrefAttrs: hrefAttrs,
     accessibilityRole: "link",
     onPress: disabled ? undefined : onPress
   }, children));
@@ -2436,5 +2535,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, 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 };
 //# sourceMappingURL=index-browser-all.es.ios.js.map