@ornikar/kitt-universal 1.0.2 → 1.2.0

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

@@ -3,13 +3,17 @@ 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, useMemo } from 'react';
-import { Animated, Easing, Image, useWindowDimensions, Pressable, ActivityIndicator, StyleSheet, View, ScrollView, Modal as Modal$1 } from 'react-native';
+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';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import styled, { useTheme, css } from 'styled-components/native';
+import styled, { useTheme, css, ThemeProvider } from 'styled-components';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+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';
+import { makeDecorator } from '@storybook/addons';
+
+var PrimitiveView = View;
 
 function SpinningIcon(_ref) {
   var children = _ref.children;
@@ -42,8 +46,8 @@ function SpinningIcon(_ref) {
   }, children);
 }
 
-var _templateObject$p;
-var IconContainer$2 = styled.View(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-self: ", ";\n"])), function (_ref) {
+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 color = _ref.color;
   return color;
 }, function (_ref2) {
@@ -74,15 +78,17 @@ function Icon(_ref5) {
   }, spin ? /*#__PURE__*/React.createElement(SpinningIcon, null, clonedIcon) : clonedIcon);
 }
 
+var PrimitiveText = Text$1;
+
 var _excluded$9 = ["accessibilityRole", "base", "variant", "color"];
 
-var _templateObject$o;
+var _templateObject$t;
 var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-var StyledTypography = styled.Text(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  /* font */\n  ", "\n\n  /* color */\n  ", "\n"])), function (_ref) {
+var StyledTypography = styled(PrimitiveText)(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n  /* font */\n  ", "\n\n  /* color */\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       isHeader = _ref.isHeader,
       type = _ref.type,
@@ -108,8 +114,8 @@ var isTypographyHeader = function (base, typeInContext) {
 };
 
 function Typography(_ref3) {
-  _ref3.accessibilityRole;
-      var base = _ref3.base,
+  var accessibilityRole = _ref3.accessibilityRole,
+      base = _ref3.base,
       variant = _ref3.variant,
       color = _ref3.color,
       otherProps = _objectWithoutProperties(_ref3, _excluded$9);
@@ -127,11 +133,13 @@ function Typography(_ref3) {
     color: colorWithDefaultToBlack,
     isHeader: isHeader,
     type: base,
-    variant: nonNullableVariant
+    variant: nonNullableVariant,
+    accessibilityRole: accessibilityRole || undefined
   }, otherProps))) : /*#__PURE__*/React.createElement(StyledTypography, _extends({
     color: colorWithDefaultToBlack,
     isHeader: isHeader,
-    variant: nonNullableVariant
+    variant: nonNullableVariant,
+    accessibilityRole: accessibilityRole || undefined
   }, otherProps));
   return color ? /*#__PURE__*/React.createElement(TypographyColorContext.Provider, {
     value: color
@@ -145,19 +153,19 @@ function TypographyText(props) {
 }
 
 function TypographyParagraph(props) {
-  // @ts-expect-error paragraph is not allowed in react-native but exists in react-native-web
   return /*#__PURE__*/React.createElement(Typography, _extends({
     accessibilityRole: "paragraph"
   }, props));
 }
 
-var createHeading = function (level) {
+var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
     return /*#__PURE__*/React.createElement(Typography, _extends({
-      accessibilityRole: "header"
+      accessibilityRole: "header",
+      base: defaultBase
     }, props, {
-      "aria-level": level
+      accessibilityLevel: level
     }));
   }
 
@@ -167,15 +175,31 @@ var createHeading = function (level) {
 
 Typography.Text = TypographyText;
 Typography.Paragraph = TypographyParagraph;
-Typography.h1 = createHeading('1');
-Typography.h2 = createHeading('2');
-Typography.h3 = createHeading('3');
-Typography.h4 = createHeading('4');
-Typography.h5 = createHeading('5');
+Typography.Header1 = createHeading(1);
+Typography.Header2 = createHeading(2);
+Typography.Header3 = createHeading(3);
+Typography.Header4 = createHeading(4);
+Typography.Header5 = createHeading(5);
+Typography.Header6 = createHeading(6);
+/** @deprecated use Typography.Header1 */
+
+Typography.h1 = createHeading(1, 'header1');
+/** @deprecated use Typography.Header2 */
+
+Typography.h2 = createHeading(2, 'header2');
+/** @deprecated use Typography.Header3 */
+
+Typography.h3 = createHeading(3, 'header3');
+/** @deprecated use Typography.Header4 */
+
+Typography.h4 = createHeading(4, 'header4');
+/** @deprecated use Typography.Header6 */
+
+Typography.h5 = createHeading(5, 'header5');
 
 var _excluded$8 = ["size"];
 
-var _templateObject$n;
+var _templateObject$s;
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -185,7 +209,7 @@ var getInitials = function (firstname, lastname) {
   return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 };
 
-var StyledAvatarView = styled.View(_templateObject$n || (_templateObject$n = _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$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 round = _ref.round,
       size = _ref.size;
   return round ? size / 2 : 10;
@@ -248,8 +272,10 @@ function Avatar(_ref6) {
   })));
 }
 
-var _templateObject$m;
-var ButtonContainer = styled.Pressable(_templateObject$m || (_templateObject$m = _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 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) {
@@ -323,7 +349,7 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/React.createElement(TypographyIconInheritColor, otherProps);
 }
 
-var _templateObject$l, _templateObject2$b, _templateObject3$8;
+var _templateObject$q, _templateObject2$c, _templateObject3$8;
 
 var getTextColorByType = function (type, isPressed, disabled) {
   if (disabled) return 'black-light';
@@ -344,13 +370,13 @@ var getTextColorByType = function (type, isPressed, disabled) {
   }
 };
 
-var ButtonText = styled(Typography.Text)(_templateObject$l || (_templateObject$l = _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.View(_templateObject2$b || (_templateObject2$b = _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 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 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;
   return "".concat(stretch || iconOnly ? 1 : 0, " 1 auto");
 });
-var IconContainer$1 = styled.View(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+var IconContainer$1 = styled(PrimitiveView)(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme,
       iconPosition = _ref2.iconPosition;
   var value = theme.kitt.spacing * 3;
@@ -397,7 +423,7 @@ function ButtonContent(_ref4) {
     size: theme.kitt.button.iconSize
   };
 
-  if (process.env.NODE_ENV !== "production") {
+  if ((process.env.NODE_ENV !== "production")) {
     if (!(children || icon)) {
       throw new Error('kitt(Button): You should provide at least a children or a icon');
     }
@@ -485,8 +511,8 @@ function Button(_ref) {
   }), children));
 }
 
-var _templateObject$k;
-var Container$5 = styled.View(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+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 theme = _ref.theme,
       type = _ref.type;
   return theme.kitt.card[type].backgroundColor;
@@ -581,19 +607,19 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _templateObject$j, _templateObject2$a, _templateObject3$7, _templateObject4$5;
-var FieldContainer = styled.View(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  padding: 5px 0 10px;\n"])));
-var FeedbackContainer = styled.View(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+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 FeedbackContainer = styled(PrimitiveView)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.SMALL
   }, 'padding-top: 10px', 'padding-top: 5px');
 });
-var FieldLabelContainer = styled.View(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n"])), function (_ref2) {
+var FieldLabelContainer = styled(PrimitiveView)(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.inputField.labelContainerPaddingBottom;
 });
-var LabelContainer = styled.View(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref3) {
+var LabelContainer = styled(PrimitiveView)(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.forms.inputField.iconMarginLeft;
 });
@@ -635,8 +661,8 @@ var useInputText = function () {
 
 var _excluded$6 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
 
-var _templateObject$i, _templateObject2$9, _templateObject3$6, _templateObject4$4;
-var styledTextInputMixin = css(_templateObject$i || (_templateObject$i = _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$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 theme = _ref.theme,
       state = _ref.state;
   return state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
@@ -661,7 +687,7 @@ var styledTextInputMixin = css(_templateObject$i || (_templateObject$i = _tagged
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
-var Input = styled.TextInput(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-bang-space-before */\n  /* stylelint-disable comment-word-disallowed-list */\n\n  /* FIXME: text input is not vertically centered on iOS because of bigger line-height */\n  ", "\n  padding: ", ";\n  line-height: ", ";\n  min-height: ", "px;\n"])), styledTextInputMixin, function (_ref8) {
+var Input = styled(TextInput)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-bang-space-before */\n  /* stylelint-disable comment-word-disallowed-list */\n\n  /* FIXME: text input is not vertically centered on iOS because of bigger line-height */\n  ", "\n  padding: ", ";\n  line-height: ", ";\n  min-height: ", "px;\n"])), styledTextInputMixin, function (_ref8) {
   var theme = _ref8.theme,
       multiline = _ref8.multiline;
   return !multiline && "android" === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding;
@@ -673,14 +699,14 @@ var Input = styled.TextInput(_templateObject2$9 || (_templateObject2$9 = _tagged
   var minHeight = _ref10.minHeight;
   return minHeight;
 });
-var Container$4 = styled.View(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n"])), function (_ref11) {
+var Container$4 = styled(PrimitiveView)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n"])), function (_ref11) {
   var theme = _ref11.theme;
   return theme.kitt.forms.input.marginTop;
 }, function (_ref12) {
   var theme = _ref12.theme;
   return theme.kitt.forms.input.marginBottom;
 });
-var PasswordButtonContainer = styled.Pressable(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  justify-content: center;\n  padding: ", "px;\n"])), function (_ref13) {
+var PasswordButtonContainer = styled(PrimitivePressable)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  justify-content: center;\n  padding: ", "px;\n"])), function (_ref13) {
   var theme = _ref13.theme;
   return theme.kitt.forms.input.passwordButtonIconSize / 2;
 });
@@ -768,6 +794,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
       if (_onBlur) _onBlur(e);
     }
   })), type === 'password' && !disabled && /*#__PURE__*/React.createElement(PasswordButtonContainer, {
+    accessibilityRole: "button",
     onPress: togglePasswordVisibility
   }, /*#__PURE__*/React.createElement(TypographyIcon, {
     icon: isPasswordVisible ? /*#__PURE__*/React.createElement(EyeIcon, null) : /*#__PURE__*/React.createElement(EyeOffIcon, null),
@@ -784,8 +811,8 @@ function Label(_ref) {
   }, children);
 }
 
-var _templateObject$h, _templateObject2$8, _templateObject3$5, _templateObject4$3, _templateObject5;
-var OuterRadio = styled.View(_templateObject$h || (_templateObject$h = _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$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 theme = _ref.theme,
       disabled = _ref.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
@@ -806,7 +833,7 @@ var OuterRadio = styled.View(_templateObject$h || (_templateObject$h = _taggedTe
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = styled.View(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
+var SelectedOuterRadio = styled(PrimitiveView)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.forms.radio.checked.backgroundColor;
 }, function (_ref8) {
@@ -819,7 +846,7 @@ var SelectedOuterRadio = styled.View(_templateObject2$8 || (_templateObject2$8 =
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = styled.View(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n"])), function (_ref11) {
+var SelectedInnerRadio = styled(PrimitiveView)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n"])), function (_ref11) {
   var theme = _ref11.theme;
   return theme.kitt.forms.radio.checked.innerBackgroundColor;
 }, function (_ref12) {
@@ -832,7 +859,7 @@ var SelectedInnerRadio = styled.View(_templateObject3$5 || (_templateObject3$5 =
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$3 = styled.Pressable(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n"])));
+var Container$3 = styled(PrimitivePressable)(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n"])));
 var Text = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n"])), function (_ref15) {
   var theme = _ref15.theme;
   return theme.kitt.spacing * 2;
@@ -850,7 +877,7 @@ function Radio(_ref16) {
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
-    accessible: checked && !disabled,
+    focusable: checked && !disabled,
     onPress: function handlePress() {
       onChange(value);
     }
@@ -874,8 +901,8 @@ function TextArea(_ref) {
   }));
 }
 
-var _templateObject$g;
-var Body = styled.View(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  flex: 1;\n"])), function (_ref) {
+var _templateObject$l;
+var Body = styled(PrimitiveView)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  flex: 1;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.MEDIUM
@@ -889,8 +916,8 @@ function FullScreenModalBody(_ref3) {
   return /*#__PURE__*/React.createElement(Body, null, children);
 }
 
-var _templateObject$f, _templateObject2$7, _templateObject3$4;
-var SideContainer = styled.View(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+var _templateObject$k, _templateObject2$8, _templateObject3$4;
+var SideContainer = styled(PrimitiveView)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side;
@@ -907,7 +934,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = styled.View(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  ", ";\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  flex-direction: row;\n  align-items: center;\n"])), function (_ref2) {
+var Header = styled(PrimitiveView)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  ", ";\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  flex-direction: row;\n  align-items: center;\n"])), function (_ref2) {
   var theme = _ref2.theme,
       _ref2$insetTop = _ref2.insetTop,
       insetTop = _ref2$insetTop === void 0 ? 0 : _ref2$insetTop;
@@ -922,7 +949,7 @@ var Header = styled.View(_templateObject2$7 || (_templateObject2$7 = _taggedTemp
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = styled.View(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref4) {
+var HeaderContent = styled(PrimitiveView)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref4) {
   var theme = _ref4.theme,
       leftWidth = _ref4.leftWidth,
       rightWidth = _ref4.rightWidth,
@@ -1005,8 +1032,8 @@ function FullScreenModalHeader(_ref6) {
   }, right) : null);
 }
 
-var _templateObject$e;
-var Container$2 = styled.View(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$j;
+var Container$2 = styled(PrimitiveView)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.colors.uiBackground;
 });
@@ -1017,10 +1044,187 @@ 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 theme = _ref.theme;
+  return theme.kitt.iconButton.borderRadius;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.iconButton.width;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.iconButton.height;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+      _ref4.color;
+      _ref4.disabled;
+  theme.kitt.iconButton;
+  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 (_ref2) {
+  var theme = _ref2.theme,
+      color = _ref2.color,
+      disabled = _ref2.disabled;
+  var iconButton = theme.kitt.iconButton;
+  if (disabled) return iconButton.disabled.backgroundColor;
+  if (color === 'white') return iconButton.white.pressedBackgroundColor;
+  return iconButton["default"].pressedBackgroundColor;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.iconButton.borderRadius;
+}, 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;
+  var theme = useTheme();
+  var pressed = useSharedValue(false);
+  var opacityStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        opacity: withSpring(pressed.value ? 1 : 0)
+      };
+    };
+
+    _f._closure = {
+      withSpring: withSpring,
+      pressed: pressed
+    };
+    _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
+    _f.__workletHash = 10645190329247;
+    _f.__location = "/home/chris/ornikar/kitt/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (64:41)";
+    _f.__optimalization = 2;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  var scaleStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      return {
+        transform: [{
+          scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base["default"])
+        }]
+      };
+    };
+
+    _f._closure = {
+      withSpring: withSpring,
+      pressed: pressed,
+      theme: {
+        kitt: {
+          iconButton: {
+            scale: {
+              base: {
+                active: theme.kitt.iconButton.scale.base.active,
+                "default": theme.kitt.iconButton.scale.base["default"]
+              }
+            }
+          }
+        }
+      }
+    };
+    _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/chris/ornikar/kitt/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (70:39)";
+    _f.__optimalization = 2;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  return /*#__PURE__*/React.createElement(PressableIconButton, {
+    accessibilityRole: "button",
+    disabled: disabled,
+    color: color,
+    onPress: onPress,
+    onPressIn: function onPressIn() {
+      pressed.value = true;
+    },
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    }
+  }, /*#__PURE__*/React.createElement(AnimatedViewContainer, {
+    style: disabled ? [{
+      transform: [{
+        scale: 1
+      }]
+    }] : [scaleStyles]
+  }, /*#__PURE__*/React.createElement(AnimatedIconButtonBackground, {
+    disabled: disabled,
+    color: color,
+    style: disabled ? [{
+      opacity: 1
+    }] : [opacityStyles]
+  }), 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;
+  return "".concat(theme.kitt.iconButton.borderWidth, "px solid");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      disabled = _ref2.disabled;
+  return disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.iconButton.borderRadius;
+});
+
+function IconButtonContent(_ref6) {
+  var disabled = _ref6.disabled,
+      color = _ref6.color,
+      icon = _ref6.icon;
+  return /*#__PURE__*/React.createElement(IconButtonContentBorder, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(TypographyIcon, {
+    color: disabled ? 'black-light' : color,
+    icon: icon
+  }));
+}
+
+function IconButton(_ref7) {
+  var icon = _ref7.icon,
+      color = _ref7.color,
+      disabled = _ref7.disabled,
+      onPress = _ref7.onPress;
+  return /*#__PURE__*/React.createElement(PressableAnimatedContainer, {
+    color: color,
+    disabled: disabled,
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(IconButtonContent, {
+    disabled: disabled,
+    color: color,
+    icon: icon
+  }));
+}
+
 var _excluded$5 = ["children"];
 
-var _templateObject$d;
-var ContentView$1 = styled.View(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  flex: 1 0 0%;\n  align-self: center;\n"])));
+var _templateObject$f;
+var ContentView$1 = styled(PrimitiveView)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  flex: 1 0 0%;\n  align-self: center;\n"])));
 function ListItemContent(_ref) {
   var children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$5);
@@ -1031,8 +1235,8 @@ function ListItemContent(_ref) {
 var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
 
-var _templateObject$c, _templateObject2$6;
-var SideContainerView = styled.View(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
+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 theme = _ref.theme,
       side = _ref.side;
   return side === 'right' ? theme.kitt.listItem.innerMargin : 0;
@@ -1052,7 +1256,7 @@ function ListItemSideContainer(_ref3) {
     side: side
   }, rest), children);
 }
-var SideContentView = styled.View(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  align-self: ", ";\n"])), function (_ref4) {
+var SideContentView = styled(PrimitiveView)(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  align-self: ", ";\n"])), function (_ref4) {
   var align = _ref4.align;
   return align;
 });
@@ -1067,10 +1271,14 @@ function ListItemSideContent(_ref5) {
   }, rest), children);
 }
 
-var _excluded$3 = ["children", "withPadding", "borders", "left", "right"];
+var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 
-var _templateObject$b;
-var ContainerView = styled.View(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  flex-direction: row;\n  padding: ", ";\n  ", ";\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_ref) {
+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 _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; }
+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;
   return withPadding ? theme.kitt.listItem.padding : 0;
@@ -1105,12 +1313,19 @@ function ListItem(_ref5) {
       borders = _ref5.borders,
       left = _ref5.left,
       right = _ref5.right,
+      onPress = _ref5.onPress,
       rest = _objectWithoutProperties(_ref5, _excluded$3);
 
-  return /*#__PURE__*/React.createElement(Pressable, rest, /*#__PURE__*/React.createElement(ContainerView, {
+  var Wrapper = onPress ? PrimitivePressable : Fragment;
+  var wrapperProps = onPress ? _objectSpread$1({
+    accessibilityRole: 'button',
+    onPress: onPress
+  }, rest) : undefined;
+  var containerProps = onPress ? undefined : rest;
+  return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(ContainerView, _extends({
     withPadding: withPadding,
     borders: borders
-  }, left ? /*#__PURE__*/React.createElement(ListItemSideContainer, {
+  }, containerProps), left ? /*#__PURE__*/React.createElement(ListItemSideContainer, {
     side: "left"
   }, left) : null, /*#__PURE__*/React.createElement(ListItemContent, null, children), right ? /*#__PURE__*/React.createElement(ListItemSideContainer, {
     side: "right"
@@ -1147,10 +1362,10 @@ function LargeLoader(_ref) {
   });
 }
 
-var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2;
+var _templateObject$c, _templateObject2$5, _templateObject3$3, _templateObject4$3;
 var xIconSize = 14;
 var mainIconSize = 20;
-var Container$1 = styled.View(_templateObject$a || (_templateObject$a = _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$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 theme = _ref.theme,
       noRadius = _ref.noRadius;
   return noRadius ? 0 : theme.kitt.spacing * 5;
@@ -1174,18 +1389,18 @@ var Container$1 = styled.View(_templateObject$a || (_templateObject$a = _taggedT
       insets = _ref6.insets;
   return ((_insets$top = insets === null || insets === void 0 ? void 0 : insets.top) !== null && _insets$top !== void 0 ? _insets$top : 0) + theme.kitt.spacing * 4;
 });
-var CloseContainer = styled.TouchableOpacity(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  padding: ", "px;\n"])), function (_ref7) {
+var CloseContainer = styled(TouchableOpacity)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  padding: ", "px;\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.spacing * 4;
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.kitt.spacing;
 });
-var IconContainer = styled.View(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref9) {
+var IconContainer = styled(PrimitiveView)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.kitt.spacing * 4;
 });
-var Content = styled.Text(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  text-align: ", ";\n  flex: 1;\n"])), function (_ref10) {
+var Content = styled(PrimitiveText)(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  text-align: ", ";\n  flex: 1;\n"])), function (_ref10) {
   var centeredText = _ref10.centeredText;
   return centeredText ? 'center' : 'left';
 });
@@ -1257,7 +1472,7 @@ function Message(_ref11) {
 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 _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; }
-var OverlayPressable = styled.Pressable(function (_ref) {
+var OverlayPressable = styled(PrimitivePressable)(function (_ref) {
   var theme = _ref.theme;
   return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.kitt.colors.overlay.dark
@@ -1266,27 +1481,28 @@ var OverlayPressable = styled.Pressable(function (_ref) {
 function Overlay(_ref2) {
   var onPress = _ref2.onPress;
   return /*#__PURE__*/React.createElement(OverlayPressable, {
+    accessibilityRole: "none",
     onPress: onPress
-  }, /*#__PURE__*/React.createElement(View, null));
+  }, /*#__PURE__*/React.createElement(PrimitiveView, null));
 }
 
-var _templateObject$9;
-var BodyView = styled.View(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px;\n"])), function (_ref) {
+var PrimitiveScrollView = ScrollView;
+
+var _templateObject$b;
+var BodyView = styled(PrimitiveView)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  padding: ", "px ", "px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 6;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ModalBody = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+function ModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(ScrollView, {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(BodyView, null, children));
-});
+  return /*#__PURE__*/React.createElement(PrimitiveScrollView, null, /*#__PURE__*/React.createElement(BodyView, null, children));
+}
 
-var _templateObject$8;
-var FooterView = styled.View(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  padding: ", "px;\n  border-top-width: 1px;\n  border-top-color: ", ";\n"])), function (_ref) {
+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 theme = _ref.theme;
   return theme.kitt.spacing * 4;
 }, function (_ref2) {
@@ -1300,23 +1516,23 @@ function ModalFooter(_ref3) {
 
 var OnCloseContext = /*#__PURE__*/createContext(function () {});
 
-var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1;
-var HeaderView = styled.View(_templateObject$7 || (_templateObject$7 = _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$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 theme = _ref.theme;
   return theme.kitt.spacing * 2;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = styled.View(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-right: ", "px;\n"])), function (_ref3) {
+var LeftIconView = styled(PrimitiveView)(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-right: ", "px;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = styled.View(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-left: ", "px;\n"])), function (_ref4) {
+var RightIconView = styled(PrimitiveView)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-left: ", "px;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = styled.View(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  flex-shrink: 1;\n"])), function (_ref5) {
+var TitleView = styled(PrimitiveView)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  flex-shrink: 1;\n"])), function (_ref5) {
   var theme = _ref5.theme,
       isIconLeft = _ref5.isIconLeft;
   return isIconLeft ? 0 : theme.kitt.spacing * 2;
@@ -1336,15 +1552,15 @@ function ModalHeader(_ref6) {
   })));
 }
 
-var _templateObject$6, _templateObject2$3;
-var ModalView = styled.View(_templateObject$6 || (_templateObject$6 = _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$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 theme = _ref.theme;
   return theme.kitt.spacing * 20;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = styled.View(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 540px;\n  height: auto;\n  width: 100%;\n  border-radius: ", ";\n  background-color: ", ";\n"])), function (_ref3) {
+var ContentView = styled(PrimitiveView)(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 540px;\n  height: auto;\n  width: 100%;\n  border-radius: ", ";\n  background-color: ", ";\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.card.borderRadius;
 }, function (_ref4) {
@@ -1394,17 +1610,93 @@ function Notification(_ref) {
   }, children);
 }
 
+var PrimitiveLink = Text$1;
+
+var _templateObject$7;
+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) {
+  var direction = _ref.direction;
+  return direction;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      _ref2$padding = _ref2.padding,
+      padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
+  return padding * theme.kitt.spacing;
+});
+
+var storyPadding = 16;
+
+var _templateObject$6;
+
+var getBackgroundColorFromBlockColor = function (theme) {
+  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'transparent';
+
+  switch (color) {
+    case 'dark':
+      return '#293033';
+
+    case 'light':
+      return '#ffffff';
+
+    case 'primary':
+      return theme.kitt.palettes.lateOcean.lateOcean;
+
+    default:
+      return 'transparent';
+  }
+};
+
+var getTypographyColorFromBlockColor = function () {
+  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
+
+  switch (color) {
+    case 'dark':
+    case 'primary':
+      return 'white';
+
+    case 'light':
+    default:
+      return 'black';
+  }
+};
+
+var StoryBlockBackgroundContext = /*#__PURE__*/createContext('transparent');
+var StoryBlockColorContext = /*#__PURE__*/createContext('black');
+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 theme = _ref.theme,
+      background = _ref.background;
+  return getBackgroundColorFromBlockColor(theme, background);
+});
+function StoryBlock(_ref2) {
+  var children = _ref2.children,
+      background = _ref2.background;
+  return /*#__PURE__*/React.createElement(StyledStoryBlockView, {
+    background: background
+  }, /*#__PURE__*/React.createElement(StoryBlockColorContext.Provider, {
+    value: getTypographyColorFromBlockColor(background)
+  }, /*#__PURE__*/React.createElement(StoryBlockBackgroundContext.Provider, {
+    value: background
+  }, children)));
+}
+
 var _templateObject$5, _templateObject2$2;
-var StoryTitleContainer = styled.View(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
-var StorySubTitleContainer = styled.View(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n"])));
+var StoryTitleContainer = styled(PrimitiveView)(_templateObject$5 || (_templateObject$5 = _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,
       children = _ref.children,
       numberOfLines = _ref.numberOfLines;
-  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h1, {
+  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header1, {
     variant: "bold",
     base: "header1",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1413,10 +1705,10 @@ function StoryTitleLevel2(_ref2) {
   var color = _ref2.color,
       children = _ref2.children,
       numberOfLines = _ref2.numberOfLines;
-  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h2, {
+  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header2, {
     variant: "bold",
     base: "header2",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1427,11 +1719,11 @@ function StoryTitleLevel3(_ref3) {
   var color = _ref3.color,
       children = _ref3.children,
       numberOfLines = _ref3.numberOfLines;
-  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h3, {
+  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header3, {
     variant: "bold",
     base: "header3",
     medium: "header4",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1442,11 +1734,11 @@ function StoryTitleLevel4(_ref4) {
   var color = _ref4.color,
       children = _ref4.children,
       numberOfLines = _ref4.numberOfLines;
-  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h4, {
+  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Header4, {
     variant: "bold",
     base: "header4",
     medium: "header5",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1456,20 +1748,34 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var _excluded$2 = ["title", "className", "children"],
-    _excluded2 = ["title", "className", "children"];
+var _templateObject$4;
+var StoryContainer$1 = styled(PrimitiveScrollView)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  padding: ", "px;\n"])), storyPadding);
+function Story(_ref) {
+  var title = _ref.title,
+      contentContainerStyle = _ref.contentContainerStyle,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(StoryContainer$1, {
+    contentContainerStyle: contentContainerStyle
+  }, /*#__PURE__*/React.createElement(StoryTitle, null, title), children);
+}
+
+var _excluded$2 = ["title", "className", "children", "internalIsDemoSection"],
+    _excluded2 = ["title", "className", "children"],
+    _excluded3 = ["title", "className", "children"];
 
-var _templateObject$4, _templateObject2$1, _templateObject3$1;
-var StyledSection = styled.View(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
-function Section(_ref) {
+var _templateObject$3, _templateObject2$1, _templateObject3$1, _templateObject4$1;
+var StyledSection = styled(PrimitiveView)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  margin-bottom: 32px;\n"])));
+function StorySection(_ref) {
   var title = _ref.title;
       _ref.className;
       var children = _ref.children,
+      internalIsDemoSection = _ref.internalIsDemoSection,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
+  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
   return /*#__PURE__*/React.createElement(StyledSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level2, null, title), children);
 }
-var StyledSubSection = styled.View(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  margin-bottom: 20px;\n"])));
+var StyledSubSection = styled(PrimitiveView)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n"])));
 
 function SubSection(_ref2) {
   var title = _ref2.title;
@@ -1480,27 +1786,49 @@ function SubSection(_ref2) {
   return /*#__PURE__*/React.createElement(StyledSubSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level3, null, title), children);
 }
 
-var StyledDemoSection = styled.View(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  margin-bottom: 90px;\n"])));
+var StyledBlockSection = styled(PrimitiveView)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n"])));
 
-function DemoSection(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(StyledDemoSection, null, /*#__PURE__*/React.createElement(Section, {
+function BlockSection(_ref3) {
+  var title = _ref3.title;
+      _ref3.className;
+      var children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  return /*#__PURE__*/React.createElement(StyledBlockSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level4, null, title), children);
+}
+
+var StyledDemoSection = styled(PrimitiveView)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  margin-bottom: 64px;\n"])));
+
+function DemoSection(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement(StyledDemoSection, null, /*#__PURE__*/React.createElement(StorySection, {
+    internalIsDemoSection: true,
     title: "Demo"
   }, children));
 }
 
-Section.SubSection = SubSection;
-Section.DemoSection = DemoSection;
+StorySection.SubSection = SubSection;
+StorySection.BlockSection = BlockSection;
+/** @deprecated use StorySection.Demo instead */
 
-var _templateObject$3;
-var StoryContainer = styled.ScrollView(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  padding: 10px;\n"])));
-function Story(_ref) {
-  var title = _ref.title,
-      contentContainerStyle = _ref.contentContainerStyle,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement(StoryContainer, {
-    contentContainerStyle: contentContainerStyle
-  }, /*#__PURE__*/React.createElement(StoryTitle, null, title), children);
+StorySection.DemoSection = DemoSection;
+StorySection.Demo = DemoSection;
+/** @deprecated use StorySection instead */
+
+var DeprecatedSection = StorySection;
+
+function StoryContainer(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? 'none' : _ref$state,
+      _ref$platform = _ref.platform,
+      platform = _ref$platform === void 0 ? 'all' : _ref$platform;
+  if (platform === 'web') return null;
+  return /*#__PURE__*/React.createElement(StorySection.BlockSection, {
+    testID: state,
+    title: title
+  }, children);
 }
 
 function StoryDecorator(storyFn, context) {
@@ -1510,10 +1838,10 @@ function StoryDecorator(storyFn, context) {
 }
 
 var _templateObject$2, _templateObject2, _templateObject3, _templateObject4;
-var SmallScreenRow = styled.View(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  margin: 0;\n"])));
-var SmallScreenCol = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 10px 0 20px;\n"])));
-var FlexRow = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin: 0 -5px 20px;\n"])));
-var FlexCol = styled.View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  flex-basis: 0;\n  margin: 0 5px 10px;\n"])));
+var SmallScreenRow = styled(PrimitiveView)(_templateObject$2 || (_templateObject$2 = _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"])));
 
 function StoryGridRow(_ref) {
   var children = _ref.children,
@@ -1541,7 +1869,14 @@ function StoryGridRow(_ref) {
 function StoryGridCol(_ref2) {
   var title = _ref2.title,
       titleColor = _ref2.titleColor,
-      children = _ref2.children;
+      children = _ref2.children,
+      _ref2$platform = _ref2.platform,
+      platform = _ref2$platform === void 0 ? 'all' : _ref2$platform;
+
+  if (platform === 'web') {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement(StoryTitle.Level4, {
     numberOfLines: 1,
     color: titleColor
@@ -1554,26 +1889,63 @@ var StoryGrid = {
 };
 
 var _templateObject$1;
-var Container = styled.View(_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));
 }
 
@@ -1626,9 +1998,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: {
@@ -1642,6 +2014,14 @@ var buttonLateOceanTheme = {
     disabledBackgroundColor: lateOceanColorPalette.transparent,
     pressedBackgroundColor: lateOceanColorPalette.transparent,
     disabledBorderColor: lateOceanColorPalette.transparent
+  },
+  white: {
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    disabledBackgroundColor: lateOceanColorPalette.transparent,
+    hoverBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+    pressedBackgroundColor: 'rgba(255, 255, 255, 0.1)',
+    focusBorderColor: 'rgba(255, 255, 255, 0.1)',
+    disabledBorderColor: lateOceanColorPalette.transparent
   }
 };
 
@@ -1770,6 +2150,41 @@ var fullScreenModalLateOceanTheme = {
   }
 };
 
+var iconButton = {
+  backgroundColor: 'transparent',
+  width: 40,
+  height: 40,
+  borderRadius: 20,
+  borderWidth: 2,
+  borderColor: 'transparent',
+  transition: {
+    property: 'all',
+    duration: '200ms',
+    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1);'
+  },
+  scale: {
+    base: {
+      "default": 1,
+      hover: 0.95,
+      active: 0.95
+    },
+    medium: {
+      hover: 1.05
+    }
+  },
+  disabled: {
+    scale: 1,
+    backgroundColor: buttonLateOceanTheme.secondary.disabledBackgroundColor,
+    borderColor: buttonLateOceanTheme.secondary.disabledBorderColor
+  },
+  "default": {
+    pressedBackgroundColor: buttonLateOceanTheme.secondary.pressedBackgroundColor
+  },
+  white: {
+    pressedBackgroundColor: buttonLateOceanTheme.white.hoverBackgroundColor
+  }
+};
+
 var listItemLateOceanTheme = {
   padding: '12px 16px',
   borderColor: colorsLateOceanTheme.separator,
@@ -1785,15 +2200,40 @@ var tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
   primary: {
-    // eslint-disable-next-line unicorn/expiring-todo-comments
-    // TODO: validate Moon shadow color with design team
-    backgroundColor: '#EDEBFC'
+    fill: {
+      backgroundColor: '#EDEBFC',
+      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
+    }
   }
 };
 
@@ -1874,9 +2314,33 @@ var typographyLateOceanTheme = {
         'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
       }
     }
+  },
+  link: {
+    disabledColor: lateOceanColorPalette.black200
   }
 };
 
+var breakpoints = {
+  values: {
+    base: 0,
+    small: 480,
+    medium: 768,
+    large: 1024,
+    wide: 1280
+  },
+  min: {
+    smallBreakpoint: 'min-width: 480px',
+    mediumBreakpoint: 'min-width: 768px',
+    largeBreakpoint: 'min-width: 1024px',
+    wideBreakpoint: 'min-width: 1280px'
+  },
+  max: {
+    smallBreakpoint: 'max-width: 479px',
+    mediumBreakpoint: 'max-width: 767px',
+    largeBreakpoint: 'max-width: 1023px',
+    wideBreakpoint: 'max-width: 1279px'
+  }
+};
 var theme = {
   spacing: 4,
   colors: colorsLateOceanTheme,
@@ -1892,41 +2356,46 @@ var theme = {
   tag: tagLateOceanTheme,
   shadows: shadowsLateOceanTheme,
   fullScreenModal: fullScreenModalLateOceanTheme,
+  iconButton: iconButton,
   listItem: listItemLateOceanTheme
 };
 
 function Tooltip(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(View, null, children);
+  return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
 }
 
-var _excluded$1 = ["disabled", "noUnderline", "variant"];
+var _excluded$1 = ["children", "disabled", "noUnderline", "onPress"];
 
 var _templateObject;
-var StyledLink = styled(Typography).withConfig({
+var StyledLink = styled(PrimitiveLink).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['disabled', 'noUnderline'].includes(prop);
   }
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-decoration: ", ";\n  ", ";\n  margin: 0;\n"])), function (_ref) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-decoration: ", ";\n\n  ", "\n"])), function (_ref) {
   var noUnderline = _ref.noUnderline;
   return noUnderline ? 'none' : 'underline';
 }, function (_ref2) {
-  _ref2.disabled;
-  return null;
+  var disabled = _ref2.disabled,
+      theme = _ref2.theme;
+      _ref2.noUnderline;
+  return "\n    ".concat(disabled ? "color: ".concat(theme.kitt.typography.link.disabledColor, ";") : '', "\n    ").concat('');
 });
 function TypographyLink(_ref3) {
-  var disabled = _ref3.disabled,
+  var children = _ref3.children,
+      disabled = _ref3.disabled,
       noUnderline = _ref3.noUnderline,
-      _ref3$variant = _ref3.variant,
-      variant = _ref3$variant === void 0 ? 'bold' : _ref3$variant,
+      onPress = _ref3.onPress,
       otherProps = _objectWithoutProperties(_ref3, _excluded$1);
 
-  return /*#__PURE__*/React.createElement(StyledLink, _extends({
+  return /*#__PURE__*/React.createElement(Typography, _extends({}, otherProps, {
+    accessibilityRole: "none"
+  }), /*#__PURE__*/React.createElement(StyledLink, {
     disabled: disabled,
     noUnderline: noUnderline,
-    variant: variant,
-    accessibilityRole: "link"
-  }, otherProps));
+    accessibilityRole: "link",
+    onPress: disabled ? undefined : onPress
+  }, children));
 }
 
 function matchWindowSize(currentWidth, _ref) {
@@ -1954,7 +2423,7 @@ function createWindowSizeHelper(currentWidth) {
         widthList[_key] = arguments[_key];
       }
 
-      if (process.env.NODE_ENV !== "production") {
+      if ((process.env.NODE_ENV !== "production")) {
         widthList.slice(1).forEach(function (_ref, index) {
           var _ref2 = _slicedToArray(_ref, 1),
               minWidth = _ref2[0];
@@ -1989,11 +2458,39 @@ function useKittTheme() {
   return useMemo(function () {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(width)
+      responsive: createWindowSizeHelper(width),
+      breakpoints: breakpoints
     };
   }, [width]);
 }
 
+function KittThemeProvider(_ref) {
+  var children = _ref.children;
+  var theme = useKittTheme();
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, children);
+}
+var KittThemeDecorator = makeDecorator({
+  name: 'ThemeDecorator',
+  parameterName: 'theme',
+  wrapper: function wrapper(storyFn, context, _ref2) {
+    _ref2.options;
+        _ref2.parameters;
+    return /*#__PURE__*/React.createElement(KittThemeProvider, null, storyFn(context));
+  }
+});
+
+var SafeAreaProviderDecorator = makeDecorator({
+  name: 'SafeAreaProviderDecorator',
+  parameterName: 'safeAreaProvider',
+  wrapper: function wrapper(storyFn, context, _ref) {
+    _ref.options;
+        _ref.parameters;
+    return /*#__PURE__*/React.createElement(SafeAreaProvider, null, storyFn(context));
+  }
+});
+
 var _excluded = ["children"];
 function MatchWindowSize(_ref) {
   var children = _ref.children,
@@ -2004,5 +2501,5 @@ function MatchWindowSize(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }
 
-export { Avatar, Button, Card, FullScreenModal, Icon, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, Section, Story, StoryDecorator, StoryGrid, StoryTitle, Tag, TextArea, Tooltip, Typography, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize };
+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 };
 //# sourceMappingURL=index-browser-all.es.android.js.map