@ornikar/kitt-universal 9.7.0 → 9.8.0

package/dist/index-browser-all.es.js

@@ -2035,6 +2035,23 @@ var fullScreenModal = {
   }
 };
 
+var spacing = 4;
+
+var highlight = {
+  borderRadius: {
+    base: spacing * 5
+  },
+  regular: {
+    backgroundColor: colors.accentLight
+  },
+  dark: {
+    backgroundColor: lateOceanColorPalette.black100
+  },
+  padding: {
+    base: spacing * 5
+  }
+};
+
 var iconButton = {
   backgroundColor: 'transparent',
   width: 40,
@@ -2207,7 +2224,7 @@ var breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 
 var theme = {
-  spacing: 4,
+  spacing: spacing,
   colors: colors,
   palettes: {
     lateOcean: lateOceanColorPalette
@@ -2220,6 +2237,7 @@ var theme = {
   feedbackMessage: feedbackMessage,
   forms: forms,
   fullScreenModal: fullScreenModal,
+  highlight: highlight,
   iconButton: iconButton,
   listItem: listItem,
   pageLoader: pageLoader,
@@ -3710,6 +3728,22 @@ function FullScreenModal(_ref2) {
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
+function Highlight(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
+      children = _ref.children;
+
+  var _useTheme = /*#__PURE__*/useTheme(),
+      highlight = _useTheme.kitt.highlight;
+
+  return /*#__PURE__*/jsx(View, {
+    borderRadius: highlight.borderRadius,
+    padding: highlight.padding,
+    backgroundColor: highlight[variant].backgroundColor,
+    children: children
+  });
+}
+
 var _excluded$7 = ["children"];
 var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
@@ -5748,5 +5782,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Actions, Avatar, Button, Card, Checkbox, ChoicesElements, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Actions, Avatar, Button, Card, Checkbox, ChoicesElements, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Highlight, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map