@ornikar/kitt-universal 9.7.0 → 9.8.0

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

@@ -1824,6 +1824,23 @@ const fullScreenModal = {
   }
 };
 
+const spacing = 4;
+
+const highlight = {
+  borderRadius: {
+    base: spacing * 5
+  },
+  regular: {
+    backgroundColor: colors.accentLight
+  },
+  dark: {
+    backgroundColor: lateOceanColorPalette.black100
+  },
+  padding: {
+    base: spacing * 5
+  }
+};
+
 const iconButton = {
   backgroundColor: 'transparent',
   width: 40,
@@ -1996,7 +2013,7 @@ const breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 
 const theme = {
-  spacing: 4,
+  spacing,
   colors,
   palettes: {
     lateOcean: lateOceanColorPalette
@@ -2009,6 +2026,7 @@ const theme = {
   feedbackMessage,
   forms,
   fullScreenModal,
+  highlight,
   iconButton,
   listItem,
   pageLoader,
@@ -2835,6 +2853,23 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
+function Highlight({
+  variant = 'regular',
+  children
+}) {
+  const {
+    kitt: {
+      highlight
+    }
+  } = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    borderRadius: highlight.borderRadius,
+    padding: highlight.padding,
+    backgroundColor: highlight[variant].backgroundColor,
+    children: children
+  });
+}
+
 function StyleWebWrapper({
   as,
   children,
@@ -4846,6 +4881,7 @@ exports.ExternalLink = ExternalLink;
 exports.Flex = Flex;
 exports.FullScreenModal = FullScreenModal;
 exports.HStack = HStack;
+exports.Highlight = Highlight;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.InputEmail = InputEmail;