oolib 2.148.0 → 2.149.0

package/dist/components/ImageInput/comps/GallerySlider/comps/SliderShell/index.js

@@ -48,7 +48,7 @@ var SliderShell = function (_a) {
     (0, react_1.useEffect)(function () {
         updateHeight();
         window.addEventListener('resize', updateHeight);
-        console.log({ imageMinusCaptionHeight: imageMinusCaptionHeight, wrapperRef: wrapperRef });
+        // console.log({ imageMinusCaptionHeight, wrapperRef })
         var intervalId = setInterval(function () {
             // to avoid issues in cases where height is initally 0 because parent block has display:hidden condition on initial render
             if (!isHeightSet) {

package/dist/stories/Oolib/components/ActionMenu.stories.js

@@ -124,7 +124,6 @@ var ActionMenu = function (args) {
         __assign({ display: args.action3 }, (args.optionIcon3 ? { icon: args.optionIcon3, infoTooltip: args.tooltip && { text: "Tooltip Text" } } : {})),
     ];
     args.M = args.buttonSize === 'M';
-    console.log({ nfaknjfasfs: args.invert });
     return (react_1.default.createElement("div", { style: args.popOutOfOverflowHiddenParent
             ? { border: '2px solid lightgrey', height: '90vh', overflow: 'scroll' }
             : {} },

package/dist/stories/Oolib/components/DatePicker.stories.js

@@ -55,7 +55,7 @@ var DatePicker_ = function (args) {
     var handleDateChange = function (id, value) {
         setSelectedDate(value);
     };
-    console.log(selectedDate);
+    // console.log(selectedDate);
     return (react_1.default.createElement("div", { style: {
             width: '45vw',
             height: '95vh',
@@ -94,7 +94,7 @@ var DateRangePicker_ = function (args) {
     var _a = (0, react_1.useState)([]), dateRange = _a[0], setDateRange = _a[1];
     var handleDateRangeChange = function (id, newValue) {
         setDateRange(newValue);
-        console.log(dateRange);
+        // console.log(dateRange)
     };
     return (react_1.default.createElement("div", { style: {
             width: '45vw',
@@ -136,7 +136,7 @@ exports.DateRangePicker_.args = {
 };
 var TimePicker = function (args) {
     var _a = (0, react_1.useState)(), value = _a[0], setValue = _a[1];
-    console.log({ value: value });
+    // console.log({value: value})
     return (react_1.default.createElement("div", { style: {
             width: '45vw',
             height: '95vh',
@@ -164,7 +164,7 @@ exports.TimePicker.argTypes = {
 };
 var TimeRangePicker = function (args) {
     var _a = (0, react_1.useState)(), selectedTimes = _a[0], setSelectedTimes = _a[1];
-    console.log({ selectedTimes: selectedTimes });
+    // console.log({selectedTimes: selectedTimes})
     return (react_1.default.createElement("div", { style: {
             width: '45vw',
             height: '95vh',
@@ -195,7 +195,7 @@ var DateTimePicker = function (args) {
     var handleOnChange = function (id, value, props) {
         setSelectedValue(value);
     };
-    console.log({ selectedValue: selectedValue });
+    // console.log({selectedValue: selectedValue})
     return (react_1.default.createElement("div", { style: {
             width: '45vw',
             height: '95vh',
@@ -231,7 +231,7 @@ exports.DateTimePicker.argTypes = {
 };
 var DateTimeRangePicker = function (args) {
     var _a = (0, react_1.useState)(), selectedValue = _a[0], setSelectedValue = _a[1];
-    console.log({ selectedValue: selectedValue });
+    // console.log({selectedValue: selectedValue})
     return (react_1.default.createElement("div", { style: {
             width: '45vw',
             height: '95vh',

package/dist/stories/Oolib/components/GroupQuestionsInputSingle.stories.js

@@ -26,7 +26,7 @@ exports.default = {
 };
 var _GroupQuestionsInputSingle = function (args) {
     var _a = (0, react_1.useState)({}), value = _a[0], setValue = _a[1];
-    console.log({ valueParent: value });
+    // console.log({ valueParent: value })
     return (React.createElement("div", { style: { background: args.invert ? themes_1.colors.greyColor100 : '' } },
         React.createElement("div", { style: args.popOutOfOverflowHiddenParent
                 ? { border: '2px solid lightgrey', height: '100%', width: '100%', overflow: 'scroll' }

package/dist/stories/Oolib/components/LegendRadioList.stories.js

@@ -56,7 +56,7 @@ var legendOptions = [
 ];
 var LegendRadioList_ = function (args) {
     var _a = (0, react_1.useState)(legendOptions[0]), selectedValue = _a[0], setSelectedValue = _a[1];
-    console.log({ selectedValue: args });
+    // console.log({selectedValue: args})
     return (React.createElement("div", { style: { width: "50svh", height: "50svh", display: "flex", alignItems: 'center', justifyContent: "center" } },
         React.createElement(LegendRadioList_1.LegendRadioList, __assign({ options: legendOptions, onChange: function (k, v) { return setSelectedValue(v); }, value: selectedValue }, args))));
 };

package/dist/stories/v2/components/cards/CardContent.stories.d.ts

@@ -9,9 +9,8 @@ declare namespace _default {
         };
         highlight: {
             name: string;
-            control: {
-                type: string;
-            };
+            control: string;
+            options: string[];
         };
         desc: {
             name: string;

package/dist/stories/v2/components/cards/CardContent.stories.js

@@ -31,7 +31,6 @@ exports.default = {
 };
 var CardContent = function (args) {
     var props = (0, parseCardArgs_1.parseCardArgs)(args);
-    console.log({ propscardcontent: props });
     return (react_1.default.createElement(Container_1.Container, null,
         react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
             react_1.default.createElement(WrapperCardGrid_1.WrapperCardGrid, null,

package/dist/stories/v2/components/cards/utils/cardArgTypes.d.ts

@@ -81,18 +81,17 @@ export namespace cardContentArgTypes {
     namespace highlight {
         let name_8: string;
         export { name_8 as name };
-        export namespace control_8 {
-            let type_1: string;
-            export { type_1 as type };
-        }
+        let control_8: string;
         export { control_8 as control };
+        let options_1: string[];
+        export { options_1 as options };
     }
     namespace desc {
         let name_9: string;
         export { name_9 as name };
         export namespace control_9 {
-            let type_2: string;
-            export { type_2 as type };
+            let type_1: string;
+            export { type_1 as type };
         }
         export { control_9 as control };
     }
@@ -101,7 +100,7 @@ export namespace cardContentArgTypes {
         export { name_10 as name };
         let control_10: string;
         export { control_10 as control };
-        let options_1: string[];
-        export { options_1 as options };
+        let options_2: string[];
+        export { options_2 as options };
     }
 }

package/dist/stories/v2/components/cards/utils/cardArgTypes.js

@@ -51,7 +51,8 @@ exports.cardContentArgTypes = {
     },
     highlight: {
         name: "Highlight",
-        control: { type: "boolean" },
+        control: 'select',
+        options: [undefined, 'primary', 'secondary'],
     },
     desc: {
         name: "Description",

package/dist/v2/components/ImagePlaceholder/index.d.ts

@@ -1,4 +1,5 @@
 export function ImagePlaceholder({ title, aspectRatio }: {
     title: any;
     aspectRatio?: string;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
+import React from 'react';

package/dist/v2/components/ImagePlaceholder/index.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImagePlaceholder = void 0;
+var react_1 = __importDefault(require("react"));
 var gradient_background_jpg_1 = __importDefault(require("../../../assets/images/gradient_background.jpg"));
 var styled_1 = require("./styled");
 var ImagePlaceholder = function (_a) {
@@ -21,11 +22,11 @@ var ImagePlaceholder = function (_a) {
     var randomColor = colors[Math.floor(Math.random() * colors.length)];
     randomColor += '80'; // to convert to RGBA format for 50% opacity
     var firstLetter = title.charAt(0).toUpperCase();
-    return (React.createElement(styled_1.StyledContainer, { aspectRatio: aspectRatio },
-        React.createElement(styled_1.StyledImageLayer, null,
-            React.createElement(styled_1.StyledImage, { src: gradient_background_jpg_1.default, alt: title })),
-        React.createElement(styled_1.StyledColorOverlay, { color: randomColor }),
-        React.createElement(styled_1.StyledLetterContainer, null,
-            React.createElement(styled_1.StyledLetter, null, firstLetter))));
+    return (react_1.default.createElement(styled_1.StyledContainer, { aspectRatio: aspectRatio },
+        react_1.default.createElement(styled_1.StyledImageLayer, null,
+            react_1.default.createElement(styled_1.StyledImage, { src: gradient_background_jpg_1.default, alt: title })),
+        react_1.default.createElement(styled_1.StyledColorOverlay, { color: randomColor }),
+        react_1.default.createElement(styled_1.StyledLetterContainer, null,
+            react_1.default.createElement(styled_1.StyledLetter, null, firstLetter))));
 };
 exports.ImagePlaceholder = ImagePlaceholder;

package/dist/v2/components/MetaBlock/index.js

@@ -37,7 +37,7 @@ var OKELink_1 = require("../../../components/OKELink");
 var parseMetaBlockConfig_1 = require("./utils/parseMetaBlockConfig");
 var utilsOolib_1 = require("../../../utilsOolib");
 var grey40 = colors_1.colors.grey40, grey50 = colors_1.colors.grey50, grey90 = colors_1.colors.grey90;
-var StyledHorOrientContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n  ", "\n"])), function (_a) {
+var StyledHorOrientContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  flex-wrap: wrap;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  flex-wrap: wrap;\n  ", "\n"])), function (_a) {
     var align = _a.align;
     return align === "center" && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
 });

package/dist/v2/components/Tags/utils/getTypoComp.js

@@ -28,7 +28,6 @@ exports.STYLED_ELLIPSIS_UI_CAPTION = (0, styled_components_1.default)(Typo2_1.UI
 var getTypoComp = function (_a) {
     var _b = _a.typo, typo = _b === void 0 ? "tag" : _b;
     return function (props) {
-        console.log({ typo: typo });
         return (typo === "caption"
             ? react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_CAPTION, __assign({}, props))
             : react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_TAG, __assign({}, props)));

package/dist/v2/components/Typo2/index.js

@@ -61,11 +61,9 @@ var genFontStylingProps = function (props) {
 var GenComp = function (_a) {
     var props = _a.props, Comp = _a.Comp;
     var localize = (0, utilsOolib_1.useLocale)();
-    console.log({ props: props });
     var value = props.value, suffix = props.suffix, color = props.color, children = props.children, theme = props.theme, style = props.style, className = props.className, restProps = __rest(props, ["value", "suffix", "color", "children", "theme", "style", "className"]);
     var displayText = children || value;
     var localText = localize(displayText);
-    console.log({ kljnflkajnfasF: genFontStylingProps(restProps) });
     return (react_1.default.createElement(Comp, __assign({}, genFontStylingProps(restProps), { color: color, className: className, style: style }),
         localText,
         " ",

package/dist/v2/components/cards/CardContent/index.js

@@ -22,7 +22,7 @@ var themes_1 = require("../../../themes");
 var Tags_1 = require("../../Tags");
 var styled_2 = require("./styled");
 var ImagePlaceholder_1 = require("../../ImagePlaceholder");
-var Star = icons_1.icons.Star;
+var Star = icons_1.icons.Star, CrownSimple = icons_1.icons.CrownSimple;
 var success = themes_1.colors.success, white = themes_1.colors.white;
 var CardLabelTag = function (_a) {
     var label = _a.label, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent;
@@ -31,12 +31,12 @@ var CardLabelTag = function (_a) {
 };
 var StatusTag = function (_a) {
     var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagVariant = _a.statusTagVariant;
-    console.log({ statusTagVariant: statusTagVariant });
     return display ? (react_1.default.createElement(styled_2.StyledStatusTagWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent },
         react_1.default.createElement(Tags_1.TagDisplay, { display: display, XS: true, variant: statusTagVariant || "positive" }))) : null;
 };
 var CardContent = function (_a) {
-    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, highlight = _a.highlight, statusTagVariant = _a.statusTagVariant;
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, highlight = _a.highlight, // primary | secondary
+    statusTagVariant = _a.statusTagVariant;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
@@ -50,6 +50,7 @@ var CardContent = function (_a) {
     if (dontRenderRes)
         return dontRenderRes;
     var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _c.LinkComp, target = _c.target;
+    var HighLightIcon = highlight === 'secondary' ? Star : CrownSimple;
     return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
         react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, highlight: highlight, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
             showEmbedSection ? (react_1.default.createElement(styled_2.StyledEmbedSection, null,
@@ -59,10 +60,10 @@ var CardContent = function (_a) {
                     react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : (react_1.default.createElement(ImagePlaceholder_1.ImagePlaceholder, { title: title })))) : (react_1.default.createElement(styled_2.StyledCardLabelAndStatusTagWrapper, null,
                 react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight }),
                 react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant }))),
-            highlight && react_1.default.createElement(styled_2.StyledStarWrapper, null,
-                react_1.default.createElement(Star, { size: 16, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.18))" } })),
+            highlight && react_1.default.createElement(styled_2.StyledStarWrapper, { highlight: highlight },
+                react_1.default.createElement(HighLightIcon, { size: 18, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.50 ))" } })),
             showEmbedSection && (react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant })),
-            title ? (react_1.default.createElement(styled_2.StyledTitleWrapper, null,
+            title ? (react_1.default.createElement(styled_2.StyledTitleWrapper, { highlight: highlight, showEmbedSection: showEmbedSection },
                 react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6 },
                     react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" }, localize(title))))) : null,
             description ? (react_1.default.createElement(styled_2.StyledDescription, null,

package/dist/v2/components/cards/CardContent/styled.js

@@ -11,26 +11,35 @@ exports.StyledMetaBlockWrapper = exports.StyledStarWrapper = exports.StyledStatu
 var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("../../../themes/colors");
 var Typo2_1 = require("../../Typo2");
-var white = colors_1.colors.white, grey10 = colors_1.colors.grey10, grey50 = colors_1.colors.grey50, grey60 = colors_1.colors.grey60, yellowBG = colors_1.colors.yellowBG, yellowStroke = colors_1.colors.yellowStroke, shadowDefault = colors_1.colors.shadowDefault, shadowHover = colors_1.colors.shadowHover, yellow = colors_1.colors.yellow;
+var white = colors_1.colors.white, grey10 = colors_1.colors.grey10, grey50 = colors_1.colors.grey50, grey60 = colors_1.colors.grey60, yellowBG = colors_1.colors.yellowBG, yellowStroke = colors_1.colors.yellowStroke, shadowDefault = colors_1.colors.shadowDefault, shadowHover = colors_1.colors.shadowHover, yellow = colors_1.colors.yellow, meadow = colors_1.colors.meadow, meadowBG = colors_1.colors.meadowBG, meadowStroke = colors_1.colors.meadowStroke;
 exports.StyledEmbedSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: 182px;\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n"], ["\n  max-height: 182px;\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n"])));
-exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  border: 1px solid ", ";\n  background-color: ", ";\n  cursor: pointer;\n  position: relative;\n  padding: 12px;\n  width: 100%;\n  max-width: 450px;\n  border-radius: 8px;\n  box-shadow: 0px 4px 10px 0px ", ";\n  \n  &:hover {\n    border: 1px solid ", ";\n    box-shadow: 0px 4px 10px 0px ", ";\n  }\n"], ["\n  height: 100%;\n  border: 1px solid ", ";\n  background-color: ", ";\n  cursor: pointer;\n  position: relative;\n  padding: 12px;\n  width: 100%;\n  max-width: 450px;\n  border-radius: 8px;\n  box-shadow: 0px 4px 10px 0px ", ";\n  \n  &:hover {\n    border: 1px solid ", ";\n    box-shadow: 0px 4px 10px 0px ", ";\n  }\n"])), function (_a) {
+exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  border: 1px solid ", ";\n  background-color: ", ";\n  cursor: pointer;\n  position: relative;\n  padding: 12px;\n  width: 100%;\n  /* max-width: 450px; */\n  border-radius: 8px;\n  box-shadow: 0px 4px 10px 0px ", ";\n  \n  &:hover {\n    border: ", ";\n    box-shadow: 0px 4px 10px 0px ", ";\n  }\n"], ["\n  height: 100%;\n  border: 1px solid ", ";\n  background-color: ", ";\n  cursor: pointer;\n  position: relative;\n  padding: 12px;\n  width: 100%;\n  /* max-width: 450px; */\n  border-radius: 8px;\n  box-shadow: 0px 4px 10px 0px ", ";\n  \n  &:hover {\n    border: ", ";\n    box-shadow: 0px 4px 10px 0px ", ";\n  }\n"])), function (_a) {
     var highlight = _a.highlight;
-    return highlight ? yellowStroke : grey10;
+    return highlight === "secondary" ? yellowStroke : highlight === "primary" ? meadowStroke : grey10;
 }, function (_a) {
     var highlight = _a.highlight;
-    return highlight ? yellowBG : white;
-}, shadowDefault, grey50, shadowHover);
-exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 4px;\n"], ["\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 4px;\n"])));
+    return highlight === "secondary" ? yellowBG : highlight === "primary" ? meadowBG : white;
+}, shadowDefault, function (_a) {
+    var highlight = _a.highlight;
+    return highlight === 'secondary' ? "1px solid ".concat(yellow) : highlight === 'primary' ? "1px solid ".concat(meadow) : "1px solid ".concat(grey50);
+}, shadowHover);
+exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 4px;\n  width: ", " ; // 3.6rem is the width of the star wrapper, this condition avoids title from being cutoff\n"], ["\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 4px;\n  width: ", " ; // 3.6rem is the width of the star wrapper, this condition avoids title from being cutoff\n"])), function (_a) {
+    var highlight = _a.highlight, showEmbedSection = _a.showEmbedSection;
+    return (highlight && !showEmbedSection) ? "calc(100% - 3.6rem)" : '100%';
+});
 exports.StyledDescription = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: 6px;\n  color: ", ";\n"], ["\n  margin-bottom: 6px;\n  color: ", ";\n"])), grey60);
-exports.StyledCardLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: 0 6px;\n  margin-bottom: -2px;\n"], ["\n  display: flex;\n  gap: 0 6px;\n  margin-bottom: -2px;\n"])));
-exports.StyledCardLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: ", ";\n  margin-bottom: 8px;\n  max-width: ", ";\n  top: 12px;\n  left: 12px;\n  z-index: 10;\n  backdrop-filter: blur(10px);\n  border-radius: 4px;\n"], ["\n  position: ", ";\n  margin-bottom: 8px;\n  max-width: ", ";\n  top: 12px;\n  left: 12px;\n  z-index: 10;\n  backdrop-filter: blur(10px);\n  border-radius: 4px;\n"])), function (_a) {
+exports.StyledCardLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: 0 6px;\n  margin-bottom: -2px;\n  /* width: 100%; */\n  /* overflow: hidden; */\n"], ["\n  display: flex;\n  gap: 0 6px;\n  margin-bottom: -2px;\n  /* width: 100%; */\n  /* overflow: hidden; */\n"])));
+exports.StyledCardLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: ", ";\n  margin-bottom: 8px;\n  /* max-width: ", "; */\n  top: 12px;\n  left: 12px;\n  z-index: 10;\n  backdrop-filter: blur(10px);\n  border-radius: 4px;\n"], ["\n  position: ", ";\n  margin-bottom: 8px;\n  /* max-width: ", "; */\n  top: 12px;\n  left: 12px;\n  z-index: 10;\n  backdrop-filter: blur(10px);\n  border-radius: 4px;\n"])), function (_a) {
     var isEmbedPresent = _a.isEmbedPresent;
     return isEmbedPresent ? "absolute" : "static";
 }, function (_a) {
     var isEmbedPresent = _a.isEmbedPresent;
     return isEmbedPresent ? "38%" : "40%";
 });
-exports.StyledStatusTagWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: 8px;\n  max-width: 40%;\n"], ["\n  margin-bottom: 8px;\n  max-width: 40%;\n"])));
-exports.StyledStarWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 10;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 7px;\n  background-color: ", ";\n  border-radius: 4px;\n"], ["\n  width: 28px;\n  height: 28px;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 10;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 7px;\n  background-color: ", ";\n  border-radius: 4px;\n"])), yellow);
+exports.StyledStatusTagWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: 8px;\n  /* max-width: 40%; */\n"], ["\n  margin-bottom: 8px;\n  /* max-width: 40%; */\n"])));
+exports.StyledStarWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 3.6rem;\n  height: 3.6rem;\n  position: absolute;\n  top: 1.2rem;\n  right: 1.2rem;\n  z-index: 10;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 7px;\n  background-color: ", "; \n  border-radius: 4px;\n"], ["\n  width: 3.6rem;\n  height: 3.6rem;\n  position: absolute;\n  top: 1.2rem;\n  right: 1.2rem;\n  z-index: 10;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 7px;\n  background-color: ", "; \n  border-radius: 4px;\n"])), function (_a) {
+    var highlight = _a.highlight;
+    return highlight === "secondary" ? yellow : highlight === "primary" ? meadow : white;
+});
 exports.StyledMetaBlockWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n"], ["\n  color: ", ";\n  font-family: ", ";\n"])), grey50, Typo2_1.UI_CAPTION);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/v2/themes/colors.d.ts

@@ -32,6 +32,9 @@ export declare const colors: {
     purple: string;
     shadowDefault: string;
     shadowHover: string;
+    meadow: string;
+    meadowBG: string;
+    meadowStroke: string;
 };
 export interface Colors2Type {
     primary: string;
@@ -60,4 +63,7 @@ export interface Colors2Type {
     success: string;
     hintHover: string;
     hint: string;
+    meadow: string;
+    meadowBG: string;
+    meadowStroke: string;
 }

package/dist/v2/themes/colors.js

@@ -38,6 +38,9 @@ var shadowDefault = "#0000000f";
 var shadowHover = "#0000001f";
 var hintHover = "#F4E8C3";
 var hint = "#B77222";
+var meadow = '#1DBC8C';
+var meadowBG = '#E4FFF7';
+var meadowStroke = '#C3E5DB';
 exports.colors = {
     primary: primary,
     secondary: secondary,
@@ -72,4 +75,7 @@ exports.colors = {
     purple: purple,
     shadowDefault: shadowDefault,
     shadowHover: shadowHover,
+    meadow: meadow,
+    meadowBG: meadowBG,
+    meadowStroke: meadowStroke
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.148.0",
+  "version": "2.149.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",