@ornikar/kitt-universal 1.0.2 → 1.2.0

package/dist/index-node-14.17.cjs.js

@@ -6,14 +6,19 @@ const _extends = require('@babel/runtime/helpers/extends');
 const kittIcons = require('@ornikar/kitt-icons');
 const React = require('react');
 const reactNative = require('react-native');
-const styled = require('styled-components/native');
+const styled = require('styled-components');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
+const Animated = require('react-native-reanimated');
+const addons = require('@storybook/addons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 const _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
+
+const PrimitiveView = reactNative.View;
 
 function SpinningIcon({
   children
@@ -47,7 +52,7 @@ function SpinningIcon({
   }, children);
 }
 
-const IconContainer$2 = /*#__PURE__*/styled__default.View.withConfig({
+const IconContainer$2 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
@@ -76,12 +81,14 @@ function Icon({
   }, spin ? /*#__PURE__*/React__default.createElement(SpinningIcon, null, clonedIcon) : clonedIcon);
 }
 
+const PrimitiveText = reactNative.Text;
+
 const TypographyTypeContext = /*#__PURE__*/React.createContext(undefined);
 const TypographyColorContext = /*#__PURE__*/React.createContext('black');
 function useTypographyColor() {
   return React.useContext(TypographyColorContext);
 }
-const StyledTypography = /*#__PURE__*/styled__default.Text.withConfig({
+const StyledTypography = /*#__PURE__*/styled__default(PrimitiveText).withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
 })(["", " ", ""], ({
@@ -142,11 +149,13 @@ function Typography({
     color: colorWithDefaultToBlack,
     isHeader: isHeader,
     type: base,
-    variant: nonNullableVariant
+    variant: nonNullableVariant,
+    accessibilityRole: accessibilityRole || undefined
   }, otherProps))) : /*#__PURE__*/React__default.createElement(StyledTypography, _extends__default({
     color: colorWithDefaultToBlack,
     isHeader: isHeader,
-    variant: nonNullableVariant
+    variant: nonNullableVariant,
+    accessibilityRole: accessibilityRole || undefined
   }, otherProps));
   return color ? /*#__PURE__*/React__default.createElement(TypographyColorContext.Provider, {
     value: color
@@ -160,19 +169,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__default.createElement(Typography, _extends__default({
     accessibilityRole: "paragraph"
   }, props));
 }
 
-const createHeading = level => {
+const createHeading = (level, defaultBase) => {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
     return /*#__PURE__*/React__default.createElement(Typography, _extends__default({
-      accessibilityRole: "header"
+      accessibilityRole: "header",
+      base: defaultBase
     }, props, {
-      "aria-level": level
+      accessibilityLevel: level
     }));
   }
 
@@ -182,17 +191,33 @@ const createHeading = 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');
 
 const getFirstCharacter = string => string ? string[0] : '';
 
 const getInitials = (firstname, lastname) => (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 
-const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
+const StyledAvatarView = /*#__PURE__*/styled__default(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;"], ({
@@ -252,7 +277,9 @@ function Avatar({
   })));
 }
 
-const ButtonContainer = /*#__PURE__*/styled__default.Pressable.withConfig({
+const PrimitivePressable = reactNative.Pressable;
+
+const ButtonContainer = /*#__PURE__*/styled__default(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:", ";"], ({
@@ -341,14 +368,14 @@ const ButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
   displayName: "ButtonContent__ButtonText",
   componentId: "kitt-universal__sc-dnyw3n-0"
 })(["text-align:center;"]);
-const Content$1 = /*#__PURE__*/styled__default.View.withConfig({
+const Content$1 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "ButtonContent__Content",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], ({
   stretch,
   iconOnly
 }) => `${stretch || iconOnly ? 1 : 0} 1 auto`);
-const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
+const IconContainer$1 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "ButtonContent__IconContainer",
   componentId: "kitt-universal__sc-dnyw3n-2"
 })(["", ""], ({
@@ -401,7 +428,7 @@ function ButtonContent({
     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');
     }
@@ -479,7 +506,7 @@ function Button({
   }), children));
 }
 
-const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$5 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
@@ -574,11 +601,11 @@ const KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-const FieldContainer = /*#__PURE__*/styled__default.View.withConfig({
+const FieldContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "InputField__FieldContainer",
   componentId: "kitt-universal__sc-13fkixs-0"
 })(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default.View.withConfig({
+const FeedbackContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "InputField__FeedbackContainer",
   componentId: "kitt-universal__sc-13fkixs-1"
 })(["", ";"], ({
@@ -586,13 +613,13 @@ const FeedbackContainer = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.responsive.ifWindowSizeMatches({
   minWidth: KittBreakpoints.SMALL
 }, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default.View.withConfig({
+const FieldLabelContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "InputField__FieldLabelContainer",
   componentId: "kitt-universal__sc-13fkixs-2"
 })(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
   theme
 }) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default.View.withConfig({
+const LabelContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "InputField__LabelContainer",
   componentId: "kitt-universal__sc-13fkixs-3"
 })(["margin-right:", "px;"], ({
@@ -637,7 +664,7 @@ const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";bor
 }) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color], ({
   theme
 }) => theme.kitt.typography.types.bodies.fontFamily.regular);
-const Input = /*#__PURE__*/styled__default.TextInput.withConfig({
+const Input = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
   displayName: "InputText__Input",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
@@ -649,7 +676,7 @@ const Input = /*#__PURE__*/styled__default.TextInput.withConfig({
 }) => !multiline && reactNative.Platform.OS === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight, ({
   minHeight
 }) => minHeight);
-const Container$4 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$4 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "InputText__Container",
   componentId: "kitt-universal__sc-uke279-1"
 })(["margin-top:", ";margin-bottom:", ";"], ({
@@ -657,7 +684,7 @@ const Container$4 = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.forms.input.marginTop, ({
   theme
 }) => theme.kitt.forms.input.marginBottom);
-const PasswordButtonContainer = /*#__PURE__*/styled__default.Pressable.withConfig({
+const PasswordButtonContainer = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
   displayName: "InputText__PasswordButtonContainer",
   componentId: "kitt-universal__sc-uke279-2"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], ({
@@ -746,6 +773,7 @@ const InputText = /*#__PURE__*/React.forwardRef(({
       if (onBlur) onBlur(e);
     }
   })), type === 'password' && !disabled && /*#__PURE__*/React__default.createElement(PasswordButtonContainer, {
+    accessibilityRole: "button",
     onPress: togglePasswordVisibility
   }, /*#__PURE__*/React__default.createElement(TypographyIcon, {
     icon: isPasswordVisible ? /*#__PURE__*/React__default.createElement(kittIcons.EyeIcon, null) : /*#__PURE__*/React__default.createElement(kittIcons.EyeOffIcon, null),
@@ -765,7 +793,7 @@ function Label({
   }, children) : children);
 }
 
-const OuterRadio = /*#__PURE__*/styled__default.View.withConfig({
+const OuterRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], ({
@@ -783,7 +811,7 @@ const OuterRadio = /*#__PURE__*/styled__default.View.withConfig({
   theme,
   disabled
 }) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor);
-const SelectedOuterRadio = /*#__PURE__*/styled__default.View.withConfig({
+const SelectedOuterRadio = /*#__PURE__*/styled__default(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;"], ({
@@ -795,7 +823,7 @@ const SelectedOuterRadio = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.forms.radio.size, ({
   theme
 }) => theme.kitt.forms.radio.size / 2);
-const SelectedInnerRadio = /*#__PURE__*/styled__default.View.withConfig({
+const SelectedInnerRadio = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Radio__SelectedInnerRadio",
   componentId: "kitt-universal__sc-1mdgr2o-2"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], ({
@@ -807,7 +835,7 @@ const SelectedInnerRadio = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
 }) => theme.kitt.forms.radio.checked.innerSize / 2);
-const Container$3 = /*#__PURE__*/styled__default.Pressable.withConfig({
+const Container$3 = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -830,7 +858,7 @@ function Radio({
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
-    accessible: checked && !disabled,
+    focusable: checked && !disabled,
     onPress: () => {
       onChange(value);
     }
@@ -853,7 +881,7 @@ function TextArea({ ...props
   }));
 }
 
-const Body = /*#__PURE__*/styled__default.View.withConfig({
+const Body = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], ({
@@ -871,7 +899,7 @@ function FullScreenModalBody({
   return /*#__PURE__*/React__default.createElement(Body, null, children);
 }
 
-const SideContainer = /*#__PURE__*/styled__default.View.withConfig({
+const SideContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Header__SideContainer",
   componentId: "kitt-universal__sc-dfmxi1-0"
 })(["", ""], ({
@@ -891,7 +919,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-const Header = /*#__PURE__*/styled__default.View.withConfig({
+const Header = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], ({
@@ -909,7 +937,7 @@ const Header = /*#__PURE__*/styled__default.View.withConfig({
 }, ({
   theme
 }) => theme.kitt.fullScreenModal.header.borderColor);
-const HeaderContent = /*#__PURE__*/styled__default.View.withConfig({
+const HeaderContent = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Header__HeaderContent",
   componentId: "kitt-universal__sc-dfmxi1-2"
 })(["", ";", ";justify-content:center;align-items:center;"], ({
@@ -982,7 +1010,7 @@ function FullScreenModalHeader({
   }, right) : null);
 }
 
-const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$2 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], ({
@@ -996,7 +1024,246 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-const ContentView$1 = /*#__PURE__*/styled__default.View.withConfig({
+const PressableIconButton = /*#__PURE__*/styled__default(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;", ";"], ({
+  theme
+}) => theme.kitt.iconButton.borderRadius, ({
+  theme
+}) => theme.kitt.iconButton.width, ({
+  theme
+}) => theme.kitt.iconButton.height, ({
+  theme,
+  color,
+  disabled
+}) => {
+  const {
+    iconButton
+  } = theme.kitt;
+
+  if (reactNative.Platform.OS !== 'web') {
+    return undefined;
+  }
+
+  const {
+    transition,
+    scale
+  } = iconButton;
+
+  if (disabled) {
+    return `
+        background-color: ${iconButton.disabled.backgroundColor};
+      `;
+  }
+
+  return `
+      transition: ${transition.property} ${transition.duration} ${transition.timingFunction};
+
+      &:hover,
+      .kitt-hover & {
+        @media (hover: none) and (pointer: coarse) {
+          transform: scale(${scale.base.hover});
+        }
+
+        @media(${theme.breakpoints.min.mediumBreakpoint}) {
+          transform: scale(${scale.medium.hover});
+        }
+      }
+
+      &:active,
+      .kitt-active & {
+        transform: scale(${scale.base.active});
+      }
+
+      &:hover,
+      .kitt-hover &,
+      &:focus,
+      .kitt-focus &,
+      &:active,
+      .kitt-active & {
+        background-color: ${color === 'white' ? iconButton.white.pressedBackgroundColor : iconButton.default.pressedBackgroundColor};
+      }
+    `;
+});
+
+function WebAnimatedContainer({
+  children,
+  color,
+  disabled,
+  onPress
+}) {
+  return /*#__PURE__*/React__default.createElement(PressableIconButton, {
+    accessibilityRole: "button",
+    color: color,
+    disabled: disabled,
+    onPress: onPress
+  }, children);
+}
+
+const AnimatedIconButtonBackground = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground",
+  componentId: "kitt-universal__sc-xl9ll5-0"
+})(["background-color:", ";border-radius:", "px;width:", "px;height:", "px;position:absolute;bottom:0;left:0;"], ({
+  theme,
+  color,
+  disabled
+}) => {
+  const {
+    iconButton
+  } = theme.kitt;
+  if (disabled) return iconButton.disabled.backgroundColor;
+  if (color === 'white') return iconButton.white.pressedBackgroundColor;
+  return iconButton.default.pressedBackgroundColor;
+}, ({
+  theme
+}) => theme.kitt.iconButton.borderRadius, ({
+  theme
+}) => theme.kitt.iconButton.width, ({
+  theme
+}) => theme.kitt.iconButton.height);
+const AnimatedViewContainer = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
+  displayName: "PressableAnimatedContainer__AnimatedViewContainer",
+  componentId: "kitt-universal__sc-xl9ll5-1"
+})(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
+
+function NativeAnimatedContainer({
+  disabled,
+  color = 'black',
+  children,
+  onPress
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const pressed = Animated.useSharedValue(false);
+  const opacityStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        opacity: Animated.withSpring(pressed.value ? 1 : 0)
+      };
+    };
+
+    _f._closure = {
+      withSpring: Animated.withSpring,
+      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;
+  }());
+  const scaleStyles = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        transform: [{
+          scale: Animated.withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
+        }]
+      };
+    };
+
+    _f._closure = {
+      withSpring: Animated.withSpring,
+      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__default.createElement(PressableIconButton, {
+    accessibilityRole: "button",
+    disabled: disabled,
+    color: color,
+    onPress: onPress,
+    onPressIn: () => {
+      pressed.value = true;
+    },
+    onPressOut: () => {
+      pressed.value = false;
+    }
+  }, /*#__PURE__*/React__default.createElement(AnimatedViewContainer, {
+    style: disabled ? [{
+      transform: [{
+        scale: 1
+      }]
+    }] : [scaleStyles]
+  }, /*#__PURE__*/React__default.createElement(AnimatedIconButtonBackground, {
+    disabled: disabled,
+    color: color,
+    style: disabled ? [{
+      opacity: 1
+    }] : [opacityStyles]
+  }), children));
+}
+
+const PressableAnimatedContainer = reactNative.Platform.OS === 'web' ? WebAnimatedContainer : NativeAnimatedContainer;
+
+const IconButtonContentBorder = /*#__PURE__*/styled__default(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;"], ({
+  theme
+}) => `${theme.kitt.iconButton.borderWidth}px solid`, ({
+  theme,
+  disabled
+}) => disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor, ({
+  theme
+}) => theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth, ({
+  theme
+}) => theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth, ({
+  theme
+}) => theme.kitt.iconButton.borderRadius);
+
+function IconButtonContent({
+  disabled,
+  color,
+  icon
+}) {
+  return /*#__PURE__*/React__default.createElement(IconButtonContentBorder, {
+    disabled: disabled
+  }, /*#__PURE__*/React__default.createElement(TypographyIcon, {
+    color: disabled ? 'black-light' : color,
+    icon: icon
+  }));
+}
+
+function IconButton({
+  icon,
+  color,
+  disabled,
+  onPress
+}) {
+  return /*#__PURE__*/React__default.createElement(PressableAnimatedContainer, {
+    color: color,
+    disabled: disabled,
+    onPress: onPress
+  }, /*#__PURE__*/React__default.createElement(IconButtonContent, {
+    disabled: disabled,
+    color: color,
+    icon: icon
+  }));
+}
+
+const ContentView$1 = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -1007,7 +1274,7 @@ function ListItemContent({
   return /*#__PURE__*/React__default.createElement(ContentView$1, rest, children);
 }
 
-const SideContainerView = /*#__PURE__*/styled__default.View.withConfig({
+const SideContainerView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
@@ -1027,7 +1294,7 @@ function ListItemSideContainer({
     side: side
   }, rest), children);
 }
-const SideContentView = /*#__PURE__*/styled__default.View.withConfig({
+const SideContentView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "ListItemSideContent__SideContentView",
   componentId: "kitt-universal__sc-1vajiw-1"
 })(["align-self:", ";"], ({
@@ -1043,7 +1310,7 @@ function ListItemSideContent({
   }, rest), children);
 }
 
-const ContainerView = /*#__PURE__*/styled__default.View.withConfig({
+const ContainerView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], ({
@@ -1081,12 +1348,20 @@ function ListItem({
   borders,
   left,
   right,
+  onPress,
   ...rest
 }) {
-  return /*#__PURE__*/React__default.createElement(reactNative.Pressable, rest, /*#__PURE__*/React__default.createElement(ContainerView, {
+  const Wrapper = onPress ? PrimitivePressable : React.Fragment;
+  const wrapperProps = onPress ? {
+    accessibilityRole: 'button',
+    onPress,
+    ...rest
+  } : undefined;
+  const containerProps = onPress ? undefined : rest;
+  return /*#__PURE__*/React__default.createElement(Wrapper, wrapperProps, /*#__PURE__*/React__default.createElement(ContainerView, _extends__default({
     withPadding: withPadding,
     borders: borders
-  }, left ? /*#__PURE__*/React__default.createElement(ListItemSideContainer, {
+  }, containerProps), left ? /*#__PURE__*/React__default.createElement(ListItemSideContainer, {
     side: "left"
   }, left) : null, /*#__PURE__*/React__default.createElement(ListItemContent, null, children), right ? /*#__PURE__*/React__default.createElement(ListItemSideContainer, {
     side: "right"
@@ -1125,7 +1400,7 @@ function LargeLoader({
 
 const xIconSize = 14;
 const mainIconSize = 20;
-const Container$1 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$1 = /*#__PURE__*/styled__default(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;"], ({
@@ -1144,7 +1419,7 @@ const Container$1 = /*#__PURE__*/styled__default.View.withConfig({
   theme,
   insets
 }) => (insets?.top ?? 0) + theme.kitt.spacing * 4);
-const CloseContainer = /*#__PURE__*/styled__default.TouchableOpacity.withConfig({
+const CloseContainer = /*#__PURE__*/styled__default(reactNative.TouchableOpacity).withConfig({
   displayName: "Message__CloseContainer",
   componentId: "kitt-universal__sc-c6400e-1"
 })(["margin-left:", "px;padding:", "px;"], ({
@@ -1152,13 +1427,13 @@ const CloseContainer = /*#__PURE__*/styled__default.TouchableOpacity.withConfig(
 }) => theme.kitt.spacing * 4, ({
   theme
 }) => theme.kitt.spacing);
-const IconContainer = /*#__PURE__*/styled__default.View.withConfig({
+const IconContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Message__IconContainer",
   componentId: "kitt-universal__sc-c6400e-2"
 })(["margin-right:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 4);
-const Content = /*#__PURE__*/styled__default.Text.withConfig({
+const Content = /*#__PURE__*/styled__default(PrimitiveText).withConfig({
   displayName: "Message__Content",
   componentId: "kitt-universal__sc-c6400e-3"
 })(["text-align:", ";flex:1;"], ({
@@ -1227,7 +1502,7 @@ function Message({
   })) : null);
 }
 
-const OverlayPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
+const OverlayPressable = /*#__PURE__*/styled__default(PrimitivePressable).withConfig({
   displayName: "Overlay__OverlayPressable",
   componentId: "kitt-universal__sc-1cz1gbr-0"
 })(({
@@ -1239,11 +1514,14 @@ function Overlay({
   onPress
 }) {
   return /*#__PURE__*/React__default.createElement(OverlayPressable, {
+    accessibilityRole: "none",
     onPress: onPress
-  }, /*#__PURE__*/React__default.createElement(reactNative.View, null));
+  }, /*#__PURE__*/React__default.createElement(PrimitiveView, null));
 }
 
-const BodyView = /*#__PURE__*/styled__default.View.withConfig({
+const PrimitiveScrollView = reactNative.ScrollView;
+
+const BodyView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Body__BodyView",
   componentId: "kitt-universal__sc-17fwpo4-0"
 })(["padding:", "px ", "px;"], ({
@@ -1251,15 +1529,13 @@ const BodyView = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.spacing * 6, ({
   theme
 }) => theme.kitt.spacing * 4);
-const ModalBody = /*#__PURE__*/React.forwardRef(({
+function ModalBody({
   children
-}, ref) => {
-  return /*#__PURE__*/React__default.createElement(reactNative.ScrollView, {
-    ref: ref
-  }, /*#__PURE__*/React__default.createElement(BodyView, null, children));
-});
+}) {
+  return /*#__PURE__*/React__default.createElement(PrimitiveScrollView, null, /*#__PURE__*/React__default.createElement(BodyView, null, children));
+}
 
-const FooterView = /*#__PURE__*/styled__default.View.withConfig({
+const FooterView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Footer__FooterView",
   componentId: "kitt-universal__sc-1ujq2dc-0"
 })(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], ({
@@ -1275,7 +1551,7 @@ function ModalFooter({
 
 const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
 
-const HeaderView = /*#__PURE__*/styled__default.View.withConfig({
+const HeaderView = /*#__PURE__*/styled__default(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;"], ({
@@ -1283,19 +1559,19 @@ const HeaderView = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.spacing * 2, ({
   theme
 }) => theme.kitt.colors.separator);
-const LeftIconView = /*#__PURE__*/styled__default.View.withConfig({
+const LeftIconView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Header__LeftIconView",
   componentId: "kitt-universal__sc-1iwabch-1"
 })(["align-self:flex-start;margin-right:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 2);
-const RightIconView = /*#__PURE__*/styled__default.View.withConfig({
+const RightIconView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Header__RightIconView",
   componentId: "kitt-universal__sc-1iwabch-2"
 })(["align-self:flex-start;margin-left:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 2);
-const TitleView = /*#__PURE__*/styled__default.View.withConfig({
+const TitleView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Header__TitleView",
   componentId: "kitt-universal__sc-1iwabch-3"
 })(["padding-left:", "px;flex-shrink:1;"], ({
@@ -1318,7 +1594,7 @@ function ModalHeader({
   })));
 }
 
-const ModalView = /*#__PURE__*/styled__default.View.withConfig({
+const ModalView = /*#__PURE__*/styled__default(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;"], ({
@@ -1326,7 +1602,7 @@ const ModalView = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.spacing * 20, ({
   theme
 }) => theme.kitt.spacing * 4);
-const ContentView = /*#__PURE__*/styled__default.View.withConfig({
+const ContentView = /*#__PURE__*/styled__default(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:", ";"], ({
@@ -1378,11 +1654,81 @@ function Notification({
   }, children);
 }
 
-const StoryTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
+const PrimitiveLink = reactNative.Text;
+
+const Flex = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+  shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
+}).withConfig({
+  displayName: "Flex",
+  componentId: "kitt-universal__sc-15q3v3h-0"
+})(["display:flex;flex-direction:", ";flex-wrap:wrap;padding:", "px;"], ({
+  direction
+}) => direction, ({
+  theme,
+  padding = 0
+}) => padding * theme.kitt.spacing);
+
+const storyPadding = 16;
+
+const getBackgroundColorFromBlockColor = (theme, color = 'transparent') => {
+  switch (color) {
+    case 'dark':
+      return '#293033';
+
+    case 'light':
+      return '#ffffff';
+
+    case 'primary':
+      return theme.kitt.palettes.lateOcean.lateOcean;
+
+    default:
+      return 'transparent';
+  }
+};
+
+const getTypographyColorFromBlockColor = (color = 'transparent') => {
+  switch (color) {
+    case 'dark':
+    case 'primary':
+      return 'white';
+
+    case 'light':
+    default:
+      return 'black';
+  }
+};
+
+const StoryBlockBackgroundContext = /*#__PURE__*/React.createContext('transparent');
+const StoryBlockColorContext = /*#__PURE__*/React.createContext('black');
+const useStoryBlockColor = color => {
+  const storyBlockColor = React.useContext(StoryBlockColorContext);
+  return color || storyBlockColor;
+};
+const StyledStoryBlockView = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+  displayName: "StoryBlock__StyledStoryBlockView",
+  componentId: "kitt-universal__sc-3w4hdm-0"
+})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, ({
+  theme,
+  background
+}) => getBackgroundColorFromBlockColor(theme, background));
+function StoryBlock({
+  children,
+  background
+}) {
+  return /*#__PURE__*/React__default.createElement(StyledStoryBlockView, {
+    background: background
+  }, /*#__PURE__*/React__default.createElement(StoryBlockColorContext.Provider, {
+    value: getTypographyColorFromBlockColor(background)
+  }, /*#__PURE__*/React__default.createElement(StoryBlockBackgroundContext.Provider, {
+    value: background
+  }, children)));
+}
+
+const StoryTitleContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "StoryTitle__StoryTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-0"
 })(["margin-bottom:30px;"]);
-const StorySubTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
+const StorySubTitleContainer = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "StoryTitle__StorySubTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-1"
 })(["margin-bottom:10px;"]);
@@ -1391,10 +1737,10 @@ function StoryTitle({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StoryTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.h1, {
+  return /*#__PURE__*/React__default.createElement(StoryTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header1, {
     variant: "bold",
     base: "header1",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1404,10 +1750,10 @@ function StoryTitleLevel2({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StoryTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.h2, {
+  return /*#__PURE__*/React__default.createElement(StoryTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header2, {
     variant: "bold",
     base: "header2",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1419,11 +1765,11 @@ function StoryTitleLevel3({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StorySubTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.h3, {
+  return /*#__PURE__*/React__default.createElement(StorySubTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header3, {
     variant: "bold",
     base: "header3",
     medium: "header4",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1435,11 +1781,11 @@ function StoryTitleLevel4({
   children,
   numberOfLines
 }) {
-  return /*#__PURE__*/React__default.createElement(StorySubTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.h4, {
+  return /*#__PURE__*/React__default.createElement(StorySubTitleContainer, null, /*#__PURE__*/React__default.createElement(Typography.Header4, {
     variant: "bold",
     base: "header4",
     medium: "header5",
-    color: color,
+    color: useStoryBlockColor(color),
     numberOfLines: numberOfLines
   }, children));
 }
@@ -1449,22 +1795,38 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-const StyledSection = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Section__StyledSection",
-  componentId: "kitt-universal__sc-x4z1s-0"
-})(["margin-bottom:30px;"]);
-function Section({
+const StoryContainer$1 = /*#__PURE__*/styled__default(PrimitiveScrollView).withConfig({
+  displayName: "Story__StoryContainer",
+  componentId: "kitt-universal__sc-1kwdg2p-0"
+})(["padding:", "px;"], storyPadding);
+function Story({
+  title,
+  contentContainerStyle,
+  children
+}) {
+  return /*#__PURE__*/React__default.createElement(StoryContainer$1, {
+    contentContainerStyle: contentContainerStyle
+  }, /*#__PURE__*/React__default.createElement(StoryTitle, null, title), children);
+}
+
+const StyledSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledSection",
+  componentId: "kitt-universal__sc-1b3liv5-0"
+})(["margin-bottom:32px;"]);
+function StorySection({
   title,
   className,
   children,
+  internalIsDemoSection,
   ...props
 }) {
+  if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
   return /*#__PURE__*/React__default.createElement(StyledSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level2, null, title), children);
 }
-const StyledSubSection = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Section__StyledSubSection",
-  componentId: "kitt-universal__sc-x4z1s-1"
-})(["margin-bottom:20px;"]);
+const StyledSubSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledSubSection",
+  componentId: "kitt-universal__sc-1b3liv5-1"
+})(["margin-bottom:16px;"]);
 
 function SubSection({
   title,
@@ -1475,34 +1837,55 @@ function SubSection({
   return /*#__PURE__*/React__default.createElement(StyledSubSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level3, null, title), children);
 }
 
-const StyledDemoSection = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Section__StyledDemoSection",
-  componentId: "kitt-universal__sc-x4z1s-2"
-})(["margin-bottom:90px;"]);
+const StyledBlockSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledBlockSection",
+  componentId: "kitt-universal__sc-1b3liv5-2"
+})(["margin-bottom:16px;"]);
+
+function BlockSection({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/React__default.createElement(StyledBlockSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level4, null, title), children);
+}
+
+const StyledDemoSection = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
+  displayName: "StorySection__StyledDemoSection",
+  componentId: "kitt-universal__sc-1b3liv5-3"
+})(["margin-bottom:64px;"]);
 
 function DemoSection({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(StyledDemoSection, null, /*#__PURE__*/React__default.createElement(Section, {
+  return /*#__PURE__*/React__default.createElement(StyledDemoSection, null, /*#__PURE__*/React__default.createElement(StorySection, {
+    internalIsDemoSection: true,
     title: "Demo"
   }, children));
 }
 
-Section.SubSection = SubSection;
-Section.DemoSection = DemoSection;
+StorySection.SubSection = SubSection;
+StorySection.BlockSection = BlockSection;
+/** @deprecated use StorySection.Demo instead */
 
-const StoryContainer = /*#__PURE__*/styled__default.ScrollView.withConfig({
-  displayName: "Story__StoryContainer",
-  componentId: "kitt-universal__sc-1kwdg2p-0"
-})(["padding:10px;"]);
-function Story({
+StorySection.DemoSection = DemoSection;
+StorySection.Demo = DemoSection;
+/** @deprecated use StorySection instead */
+
+const DeprecatedSection = StorySection;
+
+function StoryContainer({
+  children,
   title,
-  contentContainerStyle,
-  children
+  state = 'none',
+  platform = 'all'
 }) {
-  return /*#__PURE__*/React__default.createElement(StoryContainer, {
-    contentContainerStyle: contentContainerStyle
-  }, /*#__PURE__*/React__default.createElement(StoryTitle, null, title), children);
+  if (platform === 'web') return null;
+  return /*#__PURE__*/React__default.createElement(StorySection.BlockSection, {
+    testID: state,
+    title: title
+  }, children);
 }
 
 function StoryDecorator(storyFn, context) {
@@ -1511,22 +1894,22 @@ function StoryDecorator(storyFn, context) {
   }, storyFn());
 }
 
-const SmallScreenRow = /*#__PURE__*/styled__default.View.withConfig({
+const SmallScreenRow = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "StoryGrid__SmallScreenRow",
   componentId: "kitt-universal__sc-4z5new-0"
 })(["flex-direction:column;margin:0;"]);
-const SmallScreenCol = /*#__PURE__*/styled__default.View.withConfig({
+const SmallScreenCol = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "StoryGrid__SmallScreenCol",
   componentId: "kitt-universal__sc-4z5new-1"
-})(["padding:10px 0 20px;"]);
-const FlexRow = /*#__PURE__*/styled__default.View.withConfig({
+})(["padding:8px 0 16px;"]);
+const FlexRow = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "StoryGrid__FlexRow",
   componentId: "kitt-universal__sc-4z5new-2"
-})(["flex-direction:row;margin:0 -5px 20px;"]);
-const FlexCol = /*#__PURE__*/styled__default.View.withConfig({
+})(["flex-direction:row;margin:0 -4px 16px;"]);
+const FlexCol = /*#__PURE__*/styled__default(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({
   children,
@@ -1549,8 +1932,19 @@ function StoryGridRow({
 function StoryGridCol({
   title,
   titleColor,
-  children
+  children,
+  platform = 'all'
 }) {
+  const isNative = reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android';
+
+  if (reactNative.Platform.OS === 'web' && platform === 'native') {
+    return null;
+  }
+
+  if (isNative && platform === 'web') {
+    return null;
+  }
+
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title ? /*#__PURE__*/React__default.createElement(StoryTitle.Level4, {
     numberOfLines: 1,
     color: titleColor
@@ -1562,26 +1956,60 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-const Container = /*#__PURE__*/styled__default.View.withConfig({
+const Container = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
   theme,
-  type
-}) => theme.kitt.tag[type].backgroundColor, ({
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].backgroundColor, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderWidth, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderColor, ({
   theme
 }) => theme.kitt.tag.padding, ({
   theme
 }) => theme.kitt.tag.borderRadius);
+const getLabelColor = (type, variant) => {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
 function Tag({
   label,
-  type = 'default'
+  type = 'default',
+  variant = 'fill'
 }) {
   return /*#__PURE__*/React__default.createElement(Container, {
-    type: type
+    type: type,
+    variant: variant
   }, /*#__PURE__*/React__default.createElement(Typography.Text, {
     base: "body-xsmall",
-    color: type === 'primary' ? 'primary-light' : undefined
+    color: getLabelColor(type, variant)
   }, label));
 }
 
@@ -1634,9 +2062,9 @@ const 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: {
@@ -1650,6 +2078,14 @@ const 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
   }
 };
 
@@ -1778,6 +2214,41 @@ const fullScreenModalLateOceanTheme = {
   }
 };
 
+const 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
+  }
+};
+
 const listItemLateOceanTheme = {
   padding: '12px 16px',
   borderColor: colorsLateOceanTheme.separator,
@@ -1793,15 +2264,40 @@ const 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
+    }
   }
 };
 
@@ -1878,9 +2374,33 @@ const typographyLateOceanTheme = {
         'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
       }
     }
+  },
+  link: {
+    disabledColor: lateOceanColorPalette.black200
   }
 };
 
+const 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'
+  }
+};
 const theme = {
   spacing: 4,
   colors: colorsLateOceanTheme,
@@ -1896,41 +2416,54 @@ const theme = {
   tag: tagLateOceanTheme,
   shadows: shadowsLateOceanTheme,
   fullScreenModal: fullScreenModalLateOceanTheme,
+  iconButton,
   listItem: listItemLateOceanTheme
 };
 
 function Tooltip({
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(reactNative.View, null, children);
+  return /*#__PURE__*/React__default.createElement(PrimitiveView, null, children);
 }
 
-const StyledLink = /*#__PURE__*/styled__default(Typography).withConfig({
+const StyledLink = /*#__PURE__*/styled__default(PrimitiveLink).withConfig({
   shouldForwardProp: prop => !['disabled', 'noUnderline'].includes(prop)
 }).withConfig({
   displayName: "TypographyLink__StyledLink",
   componentId: "kitt-universal__sc-1o1zy30-0"
-})(["text-decoration:", ";", ";margin:0;"], ({
+})(["text-decoration:", ";", ""], ({
   noUnderline
 }) => noUnderline ? 'none' : 'underline', ({
-  disabled
-}) => reactNative.Platform.OS === 'web' ? `
+  disabled,
+  theme,
+  noUnderline
+}) => `
+    ${disabled ? `color: ${theme.kitt.typography.link.disabledColor};` : ''}
+    ${reactNative.Platform.OS === 'web' ? `
   text-decoration-color: inherit;
   transition: color 0.2s ease-in-out;
   cursor: ${disabled ? 'not-allowed' : 'pointer'};
-  ` : null);
+
+
+  &:hover, &:active, .kitt-hover & {
+    text-decoration: ${noUnderline ? 'underline' : 'none'};
+  }
+  ` : ''}`);
 function TypographyLink({
+  children,
   disabled,
   noUnderline,
-  variant = 'bold',
+  onPress,
   ...otherProps
 }) {
-  return /*#__PURE__*/React__default.createElement(StyledLink, _extends__default({
+  return /*#__PURE__*/React__default.createElement(Typography, _extends__default({}, otherProps, {
+    accessibilityRole: "none"
+  }), /*#__PURE__*/React__default.createElement(StyledLink, {
     disabled: disabled,
     noUnderline: noUnderline,
-    variant: variant,
-    accessibilityRole: "link"
-  }, otherProps));
+    accessibilityRole: "link",
+    onPress: disabled ? undefined : onPress
+  }, children));
 }
 
 function matchWindowSize(currentWidth, {
@@ -1951,7 +2484,7 @@ function createWindowSizeHelper(currentWidth) {
     matchWindowSize: options => matchWindowSize(currentWidth, options),
     ifWindowSizeMatches: (options, valueIfTrue, valueIfFalse) => matchWindowSize(currentWidth, options) ? valueIfTrue : valueIfFalse,
     mapWindowWidth: (...widthList) => {
-      if (process.env.NODE_ENV !== "production") {
+      if ((process.env.NODE_ENV !== "production")) {
         widthList.slice(1).forEach(([minWidth], index) => {
           const previousMinWidth = widthList[index][0];
 
@@ -1977,11 +2510,42 @@ function useKittTheme() {
   return React.useMemo(() => {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(width)
+      responsive: createWindowSizeHelper(width),
+      breakpoints
     };
   }, [width]);
 }
 
+function KittThemeProvider({
+  children
+}) {
+  const theme = useKittTheme();
+  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+    theme: theme
+  }, children);
+}
+const KittThemeDecorator = addons.makeDecorator({
+  name: 'ThemeDecorator',
+  parameterName: 'theme',
+  wrapper: (storyFn, context, {
+    options = {},
+    parameters = {}
+  }) => {
+    return /*#__PURE__*/React__default.createElement(KittThemeProvider, null, storyFn(context));
+  }
+});
+
+const SafeAreaProviderDecorator = addons.makeDecorator({
+  name: 'SafeAreaProviderDecorator',
+  parameterName: 'safeAreaProvider',
+  wrapper: (storyFn, context, {
+    options = {},
+    parameters = {}
+  }) => {
+    return /*#__PURE__*/React__default.createElement(reactNativeSafeAreaContext.SafeAreaProvider, null, storyFn(context));
+  }
+});
+
 function MatchWindowSize({
   children,
   ...matchWindowSizeOptions
@@ -1995,13 +2559,16 @@ exports.useWindowSize = reactNative.useWindowDimensions;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;
+exports.Flex = Flex;
 exports.FullScreenModal = FullScreenModal;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;
 exports.KittBreakpointsMax = KittBreakpointsMax;
+exports.KittThemeDecorator = KittThemeDecorator;
 exports.Label = Label;
 exports.LargeLoader = LargeLoader;
 exports.ListItem = ListItem;
@@ -2010,11 +2577,20 @@ exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Notification = Notification;
+exports.PrimitiveLink = PrimitiveLink;
+exports.PrimitivePressable = PrimitivePressable;
+exports.PrimitiveScrollView = PrimitiveScrollView;
+exports.PrimitiveText = PrimitiveText;
+exports.PrimitiveView = PrimitiveView;
 exports.Radio = Radio;
-exports.Section = Section;
+exports.SafeAreaProviderDecorator = SafeAreaProviderDecorator;
+exports.Section = DeprecatedSection;
 exports.Story = Story;
+exports.StoryBlock = StoryBlock;
+exports.StoryContainer = StoryContainer;
 exports.StoryDecorator = StoryDecorator;
 exports.StoryGrid = StoryGrid;
+exports.StorySection = StorySection;
 exports.StoryTitle = StoryTitle;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
@@ -2028,6 +2604,7 @@ exports.styledTextInputMixin = styledTextInputMixin;
 exports.theme = theme;
 exports.useKittTheme = useKittTheme;
 exports.useMatchWindowSize = useMatchWindowSize;
+exports.useStoryBlockColor = useStoryBlockColor;
 Object.keys(kittIcons).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = kittIcons[k];
 });