@ornikar/kitt-universal 23.1.0 → 23.2.2

package/dist/index-node-20.10.es.mjs

@@ -11,7 +11,7 @@ import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { parse } from 'twemoji-parser';
 import * as WebBrowser from 'expo-web-browser';
-import { CaretUpFillIcon, CaretDownFillIcon, EyeClosedRegularIcon, EyeRegularIcon, XRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import { CaretUpFillIcon, CaretDownFillIcon, EyeClosedRegularIcon, EyeRegularIcon, CaretDownRegularIcon, XRegularIcon } from '@ornikar/kitt-icons/phosphor';
 import Downshift from 'downshift';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
@@ -70,13 +70,13 @@ const colorScales = {
     12: '#0a0428'
   }),
   lavender: createColorScale({
-    1: '#fbf7ff',
-    2: '#f7f0ff',
+    1: '#fdf7ff',
+    2: '#fcf2ff',
     3: '#FAEBFF',
-    4: '#ebd9ff',
-    5: '#e2c7ff',
-    6: '#d4adff',
-    7: '#c694ff',
+    4: '#f8e3ff',
+    5: '#f4d6ff',
+    6: '#efc2ff',
+    7: '#d298ff',
     8: '#b97aff',
     9: '#ac5ff9',
     10: '#9d4ced',
@@ -219,7 +219,7 @@ const colors = {
   accentLight: lateOceanColorPalette['lavender.3'],
   success: lateOceanColorPalette['green.8'],
   correct: lateOceanColorPalette['green.8'],
-  danger: lateOceanColorPalette['coral.7'],
+  danger: lateOceanColorPalette['coral.8'],
   info: lateOceanColorPalette['blue.8'],
   warning: lateOceanColorPalette['sun.8'],
   separator: lateOceanColorPalette['eggshell.3'],
@@ -966,209 +966,64 @@ const datePicker = {
   }
 };
 
-const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-/** @deprecated legacy typography type config is deprecated. */
-const createLegacyTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
-  baseAndSmall: {
-    fontSize: baseAndSmallFontSize,
-    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
-  },
-  mediumAndWide: {
-    fontSize: mediumAndWideFontSize,
-    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
-  }
-});
-const createTypographyConfig = (fontSize, lineHeightMultiplier) => {
-  const config = {
-    fontSize,
-    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
-  };
-  return {
-    baseAndSmall: config,
-    mediumAndWide: config
-  };
-};
-const typography = {
-  colors: {
-    black: colors.black,
-    'black-anthracite': colors.blackAnthracite,
-    'black-disabled': lateOceanColorPalette.black400,
-    'black-light': lateOceanColorPalette.black555,
-    white: colors.white,
-    'white-light': colors.white,
-    primary: colors.primary,
-    'primary-light': colors.primaryLight,
-    accent: colors.accent,
-    success: colors.success,
-    danger: colors.danger,
-    warning: colors.warning
-  },
-  types: {
-    headings: {
-      fontFamily: {
-        native: {
-          regular: 'Moderat-Bold',
-          bold: 'Moderat-Bold'
-        },
-        web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
-        }
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: 'normal',
-      configs: {
-        /* legacy */
-        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
-        header2: createLegacyTypographyTypeConfig(1.2, 32, 48, 1.1),
-        header3: createLegacyTypographyTypeConfig(1.2, 24, 40, 1.1),
-        header4: createLegacyTypographyTypeConfig(1.3, 18, 24, 1.2),
-        header5: createLegacyTypographyTypeConfig(1.3, 18, 18),
-        /* latest */
-        'heading-xxl': createTypographyConfig(56, 1.1),
-        'heading-xl': createTypographyConfig(48, 1.1),
-        'heading-l': createTypographyConfig(40, 1.1),
-        'heading-m': createTypographyConfig(32, 1.2),
-        'heading-s': createTypographyConfig(24, 1.2),
-        'heading-xs': createTypographyConfig(18, 1.3),
-        'heading-xxs': createTypographyConfig(16, 1.3)
-      }
-    },
-    'headings-impact': {
-      fontFamily: {
-        native: {
-          regular: 'Transducer-Black',
-          bold: 'Transducer-Black'
-        },
-        web: {
-          regular: 'TransducerBlack',
-          bold: 'TransducerBlack'
-        }
-      },
-      fontWeight: 900,
-      fontStyle: 'normal',
-      configs: {
-        /* legacy */
-        'header-impact-xxl': createLegacyTypographyTypeConfig(1.2, 56, 56),
-        'header-impact-xl': createLegacyTypographyTypeConfig(1.2, 48, 48),
-        'header-impact-l': createLegacyTypographyTypeConfig(1.2, 40, 40),
-        'header-impact-m': createLegacyTypographyTypeConfig(1.2, 32, 32),
-        'header-impact-s': createLegacyTypographyTypeConfig(1.2, 24, 24),
-        'header-impact-xs': createLegacyTypographyTypeConfig(1.2, 18, 18),
-        'header-impact-xxs': createLegacyTypographyTypeConfig(1.2, 16, 16),
-        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.2, 14, 14),
-        /* latest */
-        'heading-impact-xxl': createTypographyConfig(56, 1.2),
-        'heading-impact-xl': createTypographyConfig(48, 1.2),
-        'heading-impact-l': createTypographyConfig(40, 1.2),
-        'heading-impact-m': createTypographyConfig(32, 1.2),
-        'heading-impact-s': createTypographyConfig(24, 1.2),
-        'heading-impact-xs': createTypographyConfig(18, 1.2),
-        'heading-impact-xxs': createTypographyConfig(16, 1.2),
-        'heading-impact-xxxs': createTypographyConfig(14, 1.2)
-      }
-    },
-    bodies: {
-      fontFamily: {
-        web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
-        },
-        native: {
-          regular: 'Moderat-Regular',
-          bold: 'Moderat-Bold'
-        }
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
-      configs: {
-        /* legacy */
-        'body-large': createLegacyTypographyTypeConfig(1.4, 18, 24),
-        'body-medium': createLegacyTypographyTypeConfig(1.4, 18, 18),
-        body: createLegacyTypographyTypeConfig(1.4, 16, 16),
-        'body-small': createLegacyTypographyTypeConfig(1.4, 14, 14),
-        'body-xsmall': createLegacyTypographyTypeConfig(1.4, 12, 12),
-        /* latest */
-        'body-xl': createTypographyConfig(24, 1.4),
-        'body-l': createTypographyConfig(18, 1.4),
-        'body-m': createTypographyConfig(16, 1.4),
-        'body-s': createTypographyConfig(14, 1.4),
-        'body-xs': createTypographyConfig(12, 1.4)
-      }
-    }
-  },
-  link: {
-    /** @deprecated not used in kitt anymore, use Typography instead */
-    disabledColor: colors.blackDisabled
-  }
-};
-
 const inputStatesStyle = {
   default: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette['eggshell.4'],
+    color: lateOceanColorPalette.black
   },
   pending: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette['eggshell.3'],
+    color: lateOceanColorPalette.black
   },
   valid: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black100,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette['eggshell.4'],
+    color: lateOceanColorPalette.black
   },
   hover: {
-    borderColor: lateOceanColorPalette.black200,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette['eggshell.1'],
+    borderColor: lateOceanColorPalette['eggshell.5'],
+    color: lateOceanColorPalette.black
   },
   focus: {
-    borderColor: colors.primary,
-    color: colors.black
+    borderColor: lateOceanColorPalette['violine.9'],
+    color: lateOceanColorPalette.black
   },
   disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator,
-    color: colors.blackDisabled
+    backgroundColor: lateOceanColorPalette['eggshell.2'],
+    borderColor: lateOceanColorPalette['eggshell.4'],
+    color: lateOceanColorPalette['eggshell.6']
   },
   invalid: {
-    borderColor: colors.separator,
-    color: colors.black
+    borderColor: lateOceanColorPalette['eggshell.3'],
+    color: lateOceanColorPalette.black
   }
 };
 const webAnimationDuration = '200ms';
 const webAnimationTimingFunction = 'ease-in-out';
-const webAnimationProperty = 'border-color';
+const webAnimationProperties = ['border-color', 'background-color'];
 const input = {
   minHeight: 40,
   color: {
-    selection: colors.primary,
-    placeholder: typography.colors['black-light']
+    selection: lateOceanColorPalette['violine.9'],
+    placeholder: lateOceanColorPalette['eggshell.9']
   },
-  borderWidth: 2,
-  borderRadius: 10,
+  borderWidth: 1,
+  borderRadius: 8,
   icon: {
     size: 20
   },
   rightContainer: {
-    padding: 10
+    padding: 16
   },
   padding: {
     horizontal: 16,
-    vertical: 5
+    vertical: 0
   },
   transition: {
-    property: webAnimationProperty,
+    properties: webAnimationProperties,
     duration: webAnimationDuration,
     timingFunction: webAnimationTimingFunction
   },
@@ -1178,11 +1033,8 @@ const input = {
 const inputField = {
   containerPaddingTop: 5,
   containerPaddingBottom: 10,
-  feedbackPaddingTop: {
-    base: 5,
-    small: 10
-  },
-  labelContainerPaddingBottom: 5,
+  feedbackPaddingTop: 4,
+  labelContainerPaddingBottom: 4,
   labelFeedbackMarginLeft: 6
 };
 
@@ -1314,21 +1166,52 @@ const fullscreenModal = {
 };
 
 const highlight = {
-  borderRadius: spacing * 5,
+  borderRadius: spacing * 2,
   /** @deprecated use primary instead */
   regular: {
-    backgroundColor: colors.accentLight
+    default: {
+      backgroundColor: colors.accentLight
+    },
+    hover: {
+      backgroundColor: colors.accentLight
+    }
   },
   primary: {
-    backgroundColor: colors.accentLight
+    default: {
+      backgroundColor: lateOceanColorPalette['lavender.3']
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['lavender.5']
+    }
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.moonPurple
+    default: {
+      backgroundColor: lateOceanColorPalette['violine.2']
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['violine.4']
+    }
+  },
+  ghost: {
+    default: {
+      backgroundColor: lateOceanColorPalette.white
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['eggshell.2']
+    }
   },
   dark: {
-    backgroundColor: lateOceanColorPalette.black100
+    default: {
+      backgroundColor: lateOceanColorPalette['eggshell.3']
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['eggshell.2']
+    }
   },
-  padding: spacing * 5
+  padding: {
+    medium: spacing * 4,
+    large: spacing * 6
+  }
 };
 
 const getIconSizeFromFontSize = fontSize => {
@@ -1451,6 +1334,152 @@ const pageLoader = {
   }
 };
 
+const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
+/** @deprecated legacy typography type config is deprecated. */
+const createLegacyTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
+  baseAndSmall: {
+    fontSize: baseAndSmallFontSize,
+    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
+  },
+  mediumAndWide: {
+    fontSize: mediumAndWideFontSize,
+    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
+  }
+});
+const createTypographyConfig = (fontSize, lineHeightMultiplier) => {
+  const config = {
+    fontSize,
+    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
+  };
+  return {
+    baseAndSmall: config,
+    mediumAndWide: config
+  };
+};
+const typography = {
+  colors: {
+    black: colors.black,
+    'black-anthracite': colors.blackAnthracite,
+    'black-disabled': lateOceanColorPalette.black400,
+    'black-light': lateOceanColorPalette.black555,
+    white: colors.white,
+    'white-light': colors.white,
+    primary: colors.primary,
+    'primary-light': colors.primaryLight,
+    accent: colors.accent,
+    success: colors.success,
+    danger: colors.danger,
+    warning: colors.warning
+  },
+  types: {
+    headings: {
+      fontFamily: {
+        native: {
+          regular: 'Moderat-Bold',
+          bold: 'Moderat-Bold'
+        },
+        web: {
+          regular: 'Moderat',
+          bold: 'Moderat'
+        }
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: 'normal',
+      configs: {
+        /* legacy */
+        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
+        header2: createLegacyTypographyTypeConfig(1.2, 32, 48, 1.1),
+        header3: createLegacyTypographyTypeConfig(1.2, 24, 40, 1.1),
+        header4: createLegacyTypographyTypeConfig(1.3, 18, 24, 1.2),
+        header5: createLegacyTypographyTypeConfig(1.3, 18, 18),
+        /* latest */
+        'heading-xxl': createTypographyConfig(56, 1.1),
+        'heading-xl': createTypographyConfig(48, 1.1),
+        'heading-l': createTypographyConfig(40, 1.1),
+        'heading-m': createTypographyConfig(32, 1.2),
+        'heading-s': createTypographyConfig(24, 1.2),
+        'heading-xs': createTypographyConfig(18, 1.3),
+        'heading-xxs': createTypographyConfig(16, 1.3)
+      }
+    },
+    'headings-impact': {
+      fontFamily: {
+        native: {
+          regular: 'Transducer-Black',
+          bold: 'Transducer-Black'
+        },
+        web: {
+          regular: 'TransducerBlack',
+          bold: 'TransducerBlack'
+        }
+      },
+      fontWeight: 900,
+      fontStyle: 'normal',
+      configs: {
+        /* legacy */
+        'header-impact-xxl': createLegacyTypographyTypeConfig(1.2, 56, 56),
+        'header-impact-xl': createLegacyTypographyTypeConfig(1.2, 48, 48),
+        'header-impact-l': createLegacyTypographyTypeConfig(1.2, 40, 40),
+        'header-impact-m': createLegacyTypographyTypeConfig(1.2, 32, 32),
+        'header-impact-s': createLegacyTypographyTypeConfig(1.2, 24, 24),
+        'header-impact-xs': createLegacyTypographyTypeConfig(1.2, 18, 18),
+        'header-impact-xxs': createLegacyTypographyTypeConfig(1.2, 16, 16),
+        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.2, 14, 14),
+        /* latest */
+        'heading-impact-xxl': createTypographyConfig(56, 1.2),
+        'heading-impact-xl': createTypographyConfig(48, 1.2),
+        'heading-impact-l': createTypographyConfig(40, 1.2),
+        'heading-impact-m': createTypographyConfig(32, 1.2),
+        'heading-impact-s': createTypographyConfig(24, 1.2),
+        'heading-impact-xs': createTypographyConfig(18, 1.2),
+        'heading-impact-xxs': createTypographyConfig(16, 1.2),
+        'heading-impact-xxxs': createTypographyConfig(14, 1.2)
+      }
+    },
+    bodies: {
+      fontFamily: {
+        web: {
+          regular: 'Moderat',
+          bold: 'Moderat'
+        },
+        native: {
+          regular: 'Moderat-Regular',
+          bold: 'Moderat-Bold'
+        }
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
+      configs: {
+        /* legacy */
+        'body-large': createLegacyTypographyTypeConfig(1.4, 18, 24),
+        'body-medium': createLegacyTypographyTypeConfig(1.4, 18, 18),
+        body: createLegacyTypographyTypeConfig(1.4, 16, 16),
+        'body-small': createLegacyTypographyTypeConfig(1.4, 14, 14),
+        'body-xsmall': createLegacyTypographyTypeConfig(1.4, 12, 12),
+        /* latest */
+        'body-xl': createTypographyConfig(24, 1.4),
+        'body-l': createTypographyConfig(18, 1.4),
+        'body-m': createTypographyConfig(16, 1.4),
+        'body-s': createTypographyConfig(14, 1.4),
+        'body-xs': createTypographyConfig(12, 1.4)
+      }
+    }
+  },
+  link: {
+    /** @deprecated not used in kitt anymore, use Typography instead */
+    disabledColor: colors.blackDisabled
+  }
+};
+
 const picker = {
   ios: {
     default: {
@@ -1965,7 +1994,7 @@ function getCurrentBackgroundColorForNativeBaseTheme({
   return `${baseKey}.backgroundColor`;
 }
 
-function AnimatedContainer$1({
+function AnimatedContainer$2({
   disabled,
   animatedStyles,
   children,
@@ -2504,7 +2533,7 @@ function getVariantValuesIfExist(theme, type, variant) {
   return theme.kitt.button[type].default;
 }
 
-const useNativeAnimation$3 = ({
+const useNativeAnimation$4 = ({
   type,
   variant,
   isPressedInternal
@@ -2579,7 +2608,7 @@ const Button = /*#__PURE__*/forwardRef(({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$3({
+  } = useNativeAnimation$4({
     type,
     variant
   });
@@ -2618,7 +2647,7 @@ const Button = /*#__PURE__*/forwardRef(({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsx(AnimatedContainer$1, {
+    }) => /*#__PURE__*/jsx(AnimatedContainer$2, {
       animatedStyles: animatedStyles,
       type: type,
       isHovered: isHovered || isHoveredInternal,
@@ -3424,7 +3453,7 @@ function AnimatedChoiceItemView({
   });
 }
 
-const useNativeAnimation$2 = ({
+const useNativeAnimation$3 = ({
   selected,
   disabled,
   isPressedInternal
@@ -3495,7 +3524,7 @@ function ChoiceItem({
     onPressIn,
     onPressOut,
     backgroundStyles
-  } = useNativeAnimation$2({
+  } = useNativeAnimation$3({
     selected,
     disabled,
     isPressedInternal
@@ -6045,7 +6074,7 @@ const Radio = /*#__PURE__*/forwardRef(({
   });
 });
 
-function AnimatedContainer({
+function AnimatedContainer$1({
   children,
   isFirst,
   isLast,
@@ -6100,7 +6129,7 @@ function HoverBorder({
   });
 }
 
-const useNativeAnimation$1 = ({
+const useNativeAnimation$2 = ({
   isDisabled,
   isSelected,
   isPressedInternal
@@ -6181,7 +6210,7 @@ function RadioButton({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$1({
+  } = useNativeAnimation$2({
     isDisabled: disabled,
     isSelected: selected,
     isPressedInternal
@@ -6208,7 +6237,7 @@ function RadioButton({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsx(AnimatedContainer, {
+    }) => /*#__PURE__*/jsx(AnimatedContainer$1, {
       animatedStyles: animatedStyles,
       isFocused: isFocused || isFocusedInternal,
       isPressed: isPressed || isPressedInternal,
@@ -6628,15 +6657,228 @@ FullscreenModal.Footer = FullscreenModalFooter;
 FullscreenModal.Body = FullscreenModalBody;
 FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
+function AnimatedCaret({
+  children,
+  animatedStyles
+}) {
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [animatedStyles],
+    children: children
+  });
+}
+
+function AnimatedContainer({
+  children,
+  size,
+  animatedStyles
+}) {
+  const sx = useSx();
+  const theme = useTheme();
+  const styles = sx({
+    borderRadius: theme.kitt.highlight.borderRadius,
+    padding: theme.kitt.highlight.padding[size]
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [styles, animatedStyles],
+    children: children
+  });
+}
+
+function AnimatedContent({
+  children,
+  animatedStyles
+}) {
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [{
+      overflow: 'hidden'
+    }, animatedStyles],
+    children: children
+  });
+}
+
+const withTimingConfig = {
+  duration: 100,
+  easing: Easing$1.ease
+};
+const useNativeAnimation$1 = ({
+  variant,
+  isExpanded,
+  isInitialRender,
+  contentHeight
+}) => {
+  const theme = useTheme();
+  const color = useSharedValue(0);
+  const rotation = useSharedValue(0);
+  const translate = useSharedValue(0);
+  const containerAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(color.value, [0, 1], [theme.kitt.highlight[variant].default.backgroundColor, theme.kitt.highlight[variant].hover.backgroundColor])
+    };
+  });
+  const caretAnimatedStyles = useAnimatedStyle(() => {
+    rotation.value = withTiming(isExpanded ? 180 : 0, {
+      duration: 300,
+      easing: Easing$1.ease
+    });
+    return {
+      transform: [{
+        rotate: `${rotation.value}deg`
+      }, {
+        translateY: translate.value
+      }]
+    };
+  });
+  const contentAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      height: withTiming(isExpanded ? contentHeight : 0, {
+        duration: isInitialRender ? 0 : 300,
+        easing: Easing$1.ease
+      })
+    };
+  });
+  return {
+    onPressIn: () => {
+      color.value = withTiming(1, withTimingConfig);
+      translate.value = withTiming(2, withTimingConfig);
+    },
+    onPressOut: () => {
+      color.value = withTiming(0, withTimingConfig);
+      translate.value = withTiming(0, withTimingConfig);
+    },
+    containerAnimatedStyles,
+    caretAnimatedStyles,
+    contentAnimatedStyles
+  };
+};
+
 function Highlight({
-  variant = 'regular',
+  variant = 'primary',
+  canCollapse = false,
+  isInitialCollapsed = true,
+  title,
+  icon = null,
+  size = 'medium',
   children
 }) {
-  return /*#__PURE__*/jsx(View, {
-    borderRadius: "kitt.highlight.borderRadius",
-    padding: "kitt.highlight.padding",
-    backgroundColor: `kitt.highlight.${variant}.backgroundColor`,
-    children: children
+  const theme = useTheme();
+  const [isExpanded, setIsExpanded] = useState(!isInitialCollapsed);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [isInitialRender, setIsInitialRender] = useState(true);
+  const highlightStyle = {
+    medium: {
+      marginBottom: 'kitt.1',
+      spaceBetween: 'kitt.2',
+      contentMarginY: 8
+    },
+    large: {
+      marginBottom: 'kitt.2',
+      spaceBetween: 'kitt.4',
+      contentMarginY: 16
+    }
+  };
+  const {
+    containerAnimatedStyles,
+    caretAnimatedStyles,
+    contentAnimatedStyles,
+    onPressIn,
+    onPressOut
+  } = useNativeAnimation$1({
+    variant,
+    isExpanded,
+    isInitialRender,
+    contentHeight
+  });
+  const handleLayout = event => {
+    const layoutHeight = event.nativeEvent.layout.height;
+    const newContentHeight = layoutHeight + highlightStyle[size].contentMarginY;
+    if (layoutHeight > 0 && newContentHeight !== contentHeight) {
+      setContentHeight(newContentHeight);
+    }
+  };
+  if (!canCollapse) {
+    return /*#__PURE__*/jsx(View, {
+      borderRadius: "kitt.highlight.borderRadius",
+      padding: theme.kitt.highlight.padding[size],
+      backgroundColor: `kitt.highlight.${variant}.default.backgroundColor`,
+      children: /*#__PURE__*/jsxs(HStack, {
+        space: highlightStyle[size].spaceBetween,
+        children: [icon && /*#__PURE__*/jsx(View, {
+          children: icon
+        }), /*#__PURE__*/jsxs(View, {
+          flexGrow: 1,
+          flexShrink: 1,
+          children: [title && /*#__PURE__*/jsx(View, {
+            marginBottom: highlightStyle[size].marginBottom,
+            children: /*#__PURE__*/jsx(Typography.Text, {
+              variant: "bold",
+              base: "body",
+              ellipsizeMode: "clip",
+              children: title
+            })
+          }), children]
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsx(Pressable, {
+    onPress: () => {
+      setIsExpanded(!isExpanded);
+      setIsInitialRender(false);
+    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    children: ({
+      isHovered
+    }) => {
+      return /*#__PURE__*/jsxs(AnimatedContainer, {
+        isHovered: isHovered,
+        size: size,
+        variant: variant,
+        animatedStyles: containerAnimatedStyles,
+        children: [title && /*#__PURE__*/jsxs(HStack, {
+          space: highlightStyle[size].spaceBetween,
+          alignItems: "center",
+          children: [icon && /*#__PURE__*/jsx(View, {
+            flexGrow: 1,
+            children: icon
+          }), /*#__PURE__*/jsx(View, {
+            flexGrow: 1,
+            flexShrink: 1,
+            width: "100%",
+            children: /*#__PURE__*/jsx(Typography.Text, {
+              variant: "bold",
+              base: "body",
+              ellipsizeMode: "clip",
+              children: title
+            })
+          }), /*#__PURE__*/jsx(View, {
+            flexGrow: 2,
+            flexShrink: 2,
+            alignItems: "center",
+            justifyContent: "center",
+            children: /*#__PURE__*/jsx(AnimatedCaret, {
+              isHovered: isHovered,
+              isExpanded: isExpanded,
+              animatedStyles: caretAnimatedStyles,
+              children: /*#__PURE__*/jsx(TypographyIcon, {
+                icon: /*#__PURE__*/jsx(CaretDownRegularIcon, {})
+              })
+            })
+          })]
+        }), /*#__PURE__*/jsx(AnimatedContent, {
+          isExpanded: isExpanded,
+          isInitialRender: isInitialRender,
+          contentHeight: contentHeight,
+          animatedStyles: contentAnimatedStyles,
+          children: /*#__PURE__*/jsx(View, {
+            marginTop: highlightStyle[size].contentMarginY,
+            position: "absolute",
+            onLayout: handleLayout,
+            children: children
+          })
+        })]
+      });
+    }
   });
 }
 
@@ -7653,16 +7895,44 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         },
         highlight: {
           regular: {
-            backgroundColor: theme.highlight.regular.backgroundColor
+            default: {
+              backgroundColor: theme.highlight.regular.default.backgroundColor
+            },
+            hover: {
+              backgroundColor: theme.highlight.regular.hover.backgroundColor
+            }
           },
           primary: {
-            backgroundColor: theme.highlight.primary.backgroundColor
+            default: {
+              backgroundColor: theme.highlight.primary.default.backgroundColor
+            },
+            hover: {
+              backgroundColor: theme.highlight.primary.hover.backgroundColor
+            }
           },
           secondary: {
-            backgroundColor: theme.highlight.secondary.backgroundColor
+            default: {
+              backgroundColor: theme.highlight.secondary.default.backgroundColor
+            },
+            hover: {
+              backgroundColor: theme.highlight.secondary.hover.backgroundColor
+            }
           },
           dark: {
-            backgroundColor: theme.highlight.dark.backgroundColor
+            default: {
+              backgroundColor: theme.highlight.dark.default.backgroundColor
+            },
+            hover: {
+              backgroundColor: theme.highlight.dark.hover.backgroundColor
+            }
+          },
+          ghost: {
+            default: {
+              backgroundColor: theme.highlight.ghost.default.backgroundColor
+            },
+            hover: {
+              backgroundColor: theme.highlight.ghost.hover.backgroundColor
+            }
           }
         },
         verticalSteps: {
@@ -8175,7 +8445,12 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         highlight: {
-          padding: theme.highlight.padding
+          medium: {
+            padding: theme.highlight.padding.medium
+          },
+          large: {
+            padding: theme.highlight.padding.large
+          }
         },
         listItem: {
           verticalPadding: theme.listItem.verticalPadding,
@@ -8808,9 +9083,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             borderColor: theme.forms.input.states.default.borderColor,
             bg: theme.forms.input.states.default.backgroundColor,
             _hover: {
+              bg: theme.forms.input.states.hover.backgroundColor,
               borderColor: theme.forms.input.states.hover.borderColor,
               color: theme.forms.input.states.hover.color,
               _focus: {
+                bg: theme.forms.input.states.default.backgroundColor,
                 borderColor: theme.forms.input.states.focus.borderColor,
                 color: theme.forms.input.states.focus.color
               }
@@ -10327,7 +10604,7 @@ const TimePicker = /*#__PURE__*/forwardRef(({
       value: pickerValue,
       minuteInterval: minuteInterval,
       mode: "time",
-      display: "default",
+      display: "spinner",
       onChange: (event, date) => handleChange(date)
     }) : null, Platform.OS !== 'android' ? /*#__PURE__*/jsx(ModalDateTimePicker, {
       visible: isPickerVisible,