@ornikar/kitt-universal 9.7.0 → 9.8.0

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

@@ -1947,6 +1947,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,
@@ -2119,7 +2136,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
@@ -2132,6 +2149,7 @@ var theme = {
   feedbackMessage: feedbackMessage,
   forms: forms,
   fullScreenModal: fullScreenModal,
+  highlight: highlight,
   iconButton: iconButton,
   listItem: listItem,
   pageLoader: pageLoader,
@@ -3025,6 +3043,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$9 = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
@@ -5101,5 +5135,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.web.js.map