@ornikar/kitt-universal 1.0.2 → 1.2.0

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

@@ -2,24 +2,129 @@ import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { UserIcon, EyeIcon, EyeOffIcon, LoaderIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import React, { useContext, createContext, useState, forwardRef, useMemo } from 'react';
-import { Image, useWindowDimensions, Pressable, View, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
+import React, { createContext, forwardRef, useContext, useState, Fragment, useMemo } from 'react';
+import { Image, TextInput, useWindowDimensions, TouchableOpacity, StyleSheet, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import styled, { useTheme, css } from 'styled-components/native';
+import styled, { css, keyframes, useTheme, 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 'react-native-reanimated';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { makeDecorator } from '@storybook/addons';
 
-var styles$1 = {"SpinningIcon":"kitt-universal_SpinningIcon_3-FWq","spin":"kitt-universal_spin_3gv6_"};
+var resetMixin = /*#__PURE__*/css(["border:0 solid black;box-sizing:border-box;margin:0;padding:0;"]);
 
-function SpinningIcon(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("span", {
-    className: styles$1.SpinningIcon
+var mapAccessibilityRoleToAriaRole = {
+  header: 'heading',
+  none: 'presentation',
+  paragraph: 'paragraph'
+};
+var PrimitiveTextAncestorContext = /*#__PURE__*/createContext(false);
+var PrimitiveTextWithClassName$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      accessibilityRole = _ref.accessibilityRole,
+      accessibilityRoleDescription = _ref.accessibilityRoleDescription,
+      accessibilityLevel = _ref.accessibilityLevel;
+      _ref.selectable;
+      _ref.numberOfLines;
+  var hasTextAncestor = React.useContext(PrimitiveTextAncestorContext);
+  var Component = hasTextAncestor ? 'span' : 'div';
+
+  if (accessibilityRole === 'header' && accessibilityLevel && accessibilityLevel < 7) {
+    Component = "h".concat(accessibilityLevel); // eslint-disable-next-line no-param-reassign
+
+    accessibilityRole = undefined; // eslint-disable-next-line no-param-reassign
+
+    accessibilityLevel = undefined;
+  }
+
+  var element = /*#__PURE__*/React.createElement(Component, {
+    ref: ref,
+    className: className,
+    role: accessibilityRole ? mapAccessibilityRoleToAriaRole[accessibilityRole] : undefined,
+    "aria-roledescription": accessibilityRoleDescription,
+    "aria-level": accessibilityLevel
   }, children);
+  return hasTextAncestor ? element : /*#__PURE__*/React.createElement(PrimitiveTextAncestorContext.Provider, {
+    value: true
+  }, element);
+});
+var textResetMixin = /*#__PURE__*/css(["", " display:inline;white-space:pre-wrap;word-wrap:break-word;color:inherit;font:inherit;"], resetMixin);
+var PrimitiveText = /*#__PURE__*/styled(PrimitiveTextWithClassName$1).withConfig({
+  displayName: "PrimitiveTextweb__PrimitiveText",
+  componentId: "kitt-universal__sc-8bfguf-0"
+})(["", " ", ";", ""], textResetMixin, function (_ref2) {
+  var selectable = _ref2.selectable;
+  return selectable == null ? undefined : "user-select: ".concat(selectable ? 'text' : 'none');
+}, function (_ref3) {
+  var numberOfLines = _ref3.numberOfLines;
+  return numberOfLines ? "\n    display: -webkit-box;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: ".concat(numberOfLines, ";\n    -webkit-box-orient: vertical;\n    line-clamp: ").concat(numberOfLines, ";\n  ") : '';
+});
+
+function createPressClickHandler(onPress) {
+  if (!onPress) return undefined;
+  return function (event) {
+    event.stopPropagation();
+    onPress(event);
+  };
 }
 
-var IconContainer$2 = /*#__PURE__*/styled.View.withConfig({
+var isValidKeyPress = function (_ref) {
+  var key = _ref.key,
+      target = _ref.target;
+  var role = target.getAttribute('role');
+  return key === 'Enter' || (key === ' ' || key === 'Spacebar') && role === 'button';
+}; // https://github.com/necolas/react-native-web/blob/b2eb3ca03ffc4b8570591b6c2082c6e4edae0e7f/packages/react-native-web/src/modules/usePressEvents/PressResponder.js#L300-L322
+
+
+function createPressKeyUpHandler(onPress) {
+  if (!onPress) return undefined;
+  return function (event) {
+    if (isValidKeyPress(event)) {
+      onPress(event);
+    }
+  };
+}
+
+var StyledDiv = /*#__PURE__*/styled('div').withConfig({
+  displayName: "PrimitiveViewweb__StyledDiv",
+  componentId: "kitt-universal__sc-1t2oiuz-0"
+})(["", " align-items:stretch;display:", ";flex-basis:auto;flex-direction:column;flex-shrink:0;min-height:0;min-width:0;position:'relative';z-index:0;"], resetMixin, function (_ref) {
+  var hasTextAncestor = _ref.hasTextAncestor;
+  return hasTextAncestor ? 'inline-flex' : 'flex';
+});
+var PrimitiveView = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      className = _ref2.className,
+      style = _ref2.style,
+      accessibilityRole = _ref2.accessibilityRole,
+      nativeID = _ref2.nativeID,
+      testID = _ref2.testID,
+      tabIndex = _ref2.tabIndex,
+      onPress = _ref2.onPress;
+  var hasTextAncestor = React.useContext(PrimitiveTextAncestorContext);
+  return /*#__PURE__*/React.createElement(StyledDiv, {
+    ref: ref,
+    hasTextAncestor: hasTextAncestor,
+    id: nativeID,
+    className: className,
+    style: style,
+    "data-testid": testID,
+    role: accessibilityRole,
+    tabIndex: tabIndex,
+    onClick: createPressClickHandler(onPress),
+    onKeyUp: createPressKeyUpHandler(onPress)
+  }, children);
+});
+
+var spin = /*#__PURE__*/keyframes(["0%{transform:rotate(-1deg);}100%{transform:rotate(359deg);}"]);
+var SpinningIcon = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  displayName: "SpinningIconweb__SpinningIcon",
+  componentId: "kitt-universal__sc-xgsnek-0"
+})(["animation:", " 1.1s infinite linear;"], spin);
+
+var IconContainer$2 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
@@ -53,13 +158,13 @@ function Icon(_ref5) {
   }, spin ? /*#__PURE__*/React.createElement(SpinningIcon, null, clonedIcon) : clonedIcon);
 }
 
-var _excluded$9 = ["accessibilityRole", "base", "variant", "color"];
+var _excluded$a = ["accessibilityRole", "base", "variant", "color"];
 var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-var StyledTypography = /*#__PURE__*/styled.Text.withConfig({
+var StyledTypography = /*#__PURE__*/styled(PrimitiveText).withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
 })(["", " ", ""], function (_ref) {
@@ -88,11 +193,11 @@ 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);
+      otherProps = _objectWithoutProperties(_ref3, _excluded$a);
 
   var typeInContext = useContext(TypographyTypeContext);
   var isHeader = isTypographyHeader(base, typeInContext);
@@ -107,11 +212,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
@@ -125,19 +232,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
     }));
   }
 
@@ -147,13 +254,29 @@ 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 */
 
-var _excluded$8 = ["size"];
+Typography.h5 = createHeading(5, 'header5');
+
+var _excluded$9 = ["size"];
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -163,7 +286,7 @@ var getInitials = function (firstname, lastname) {
   return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 };
 
-var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
+var StyledAvatarView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Avatar__StyledAvatarView",
   componentId: "kitt-universal__sc-9miubv-0"
 })(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
@@ -220,7 +343,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
@@ -229,7 +352,55 @@ function Avatar(_ref6) {
   })));
 }
 
-var ButtonContainer = /*#__PURE__*/styled.Pressable.withConfig({
+var getTabIndex = function (_ref) {
+  var focusable = _ref.focusable,
+      disabled = _ref.disabled;
+  if (disabled) return -1;
+  if (focusable === false) return -1;
+  return 0;
+};
+
+var handlePressPreventDefault = function (e) {
+  e.preventDefault();
+};
+
+var PrimitivePressableWithClassName = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var disabled = _ref2.disabled,
+      focusable = _ref2.focusable,
+      children = _ref2.children,
+      className = _ref2.className,
+      accessibilityRole = _ref2.accessibilityRole,
+      nativeID = _ref2.nativeID,
+      testID = _ref2.testID,
+      onPress = _ref2.onPress;
+  return /*#__PURE__*/React.createElement(PrimitiveView, {
+    ref: ref,
+    nativeID: nativeID,
+    testID: testID,
+    className: className,
+    "aria-disabled": !!disabled,
+    accessibilityRole: accessibilityRole
+    /* https://necolas.github.io/react-native-web/docs/accessibility/#keyboard-focus */
+    ,
+    tabIndex: getTabIndex({
+      focusable: focusable,
+      disabled: disabled
+    }),
+    onPress: disabled ? handlePressPreventDefault : onPress
+  }, children);
+});
+var PrimitivePressable = /*#__PURE__*/styled(PrimitivePressableWithClassName).withConfig({
+  displayName: "PrimitivePressableweb__PrimitivePressable",
+  componentId: "kitt-universal__sc-1pzco2e-0"
+})(["cursor:", ";touch-action:", ";"], function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled ? 'none' : 'manipulation';
+});
+
+var ButtonContainer = /*#__PURE__*/styled(PrimitivePressable).withConfig({
   displayName: "ButtonContainer",
   componentId: "kitt-universal__sc-ofbpwm-0"
 })(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], function (_ref) {
@@ -272,7 +443,7 @@ var ButtonContainer = /*#__PURE__*/styled.Pressable.withConfig({
   return theme.kitt.button.borderWidth;
 });
 
-var _excluded$7 = ["color"],
+var _excluded$8 = ["color"],
     _excluded2$2 = ["color"];
 
 function TypographyIconInheritColor(props) {
@@ -285,7 +456,7 @@ function TypographyIconInheritColor(props) {
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$7);
+      otherProps = _objectWithoutProperties(_ref, _excluded$8);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
@@ -329,7 +500,7 @@ var ButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "ButtonContent__ButtonText",
   componentId: "kitt-universal__sc-dnyw3n-0"
 })(["text-align:center;"]);
-var Content$1 = /*#__PURE__*/styled.View.withConfig({
+var Content$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "ButtonContent__Content",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], function (_ref) {
@@ -337,7 +508,7 @@ var Content$1 = /*#__PURE__*/styled.View.withConfig({
       iconOnly = _ref.iconOnly;
   return "".concat(stretch || iconOnly ? 1 : 0, " 1 auto");
 });
-var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
+var IconContainer$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "ButtonContent__IconContainer",
   componentId: "kitt-universal__sc-dnyw3n-2"
 })(["", ""], function (_ref2) {
@@ -387,7 +558,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');
     }
@@ -475,7 +646,7 @@ function Button(_ref) {
   }), children));
 }
 
-var Container$5 = /*#__PURE__*/styled.View.withConfig({
+var Container$5 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
@@ -573,11 +744,11 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var FieldContainer = /*#__PURE__*/styled.View.withConfig({
+var FieldContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "InputField__FieldContainer",
   componentId: "kitt-universal__sc-13fkixs-0"
 })(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
+var FeedbackContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "InputField__FeedbackContainer",
   componentId: "kitt-universal__sc-13fkixs-1"
 })(["", ";"], function (_ref) {
@@ -586,14 +757,14 @@ var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
     minWidth: KittBreakpoints.SMALL
   }, 'padding-top: 10px', 'padding-top: 5px');
 });
-var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
+var FieldLabelContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "InputField__FieldLabelContainer",
   componentId: "kitt-universal__sc-13fkixs-2"
 })(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.inputField.labelContainerPaddingBottom;
 });
-var LabelContainer = /*#__PURE__*/styled.View.withConfig({
+var LabelContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "InputField__LabelContainer",
   componentId: "kitt-universal__sc-13fkixs-3"
 })(["margin-right:", "px;"], function (_ref3) {
@@ -636,7 +807,7 @@ var useInputText = function () {
   };
 };
 
-var _excluded$6 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
+var _excluded$7 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
 var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
   var theme = _ref.theme,
       state = _ref.state;
@@ -662,7 +833,7 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
-var Input = /*#__PURE__*/styled.TextInput.withConfig({
+var Input = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__Input",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, function (_ref8) {
@@ -677,7 +848,7 @@ var Input = /*#__PURE__*/styled.TextInput.withConfig({
   var minHeight = _ref10.minHeight;
   return minHeight;
 });
-var Container$4 = /*#__PURE__*/styled.View.withConfig({
+var Container$4 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "InputText__Container",
   componentId: "kitt-universal__sc-uke279-1"
 })(["margin-top:", ";margin-bottom:", ";"], function (_ref11) {
@@ -687,7 +858,7 @@ var Container$4 = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref12.theme;
   return theme.kitt.forms.input.marginBottom;
 });
-var PasswordButtonContainer = /*#__PURE__*/styled.Pressable.withConfig({
+var PasswordButtonContainer = /*#__PURE__*/styled(PrimitivePressable).withConfig({
   displayName: "InputText__PasswordButtonContainer",
   componentId: "kitt-universal__sc-uke279-2"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], function (_ref13) {
@@ -740,7 +911,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
       disabled = _ref15$disabled === void 0 ? false : _ref15$disabled,
       _onFocus = _ref15.onFocus,
       _onBlur = _ref15.onBlur,
-      props = _objectWithoutProperties(_ref15, _excluded$6);
+      props = _objectWithoutProperties(_ref15, _excluded$7);
 
   var _useInputText = useInputText(),
       isFocused = _useInputText.isFocused,
@@ -778,6 +949,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),
@@ -796,7 +968,7 @@ function Label(_ref) {
   }, children));
 }
 
-var OuterRadio = /*#__PURE__*/styled.View.withConfig({
+var OuterRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], function (_ref) {
@@ -820,7 +992,7 @@ var OuterRadio = /*#__PURE__*/styled.View.withConfig({
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = /*#__PURE__*/styled.View.withConfig({
+var SelectedOuterRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Radio__SelectedOuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-1"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
@@ -836,7 +1008,7 @@ var SelectedOuterRadio = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
+var SelectedInnerRadio = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Radio__SelectedInnerRadio",
   componentId: "kitt-universal__sc-1mdgr2o-2"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
@@ -852,7 +1024,7 @@ var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$3 = /*#__PURE__*/styled.Pressable.withConfig({
+var Container$3 = /*#__PURE__*/styled(PrimitivePressable).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -876,7 +1048,7 @@ function Radio(_ref16) {
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
-    accessible: checked && !disabled,
+    focusable: checked && !disabled,
     onPress: function handlePress() {
       onChange(value);
     }
@@ -900,7 +1072,7 @@ function TextArea(_ref) {
   }));
 }
 
-var Body = /*#__PURE__*/styled.View.withConfig({
+var Body = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], function (_ref) {
@@ -917,7 +1089,7 @@ function FullScreenModalBody(_ref3) {
   return /*#__PURE__*/React.createElement(Body, null, children);
 }
 
-var SideContainer = /*#__PURE__*/styled.View.withConfig({
+var SideContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Header__SideContainer",
   componentId: "kitt-universal__sc-dfmxi1-0"
 })(["", ""], function (_ref) {
@@ -937,7 +1109,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = /*#__PURE__*/styled.View.withConfig({
+var Header = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
@@ -955,7 +1127,7 @@ var Header = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = /*#__PURE__*/styled.View.withConfig({
+var HeaderContent = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Header__HeaderContent",
   componentId: "kitt-universal__sc-dfmxi1-2"
 })(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
@@ -1041,7 +1213,7 @@ function FullScreenModalHeader(_ref6) {
   }, right) : null);
 }
 
-var Container$2 = /*#__PURE__*/styled.View.withConfig({
+var Container$2 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], function (_ref) {
@@ -1055,21 +1227,112 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-var _excluded$5 = ["children"];
-var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
+var PressableIconButton = /*#__PURE__*/styled(PrimitivePressable).withConfig({
+  displayName: "PressableIconButton",
+  componentId: "kitt-universal__sc-1m6jo3s-0"
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], 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,
+      color = _ref4.color,
+      disabled = _ref4.disabled;
+  var iconButton = theme.kitt.iconButton;
+  var transition = iconButton.transition,
+      scale = iconButton.scale;
+
+  if (disabled) {
+    return "\n        background-color: ".concat(iconButton.disabled.backgroundColor, ";\n      ");
+  }
+
+  return "\n      transition: ".concat(transition.property, " ").concat(transition.duration, " ").concat(transition.timingFunction, ";\n\n      &:hover,\n      .kitt-hover & {\n        @media (hover: none) and (pointer: coarse) {\n          transform: scale(").concat(scale.base.hover, ");\n        }\n\n        @media(").concat(theme.breakpoints.min.mediumBreakpoint, ") {\n          transform: scale(").concat(scale.medium.hover, ");\n        }\n      }\n\n      &:active,\n      .kitt-active & {\n        transform: scale(").concat(scale.base.active, ");\n      }\n\n      &:hover,\n      .kitt-hover &,\n      &:focus,\n      .kitt-focus &,\n      &:active,\n      .kitt-active & {\n        background-color: ").concat(color === 'white' ? iconButton.white.pressedBackgroundColor : iconButton["default"].pressedBackgroundColor, ";\n      }\n    ");
+});
+
+function WebAnimatedContainer(_ref) {
+  var children = _ref.children,
+      color = _ref.color,
+      disabled = _ref.disabled,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/React.createElement(PressableIconButton, {
+    accessibilityRole: "button",
+    color: color,
+    disabled: disabled,
+    onPress: onPress
+  }, children);
+}
+
+var PressableAnimatedContainer = WebAnimatedContainer;
+
+var IconButtonContentBorder = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  displayName: "IconButton__IconButtonContentBorder",
+  componentId: "kitt-universal__sc-swelbf-0"
+})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], 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$6 = ["children"];
+var ContentView$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/React.createElement(ContentView$1, rest, children);
 }
 
-var _excluded$4 = ["children", "side"],
+var _excluded$5 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
-var SideContainerView = /*#__PURE__*/styled.View.withConfig({
+var SideContainerView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -1086,13 +1349,13 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$4);
+      rest = _objectWithoutProperties(_ref3, _excluded$5);
 
   return /*#__PURE__*/React.createElement(SideContainerView, _extends({
     side: side
   }, rest), children);
 }
-var SideContentView = /*#__PURE__*/styled.View.withConfig({
+var SideContentView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "ListItemSideContent__SideContentView",
   componentId: "kitt-universal__sc-1vajiw-1"
 })(["align-self:", ";"], function (_ref4) {
@@ -1110,8 +1373,12 @@ function ListItemSideContent(_ref5) {
   }, rest), children);
 }
 
-var _excluded$3 = ["children", "withPadding", "borders", "left", "right"];
-var ContainerView = /*#__PURE__*/styled.View.withConfig({
+var _excluded$4 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+
+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 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -1149,12 +1416,19 @@ function ListItem(_ref5) {
       borders = _ref5.borders,
       left = _ref5.left,
       right = _ref5.right,
-      rest = _objectWithoutProperties(_ref5, _excluded$3);
+      onPress = _ref5.onPress,
+      rest = _objectWithoutProperties(_ref5, _excluded$4);
 
-  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"
@@ -1164,24 +1438,43 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-var styles = {"LargeLoader":"kitt-universal_LargeLoader_2A0eh","LargeLoaderFill":"kitt-universal_LargeLoaderFill_Djwa0","LargeLoaderRotation":"kitt-universal_LargeLoaderRotation_2o_Qn","LargeLoaderOffset":"kitt-universal_LargeLoaderOffset_2BAlg","LargeLoaderBase":"kitt-universal_LargeLoaderBase_2OJIP","LargeLoaderInit":"kitt-universal_LargeLoaderInit_3jmWG","rotation":"kitt-universal_rotation_3DR0L"};
-
+var init = /*#__PURE__*/keyframes(["0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:0;}"]);
+var offset = /*#__PURE__*/keyframes(["0%{stroke-dashoffset:169.64px;}100%{stroke-dashoffset:34px;}"]);
+var rotate = /*#__PURE__*/keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
+var LargeLoaderContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "LargeLoaderweb__LargeLoaderContainer",
+  componentId: "kitt-universal__sc-18y4z3t-0"
+})(["width:60px;height:60px;transform:scale(-1) rotate(90deg);"]);
+var LargeLoaderCircleMixin = /*#__PURE__*/css(["transform-origin:center center;stroke-width:3px;stroke-dasharray:169.64px;stroke-dashoffset:169.64px;stroke-linecap:round;"]);
+var LargeLoaderFill = /*#__PURE__*/styled.g.withConfig({
+  displayName: "LargeLoaderweb__LargeLoaderFill",
+  componentId: "kitt-universal__sc-18y4z3t-1"
+})(["transform-origin:center center;animation:", " 1.8s linear 0.5s infinite;"], rotate);
+var LargeLoaderBase = /*#__PURE__*/styled.g.withConfig({
+  displayName: "LargeLoaderweb__LargeLoaderBase",
+  componentId: "kitt-universal__sc-18y4z3t-2"
+})(["transform-origin:center center;"]);
+var LargeLoaderBaseCircle = /*#__PURE__*/styled.circle.withConfig({
+  displayName: "LargeLoaderweb__LargeLoaderBaseCircle",
+  componentId: "kitt-universal__sc-18y4z3t-3"
+})(["", " stroke:#ccc;animation:", " 1s cubic-bezier(0.39,0.575,0.565,1) 0.5s forwards;"], LargeLoaderCircleMixin, init);
+var LargeLoaderFillCircle = /*#__PURE__*/styled.circle.withConfig({
+  displayName: "LargeLoaderweb__LargeLoaderFillCircle",
+  componentId: "kitt-universal__sc-18y4z3t-4"
+})(["", " stroke:", ";animation:", " 1.8s cubic-bezier(0.39,0.575,0.565,1) 0.5s infinite alternate,", " 2.16s linear 0.5s infinite;"], LargeLoaderCircleMixin, function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.colors.primary;
+}, offset, rotate);
 function LargeLoader() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.LargeLoader
-  }, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(LargeLoaderContainer, null, /*#__PURE__*/React.createElement("svg", {
     width: "60",
     height: "60"
-  }, /*#__PURE__*/React.createElement("g", {
-    className: styles.LargeLoaderBase
-  }, /*#__PURE__*/React.createElement("circle", {
+  }, /*#__PURE__*/React.createElement(LargeLoaderBase, null, /*#__PURE__*/React.createElement(LargeLoaderBaseCircle, {
     cx: "30",
     cy: "30",
     r: "27",
     fill: "none"
-  })), /*#__PURE__*/React.createElement("g", {
-    className: styles.LargeLoaderFill
-  }, /*#__PURE__*/React.createElement("circle", {
+  })), /*#__PURE__*/React.createElement(LargeLoaderFill, null, /*#__PURE__*/React.createElement(LargeLoaderFillCircle, {
     cx: "30",
     cy: "30",
     r: "27",
@@ -1204,7 +1497,7 @@ function Loader(_ref) {
 
 var xIconSize = 14;
 var mainIconSize = 20;
-var Container$1 = /*#__PURE__*/styled.View.withConfig({
+var Container$1 = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Message__Container",
   componentId: "kitt-universal__sc-c6400e-0"
 })(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], function (_ref) {
@@ -1231,7 +1524,7 @@ var Container$1 = /*#__PURE__*/styled.View.withConfig({
       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 = /*#__PURE__*/styled.TouchableOpacity.withConfig({
+var CloseContainer = /*#__PURE__*/styled(TouchableOpacity).withConfig({
   displayName: "Message__CloseContainer",
   componentId: "kitt-universal__sc-c6400e-1"
 })(["margin-left:", "px;padding:", "px;"], function (_ref7) {
@@ -1241,14 +1534,14 @@ var CloseContainer = /*#__PURE__*/styled.TouchableOpacity.withConfig({
   var theme = _ref8.theme;
   return theme.kitt.spacing;
 });
-var IconContainer = /*#__PURE__*/styled.View.withConfig({
+var IconContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Message__IconContainer",
   componentId: "kitt-universal__sc-c6400e-2"
 })(["margin-right:", "px;"], function (_ref9) {
   var theme = _ref9.theme;
   return theme.kitt.spacing * 4;
 });
-var Content = /*#__PURE__*/styled.Text.withConfig({
+var Content = /*#__PURE__*/styled(PrimitiveText).withConfig({
   displayName: "Message__Content",
   componentId: "kitt-universal__sc-c6400e-3"
 })(["text-align:", ";flex:1;"], function (_ref10) {
@@ -1323,7 +1616,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 = /*#__PURE__*/styled.Pressable.withConfig({
+var OverlayPressable = /*#__PURE__*/styled(PrimitivePressable).withConfig({
   displayName: "Overlay__OverlayPressable",
   componentId: "kitt-universal__sc-1cz1gbr-0"
 })(function (_ref) {
@@ -1335,11 +1628,25 @@ var OverlayPressable = /*#__PURE__*/styled.Pressable.withConfig({
 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 BodyView = /*#__PURE__*/styled.View.withConfig({
+var _excluded$3 = ["contentContainerStyle", "children"];
+var PrimitiveScrollView = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var contentContainerStyle = _ref.contentContainerStyle,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  return /*#__PURE__*/React.createElement(PrimitiveView, _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(PrimitiveView, {
+    style: contentContainerStyle
+  }, children));
+});
+
+var BodyView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Body__BodyView",
   componentId: "kitt-universal__sc-17fwpo4-0"
 })(["padding:", "px ", "px;"], function (_ref) {
@@ -1349,14 +1656,12 @@ var BodyView = /*#__PURE__*/styled.View.withConfig({
   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 FooterView = /*#__PURE__*/styled.View.withConfig({
+var FooterView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Footer__FooterView",
   componentId: "kitt-universal__sc-1ujq2dc-0"
 })(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
@@ -1373,7 +1678,7 @@ function ModalFooter(_ref3) {
 
 var OnCloseContext = /*#__PURE__*/createContext(function () {});
 
-var HeaderView = /*#__PURE__*/styled.View.withConfig({
+var HeaderView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Header__HeaderView",
   componentId: "kitt-universal__sc-1iwabch-0"
 })(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
@@ -1383,21 +1688,21 @@ var HeaderView = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = /*#__PURE__*/styled.View.withConfig({
+var LeftIconView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Header__LeftIconView",
   componentId: "kitt-universal__sc-1iwabch-1"
 })(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = /*#__PURE__*/styled.View.withConfig({
+var RightIconView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Header__RightIconView",
   componentId: "kitt-universal__sc-1iwabch-2"
 })(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = /*#__PURE__*/styled.View.withConfig({
+var TitleView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Header__TitleView",
   componentId: "kitt-universal__sc-1iwabch-3"
 })(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
@@ -1420,7 +1725,7 @@ function ModalHeader(_ref6) {
   })));
 }
 
-var ModalView = /*#__PURE__*/styled.View.withConfig({
+var ModalView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Modal__ModalView",
   componentId: "kitt-universal__sc-1xy2w5u-0"
 })(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
@@ -1430,7 +1735,7 @@ var ModalView = /*#__PURE__*/styled.View.withConfig({
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = /*#__PURE__*/styled.View.withConfig({
+var ContentView = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Modal__ContentView",
   componentId: "kitt-universal__sc-1xy2w5u-1"
 })(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", ";background-color:", ";"], function (_ref3) {
@@ -1483,11 +1788,120 @@ function Notification(_ref) {
   }, children);
 }
 
-var StoryTitleContainer = /*#__PURE__*/styled.View.withConfig({
+var PrimitiveTextWithClassName = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      onPress = _ref.onPress;
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
+  // if (href) {
+  //   return (
+  //     <a ref={ref} href={href} className={className}>
+  //       {children}
+  //     </a>
+  //   );
+  // }
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    role: "button",
+    className: className,
+    tabIndex: onPress ? 0 : -1,
+    onClick: createPressClickHandler(onPress),
+    onKeyUp: createPressKeyUpHandler(onPress)
+  }, children);
+});
+var PrimitiveLink = /*#__PURE__*/styled(PrimitiveTextWithClassName).withConfig({
+  displayName: "PrimitiveLinkweb__PrimitiveLink",
+  componentId: "kitt-universal__sc-24w4og-0"
+})(["", " background-color:transparent;color:inherit;font:inherit;list-style:none;text-align:inherit;text-decoration:none;", ";", ";"], textResetMixin, function (_ref2) {
+  var selectable = _ref2.selectable;
+  return selectable == null ? undefined : "user-select: ".concat(selectable ? 'none' : 'text');
+}, function (_ref3) {
+  var onPress = _ref3.onPress;
+  return onPress ? 'cursor: pointer;' : undefined;
+});
+
+var Flex = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
+    return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
+  }
+}).withConfig({
+  displayName: "Flex",
+  componentId: "kitt-universal__sc-15q3v3h-0"
+})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], 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 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 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  displayName: "StoryBlock__StyledStoryBlockView",
+  componentId: "kitt-universal__sc-3w4hdm-0"
+})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], 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 StoryTitleContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "StoryTitle__StoryTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-0"
 })(["margin-bottom:30px;"]);
-var StorySubTitleContainer = /*#__PURE__*/styled.View.withConfig({
+var StorySubTitleContainer = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "StoryTitle__StorySubTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-1"
 })(["margin-bottom:10px;"]);
@@ -1495,10 +1909,10 @@ 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));
 }
@@ -1507,10 +1921,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));
 }
@@ -1521,11 +1935,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));
 }
@@ -1536,11 +1950,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));
 }
@@ -1550,24 +1964,40 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var _excluded$2 = ["title", "className", "children"],
-    _excluded2 = ["title", "className", "children"];
-var StyledSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Section__StyledSection",
-  componentId: "kitt-universal__sc-x4z1s-0"
-})(["margin-bottom:30px;"]);
-function Section(_ref) {
+var StoryContainer$1 = /*#__PURE__*/styled(PrimitiveScrollView).withConfig({
+  displayName: "Story__StoryContainer",
+  componentId: "kitt-universal__sc-1kwdg2p-0"
+})(["padding:", "px;"], 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 StyledSection = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledSection",
+  componentId: "kitt-universal__sc-1b3liv5-0"
+})(["margin-bottom:32px;"]);
+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 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Section__StyledSubSection",
-  componentId: "kitt-universal__sc-x4z1s-1"
-})(["margin-bottom:20px;"]);
+var StyledSubSection = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledSubSection",
+  componentId: "kitt-universal__sc-1b3liv5-1"
+})(["margin-bottom:16px;"]);
 
 function SubSection(_ref2) {
   var title = _ref2.title;
@@ -1578,32 +2008,55 @@ function SubSection(_ref2) {
   return /*#__PURE__*/React.createElement(StyledSubSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level3, null, title), children);
 }
 
-var StyledDemoSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Section__StyledDemoSection",
-  componentId: "kitt-universal__sc-x4z1s-2"
-})(["margin-bottom:90px;"]);
+var StyledBlockSection = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledBlockSection",
+  componentId: "kitt-universal__sc-1b3liv5-2"
+})(["margin-bottom:16px;"]);
 
-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 = /*#__PURE__*/styled(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledDemoSection",
+  componentId: "kitt-universal__sc-1b3liv5-3"
+})(["margin-bottom:64px;"]);
+
+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 StoryContainer = /*#__PURE__*/styled.ScrollView.withConfig({
-  displayName: "Story__StoryContainer",
-  componentId: "kitt-universal__sc-1kwdg2p-0"
-})(["padding:10px;"]);
-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,
+      state = _ref.state,
+      title = _ref.title,
+      platform = _ref.platform;
+  if (platform === 'native') return null;
+  return /*#__PURE__*/React.createElement(StorySection.BlockSection, {
+    testID: state,
+    title: title
+  }, /*#__PURE__*/React.createElement("div", {
+    className: state ? "kitt-".concat(state) : undefined
+  }, children));
 }
 
 function StoryDecorator(storyFn, context) {
@@ -1612,22 +2065,22 @@ function StoryDecorator(storyFn, context) {
   }, storyFn());
 }
 
-var SmallScreenRow = /*#__PURE__*/styled.View.withConfig({
+var SmallScreenRow = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "StoryGrid__SmallScreenRow",
   componentId: "kitt-universal__sc-4z5new-0"
 })(["flex-direction:column;margin:0;"]);
-var SmallScreenCol = /*#__PURE__*/styled.View.withConfig({
+var SmallScreenCol = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "StoryGrid__SmallScreenCol",
   componentId: "kitt-universal__sc-4z5new-1"
-})(["padding:10px 0 20px;"]);
-var FlexRow = /*#__PURE__*/styled.View.withConfig({
+})(["padding:8px 0 16px;"]);
+var FlexRow = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "StoryGrid__FlexRow",
   componentId: "kitt-universal__sc-4z5new-2"
-})(["flex-direction:row;margin:0 -5px 20px;"]);
-var FlexCol = /*#__PURE__*/styled.View.withConfig({
+})(["flex-direction:row;margin:0 -4px 16px;"]);
+var FlexCol = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "StoryGrid__FlexCol",
   componentId: "kitt-universal__sc-4z5new-3"
-})(["flex-grow:1;flex-basis:0;margin:0 5px 10px;"]);
+})(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
 
 function StoryGridRow(_ref) {
   var children = _ref.children,
@@ -1655,7 +2108,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 === 'native') {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement(StoryTitle.Level4, {
     numberOfLines: 1,
     color: titleColor
@@ -1667,29 +2127,66 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var Container = /*#__PURE__*/styled.View.withConfig({
+var Container = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
   var theme = _ref.theme,
-      type = _ref.type;
-  return theme.kitt.tag[type].backgroundColor;
+      type = _ref.type,
+      variant = _ref.variant;
+  return theme.kitt.tag[type][variant].backgroundColor;
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.tag.padding;
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant;
+  return theme.kitt.tag[type][variant].borderWidth;
 }, function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+      type = _ref3.type,
+      variant = _ref3.variant;
+  return theme.kitt.tag[type][variant].borderColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.tag.padding;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.kitt.tag.borderRadius;
 });
-function Tag(_ref4) {
-  var label = _ref4.label,
-      _ref4$type = _ref4.type,
-      type = _ref4$type === void 0 ? 'default' : _ref4$type;
+var getLabelColor = function (type, variant) {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
+function Tag(_ref6) {
+  var label = _ref6.label,
+      _ref6$type = _ref6.type,
+      type = _ref6$type === void 0 ? 'default' : _ref6$type,
+      _ref6$variant = _ref6.variant,
+      variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
   return /*#__PURE__*/React.createElement(Container, {
-    type: type
+    type: type,
+    variant: variant
   }, /*#__PURE__*/React.createElement(Typography.Text, {
     base: "body-xsmall",
-    color: type === 'primary' ? 'primary-light' : undefined
+    color: getLabelColor(type, variant)
   }, label));
 }
 
@@ -1742,9 +2239,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: {
@@ -1758,6 +2255,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
   }
 };
 
@@ -1886,6 +2391,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,
@@ -1901,15 +2441,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
+    }
   }
 };
 
@@ -1990,9 +2555,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,
@@ -2008,42 +2597,47 @@ 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 StyledLink = /*#__PURE__*/styled(Typography).withConfig({
+var _excluded$1 = ["children", "disabled", "noUnderline", "onPress"];
+var StyledLink = /*#__PURE__*/styled(PrimitiveLink).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['disabled', 'noUnderline'].includes(prop);
   }
 }).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
-})(["text-decoration:", ";", ";margin:0;"], function (_ref) {
+})(["text-decoration:", ";", ""], function (_ref) {
   var noUnderline = _ref.noUnderline;
   return noUnderline ? 'none' : 'underline';
 }, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return "\n  text-decoration-color: inherit;\n  transition: color 0.2s ease-in-out;\n  cursor: ".concat(disabled ? 'not-allowed' : 'pointer', ";\n  ");
+  var disabled = _ref2.disabled,
+      theme = _ref2.theme,
+      noUnderline = _ref2.noUnderline;
+  return "\n    ".concat(disabled ? "color: ".concat(theme.kitt.typography.link.disabledColor, ";") : '', "\n    ").concat("\n  text-decoration-color: inherit;\n  transition: color 0.2s ease-in-out;\n  cursor: ".concat(disabled ? 'not-allowed' : 'pointer', ";\n\n\n  &:hover, &:active, .kitt-hover & {\n    text-decoration: ").concat(noUnderline ? 'underline' : 'none', ";\n  }\n  "));
 });
 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) {
@@ -2071,7 +2665,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];
@@ -2106,11 +2700,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,
@@ -2121,5 +2743,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.web.js.map