@ornikar/kitt-universal 4.0.0 → 4.3.0

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

@@ -51,7 +51,7 @@ function SpinningIcon({
   });
 }
 
-const IconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const IconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
@@ -73,7 +73,7 @@ function Icon({
   const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
     color
   });
-  return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
     align: align,
     size: size,
     color: color,
@@ -175,8 +175,8 @@ const StyledTypography = /*#__PURE__*/styled__default(BabelPluginStyledComponent
       /* type */
       ${!$typeForCurrentWindowSize ? '' : `
   font-family: ${$isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant]};
-  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize};
-  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight};
+  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize}px;
+  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight}px;
     `}
 
     /* variant */
@@ -322,7 +322,7 @@ const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponent
   $size
 }) => {
   if ($isRound) return `${$size / 2}px`;
-  return theme.kitt.avatar.borderRadius;
+  return `${theme.kitt.avatar.borderRadius}px`;
 }, ({
   theme,
   $isLight
@@ -430,7 +430,7 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     }],
     "a1vkj3mh-7": [({
       theme
-    }) => theme.kitt.button.borderRadius],
+    }) => theme.kitt.button.borderRadius, "px"],
     "a1vkj3mh-8": [({
       theme
     }) => `opacity ${theme.kitt.button.transition.duration} ${theme.kitt.button.transition.timingFunction}`],
@@ -439,20 +439,20 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     }) => $isDisabled ? 1 : 0],
     "a1vkj3mh-10": [({
       theme
-    }) => `-${theme.kitt.button.borderWidth.disabled}`],
+    }) => `-${theme.kitt.button.borderWidth.disabled}px`],
     "a1vkj3mh-12": [({
       theme
-    }) => `calc(100% - ${parseInt(theme.kitt.button.borderWidth.disabled, 10) * 0.5}px)`],
+    }) => `calc(100% - ${theme.kitt.button.borderWidth.disabled * 0.5}px)`],
     "a1vkj3mh-14": [({
       theme
-    }) => `${theme.kitt.button.disabled.borderColor} solid ${theme.kitt.button.borderWidth.disabled}`],
+    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.borderColor}`],
     "a1vkj3mh-15": [({
       theme,
       $type
-    }) => `${theme.kitt.button.borderWidth.focus} solid ${theme.kitt.button[$type].focusBorderColor}`],
+    }) => `${theme.kitt.button.borderWidth.focus}px solid ${theme.kitt.button[$type].focusBorderColor}`],
     "a1vkj3mh-16": [({
       theme
-    }) => `-${theme.kitt.button.borderWidth.focus}`],
+    }) => `-${theme.kitt.button.borderWidth.focus}px`],
     "a1vkj3mh-18": [({
       theme,
       $type,
@@ -503,12 +503,12 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
 const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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:", ";"], ({
+})(["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:", ";"], ({
   theme
 }) => theme.kitt.button.minWidth, ({
   theme,
   $isStretch
-}) => $isStretch ? '100%' : theme.kitt.button.maxWidth, ({
+}) => $isStretch ? '100%' : `${theme.kitt.button.maxWidth}px`, ({
   $isStretch
 }) => $isStretch ? '100%' : 'auto', ({
   theme
@@ -606,7 +606,7 @@ const StyledButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfi
   if ($isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-const StyledIconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const StyledIconContainer$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["", ""], ({
@@ -629,7 +629,7 @@ function ButtonIcon({
   iconPosition,
   testID
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer$1, {
     $iconPosition: iconPosition,
     children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
       icon: icon,
@@ -777,15 +777,15 @@ const Button = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-const Container$4 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const Container$3 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
-})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
+})(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], ({
   theme,
   type
 }) => theme.kitt.card[type].backgroundColor, ({
   theme
-}) => theme.kitt.card.padding, ({
+}) => theme.kitt.spacing * 4, ({
   theme
 }) => theme.kitt.card.borderRadius, ({
   theme
@@ -797,7 +797,7 @@ function Card({
   children,
   type
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$4, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$3, {
     type: type,
     children: children
   });
@@ -853,107 +853,7 @@ function ExternalLink({
   });
 }
 
-const getColorFromState = state => {
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-
-    case 'valid':
-    default:
-      return 'black-light';
-  }
-};
-
-function InputFeedback({
-  state,
-  testID,
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-    base: "body-small",
-    color: getColorFromState(state),
-    testID: testID,
-    children: children
-  });
-}
-
-const FieldContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], ({
-  theme
-}) => theme.responsive.ifWindowSizeMatches({
-  minWidth: KittBreakpoints.SMALL
-}, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.iconMarginLeft);
-function InputField({
-  label,
-  labelFeedback,
-  input,
-  feedback
-}) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
-        children: label
-      }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.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({
-  icon,
-  state,
-  disabled
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const color = getIconColor(state, disabled);
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-    color: color,
-    icon: icon,
-    size: theme.kitt.forms.input.icon.size
-  });
-}
-
-function InputPressable({ ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, { ...props
-  });
-}
-
-const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
+const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
   theme,
   $state
 }) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
@@ -967,7 +867,7 @@ const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";bor
   theme
 }) => {
   const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
+  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize}px`;
 }, ({
   theme,
   $state
@@ -986,10 +886,44 @@ function getInputUIState({
   return 'default';
 }
 
+const InputTextContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "InputTextContainer",
+  class: "i1encr9g",
+  vars: {
+    "i1encr9g-0": [({
+      $isDisabled
+    }) => $isDisabled ? 'not-allowed' : 'inherit'],
+    "i1encr9g-1": [({
+      theme
+    }) => {
+      const {
+        property,
+        duration,
+        timingFunction
+      } = theme.kitt.forms.input.transition;
+      return `${property} ${duration} ${timingFunction}`;
+    }],
+    "i1encr9g-2": [({
+      theme,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.hover.borderColor;
+    }],
+    "i1encr9g-3": [({
+      theme,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.focus.borderColor;
+    }]
+  }
+}));
+
 const StyledTextInput = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
+})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, ({
   theme,
   multiline
 }) => {
@@ -1004,17 +938,13 @@ const StyledTextInput = /*#__PURE__*/styled__default(BabelPluginStyledComponents
 }) => {
   if (!multiline && "web" === 'ios') return 0;
   const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
+  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
 }, ({
   $minHeight
 }) => $minHeight);
-const InputTextContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputText__InputTextContainer",
-  componentId: "kitt-universal__sc-uke279-1"
-})(["position:relative;"]);
 const RightInputContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;"]);
 const InputText = /*#__PURE__*/react.forwardRef(({
   id,
@@ -1039,6 +969,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
     formState
   });
   return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
+    $isDisabled: disabled,
     children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
       ref: ref,
       nativeID: id,
@@ -1066,6 +997,115 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   });
 });
 
+function InputEmail(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    autoCompleteType: "email",
+    keyboardType: "email-address",
+    textContentType: "emailAddress",
+    ...props
+  });
+}
+
+const getColorFromState = state => {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+    default:
+      return 'black-light';
+  }
+};
+
+function InputFeedback({
+  state,
+  testID,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    base: "body-small",
+    color: getColorFromState(state),
+    testID: testID,
+    children: children
+  });
+}
+
+const FieldContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FieldContainer",
+  componentId: "kitt-universal__sc-13fkixs-0"
+})(["padding:5px 0 10px;"]);
+const FeedbackContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FeedbackContainer",
+  componentId: "kitt-universal__sc-13fkixs-1"
+})(["", ";"], ({
+  theme
+}) => theme.responsive.ifWindowSizeMatches({
+  minWidth: KittBreakpoints.SMALL
+}, 'padding-top: 10px', 'padding-top: 5px'));
+const FieldLabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FieldLabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-2"
+})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
+  theme
+}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
+const LabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__LabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-3"
+})(["margin-right:", "px;"], ({
+  theme
+}) => theme.kitt.forms.inputField.iconMarginLeft);
+function InputField({
+  label,
+  labelFeedback,
+  input,
+  feedback
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+        children: label
+      }), labelFeedback]
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.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({
+  icon,
+  state,
+  disabled
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
+
+function InputPressable({ ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, { ...props
+  });
+}
+
 function InputPassword({
   isPasswordDefaultVisible,
   right,
@@ -1103,7 +1143,7 @@ function Label({
 const OuterRadio = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], ({
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], ({
   theme,
   disabled
 }) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor, ({
@@ -1142,7 +1182,7 @@ const SelectedInnerRadio = /*#__PURE__*/styled__default(BabelPluginStyledCompone
 }) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
 }) => theme.kitt.forms.radio.checked.innerSize / 2);
-const Container$3 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+const Container$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -1160,7 +1200,7 @@ function Radio({
   disabled = false,
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1327,7 +1367,7 @@ function FullScreenModalHeader({
   });
 }
 
-const Container$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const Container$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], ({
@@ -1336,7 +1376,7 @@ const Container$2 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReac
 function FullScreenModal({
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
     children: children
   });
 }
@@ -1518,10 +1558,10 @@ const SideContainerView = /*#__PURE__*/styled__default(BabelPluginStyledComponen
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
   theme,
   side
-}) => side === 'right' ? theme.kitt.listItem.innerMargin : 0, ({
+}) => side === 'right' ? `${theme.kitt.listItem.innerMargin}px` : 0, ({
   theme,
   side
-}) => side === 'left' ? theme.kitt.listItem.innerMargin : 0); // Handles the vertical alignment of the side elements of the list item
+}) => side === 'left' ? `${theme.kitt.listItem.innerMargin}px` : 0); // Handles the vertical alignment of the side elements of the list item
 
 function ListItemSideContainer({
   children,
@@ -1567,15 +1607,15 @@ const ContainerView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsRe
   } = theme.kitt.listItem;
 
   if (borders === 'top') {
-    return `border-top-width: ${borderWidth}`;
+    return `border-top-width: ${borderWidth}px`;
   }
 
   if (borders === 'bottom') {
-    return `border-bottom-width: ${borderWidth}`;
+    return `border-bottom-width: ${borderWidth}px`;
   }
 
   if (borders === 'both') {
-    return `border-top-width: ${borderWidth}; border-bottom-width: ${borderWidth}`;
+    return styled.css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
   }
 
   return 'border: none';
@@ -1671,47 +1711,32 @@ function Loader({
   });
 }
 
-const xIconSize = 14;
-const mainIconSize = 20;
-const Container$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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;"], ({
-  theme,
-  noRadius
-}) => noRadius ? 0 : theme.kitt.spacing * 5, ({
-  theme,
-  type
-}) => theme.kitt.feedbackMessage.backgroundColors[type], ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme,
-  insets
-}) => (insets?.top ?? 0) + theme.kitt.spacing * 4);
-const CloseContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TouchableOpacity).withConfig({
-  displayName: "Message__CloseContainer",
-  componentId: "kitt-universal__sc-c6400e-1"
-})(["margin-left:", "px;padding:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 4, ({
-  theme
-}) => theme.kitt.spacing);
-const IconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Message__IconContainer",
-  componentId: "kitt-universal__sc-c6400e-2"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 4);
-const Content = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Text).withConfig({
-  displayName: "Message__Content",
-  componentId: "kitt-universal__sc-c6400e-3"
-})(["text-align:", ";flex:1;"], ({
-  centeredText
-}) => centeredText ? 'center' : 'left');
+function IconContent({
+  type,
+  color
+}) {
+  switch (type) {
+    case 'warning':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertCircleIcon, {
+        color: color
+      });
+
+    case 'success':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckIcon, {
+        color: color
+      });
+
+    case 'danger':
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertTriangleIcon, {
+        color: color
+      });
+
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.InfoIcon, {
+        color: color
+      });
+  }
+}
 
 const getColorByType = type => {
   switch (type) {
@@ -1726,61 +1751,125 @@ const getColorByType = type => {
       return 'black';
   }
 };
-
-function getIconContent(type) {
-  switch (type) {
-    case 'warning':
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertCircleIcon, {});
-
+const getIconButtonColor = messageType => {
+  switch (messageType) {
     case 'success':
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckIcon, {});
-
     case 'danger':
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.AlertTriangleIcon, {});
+      return 'white';
 
+    case 'warning':
     default:
-      return /*#__PURE__*/jsxRuntime.jsx(kittIcons.InfoIcon, {});
+      return 'black';
   }
-}
+};
 
-function Message({
+const StyledMessageContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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:", ";"], ({
+  $insets
+}) => $insets?.top ?? 0, ({
+  theme,
+  $hasNoRadius
+}) => $hasNoRadius ? 0 : theme.kitt.spacing * 5, ({
+  theme,
+  $type
+}) => theme.kitt.feedbackMessage[$type].backgroundColor);
+const StyledDismissWrapper = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseMessage__StyledDismissWrapper",
+  componentId: "kitt-universal__sc-eepeiz-1"
+})(["align-items:center;align-items:flex-start;margin:", ";"], ({
+  theme
+}) => {
+  const {
+    spacing
+  } = theme.kitt;
+  return `${spacing * 2.5}px  ${spacing * 2}px 0 ${spacing * 5}px`;
+});
+const StyledIconContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "BaseMessage__StyledIconContainer",
+  componentId: "kitt-universal__sc-eepeiz-2"
+})(["margin:", ";"], ({
+  theme
+}) => {
+  const {
+    spacing
+  } = theme.kitt;
+  return `${spacing}px ${spacing * 5}px 0 0`;
+});
+const StyledTextContent = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "BaseMessage__StyledTextContent",
+  componentId: "kitt-universal__sc-eepeiz-3"
+})(["flex:1;text-align:", ";"], ({
+  $isCenteredText
+}) => $isCenteredText ? 'center' : 'left');
+const StyledMessageContent = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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:", ";"], ({
+  theme
+}) => {
+  const {
+    spacing
+  } = theme.kitt;
+  return `${spacing * 4}px ${spacing * 5}px`;
+});
+function BaseMessage({
   type = 'info',
   children,
-  noRadius = false,
-  centeredText = false,
-  onDismiss,
-  insets
+  hasNoRadius,
+  centeredText,
+  insets,
+  onDismiss
 }) {
   const color = getColorByType(type);
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
-    type: type,
-    noRadius: noRadius,
-    insets: insets,
-    children: [!centeredText ? /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-        size: mainIconSize,
-        color: color,
-        icon: getIconContent(type)
-      })
-    }) : null, /*#__PURE__*/jsxRuntime.jsx(Content, {
-      type: type,
-      centeredText: centeredText,
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-        base: "body-small",
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledMessageContainer, {
+    $type: type,
+    $hasNoRadius: hasNoRadius,
+    $insets: insets,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledMessageContent, {
+      children: [centeredText ? null : /*#__PURE__*/jsxRuntime.jsx(StyledIconContainer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          color: color,
+          icon: /*#__PURE__*/jsxRuntime.jsx(IconContent, {
+            type: type,
+            color: color
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledTextContent, {
+        $isCenteredText: centeredText,
+        base: "body",
         color: color,
         children: children
-      })
-    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(CloseContainer, {
-      onPress: onDismiss,
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      })]
+    }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx(StyledDismissWrapper, {
+      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+        color: getIconButtonColor(type),
         icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
-        size: xIconSize,
-        color: color
+        onPress: onDismiss
       })
     }) : null]
   });
 }
 
+function Message({
+  type = 'info',
+  children,
+  hasNoRadius,
+  centeredText,
+  insets,
+  onDismiss
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(BaseMessage, {
+    insets: insets,
+    hasNoRadius: hasNoRadius,
+    type: type,
+    centeredText: centeredText,
+    onDismiss: onDismiss,
+    children: children
+  });
+}
+
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
 const OverlayPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
@@ -1897,11 +1986,11 @@ const ModalView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactN
 const ContentView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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:", ";"], ({
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], ({
   theme
 }) => theme.kitt.card.borderRadius, ({
   theme
-}) => theme.kitt.palettes.lateOcean.white);
+}) => theme.kitt.colors.uiBackgroundLight);
 function Modal({
   visible,
   children,
@@ -1936,19 +2025,22 @@ function Notification({
   type,
   children,
   centeredText,
-  onDelete
+  insets,
+  onDelete,
+  onDismiss
 }) {
-  const {
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  return /*#__PURE__*/jsxRuntime.jsx(Message, {
-    noRadius: true,
+  if ((process.env.NODE_ENV !== "production")) {
+    if (onDelete) {
+      throw new Error('onDelete is deprecated us onDismiss instead');
+    }
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(BaseMessage, {
+    hasNoRadius: true,
     type: type,
     centeredText: centeredText,
-    insets: {
-      top
-    },
-    onDismiss: onDelete,
+    insets: insets,
+    onDismiss: onDismiss,
     children: children
   });
 }
@@ -1982,12 +2074,16 @@ function SkeletonContent({
   });
 }
 
+const SkeletonContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Skeleton__SkeletonContainer",
+  componentId: "kitt-universal__sc-1w5cm3i-0"
+})(["overflow:hidden;"]);
 function Skeleton({
   isLoading,
   style
 }) {
   const [width, setWidth] = react.useState(0);
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {
+  return /*#__PURE__*/jsxRuntime.jsx(SkeletonContainer, {
     style: style,
     onLayout: ({
       nativeEvent
@@ -2000,16 +2096,16 @@ function Skeleton({
 }
 const Bar = /*#__PURE__*/styled__default(Skeleton).withConfig({
   displayName: "Skeleton__Bar",
-  componentId: "kitt-universal__sc-1w5cm3i-0"
-})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  componentId: "kitt-universal__sc-1w5cm3i-1"
+})(["width:100%;height:", "px;border-radius:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 2, ({
   theme
 }) => theme.kitt.spacing * 2);
 const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
   displayName: "Skeleton__Circle",
-  componentId: "kitt-universal__sc-1w5cm3i-1"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  componentId: "kitt-universal__sc-1w5cm3i-2"
+})(["width:", "px;height:", "px;border-radius:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 12, ({
   theme
@@ -2018,8 +2114,8 @@ const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
 }) => theme.kitt.spacing * 6);
 const Square = /*#__PURE__*/styled__default(Skeleton).withConfig({
   displayName: "Skeleton__Square",
-  componentId: "kitt-universal__sc-1w5cm3i-2"
-})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  componentId: "kitt-universal__sc-1w5cm3i-3"
+})(["width:", "px;height:", "px;border-radius:", "px;"], ({
   theme
 }) => theme.kitt.spacing * 12, ({
   theme
@@ -2373,7 +2469,7 @@ const StoryGrid = {
 const Container = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
+})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], ({
   theme,
   type,
   variant
@@ -2437,6 +2533,7 @@ const lateOceanColorPalette = {
   warmEmbrace: '#F4D3CE',
   warmEmbraceLight1: '#FFEDE6',
   black1000: '#000000',
+  black800: '#2C293D',
   black555: '#737373',
   black200: '#CCCCCC',
   black100: '#E5E5E5',
@@ -2452,7 +2549,7 @@ const lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-const colorsLateOceanTheme = {
+const colors = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
   accent: lateOceanColorPalette.warmEmbrace,
@@ -2460,6 +2557,8 @@ const 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,
@@ -2475,24 +2574,24 @@ const colorsLateOceanTheme = {
 };
 
 const avatar = {
-  borderRadius: '10px',
+  borderRadius: 10,
   default: {
-    backgroundColor: colorsLateOceanTheme.primary
+    backgroundColor: colors.primary
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
   }
 };
 
-const buttonLateOceanTheme = {
-  borderRadius: '30px',
+const 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,
@@ -2519,9 +2618,9 @@ const 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: {
@@ -2531,73 +2630,79 @@ const 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
   }
 };
 
-const cardLateOceanTheme = {
-  borderRadius: '20px',
-  borderWidth: '2px',
-  padding: '16px',
+const 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
   }
 };
 
-const feedbackMessageLateOceanTheme = {
-  backgroundColors: {
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon,
-    warning: lateOceanColorPalette.goldCrayola,
-    info: lateOceanColorPalette.aero
+const feedbackMessage = {
+  danger: {
+    backgroundColor: colors.danger
+  },
+  success: {
+    backgroundColor: colors.success
+  },
+  info: {
+    backgroundColor: colors.info
+  },
+  warning: {
+    backgroundColor: colors.warning
   }
 };
 
 const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
 const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
   baseAndSmall: {
-    fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
+    fontSize: baseAndSmallFontSize,
+    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)
   },
   mediumAndWide: {
-    fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
+    fontSize: mediumAndWideFontSize,
+    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)
   }
 });
-const typographyLateOceanTheme = {
+const typography = {
   colors: {
     black: lateOceanColorPalette.black1000,
+    'black-anthracite': lateOceanColorPalette.black800,
     'black-light': lateOceanColorPalette.black555,
     white: lateOceanColorPalette.white,
     'white-light': lateOceanColorPalette.white,
@@ -2657,17 +2762,17 @@ const typographyLateOceanTheme = {
 
 const 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'
   },
@@ -2676,56 +2781,61 @@ const 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'
   }
 };
 const 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
 };
 
-const inputFieldLateOceanTheme = {
+const inputField = {
   labelContainerPaddingBottom: 5,
   iconMarginLeft: 6
 };
 
-const radioLateOceanTheme = {
+const 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
   }
 };
 
@@ -2735,12 +2845,12 @@ const textArea = {
 
 const forms = {
   input,
-  radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme,
+  radio,
+  inputField,
   textArea
 };
 
-const fullScreenModalLateOceanTheme = {
+const fullScreenModal = {
   header: {
     paddingVertical: 12,
     paddingHorizontal: 16,
@@ -2772,77 +2882,77 @@ const 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
   }
 };
 
-const listItemLateOceanTheme = {
+const listItem = {
   padding: '12px 16px',
-  borderColor: colorsLateOceanTheme.separator,
-  borderWidth: '1px',
-  innerMargin: '8px'
+  borderColor: colors.separator,
+  borderWidth: 1,
+  innerMargin: 8
 };
 
-const shadowsLateOceanTheme = {
+const shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
 
-const skeletonTheme = {
+const skeleton = {
   backgroundColor: lateOceanColorPalette.black100,
   flareColor: lateOceanColorPalette.black200,
   animationDuration: 1000
 };
 
-const tagLateOceanTheme = {
-  borderRadius: '10px',
+const 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
     }
   }
 };
 
 const tooltip = {
-  backgroundColor: colorsLateOceanTheme.black,
+  backgroundColor: colors.black,
   borderRadius: 10,
   opacity: 0.95,
   horizontalPadding: 16,
@@ -2875,23 +2985,23 @@ const breakpoints = {
 
 const theme = {
   spacing: 4,
-  colors: colorsLateOceanTheme,
+  colors,
   palettes: {
     lateOcean: lateOceanColorPalette
   },
   avatar,
-  button: buttonLateOceanTheme,
-  card: cardLateOceanTheme,
-  feedbackMessage: feedbackMessageLateOceanTheme,
+  button,
+  card,
+  feedbackMessage,
   forms,
-  typography: typographyLateOceanTheme,
-  tag: tagLateOceanTheme,
-  shadows: shadowsLateOceanTheme,
-  fullScreenModal: fullScreenModalLateOceanTheme,
+  typography,
+  tag,
+  shadows,
+  fullScreenModal,
   iconButton,
-  listItem: listItemLateOceanTheme,
+  listItem,
   tooltip,
-  skeleton: skeletonTheme,
+  skeleton,
   breakpoints
 };
 
@@ -2902,24 +3012,6 @@ function TimePicker() {
   });
 }
 
-var Arrow = function (props) {
-  return /*#__PURE__*/jsxRuntime.jsx("svg", { ...props,
-    children: /*#__PURE__*/jsxRuntime.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"
-};
 const StyledTooltipView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "TooltipView__StyledTooltipView",
   componentId: "kitt-universal__sc-156zm6m-0"
@@ -2940,7 +3032,7 @@ const StyledTooltipContent = /*#__PURE__*/styled__default(BabelPluginStyledCompo
 function ArrowView(props) {
   const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, { ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx(Arrow, {
+    children: /*#__PURE__*/jsxRuntime.jsx(kittIcons.TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
   });
@@ -3123,13 +3215,8 @@ function TypographyEmoji({
   const {
     fontSize
   } = typeConfig[typeConfigKey];
-
-  if ((process.env.NODE_ENV !== "production")) {
-    if (!fontSize.endsWith('px')) throw new Error(`Unexpected font-size value: ${fontSize}`);
-  }
-
   return /*#__PURE__*/jsxRuntime.jsx(StyledTypographyEmoji, {
-    size: parseInt(fontSize.slice(0, -2), 10),
+    size: fontSize,
     emoji: emoji
   });
 }
@@ -3288,9 +3375,7 @@ function MatchWindowSize({
 }) {
   const match = useMatchWindowSize(matchWindowSizeOptions);
   if (!match) return null;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: children
-  });
+  return children;
 }
 
 exports.useWindowSize = BabelPluginStyledComponentsReactNative.useWindowDimensions;
@@ -3303,6 +3388,7 @@ exports.Flex = Flex;
 exports.FullScreenModal = FullScreenModal;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.InputEmail = InputEmail;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
 exports.InputIcon = InputIcon;