@ornikar/kitt-universal 3.8.1 → 4.1.0

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

@@ -57,7 +57,7 @@ function SpinningIcon({
   });
 }
 
-const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
+const IconContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
@@ -79,7 +79,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,
@@ -612,7 +612,7 @@ const StyledButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfi
   if (reactNative.Platform.OS !== 'web' || $isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-const StyledIconContainer = /*#__PURE__*/styled__default.View.withConfig({
+const StyledIconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["", ""], ({
@@ -635,7 +635,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,
@@ -801,7 +801,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-const Container$7 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
@@ -821,7 +821,7 @@ function Card({
   children,
   type
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$7, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$5, {
     type: type,
     children: children
   });
@@ -901,6 +901,7 @@ const getColorFromState = state => {
     case 'invalid':
       return 'danger';
 
+    case 'valid':
     default:
       return 'black-light';
   }
@@ -960,46 +961,87 @@ function InputField({
   });
 }
 
-const useInputText = () => {
-  const [isFocused, setIsFocused] = react.useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = react.useState(false);
-  return {
-    isFocused,
-    handleInputFocus: () => setIsFocused(true),
-    handleInputBlur: () => setIsFocused(false),
-    togglePasswordVisibility: () => setIsPasswordVisible(isVisible => !isVisible),
-    isPasswordVisible
-  };
-};
+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(reactNative.Pressable, { ...props
+  });
+}
 
 const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", ";border-radius:", ";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, ({
+  $state
+}) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
   theme
 }) => theme.kitt.forms.input.borderWidth, ({
   theme
 }) => theme.kitt.forms.input.borderRadius, ({
   theme,
-  state
-}) => theme.kitt.forms.input.states[state].borderColor, ({
+  $state
+}) => theme.kitt.forms.input.states[$state].borderColor, ({
   theme
 }) => {
   const typeConfigKey = getTypographyTypeConfigKey(theme);
   return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
 }, ({
   theme,
-  state
-}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color], ({
+  $state
+}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color], ({
   theme
 }) => theme.kitt.typography.types.bodies.fontFamily.regular);
-const Input = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
-  displayName: "InputText__Input",
+
+function getInputUIState({
+  isFocused,
+  isDisabled,
+  formState
+}) {
+  if (isDisabled) return 'disabled';
+  if (isFocused) return 'focus';
+  if (formState === 'invalid') return 'invalid';
+  return 'default';
+}
+
+const StyledTextInput = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
+  displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
   theme,
   multiline
-}) => !multiline && reactNative.Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
+}) => {
+  if (!multiline && reactNative.Platform.OS === 'ios') {
+    return theme.kitt.forms.input.padding.iOSSingleLine;
+  }
+
+  return theme.kitt.forms.input.padding.default;
+}, ({
   theme,
   multiline
 }) => {
@@ -1007,116 +1049,86 @@ const Input = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
   const typeConfigKey = getTypographyTypeConfigKey(theme);
   return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
 }, ({
-  minHeight
-}) => minHeight);
-const Container$6 = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputText__Container",
+  $minHeight
+}) => $minHeight);
+const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputText__InputTextContainer",
   componentId: "kitt-universal__sc-uke279-1"
-})(["margin-top:", ";margin-bottom:", ";"], ({
-  theme
-}) => theme.kitt.forms.input.marginTop, ({
-  theme
-}) => theme.kitt.forms.input.marginBottom);
-const PasswordButtonContainer = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "InputText__PasswordButtonContainer",
+})(["position:relative;"]);
+const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputText__RightInputContainer",
   componentId: "kitt-universal__sc-uke279-2"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], ({
-  theme
-}) => theme.kitt.forms.input.passwordButtonIconSize / 2);
-
-const getInputState = ({
-  isDisabled,
-  isFocused,
-  formState
-}) => {
-  if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
-  return 'default';
-};
-
-const keyboardTypeByTextInputType = {
-  text: 'default',
-  email: 'email-address',
-  password: 'default',
-  username: 'default'
-};
-const autoCompleteTypeByType = {
-  text: 'off',
-  email: 'email',
-  password: 'password',
-  username: 'name'
-};
-const autoCorrectByType = {
-  text: true,
-  email: false,
-  password: false,
-  username: false
-};
-const textContentTypeByType = {
-  text: 'none',
-  email: 'emailAddress',
-  password: 'password',
-  username: 'username'
-};
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
 const InputText = /*#__PURE__*/react.forwardRef(({
   id,
+  right,
   minHeight = 0,
-  type,
   state: formState,
   internalForceState,
   disabled = false,
+  autoCorrect = true,
+  textContentType = 'none',
+  autoCompleteType = 'off',
+  keyboardType = 'default',
   onFocus,
   onBlur,
   ...props
 }, ref) => {
-  const {
-    isFocused,
-    handleInputBlur,
-    handleInputFocus,
-    isPasswordVisible,
-    togglePasswordVisibility
-  } = useInputText();
   const theme = /*#__PURE__*/styled.useTheme();
-  const state = internalForceState || getInputState({
+  const [isFocused, setIsFocused] = react.useState(false);
+  const state = internalForceState || getInputUIState({
     isFocused,
     isDisabled: disabled,
     formState
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$6, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
       ref: ref,
       nativeID: id,
       editable: !disabled,
-      keyboardType: keyboardTypeByTextInputType[type],
-      autoCompleteType: autoCompleteTypeByType[type],
-      autoCorrect: autoCorrectByType[type],
-      minHeight: minHeight,
-      textContentType: textContentTypeByType[type],
-      placeholderTextColor: theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor],
-      selectionColor: theme.kitt.forms.input.selectionColor,
-      secureTextEntry: type === 'password' && !isPasswordVisible,
+      keyboardType: keyboardType,
+      autoCompleteType: autoCompleteType,
+      autoCorrect: autoCorrect,
+      $minHeight: minHeight,
+      textContentType: textContentType,
+      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
+      selectionColor: theme.kitt.forms.input.color.selection,
       ...props,
-      state: state,
+      $state: state,
       onFocus: e => {
-        handleInputFocus();
+        setIsFocused(true);
         if (onFocus) onFocus(e);
       },
       onBlur: e => {
-        handleInputBlur();
+        setIsFocused(false);
         if (onBlur) onBlur(e);
       }
-    }), type === 'password' && !disabled && /*#__PURE__*/jsxRuntime.jsx(PasswordButtonContainer, {
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(RightInputContainer, {
+      children: right
+    }) : null]
+  });
+});
+
+function InputPassword({
+  isPasswordDefaultVisible,
+  right,
+  ...props
+}) {
+  const [isVisible, setIsVisible] = react.useState(Boolean(isPasswordDefaultVisible));
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, { ...props,
+    textContentType: "password",
+    autoCompleteType: "password",
+    autoCorrect: false,
+    secureTextEntry: !isVisible,
+    right: right || /*#__PURE__*/jsxRuntime.jsx(InputPressable, {
       accessibilityRole: "button",
-      onPress: togglePasswordVisibility,
-      children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-        icon: isPasswordVisible ? /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeOffIcon, {}),
-        size: theme.kitt.forms.input.passwordButtonIconSize,
-        color: theme.kitt.forms.input.states[state].passwordButtonIconColor
+      onPress: () => setIsVisible(prev => !prev),
+      children: /*#__PURE__*/jsxRuntime.jsx(InputIcon, {
+        icon: isVisible ? /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeOffIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeIcon, {})
       })
-    })]
+    })
   });
-});
+}
 
 function Label({
   htmlFor,
@@ -1173,7 +1185,7 @@ const SelectedInnerRadio = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
 }) => theme.kitt.forms.radio.checked.innerSize / 2);
-const Container$5 = /*#__PURE__*/styled__default.Pressable.withConfig({
+const Container$4 = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -1191,7 +1203,7 @@ function Radio({
   disabled = false,
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$4, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1218,9 +1230,8 @@ function TextArea({ ...props
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     multiline: true,
     textAlignVertical: "top",
-    ...props,
-    type: "text",
-    minHeight: theme.kitt.forms.input.textAreaMinHeight
+    minHeight: theme.kitt.forms.textArea.minHeight,
+    ...props
   });
 }
 
@@ -1359,7 +1370,7 @@ function FullScreenModalHeader({
   });
 }
 
-const Container$4 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$3 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], ({
@@ -1368,7 +1379,7 @@ const Container$4 = /*#__PURE__*/styled__default.View.withConfig({
 function FullScreenModal({
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$4, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$3, {
     children: children
   });
 }
@@ -1518,6 +1529,9 @@ const AnimatedViewContainer = /*#__PURE__*/styled__default(Animated__default.Vie
 function PressableAnimatedContainer({
   disabled,
   color = 'black',
+  testID,
+  accessibilityRole = 'button',
+  accessibilityLabel,
   children,
   onPress
 }) {
@@ -1536,7 +1550,7 @@ function PressableAnimatedContainer({
     };
     _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
     _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (54:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1570,7 +1584,7 @@ function PressableAnimatedContainer({
     };
     _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
     _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:39)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1578,9 +1592,11 @@ function PressableAnimatedContainer({
     return _f;
   }());
   return /*#__PURE__*/jsxRuntime.jsx(PressableIconButton, {
-    accessibilityRole: "button",
+    accessibilityRole: accessibilityRole,
     disabled: disabled,
     color: color,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
     onPress: onPress,
     onPressIn: () => {
       pressed.value = true;
@@ -1639,11 +1655,17 @@ function IconButton({
   icon,
   color,
   disabled,
+  testID,
+  accessibilityLabel,
+  accessibilityRole,
   onPress
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(PressableAnimatedContainer, {
     color: color,
     disabled: disabled,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
     onPress: onPress,
     children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
       disabled: disabled,
@@ -1802,47 +1824,32 @@ function LargeLoader({
   });
 }
 
-const xIconSize = 14;
-const mainIconSize = 20;
-const Container$3 = /*#__PURE__*/styled__default.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(reactNative.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.View.withConfig({
-  displayName: "Message__IconContainer",
-  componentId: "kitt-universal__sc-c6400e-2"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 4);
-const Content = /*#__PURE__*/styled__default.Text.withConfig({
-  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) {
@@ -1857,61 +1864,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.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.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.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.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$3, {
-    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(reactNative.Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
@@ -2067,19 +2138,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
   });
 }
@@ -2147,12 +2221,16 @@ function SkeletonContent({
   });
 }
 
+const SkeletonContainer = /*#__PURE__*/styled__default(reactNative.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(reactNative.View, {
+  return /*#__PURE__*/jsxRuntime.jsx(SkeletonContainer, {
     style: style,
     onLayout: ({
       nativeEvent
@@ -2165,16 +2243,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
@@ -2183,8 +2261,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
@@ -2628,6 +2706,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,
@@ -2652,7 +2732,7 @@ const avatar = {
   }
 };
 
-const buttonLateOceanTheme = {
+const button = {
   borderRadius: '30px',
   borderWidth: {
     disabled: '2px',
@@ -2743,63 +2823,148 @@ const cardLateOceanTheme = {
   }
 };
 
-const feedbackMessageLateOceanTheme = {
-  backgroundColors: {
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon,
-    warning: lateOceanColorPalette.goldCrayola,
-    info: lateOceanColorPalette.aero
+const feedbackMessage = {
+  danger: {
+    backgroundColor: colorsLateOceanTheme.danger
+  },
+  success: {
+    backgroundColor: colorsLateOceanTheme.success
+  },
+  info: {
+    backgroundColor: colorsLateOceanTheme.info
+  },
+  warning: {
+    backgroundColor: colorsLateOceanTheme.warning
   }
 };
 
-const inputFieldLateOceanTheme = {
-  labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
+const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
+  baseAndSmall: {
+    fontSize: `${baseAndSmallFontSize}px`,
+    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
+  },
+  mediumAndWide: {
+    fontSize: `${mediumAndWideFontSize}px`,
+    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
+  }
+});
+const typographyLateOceanTheme = {
+  colors: {
+    black: lateOceanColorPalette.black1000,
+    'black-light': lateOceanColorPalette.black555,
+    white: lateOceanColorPalette.white,
+    'white-light': lateOceanColorPalette.white,
+    primary: lateOceanColorPalette.lateOcean,
+    'primary-light': lateOceanColorPalette.lateOceanLight1,
+    accent: lateOceanColorPalette.warmEmbrace,
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon
+  },
+  types: {
+    headers: {
+      fontFamily: {
+        regular: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
+      },
+      fontWeight: 400,
+      fontStyle: 'normal',
+      configs: {
+        // also known as xxlarge
+        header1: createTypographyTypeConfig(1.3, 38, 62),
+        // also known as xlarge
+        header2: createTypographyTypeConfig(1.3, 32, 48),
+        // also known as medium
+        header3: createTypographyTypeConfig(1.3, 24, 36),
+        // also known as xsmall
+        header4: createTypographyTypeConfig(1.3, 18, 24),
+        // also known as xxsmall
+        header5: createTypographyTypeConfig(1.3, 18, 18)
+      }
+    },
+    bodies: {
+      fontFamily: {
+        regular: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
+        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
+      configs: {
+        'body-large': createTypographyTypeConfig(1.6, 18, 24),
+        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
+        body: createTypographyTypeConfig(1.6, 16, 16),
+        'body-small': createTypographyTypeConfig(1.6, 14, 14),
+        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
+      }
+    }
+  },
+  link: {
+    disabledColor: lateOceanColorPalette.black200
+  }
 };
 
 const inputStatesStyle = {
   default: {
-    backgroundColor: lateOceanColorPalette.white,
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black'
+  },
+  pending: {
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black'
+  },
+  valid: {
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    color: 'black'
   },
   hover: {
     borderColor: lateOceanColorPalette.black200,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    color: 'black'
   },
   focus: {
-    borderColor: lateOceanColorPalette.lateOcean,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    borderColor: colorsLateOceanTheme.primary,
+    color: 'black'
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black-light',
-    passwordButtonIconColor: 'black-light'
+    backgroundColor: colorsLateOceanTheme.disabled,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black-light'
   },
   invalid: {
-    borderColor: lateOceanColorPalette.englishVermillon,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    borderColor: colorsLateOceanTheme.danger,
+    color: 'black'
   }
 };
-const inputLateOceanTheme = {
-  marginTop: '2px',
-  marginBottom: '4px',
+const input = {
+  color: {
+    selection: colorsLateOceanTheme.primary,
+    placeholder: typographyLateOceanTheme.colors['black-light']
+  },
   borderWidth: '2px',
   borderRadius: '10px',
-  passwordButtonIconSize: 20,
-  padding: '7px 16px',
-  paddingSingleLineIOS: '12px 16px',
-  selectionColor: lateOceanColorPalette.lateOcean,
-  placeholderColor: 'black-light',
-  textAreaMinHeight: 120,
+  icon: {
+    size: 20
+  },
+  padding: {
+    default: '7px 16px',
+    iOSSingleLine: '12px 16px'
+  },
   states: inputStatesStyle
 };
 
+const inputFieldLateOceanTheme = {
+  labelContainerPaddingBottom: 5,
+  iconMarginLeft: 6
+};
+
 const radioLateOceanTheme = {
   size: 18,
   unchecked: {
@@ -2818,10 +2983,15 @@ const radioLateOceanTheme = {
   }
 };
 
-const formsLateOceanTheme = {
-  input: inputLateOceanTheme,
+const textArea = {
+  minHeight: 120
+};
+
+const forms = {
+  input,
   radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme
+  inputField: inputFieldLateOceanTheme,
+  textArea
 };
 
 const fullScreenModalLateOceanTheme = {
@@ -2856,14 +3026,14 @@ 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
   }
 };
 
@@ -2934,77 +3104,6 @@ const tooltip = {
   floatingPadding: 8
 };
 
-const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
-  baseAndSmall: {
-    fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
-  },
-  mediumAndWide: {
-    fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
-  }
-});
-const typographyLateOceanTheme = {
-  colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
-  },
-  types: {
-    headers: {
-      fontFamily: {
-        regular: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
-      },
-      fontWeight: 400,
-      fontStyle: 'normal',
-      configs: {
-        // also known as xxlarge
-        header1: createTypographyTypeConfig(1.3, 38, 62),
-        // also known as xlarge
-        header2: createTypographyTypeConfig(1.3, 32, 48),
-        // also known as medium
-        header3: createTypographyTypeConfig(1.3, 24, 36),
-        // also known as xsmall
-        header4: createTypographyTypeConfig(1.3, 18, 24),
-        // also known as xxsmall
-        header5: createTypographyTypeConfig(1.3, 18, 18)
-      }
-    },
-    bodies: {
-      fontFamily: {
-        regular: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
-      configs: {
-        'body-large': createTypographyTypeConfig(1.6, 18, 24),
-        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
-        body: createTypographyTypeConfig(1.6, 16, 16),
-        'body-small': createTypographyTypeConfig(1.6, 14, 14),
-        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
-      }
-    }
-  },
-  link: {
-    disabledColor: lateOceanColorPalette.black200
-  }
-};
-
 const breakpoints = {
   values: {
     base: 0,
@@ -3035,10 +3134,10 @@ const theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar,
-  button: buttonLateOceanTheme,
+  button,
   card: cardLateOceanTheme,
-  feedbackMessage: feedbackMessageLateOceanTheme,
-  forms: formsLateOceanTheme,
+  feedbackMessage,
+  forms,
   typography: typographyLateOceanTheme,
   tag: tagLateOceanTheme,
   shadows: shadowsLateOceanTheme,
@@ -3169,7 +3268,7 @@ function TimePicker({
     isTimePickerModalVisible
   } = useTimePicker(value || null, onChange, onBlur, disabled, forceDefaultValue);
   return /*#__PURE__*/jsxRuntime.jsxs(Container, {
-    state: timePickerState === 'default' ? state : timePickerState,
+    $state: timePickerState === 'default' ? state : timePickerState,
     accessibilityRole: "button",
     onPress: handleInputPress,
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
@@ -3194,24 +3293,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.View.withConfig({
   displayName: "TooltipView__StyledTooltipView",
   componentId: "kitt-universal__sc-156zm6m-0"
@@ -3232,7 +3313,7 @@ const StyledTooltipContent = /*#__PURE__*/styled__default.View.withConfig({
 function ArrowView(props) {
   const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, { ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx(Arrow, {
+    children: /*#__PURE__*/jsxRuntime.jsx(kittIcons.TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
   });
@@ -3581,6 +3662,9 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
+exports.InputIcon = InputIcon;
+exports.InputPassword = InputPassword;
+exports.InputPressable = InputPressable;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;
 exports.KittBreakpointsMax = KittBreakpointsMax;