@ornikar/kitt-universal 23.0.2 → 23.2.1

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

@@ -967,209 +967,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
   },
@@ -1179,11 +1034,8 @@ const input = {
 const inputField = {
   containerPaddingTop: 5,
   containerPaddingBottom: 10,
-  feedbackPaddingTop: {
-    base: 5,
-    small: 10
-  },
-  labelContainerPaddingBottom: 5,
+  feedbackPaddingTop: 4,
+  labelContainerPaddingBottom: 4,
   labelFeedbackMarginLeft: 6
 };
 
@@ -1315,21 +1167,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 => {
@@ -1452,6 +1335,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: {
@@ -1986,7 +2015,7 @@ function getCurrentScale$1({
   return 1;
 }
 
-function AnimatedContainer$1({
+function AnimatedContainer$2({
   children,
   type,
   variant,
@@ -2541,7 +2570,7 @@ function FocusBorder({
   });
 }
 
-function useNativeAnimation$3() {
+function useNativeAnimation$4() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -2588,7 +2617,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$3();
+  } = useNativeAnimation$4();
   if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
     throw new Error('variant=ghost is only allowed with type=primary or default');
   }
@@ -2624,7 +2653,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsxRuntime.jsx(AnimatedContainer$1, {
+    }) => /*#__PURE__*/jsxRuntime.jsx(AnimatedContainer$2, {
       animatedStyles: animatedStyles,
       type: type,
       isHovered: isHovered || isHoveredInternal,
@@ -3303,7 +3332,7 @@ function AnimatedChoiceItemView({
   });
 }
 
-const useNativeAnimation$2 = () => {
+const useNativeAnimation$3 = () => {
   return {
     onPressIn: () => {},
     onPressOut: () => {},
@@ -3342,7 +3371,7 @@ function ChoiceItem({
     onPressIn,
     onPressOut,
     backgroundStyles
-  } = useNativeAnimation$2();
+  } = useNativeAnimation$3();
   const handleChange = () => {
     if (!onChange) return;
 
@@ -5511,7 +5540,7 @@ function getCurrentBorderColor({
   return 'default';
 }
 
-function AnimatedContainer({
+function AnimatedContainer$1({
   children,
   isFocused,
   isPressed,
@@ -5585,7 +5614,7 @@ function HoverBorder({
   });
 }
 
-function useNativeAnimation$1() {
+function useNativeAnimation$2() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -5627,7 +5656,7 @@ function RadioButton({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$1();
+  } = useNativeAnimation$2();
   return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
     accessibilityRole: "radiogroup",
     accessibilityState: {
@@ -5650,7 +5679,7 @@ function RadioButton({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsxRuntime.jsx(AnimatedContainer, {
+    }) => /*#__PURE__*/jsxRuntime.jsx(AnimatedContainer$1, {
       animatedStyles: animatedStyles,
       isFocused: isFocused || isFocusedInternal,
       isPressed: isPressed || isPressedInternal,
@@ -6005,18 +6034,202 @@ FullscreenModal.Footer = FullscreenModalFooter;
 FullscreenModal.Body = FullscreenModalBody;
 FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
-function Highlight({
-  variant = 'regular',
-  children
+function AnimatedCaret({
+  children,
+  isHovered,
+  isExpanded
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    _web: {
+      style: {
+        transform: `rotate(${isExpanded ? '180deg' : '0deg'}) translateY(${isHovered ? '2px' : '0'})`,
+        transitionDuration: '300ms',
+        transitionProperty: 'transform',
+        transitionTimingFunction: 'ease'
+      }
+    },
+    children: children
+  });
+}
+
+function AnimatedContainer({
+  children,
+  size,
+  isHovered,
+  variant
 }) {
+  const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(View, {
+    _web: {
+      style: {
+        transitionDuration: '300ms',
+        transitionProperty: 'background-color',
+        transitionTimingFunction: 'ease'
+      }
+    },
     borderRadius: "kitt.highlight.borderRadius",
-    padding: "kitt.highlight.padding",
-    backgroundColor: `kitt.highlight.${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({
+  children,
+  isExpanded,
+  isInitialRender,
+  contentHeight
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    _web: {
+      style: {
+        height: isExpanded ? `${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({
+  variant = 'primary',
+  canCollapse = false,
+  isInitialCollapsed = true,
+  title,
+  icon = null,
+  size = 'medium',
+  children
+}) {
+  const theme = useTheme();
+  const [isExpanded, setIsExpanded] = react.useState(!isInitialCollapsed);
+  const [contentHeight, setContentHeight] = react.useState(0);
+  const [isInitialRender, setIsInitialRender] = react.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();
+  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__*/jsxRuntime.jsx(View, {
+      borderRadius: "kitt.highlight.borderRadius",
+      padding: theme.kitt.highlight.padding[size],
+      backgroundColor: `kitt.highlight.${variant}.default.backgroundColor`,
+      children: /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+        space: highlightStyle[size].spaceBetween,
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(View, {
+          children: icon
+        }), /*#__PURE__*/jsxRuntime.jsxs(View, {
+          flexGrow: 1,
+          flexShrink: 1,
+          children: [title && /*#__PURE__*/jsxRuntime.jsx(View, {
+            marginBottom: highlightStyle[size].marginBottom,
+            children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+              variant: "bold",
+              base: "body",
+              ellipsizeMode: "clip",
+              children: title
+            })
+          }), children]
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    onPress: () => {
+      setIsExpanded(!isExpanded);
+      setIsInitialRender(false);
+    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    children: ({
+      isHovered
+    }) => {
+      return /*#__PURE__*/jsxRuntime.jsxs(AnimatedContainer, {
+        isHovered: isHovered,
+        size: size,
+        variant: variant,
+        animatedStyles: containerAnimatedStyles,
+        children: [title && /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+          space: highlightStyle[size].spaceBetween,
+          alignItems: "center",
+          children: [icon && /*#__PURE__*/jsxRuntime.jsx(View, {
+            flexGrow: 1,
+            children: icon
+          }), /*#__PURE__*/jsxRuntime.jsx(View, {
+            flexGrow: 1,
+            flexShrink: 1,
+            width: "100%",
+            children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+              variant: "bold",
+              base: "body",
+              ellipsizeMode: "clip",
+              children: title
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(View, {
+            flexGrow: 2,
+            flexShrink: 2,
+            alignItems: "center",
+            justifyContent: "center",
+            children: /*#__PURE__*/jsxRuntime.jsx(AnimatedCaret, {
+              isHovered: isHovered,
+              isExpanded: isExpanded,
+              animatedStyles: caretAnimatedStyles,
+              children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+                icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.CaretDownRegularIcon, {})
+              })
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(AnimatedContent, {
+          isExpanded: isExpanded,
+          isInitialRender: isInitialRender,
+          contentHeight: contentHeight,
+          animatedStyles: contentAnimatedStyles,
+          children: /*#__PURE__*/jsxRuntime.jsx(View, {
+            marginTop: highlightStyle[size].contentMarginY,
+            position: "absolute",
+            onLayout: handleLayout,
+            children: children
+          })
+        })]
+      });
+    }
+  });
+}
+
 function getBackgroundColor$1(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -7037,16 +7250,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: {
@@ -7559,7 +7800,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,
@@ -8192,9 +8438,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
               }