@ornikar/kitt-universal 4.0.0 → 4.3.0

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

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { View, Text as Text$1, useWindowDimensions, Image, Pressable, TextInput, TouchableOpacity, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
+import { View, Text as Text$1, useWindowDimensions, Image, Pressable, TextInput, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import { UserIcon, EyeOffIcon, EyeIcon, LoaderIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
+import { UserIcon, EyeOffIcon, EyeIcon, LoaderIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import styled$1, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import { forwardRef, cloneElement, useContext, createContext, useMemo, useState, Fragment, Children, useEffect } from 'react';
@@ -16,9 +16,9 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useFloating, offset, shift, flip, getScrollParents } from '@floating-ui/react-dom';
 import { makeDecorator } from '@storybook/addons';
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 // type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
 // export function withTheme<Props extends { theme: DefaultTheme }, C>(
@@ -33,7 +33,7 @@ function withTheme(WrappedComponent) {
   // eslint-disable-next-line prefer-arrow-callback
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var theme = /*#__PURE__*/useTheme();
-    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$j({
+    return /*#__PURE__*/jsx(WrappedComponent, _objectSpread$k({
       ref: ref,
       theme: theme
     }, props));
@@ -51,7 +51,7 @@ function SpinningIcon(_ref) {
   });
 }
 
-var IconContainer$1 = /*#__PURE__*/styled$1(View).withConfig({
+var IconContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
@@ -78,7 +78,7 @@ function Icon(_ref5) {
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
-  return /*#__PURE__*/jsx(IconContainer$1, {
+  return /*#__PURE__*/jsx(IconContainer, {
     align: align,
     size: size,
     color: color,
@@ -138,9 +138,9 @@ var KittBreakpointsMax = {
 
 var _excluded$f = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -181,7 +181,7 @@ var StyledTypography = /*#__PURE__*/styled$1(Text$1).withConfig({
       headers = _theme$kitt$typograph.headers,
       bodies = _theme$kitt$typograph.bodies;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "\n      /* type */\n      ".concat(!$typeForCurrentWindowSize ? '' : "\n  font-family: ".concat($isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], ";\n  font-size: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, ";\n  line-height: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].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  ");
+  return "\n      /* type */\n      ".concat(!$typeForCurrentWindowSize ? '' : "\n  font-family: ".concat($isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], ";\n  font-size: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, "px;\n  line-height: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight, "px;\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;
@@ -234,14 +234,14 @@ function Typography(_ref4) {
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$i({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$j({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$i({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$j({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -254,13 +254,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$i({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$j({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$i({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$j({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -268,7 +268,7 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/jsx(Typography, _objectSpread$i(_objectSpread$i({
+    return /*#__PURE__*/jsx(Typography, _objectSpread$j(_objectSpread$j({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -306,9 +306,9 @@ Typography.h5 = createHeading(5, 'header5');
 
 var _excluded$e = ["size", "base", "round", "light"];
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -322,7 +322,7 @@ var StyledAvatarView = /*#__PURE__*/styled$1(View).withConfig({
       $isRound = _ref.$isRound,
       $size = _ref.$size;
   if ($isRound) return "".concat($size / 2, "px");
-  return theme.kitt.avatar.borderRadius;
+  return "".concat(theme.kitt.avatar.borderRadius, "px");
 }, function (_ref2) {
   var theme = _ref2.theme,
       $isLight = _ref2.$isLight;
@@ -386,7 +386,7 @@ function Avatar(_ref6) {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$h({
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$i({
       size: size,
       base: base,
       isLight: light
@@ -400,9 +400,9 @@ function isSubtle(type) {
 
 var _excluded$d = ["$type", "$isStretch", "disabled"];
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("div")({
   name: "AnimatedButtonPressableContainer",
   "class": "a1vkj3mh",
@@ -441,7 +441,7 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("div")({
     "a1vkj3mh-7": [function (_ref7) {
       var theme = _ref7.theme;
       return theme.kitt.button.borderRadius;
-    }],
+    }, "px"],
     "a1vkj3mh-8": [function (_ref8) {
       var theme = _ref8.theme;
       return "opacity ".concat(theme.kitt.button.transition.duration, " ").concat(theme.kitt.button.transition.timingFunction);
@@ -452,24 +452,24 @@ var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled("div")({
     }],
     "a1vkj3mh-10": [function (_ref10) {
       var theme = _ref10.theme;
-      return "-".concat(theme.kitt.button.borderWidth.disabled);
+      return "-".concat(theme.kitt.button.borderWidth.disabled, "px");
     }],
     "a1vkj3mh-12": [function (_ref11) {
       var theme = _ref11.theme;
-      return "calc(100% - ".concat(parseInt(theme.kitt.button.borderWidth.disabled, 10) * 0.5, "px)");
+      return "calc(100% - ".concat(theme.kitt.button.borderWidth.disabled * 0.5, "px)");
     }],
     "a1vkj3mh-14": [function (_ref12) {
       var theme = _ref12.theme;
-      return "".concat(theme.kitt.button.disabled.borderColor, " solid ").concat(theme.kitt.button.borderWidth.disabled);
+      return "".concat(theme.kitt.button.borderWidth.disabled, "px solid ").concat(theme.kitt.button.disabled.borderColor);
     }],
     "a1vkj3mh-15": [function (_ref13) {
       var theme = _ref13.theme,
           $type = _ref13.$type;
-      return "".concat(theme.kitt.button.borderWidth.focus, " solid ").concat(theme.kitt.button[$type].focusBorderColor);
+      return "".concat(theme.kitt.button.borderWidth.focus, "px solid ").concat(theme.kitt.button[$type].focusBorderColor);
     }],
     "a1vkj3mh-16": [function (_ref14) {
       var theme = _ref14.theme;
-      return "-".concat(theme.kitt.button.borderWidth.focus);
+      return "-".concat(theme.kitt.button.borderWidth.focus, "px");
     }],
     "a1vkj3mh-18": [function (_ref15) {
       var theme = _ref15.theme,
@@ -508,7 +508,7 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
     $type: $type,
     $isDisabled: !!disabled,
     $isStretch: $isStretch,
-    children: /*#__PURE__*/jsx(Pressable, _objectSpread$g({
+    children: /*#__PURE__*/jsx(Pressable, _objectSpread$h({
       disabled: disabled
     }, props))
   });
@@ -517,13 +517,13 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
 var BaseStyledButtonPressable = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "BaseStyledButtonPressable",
   componentId: "kitt-universal__sc-4k8lse-0"
-})(["position:relative;min-width:", ";max-width:", ";width:", ";min-height:", ";border-radius:", ";flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
+})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
   var theme = _ref.theme;
   return theme.kitt.button.minWidth;
 }, function (_ref2) {
   var theme = _ref2.theme,
       $isStretch = _ref2.$isStretch;
-  return $isStretch ? '100%' : theme.kitt.button.maxWidth;
+  return $isStretch ? '100%' : "".concat(theme.kitt.button.maxWidth, "px");
 }, function (_ref3) {
   var $isStretch = _ref3.$isStretch;
   return $isStretch ? '100%' : 'auto';
@@ -555,23 +555,23 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled$1(View).withConfig({
 var _excluded$c = ["color"],
     _excluded2$2 = ["color"];
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
       props = _objectWithoutProperties(_ref, _excluded$c);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$f(_objectSpread$f({}, props), {}, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread$g(_objectSpread$g({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$f({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$g({
     color: color
   }, props));
 }
@@ -581,19 +581,19 @@ function TypographyIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$f({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$g({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$f({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$g({}, props));
 }
 
 var _excluded$b = ["type", "isDisabled", "$isStretch", "icon", "children"];
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextColorByType = function (type) {
   switch (type) {
@@ -632,7 +632,7 @@ var StyledButtonText = /*#__PURE__*/styled$1(Typography.Text).withConfig({
   if ($isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-var StyledIconContainer = /*#__PURE__*/styled$1(View).withConfig({
+var StyledIconContainer$1 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["", ""], function (_ref2) {
@@ -653,7 +653,7 @@ function ButtonIcon(_ref3) {
       spin = _ref3.spin,
       iconPosition = _ref3.iconPosition,
       testID = _ref3.testID;
-  return /*#__PURE__*/jsx(StyledIconContainer, {
+  return /*#__PURE__*/jsx(StyledIconContainer$1, {
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsx(TypographyIcon, {
       icon: icon,
@@ -701,7 +701,7 @@ function ButtonContentChildren(_ref4) {
     color: isWebSubtle ? 'inherit' : color
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$f(_objectSpread$f({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -712,7 +712,7 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$f(_objectSpread$f({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
@@ -743,7 +743,7 @@ function ButtonContent(_ref7) {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$e(_objectSpread$e({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$f(_objectSpread$f({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -799,16 +799,16 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var Container$4 = /*#__PURE__*/styled$1(View).withConfig({
+var Container$3 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
-})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
+})(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], 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;
+  return theme.kitt.spacing * 4;
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.card.borderRadius;
@@ -823,7 +823,7 @@ var Container$4 = /*#__PURE__*/styled$1(View).withConfig({
 function Card(_ref6) {
   var children = _ref6.children,
       type = _ref6.type;
-  return /*#__PURE__*/jsx(Container$4, {
+  return /*#__PURE__*/jsx(Container$3, {
     type: type,
     children: children
   });
@@ -871,9 +871,9 @@ var defaultOpenLinkBehavior = {
 
 var _excluded$a = ["as", "href", "openLinkBehavior", "onPress"];
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
@@ -882,7 +882,7 @@ function ExternalLink(_ref) {
       onPress = _ref.onPress,
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$d(_objectSpread$d({}, rest), {}, {
+  return /*#__PURE__*/jsx(Component, _objectSpread$e(_objectSpread$e({}, rest), {}, {
     href: href,
     hrefAttrs: (openLinkBehavior === null || openLinkBehavior === void 0 ? void 0 : openLinkBehavior.web) === 'targetSelf' ? undefined : {
       target: '_blank',
@@ -892,110 +892,7 @@ function ExternalLink(_ref) {
   }));
 }
 
-var getColorFromState = function (state) {
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-
-    case 'valid':
-    default:
-      return 'black-light';
-  }
-};
-
-function InputFeedback(_ref) {
-  var state = _ref.state,
-      testID = _ref.testID,
-      children = _ref.children;
-  return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body-small",
-    color: getColorFromState(state),
-    testID: testID,
-    children: children
-  });
-}
-
-var FieldContainer = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled$1(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 = /*#__PURE__*/styled$1(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 = /*#__PURE__*/styled$1(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;
-});
-function InputField(_ref4) {
-  var label = _ref4.label,
-      labelFeedback = _ref4.labelFeedback,
-      input = _ref4.input,
-      feedback = _ref4.feedback;
-  return /*#__PURE__*/jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsx(LabelContainer, {
-        children: label
-      }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
-      children: feedback
-    }) : null]
-  });
-}
-
-function getIconColor(state, disabled) {
-  if (disabled) return 'black-light';
-
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-
-    case 'valid':
-      return 'success';
-
-    default:
-      return undefined;
-  }
-}
-
-function InputIcon(_ref) {
-  var icon = _ref.icon,
-      state = _ref.state,
-      disabled = _ref.disabled;
-  var theme = /*#__PURE__*/useTheme();
-  var color = getIconColor(state, disabled);
-  return /*#__PURE__*/jsx(TypographyIcon, {
-    color: color,
-    icon: icon,
-    size: theme.kitt.forms.input.icon.size
-  });
-}
-
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function InputPressable(_ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/jsx(Pressable, _objectSpread$c({}, props));
-}
-
-var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
+var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;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;
@@ -1012,7 +909,7 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
 }, function (_ref5) {
   var theme = _ref5.theme;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
+  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize, "px");
 }, function (_ref6) {
   var theme = _ref6.theme,
       $state = _ref6.$state;
@@ -1032,15 +929,46 @@ function getInputUIState(_ref) {
   return 'default';
 }
 
+var InputTextContainer = withTheme( /*#__PURE__*/styled("div")({
+  name: "InputTextContainer",
+  "class": "i1encr9g",
+  vars: {
+    "i1encr9g-0": [function (_ref) {
+      var $isDisabled = _ref.$isDisabled;
+      return $isDisabled ? 'not-allowed' : 'inherit';
+    }],
+    "i1encr9g-1": [function (_ref2) {
+      var theme = _ref2.theme;
+      var _theme$kitt$forms$inp = theme.kitt.forms.input.transition,
+          property = _theme$kitt$forms$inp.property,
+          duration = _theme$kitt$forms$inp.duration,
+          timingFunction = _theme$kitt$forms$inp.timingFunction;
+      return "".concat(property, " ").concat(duration, " ").concat(timingFunction);
+    }],
+    "i1encr9g-2": [function (_ref3) {
+      var theme = _ref3.theme,
+          $isDisabled = _ref3.$isDisabled;
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.hover.borderColor;
+    }],
+    "i1encr9g-3": [function (_ref4) {
+      var theme = _ref4.theme,
+          $isDisabled = _ref4.$isDisabled;
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.focus.borderColor;
+    }]
+  }
+}));
+
 var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, function (_ref) {
+})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
   var theme = _ref.theme,
       multiline = _ref.multiline;
 
@@ -1054,18 +982,14 @@ var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
       multiline = _ref2.multiline;
   if (!multiline && "web" === 'ios') return 0;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
+  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
 }, function (_ref3) {
   var $minHeight = _ref3.$minHeight;
   return $minHeight;
 });
-var InputTextContainer = /*#__PURE__*/styled$1(View).withConfig({
-  displayName: "InputText__InputTextContainer",
-  componentId: "kitt-universal__sc-uke279-1"
-})(["position:relative;"]);
 var RightInputContainer = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "InputText__RightInputContainer",
-  componentId: "kitt-universal__sc-uke279-2"
+  componentId: "kitt-universal__sc-uke279-1"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
 var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var id = _ref4.id,
@@ -1101,7 +1025,8 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     formState: formState
   });
   return /*#__PURE__*/jsxs(InputTextContainer, {
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$b(_objectSpread$b({
+    $isDisabled: disabled,
+    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$d(_objectSpread$d({
       ref: ref,
       nativeID: id,
       editable: !disabled,
@@ -1128,6 +1053,120 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   });
 });
 
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function InputEmail(props) {
+  return /*#__PURE__*/jsx(InputText, _objectSpread$c({
+    autoCompleteType: "email",
+    keyboardType: "email-address",
+    textContentType: "emailAddress"
+  }, props));
+}
+
+var getColorFromState = function (state) {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+    default:
+      return 'black-light';
+  }
+};
+
+function InputFeedback(_ref) {
+  var state = _ref.state,
+      testID = _ref.testID,
+      children = _ref.children;
+  return /*#__PURE__*/jsx(Typography.Text, {
+    base: "body-small",
+    color: getColorFromState(state),
+    testID: testID,
+    children: children
+  });
+}
+
+var FieldContainer = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "InputField__FieldContainer",
+  componentId: "kitt-universal__sc-13fkixs-0"
+})(["padding:5px 0 10px;"]);
+var FeedbackContainer = /*#__PURE__*/styled$1(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 = /*#__PURE__*/styled$1(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 = /*#__PURE__*/styled$1(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;
+});
+function InputField(_ref4) {
+  var label = _ref4.label,
+      labelFeedback = _ref4.labelFeedback,
+      input = _ref4.input,
+      feedback = _ref4.feedback;
+  return /*#__PURE__*/jsxs(FieldContainer, {
+    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
+      children: [/*#__PURE__*/jsx(LabelContainer, {
+        children: label
+      }), labelFeedback]
+    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+      children: feedback
+    }) : null]
+  });
+}
+
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
+
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+      return 'success';
+
+    default:
+      return undefined;
+  }
+}
+
+function InputIcon(_ref) {
+  var icon = _ref.icon,
+      state = _ref.state,
+      disabled = _ref.disabled;
+  var theme = /*#__PURE__*/useTheme();
+  var color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
+
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function InputPressable(_ref) {
+  var props = _extends({}, _ref);
+
+  return /*#__PURE__*/jsx(Pressable, _objectSpread$b({}, props));
+}
+
 var _excluded$8 = ["isPasswordDefaultVisible", "right"];
 
 function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -1177,7 +1216,7 @@ function Label(_ref) {
 var OuterRadio = /*#__PURE__*/styled$1(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) {
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
@@ -1230,7 +1269,7 @@ var SelectedInnerRadio = /*#__PURE__*/styled$1(View).withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$3 = /*#__PURE__*/styled$1(Pressable).withConfig({
+var Container$2 = /*#__PURE__*/styled$1(Pressable).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -1249,7 +1288,7 @@ function Radio(_ref16) {
       _ref16$disabled = _ref16.disabled,
       disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
       children = _ref16.children;
-  return /*#__PURE__*/jsxs(Container$3, {
+  return /*#__PURE__*/jsxs(Container$2, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1431,7 +1470,7 @@ function FullScreenModalHeader(_ref6) {
   });
 }
 
-var Container$2 = /*#__PURE__*/styled$1(View).withConfig({
+var Container$1 = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], function (_ref) {
@@ -1440,7 +1479,7 @@ var Container$2 = /*#__PURE__*/styled$1(View).withConfig({
 });
 function FullScreenModal(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/jsx(Container$2, {
+  return /*#__PURE__*/jsx(Container$1, {
     children: children
   });
 }
@@ -1640,11 +1679,11 @@ var SideContainerView = /*#__PURE__*/styled$1(View).withConfig({
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
   var theme = _ref.theme,
       side = _ref.side;
-  return side === 'right' ? theme.kitt.listItem.innerMargin : 0;
+  return side === 'right' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
 }, function (_ref2) {
   var theme = _ref2.theme,
       side = _ref2.side;
-  return side === 'left' ? theme.kitt.listItem.innerMargin : 0;
+  return side === 'left' ? "".concat(theme.kitt.listItem.innerMargin, "px") : 0;
 }); // Handles the vertical alignment of the side elements of the list item
 
 function ListItemSideContainer(_ref3) {
@@ -1697,15 +1736,15 @@ var ContainerView = /*#__PURE__*/styled$1(View).withConfig({
   var borderWidth = theme.kitt.listItem.borderWidth;
 
   if (borders === 'top') {
-    return "border-top-width: ".concat(borderWidth);
+    return "border-top-width: ".concat(borderWidth, "px");
   }
 
   if (borders === 'bottom') {
-    return "border-bottom-width: ".concat(borderWidth);
+    return "border-bottom-width: ".concat(borderWidth, "px");
   }
 
   if (borders === 'both') {
-    return "border-top-width: ".concat(borderWidth, "; border-bottom-width: ").concat(borderWidth);
+    return css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
   }
 
   return 'border: none';
@@ -1805,59 +1844,32 @@ function Loader(_ref) {
   });
 }
 
-var xIconSize = 14;
-var mainIconSize = 20;
-var Container$1 = /*#__PURE__*/styled$1(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;
-}, 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;
+function IconContent(_ref) {
+  var type = _ref.type,
+      color = _ref.color;
 
-  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 = /*#__PURE__*/styled$1(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 = /*#__PURE__*/styled$1(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 = /*#__PURE__*/styled$1(Text$1).withConfig({
-  displayName: "Message__Content",
-  componentId: "kitt-universal__sc-c6400e-3"
-})(["text-align:", ";flex:1;"], function (_ref10) {
-  var centeredText = _ref10.centeredText;
-  return centeredText ? 'center' : 'left';
-});
+  switch (type) {
+    case 'warning':
+      return /*#__PURE__*/jsx(AlertCircleIcon, {
+        color: color
+      });
+
+    case 'success':
+      return /*#__PURE__*/jsx(CheckIcon, {
+        color: color
+      });
+
+    case 'danger':
+      return /*#__PURE__*/jsx(AlertTriangleIcon, {
+        color: color
+      });
+
+    default:
+      return /*#__PURE__*/jsx(InfoIcon, {
+        color: color
+      });
+  }
+}
 
 var getColorByType = function (type) {
   switch (type) {
@@ -1872,63 +1884,122 @@ var getColorByType = function (type) {
       return 'black';
   }
 };
-
-function getIconContent(type) {
-  switch (type) {
-    case 'warning':
-      return /*#__PURE__*/jsx(AlertCircleIcon, {});
-
+var getIconButtonColor = function (messageType) {
+  switch (messageType) {
     case 'success':
-      return /*#__PURE__*/jsx(CheckIcon, {});
-
     case 'danger':
-      return /*#__PURE__*/jsx(AlertTriangleIcon, {});
+      return 'white';
 
+    case 'warning':
     default:
-      return /*#__PURE__*/jsx(InfoIcon, {});
+      return 'black';
   }
-}
+};
 
-function Message(_ref11) {
-  var _ref11$type = _ref11.type,
-      type = _ref11$type === void 0 ? 'info' : _ref11$type,
-      children = _ref11.children,
-      _ref11$noRadius = _ref11.noRadius,
-      noRadius = _ref11$noRadius === void 0 ? false : _ref11$noRadius,
-      _ref11$centeredText = _ref11.centeredText,
-      centeredText = _ref11$centeredText === void 0 ? false : _ref11$centeredText,
-      onDismiss = _ref11.onDismiss,
-      insets = _ref11.insets;
+var StyledMessageContainer = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "BaseMessage__StyledMessageContainer",
+  componentId: "kitt-universal__sc-eepeiz-0"
+})(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], function (_ref) {
+  var _$insets$top;
+
+  var $insets = _ref.$insets;
+  return (_$insets$top = $insets === null || $insets === void 0 ? void 0 : $insets.top) !== null && _$insets$top !== void 0 ? _$insets$top : 0;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $hasNoRadius = _ref2.$hasNoRadius;
+  return $hasNoRadius ? 0 : theme.kitt.spacing * 5;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      $type = _ref3.$type;
+  return theme.kitt.feedbackMessage[$type].backgroundColor;
+});
+var StyledDismissWrapper = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "BaseMessage__StyledDismissWrapper",
+  componentId: "kitt-universal__sc-eepeiz-1"
+})(["align-items:center;align-items:flex-start;margin:", ";"], function (_ref4) {
+  var theme = _ref4.theme;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing * 2.5, "px  ").concat(spacing * 2, "px 0 ").concat(spacing * 5, "px");
+});
+var StyledIconContainer = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "BaseMessage__StyledIconContainer",
+  componentId: "kitt-universal__sc-eepeiz-2"
+})(["margin:", ";"], function (_ref5) {
+  var theme = _ref5.theme;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing, "px ").concat(spacing * 5, "px 0 0");
+});
+var StyledTextContent = /*#__PURE__*/styled$1(Typography.Text).withConfig({
+  displayName: "BaseMessage__StyledTextContent",
+  componentId: "kitt-universal__sc-eepeiz-3"
+})(["flex:1;text-align:", ";"], function (_ref6) {
+  var $isCenteredText = _ref6.$isCenteredText;
+  return $isCenteredText ? 'center' : 'left';
+});
+var StyledMessageContent = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "BaseMessage__StyledMessageContent",
+  componentId: "kitt-universal__sc-eepeiz-4"
+})(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], function (_ref7) {
+  var theme = _ref7.theme;
+  var spacing = theme.kitt.spacing;
+  return "".concat(spacing * 4, "px ").concat(spacing * 5, "px");
+});
+function BaseMessage(_ref8) {
+  var _ref8$type = _ref8.type,
+      type = _ref8$type === void 0 ? 'info' : _ref8$type,
+      children = _ref8.children,
+      hasNoRadius = _ref8.hasNoRadius,
+      centeredText = _ref8.centeredText,
+      insets = _ref8.insets,
+      onDismiss = _ref8.onDismiss;
   var color = getColorByType(type);
-  return /*#__PURE__*/jsxs(Container$1, {
-    type: type,
-    noRadius: noRadius,
-    insets: insets,
-    children: [!centeredText ? /*#__PURE__*/jsx(IconContainer, {
-      children: /*#__PURE__*/jsx(Icon, {
-        size: mainIconSize,
-        color: color,
-        icon: getIconContent(type)
-      })
-    }) : null, /*#__PURE__*/jsx(Content, {
-      type: type,
-      centeredText: centeredText,
-      children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "body-small",
+  return /*#__PURE__*/jsxs(StyledMessageContainer, {
+    $type: type,
+    $hasNoRadius: hasNoRadius,
+    $insets: insets,
+    children: [/*#__PURE__*/jsxs(StyledMessageContent, {
+      children: [centeredText ? null : /*#__PURE__*/jsx(StyledIconContainer, {
+        children: /*#__PURE__*/jsx(Icon, {
+          color: color,
+          icon: /*#__PURE__*/jsx(IconContent, {
+            type: type,
+            color: color
+          })
+        })
+      }), /*#__PURE__*/jsx(StyledTextContent, {
+        $isCenteredText: centeredText,
+        base: "body",
         color: color,
         children: children
-      })
-    }), onDismiss ? /*#__PURE__*/jsx(CloseContainer, {
-      onPress: onDismiss,
-      children: /*#__PURE__*/jsx(Icon, {
+      })]
+    }), onDismiss ? /*#__PURE__*/jsx(StyledDismissWrapper, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        color: getIconButtonColor(type),
         icon: /*#__PURE__*/jsx(XIcon, {}),
-        size: xIconSize,
-        color: color
+        onPress: onDismiss
       })
     }) : null]
   });
 }
 
+function Message(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'info' : _ref$type,
+      children = _ref.children,
+      hasNoRadius = _ref.hasNoRadius,
+      centeredText = _ref.centeredText,
+      insets = _ref.insets,
+      onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/jsx(BaseMessage, {
+    insets: insets,
+    hasNoRadius: hasNoRadius,
+    type: type,
+    centeredText: centeredText,
+    onDismiss: onDismiss,
+    children: children
+  });
+}
+
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -2056,12 +2127,12 @@ var ModalView = /*#__PURE__*/styled$1(View).withConfig({
 var ContentView = /*#__PURE__*/styled$1(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) {
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.card.borderRadius;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.kitt.palettes.lateOcean.white;
+  return theme.kitt.colors.uiBackgroundLight;
 });
 function Modal(_ref5) {
   var visible = _ref5.visible,
@@ -2096,19 +2167,22 @@ function Notification(_ref) {
   var type = _ref.type,
       children = _ref.children,
       centeredText = _ref.centeredText,
-      onDelete = _ref.onDelete;
+      insets = _ref.insets,
+      onDelete = _ref.onDelete,
+      onDismiss = _ref.onDismiss;
 
-  var _useSafeAreaInsets = useSafeAreaInsets(),
-      top = _useSafeAreaInsets.top;
+  if ((process.env.NODE_ENV !== "production")) {
+    if (onDelete) {
+      throw new Error('onDelete is deprecated us onDismiss instead');
+    }
+  }
 
-  return /*#__PURE__*/jsx(Message, {
-    noRadius: true,
+  return /*#__PURE__*/jsx(BaseMessage, {
+    hasNoRadius: true,
     type: type,
     centeredText: centeredText,
-    insets: {
-      top: top
-    },
-    onDismiss: onDelete,
+    insets: insets,
+    onDismiss: onDismiss,
     children: children
   });
 }
@@ -2139,6 +2213,10 @@ function SkeletonContent(_ref4) {
   });
 }
 
+var SkeletonContainer = /*#__PURE__*/styled$1(View).withConfig({
+  displayName: "Skeleton__SkeletonContainer",
+  componentId: "kitt-universal__sc-1w5cm3i-0"
+})(["overflow:hidden;"]);
 function Skeleton(_ref) {
   var isLoading = _ref.isLoading,
       style = _ref.style;
@@ -2148,7 +2226,7 @@ function Skeleton(_ref) {
       width = _useState2[0],
       setWidth = _useState2[1];
 
-  return /*#__PURE__*/jsx(View, {
+  return /*#__PURE__*/jsx(SkeletonContainer, {
     style: style,
     onLayout: function onLayout(_ref2) {
       var nativeEvent = _ref2.nativeEvent;
@@ -2162,8 +2240,8 @@ function Skeleton(_ref) {
 }
 var Bar = /*#__PURE__*/styled$1(Skeleton).withConfig({
   displayName: "Skeleton__Bar",
-  componentId: "kitt-universal__sc-1w5cm3i-0"
-})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref3) {
+  componentId: "kitt-universal__sc-1w5cm3i-1"
+})(["width:100%;height:", "px;border-radius:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 }, function (_ref4) {
@@ -2172,8 +2250,8 @@ var Bar = /*#__PURE__*/styled$1(Skeleton).withConfig({
 });
 var Circle = /*#__PURE__*/styled$1(Skeleton).withConfig({
   displayName: "Skeleton__Circle",
-  componentId: "kitt-universal__sc-1w5cm3i-1"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref5) {
+  componentId: "kitt-universal__sc-1w5cm3i-2"
+})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref5) {
   var theme = _ref5.theme;
   return theme.kitt.spacing * 12;
 }, function (_ref6) {
@@ -2185,8 +2263,8 @@ var Circle = /*#__PURE__*/styled$1(Skeleton).withConfig({
 });
 var Square = /*#__PURE__*/styled$1(Skeleton).withConfig({
   displayName: "Skeleton__Square",
-  componentId: "kitt-universal__sc-1w5cm3i-2"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], function (_ref8) {
+  componentId: "kitt-universal__sc-1w5cm3i-3"
+})(["width:", "px;height:", "px;border-radius:", "px;"], function (_ref8) {
   var theme = _ref8.theme;
   return theme.kitt.spacing * 12;
 }, function (_ref9) {
@@ -2558,7 +2636,7 @@ var StoryGrid = {
 var Container = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
+})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
   var theme = _ref.theme,
       type = _ref.type,
       variant = _ref.variant;
@@ -2628,6 +2706,7 @@ var lateOceanColorPalette = {
   warmEmbrace: '#F4D3CE',
   warmEmbraceLight1: '#FFEDE6',
   black1000: '#000000',
+  black800: '#2C293D',
   black555: '#737373',
   black200: '#CCCCCC',
   black100: '#E5E5E5',
@@ -2643,7 +2722,7 @@ var lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-var colorsLateOceanTheme = {
+var colors = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
   accent: lateOceanColorPalette.warmEmbrace,
@@ -2651,6 +2730,8 @@ var colorsLateOceanTheme = {
   success: lateOceanColorPalette.viride,
   correct: lateOceanColorPalette.viride,
   danger: lateOceanColorPalette.englishVermillon,
+  info: lateOceanColorPalette.aero,
+  warning: lateOceanColorPalette.goldCrayola,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
   black: lateOceanColorPalette.black1000,
@@ -2666,24 +2747,24 @@ var colorsLateOceanTheme = {
 };
 
 var avatar = {
-  borderRadius: '10px',
+  borderRadius: 10,
   "default": {
-    backgroundColor: colorsLateOceanTheme.primary
+    backgroundColor: colors.primary
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
   }
 };
 
-var buttonLateOceanTheme = {
-  borderRadius: '30px',
+var button = {
+  borderRadius: 30,
   borderWidth: {
-    disabled: '2px',
-    focus: '3px'
+    disabled: 2,
+    focus: 3
   },
-  minHeight: '40px',
-  minWidth: '40px',
-  maxWidth: '335px',
+  minHeight: 40,
+  minWidth: 40,
+  maxWidth: 335,
   scale: {
     base: {
       "default": 1,
@@ -2710,9 +2791,9 @@ var buttonLateOceanTheme = {
     focusBorderColor: 'rgba(0, 0, 0, 0.1)'
   },
   primary: {
-    backgroundColor: colorsLateOceanTheme.primary,
-    pressedBackgroundColor: colorsLateOceanTheme.primaryLight,
-    hoverBackgroundColor: colorsLateOceanTheme.primaryLight,
+    backgroundColor: colors.primary,
+    pressedBackgroundColor: colors.primaryLight,
+    hoverBackgroundColor: colors.primaryLight,
     focusBorderColor: 'rgba(76, 52, 224, 0.2)'
   },
   white: {
@@ -2722,56 +2803,61 @@ var buttonLateOceanTheme = {
     focusBorderColor: 'rgba(255, 255, 255, 0.1)'
   },
   subtle: {
-    backgroundColor: colorsLateOceanTheme.transparent,
-    pressedBackgroundColor: colorsLateOceanTheme.transparent,
-    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    backgroundColor: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
     focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-    color: colorsLateOceanTheme.primary,
+    color: colors.primary,
     hoverColor: 'rgba(76, 52, 224, 0.8)',
     activeColor: 'rgba(76, 52, 224, 0.8)'
   },
   'subtle-dark': {
-    backgroundColor: colorsLateOceanTheme.transparent,
-    pressedBackgroundColor: colorsLateOceanTheme.transparent,
-    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    backgroundColor: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
     focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-    color: colorsLateOceanTheme.black,
+    color: colors.black,
     hoverColor: 'rgba(0, 0, 0, 0.8)',
     activeColor: 'rgba(0, 0, 0, 0.8)'
   },
   disabled: {
-    backgroundColor: colorsLateOceanTheme.disabled,
-    pressedBackgroundColor: colorsLateOceanTheme.disabled,
-    hoverBackgroundColor: colorsLateOceanTheme.disabled,
+    backgroundColor: colors.disabled,
+    pressedBackgroundColor: colors.disabled,
+    hoverBackgroundColor: colors.disabled,
     focusBorderColor: lateOceanColorPalette.black100,
     borderColor: lateOceanColorPalette.black100
   }
 };
 
-var cardLateOceanTheme = {
-  borderRadius: '20px',
-  borderWidth: '2px',
-  padding: '16px',
+var card = {
+  borderRadius: 20,
+  borderWidth: 2,
   primary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.lateOcean
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.primary
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.black100
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator
   },
   subtle: {
     backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100
+    borderColor: colors.separator
   }
 };
 
-var feedbackMessageLateOceanTheme = {
-  backgroundColors: {
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon,
-    warning: lateOceanColorPalette.goldCrayola,
-    info: lateOceanColorPalette.aero
+var feedbackMessage = {
+  danger: {
+    backgroundColor: colors.danger
+  },
+  success: {
+    backgroundColor: colors.success
+  },
+  info: {
+    backgroundColor: colors.info
+  },
+  warning: {
+    backgroundColor: colors.warning
   }
 };
 
@@ -2781,18 +2867,19 @@ var calcLineHeight = function (fontSize, lineHeightMultiplier) {
 var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) {
   return {
     baseAndSmall: {
-      fontSize: "".concat(baseAndSmallFontSize, "px"),
-      lineHeight: "".concat(calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier), "px")
+      fontSize: baseAndSmallFontSize,
+      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)
     },
     mediumAndWide: {
-      fontSize: "".concat(mediumAndWideFontSize, "px"),
-      lineHeight: "".concat(calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier), "px")
+      fontSize: mediumAndWideFontSize,
+      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)
     }
   };
 };
-var typographyLateOceanTheme = {
+var typography = {
   colors: {
     black: lateOceanColorPalette.black1000,
+    'black-anthracite': lateOceanColorPalette.black800,
     'black-light': lateOceanColorPalette.black555,
     white: lateOceanColorPalette.white,
     'white-light': lateOceanColorPalette.white,
@@ -2852,17 +2939,17 @@ var typographyLateOceanTheme = {
 
 var inputStatesStyle = {
   "default": {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
-    borderColor: colorsLateOceanTheme.separator,
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
     color: 'black'
   },
   pending: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
-    borderColor: colorsLateOceanTheme.separator,
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
     color: 'black'
   },
   valid: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    backgroundColor: colors.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
     color: 'black'
   },
@@ -2871,56 +2958,61 @@ var inputStatesStyle = {
     color: 'black'
   },
   focus: {
-    borderColor: colorsLateOceanTheme.primary,
+    borderColor: colors.primary,
     color: 'black'
   },
   disabled: {
-    backgroundColor: colorsLateOceanTheme.disabled,
-    borderColor: colorsLateOceanTheme.separator,
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator,
     color: 'black-light'
   },
   invalid: {
-    borderColor: colorsLateOceanTheme.danger,
+    borderColor: colors.separator,
     color: 'black'
   }
 };
 var input = {
   color: {
-    selection: colorsLateOceanTheme.primary,
-    placeholder: typographyLateOceanTheme.colors['black-light']
+    selection: colors.primary,
+    placeholder: typography.colors['black-light']
   },
-  borderWidth: '2px',
-  borderRadius: '10px',
+  borderWidth: 2,
+  borderRadius: 10,
   icon: {
     size: 20
   },
   padding: {
-    "default": '7px 16px',
-    iOSSingleLine: '12px 16px'
+    "default": '5px 16px',
+    iOSSingleLine: '9px 16px'
+  },
+  transition: {
+    property: 'border-color',
+    duration: '200ms',
+    timingFunction: 'ease-in-out'
   },
   states: inputStatesStyle
 };
 
-var inputFieldLateOceanTheme = {
+var inputField = {
   labelContainerPaddingBottom: 5,
   iconMarginLeft: 6
 };
 
-var radioLateOceanTheme = {
+var radio = {
   size: 18,
   unchecked: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderWidth: '2px',
+    backgroundColor: colors.uiBackgroundLight,
+    borderWidth: 2,
     borderColor: lateOceanColorPalette.black200
   },
   checked: {
-    backgroundColor: lateOceanColorPalette.lateOcean,
+    backgroundColor: colors.primary,
     innerSize: 5,
-    innerBackgroundColor: lateOceanColorPalette.white
+    innerBackgroundColor: colors.uiBackgroundLight
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator
   }
 };
 
@@ -2930,12 +3022,12 @@ var textArea = {
 
 var forms = {
   input: input,
-  radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme,
+  radio: radio,
+  inputField: inputField,
   textArea: textArea
 };
 
-var fullScreenModalLateOceanTheme = {
+var fullScreenModal = {
   header: {
     paddingVertical: 12,
     paddingHorizontal: 16,
@@ -2967,77 +3059,77 @@ var iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: buttonLateOceanTheme.disabled.backgroundColor,
-    borderColor: buttonLateOceanTheme.disabled.borderColor
+    backgroundColor: button.disabled.backgroundColor,
+    borderColor: button.disabled.borderColor
   },
   "default": {
-    pressedBackgroundColor: buttonLateOceanTheme["default"].pressedBackgroundColor
+    pressedBackgroundColor: button["default"].pressedBackgroundColor
   },
   white: {
-    pressedBackgroundColor: buttonLateOceanTheme.white.hoverBackgroundColor
+    pressedBackgroundColor: button.white.hoverBackgroundColor
   }
 };
 
-var listItemLateOceanTheme = {
+var listItem = {
   padding: '12px 16px',
-  borderColor: colorsLateOceanTheme.separator,
-  borderWidth: '1px',
-  innerMargin: '8px'
+  borderColor: colors.separator,
+  borderWidth: 1,
+  innerMargin: 8
 };
 
-var shadowsLateOceanTheme = {
+var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
 
-var skeletonTheme = {
+var skeleton = {
   backgroundColor: lateOceanColorPalette.black100,
   flareColor: lateOceanColorPalette.black200,
   animationDuration: 1000
 };
 
-var tagLateOceanTheme = {
-  borderRadius: '10px',
+var tag = {
+  borderRadius: 10,
   padding: '2px 12px',
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
+      borderWidth: 0,
+      borderColor: colors.transparent
     },
     outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: lateOceanColorPalette.lateOcean
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.primary
     }
   },
   "default": {
     fill: {
       backgroundColor: lateOceanColorPalette.black50,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
+      borderWidth: 0,
+      borderColor: colors.transparent
     },
     outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: lateOceanColorPalette.black1000
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.black
     }
   },
   danger: {
     fill: {
       backgroundColor: lateOceanColorPalette.warmEmbrace,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
+      borderWidth: 0,
+      borderColor: colors.transparent
     },
     outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: colorsLateOceanTheme.danger
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.danger
     }
   }
 };
 
 var tooltip = {
-  backgroundColor: colorsLateOceanTheme.black,
+  backgroundColor: colors.black,
   borderRadius: 10,
   opacity: 0.95,
   horizontalPadding: 16,
@@ -3070,23 +3162,23 @@ var breakpoints = {
 
 var theme = {
   spacing: 4,
-  colors: colorsLateOceanTheme,
+  colors: colors,
   palettes: {
     lateOcean: lateOceanColorPalette
   },
   avatar: avatar,
-  button: buttonLateOceanTheme,
-  card: cardLateOceanTheme,
-  feedbackMessage: feedbackMessageLateOceanTheme,
+  button: button,
+  card: card,
+  feedbackMessage: feedbackMessage,
   forms: forms,
-  typography: typographyLateOceanTheme,
-  tag: tagLateOceanTheme,
-  shadows: shadowsLateOceanTheme,
-  fullScreenModal: fullScreenModalLateOceanTheme,
+  typography: typography,
+  tag: tag,
+  shadows: shadows,
+  fullScreenModal: fullScreenModal,
   iconButton: iconButton,
-  listItem: listItemLateOceanTheme,
+  listItem: listItem,
   tooltip: tooltip,
-  skeleton: skeletonTheme,
+  skeleton: skeleton,
   breakpoints: breakpoints
 };
 
@@ -3100,25 +3192,6 @@ function TimePicker() {
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var Arrow = function (props) {
-  return /*#__PURE__*/jsx("svg", _objectSpread$1(_objectSpread$1({}, props), {}, {
-    children: /*#__PURE__*/jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M22.399 6.128C20.939 7.722 19.767 9 18 9s-2.938-1.278-4.399-2.872C11.187 3.494 7.984 0 0 0h36c-7.984 0-11.187 3.494-13.601 6.128z",
-      fill: "currentColor"
-    })
-  }));
-};
-
-Arrow.defaultProps = {
-  width: "36",
-  height: "8",
-  viewBox: "0 0 36 9",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
 var StyledTooltipView = /*#__PURE__*/styled$1(View).withConfig({
   displayName: "TooltipView__StyledTooltipView",
   componentId: "kitt-universal__sc-156zm6m-0"
@@ -3143,7 +3216,7 @@ var StyledTooltipContent = /*#__PURE__*/styled$1(View).withConfig({
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(View, _objectSpread$1(_objectSpread$1({}, props), {}, {
-    children: /*#__PURE__*/jsx(Arrow, {
+    children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
   }));
@@ -3335,13 +3408,8 @@ function TypographyEmoji(_ref2) {
   var typeConfig = getTypographyTypeConfig(typeForCurrentWindowSize || 'body', theme);
   var typeConfigKey = getTypographyTypeConfigKey(theme);
   var fontSize = typeConfig[typeConfigKey].fontSize;
-
-  if ((process.env.NODE_ENV !== "production")) {
-    if (!fontSize.endsWith('px')) throw new Error("Unexpected font-size value: ".concat(fontSize));
-  }
-
   return /*#__PURE__*/jsx(StyledTypographyEmoji, {
-    size: parseInt(fontSize.slice(0, -2), 10),
+    size: fontSize,
     emoji: emoji
   });
 }
@@ -3515,10 +3583,8 @@ function MatchWindowSize(_ref) {
 
   var match = useMatchWindowSize(matchWindowSizeOptions);
   if (!match) return null;
-  return /*#__PURE__*/jsx(Fragment$1, {
-    children: children
-  });
+  return children;
 }
 
-export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputIcon, InputPassword, InputPressable, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPressable, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.web.js.map