@ornikar/kitt-universal 1.0.1 → 1.0.2

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

@@ -1,10 +1,9 @@
 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, LoaderIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import React, { useContext, createContext, useState, forwardRef, useMemo } from 'react';
-import { Image, Platform, useWindowDimensions, Pressable, StyleSheet, View, ScrollView, Modal as Modal$1 } from 'react-native';
+import { Image, useWindowDimensions, Pressable, View, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css } from 'styled-components/native';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -20,8 +19,10 @@ function SpinningIcon(_ref) {
   }, children);
 }
 
-var _templateObject$p;
-var IconContainer$2 = styled.View(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  align-self: ", ";\n"])), function (_ref) {
+var IconContainer$2 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Icon__IconContainer",
+  componentId: "kitt-universal__sc-usm0ol-0"
+})(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
   var color = _ref.color;
   return color;
 }, function (_ref2) {
@@ -53,14 +54,15 @@ function Icon(_ref5) {
 }
 
 var _excluded$9 = ["accessibilityRole", "base", "variant", "color"];
-
-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 StyledTypography = /*#__PURE__*/styled.Text.withConfig({
+  displayName: "Typography__StyledTypography",
+  componentId: "kitt-universal__sc-1dz700q-0"
+})(["", " ", ""], function (_ref) {
   var theme = _ref.theme,
       isHeader = _ref.isHeader,
       type = _ref.type,
@@ -153,8 +155,6 @@ Typography.h5 = createHeading('5');
 
 var _excluded$8 = ["size"];
 
-var _templateObject$n;
-
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
 };
@@ -163,7 +163,10 @@ var getInitials = function (firstname, lastname) {
   return (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 };
 
-var StyledAvatarView = styled.View(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  height: ", "px;\n  width: ", "px;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Avatar__StyledAvatarView",
+  componentId: "kitt-universal__sc-9miubv-0"
+})(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
   var round = _ref.round,
       size = _ref.size;
   return round ? size / 2 : 10;
@@ -226,8 +229,10 @@ function Avatar(_ref6) {
   })));
 }
 
-var _templateObject$m;
-var ButtonContainer = styled.Pressable(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  min-width: ", ";\n  max-width: ", ";\n  width: ", ";\n  min-height: ", ";\n  background-color: ", ";\n  padding: ", ";\n  flex-direction: row;\n\n  /* Emulate inline-* css display by making the button taking only its necessary space */\n  align-self: flex-start;\n  border-radius: ", ";\n  border-color: ", ";\n  border-width: ", ";\n"])), function (_ref) {
+var ButtonContainer = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "ButtonContainer",
+  componentId: "kitt-universal__sc-ofbpwm-0"
+})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.button.minWidth;
 }, function (_ref2) {
@@ -272,7 +277,7 @@ var _excluded$7 = ["color"],
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
     color: theme.kitt.typography.colors[color]
   }));
@@ -282,7 +287,7 @@ function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
       otherProps = _objectWithoutProperties(_ref, _excluded$7);
 
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
     color: theme.kitt.typography.colors[color]
   }));
@@ -301,8 +306,6 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/React.createElement(TypographyIconInheritColor, otherProps);
 }
 
-var _templateObject$l, _templateObject2$b, _templateObject3$8;
-
 var getTextColorByType = function (type, isPressed, disabled) {
   if (disabled) return 'black-light';
 
@@ -322,13 +325,22 @@ var getTextColorByType = function (type, isPressed, disabled) {
   }
 };
 
-var ButtonText = styled(Typography.Text)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  /* On native code, this is the only way to ensure that the text is centered */\n  text-align: center;\n"])));
-var Content$1 = styled.View(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n\n  /*\n    On native code flex grow does not work as expected which cause an issue with the flex props.\n    In order to occupy only the needed space, we enable flex grow only when stretched\n  */\n  flex: ", ";\n"])), function (_ref) {
+var ButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "ButtonContent__ButtonText",
+  componentId: "kitt-universal__sc-dnyw3n-0"
+})(["text-align:center;"]);
+var Content$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ButtonContent__Content",
+  componentId: "kitt-universal__sc-dnyw3n-1"
+})(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], function (_ref) {
   var stretch = _ref.stretch,
       iconOnly = _ref.iconOnly;
   return "".concat(stretch || iconOnly ? 1 : 0, " 1 auto");
 });
-var IconContainer$1 = styled.View(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+var IconContainer$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ButtonContent__IconContainer",
+  componentId: "kitt-universal__sc-dnyw3n-2"
+})(["", ""], function (_ref2) {
   var theme = _ref2.theme,
       iconPosition = _ref2.iconPosition;
   var value = theme.kitt.spacing * 3;
@@ -368,7 +380,7 @@ function ButtonContent(_ref4) {
       disabled = _ref4.disabled,
       children = _ref4.children;
   var color = getTextColorByType(type, Boolean(isPressed), Boolean(disabled));
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   var sharedIconProps = {
     spin: iconSpin,
     color: color,
@@ -463,8 +475,10 @@ function Button(_ref) {
   }), children));
 }
 
-var _templateObject$k;
-var Container$5 = styled.View(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-color: ", ";\n"])), function (_ref) {
+var Container$5 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Card__Container",
+  componentId: "kitt-universal__sc-1n9psug-0"
+})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
       type = _ref.type;
   return theme.kitt.card[type].backgroundColor;
@@ -559,19 +573,30 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _templateObject$j, _templateObject2$a, _templateObject3$7, _templateObject4$5;
-var FieldContainer = styled.View(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  padding: 5px 0 10px;\n"])));
-var FeedbackContainer = styled.View(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+var FieldContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldContainer",
+  componentId: "kitt-universal__sc-13fkixs-0"
+})(["padding:5px 0 10px;"]);
+var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FeedbackContainer",
+  componentId: "kitt-universal__sc-13fkixs-1"
+})(["", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.SMALL
   }, 'padding-top: 10px', 'padding-top: 5px');
 });
-var FieldLabelContainer = styled.View(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: ", "px;\n"])), function (_ref2) {
+var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__FieldLabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-2"
+})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.inputField.labelContainerPaddingBottom;
 });
-var LabelContainer = styled.View(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref3) {
+var LabelContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputField__LabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-3"
+})(["margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.forms.inputField.iconMarginLeft;
 });
@@ -612,9 +637,7 @@ var useInputText = function () {
 };
 
 var _excluded$6 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
-
-var _templateObject$i, _templateObject2$9, _templateObject3$6, _templateObject4$4;
-var styledTextInputMixin = css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-property-value-allowed-list */\n  background-color: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  font-size: ", ";\n  color: ", ";\n  font-family: ", ";\n"])), function (_ref) {
+var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
   var theme = _ref.theme,
       state = _ref.state;
   return state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
@@ -639,26 +662,35 @@ var styledTextInputMixin = css(_templateObject$i || (_templateObject$i = _tagged
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
-var Input = styled.TextInput(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-bang-space-before */\n  /* stylelint-disable comment-word-disallowed-list */\n\n  /* FIXME: text input is not vertically centered on iOS because of bigger line-height */\n  ", "\n  padding: ", ";\n  line-height: ", ";\n  min-height: ", "px;\n"])), styledTextInputMixin, function (_ref8) {
+var Input = /*#__PURE__*/styled.TextInput.withConfig({
+  displayName: "InputText__Input",
+  componentId: "kitt-universal__sc-uke279-0"
+})(["", " padding:", ";line-height:", ";min-height:", "px;"], 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;
+  return !multiline && "web" === '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;
+  return !multiline && "web" === '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 Container$4 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputText__Container",
+  componentId: "kitt-universal__sc-uke279-1"
+})(["margin-top:", ";margin-bottom:", ";"], function (_ref11) {
   var theme = _ref11.theme;
   return theme.kitt.forms.input.marginTop;
 }, function (_ref12) {
   var theme = _ref12.theme;
   return theme.kitt.forms.input.marginBottom;
 });
-var PasswordButtonContainer = styled.Pressable(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  justify-content: center;\n  padding: ", "px;\n"])), function (_ref13) {
+var PasswordButtonContainer = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "InputText__PasswordButtonContainer",
+  componentId: "kitt-universal__sc-uke279-2"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], function (_ref13) {
   var theme = _ref13.theme;
   return theme.kitt.forms.input.passwordButtonIconSize / 2;
 });
@@ -717,7 +749,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
       isPasswordVisible = _useInputText.isPasswordVisible,
       togglePasswordVisibility = _useInputText.togglePasswordVisibility;
 
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   var state = internalForceState || getInputState({
     isFocused: isFocused,
     isDisabled: disabled,
@@ -759,13 +791,15 @@ function Label(_ref) {
       children = _ref.children;
   return /*#__PURE__*/React.createElement(Typography.Text, {
     base: "body"
-  }, Platform.OS === 'web' ? /*#__PURE__*/React.createElement("label", {
+  }, /*#__PURE__*/React.createElement("label", {
     htmlFor: htmlFor
-  }, children) : 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 OuterRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__OuterRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-0"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
@@ -786,7 +820,10 @@ var OuterRadio = styled.View(_templateObject$h || (_templateObject$h = _taggedTe
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = styled.View(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
+var SelectedOuterRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__SelectedOuterRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-1"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.forms.radio.checked.backgroundColor;
 }, function (_ref8) {
@@ -799,7 +836,10 @@ var SelectedOuterRadio = styled.View(_templateObject2$8 || (_templateObject2$8 =
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = styled.View(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: ", "px;\n"])), function (_ref11) {
+var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Radio__SelectedInnerRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-2"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
   var theme = _ref11.theme;
   return theme.kitt.forms.radio.checked.innerBackgroundColor;
 }, function (_ref12) {
@@ -812,8 +852,14 @@ var SelectedInnerRadio = styled.View(_templateObject3$5 || (_templateObject3$5 =
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$3 = styled.Pressable(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n"])));
-var Text = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n"])), function (_ref15) {
+var Container$3 = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "Radio__Container",
+  componentId: "kitt-universal__sc-1mdgr2o-3"
+})(["flex-direction:row;align-items:center;"]);
+var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "Radio__Text",
+  componentId: "kitt-universal__sc-1mdgr2o-4"
+})(["margin-left:", "px;"], function (_ref15) {
   var theme = _ref15.theme;
   return theme.kitt.spacing * 2;
 });
@@ -845,7 +891,7 @@ function Radio(_ref16) {
 function TextArea(_ref) {
   var props = _extends({}, _ref);
 
-  var theme = useTheme();
+  var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/React.createElement(InputText, _extends({
     multiline: true
   }, props, {
@@ -854,8 +900,10 @@ function TextArea(_ref) {
   }));
 }
 
-var _templateObject$g;
-var Body = styled.View(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  flex: 1;\n"])), function (_ref) {
+var Body = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Body",
+  componentId: "kitt-universal__sc-1ofncfn-0"
+})(["", " background-color:", ";flex:1;"], function (_ref) {
   var theme = _ref.theme;
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.MEDIUM
@@ -869,8 +917,10 @@ function FullScreenModalBody(_ref3) {
   return /*#__PURE__*/React.createElement(Body, null, children);
 }
 
-var _templateObject$f, _templateObject2$7, _templateObject3$4;
-var SideContainer = styled.View(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+var SideContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__SideContainer",
+  componentId: "kitt-universal__sc-dfmxi1-0"
+})(["", ""], function (_ref) {
   var theme = _ref.theme,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side;
@@ -887,7 +937,10 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = styled.View(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  ", ";\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  flex-direction: row;\n  align-items: center;\n"])), function (_ref2) {
+var Header = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header",
+  componentId: "kitt-universal__sc-dfmxi1-1"
+})(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
   var theme = _ref2.theme,
       _ref2$insetTop = _ref2.insetTop,
       insetTop = _ref2$insetTop === void 0 ? 0 : _ref2$insetTop;
@@ -902,7 +955,10 @@ var Header = styled.View(_templateObject2$7 || (_templateObject2$7 = _taggedTemp
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = styled.View(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref4) {
+var HeaderContent = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__HeaderContent",
+  componentId: "kitt-universal__sc-dfmxi1-2"
+})(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
   var theme = _ref4.theme,
       leftWidth = _ref4.leftWidth,
       rightWidth = _ref4.rightWidth,
@@ -968,7 +1024,7 @@ function FullScreenModalHeader(_ref6) {
   };
 
   return /*#__PURE__*/React.createElement(Header, {
-    insetTop: Platform.OS === 'ios' ? undefined : top
+    insetTop: top
   }, left ? /*#__PURE__*/React.createElement(SideContainer, {
     onLayout: function onLayout(e) {
       return handleLayoutChange(e, 'left');
@@ -985,8 +1041,10 @@ function FullScreenModalHeader(_ref6) {
   }, right) : null);
 }
 
-var _templateObject$e;
-var Container$2 = styled.View(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  flex: 1;\n  background-color: ", ";\n"])), function (_ref) {
+var Container$2 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "FullScreenModal__Container",
+  componentId: "kitt-universal__sc-11qpbe3-0"
+})(["flex:1;background-color:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.colors.uiBackground;
 });
@@ -998,9 +1056,10 @@ FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
 var _excluded$5 = ["children"];
-
-var _templateObject$d;
-var ContentView$1 = styled.View(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  flex: 1 0 0%;\n  align-self: center;\n"])));
+var ContentView$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemContent__ContentView",
+  componentId: "kitt-universal__sc-57q0u9-0"
+})(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$5);
@@ -1010,9 +1069,10 @@ function ListItemContent(_ref) {
 
 var _excluded$4 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
-
-var _templateObject$c, _templateObject2$6;
-var SideContainerView = styled.View(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  flex-direction: row;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
+var SideContainerView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemSideContent__SideContainerView",
+  componentId: "kitt-universal__sc-1vajiw-0"
+})(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
   var theme = _ref.theme,
       side = _ref.side;
   return side === 'right' ? theme.kitt.listItem.innerMargin : 0;
@@ -1032,7 +1092,10 @@ function ListItemSideContainer(_ref3) {
     side: side
   }, rest), children);
 }
-var SideContentView = styled.View(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  align-self: ", ";\n"])), function (_ref4) {
+var SideContentView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItemSideContent__SideContentView",
+  componentId: "kitt-universal__sc-1vajiw-1"
+})(["align-self:", ";"], function (_ref4) {
   var align = _ref4.align;
   return align;
 });
@@ -1048,9 +1111,10 @@ function ListItemSideContent(_ref5) {
 }
 
 var _excluded$3 = ["children", "withPadding", "borders", "left", "right"];
-
-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 ContainerView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "ListItem__ContainerView",
+  componentId: "kitt-universal__sc-2afp9s-0"
+})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
   var withPadding = _ref.withPadding,
       theme = _ref.theme;
   return withPadding ? theme.kitt.listItem.padding : 0;
@@ -1138,10 +1202,12 @@ function Loader(_ref) {
   });
 }
 
-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 Container$1 = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Message__Container",
+  componentId: "kitt-universal__sc-c6400e-0"
+})(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], function (_ref) {
   var theme = _ref.theme,
       noRadius = _ref.noRadius;
   return noRadius ? 0 : theme.kitt.spacing * 5;
@@ -1165,18 +1231,27 @@ var Container$1 = styled.View(_templateObject$a || (_templateObject$a = _taggedT
       insets = _ref6.insets;
   return ((_insets$top = insets === null || insets === void 0 ? void 0 : insets.top) !== null && _insets$top !== void 0 ? _insets$top : 0) + theme.kitt.spacing * 4;
 });
-var CloseContainer = styled.TouchableOpacity(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  padding: ", "px;\n"])), function (_ref7) {
+var CloseContainer = /*#__PURE__*/styled.TouchableOpacity.withConfig({
+  displayName: "Message__CloseContainer",
+  componentId: "kitt-universal__sc-c6400e-1"
+})(["margin-left:", "px;padding:", "px;"], function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.spacing * 4;
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.kitt.spacing;
 });
-var IconContainer = styled.View(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n"])), function (_ref9) {
+var IconContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Message__IconContainer",
+  componentId: "kitt-universal__sc-c6400e-2"
+})(["margin-right:", "px;"], function (_ref9) {
   var theme = _ref9.theme;
   return theme.kitt.spacing * 4;
 });
-var Content = styled.Text(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  text-align: ", ";\n  flex: 1;\n"])), function (_ref10) {
+var Content = /*#__PURE__*/styled.Text.withConfig({
+  displayName: "Message__Content",
+  componentId: "kitt-universal__sc-c6400e-3"
+})(["text-align:", ";flex:1;"], function (_ref10) {
   var centeredText = _ref10.centeredText;
   return centeredText ? 'center' : 'left';
 });
@@ -1248,7 +1323,10 @@ function Message(_ref11) {
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var OverlayPressable = styled.Pressable(function (_ref) {
+var OverlayPressable = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "Overlay__OverlayPressable",
+  componentId: "kitt-universal__sc-1cz1gbr-0"
+})(function (_ref) {
   var theme = _ref.theme;
   return _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.kitt.colors.overlay.dark
@@ -1261,8 +1339,10 @@ function Overlay(_ref2) {
   }, /*#__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 BodyView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Body__BodyView",
+  componentId: "kitt-universal__sc-17fwpo4-0"
+})(["padding:", "px ", "px;"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 6;
 }, function (_ref2) {
@@ -1276,8 +1356,10 @@ var ModalBody = /*#__PURE__*/forwardRef(function (_ref3, 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 FooterView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Footer__FooterView",
+  componentId: "kitt-universal__sc-1ujq2dc-0"
+})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 4;
 }, function (_ref2) {
@@ -1291,23 +1373,34 @@ function ModalFooter(_ref3) {
 
 var OnCloseContext = /*#__PURE__*/createContext(function () {});
 
-var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1;
-var HeaderView = styled.View(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: ", "px;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: 1px;\n  border-bottom-color: ", ";\n  min-height: 57px;\n"])), function (_ref) {
+var HeaderView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__HeaderView",
+  componentId: "kitt-universal__sc-1iwabch-0"
+})(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 2;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = styled.View(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-right: ", "px;\n"])), function (_ref3) {
+var LeftIconView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__LeftIconView",
+  componentId: "kitt-universal__sc-1iwabch-1"
+})(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = styled.View(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-left: ", "px;\n"])), function (_ref4) {
+var RightIconView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__RightIconView",
+  componentId: "kitt-universal__sc-1iwabch-2"
+})(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = styled.View(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  flex-shrink: 1;\n"])), function (_ref5) {
+var TitleView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__TitleView",
+  componentId: "kitt-universal__sc-1iwabch-3"
+})(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
   var theme = _ref5.theme,
       isIconLeft = _ref5.isIconLeft;
   return isIconLeft ? 0 : theme.kitt.spacing * 2;
@@ -1327,15 +1420,20 @@ function ModalHeader(_ref6) {
   })));
 }
 
-var _templateObject$6, _templateObject2$3;
-var ModalView = styled.View(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", "px ", "px;\n"])), function (_ref) {
+var ModalView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Modal__ModalView",
+  componentId: "kitt-universal__sc-1xy2w5u-0"
+})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.spacing * 20;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = styled.View(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 540px;\n  height: auto;\n  width: 100%;\n  border-radius: ", ";\n  background-color: ", ";\n"])), function (_ref3) {
+var ContentView = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Modal__ContentView",
+  componentId: "kitt-universal__sc-1xy2w5u-1"
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", ";background-color:", ";"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.card.borderRadius;
 }, function (_ref4) {
@@ -1385,9 +1483,14 @@ function Notification(_ref) {
   }, children);
 }
 
-var _templateObject$5, _templateObject2$2;
-var StoryTitleContainer = styled.View(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
-var StorySubTitleContainer = styled.View(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n"])));
+var StoryTitleContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryTitle__StoryTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-0"
+})(["margin-bottom:30px;"]);
+var StorySubTitleContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryTitle__StorySubTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-1"
+})(["margin-bottom:10px;"]);
 function StoryTitle(_ref) {
   var color = _ref.color,
       children = _ref.children,
@@ -1449,9 +1552,10 @@ StoryTitle.Level4 = StoryTitleLevel4;
 
 var _excluded$2 = ["title", "className", "children"],
     _excluded2 = ["title", "className", "children"];
-
-var _templateObject$4, _templateObject2$1, _templateObject3$1;
-var StyledSection = styled.View(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  margin-bottom: 30px;\n"])));
+var StyledSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Section__StyledSection",
+  componentId: "kitt-universal__sc-x4z1s-0"
+})(["margin-bottom:30px;"]);
 function Section(_ref) {
   var title = _ref.title;
       _ref.className;
@@ -1460,7 +1564,10 @@ function Section(_ref) {
 
   return /*#__PURE__*/React.createElement(StyledSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level2, null, title), children);
 }
-var StyledSubSection = styled.View(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  margin-bottom: 20px;\n"])));
+var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Section__StyledSubSection",
+  componentId: "kitt-universal__sc-x4z1s-1"
+})(["margin-bottom:20px;"]);
 
 function SubSection(_ref2) {
   var title = _ref2.title;
@@ -1471,7 +1578,10 @@ function SubSection(_ref2) {
   return /*#__PURE__*/React.createElement(StyledSubSection, props, /*#__PURE__*/React.createElement(StoryTitle.Level3, null, title), children);
 }
 
-var StyledDemoSection = styled.View(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  margin-bottom: 90px;\n"])));
+var StyledDemoSection = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Section__StyledDemoSection",
+  componentId: "kitt-universal__sc-x4z1s-2"
+})(["margin-bottom:90px;"]);
 
 function DemoSection(_ref3) {
   var children = _ref3.children;
@@ -1483,8 +1593,10 @@ function DemoSection(_ref3) {
 Section.SubSection = SubSection;
 Section.DemoSection = DemoSection;
 
-var _templateObject$3;
-var StoryContainer = styled.ScrollView(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  padding: 10px;\n"])));
+var StoryContainer = /*#__PURE__*/styled.ScrollView.withConfig({
+  displayName: "Story__StoryContainer",
+  componentId: "kitt-universal__sc-1kwdg2p-0"
+})(["padding:10px;"]);
 function Story(_ref) {
   var title = _ref.title,
       contentContainerStyle = _ref.contentContainerStyle,
@@ -1500,11 +1612,22 @@ function StoryDecorator(storyFn, context) {
   }, 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"])));
+var SmallScreenRow = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__SmallScreenRow",
+  componentId: "kitt-universal__sc-4z5new-0"
+})(["flex-direction:column;margin:0;"]);
+var SmallScreenCol = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__SmallScreenCol",
+  componentId: "kitt-universal__sc-4z5new-1"
+})(["padding:10px 0 20px;"]);
+var FlexRow = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__FlexRow",
+  componentId: "kitt-universal__sc-4z5new-2"
+})(["flex-direction:row;margin:0 -5px 20px;"]);
+var FlexCol = /*#__PURE__*/styled.View.withConfig({
+  displayName: "StoryGrid__FlexCol",
+  componentId: "kitt-universal__sc-4z5new-3"
+})(["flex-grow:1;flex-basis:0;margin:0 5px 10px;"]);
 
 function StoryGridRow(_ref) {
   var children = _ref.children,
@@ -1544,8 +1667,10 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var _templateObject$1;
-var Container = styled.View(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  align-self: flex-start;\n"])), function (_ref) {
+var Container = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Tag__Container",
+  componentId: "kitt-universal__sc-19jmowi-0"
+})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
   var theme = _ref.theme,
       type = _ref.type;
   return theme.kitt.tag[type].backgroundColor;
@@ -1822,9 +1947,9 @@ var typographyLateOceanTheme = {
   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'
+        regular: 'Moderat',
+        bold: 'Moderat',
+        italic: 'Moderat'
       },
       fontWeight: 400,
       fontStyle: 'normal',
@@ -1843,9 +1968,9 @@ var typographyLateOceanTheme = {
     },
     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'
+        regular: 'Noto Sans',
+        bold: 'Noto Sans',
+        italic: 'Noto Sans'
       },
       fontWeight: {
         regular: 400,
@@ -1892,18 +2017,19 @@ function Tooltip(_ref) {
 }
 
 var _excluded$1 = ["disabled", "noUnderline", "variant"];
-
-var _templateObject;
-var StyledLink = styled(Typography).withConfig({
+var StyledLink = /*#__PURE__*/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) {
+}).withConfig({
+  displayName: "TypographyLink__StyledLink",
+  componentId: "kitt-universal__sc-1o1zy30-0"
+})(["text-decoration:", ";", ";margin:0;"], 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;
+  return "\n  text-decoration-color: inherit;\n  transition: color 0.2s ease-in-out;\n  cursor: ".concat(disabled ? 'not-allowed' : 'pointer', ";\n  ");
 });
 function TypographyLink(_ref3) {
   var disabled = _ref3.disabled,