oolib 2.153.1 → 2.155.0

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export * from "./v2/components/Buttons";
 export * from "./v2/components/Typo2";
 export * from "./v2/components/BlockLabel";
 export * from "./v2/components/cards/CardContent";
+export * from "./v2/components/cards/ListContent";
 export * from "./v2/components/Tags";
 export * from "./v2/components/ImagePlaceholder";
 export * from "./v2/components/TextInputs";
@@ -49,7 +50,6 @@ export { TimePicker } from "./components/TimePicker";
 export { TimeRangePicker } from "./components/TimeRangePicker";
 export { DateTimePicker } from "./components/DateTimePicker";
 export { DateTimeRangePicker } from "./components/DateTimeRangePicker";
-export { ListContent } from "./components/cards/ListContent";
 export { CardEmbed } from "./components/cards/CardEmbed";
 export { CardProfile } from "./components/cards/CardProfile";
 export { ListProfile } from "./components/cards/ListProfile";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = void 0;
+exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -103,8 +103,7 @@ var DateTimeRangePicker_1 = require("./components/DateTimeRangePicker");
 Object.defineProperty(exports, "DateTimeRangePicker", { enumerable: true, get: function () { return DateTimeRangePicker_1.DateTimeRangePicker; } });
 //cards
 // export {CardContent} from './components/cards/CardContent'
-var ListContent_1 = require("./components/cards/ListContent");
-Object.defineProperty(exports, "ListContent", { enumerable: true, get: function () { return ListContent_1.ListContent; } });
+// export {ListContent} from './components/cards/ListContent'
 var CardEmbed_1 = require("./components/cards/CardEmbed");
 Object.defineProperty(exports, "CardEmbed", { enumerable: true, get: function () { return CardEmbed_1.CardEmbed; } });
 var CardProfile_1 = require("./components/cards/CardProfile");
@@ -176,6 +175,7 @@ __exportStar(require("./v2/components/Buttons"), exports);
 __exportStar(require("./v2/components/Typo2"), exports);
 __exportStar(require("./v2/components/BlockLabel"), exports);
 __exportStar(require("./v2/components/cards/CardContent"), exports);
+__exportStar(require("./v2/components/cards/ListContent"), exports);
 __exportStar(require("./v2/components/Tags"), exports);
 __exportStar(require("./v2/components/ImagePlaceholder"), exports);
 __exportStar(require("./v2/components/TextInputs"), exports);

package/dist/stories/Oolib/components/Playground.stories.d.ts

@@ -1,21 +1,5 @@
 declare namespace _default {
     let title: string;
-    namespace argTypes {
-        namespace width {
-            let name: string;
-            namespace control {
-                let type: string;
-                let min: number;
-                let max: number;
-                let step: number;
-            }
-        }
-    }
-    namespace args {
-        export let invert: boolean;
-        let width_1: number;
-        export { width_1 as width };
-    }
 }
 export default _default;
 export function Playground(args: any): React.JSX.Element;

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

@@ -8,16 +8,16 @@ var react_1 = __importDefault(require("react"));
 var Playground_1 = require("../../../components/Playground");
 exports.default = {
     title: "Components/Playground",
-    argTypes: {
-        width: {
-            name: "Width PX",
-            control: { type: 'range', min: 300, max: 1500, step: 100 },
-        }
-    },
-    args: {
-        invert: false,
-        width: 1300,
-    }
+    // argTypes:{
+    //   width: {
+    //     name: "Width PX",
+    //     control: { type: 'range', min: 300, max: 1500, step: 100 },
+    //   }
+    // },
+    // args: {
+    //   invert: false,
+    //   width: 1300,    
+    // }
 };
 var Playground = function (args) {
     return (react_1.default.createElement("div", null,

package/dist/stories/v2/components/ImagePlaceHolder.stories.d.ts

@@ -0,0 +1,21 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        export namespace title_1 {
+            let name: string;
+        }
+        export { title_1 as title };
+    }
+    namespace args {
+        let title_2: string;
+        export { title_2 as title };
+        export let width: number;
+        export let aspectRatio: string;
+        export let fontWeight: number;
+        export let style: {};
+        export let letterSizeMultiplier: string;
+        export let strechToFullHeight: boolean;
+    }
+}
+export default _default;
+export function Image_Placeholder(args: any): import("react").JSX.Element;

package/dist/stories/v2/components/ImagePlaceHolder.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image_Placeholder = void 0;
+var ImagePlaceholder_1 = require("../../../v2/components/ImagePlaceholder");
+exports.default = {
+    title: "Oolib V 2.0/components/ImagePlaceholder",
+    argTypes: {
+        title: {
+            name: "Text",
+        },
+    },
+    args: {
+        title: "Default Title",
+        width: 500,
+        aspectRatio: "5/3",
+        fontWeight: 900,
+        style: {},
+        letterSizeMultiplier: '1.8',
+        strechToFullHeight: false,
+    },
+};
+var Image_Placeholder = function (args) {
+    return (React.createElement("div", { style: {
+            width: "".concat(args.width, "px"),
+            height: '700px',
+        } },
+        React.createElement(ImagePlaceholder_1.ImagePlaceholder, __assign({}, args))));
+};
+exports.Image_Placeholder = Image_Placeholder;

package/dist/stories/{Oolib → v2}/components/cards/ListContent.stories.d.ts

@@ -8,11 +8,9 @@ declare namespace _default {
                 type: string;
             };
         };
-        actions: {
+        highlight: {
             name: string;
-            control: {
-                type: string;
-            };
+            control: string;
         };
         cardLabel: {
             name: string;
@@ -43,10 +41,6 @@ declare namespace _default {
                 eq: string;
             };
         };
-        metaText: {
-            name: string;
-            control: string;
-        };
         metaName: {
             name: string;
             control: string;
@@ -57,11 +51,8 @@ declare namespace _default {
         };
     };
     let args: {
-        statusTag: any;
-        actions: boolean;
         cardLabel: string;
         title: string;
-        metaText: string;
         metaName: string;
         metaDate: number;
         mediaType: string;

package/dist/stories/{Oolib → v2}/components/cards/ListContent.stories.js

@@ -18,16 +18,17 @@ exports.Playground = exports.ListContent = void 0;
 var react_1 = __importDefault(require("react"));
 var Container_1 = require("../../../../components/Container");
 var Paddings_1 = require("../../../../components/Paddings");
-var ListContent_1 = require("../../../../components/cards/ListContent");
+var ListContent_1 = require("../../../../v2/components/cards/ListContent");
 var ListContent_mdx_1 = __importDefault(require("./ListContent.mdx"));
 var cardArgTypes_1 = require("./utils/cardArgTypes");
 var parseCardArgs_1 = require("./utils/parseCardArgs");
 var Wrappers_1 = require("../../../../components/Wrappers");
 var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
+var Divider_1 = require("../../../../v2/components/Divider");
 exports.default = {
-    title: "Components/ListContent",
+    title: "Oolib V 2.0/Components/ListContent",
     argTypes: __assign(__assign({}, cardArgTypes_1.commonCardArgTypes), cardArgTypes_1.listContentArgTypes),
-    args: __assign(__assign({}, cardArgTypes_1.commonCardArgs), cardArgTypes_1.listContentArgs),
+    args: __assign({}, cardArgTypes_1.commonCardArgs),
     parameters: {
         docs: {
             page: ListContent_mdx_1.default,
@@ -45,6 +46,9 @@ var Playground = function (args) {
     var props = (0, parseCardArgs_1.parseCardArgs)(args);
     return (react_1.default.createElement(Container_1.Container, null,
         react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
-            react_1.default.createElement(Wrappers_1.Wrapper700, { left: true }, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(ListContent_1.ListContent, __assign({}, props, { config: props.config }))); })))));
+            react_1.default.createElement(Wrappers_1.Wrapper700, { left: true }, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { style: { padding: "1px 0" } },
+                    react_1.default.createElement(Divider_1.Divider, null)),
+                react_1.default.createElement(ListContent_1.ListContent, __assign({}, props, { config: props.config })))); })))));
 };
 exports.Playground = Playground;

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

@@ -104,3 +104,21 @@ export namespace cardContentArgTypes {
         export { options_2 as options };
     }
 }
+export namespace listContentArgTypes {
+    export namespace statusTag {
+        let name_11: string;
+        export { name_11 as name };
+        export namespace control_11 {
+            let type_2: string;
+            export { type_2 as type };
+        }
+        export { control_11 as control };
+    }
+    export namespace highlight_1 {
+        let name_12: string;
+        export { name_12 as name };
+        let control_12: string;
+        export { control_12 as control };
+    }
+    export { highlight_1 as highlight };
+}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cardContentArgTypes = exports.commonCardArgTypes = exports.commonCardArgs = void 0;
+exports.listContentArgTypes = exports.cardContentArgTypes = exports.commonCardArgTypes = exports.commonCardArgs = void 0;
 //this order decides the order of the controls
 exports.commonCardArgs = {
     cardLabel: "Stories",
@@ -64,3 +64,13 @@ exports.cardContentArgTypes = {
         options: ['primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
     }
 };
+exports.listContentArgTypes = {
+    statusTag: {
+        name: "Status Tag",
+        control: { type: "text" },
+    },
+    highlight: {
+        name: "Highlight",
+        control: 'boolean',
+    },
+};

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

@@ -0,0 +1,2 @@
+import { FunctionComponent } from 'react';
+export declare const Divider: FunctionComponent;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
+var StyledHr = styled_components_1.default.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n"], ["\n  margin: 0;\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n"])), themes_1.colors.grey10);
+var Divider = function () {
+    return react_1.default.createElement(StyledHr, null);
+};
+exports.Divider = Divider;
+var templateObject_1;

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

@@ -1,5 +1,10 @@
-export function ImagePlaceholder({ title, aspectRatio }: {
+export function ImagePlaceholder({ title, height, fontWeight, aspectRatio, letterSizeMultiplier, strechToFullHeight, style }: {
     title: any;
+    height: any;
+    fontWeight: any;
     aspectRatio?: string;
+    letterSizeMultiplier?: number;
+    strechToFullHeight?: boolean;
+    style?: {};
 }): React.JSX.Element;
 import React from 'react';

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

@@ -1,14 +1,54 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImagePlaceholder = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var gradient_background_jpg_1 = __importDefault(require("../../../assets/images/gradient_background.jpg"));
 var styled_1 = require("./styled");
 var ImagePlaceholder = function (_a) {
-    var title = _a.title, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? "5/3" : _b;
+    var title = _a.title, height = _a.height, fontWeight = _a.fontWeight, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? "5/3" : _b, _c = _a.letterSizeMultiplier, letterSizeMultiplier = _c === void 0 ? 1.8 : _c, _d = _a.strechToFullHeight, strechToFullHeight = _d === void 0 ? false : _d, _e = _a.style, style = _e === void 0 ? {} : _e;
+    var containerRef = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(200), letterSize = _f[0], setLetterSize = _f[1];
+    (0, react_1.useEffect)(function () {
+        var calculateLetterSize = function () {
+            if (containerRef.current) {
+                var containerHeight = containerRef.current.offsetHeight;
+                var calculatedSize = containerHeight * letterSizeMultiplier; // Calculate letter size based on container height. Adjust the multiplier to match design requirements
+                setLetterSize(calculatedSize);
+            }
+        };
+        calculateLetterSize();
+        window.addEventListener('resize', calculateLetterSize);
+        // Cleanup listener
+        return function () {
+            window.removeEventListener('resize', calculateLetterSize);
+        };
+    }, []);
     var colors = [
         '#9EE4F1',
         '#ABF3BD',
@@ -22,11 +62,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_1.default.createElement(styled_1.StyledContainer, { aspectRatio: aspectRatio },
+    return (react_1.default.createElement(styled_1.StyledContainer, { ref: containerRef, aspectRatio: aspectRatio, height: height, strechToFullHeight: strechToFullHeight, style: style },
         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))));
+            react_1.default.createElement(styled_1.StyledLetter, { fontSize: letterSize, fontWeight: fontWeight }, firstLetter))));
 };
 exports.ImagePlaceholder = ImagePlaceholder;

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

@@ -11,10 +11,16 @@ exports.StyledLetter = exports.StyledLetterContainer = exports.StyledColorOverla
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var white = themes_1.colors.white;
-exports.StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: auto;\n  aspect-ratio: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: auto;\n  aspect-ratio: ", ";\n"])), function (props) { return props.aspectRatio; });
+exports.StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  aspect-ratio: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  aspect-ratio: ", ";\n"])), function (_a) {
+    var height = _a.height, strechToFullHeight = _a.strechToFullHeight;
+    return height ? height : (strechToFullHeight ? '100%' : 'auto');
+}, function (props) { return props.aspectRatio; });
 exports.StyledImageLayer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n"], ["\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n"])));
 exports.StyledImage = styled_components_1.default.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
 exports.StyledColorOverlay = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  mix-blend-mode: color;\n  background-color: ", ";\n"], ["\n  position: absolute;\n  inset: 0;\n  mix-blend-mode: color;\n  background-color: ", ";\n"])), function (props) { return props.color; });
-exports.StyledLetterContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-exports.StyledLetter = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 900;\n  opacity: 0.26;\n  line-height: 1;\n  user-select: none;\n  font-family: Figtree, Arial, sans-serif;\n  text-transform: uppercase;\n  font-size: 350px;\n"], ["\n  color: ", ";\n  font-weight: 900;\n  opacity: 0.26;\n  line-height: 1;\n  user-select: none;\n  font-family: Figtree, Arial, sans-serif;\n  text-transform: uppercase;\n  font-size: 350px;\n"])), white);
+exports.StyledLetterContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: inherit;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: inherit;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+exports.StyledLetter = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  opacity: 0.26;\n  line-height: 1;\n  user-select: none;\n  font-family: Figtree, Arial, sans-serif;\n  text-transform: uppercase;\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  opacity: 0.26;\n  line-height: 1;\n  user-select: none;\n  font-family: Figtree, Arial, sans-serif;\n  text-transform: uppercase;\n  font-size: ", "px;\n"])), white, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight || "900";
+}, function (props) { return props.fontSize; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -37,20 +37,27 @@ 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: 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 StyledHorOrientContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  flex-wrap: wrap;\n  justify-content: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  flex-wrap: wrap;\n  justify-content: ", ";\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    "])));
+    switch (align) {
+        case "center":
+            return "center";
+        case "right":
+            return "flex-end";
+        default:
+            return "flex-start";
+    }
 });
-var StyledVerOrientContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  ", "\n"])), function (_a) {
+var StyledVerOrientContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  ", "\n"])), function (_a) {
     var align = _a.align;
-    return align === "center" && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+    return align === "center" && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
 });
-var StyledMetaWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"])));
-var STYLED_UI_CAPTION = (0, styled_components_1.default)(Typo2_1.UI_CAPTION)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), mixins_1.ellipsis, function (_a) {
+var StyledMetaWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"])));
+var STYLED_UI_CAPTION = (0, styled_components_1.default)(Typo2_1.UI_CAPTION)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), mixins_1.ellipsis, function (_a) {
     var disabled = _a.disabled;
-    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), disabled ? grey40 : grey50);
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), disabled ? grey40 : grey50);
 });
-var StyledSeparator = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), grey50);
+var StyledSeparator = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), grey50);
 var MetaBlock = function (_a) {
     var data = _a.data, config = _a.config, disabled = _a.disabled, _b = _a.align, align = _b === void 0 ? "left" : _b, _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
     var localize = (0, utilsOolib_1.useLocale)();
@@ -93,4 +100,4 @@ var MetaBlock = function (_a) {
         : genText({ icon: v.icon, display: v.display }))); })));
 };
 exports.default = MetaBlock;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/v2/components/Tags/Comps/TagDisplay/styled.js

@@ -31,7 +31,7 @@ exports.StyledTagDisplay = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var styled_1 = require("../styled");
 var themes_1 = require("../../../../themes");
-var grey10 = themes_1.colors.grey10, grey30 = themes_1.colors.grey30, white = themes_1.colors.white, grey80 = themes_1.colors.grey80, green = themes_1.colors.green, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
+var grey10 = themes_1.colors.grey10, grey30 = themes_1.colors.grey30, grey40 = themes_1.colors.grey40, white = themes_1.colors.white, grey80 = themes_1.colors.grey80, green = themes_1.colors.green, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
 exports.StyledTagDisplay = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: max-content;\n  ", "\n  ", "\n"], ["\n  width: max-content;\n  ", "\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return (0, styled_1.commonStyle)({ size: size });
@@ -53,7 +53,7 @@ exports.StyledTagDisplay = styled_components_1.default.div(templateObject_9 || (
         case 'special':
             return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n      "], ["\n          background-color: ", ";    \n          color: ", ";\n      "])), tagColor || purple, textColor || white);
         case 'grey':
-            return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";  \n        "], ["\n          background-color: ", ";\n          color: ", ";  \n        "])), tagColor || grey30, textColor || white);
+            return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";  \n        "], ["\n          background-color: ", ";\n          color: ", ";  \n        "])), tagColor || grey40, textColor || white);
     }
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/v2/components/cards/ListContent/index.d.ts

@@ -0,0 +1,12 @@
+export function ListContent({ id, data, config, to, onClick, openInNewTab, statusTag, variant, highlight, }: {
+    id: any;
+    data: any;
+    config: any;
+    to: any;
+    onClick: any;
+    openInNewTab: any;
+    statusTag: any;
+    variant?: string;
+    highlight: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListContent = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
+var injectHttps_1 = require("../../../../utils/injectHttps");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var ImageInput_1 = require("../../../../components/ImageInput");
+var Tags_1 = require("../../Tags");
+var VideoInput_1 = __importDefault(require("../../../../components/VideoInput"));
+var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
+var ImagePlaceholder_1 = require("../../ImagePlaceholder");
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var styled_1 = require("../styled");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var mediaDataExists_1 = require("../utils/mediaDataExists");
+var parseCardConfig_1 = require("../utils/parseCardConfig");
+var ProfileImageInput_1 = require("../../../../components/ImageInput/derivedComps/ProfileImageInput");
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var mixins_1 = require("../../../../themes/mixins");
+var themes_1 = require("../../../themes");
+var icons_1 = require("../../../../icons");
+var styled_js_1 = require("./styled.js");
+var white = themes_1.colors.white;
+var Star = icons_1.icons.Star;
+var CustomTag = function (_a) {
+    var displayText = _a.displayText, tagVariant = _a.tagVariant, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
+    return displayText ? (react_1.default.createElement(styled_js_1.StyledTagWrapper, { bothTagsDisplayTogether: bothTagsDisplayTogether },
+        react_1.default.createElement(Tags_1.TagDisplay, { display: displayText, title: displayText, variant: tagVariant || "primary", XS: true }))) : null;
+};
+var ListContent = function (_a) {
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b, //alt = profile
+    highlight = _a.highlight;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
+    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
+    var _c = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax,
+    }), cardLabel = _c.cardLabel, title = _c.title, video = _c.video, image = _c.image, metaBlock = _c.metaBlock;
+    var bothTagsDisplayTogether = cardLabel && statusTag;
+    var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
+    if (dontRenderRes)
+        return dontRenderRes;
+    var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
+        to: to,
+        openInNewTab: openInNewTab,
+    }), LinkComp = _d.LinkComp, target = _d.target;
+    var mediaConfigExists = config.video || config.image;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick ? function (e) { return onClick(e, data); } : undefined, mediaConfigExists: mediaConfigExists },
+            react_1.default.createElement(styled_js_1.StyledListWrapper, null,
+                variant === "content" ? (mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule, null, (0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })) : (0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
+                    react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
+                    react_1.default.createElement(styled_js_1.StyledVideoOverlay, null))) : (react_1.default.createElement(ImagePlaceholder_1.ImagePlaceholder, { title: title, aspectRatio: "13/10", height: "100%" }))))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
+                    react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? 60 : 70, imageTitle: title }))),
+                react_1.default.createElement(styled_js_1.StyledMainSection, null,
+                    react_1.default.createElement("div", null,
+                        (cardLabel || statusTag) && mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { mediaConfigExists: mediaConfigExists, highlight: highlight },
+                            react_1.default.createElement(CustomTag, { displayText: cardLabel, bothTagsDisplayTogether: bothTagsDisplayTogether }),
+                            react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: "positive", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
+                        title ? (react_1.default.createElement(styled_js_1.StyledTitleWrapper, { highlight: highlight, mediaConfigExists: mediaConfigExists },
+                            react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 4, noOfLines_D: 3, title: title },
+                                react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
+                                    react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
+                    (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledMetaBlockWrapper, { mediaConfigExists: mediaConfigExists },
+                        react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }))),
+                    ((metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 || cardLabel || statusTag) && !mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledMetaBlockAndTagsWrapper, null,
+                        react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight },
+                            react_1.default.createElement(CustomTag, { displayText: cardLabel, bothTagsDisplayTogether: bothTagsDisplayTogether }),
+                            react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: "positive", bothTagsDisplayTogether: bothTagsDisplayTogether })),
+                        (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement(styled_js_1.StyledMetaBlockWrapper, { mediaConfigExists: mediaConfigExists },
+                            react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock, align: "right" })))))),
+                highlight && (react_1.default.createElement(styled_js_1.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.50 ))" } })))))));
+};
+exports.ListContent = ListContent;

package/dist/v2/components/cards/ListContent/styled.d.ts

@@ -0,0 +1,13 @@
+export const StyledListElemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledStarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledContentModule: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledVideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledVideoOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMainSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLabelAndStatusTagWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTagWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMetaBlockWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMetaBlockAndTagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledContentModule2 = exports.StyledMetaBlockAndTagsWrapper = exports.StyledMetaBlockWrapper = exports.StyledTagWrapper = exports.StyledLabelAndStatusTagWrapper = exports.StyledTitleWrapper = exports.StyledMainSection = exports.StyledVideoOverlay = exports.StyledVideoWrapper = exports.StyledContentModule = exports.StyledStarWrapper = exports.StyledListWrapper = exports.StyledListElemContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../../themes");
+var mixins_1 = require("../../../../themes/mixins");
+var grey50 = themes_1.colors.grey50, yellow = themes_1.colors.yellow, white = themes_1.colors.white;
+var SIZE_OF_HIGHLIGHT = "28px";
+var SIZE_OF_META_BLOCK_WRAPPER = "19rem";
+exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  padding-inline: 12px;\n  padding-block: ", ";\n  cursor: pointer;\n  border-radius: 8px;\n  border: 1px solid ", ";\n\n  ", " {\n    &:hover {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  padding-inline: 12px;\n  padding-block: ", ";\n  cursor: pointer;\n  border-radius: 8px;\n  border: 1px solid ", ";\n\n  ", " {\n    &:hover {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n    }\n  }\n"])), function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "12px" : "14px";
+}, white, (0, mixins_1.mediaQuery)("sm"), grey50);
+exports.StyledListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 12px;\n  position: relative;\n"], ["\n  display: flex;\n  gap: 12px;\n  position: relative;\n"])));
+exports.StyledStarWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n  background-color: ", "; \n  border-radius: 4px;\n"], ["\n  width: ", ";\n  height: ", ";\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n  background-color: ", "; \n  border-radius: 4px;\n"])), SIZE_OF_HIGHLIGHT, SIZE_OF_HIGHLIGHT, yellow);
+exports.StyledContentModule = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 91px;\n  min-width: 121px;\n  width: 121px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: 4px;\n\n  ", " {\n    min-height: 120px;\n    min-width: 159px;\n    width: 159px;\n  }\n"], ["\n  min-height: 91px;\n  min-width: 121px;\n  width: 121px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: 4px;\n\n  ", " {\n    min-height: 120px;\n    min-width: 159px;\n    width: 159px;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"])));
+exports.StyledVideoOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+exports.StyledMainSection = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: hidden;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: hidden;\n"])));
+exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: ", " ; // this condition avoids title from being cutoff\n"], ["\n  width: ", " ; // this condition avoids title from being cutoff\n"])), function (_a) {
+    var highlight = _a.highlight, mediaConfigExists = _a.mediaConfigExists;
+    return highlight && !mediaConfigExists ? "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)") : '100%';
+});
+exports.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  gap: 6px;\n"], ["\n  width: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  gap: 6px;\n"])), function (_a) {
+    var highlight = _a.highlight, mediaConfigExists = _a.mediaConfigExists;
+    if (mediaConfigExists && highlight)
+        return "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)"); // 6px gap between highlight and tag
+    else if (mediaConfigExists && !highlight)
+        return "100%";
+    else if (!mediaConfigExists)
+        return "calc(100% - ".concat(SIZE_OF_META_BLOCK_WRAPPER, ")");
+}, function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "8px" : "0px";
+});
+exports.StyledTagWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  max-width: ", "; // 3px is the half of the space between tags\n"], ["\n  max-width: ", "; // 3px is the half of the space between tags\n"])), function (_a) {
+    var bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
+    return bothTagsDisplayTogether ? "calc(50% - 3px)" : "100%";
+});
+exports.StyledMetaBlockWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: ", ";\n  margin-top: ", ";\n"], ["\n  width: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "auto" : SIZE_OF_META_BLOCK_WRAPPER;
+}, function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "4px" : "0px";
+});
+exports.StyledMetaBlockAndTagsWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 10px;\n  display: flex;\n  justify-content: space-between;\n"], ["\n  width: 100%;\n  margin-top: 10px;\n  display: flex;\n  justify-content: space-between;\n"])));
+exports.StyledContentModule2 = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/package.json

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

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

@@ -1,79 +0,0 @@
-declare namespace _default {
-    let title: string;
-    let argTypes: {
-        tagDisplay: {
-            name: string;
-            control: {
-                type: string;
-            };
-        };
-        highlight: {
-            name: string;
-            control: {
-                type: string;
-            };
-        };
-        actions: {
-            name: string;
-            control: {
-                type: string;
-            };
-        };
-        cardLabel: {
-            name: string;
-            control: string;
-        };
-        title: {
-            name: string;
-            control: string;
-        };
-        mediaType: {
-            name: string;
-            control: string;
-            options: string[];
-        };
-        image: {
-            name: string;
-            control: string;
-            if: {
-                arg: string;
-                eq: string;
-            };
-        };
-        video: {
-            name: string;
-            control: string;
-            if: {
-                arg: string;
-                eq: string;
-            };
-        };
-        metaText: {
-            name: string;
-            control: string;
-        };
-        metaName: {
-            name: string;
-            control: string;
-        };
-        metaDate: {
-            name: string;
-            control: string;
-        };
-    };
-    let args: {
-        actions: boolean;
-        cardLabel: string;
-        title: string;
-        metaText: string;
-        metaName: string;
-        metaDate: number;
-        mediaType: string;
-        image: string;
-        video: string;
-    };
-}
-export default _default;
-export function CardContent(args: any): React.JSX.Element;
-export function Playground(args: any): React.JSX.Element;
-import React from "react";

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

@@ -1,47 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Playground = exports.CardContent = void 0;
-var react_1 = __importDefault(require("react"));
-var Container_1 = require("../../../../components/Container");
-var Paddings_1 = require("../../../../components/Paddings");
-var WrapperCardGrid_1 = require("../../../../components/Wrappers/WrapperCardGrid");
-var Wrappers_1 = require("../../../../components/Wrappers");
-var CardContent_1 = require("../../../../components/cards/CardContent");
-var cardArgTypes_1 = require("./utils/cardArgTypes");
-var parseCardArgs_1 = require("./utils/parseCardArgs");
-var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
-exports.default = {
-    title: "Components/CardContent",
-    argTypes: __assign(__assign({}, cardArgTypes_1.commonCardArgTypes), cardArgTypes_1.cardContentArgTypes),
-    args: __assign(__assign({}, cardArgTypes_1.commonCardArgs), cardArgTypes_1.cardContentArgs),
-};
-var CardContent = function (args) {
-    var props = (0, parseCardArgs_1.parseCardArgs)(args);
-    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,
-                react_1.default.createElement(CardContent_1.CardContent, __assign({}, props, { config: props.config }))))));
-};
-exports.CardContent = CardContent;
-var Playground = function (args) {
-    var props = (0, parseCardArgs_1.parseCardArgs)(args);
-    return (react_1.default.createElement(Container_1.Container, null,
-        react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
-            react_1.default.createElement(Wrappers_1.Wrapper1500, { left: true },
-                react_1.default.createElement(WrapperCardGrid_1.WrapperCardGrid, null, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(CardContent_1.CardContent, __assign({}, props, { config: props.config }))); }))))));
-};
-exports.Playground = Playground;