@ornikar/kitt-universal 23.0.2 → 23.2.1

package/dist/index.es.js

@@ -19,7 +19,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';
@@ -984,215 +984,64 @@ var datePicker = {
   }
 };
 
-var calcLineHeight = function (fontSize, lineHeightMultiplier) {
-  return Math.round(fontSize * lineHeightMultiplier);
-};
-/** @deprecated legacy typography type config is deprecated. */
-var createLegacyTypographyTypeConfig = function (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize) {
-  var mediumAndWideFontSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : baseAndSmallFontSize;
-  var lineHeightMultiplierMediumAndWide = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : lineHeightMultiplierBaseAndSmall;
-  return {
-    baseAndSmall: {
-      fontSize: baseAndSmallFontSize,
-      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
-    },
-    mediumAndWide: {
-      fontSize: mediumAndWideFontSize,
-      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
-    }
-  };
-};
-var createTypographyConfig = function (fontSize, lineHeightMultiplier) {
-  var config = {
-    fontSize: fontSize,
-    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
-  };
-  return {
-    baseAndSmall: config,
-    mediumAndWide: config
-  };
-};
-var 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
-  }
-};
-
 var 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
   }
 };
 var webAnimationDuration = '200ms';
 var webAnimationTimingFunction = 'ease-in-out';
-var webAnimationProperty = 'border-color';
+var webAnimationProperties = ['border-color', 'background-color'];
 var 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
   },
@@ -1202,11 +1051,8 @@ var input = {
 var inputField = {
   containerPaddingTop: 5,
   containerPaddingBottom: 10,
-  feedbackPaddingTop: {
-    base: 5,
-    small: 10
-  },
-  labelContainerPaddingBottom: 5,
+  feedbackPaddingTop: 4,
+  labelContainerPaddingBottom: 4,
   labelFeedbackMarginLeft: 6
 };
 
@@ -1338,21 +1184,52 @@ var fullscreenModal = {
 };
 
 var 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
+  }
 };
 
 var getIconSizeFromFontSize = function (fontSize) {
@@ -1475,6 +1352,158 @@ var pageLoader = {
   }
 };
 
+var calcLineHeight = function (fontSize, lineHeightMultiplier) {
+  return Math.round(fontSize * lineHeightMultiplier);
+};
+/** @deprecated legacy typography type config is deprecated. */
+var createLegacyTypographyTypeConfig = function (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize) {
+  var mediumAndWideFontSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : baseAndSmallFontSize;
+  var lineHeightMultiplierMediumAndWide = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : lineHeightMultiplierBaseAndSmall;
+  return {
+    baseAndSmall: {
+      fontSize: baseAndSmallFontSize,
+      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
+    },
+    mediumAndWide: {
+      fontSize: mediumAndWideFontSize,
+      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
+    }
+  };
+};
+var createTypographyConfig = function (fontSize, lineHeightMultiplier) {
+  var config = {
+    fontSize: fontSize,
+    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
+  };
+  return {
+    baseAndSmall: config,
+    mediumAndWide: config
+  };
+};
+var 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
+  }
+};
+
 var picker = {
   ios: {
     "default": _objectSpread(_objectSpread({
@@ -1993,7 +2022,7 @@ function getCurrentBackgroundColorForNativeBaseTheme(_ref) {
   return "".concat(baseKey, ".backgroundColor");
 }
 
-function AnimatedContainer$1(_ref) {
+function AnimatedContainer$2(_ref) {
   var disabled = _ref.disabled,
     animatedStyles = _ref.animatedStyles,
     children = _ref.children,
@@ -2523,7 +2552,7 @@ function getVariantValuesIfExist(theme, type, variant) {
   return theme.kitt.button[type]["default"];
 }
 
-var useNativeAnimation$3 = function (_ref) {
+var useNativeAnimation$4 = function (_ref) {
   var type = _ref.type,
     variant = _ref.variant,
     isPressedInternal = _ref.isPressedInternal;
@@ -2592,7 +2621,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverOut = _ref.onHoverOut,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur;
-  var _useNativeAnimation = useNativeAnimation$3({
+  var _useNativeAnimation = useNativeAnimation$4({
       type: type,
       variant: variant
     }),
@@ -2634,7 +2663,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
-      return /*#__PURE__*/jsx(AnimatedContainer$1, {
+      return /*#__PURE__*/jsx(AnimatedContainer$2, {
         animatedStyles: animatedStyles,
         type: type,
         isHovered: isHovered || isHoveredInternal,
@@ -3474,7 +3503,7 @@ function AnimatedChoiceItemView(_ref) {
   });
 }
 
-var useNativeAnimation$2 = function (_ref) {
+var useNativeAnimation$3 = function (_ref) {
   var selected = _ref.selected,
     disabled = _ref.disabled,
     isPressedInternal = _ref.isPressedInternal;
@@ -3538,7 +3567,7 @@ function ChoiceItem(_ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     size = _ref.size;
-  var _useNativeAnimation = useNativeAnimation$2({
+  var _useNativeAnimation = useNativeAnimation$3({
       selected: selected,
       disabled: disabled,
       isPressedInternal: isPressedInternal
@@ -6258,7 +6287,7 @@ var Radio = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-function AnimatedContainer(_ref) {
+function AnimatedContainer$1(_ref) {
   var children = _ref.children,
     isFirst = _ref.isFirst,
     isLast = _ref.isLast,
@@ -6311,7 +6340,7 @@ function HoverBorder(_ref) {
   });
 }
 
-var useNativeAnimation$1 = function (_ref) {
+var useNativeAnimation$2 = function (_ref) {
   var isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     isPressedInternal = _ref.isPressedInternal;
@@ -6383,7 +6412,7 @@ function RadioButton(_ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur;
-  var _useNativeAnimation = useNativeAnimation$1({
+  var _useNativeAnimation = useNativeAnimation$2({
       isDisabled: disabled,
       isSelected: selected,
       isPressedInternal: isPressedInternal
@@ -6413,7 +6442,7 @@ function RadioButton(_ref) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
-      return /*#__PURE__*/jsx(AnimatedContainer, {
+      return /*#__PURE__*/jsx(AnimatedContainer$1, {
         animatedStyles: animatedStyles,
         isFocused: isFocused || isFocusedInternal,
         isPressed: isPressed || isPressedInternal,
@@ -6833,15 +6862,235 @@ FullscreenModal.Footer = FullscreenModalFooter;
 FullscreenModal.Body = FullscreenModalBody;
 FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
+function AnimatedCaret(_ref) {
+  var children = _ref.children,
+    animatedStyles = _ref.animatedStyles;
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [animatedStyles],
+    children: children
+  });
+}
+
+function AnimatedContainer(_ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    animatedStyles = _ref.animatedStyles;
+  var sx = useSx();
+  var theme = useTheme();
+  var 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(_ref) {
+  var children = _ref.children,
+    animatedStyles = _ref.animatedStyles;
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [{
+      overflow: 'hidden'
+    }, animatedStyles],
+    children: children
+  });
+}
+
+var withTimingConfig = {
+  duration: 100,
+  easing: Easing$1.ease
+};
+var useNativeAnimation$1 = function (_ref) {
+  var variant = _ref.variant,
+    isExpanded = _ref.isExpanded,
+    isInitialRender = _ref.isInitialRender,
+    contentHeight = _ref.contentHeight;
+  var theme = useTheme();
+  var color = useSharedValue(0);
+  var rotation = useSharedValue(0);
+  var translate = useSharedValue(0);
+  var containerAnimatedStyles = useAnimatedStyle(function () {
+    return {
+      backgroundColor: interpolateColor(color.value, [0, 1], [theme.kitt.highlight[variant]["default"].backgroundColor, theme.kitt.highlight[variant].hover.backgroundColor])
+    };
+  });
+  var caretAnimatedStyles = useAnimatedStyle(function () {
+    rotation.value = withTiming(isExpanded ? 180 : 0, {
+      duration: 300,
+      easing: Easing$1.ease
+    });
+    return {
+      transform: [{
+        rotate: "".concat(rotation.value, "deg")
+      }, {
+        translateY: translate.value
+      }]
+    };
+  });
+  var contentAnimatedStyles = useAnimatedStyle(function () {
+    return {
+      height: withTiming(isExpanded ? contentHeight : 0, {
+        duration: isInitialRender ? 0 : 300,
+        easing: Easing$1.ease
+      })
+    };
+  });
+  return {
+    onPressIn: function handleHoverIn() {
+      color.value = withTiming(1, withTimingConfig);
+      translate.value = withTiming(2, withTimingConfig);
+    },
+    onPressOut: function handleHoverOut() {
+      color.value = withTiming(0, withTimingConfig);
+      translate.value = withTiming(0, withTimingConfig);
+    },
+    containerAnimatedStyles: containerAnimatedStyles,
+    caretAnimatedStyles: caretAnimatedStyles,
+    contentAnimatedStyles: contentAnimatedStyles
+  };
+};
+
 function Highlight(_ref) {
   var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    children = _ref.children;
-  return /*#__PURE__*/jsx(View, {
-    borderRadius: "kitt.highlight.borderRadius",
-    padding: "kitt.highlight.padding",
-    backgroundColor: "kitt.highlight.".concat(variant, ".backgroundColor"),
-    children: children
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$canCollapse = _ref.canCollapse,
+    canCollapse = _ref$canCollapse === void 0 ? false : _ref$canCollapse,
+    _ref$isInitialCollaps = _ref.isInitialCollapsed,
+    isInitialCollapsed = _ref$isInitialCollaps === void 0 ? true : _ref$isInitialCollaps,
+    title = _ref.title,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _children = _ref.children;
+  var theme = useTheme();
+  var _useState = useState(!isInitialCollapsed),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentHeight = _useState4[0],
+    setContentHeight = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isInitialRender = _useState6[0],
+    setIsInitialRender = _useState6[1];
+  var highlightStyle = {
+    medium: {
+      marginBottom: 'kitt.1',
+      spaceBetween: 'kitt.2',
+      contentMarginY: 8
+    },
+    large: {
+      marginBottom: 'kitt.2',
+      spaceBetween: 'kitt.4',
+      contentMarginY: 16
+    }
+  };
+  var _useNativeAnimation = useNativeAnimation$1({
+      variant: variant,
+      isExpanded: isExpanded,
+      isInitialRender: isInitialRender,
+      contentHeight: contentHeight
+    }),
+    containerAnimatedStyles = _useNativeAnimation.containerAnimatedStyles,
+    caretAnimatedStyles = _useNativeAnimation.caretAnimatedStyles,
+    contentAnimatedStyles = _useNativeAnimation.contentAnimatedStyles,
+    onPressIn = _useNativeAnimation.onPressIn,
+    onPressOut = _useNativeAnimation.onPressOut;
+  var handleLayout = function (event) {
+    var layoutHeight = event.nativeEvent.layout.height;
+    var 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.".concat(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: function handlePress() {
+      setIsExpanded(!isExpanded);
+      setIsInitialRender(false);
+    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    children: function children(_ref2) {
+      var isHovered = _ref2.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
+          })
+        })]
+      });
+    }
   });
 }
 
@@ -7865,16 +8114,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: {
@@ -8380,7 +8657,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,
@@ -9011,9 +9293,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
               }
@@ -10357,6 +10641,7 @@ function ModalDateTimePicker(_ref) {
   var title = _ref.title,
     visible = _ref.visible,
     value = _ref.value,
+    minuteInterval = _ref.minuteInterval,
     validateButtonLabel = _ref.validateButtonLabel,
     testID = _ref.testID,
     pickerTestID = _ref.pickerTestID,
@@ -10393,6 +10678,7 @@ function ModalDateTimePicker(_ref) {
       }) : null, /*#__PURE__*/jsx(CardModal.Body, {
         children: /*#__PURE__*/jsx(DateTimePicker, {
           is24Hour: true,
+          minuteInterval: minuteInterval,
           testID: pickerTestID,
           value: currentValue,
           mode: "time",
@@ -10488,6 +10774,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     stretch = _ref.stretch,
     value = _ref.value,
+    minuteInterval = _ref.minuteInterval,
     validateButtonLabel = _ref.validateButtonLabel,
     isDefaultVisible = _ref.isDefaultVisible,
     _ref$placeholder = _ref.placeholder,
@@ -10534,6 +10821,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       is24Hour: true,
       testID: pickerTestID,
       value: pickerValue,
+      minuteInterval: minuteInterval,
       mode: "time",
       display: "default",
       onChange: function (event, date) {
@@ -10541,6 +10829,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }) : null, Platform.OS !== 'android' ? /*#__PURE__*/jsx(ModalDateTimePicker, {
       visible: isPickerVisible,
+      minuteInterval: minuteInterval,
       title: title,
       testID: modalTestID,
       pickerTestID: pickerTestID,