@ornikar/kitt-universal 1.0.0-pre

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

@@ -0,0 +1,1934 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { UserIcon, EyeIcon, EyeOffIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon } from '@ornikar/kitt-icons';
+export * from '@ornikar/kitt-icons';
+import React, { useRef, useEffect, useContext, createContext, useState, forwardRef, useMemo } from 'react';
+import { Animated, Easing, Image, Platform, useWindowDimensions, Pressable, StyleSheet, View, ScrollView, Modal as Modal$1 } from 'react-native';
+export { useWindowDimensions as useWindowSize } from 'react-native';
+import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+
+function SpinningIcon(_ref) {
+  var children = _ref.children;
+  var animationRef = useRef(new Animated.Value(0));
+  var rotation = animationRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  useEffect(function () {
+    if (process.env.TESTS) return undefined;
+    var animation = Animated.loop(Animated.timing(animationRef.current, {
+      toValue: 1,
+      duration: 1100,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }));
+    animation.start();
+    return function () {
+      if (process.env.TESTS) return undefined;
+      animation.stop();
+      return undefined;
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    }
+  }, children);
+}
+
+var _templateObject$p;
+var IconContainer$2 = styled.View(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-self: ", ";\n"])), function (_ref) {
+  var color = _ref.color;
+  return color;
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size;
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size;
+}, function (_ref4) {
+  var _ref4$align = _ref4.align,
+      align = _ref4$align === void 0 ? 'auto' : _ref4$align;
+  return align;
+});
+function Icon(_ref5) {
+  var icon = _ref5.icon,
+      _ref5$size = _ref5.size,
+      size = _ref5$size === void 0 ? 20 : _ref5$size,
+      spin = _ref5.spin,
+      align = _ref5.align,
+      color = _ref5.color;
+  var clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
+    color: color
+  });
+  return /*#__PURE__*/React.createElement(IconContainer$2, {
+    align: align,
+    size: size,
+    color: color
+  }, spin ? /*#__PURE__*/React.createElement(SpinningIcon, null, clonedIcon) : clonedIcon);
+}
+
+var _templateObject$o;
+var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
+var TypographyColorContext = /*#__PURE__*/createContext('black');
+function useTypographyColor() {
+  return useContext(TypographyColorContext);
+}
+var StyledTypography = styled.Text(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n  /* font */\n  ", "\n\n  /* color */\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme,
+      isHeader = _ref.isHeader,
+      type = _ref.type,
+      variant = _ref.variant;
+  var _theme$kitt$typograph = theme.kitt.typography.types,
+      headers = _theme$kitt$typograph.headers,
+      bodies = _theme$kitt$typograph.bodies;
+  return "\n      /* type */\n      ".concat(!type ? '' : "\n  font-family: ".concat(isHeader ? headers.fontFamily[variant] : bodies.fontFamily[variant], ";\n  font-size: ").concat(isHeader ? headers.configs[type].baseAndSmall.fontSize : bodies.configs[type].baseAndSmall.fontSize, ";\n  line-height: ").concat(isHeader ? headers.configs[type].baseAndSmall.lineHeight : bodies.configs[type].baseAndSmall.lineHeight, ";\n    "), "\n\n    /* variant */\n    font-weight: ").concat(isHeader ? headers.fontWeight : bodies.fontWeight[variant], ";\n    font-style: ").concat(isHeader ? headers.fontStyle : bodies.fontStyle[variant], ";\n  ");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      color = _ref2.color;
+  return !color ? '' : "\n  color: ".concat(theme.kitt.typography.colors[color], ";\n  text-decoration-color: ").concat(theme.kitt.typography.colors[color], ";\n  ");
+});
+
+var isTypeHeader = function (type) {
+  return type.startsWith('header');
+};
+
+var isTypographyHeader = function (base, typeInContext) {
+  if (base) return isTypeHeader(base);
+  if (typeInContext) return isTypeHeader(typeInContext);
+  throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
+};
+
+function Typography(_ref3) {
+  _ref3.accessibilityRole;
+      var base = _ref3.base,
+      variant = _ref3.variant,
+      color = _ref3.color,
+      otherProps = _objectWithoutProperties(_ref3, ["accessibilityRole", "base", "variant", "color"]);
+
+  var typeInContext = useContext(TypographyTypeContext);
+  var isHeader = isTypographyHeader(base, typeInContext);
+  var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
+  var colorWithDefaultToBlack = color !== null && color !== void 0 ? color : typeInContext ? undefined : 'black';
+  var content = base ?
+  /*#__PURE__*/
+  // use the type and pass the type to the context for children
+  React.createElement(TypographyTypeContext.Provider, {
+    value: base
+  }, /*#__PURE__*/React.createElement(StyledTypography, _extends({
+    color: colorWithDefaultToBlack,
+    isHeader: isHeader,
+    type: base,
+    variant: nonNullableVariant
+  }, otherProps))) : /*#__PURE__*/React.createElement(StyledTypography, _extends({
+    color: colorWithDefaultToBlack,
+    isHeader: isHeader,
+    variant: nonNullableVariant
+  }, otherProps));
+  return color ? /*#__PURE__*/React.createElement(TypographyColorContext.Provider, {
+    value: color
+  }, content) : content;
+}
+
+function TypographyText(props) {
+  return /*#__PURE__*/React.createElement(Typography, _extends({
+    accessibilityRole: null
+  }, 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) {
+  // https://github.com/necolas/react-native-web/issues/401
+  function TypographyHeading(props) {
+    return /*#__PURE__*/React.createElement(Typography, _extends({
+      accessibilityRole: "header"
+    }, props, {
+      "aria-level": level
+    }));
+  }
+
+  TypographyHeading.displayName = "TypographyHeading".concat(level);
+  return TypographyHeading;
+};
+
+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');
+
+var _templateObject$n;
+
+var getFirstCharacter = function (string) {
+  return string ? string[0] : '';
+};
+
+var getInitials = function (firstname, lastname) {
+  return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
+};
+
+var StyledAvatarView = styled.View(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  height: ", "px;\n  width: ", "px;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+  var round = _ref.round,
+      size = _ref.size;
+  return round ? size / 2 : 10;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      light = _ref2.light;
+  return light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar["default"].backgroundColor;
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size;
+}, function (_ref4) {
+  var size = _ref4.size;
+  return size;
+});
+
+function AvatarContent(_ref5) {
+  var _ref5$size = _ref5.size,
+      size = _ref5$size === void 0 ? 40 : _ref5$size,
+      src = _ref5.src,
+      firstname = _ref5.firstname,
+      lastname = _ref5.lastname,
+      light = _ref5.light;
+
+  if (src) {
+    return /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: src
+      },
+      style: {
+        width: size,
+        height: size
+      }
+    });
+  }
+
+  if (firstname && lastname) {
+    return /*#__PURE__*/React.createElement(Typography.Text, {
+      base: "body-small",
+      variant: "bold",
+      color: light ? 'black' : 'white'
+    }, getInitials(firstname, lastname));
+  }
+
+  return /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(UserIcon, null),
+    color: light ? 'black' : 'white',
+    size: size / 2
+  });
+}
+
+function Avatar(_ref6) {
+  var _ref6$size = _ref6.size,
+      size = _ref6$size === void 0 ? 40 : _ref6$size,
+      rest = _objectWithoutProperties(_ref6, ["size"]);
+
+  return /*#__PURE__*/React.createElement(StyledAvatarView, _extends({}, rest, {
+    size: size
+  }), /*#__PURE__*/React.createElement(AvatarContent, _extends({}, rest, {
+    size: size
+  })));
+}
+
+var _templateObject$m;
+var ButtonContainer = styled.Pressable(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  min-width: ", ";\n  max-width: ", ";\n  width: ", ";\n  min-height: ", ";\n  background-color: ", ";\n  padding: ", ";\n  flex-direction: row;\n\n  /* Emulate inline-* css display by making the button taking only its necessary space */\n  align-self: flex-start;\n  border-radius: ", ";\n  border-color: ", ";\n  border-width: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.button.minWidth;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      stretch = _ref2.stretch;
+  return stretch ? 'auto' : theme.kitt.button.maxWidth;
+}, function (_ref3) {
+  var stretch = _ref3.stretch;
+  return stretch ? '100%' : 'auto';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.button.minHeight;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      isPressed = _ref5.isPressed,
+      disabled = _ref5.disabled,
+      type = _ref5.type;
+
+  if (disabled) {
+    return theme.kitt.button[type].disabledBackgroundColor;
+  }
+
+  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.kitt.button.contentPadding["default"];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.button.borderRadius;
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      disabled = _ref8.disabled,
+      type = _ref8.type;
+  return disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent';
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.button.borderWidth;
+});
+
+function TypographyIconInheritColor(props) {
+  var color = useTypographyColor();
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+    color: theme.kitt.typography.colors[color]
+  }));
+}
+
+function TypographyIconSpecifiedColor(_ref) {
+  var color = _ref.color,
+      otherProps = _objectWithoutProperties(_ref, ["color"]);
+
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
+    color: theme.kitt.typography.colors[color]
+  }));
+}
+
+function TypographyIcon(_ref2) {
+  var color = _ref2.color,
+      otherProps = _objectWithoutProperties(_ref2, ["color"]);
+
+  if (color) {
+    return /*#__PURE__*/React.createElement(TypographyIconSpecifiedColor, _extends({
+      color: color
+    }, otherProps));
+  }
+
+  return /*#__PURE__*/React.createElement(TypographyIconInheritColor, otherProps);
+}
+
+var _templateObject$l, _templateObject2$b, _templateObject3$8;
+
+var getTextColorByType = function (type, isPressed, disabled) {
+  if (disabled) return 'black-light';
+
+  switch (type) {
+    case 'primary':
+      return 'white';
+
+    case 'subtle':
+      return isPressed ? 'primary-light' : 'primary';
+
+    case 'subtle-dark':
+      return isPressed ? 'black-light' : 'black';
+
+    case 'secondary':
+    default:
+      return 'black';
+  }
+};
+
+var ButtonText = styled(Typography.Text)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  /* On native code, this is the only way to ensure that the text is centered */\n  text-align: center;\n"])));
+var Content$1 = styled.View(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n\n  /*\n    On native code flex grow does not work as expected which cause an issue with the flex props.\n    In order to occupy only the needed space, we enable flex grow only when stretched\n  */\n  flex: ", ";\n"])), function (_ref) {
+  var stretch = _ref.stretch,
+      iconOnly = _ref.iconOnly;
+  return "".concat(stretch || iconOnly ? 1 : 0, " 1 auto");
+});
+var IconContainer$1 = styled.View(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  var theme = _ref2.theme,
+      iconPosition = _ref2.iconPosition;
+  var value = theme.kitt.spacing * 3;
+
+  if (iconPosition === 'left') {
+    return "margin: 0 ".concat(value, "px 0 0;");
+  }
+
+  return "margin: 0 0 0 ".concat(value, "px;");
+});
+
+function ButtonIcon(_ref3) {
+  var icon = _ref3.icon,
+      spin = _ref3.spin,
+      color = _ref3.color,
+      size = _ref3.size,
+      iconPosition = _ref3.iconPosition,
+      testID = _ref3.testID;
+  return /*#__PURE__*/React.createElement(IconContainer$1, {
+    iconPosition: iconPosition
+  }, /*#__PURE__*/React.createElement(TypographyIcon, {
+    icon: icon,
+    spin: spin,
+    color: color,
+    size: size,
+    testID: testID
+  }));
+}
+
+function ButtonContent(_ref4) {
+  var type = _ref4.type,
+      isPressed = _ref4.isPressed,
+      stretch = _ref4.stretch,
+      icon = _ref4.icon,
+      iconPosition = _ref4.iconPosition,
+      iconSpin = _ref4.iconSpin,
+      disabled = _ref4.disabled,
+      children = _ref4.children;
+  var color = getTextColorByType(type, Boolean(isPressed), Boolean(disabled));
+  var theme = useTheme();
+  var sharedIconProps = {
+    spin: iconSpin,
+    color: color,
+    size: theme.kitt.button.iconSize
+  };
+
+  if (!(children || icon)) {
+    throw new Error('kitt(Button): You should provide at least a children or a icon');
+  }
+
+  if (!children) {
+    return /*#__PURE__*/React.createElement(Content$1, {
+      iconOnly: true,
+      stretch: stretch
+    }, /*#__PURE__*/React.createElement(TypographyIcon, _extends({}, sharedIconProps, {
+      icon: icon
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Content$1, {
+    stretch: stretch
+  }, icon && iconPosition === 'left' ? /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, sharedIconProps, {
+    icon: icon,
+    iconPosition: iconPosition,
+    testID: "button-left-icon"
+  })) : null, /*#__PURE__*/React.createElement(ButtonText, {
+    base: "body",
+    color: color,
+    variant: "bold"
+  }, children), icon && iconPosition === 'right' ? /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, sharedIconProps, {
+    icon: icon,
+    iconPosition: iconPosition
+  })) : null);
+}
+
+var useButton = function () {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPressed = _useState2[0],
+      setIsPressed = _useState2[1];
+
+  return {
+    isPressed: isPressed,
+    handleButtonPressIn: function handleButtonPressIn() {
+      return setIsPressed(true);
+    },
+    handleButtonPressOut: function handleButtonPressOut() {
+      return setIsPressed(false);
+    }
+  };
+};
+
+function Button(_ref) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'secondary' : _ref$type,
+      icon = _ref.icon,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
+      iconSpin = _ref.iconSpin,
+      stretch = _ref.stretch,
+      disabled = _ref.disabled,
+      onPress = _ref.onPress,
+      testID = _ref.testID;
+
+  var _useButton = useButton(),
+      isPressed = _useButton.isPressed,
+      handleButtonPressIn = _useButton.handleButtonPressIn,
+      handleButtonPressOut = _useButton.handleButtonPressOut;
+
+  var sharedProps = {
+    type: type,
+    stretch: stretch,
+    disabled: disabled
+  };
+  return /*#__PURE__*/React.createElement(ButtonContainer // eslint-disable-next-line unicorn/expiring-todo-comments
+  // TODO: When designs are defined, update with the proper onPress styles to mimic TouchableHighlight
+  // underlayColor={globalTheme.button[type].pressedBackgroundColor}
+  , _extends({}, sharedProps, {
+    isPressed: isPressed,
+    accessibilityRole: "button",
+    testID: testID,
+    onPress: onPress,
+    onPressIn: handleButtonPressIn,
+    onPressOut: handleButtonPressOut
+  }), /*#__PURE__*/React.createElement(ButtonContent, _extends({}, sharedProps, {
+    icon: icon,
+    iconPosition: iconPosition,
+    iconSpin: iconSpin
+  }), children));
+}
+
+var _templateObject$k;
+var Container$5 = styled.View(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme,
+      type = _ref.type;
+  return theme.kitt.card[type].backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.card.padding;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.card.borderRadius;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.card.borderWidth;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      type = _ref5.type;
+  return theme.kitt.card[type].borderColor;
+});
+function Card(_ref6) {
+  var children = _ref6.children,
+      type = _ref6.type;
+  return /*#__PURE__*/React.createElement(Container$5, {
+    type: type
+  }, children);
+}
+
+var getColorFromState = function (state) {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    default:
+      return 'grey';
+  }
+};
+
+function InputFeedback(_ref) {
+  var state = _ref.state,
+      testID = _ref.testID,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(Typography.Text, {
+    base: "body-small",
+    color: getColorFromState(state),
+    testID: testID
+  }, children);
+}
+
+var _templateObject$j, _templateObject2$a, _templateObject3$7, _templateObject4$5;
+var FieldContainer = styled.View(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  padding: 5px 0 10px;\n"]))); // eslint-disable-next-line unicorn/expiring-todo-comments
+// TODO: https://ornikar.atlassian.net/browse/INSTRUCTOR-202
+// @media (--small-breakpoint) {
+//   padding: 10px 0;
+// }
+
+var FeedbackContainer = styled.View(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  padding-top: 5px;\n"])));
+var FieldLabelContainer = styled.View(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.reactForms.labelContainerPaddingBottom;
+});
+var LabelContainer = styled.View(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.reactForms.iconMarginLeft;
+});
+function InputField(_ref3) {
+  var label = _ref3.label,
+      labelFeedback = _ref3.labelFeedback,
+      input = _ref3.input,
+      feedback = _ref3.feedback;
+  return /*#__PURE__*/React.createElement(FieldContainer, null, label ? /*#__PURE__*/React.createElement(FieldLabelContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, label), labelFeedback) : null, input, feedback ? /*#__PURE__*/React.createElement(FeedbackContainer, null, feedback) : null);
+}
+
+var useInputText = function () {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isPasswordVisible = _useState4[0],
+      setIsPasswordVisible = _useState4[1];
+
+  return {
+    isFocused: isFocused,
+    handleInputFocus: function handleInputFocus() {
+      return setIsFocused(true);
+    },
+    handleInputBlur: function handleInputBlur() {
+      return setIsFocused(false);
+    },
+    togglePasswordVisibility: function togglePasswordVisibility() {
+      return setIsPasswordVisible(function (isVisible) {
+        return !isVisible;
+      });
+    },
+    isPasswordVisible: isPasswordVisible
+  };
+};
+
+var _templateObject$i, _templateObject2$9, _templateObject3$6, _templateObject4$4;
+var styledTextInputMixin = css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-property-value-allowed-list */\n  background-color: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  font-size: ", ";\n  color: ", ";\n  font-family: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme,
+      state = _ref.state;
+  return state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.forms.input.borderWidth;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.forms.input.borderRadius;
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      state = _ref4.state;
+  return theme.kitt.forms.input.states[state].borderColor;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.typography.types.bodies.configs.body.baseAndSmall.fontSize;
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      state = _ref6.state;
+  return theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.typography.types.bodies.fontFamily.regular;
+});
+var Input = styled.TextInput(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-bang-space-before */\n  /* stylelint-disable comment-word-disallowed-list */\n\n  /* FIXME: text input is not vertically centered on iOS because of bigger line-height */\n  ", "\n  padding: ", ";\n  line-height: ", ";\n  min-height: ", "px;\n"])), styledTextInputMixin, function (_ref8) {
+  var theme = _ref8.theme,
+      multiline = _ref8.multiline;
+  return !multiline && Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding;
+}, function (_ref9) {
+  var theme = _ref9.theme,
+      multiline = _ref9.multiline;
+  return !multiline && Platform.OS === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight;
+}, function (_ref10) {
+  var minHeight = _ref10.minHeight;
+  return minHeight;
+});
+var Container$4 = styled.View(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.kitt.forms.input.marginTop;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.kitt.forms.input.marginBottom;
+});
+var PasswordButtonContainer = styled.Pressable(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  justify-content: center;\n  padding: ", "px;\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.kitt.forms.input.passwordButtonIconSize / 2;
+});
+
+var getInputState = function (_ref14) {
+  var isDisabled = _ref14.isDisabled,
+      isFocused = _ref14.isFocused,
+      formState = _ref14.formState;
+  if (isDisabled) return 'disabled';
+  if (isFocused) return 'focus';
+  if (formState === 'invalid') return 'invalid';
+  return 'default';
+};
+
+var keyboardTypeByTextInputType = {
+  text: 'default',
+  email: 'email-address',
+  password: 'default',
+  username: 'default'
+};
+var autoCompleteTypeByType = {
+  text: 'off',
+  email: 'email',
+  password: 'password',
+  username: 'name'
+};
+var autoCorrectByType = {
+  text: true,
+  email: false,
+  password: false,
+  username: false
+};
+var textContentTypeByType = {
+  text: 'none',
+  email: 'emailAddress',
+  password: 'password',
+  username: 'username'
+};
+var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
+  var id = _ref15.id,
+      _ref15$minHeight = _ref15.minHeight,
+      minHeight = _ref15$minHeight === void 0 ? 0 : _ref15$minHeight,
+      type = _ref15.type,
+      formState = _ref15.state,
+      internalForceState = _ref15.internalForceState,
+      _ref15$disabled = _ref15.disabled,
+      disabled = _ref15$disabled === void 0 ? false : _ref15$disabled,
+      _onFocus = _ref15.onFocus,
+      _onBlur = _ref15.onBlur,
+      props = _objectWithoutProperties(_ref15, ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"]);
+
+  var _useInputText = useInputText(),
+      isFocused = _useInputText.isFocused,
+      handleInputBlur = _useInputText.handleInputBlur,
+      handleInputFocus = _useInputText.handleInputFocus,
+      isPasswordVisible = _useInputText.isPasswordVisible,
+      togglePasswordVisibility = _useInputText.togglePasswordVisibility;
+
+  var theme = useTheme();
+  var state = internalForceState || getInputState({
+    isFocused: isFocused,
+    isDisabled: disabled,
+    formState: formState
+  });
+  return /*#__PURE__*/React.createElement(Container$4, null, /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref,
+    nativeID: id,
+    editable: !disabled,
+    keyboardType: keyboardTypeByTextInputType[type],
+    autoCompleteType: autoCompleteTypeByType[type],
+    autoCorrect: autoCorrectByType[type],
+    minHeight: minHeight,
+    textContentType: textContentTypeByType[type],
+    placeholderTextColor: theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor],
+    selectionColor: theme.kitt.forms.input.selectionColor,
+    secureTextEntry: type === 'password' && !isPasswordVisible
+  }, props, {
+    state: state,
+    onFocus: function onFocus(e) {
+      handleInputFocus();
+      if (_onFocus) _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      handleInputBlur();
+      if (_onBlur) _onBlur(e);
+    }
+  })), type === 'password' && !disabled && /*#__PURE__*/React.createElement(PasswordButtonContainer, {
+    onPress: togglePasswordVisibility
+  }, /*#__PURE__*/React.createElement(TypographyIcon, {
+    icon: isPasswordVisible ? /*#__PURE__*/React.createElement(EyeIcon, null) : /*#__PURE__*/React.createElement(EyeOffIcon, null),
+    size: theme.kitt.forms.input.passwordButtonIconSize,
+    color: theme.kitt.forms.input.states[state].passwordButtonIconColor
+  })));
+});
+
+function Label(_ref) {
+  var htmlFor = _ref.htmlFor,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(Typography.Text, {
+    base: "body"
+  }, Platform.OS === 'web' ? /*#__PURE__*/React.createElement("label", {
+    htmlFor: htmlFor
+  }, children) : children);
+}
+
+var _templateObject$h, _templateObject2$8, _templateObject3$5, _templateObject4$3, _templateObject5;
+var OuterRadio = styled.View(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme,
+      disabled = _ref.disabled;
+  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.forms.radio.size;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.forms.radio.size;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.forms.radio.size / 2;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.forms.radio.unchecked.borderWidth;
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      disabled = _ref6.disabled;
+  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
+});
+var SelectedOuterRadio = styled.View(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.forms.radio.checked.backgroundColor;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.kitt.forms.radio.size;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.forms.radio.size;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.kitt.forms.radio.size / 2;
+});
+var SelectedInnerRadio = styled.View(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.kitt.forms.radio.checked.innerBackgroundColor;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.kitt.forms.radio.checked.innerSize;
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.kitt.forms.radio.checked.innerSize;
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.kitt.forms.radio.checked.innerSize / 2;
+});
+var Container$3 = styled.Pressable(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n"])));
+var Text = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n"])), function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.kitt.spacing * 2;
+});
+function Radio(_ref16) {
+  var id = _ref16.id,
+      checked = _ref16.checked,
+      onChange = _ref16.onChange,
+      value = _ref16.value,
+      _ref16$disabled = _ref16.disabled,
+      disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
+      children = _ref16.children;
+  return /*#__PURE__*/React.createElement(Container$3, {
+    nativeID: id,
+    disabled: disabled,
+    accessibilityRole: "radio",
+    "aria-checked": checked,
+    accessible: checked && !disabled,
+    onPress: function handlePress() {
+      onChange(value);
+    }
+  }, checked && !disabled ? /*#__PURE__*/React.createElement(SelectedOuterRadio, null, /*#__PURE__*/React.createElement(SelectedInnerRadio, null)) : /*#__PURE__*/React.createElement(OuterRadio, {
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(Text, {
+    base: "body",
+    color: disabled ? 'black-light' : 'black'
+  }, children));
+}
+
+function TextArea(_ref) {
+  var props = _extends({}, _ref);
+
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(InputText, _extends({
+    multiline: true
+  }, props, {
+    type: "text",
+    minHeight: theme.kitt.forms.input.textAreaMinHeight
+  }));
+}
+
+var KittBreakpoints = {
+  /**
+   * min-width: 0
+   */
+  BASE: 0,
+
+  /**
+   * min-width: 480px
+   */
+  SMALL: 480,
+
+  /**
+   * min-width: 768px
+   */
+  MEDIUM: 768,
+
+  /**
+   * min-width: 1024px
+   */
+  LARGE: 1024,
+
+  /**
+   * min-width: 1280px
+   */
+  WIDE: 1280
+};
+
+var _templateObject$g;
+var Body = styled.View(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  flex: 1;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, "padding-right: ".concat(theme.kitt.spacing * 12, "px;\n      padding-left: ").concat(theme.kitt.spacing * 12, "px;"), "padding-right: ".concat(theme.kitt.spacing * 6, "px;\n      padding-left: ").concat(theme.kitt.spacing * 6, "px;"));
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.uiBackgroundLight;
+});
+function FullScreenModalBody(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(Body, null, children);
+}
+
+var _templateObject$f, _templateObject2$7, _templateObject3$4;
+var SideContainer = styled.View(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme,
+      _ref$side = _ref.side,
+      side = _ref$side === void 0 ? 'left' : _ref$side;
+  var padding = theme.kitt.spacing * 2;
+
+  if (side === 'left') {
+    return "padding-right: ".concat(padding, "px;");
+  }
+
+  return "padding-left: ".concat(padding, "px;");
+});
+
+function getHeaderHorizontalMediumPadding(spacing) {
+  return spacing * 6;
+}
+
+var Header = styled.View(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  ", ";\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  flex-direction: row;\n  align-items: center;\n"])), function (_ref2) {
+  var theme = _ref2.theme,
+      _ref2$insetTop = _ref2.insetTop,
+      insetTop = _ref2$insetTop === void 0 ? 0 : _ref2$insetTop;
+  var paddingTop = insetTop + theme.kitt.fullScreenModal.header.padding;
+  var padding = theme.kitt.fullScreenModal.header.padding;
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, "padding: ".concat(paddingTop, "px ").concat(getHeaderHorizontalMediumPadding(theme.kitt.spacing), "px ").concat(padding, "px;"), "padding: ".concat(paddingTop, "px ").concat(padding, "px ").concat(padding, "px;"));
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.fullScreenModal.header.borderColor;
+});
+var HeaderContent = styled.View(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+      leftWidth = _ref4.leftWidth,
+      rightWidth = _ref4.rightWidth,
+      windowWidth = _ref4.windowWidth;
+
+  /*
+   * Since we don't have controll over the rendered left and right elements,
+   * we must apply some logic to give the title all the available space
+   */
+  var sideElementMaxWidth = Math.max(leftWidth, rightWidth);
+  var parentHorizontalPadding = theme.kitt.fullScreenModal.header.padding * 2;
+  var parentHorizontalPaddingMedium = getHeaderHorizontalMediumPadding(theme.kitt.spacing) * 2;
+
+  var computeWidth = function (breakpointPadding) {
+    return windowWidth - breakpointPadding - sideElementMaxWidth * 2;
+  };
+
+  return theme.responsive.ifWindowSizeMatches({
+    minWidth: KittBreakpoints.MEDIUM
+  }, "width: ".concat(computeWidth(parentHorizontalPaddingMedium), "px;"), "width: ".concat(computeWidth(parentHorizontalPadding), "px;"));
+}, function (_ref5) {
+  var leftWidth = _ref5.leftWidth,
+      rightWidth = _ref5.rightWidth;
+  // Depending of the wider element, we must add a margin to fill the diff in space between elements
+  var deltaMargin = Math.abs(leftWidth - rightWidth);
+
+  if (leftWidth > rightWidth) {
+    return "margin-right: ".concat(deltaMargin, "px;");
+  }
+
+  return "margin-left: ".concat(deltaMargin, "px;");
+});
+function FullScreenModalHeader(_ref6) {
+  var children = _ref6.children,
+      right = _ref6.right,
+      left = _ref6.left;
+
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+      top = _useSafeAreaInsets.top;
+
+  var dimensions = useWindowDimensions();
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      leftWidth = _useState2[0],
+      setLeftWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      rightWidth = _useState4[0],
+      setRightWidth = _useState4[1];
+
+  var handleLayoutChange = function (event, side) {
+    // Prevents react to nullify event on rerenders
+    event.persist();
+
+    if (side === 'left') {
+      setLeftWidth(event.nativeEvent.layout.width);
+      return;
+    }
+
+    setRightWidth(event.nativeEvent.layout.width);
+  };
+
+  return /*#__PURE__*/React.createElement(Header, {
+    insetTop: Platform.OS === 'ios' ? undefined : top
+  }, left ? /*#__PURE__*/React.createElement(SideContainer, {
+    onLayout: function onLayout(e) {
+      return handleLayoutChange(e, 'left');
+    }
+  }, left) : null, /*#__PURE__*/React.createElement(HeaderContent, {
+    windowWidth: dimensions.width,
+    leftWidth: leftWidth,
+    rightWidth: rightWidth
+  }, children), right ? /*#__PURE__*/React.createElement(SideContainer, {
+    side: "right",
+    onLayout: function onLayout(e) {
+      return handleLayoutChange(e, 'right');
+    }
+  }, right) : null);
+}
+
+var _templateObject$e;
+var Container$2 = styled.View(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.colors.uiBackground;
+});
+function FullScreenModal(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Container$2, null, children);
+}
+FullScreenModal.Header = FullScreenModalHeader;
+FullScreenModal.Body = FullScreenModalBody;
+
+var lateOceanColorPalette = {
+  lateOcean: '#4C34E0',
+  lateOceanLight1: '#705DE6',
+  lateOceanLight2: '#9485EC',
+  lateOceanLight3: '#D6BAF9',
+  warmEmbrace: '#F4D3CE',
+  warmEmbraceLight1: '#FFEDE6',
+  black1000: '#000000',
+  black555: '#737373',
+  black200: '#CCCCCC',
+  black100: '#E5E5E5',
+  black50: '#F2F2F2',
+  black25: '#F9F9F9',
+  white: '#FFFFFF',
+  viride: '#38836D',
+  englishVermillon: '#D44148',
+  goldCrayola: '#F8C583',
+  aero: '#89BDDD',
+  transparent: 'transparent'
+};
+
+var avatarLateOceanTheme = {
+  "default": {
+    color: lateOceanColorPalette.white,
+    backgroundColor: lateOceanColorPalette.lateOcean
+  },
+  light: {
+    color: lateOceanColorPalette.black1000,
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
+
+var buttonLateOceanTheme = {
+  borderRadius: '30px',
+  borderWidth: '2px',
+  minHeight: '42px',
+  minWidth: '40px',
+  maxWidth: '335px',
+  iconSize: 18,
+  contentPadding: {
+    "default": '8px 16px'
+  },
+  primary: {
+    backgroundColor: lateOceanColorPalette.lateOcean,
+    disabledBackgroundColor: lateOceanColorPalette.black50,
+    pressedBackgroundColor: lateOceanColorPalette.lateOceanLight1,
+    disabledBorderColor: lateOceanColorPalette.black100
+  },
+  secondary: {
+    backgroundColor: lateOceanColorPalette.black50,
+    disabledBackgroundColor: lateOceanColorPalette.black50,
+    pressedBackgroundColor: lateOceanColorPalette.black100,
+    disabledBorderColor: lateOceanColorPalette.black100
+  },
+  subtle: {
+    backgroundColor: lateOceanColorPalette.transparent,
+    disabledBackgroundColor: lateOceanColorPalette.transparent,
+    pressedBackgroundColor: lateOceanColorPalette.transparent,
+    disabledBorderColor: lateOceanColorPalette.transparent
+  },
+  'subtle-dark': {
+    backgroundColor: lateOceanColorPalette.transparent,
+    disabledBackgroundColor: lateOceanColorPalette.transparent,
+    pressedBackgroundColor: lateOceanColorPalette.transparent,
+    disabledBorderColor: lateOceanColorPalette.transparent
+  }
+};
+
+var cardLateOceanTheme = {
+  borderRadius: '20px',
+  borderWidth: '2px',
+  padding: '16px',
+  primary: {
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette.lateOcean
+  },
+  secondary: {
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette.black100
+  },
+  subtle: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+var colorsLateOceanTheme = {
+  primary: lateOceanColorPalette.lateOcean,
+  accent: lateOceanColorPalette.warmEmbrace,
+  accentLight: lateOceanColorPalette.warmEmbraceLight1,
+  success: lateOceanColorPalette.viride,
+  correct: lateOceanColorPalette.viride,
+  danger: lateOceanColorPalette.englishVermillon,
+  separator: lateOceanColorPalette.black100,
+  hover: lateOceanColorPalette.black100,
+  uiBackground: lateOceanColorPalette.black25,
+  uiBackgroundLight: lateOceanColorPalette.white,
+  overlay: {
+    dark: 'rgba(41, 48, 51, 0.25)',
+    light: 'rgba(255, 255, 255, 0.90)',
+    fullscreenLoader: 'rgba(0, 0, 0, 0.25)'
+  }
+};
+
+var feedbackMessageLateOceanTheme = {
+  backgroundColors: {
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon,
+    warning: lateOceanColorPalette.goldCrayola,
+    info: lateOceanColorPalette.aero
+  }
+};
+
+var inputStatesStyle = {
+  "default": {
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette.black100,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  },
+  hover: {
+    borderColor: lateOceanColorPalette.black200,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  },
+  focus: {
+    borderColor: lateOceanColorPalette.lateOcean,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  },
+  disabled: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: lateOceanColorPalette.black100,
+    color: 'black-light',
+    passwordButtonIconColor: 'black-light'
+  },
+  invalid: {
+    borderColor: lateOceanColorPalette.englishVermillon,
+    color: 'black',
+    passwordButtonIconColor: 'black'
+  }
+};
+var inputLateOceanTheme = {
+  marginTop: '2px',
+  marginBottom: '4px',
+  borderWidth: '2px',
+  borderRadius: '10px',
+  passwordButtonIconSize: 20,
+  padding: '7px 16px',
+  paddingSingleLineIOS: '12px 16px',
+  selectionColor: lateOceanColorPalette.lateOcean,
+  placeholderColor: 'black-light',
+  textAreaMinHeight: 120,
+  states: inputStatesStyle
+};
+
+var radioLateOceanTheme = {
+  size: 18,
+  unchecked: {
+    backgroundColor: lateOceanColorPalette.white,
+    borderWidth: '2px',
+    borderColor: lateOceanColorPalette.black200
+  },
+  checked: {
+    backgroundColor: lateOceanColorPalette.lateOcean,
+    innerSize: 5,
+    innerBackgroundColor: lateOceanColorPalette.white
+  },
+  disabled: {
+    backgroundColor: lateOceanColorPalette.black50,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+var formsLateOceanTheme = {
+  input: inputLateOceanTheme,
+  radio: radioLateOceanTheme
+};
+
+var fullScreenModalLateOceanTheme = {
+  header: {
+    padding: 11,
+    borderColor: lateOceanColorPalette.black100
+  }
+};
+
+var listItemLateOceanTheme = {
+  padding: '12px 16px',
+  borderColor: colorsLateOceanTheme.separator,
+  borderWidth: '1px',
+  innerMargin: '8px'
+};
+
+var shadowsLateOceanTheme = {
+  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
+};
+
+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'
+  },
+  "default": {
+    backgroundColor: lateOceanColorPalette.black50
+  },
+  danger: {
+    backgroundColor: lateOceanColorPalette.warmEmbrace
+  }
+};
+
+var calcLineHeight = function (fontSize, lineHeightMultiplier) {
+  return Math.round(fontSize * lineHeightMultiplier);
+};
+
+var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) {
+  return {
+    baseAndSmall: {
+      fontSize: "".concat(baseAndSmallFontSize, "px"),
+      lineHeight: "".concat(calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize), "px")
+    },
+    mediumAndWide: {
+      fontSize: "".concat(mediumAndWideFontSize, "px"),
+      lineHeight: "".concat(calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize), "px")
+    }
+  };
+};
+
+var typographyLateOceanTheme = {
+  colors: {
+    black: lateOceanColorPalette.black1000,
+    'black-light': lateOceanColorPalette.black555,
+    grey: lateOceanColorPalette.black555,
+    'grey-light': lateOceanColorPalette.black200,
+    white: lateOceanColorPalette.white,
+    'white-light': lateOceanColorPalette.white,
+    primary: lateOceanColorPalette.lateOcean,
+    'primary-light': lateOceanColorPalette.lateOceanLight1,
+    accent: lateOceanColorPalette.warmEmbrace,
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon
+  },
+  types: {
+    headers: {
+      fontFamily: {
+        regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        italic: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
+      },
+      fontWeight: 400,
+      fontStyle: 'normal',
+      configs: {
+        // also known as xxlarge
+        header1: createTypographyTypeConfig(1.3, 38, 62),
+        // also known as xlarge
+        header2: createTypographyTypeConfig(1.3, 32, 48),
+        // also known as medium
+        header3: createTypographyTypeConfig(1.3, 24, 36),
+        // also known as xsmall
+        header4: createTypographyTypeConfig(1.3, 18, 24),
+        // also known as xxsmall
+        header5: createTypographyTypeConfig(1.3, 18, 18)
+      }
+    },
+    bodies: {
+      fontFamily: {
+        regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
+        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold',
+        italic: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Italic'
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700,
+        italic: 400
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal',
+        italic: 'italic'
+      },
+      configs: {
+        'body-large': createTypographyTypeConfig(1.6, 18, 24),
+        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
+        body: createTypographyTypeConfig(1.6, 16, 16),
+        'body-small': createTypographyTypeConfig(1.6, 14, 14),
+        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
+      }
+    }
+  }
+};
+
+var theme = {
+  spacing: 4,
+  colors: colorsLateOceanTheme,
+  palettes: {
+    lateOcean: lateOceanColorPalette
+  },
+  avatar: avatarLateOceanTheme,
+  button: buttonLateOceanTheme,
+  card: cardLateOceanTheme,
+  feedbackMessage: feedbackMessageLateOceanTheme,
+  forms: formsLateOceanTheme,
+  typography: typographyLateOceanTheme,
+  tag: tagLateOceanTheme,
+  shadows: shadowsLateOceanTheme,
+  fullScreenModal: fullScreenModalLateOceanTheme,
+  listItem: listItemLateOceanTheme
+};
+
+function matchWindowSize(currentWidth, _ref) {
+  var minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth;
+  return currentWidth >= minWidth && (!maxWidth || currentWidth <= maxWidth);
+}
+
+function createWindowSizeHelper(currentWidth) {
+  return {
+    matchWindowSize: function matchWindowSize$1(options) {
+      return matchWindowSize(currentWidth, options);
+    },
+    ifWindowSizeMatches: function ifWindowSizeMatches(options, valueIfTrue, valueIfFalse) {
+      return matchWindowSize(currentWidth, options) ? valueIfTrue : valueIfFalse;
+    },
+    mapWindowWidth: function mapWindowWidth() {
+      for (var _len = arguments.length, widthList = new Array(_len), _key = 0; _key < _len; _key++) {
+        widthList[_key] = arguments[_key];
+      }
+
+      widthList.slice(1).forEach(function (_ref, index) {
+        var _ref2 = _slicedToArray(_ref, 1),
+            minWidth = _ref2[0];
+
+        var previousMinWidth = widthList[index][0];
+
+        if (previousMinWidth > minWidth) {
+          throw new Error("mapWindowWidth: sort your values to be mobile first. ".concat(minWidth, " is < ").concat(previousMinWidth, ", so ").concat(minWidth, " should be before ").concat(previousMinWidth, "."));
+        }
+      });
+      var found = widthList.find(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            minWidth = _ref4[0];
+            _ref4[1];
+
+        return matchWindowSize(currentWidth, {
+          minWidth: Number(minWidth)
+        });
+      });
+      if (!found) return null;
+      return found[1];
+    }
+  };
+}
+
+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; }
+function KittThemeProvider(_ref) {
+  var children = _ref.children,
+      _ref$appTheme = _ref.appTheme,
+      appTheme = _ref$appTheme === void 0 ? {} : _ref$appTheme;
+
+  var _useWindowSize = useWindowDimensions(),
+      width = _useWindowSize.width;
+
+  var themeWithWindowSizeHelper = useMemo(function () {
+    return _objectSpread$1(_objectSpread$1({
+      kitt: theme
+    }, appTheme), {}, {
+      responsive: createWindowSizeHelper(width)
+    });
+  }, [width, appTheme]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: themeWithWindowSizeHelper
+  }, children);
+}
+
+var _templateObject$d;
+var ContentView$1 = styled.View(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  flex: 1 0 0%;\n  align-self: center;\n"])));
+function ListItemContent(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["children"]);
+
+  return /*#__PURE__*/React.createElement(ContentView$1, rest, children);
+}
+
+var _templateObject$c, _templateObject2$6;
+var SideContainerView = styled.View(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme,
+      side = _ref.side;
+  return side === 'right' ? theme.kitt.listItem.innerMargin : 0;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      side = _ref2.side;
+  return side === 'left' ? theme.kitt.listItem.innerMargin : 0;
+}); // Handles the vertical alignment of the side elements of the list item
+
+function ListItemSideContainer(_ref3) {
+  var children = _ref3.children,
+      _ref3$side = _ref3.side,
+      side = _ref3$side === void 0 ? 'left' : _ref3$side,
+      rest = _objectWithoutProperties(_ref3, ["children", "side"]);
+
+  return /*#__PURE__*/React.createElement(SideContainerView, _extends({
+    side: side
+  }, rest), children);
+}
+var SideContentView = styled.View(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  align-self: ", ";\n"])), function (_ref4) {
+  var align = _ref4.align;
+  return align;
+});
+function ListItemSideContent(_ref5) {
+  var children = _ref5.children,
+      _ref5$align = _ref5.align,
+      align = _ref5$align === void 0 ? 'auto' : _ref5$align,
+      rest = _objectWithoutProperties(_ref5, ["children", "align"]);
+
+  return /*#__PURE__*/React.createElement(SideContentView, _extends({
+    align: align
+  }, rest), children);
+}
+
+var _templateObject$b;
+var ContainerView = styled.View(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  flex-direction: row;\n  padding: ", ";\n  ", ";\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_ref) {
+  var withPadding = _ref.withPadding,
+      theme = _ref.theme;
+  return withPadding ? theme.kitt.listItem.padding : 0;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      borders = _ref2.borders;
+  var borderWidth = theme.kitt.listItem.borderWidth;
+
+  if (borders === 'top') {
+    return "border-top-width: ".concat(borderWidth);
+  }
+
+  if (borders === 'bottom') {
+    return "border-bottom-width: ".concat(borderWidth);
+  }
+
+  if (borders === 'both') {
+    return "border-top-width: ".concat(borderWidth, "; border-bottom-width: ").concat(borderWidth);
+  }
+
+  return 'border: none';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.listItem.borderColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.colors.uiBackgroundLight;
+});
+function ListItem(_ref5) {
+  var children = _ref5.children,
+      withPadding = _ref5.withPadding,
+      borders = _ref5.borders,
+      left = _ref5.left,
+      right = _ref5.right,
+      rest = _objectWithoutProperties(_ref5, ["children", "withPadding", "borders", "left", "right"]);
+
+  return /*#__PURE__*/React.createElement(Pressable, rest, /*#__PURE__*/React.createElement(ContainerView, {
+    withPadding: withPadding,
+    borders: borders
+  }, left ? /*#__PURE__*/React.createElement(ListItemSideContainer, {
+    side: "left"
+  }, left) : null, /*#__PURE__*/React.createElement(ListItemContent, null, children), right ? /*#__PURE__*/React.createElement(ListItemSideContainer, {
+    side: "right"
+  }, right) : null));
+}
+ListItem.Content = ListItemContent;
+ListItem.SideContent = ListItemSideContent;
+ListItem.SideContainer = ListItemSideContainer;
+
+var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2;
+var xIconSize = 14;
+var mainIconSize = 20;
+var Container$1 = styled.View(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n"])), function (_ref) {
+  var theme = _ref.theme,
+      noRadius = _ref.noRadius;
+  return noRadius ? 0 : theme.kitt.spacing * 5;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      type = _ref2.type;
+  return theme.kitt.feedbackMessage.backgroundColors[type];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.spacing * 4;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing * 4;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.kitt.spacing * 4;
+}, function (_ref6) {
+  var _insets$top;
+
+  var theme = _ref6.theme,
+      insets = _ref6.insets;
+  return ((_insets$top = insets === null || insets === void 0 ? void 0 : insets.top) !== null && _insets$top !== void 0 ? _insets$top : 0) + theme.kitt.spacing * 4;
+});
+var CloseContainer = styled.TouchableOpacity(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  padding: ", "px;\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.spacing * 4;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.kitt.spacing;
+});
+var IconContainer = styled.View(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.spacing * 4;
+});
+var Content = styled.Text(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  text-align: ", ";\n  flex: 1;\n"])), function (_ref10) {
+  var centeredText = _ref10.centeredText;
+  return centeredText ? 'center' : 'left';
+});
+
+var getColorByType = function (type) {
+  switch (type) {
+    case 'success':
+      return 'white';
+
+    case 'danger':
+      return 'white';
+
+    case 'warning':
+    default:
+      return 'black';
+  }
+};
+
+function IconContent(_ref11) {
+  var type = _ref11.type;
+
+  switch (type) {
+    case 'warning':
+      return /*#__PURE__*/React.createElement(AlertCircleIcon, null);
+
+    case 'success':
+      return /*#__PURE__*/React.createElement(CheckIcon, null);
+
+    case 'danger':
+      return /*#__PURE__*/React.createElement(AlertTriangleIcon, null);
+
+    default:
+      return /*#__PURE__*/React.createElement(InfoIcon, null);
+  }
+}
+
+function Message(_ref12) {
+  var _ref12$type = _ref12.type,
+      type = _ref12$type === void 0 ? 'info' : _ref12$type,
+      children = _ref12.children,
+      _ref12$noRadius = _ref12.noRadius,
+      noRadius = _ref12$noRadius === void 0 ? false : _ref12$noRadius,
+      _ref12$centeredText = _ref12.centeredText,
+      centeredText = _ref12$centeredText === void 0 ? false : _ref12$centeredText,
+      onDismiss = _ref12.onDismiss,
+      insets = _ref12.insets;
+  var color = getColorByType(type);
+  return /*#__PURE__*/React.createElement(Container$1, {
+    type: type,
+    noRadius: noRadius,
+    insets: insets
+  }, !centeredText ? /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon, {
+    size: mainIconSize,
+    color: color,
+    icon: /*#__PURE__*/React.createElement(IconContent, {
+      type: type
+    })
+  })) : null, /*#__PURE__*/React.createElement(Content, {
+    type: type,
+    centeredText: centeredText
+  }, /*#__PURE__*/React.createElement(Typography.Text, {
+    base: "body-small",
+    color: color
+  }, children)), onDismiss ? /*#__PURE__*/React.createElement(CloseContainer, {
+    onPress: onDismiss
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "x",
+    size: xIconSize,
+    color: color
+  })) : null);
+}
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var OverlayPressable = styled.Pressable(function (_ref) {
+  var theme = _ref.theme;
+  return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
+    backgroundColor: theme.kitt.colors.overlay.dark
+  });
+});
+function Overlay(_ref2) {
+  var onPress = _ref2.onPress;
+  return /*#__PURE__*/React.createElement(OverlayPressable, {
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(View, null));
+}
+
+var _templateObject$9;
+var BodyView = styled.View(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 6;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.spacing * 4;
+});
+var ModalBody = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(ScrollView, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(BodyView, null, children));
+});
+
+var _templateObject$8;
+var FooterView = styled.View(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  padding: ", "px;\n  border-top-width: 1px;\n  border-top-color: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 4;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.separator;
+});
+function ModalFooter(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(FooterView, null, children);
+}
+
+var OnCloseContext = /*#__PURE__*/createContext(function () {});
+
+var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1;
+var HeaderView = styled.View(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: ", "px;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: 1px;\n  border-bottom-color: ", ";\n  min-height: 57px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.colors.separator;
+});
+var LeftIconView = styled.View(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-right: ", "px;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.spacing * 2;
+});
+var RightIconView = styled.View(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-left: ", "px;\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.spacing * 2;
+});
+var TitleView = styled.View(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  flex-shrink: 1;\n"])), function (_ref5) {
+  var theme = _ref5.theme,
+      isIconLeft = _ref5.isIconLeft;
+  return isIconLeft ? 0 : theme.kitt.spacing * 2;
+});
+function ModalHeader(_ref6) {
+  var left = _ref6.left,
+      right = _ref6.right,
+      children = _ref6.children;
+  var onClose = useContext(OnCloseContext);
+  var isIconLeft = !!left;
+  return /*#__PURE__*/React.createElement(HeaderView, null, isIconLeft && /*#__PURE__*/React.createElement(LeftIconView, null, left), /*#__PURE__*/React.createElement(TitleView, {
+    isIconLeft: isIconLeft
+  }, children), right !== undefined ? right : /*#__PURE__*/React.createElement(RightIconView, null, /*#__PURE__*/React.createElement(Button, {
+    type: "subtle-dark",
+    icon: /*#__PURE__*/React.createElement(XIcon, null),
+    onPress: onClose
+  })));
+}
+
+var _templateObject$6, _templateObject2$3;
+var ModalView = styled.View(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", "px ", "px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 20;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.spacing * 4;
+});
+var ContentView = styled.View(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 540px;\n  height: auto;\n  width: 100%;\n  border-radius: ", ";\n  background-color: ", ";\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.card.borderRadius;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.palettes.lateOcean.white;
+});
+function Modal(_ref5) {
+  var visible = _ref5.visible,
+      children = _ref5.children,
+      onClose = _ref5.onClose,
+      onEntered = _ref5.onEntered,
+      onExited = _ref5.onExited;
+  return /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
+    value: onClose
+  }, /*#__PURE__*/React.createElement(Modal$1, {
+    transparent: true,
+    animationType: "fade",
+    visible: visible,
+    onShow: onEntered,
+    onDismiss: onExited,
+    onRequestClose: onClose
+  }, /*#__PURE__*/React.createElement(ModalView, null, /*#__PURE__*/React.createElement(Overlay, {
+    onPress: onClose
+  }), /*#__PURE__*/React.createElement(ContentView, null, children))));
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+function Notification(_ref) {
+  var type = _ref.type,
+      children = _ref.children,
+      centeredText = _ref.centeredText,
+      onDelete = _ref.onDelete;
+
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+      top = _useSafeAreaInsets.top;
+
+  return /*#__PURE__*/React.createElement(Message, {
+    noRadius: true,
+    type: type,
+    centeredText: centeredText,
+    insets: {
+      top: top
+    },
+    onDismiss: onDelete
+  }, children);
+}
+
+var _templateObject$5, _templateObject2$2;
+var StoryTitleContainer = styled.View(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
+var StorySubTitleContainer = styled.View(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n"])));
+function StoryTitle(_ref) {
+  var color = _ref.color,
+      children = _ref.children,
+      numberOfLines = _ref.numberOfLines;
+  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h1, {
+    variant: "bold",
+    base: "header1",
+    color: color,
+    numberOfLines: numberOfLines
+  }, children));
+}
+
+function StoryTitleLevel2(_ref2) {
+  var color = _ref2.color,
+      children = _ref2.children,
+      numberOfLines = _ref2.numberOfLines;
+  return /*#__PURE__*/React.createElement(StoryTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h2, {
+    variant: "bold",
+    base: "header2",
+    color: color,
+    numberOfLines: numberOfLines
+  }, children));
+}
+
+StoryTitleLevel2.displayName = 'StoryTitle.Level2';
+
+function StoryTitleLevel3(_ref3) {
+  var color = _ref3.color,
+      children = _ref3.children,
+      numberOfLines = _ref3.numberOfLines;
+  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h3, {
+    variant: "bold",
+    base: "header3",
+    medium: "header4",
+    color: color,
+    numberOfLines: numberOfLines
+  }, children));
+}
+
+StoryTitleLevel3.displayName = 'StoryTitle.Level3';
+
+function StoryTitleLevel4(_ref4) {
+  var color = _ref4.color,
+      children = _ref4.children,
+      numberOfLines = _ref4.numberOfLines;
+  return /*#__PURE__*/React.createElement(StorySubTitleContainer, null, /*#__PURE__*/React.createElement(Typography.h4, {
+    variant: "bold",
+    base: "header4",
+    medium: "header5",
+    color: color,
+    numberOfLines: numberOfLines
+  }, children));
+}
+
+StoryTitleLevel4.displayName = 'StoryTitle.Level3';
+StoryTitle.Level2 = StoryTitleLevel2;
+StoryTitle.Level3 = StoryTitleLevel3;
+StoryTitle.Level4 = StoryTitleLevel4;
+
+var _templateObject$4, _templateObject2$1, _templateObject3$1;
+var StyledSection = styled.View(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
+function Section(_ref) {
+  var title = _ref.title;
+      _ref.className;
+      var children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["title", "className", "children"]);
+
+  return /*#__PURE__*/React.createElement(StyledSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level2, null, title), children);
+}
+var StyledSubSection = styled.View(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  margin-bottom: 20px;\n"])));
+
+function SubSection(_ref2) {
+  var title = _ref2.title;
+      _ref2.className;
+      var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, ["title", "className", "children"]);
+
+  return /*#__PURE__*/React.createElement(StyledSubSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level3, null, title), children);
+}
+
+var StyledDemoSection = styled.View(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  margin-bottom: 90px;\n"])));
+
+function DemoSection(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(StyledDemoSection, null, /*#__PURE__*/React.createElement(Section, {
+    title: "Demo"
+  }, children));
+}
+
+Section.SubSection = SubSection;
+Section.DemoSection = DemoSection;
+
+var _templateObject$3;
+var StoryContainer = styled.ScrollView(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  padding: 10px;\n"])));
+function Story(_ref) {
+  var title = _ref.title,
+      contentContainerStyle = _ref.contentContainerStyle,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(StoryContainer, {
+    contentContainerStyle: contentContainerStyle
+  }, /*#__PURE__*/React.createElement(StoryTitle, null, title), children);
+}
+
+function StoryDecorator(storyFn, context) {
+  return /*#__PURE__*/React.createElement(Story, {
+    title: context.name
+  }, storyFn());
+}
+
+var _templateObject$2, _templateObject2, _templateObject3, _templateObject4;
+var SmallScreenRow = styled.View(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  margin: 0;\n"])));
+var SmallScreenCol = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 10px 0 20px;\n"])));
+var FlexRow = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin: 0 -5px 20px;\n"])));
+var FlexCol = styled.View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  flex-basis: 0;\n  margin: 0 5px 10px;\n"])));
+
+function StoryGridRow(_ref) {
+  var children = _ref.children,
+      _ref$breakpoint = _ref.breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? 'small' : _ref$breakpoint;
+
+  // eslint-disable-next-line unicorn/expiring-todo-comments
+  // TODO use useBreakpoint instead
+  var _useWindowDimensions = useWindowDimensions(),
+      width = _useWindowDimensions.width;
+
+  var breakpointValue = breakpoint === 'small' ? 480 : 768;
+
+  if (width < breakpointValue) {
+    return /*#__PURE__*/React.createElement(SmallScreenRow, null, React.Children.map(children, function (child) {
+      return /*#__PURE__*/React.createElement(SmallScreenCol, null, child);
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(FlexRow, null, React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.createElement(FlexCol, null, child);
+  }));
+}
+
+function StoryGridCol(_ref2) {
+  var title = _ref2.title,
+      titleColor = _ref2.titleColor,
+      children = _ref2.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement(StoryTitle.Level4, {
+    numberOfLines: 1,
+    color: titleColor
+  }, title) : null, children);
+}
+
+var StoryGrid = {
+  Row: StoryGridRow,
+  Col: StoryGridCol
+};
+
+var StoryComponents = {
+  Section: Section,
+  Story: Story,
+  StoryDecorator: StoryDecorator,
+  StoryGrid: StoryGrid,
+  StoryTitle: StoryTitle
+};
+
+var _templateObject$1;
+var Container = styled.View(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  align-self: flex-start;\n"])), function (_ref) {
+  var theme = _ref.theme,
+      type = _ref.type;
+  return theme.kitt.tag[type].backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.tag.padding;
+}, function (_ref3) {
+  var theme = _ref3.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;
+  return /*#__PURE__*/React.createElement(Container, {
+    type: type
+  }, /*#__PURE__*/React.createElement(Typography.Text, {
+    base: "body-xsmall",
+    color: type === 'primary' ? 'primary-light' : undefined
+  }, label));
+}
+
+function Tooltip(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(View, null, children);
+}
+
+var _templateObject;
+var StyledLink = styled(Typography).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['disabled', 'noUnderline'].includes(prop);
+  }
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-decoration: ", ";\n  ", ";\n  margin: 0;\n"])), function (_ref) {
+  var noUnderline = _ref.noUnderline;
+  return noUnderline ? 'none' : 'underline';
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return Platform.OS === 'web' ? "\n  text-decoration-color: inherit;\n  transition: color 0.2s ease-in-out;\n  cursor: ".concat(disabled ? 'not-allowed' : 'pointer', ";\n  ") : null;
+});
+function TypographyLink(_ref3) {
+  var disabled = _ref3.disabled,
+      noUnderline = _ref3.noUnderline,
+      _ref3$variant = _ref3.variant,
+      variant = _ref3$variant === void 0 ? 'bold' : _ref3$variant,
+      otherProps = _objectWithoutProperties(_ref3, ["disabled", "noUnderline", "variant"]);
+
+  return /*#__PURE__*/React.createElement(StyledLink, _extends({
+    disabled: disabled,
+    noUnderline: noUnderline,
+    variant: variant,
+    accessibilityRole: "link"
+  }, otherProps));
+}
+
+export { Avatar, Button, Card, FullScreenModal, Icon, InputFeedback, InputField, InputText, KittThemeProvider, Label, ListItem, Message, Modal, Notification, Radio, StoryComponents, Tag, TextArea, Tooltip, Typography, TypographyIcon, TypographyLink, createWindowSizeHelper, styledTextInputMixin, theme, useButton };
+//# sourceMappingURL=index-browser-all-dev.es.js.map