oolib 2.162.0 → 2.163.0

package/dist/index.d.ts

@@ -73,6 +73,7 @@ export { default as TableCellResizerPlugin } from "./components/Lexical/Plugins/
 export { TabBarStyle1 as TabBarV2 } from "./v2/components/TabBar";
 export { colors as colors2 } from "./v2/themes";
 export { HintsProvider } from "./v2/components/Hints/contextApi";
+export { DateRangePicker as DateRangePicker2 } from "./v2/components/DateRangePicker";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { TagClear, TagLink, TagSelect } from "./components/Tags";
 export { BannerAlert, BannerInfo } from "./components/Banners";

package/dist/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.HintsProvider = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
+exports.DateRangePicker2 = exports.HintsProvider = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
 var TabBar_1 = require("./v2/components/TabBar");
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
@@ -191,5 +191,7 @@ Object.defineProperty(exports, "colors2", { enumerable: true, get: function () {
 // v2 contexts
 var contextApi_1 = require("./v2/components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
+var DateRangePicker_2 = require("./v2/components/DateRangePicker");
+Object.defineProperty(exports, "DateRangePicker2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
 // V2 new ready components
 // export * from './v2/components/TextInputs';

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

@@ -0,0 +1,43 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export function DateRangePicker_(args: any): import("react").JSX.Element;
+export namespace DateRangePicker_ {
+    namespace argTypes {
+        namespace allowPresentlyOngoing {
+            let name: string;
+        }
+        namespace previousDateOnly {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        namespace futureDateOnly {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace disabled {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace readOnly {
+            let name_4: string;
+            export { name_4 as name };
+        }
+    }
+    namespace args {
+        let previousDateOnly_1: boolean;
+        export { previousDateOnly_1 as previousDateOnly };
+        let futureDateOnly_1: boolean;
+        export { futureDateOnly_1 as futureDateOnly };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let readOnly_1: boolean;
+        export { readOnly_1 as readOnly };
+        let allowPresentlyOngoing_1: boolean;
+        export { allowPresentlyOngoing_1 as allowPresentlyOngoing };
+        export let debug: boolean;
+        export let startDateLabel: string;
+        export let endDateLabel: string;
+    }
+}

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

@@ -0,0 +1,61 @@
+"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.DateRangePicker_ = void 0;
+var react_1 = require("react");
+var DateRangePicker_1 = require("../../../v2/components/DateRangePicker");
+exports.default = {
+    title: 'Oolib V 2.0/components/Date',
+};
+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)
+    };
+    return (React.createElement("div", { style: {
+            width: '45vw',
+            height: '95vh',
+            backgroundColor: args.invert && greyColor100,
+            padding: '1rem',
+        } },
+        React.createElement(DateRangePicker_1.DateRangePicker, __assign({}, args, { id: "my-date-range-picker", value: dateRange, onChange: handleDateRangeChange, label: "Date Range Picker", sublabel: "Calendar pickers default to showing today’s date when opened and only one month is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates." }))));
+};
+exports.DateRangePicker_ = DateRangePicker_;
+exports.DateRangePicker_.argTypes = {
+    allowPresentlyOngoing: {
+        name: 'Allow Presently Ongoing',
+    },
+    previousDateOnly: {
+        name: 'Previous Date Only',
+    },
+    futureDateOnly: {
+        name: 'Future Date Only',
+    },
+    disabled: {
+        name: 'Disabled',
+    },
+    readOnly: {
+        name: 'Read Only',
+    },
+};
+exports.DateRangePicker_.args = {
+    previousDateOnly: false,
+    futureDateOnly: false,
+    disabled: false,
+    readOnly: false,
+    allowPresentlyOngoing: true,
+    debug: false,
+    startDateLabel: "",
+    endDateLabel: "",
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+interface DateRangePickerProps {
+    onChange: (id: string, value: (Date | null)[]) => void;
+    value: (Date | null)[];
+    id: string;
+    readOnly?: boolean;
+    futureDateOnly?: boolean;
+    previousDateOnly?: boolean;
+    allowPresentlyOngoing?: boolean;
+    invert?: boolean;
+    disabled?: boolean;
+    debug?: boolean;
+    startDateLabel?: string;
+    endDateLabel?: string;
+}
+declare function DateRangePicker_(props: DateRangePickerProps): React.JSX.Element;
+export declare const DateRangePicker: React.MemoExoticComponent<typeof DateRangePicker_>;
+export {};

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

@@ -0,0 +1,124 @@
+"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 __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = void 0;
+var react_1 = __importStar(require("react"));
+require("react-datepicker/dist/react-datepicker.css");
+var RadioAndCheckbox_1 = require("../../../components/RadioAndCheckbox");
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../../utils/getBlockLabelProps");
+var Typo2_1 = require("../Typo2");
+var styled_1 = require("./styled");
+var TextInputs_1 = require("../TextInputs");
+var __1 = require("../../..");
+function DateRangePicker_(props) {
+    var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled, debug = props.debug, startDateLabel = props.startDateLabel, endDateLabel = props.endDateLabel;
+    var _a = (0, react_1.useState)(value[0] || null), startDate = _a[0], setStartDate = _a[1];
+    var _b = (0, react_1.useState)(value[1] || null), endDate = _b[0], setEndDate = _b[1];
+    (0, react_1.useEffect)(function () {
+        setStartDate(value[0] || null);
+        setEndDate(value[1] || null);
+    }, [value]);
+    // Get current date at midnight for consistent comparison
+    var currentDate = new Date();
+    currentDate.setHours(0, 0, 0, 0);
+    // Get yesterday's date
+    var yesterday = new Date(currentDate);
+    yesterday.setDate(currentDate.getDate() - 1);
+    var handleOnChange = function (index, date) {
+        var newValue = __spreadArray([], value, true);
+        newValue[index] = date;
+        onChange(id, newValue);
+        if (index === 0) {
+            setStartDate(date);
+            if (date && endDate && date > endDate) {
+                setEndDate(null);
+                newValue[1] = null;
+                onChange(id, newValue);
+            }
+        }
+        else {
+            setEndDate(date);
+        }
+    };
+    // Calculate min and max dates based on restrictions
+    var getMinDate = function (isEndDate) {
+        if (futureDateOnly) {
+            return currentDate;
+        }
+        if (isEndDate && startDate) {
+            return startDate;
+        }
+        return undefined;
+    };
+    var getMaxDate = function () {
+        if (previousDateOnly) {
+            return yesterday;
+        }
+        return undefined;
+    };
+    return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.2rem' } },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(styled_1.StyledDateRangeInputWrapper, { invert: invert, readOnly: readOnly },
+            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
+                react_1.default.createElement(Typo2_1.UI_CAPTION, null, startDateLabel),
+                react_1.default.createElement(styled_1.StyledDatePicker, { className: 'UI_BODY_SM', selected: startDate, onChange: function (date) { return handleOnChange(0, date); }, selectsStart: true, startDate: startDate, endDate: endDate, minDate: getMinDate(false), maxDate: getMaxDate(), readOnly: readOnly, disabled: disabled, dateFormat: "MM/dd/yyyy" })),
+            react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null),
+            react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
+                react_1.default.createElement(Typo2_1.UI_CAPTION, null, endDateLabel),
+                value && value[1] === null ?
+                    react_1.default.createElement("div", { style: { border: "1px solid ".concat(__1.colors2.grey20), padding: '8px 20px', borderRadius: '5px', width: '120px', background: "".concat(__1.colors2.grey5) } },
+                        react_1.default.createElement(TextInputs_1.TextInput, { value: "OnGoing", readOnly: true }))
+                    :
+                        react_1.default.createElement(styled_1.StyledDatePicker, { className: 'UI_BODY_SM', selected: endDate, onChange: function (date) { return handleOnChange(1, date); }, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: getMinDate(true), maxDate: getMaxDate(), readOnly: readOnly, disabled: disabled || (value && value[1] === null), dateFormat: "MM/dd/yyyy" }))),
+        !readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '0.5rem' } },
+            react_1.default.createElement(RadioAndCheckbox_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
+                    ? [{ display: 'Presently Ongoing', value: 'Ongoing' }]
+                    : [], onClick: function (isSelected) {
+                    return handleOnChange(1, isSelected ? undefined : null);
+                }, disabled: disabled || readOnly }))),
+        debug && (react_1.default.createElement("pre", null, JSON.stringify({ startDate: startDate, endDate: endDate, value: value }, null, 2)))));
+}
+exports.DateRangePicker = react_1.default.memo(DateRangePicker_);

package/dist/v2/components/DateRangePicker/styled.d.ts

@@ -0,0 +1,7 @@
+import DatePicker from "react-datepicker";
+export declare const StyledDateRangeInputWrapper: import("styled-components").StyledComponent<"div", any, {
+    invert?: boolean;
+    readOnly?: boolean;
+}, never>;
+export declare const StyledDateRangeInputDivider: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledDatePicker: import("styled-components").StyledComponent<typeof DatePicker, any, {}, never>;

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

@@ -0,0 +1,24 @@
+"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.StyledDatePicker = exports.StyledDateRangeInputDivider = exports.StyledDateRangeInputWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
+var __1 = require("../../..");
+var react_datepicker_1 = __importDefault(require("react-datepicker"));
+exports.StyledDateRangeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* gap: 8px; */\n  ", "\n  ", "\n\n  .react-datepicker{\n    margin-left: 3rem;\n  }\n\n  .react-datepicker__header{\n    font-family: ", ";\n    background-color: ", ";\n    \n    .react-datepicker__current-month{\n      font-family: ", ";    \n      margin-bottom: 0.5rem;\n    }\n  }\n\n  .react-datepicker__month{\n    font-family: ", ";\n    .react-datepicker__day{\n      width: 20px;\n      margin: 0.2rem;\n    }\n  }\n  .react-datepicker__day-name{\n      margin: 0.2rem;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* gap: 8px; */\n  ", "\n  ", "\n\n  .react-datepicker{\n    margin-left: 3rem;\n  }\n\n  .react-datepicker__header{\n    font-family: ", ";\n    background-color: ", ";\n    \n    .react-datepicker__current-month{\n      font-family: ", ";    \n      margin-bottom: 0.5rem;\n    }\n  }\n\n  .react-datepicker__month{\n    font-family: ", ";\n    .react-datepicker__day{\n      width: 20px;\n      margin: 0.2rem;\n    }\n  }\n  .react-datepicker__day-name{\n      margin: 0.2rem;\n  }\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert && "\n    background-color: #333;\n    color: #fff;\n  ";
+}, function (_a) {
+    var readOnly = _a.readOnly;
+    return readOnly && "\n    opacity: 0.7;\n    pointer-events: none;\n  ";
+}, themes_1.typo.UI_CAPTION, __1.colors2.grey10, themes_1.typo.UI_CAPTION, themes_1.typo.UI_CAPTION);
+exports.StyledDateRangeInputDivider = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 1rem;\n"], ["\n  margin: 1rem;\n"])));
+exports.StyledDatePicker = (0, styled_components_1.default)(react_datepicker_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 16px;\n  width: 120px;\n  &:disabled {\n    background-color: #f0f0f0;\n    cursor: not-allowed;\n  }\n"], ["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 16px;\n  width: 120px;\n  &:disabled {\n    background-color: #f0f0f0;\n    cursor: not-allowed;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -70,6 +70,6 @@ var CustomSelectComp = function (_a) {
     return (react_1.default.createElement(index_styled_1.StyledWrapper, null,
         react_1.default.createElement("div", null,
             react_1.default.createElement(Typo2_1.UI_TAG, { style: { color: colors_1.colors.grey40 } }, title),
-            react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, { capitalize: true, style: { color: display ? colors_1.colors.black : colors_1.colors.grey60 } }, display || placeholder)),
+            react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD, { capitalize: true, style: { color: display ? colors_1.colors.black : colors_1.colors.grey60 } }, display || placeholder)),
         react_1.default.createElement(phosphor_react_1.List, { size: 18, weight: "bold" })));
 };

package/dist/v2/components/TabBar/index.styled.js

@@ -75,10 +75,10 @@ exports.tabStyles = {
 };
 exports.TabBarStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"])), white, function (_a) {
     var size = _a.size;
-    return size === 'S' ? '2.5rem' : '3rem';
+    return size === 'S' ? '2.5rem' : 'auto';
 });
 exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
-exports.TabBarRowStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 2px;\n  ", ";\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 2px;\n  ", ";\n  transform: ", ";\n"])), (0, mixins_1.transition)('transform'), function (_a) {
+exports.TabBarRowStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 0.4rem;\n  ", ";\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 0.4rem;\n  ", ";\n  transform: ", ";\n"])), (0, mixins_1.transition)('transform'), function (_a) {
     var translateX = _a.translateX;
     return "translateX(".concat(translateX, "px)");
 });

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

@@ -60,7 +60,7 @@ var ListContent = function (_a) {
             react_1.default.createElement(styled_js_1.StyledListWrapper, null,
                 react_1.default.createElement(styled_js_1.StyledMainSection, null,
                     react_1.default.createElement("div", null,
-                        (cardLabel || statusTag) && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight },
+                        (cardLabel || statusTag) && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight, mediaConfigExists: mediaConfigExists },
                             react_1.default.createElement(CustomTag, { displayText: cardLabel, tagVariant: "primary", bothTagsDisplayTogether: bothTagsDisplayTogether }),
                             react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: statusTagVariant ? statusTagVariant : highlight == "primary" ? "positive" : "warning", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
                         title ? (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 4, noOfLines_D: 3, title: title },

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

@@ -34,9 +34,12 @@ exports.StyledContentModule = styled_components_1.default.div(templateObject_4 |
 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.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: ", "; // 6px gap between highlight and tag\n  margin-bottom: 8px;\n  display: flex;\n  gap: 6px;\n"], ["\n  width: ", "; // 6px gap between highlight and tag\n  margin-bottom: 8px;\n  display: flex;\n  gap: 6px;\n"])), function (_a) {
-    var highlight = _a.highlight;
-    return highlight ? "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)") : "100%";
+exports.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: ", ";\n  margin-bottom: 8px;\n  display: flex;\n  gap: 6px;\n"], ["\n  width: ", ";\n  margin-bottom: 8px;\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
+        return "100%";
 });
 exports.StyledTagWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.162.0",
+  "version": "2.163.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -104,6 +104,7 @@
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",
     "phosphor-react": "^1.4.1",
+    "react-datepicker": "^7.6.0",
     "react-player": "^2.12.0",
     "react-virtualized": "^9.22.5",
     "recharts": "^2.12.7"