@ornikar/kitt-universal 23.0.2 → 23.2.1

package/dist/index.es.web.js

@@ -17,7 +17,7 @@ import { CSSTransition } from 'react-transition-group';
 import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { parse } from 'twemoji-parser';
-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, { useSelect } from 'downshift';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
@@ -980,215 +980,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
   },
@@ -1198,11 +1047,8 @@ var input = {
 var inputField = {
   containerPaddingTop: 5,
   containerPaddingBottom: 10,
-  feedbackPaddingTop: {
-    base: 5,
-    small: 10
-  },
-  labelContainerPaddingBottom: 5,
+  feedbackPaddingTop: 4,
+  labelContainerPaddingBottom: 4,
   labelFeedbackMarginLeft: 6
 };
 
@@ -1334,21 +1180,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) {
@@ -1471,6 +1348,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({
@@ -2008,7 +2037,7 @@ function getCurrentScale$1(_ref) {
   return 1;
 }
 
-function AnimatedContainer$1(_ref) {
+function AnimatedContainer$2(_ref) {
   var children = _ref.children,
     type = _ref.type,
     variant = _ref.variant,
@@ -2552,7 +2581,7 @@ function FocusBorder(_ref) {
   });
 }
 
-function useNativeAnimation$3() {
+function useNativeAnimation$4() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -2597,7 +2626,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(),
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     animatedStyles = _useNativeAnimation.animatedStyles;
@@ -2636,7 +2665,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,
@@ -3334,7 +3363,7 @@ function AnimatedChoiceItemView(_ref) {
   });
 }
 
-var useNativeAnimation$2 = function () {
+var useNativeAnimation$3 = function () {
   return {
     onPressIn: function onPressIn() {},
     onPressOut: function onPressOut() {},
@@ -3368,7 +3397,7 @@ function ChoiceItem(_ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     size = _ref.size;
-  var _useNativeAnimation = useNativeAnimation$2(),
+  var _useNativeAnimation = useNativeAnimation$3(),
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     backgroundStyles = _useNativeAnimation.backgroundStyles;
@@ -5651,7 +5680,7 @@ function getCurrentBorderColor(_ref) {
   return 'default';
 }
 
-function AnimatedContainer(_ref) {
+function AnimatedContainer$1(_ref) {
   var children = _ref.children,
     isFocused = _ref.isFocused,
     isPressed = _ref.isPressed,
@@ -5723,7 +5752,7 @@ function HoverBorder(_ref) {
   });
 }
 
-function useNativeAnimation$1() {
+function useNativeAnimation$2() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -5759,7 +5788,7 @@ function RadioButton(_ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur;
-  var _useNativeAnimation = useNativeAnimation$1(),
+  var _useNativeAnimation = useNativeAnimation$2(),
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     animatedStyles = _useNativeAnimation.animatedStyles;
@@ -5785,7 +5814,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,
@@ -6130,18 +6159,210 @@ FullscreenModal.Footer = FullscreenModalFooter;
 FullscreenModal.Body = FullscreenModalBody;
 FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
-function Highlight(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    children = _ref.children;
+function AnimatedCaret(_ref) {
+  var children = _ref.children,
+    isHovered = _ref.isHovered,
+    isExpanded = _ref.isExpanded;
   return /*#__PURE__*/jsx(View, {
+    _web: {
+      style: {
+        transform: "rotate(".concat(isExpanded ? '180deg' : '0deg', ") translateY(").concat(isHovered ? '2px' : '0', ")"),
+        transitionDuration: '300ms',
+        transitionProperty: 'transform',
+        transitionTimingFunction: 'ease'
+      }
+    },
+    children: children
+  });
+}
+
+function AnimatedContainer(_ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    isHovered = _ref.isHovered,
+    variant = _ref.variant;
+  var theme = useTheme();
+  return /*#__PURE__*/jsx(View, {
+    _web: {
+      style: {
+        transitionDuration: '300ms',
+        transitionProperty: 'background-color',
+        transitionTimingFunction: 'ease'
+      }
+    },
     borderRadius: "kitt.highlight.borderRadius",
-    padding: "kitt.highlight.padding",
-    backgroundColor: "kitt.highlight.".concat(variant, ".backgroundColor"),
+    padding: theme.kitt.highlight.padding[size],
+    backgroundColor: isHovered ? theme.kitt.highlight[variant].hover.backgroundColor : theme.kitt.highlight[variant]["default"].backgroundColor,
+    children: children
+  });
+}
+
+function AnimatedContent(_ref) {
+  var children = _ref.children,
+    isExpanded = _ref.isExpanded,
+    isInitialRender = _ref.isInitialRender,
+    contentHeight = _ref.contentHeight;
+  return /*#__PURE__*/jsx(View, {
+    _web: {
+      style: {
+        height: isExpanded ? "".concat(contentHeight, "px") : '0',
+        transitionDuration: isInitialRender ? '0ms' : '300ms',
+        transitionProperty: 'height',
+        transitionTimingFunction: 'ease'
+      }
+    },
+    overflow: "hidden",
     children: children
   });
 }
 
+function useNativeAnimation$1() {
+  return {
+    onPressIn: undefined,
+    onPressOut: undefined,
+    containerAnimatedStyles: {},
+    caretAnimatedStyles: {},
+    contentAnimatedStyles: {}
+  };
+}
+
+function Highlight(_ref) {
+  var _ref$variant = _ref.variant,
+    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(),
+    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
+          })
+        })]
+      });
+    }
+  });
+}
+
 var _excluded$f = ["color", "isDisabled"];
 function getBackgroundColor$1(color, isDisabled) {
   if (isDisabled) {
@@ -7166,16 +7387,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: {
@@ -7681,7 +7930,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,
@@ -8312,9 +8566,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
               }