oolib 2.63.6 → 2.64.1

package/dist/components/ActionMenu/index.js

@@ -92,7 +92,7 @@ var ActionMenu = function (_a) {
             showActions: showActions,
             fixPos: fixPos
         }),
-            react_1.default.createElement(styled_1.StyledOptionsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
+            react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
                 return (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
                         e.preventDefault();
                         e.stopPropagation();

package/dist/components/ActionMenu/styled.d.ts

@@ -1,5 +1,5 @@
 export const StyledActionMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledActionMenuTracker: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledActionsDropMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledOptionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledActionMenuOpsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledOption: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/components/ActionMenu/styled.js

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledOption = exports.StyledOptionsWrapper = exports.StyledActionsDropMenu = exports.StyledActionMenuTracker = exports.StyledActionMenu = void 0;
+exports.StyledOption = exports.StyledActionMenuOpsWrapper = exports.StyledActionsDropMenu = exports.StyledActionMenuTracker = exports.StyledActionMenu = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
@@ -35,7 +35,7 @@ var globalVariables_1 = require("../../globalStyles/globalVariables");
 var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80;
 var pointerHeight = 10;
 /**
- * we add bottom, left and right margin on the StyledOptionsWrapper
+ * we add bottom, left and right margin on the StyledActionMenuOpsWrapper
  * & increase the width by 20 and height by 10 of StyledActionsDropMenu
  * so that the dropshadow shows (since StyledActionsDropMenu has overflow hidden)
  *
@@ -83,7 +83,7 @@ exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_1
         ? optionsHeight + pointerHeight + offset + "px" || "auto"
         : 0;
 });
-exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  ", "\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"], ["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  ", "\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"])), globalVariables_1.lightboxStyle, offset, function (_a) {
+exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  ", "\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"], ["\n  position: absolute;\n  bottom: 10px;\n  padding: 0.6rem 0;\n  ", "\n  margin: 0 ", "px;\n\n  //pointer outline\n  &::after {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n\n    ", "\n\n    border: 1rem solid transparent;\n    border-bottom: 1rem solid\n      ", ";\n  }\n\n  //pointer fill\n  &::before {\n    content: \"\";\n    width: 0;\n    height: 0;\n    position: absolute;\n    bottom: 100%;\n    ", "\n    border: 0.85rem solid transparent;\n    border-bottom: 0.85rem solid\n      ", ";\n    z-index: 1;\n  }\n"])), globalVariables_1.globalLightboxStyle, offset, function (_a) {
     var align = _a.align;
     return align === "center"
         ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n            left: 50%;\n            transform: translateX(-50%);\n          "], ["\n            left: 50%;\n            transform: translateX(-50%);\n          "]))) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n            ", ": 0.5rem;\n          "], ["\n            ", ": 0.5rem;\n          "])), align);
@@ -98,11 +98,8 @@ exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_18
     var invert = _a.invert;
     return (invert ? greyColor80 : white);
 });
-exports.StyledOption = styled_components_1.default.button(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.button(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"], ["\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  text-align: left;\n  padding: 0.25rem 1.2rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? white : greyColor100);
-}, (0, mixins_1.transition)("background-color"), function (_a) {
-    var invert = _a.invert;
-    return (invert ? greyColor70 : greyColor10);
-});
+}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverBackgroundColor);
 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, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/components/DatePicker/index.js

@@ -36,7 +36,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var BlockLabel_1 = require("../BlockLabel");
-var phosphor_react_1 = require("phosphor-react");
 var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
 var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var Typo_1 = require("../Typo");
@@ -44,7 +43,6 @@ var buildCalenderObj_1 = require("./utils/buildCalenderObj");
 var handlePos_1 = require("./utils/handlePos");
 var themes_1 = require("../../themes");
 var styled_1 = require("./styled");
-var Buttons_1 = require("../Buttons");
 var white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40;
 var months = [
     'January',
@@ -64,7 +62,7 @@ var weeks = ['S', 'M', 'T', 'W', 'Th', 'F', 'Sa'];
 var flag = true;
 function DatePicker(props) {
     var _a, _b, _c;
-    var value = props.value, onParentChange = props.onChange, id = props.id, from = props.from, readOnly = props.readOnly, previousDateOnly = props.previousDateOnly, futureDateOnly = props.futureDateOnly, invert = props.invert, disabled = props.disabled;
+    var value = props.value, onParentChange = props.onChange, id = props.id, from = props.from, readOnly = props.readOnly, previousDateOnly = props.previousDateOnly, futureDateOnly = props.futureDateOnly, invert = props.invert, disabled = props.disabled, debug = props.debug;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var inputRef = (0, react_1.useRef)(null);
     var calenderRef = (0, react_1.useRef)(null);
@@ -204,10 +202,10 @@ function DatePicker(props) {
         setRange(item);
     };
     var wrapCaretLeft = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(styled_1.StyledButtonGhost, { S: true, invert: invert, icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer", color: invert && white } }));
     }, [value, invert]);
     var wrapCaretRight = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(styled_1.StyledButtonGhost, { S: true, invert: invert, icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer", color: invert && white } }));
     }, [value, invert]);
     var getReadOnlyDate = function () {
         var dateObj = new Date(value);
@@ -219,8 +217,10 @@ function DatePicker(props) {
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert },
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, getReadOnlyDate())) : (react_1.default.createElement(styled_1.StyledDateInputWrapper, null,
-                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: 'SANS_3', invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef) }))),
-            react_1.default.createElement(styled_1.StyledCalenderContainer, { ref: calenderRef, className: "calender-container ".concat(from ? 'right-class' : ''), invert: invert },
+                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: 'SANS_3', invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: function () {
+                        (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
+                    } }))),
+            react_1.default.createElement(styled_1.StyledCalenderContainer, { debug: debug, ref: calenderRef, className: "calender-container ".concat(from ? 'right-class' : ''), invert: invert },
                 react_1.default.createElement(styled_1.StyledMonthView, null,
                     react_1.default.createElement(styled_1.StyledHeader, null,
                         wrapCaretLeft(),
@@ -265,7 +265,7 @@ function DatePicker(props) {
                                 }
                             }
                             else {
-                                return react_1.default.createElement("div", { key: i, className: "disabled-date" },
+                                return react_1.default.createElement("div", { key: i, className: "disabled-date", onMouseDown: function (e) { return handleDayClick(e, item); } },
                                     react_1.default.createElement(Typo_1.SANS_3, null, item.getDate()));
                             }
                         }), (_b = calender === null || calender === void 0 ? void 0 : calender.days) === null || _b === void 0 ? void 0 :
@@ -278,7 +278,9 @@ function DatePicker(props) {
                                 }
                                 else if (item > from && item < range) {
                                     // Render days within the selected range
-                                    return (react_1.default.createElement("div", { key: i, className: "range", onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                    return (react_1.default.createElement("div", { key: i, className: "range ".concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
+                                            ? " todaysDate "
+                                            : " "), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                                 else {
@@ -290,10 +292,10 @@ function DatePicker(props) {
                                             ? 'today'
                                             : (previousDateOnly && new Date() < item) ||
                                                 (futureDateOnly && new Date() > item)
-                                                ? 'disabled-date'
-                                                : '', "\n                          ").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth()
+                                                ? ' disabled-date '
+                                                : '', "\n                          ").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
                                             ? " todaysDate "
-                                            : "", "  \n                        "), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
+                                            : " ", "  \n                        "), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
                                         react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                                 }
                             }
@@ -307,9 +309,9 @@ function DatePicker(props) {
                                         ? " today "
                                         : (previousDateOnly && new Date() < item) || (futureDateOnly && new Date() > item)
                                             ? "disabled-date "
-                                            : "").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth()
+                                            : "").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
                                         ? " todaysDate "
-                                        : "", "\n                      ").concat(calender.month === new Date().getMonth() && calender.year === new Date().getFullYear() ||
+                                        : " ", "\n                      ").concat(calender.month === new Date().getMonth() && calender.year === new Date().getFullYear() ||
                                         (calender.month === inputRef.current.value.split("/")[1] - 1 && calender.year === inputRef.current.value.split("/")[2])
                                         ? " selectedToday " : "", "\n                      "), onMouseDown: function (e) { return handleDayClick(e, item); } },
                                     react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
@@ -347,7 +349,7 @@ function DatePicker(props) {
                             }
                             else {
                                 // Render days in the next month as disabled if 'from' is not defined
-                                return (react_1.default.createElement("div", { key: i, className: "disabled-date" },
+                                return (react_1.default.createElement("div", { key: i, className: "disabled-date", onMouseDown: function (e) { return handleDayClick(e, item); } },
                                     react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
                             }
                         })))))));

package/dist/components/DatePicker/styled.d.ts

@@ -8,3 +8,4 @@ export const StyledHeader: import("styled-components").StyledComponent<"div", an
 export const StyledWeekDaysWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledWeekdays: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledButtonGhost: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;

package/dist/components/DatePicker/styled.js

@@ -7,14 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapper = exports.StyledHeader = exports.StyledMonthTitle = exports.StyledMonthView = exports.StyledCalenderContainer = exports.StyledDateInputWrapper = exports.StyledInput = exports.StyledDateInputContainer = void 0;
+exports.StyledButtonGhost = exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapper = exports.StyledHeader = exports.StyledMonthTitle = exports.StyledMonthView = exports.StyledCalenderContainer = exports.StyledDateInputWrapper = exports.StyledInput = exports.StyledDateInputContainer = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
-var mixins_1 = require("../../themes/mixins");
+var Buttons_1 = require("../Buttons");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
 var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100, primaryColor40 = themes_1.colors.primaryColor40;
 exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    width: fit-content;\n\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"], ["\n    position: relative;\n    width: fit-content;\n\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"])));
-exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13rem;\n    height: 4rem;\n    color: ", ";\n    ", "\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"], ["\n    ", "\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13rem;\n    height: 4rem;\n    color: ", ";\n    ", "\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"])), globalVariables_1.inputElemPadding, function (_a) {
+exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13rem;\n    height: 4rem;\n    color: ", ";\n    ", "\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"], ["\n    ", "\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13rem;\n    height: 4rem;\n    color: ", ";\n    ", "\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor80 : greyColor5);
 }, function (_a) {
@@ -22,7 +22,7 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
     return invert
         ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
         : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
-}, globalVariables_1.inputElemHover, function (_a) {
+}, globalVariables_1.globalInputElemHover, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
 }, function (_a) {
@@ -30,17 +30,20 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
     return disabled &&
         "\n        color: ".concat(greyColor40, "\n        background-color: ").concat(greyColor15, ";\n        cursor: not-allowed;\n    ");
 }, greyColor40);
-exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), globalVariables_1.inputElemFocused);
-exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    /* font-family: sans-serif; */\n    position: absolute;\n    width: 30rem;\n    /* height: 319px; */\n    visibility: hidden;\n    z-index: 10000;\n\n    .disabled-date {\n        opacity: 0.5;\n        pointer-events: none;\n    }\n    \n    .range {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .todaysDate {\n        position: relative;\n    }\n    \n    .todaysDate::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .today.todaysDate {\n        color: ", ";\n        background-color: inherit;\n    }\n\n    .today.todaysDate.selectedToday{\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .right-class {\n        right: 0;\n    }\n"], ["\n    ", "\n    /* font-family: sans-serif; */\n    position: absolute;\n    width: 30rem;\n    /* height: 319px; */\n    visibility: hidden;\n    z-index: 10000;\n\n    .disabled-date {\n        opacity: 0.5;\n        pointer-events: none;\n    }\n    \n    .range {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .todaysDate {\n        position: relative;\n    }\n    \n    .todaysDate::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .today.todaysDate {\n        color: ", ";\n        background-color: inherit;\n    }\n\n    .today.todaysDate.selectedToday{\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .right-class {\n        right: 0;\n    }\n"])), globalVariables_1.lightboxStyle, function (_a) {
+exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), globalVariables_1.globalInputElemFocused);
+exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    font-family: sans-serif;\n    position: absolute;\n    width: 30rem;\n    /* height: 350px; */\n    visibility: ", ";\n    z-index: 10000;\n\n    .disabled-date {\n        opacity: 0.5;\n        /* pointer-events: none; */\n    }\n    \n    .range {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today {\n        background-color: ", ";\n        color: ", ";\n    }\n    \n    .todaysDate {\n        position: relative;\n    }\n    \n    .range.todaysDate{\n        position: relative;\n    }\n\n    .range.todaysDate::after{\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n\n    .todaysDate::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .today.todaysDate {\n        /* color: ", "; */\n        background-color: ", ";\n    }\n\n    .today.todaysDate.selectedToday{\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today.todaysDate.selectedToday::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .right-class {\n        right: 0;\n    }\n"], ["\n    ", "\n    font-family: sans-serif;\n    position: absolute;\n    width: 30rem;\n    /* height: 350px; */\n    visibility: ", ";\n    z-index: 10000;\n\n    .disabled-date {\n        opacity: 0.5;\n        /* pointer-events: none; */\n    }\n    \n    .range {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today {\n        background-color: ", ";\n        color: ", ";\n    }\n    \n    .todaysDate {\n        position: relative;\n    }\n    \n    .range.todaysDate{\n        position: relative;\n    }\n\n    .range.todaysDate::after{\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n\n    .todaysDate::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .today.todaysDate {\n        /* color: ", "; */\n        background-color: ", ";\n    }\n\n    .today.todaysDate.selectedToday{\n        background-color: ", ";\n        color: ", ";\n    }\n\n    .today.todaysDate.selectedToday::after {\n        content: '';\n        background-color: ", ";\n        width: .7rem;\n        height: .7rem;\n        position: absolute;\n        border-radius: 50%;\n        bottom: 0.3rem;\n    }\n\n    .right-class {\n        right: 0;\n    }\n"])), globalVariables_1.globalLightboxStyle, function (_a) {
+    var debug = _a.debug;
+    return debug ? '' : 'hidden';
+}, function (_a) {
     var invert = _a.invert;
     return invert ? greyColor3 : primaryColor10;
 }, function (_a) {
     var invert = _a.invert;
     return invert && greyColor80;
-}, primaryColor100, white, primaryColor100, function (_a) {
+}, primaryColor100, white, primaryColor100, primaryColor100, function (_a) {
     var invert = _a.invert;
-    return !invert && greyColor100;
-}, primaryColor100, white);
+    return !invert ? greyColor100 : white;
+}, primaryColor100, primaryColor100, white, white);
 exports.StyledMonthView = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
 exports.StyledMonthTitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    gap: 0.5rem;\n    color: ", ";\n"], ["\n    display: flex;\n    justify-content: center;\n    gap: 0.5rem;\n    color: ", ";\n"])), function (_a) {
     var invert = _a.invert;
@@ -52,7 +55,7 @@ exports.StyledWeekdays = styled_components_1.default.div(templateObject_9 || (te
     var invert = _a.invert;
     return invert && white;
 });
-exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding-bottom: 1rem;\n    div {\n        font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        /* border: ", "; */\n        /* border-top: ", "; */\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s;\n        &:hover:not(.disabled-date) {\n            background-color: ", ";\n            color: ", ";\n            cursor: pointer;\n        }\n      }\n\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding-bottom: 1rem;\n    div {\n        font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        /* border: ", "; */\n        /* border-top: ", "; */\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s;\n        &:hover:not(.disabled-date) {\n            background-color: ", ";\n            color: ", ";\n            cursor: pointer;\n        }\n      }\n\n"])), function (_a) {
+exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding-bottom: 1rem;\n    div {\n        font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        /* border: ", "; */\n        /* border-top: ", "; */\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s;\n        \n        &:hover:not(.today.todaysDate.selectedToday) {\n            ", "\n            cursor: pointer;\n        }\n      }\n\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    padding-bottom: 1rem;\n    div {\n        font-size: 1.4rem;\n        width: calc(280px / 7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 4rem;\n        /* border: ", "; */\n        /* border-top: ", "; */\n        border-bottom: ", ";\n        color: ", ";\n        transition: background-color 0.2s;\n        \n        &:hover:not(.today.todaysDate.selectedToday) {\n            ", "\n            cursor: pointer;\n        }\n      }\n\n"])), function (_a) {
     var invert = _a.invert;
     return !invert ? "6px 0px ".concat(white) : "6px 0px ".concat(greyColor80);
 }, function (_a) {
@@ -64,5 +67,6 @@ exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 ||
 }, function (_a) {
     var invert = _a.invert;
     return invert && white;
-}, primaryColor100, white);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+}, globalVariables_1.globalHoverBackgroundColor);
+exports.StyledButtonGhost = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), globalVariables_1.globalHoverBackgroundColor);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/DateRangePicker/index.js

@@ -32,7 +32,7 @@ var DatePicker_1 = __importDefault(require("../DatePicker"));
 var styled_1 = require("./styled");
 var none = themes_1.colors.none;
 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;
+    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;
     var currentDate = new Date(new Date().toLocaleDateString());
     var handleOnChange = function (i, v) {
         var newValue = value ? __spreadArray([], value, true) : [];
@@ -44,7 +44,7 @@ function DateRangePicker(props) {
         react_1.default.createElement(styled_1.StyledDateRangeInputWrapper, { invert: invert, readOnly: readOnly },
             react_1.default.createElement(DatePicker_1.default, { id: 0, value: value && value[0], onChange: handleOnChange, readOnly: readOnly, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, invert: invert, disabled: disabled }),
             react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null, "-"),
-            react_1.default.createElement(DatePicker_1.default, { id: 1, from: value && value[0] ? new Date(value[0]) : currentDate, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, value: value && (value[1] === null ? 'Ongoing' : value[1]), onChange: handleOnChange, readOnly: readOnly, disabled: value && value[1] === null ? true : disabled ? true : false, invert: invert })),
+            react_1.default.createElement(DatePicker_1.default, { id: 1, from: value && value[0] ? new Date(value[0]) : currentDate, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, value: value && (value[1] === null ? 'Ongoing' : value[1]), onChange: handleOnChange, readOnly: readOnly, disabled: value && value[1] === null ? true : disabled ? true : false, invert: invert, debug: debug })),
         !readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '1rem' } },
             react_1.default.createElement(CheckboxInput_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
                     ? [{ display: 'Presently Ongoing', value: 'Ongoing' }]

package/dist/components/Dropdowns/comps/OptionsShell/index.js

@@ -37,21 +37,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsShell = void 0;
 var framer_motion_1 = require("framer-motion");
 var react_1 = __importStar(require("react"));
-var styled_1 = require("../OptionsSingle/styled");
-var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOverflowHiddenParent");
-var ModalLarge_1 = require("../../../Modals/ModalLarge");
-var mixins_1 = require("../../../../themes/mixins");
 var themes_1 = require("../../../../themes");
-var Buttons_1 = require("../../../Buttons");
+var mixins_1 = require("../../../../themes/mixins");
 var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
-var styled_2 = require("./styled");
+var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOverflowHiddenParent");
+var Buttons_1 = require("../../../Buttons");
+var ModalLarge_1 = require("../../../Modals/ModalLarge");
+var styled_1 = require("./styled");
 exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     var _b;
-    var _c;
-    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _d = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _d === void 0 ? false : _d, relativeToRef = _a.relativeToRef, S = _a.S;
+    var _c, _d, _e, _f, _g;
+    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, relativeToRef = _a.relativeToRef, S = _a.S;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
-    var _e = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _e.fixPos, applyFixedPos = _e.applyFixedPos, removeFixedPos = _e.removeFixedPos, trackerRef = _e.trackerRef;
+    var _j = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _j.fixPos, applyFixedPos = _j.applyFixedPos, removeFixedPos = _j.removeFixedPos, trackerRef = _j.trackerRef;
     (0, react_1.useEffect)(function () {
         if (popOutOfOverflowHiddenParent) {
             if (showOptions)
@@ -62,20 +61,24 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     }, [showOptions]);
     var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
-        popOutOfOverflowHiddenParent &&
-            react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: 'StyledOptionsWrapper', ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
-            // className={className}
-            style: __assign(__assign(__assign({}, (lightboxStyle || {})), { display: showOptions ? "block" : "none" }), (fixPos
-                ? __assign({ position: 'fixed', top: "".concat(fixPos.y - (yOrientation === 'top' ? ((selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0) : 0), "px"), left: "".concat(fixPos.x, "px"), width: "max-content" }, (yOrientation === 'top' ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom" ? { bottom: 0, transform: "translateY(100%)" } : { top: 0, transform: "translateY(-100%)" })))) }, children))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(ModalLarge_1.ModalLarge, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
+        popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
+        react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
+                ? __assign({ position: "fixed", top: "".concat(fixPos.y -
+                        (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
+                    ? { transform: "translateY(-100%)" }
+                    : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
+                ? { bottom: 0, transform: "translateY(100%)" }
+                : { top: 0, transform: "translateY(-100%)" })))) },
+            react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
+                // className={className}
+                style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(ModalLarge_1.ModalLarge, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
         SelectComp && SelectComp,
-        react_1.default.createElement(styled_2.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
-        showDoneButton &&
-            react_1.default.createElement("div", { style: {
-                    backgroundColor: invert ? themes_1.colors.greyColor90 : themes_1.colors.white,
-                    padding: '1rem 2rem',
-                    position: 'sticky',
-                    bottom: '0'
-                } },
-                react_1.default.createElement(Buttons_1.ButtonPrimary, { children: 'Done', width: '100%', onClick: handleHideOptions, S: S })))) : null));
+        react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
+        showDoneButton && (react_1.default.createElement("div", { style: {
+                backgroundColor: invert ? themes_1.colors.greyColor90 : themes_1.colors.white,
+                padding: "1rem 2rem",
+                position: "sticky",
+                bottom: "0",
+            } },
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { children: "Done", width: "100%", onClick: handleHideOptions, S: S }))))) : null));
 });

package/dist/components/Dropdowns/comps/OptionsShell/styled.d.ts

@@ -1 +1,5 @@
+/** for lightbox shell */
+export const StyledOptionsAnimateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledOptionsWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
+/** for modal shell */
 export const StyledModalOptionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Dropdowns/comps/OptionsShell/styled.js

@@ -7,11 +7,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModalOptionsWrapper = void 0;
+exports.StyledModalOptionsWrapper = exports.StyledOptionsWrapper = exports.StyledOptionsAnimateWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../../../themes");
-exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  overflow: auto;\n"], ["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  overflow: auto;\n"])), function (_a) {
+var mixins_1 = require("../../../../themes/mixins");
+var globalVariables_1 = require("../../../../globalStyles/globalVariables");
+/** for lightbox shell */
+exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
+    var isOpen = _a.isOpen, openHeight = _a.openHeight;
+    return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
+}, function (_a) {
+    var width = _a.width;
+    return width + 'px';
+}, (0, mixins_1.transition)('height', 'border-width'), globalVariables_1.globalLightboxStyle, function (_a) {
+    var isOpen = _a.isOpen;
+    return isOpen ? '1px' : 0;
+});
+exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: max-content;\n    max-width: 36rem;\n    overflow: auto;\n    max-height: ", ";\n"], ["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: max-content;\n    max-width: 36rem;\n    overflow: auto;\n    max-height: ", ";\n"
+    /** for modal shell */
+])), function (_a) {
+    var lightboxHeight = _a.lightboxHeight;
+    switch (lightboxHeight) {
+        case 'large':
+            return '33rem';
+        case 'small':
+            return '20rem';
+        case 'medium':
+        default:
+            return '24rem';
+    }
+});
+/** for modal shell */
+exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  overflow: auto;\n"], ["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  overflow: auto;\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
 });
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Dropdowns/comps/OptionsSingle/styled.d.ts

@@ -1,2 +1 @@
-export const StyledOptionsWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export const StyledOption: import("styled-components").StyledComponent<"li", any, {}, never>;

package/dist/components/Dropdowns/comps/OptionsSingle/styled.js

@@ -27,37 +27,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledOption = exports.StyledOptionsWrapper = void 0;
+exports.StyledOption = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../themes");
 var mixins_1 = require("../../../../themes/mixins");
 var utilsOolib_1 = require("../../../../utilsOolib");
 var globalVariables_1 = require("../../../../globalStyles/globalVariables");
-exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    z-index: 100000;\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    ", "\n    border-top-right-radius: 0px;\n    border-top-left-radius: 0px;\n    /* border: 1px solid ", "; */\n    /* border-bottom-right-radius: 2px; */\n    /* border-bottom-left-radius: 2px; */\n    /* background-color: ", "; */\n    /* ", "; */\n    width: 100%;\n    min-width: max-content;\n    min-width: -moz-max-content;\n    max-width: 36rem;\n    overflow: auto;\n    \n    /* border: ", "; */\n    max-height: ", ";\n"], ["\n    z-index: 100000;\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    ", "\n    border-top-right-radius: 0px;\n    border-top-left-radius: 0px;\n    /* border: 1px solid ", "; */\n    /* border-bottom-right-radius: 2px; */\n    /* border-bottom-left-radius: 2px; */\n    /* background-color: ", "; */\n    /* ", "; */\n    width: 100%;\n    min-width: max-content;\n    min-width: -moz-max-content;\n    max-width: 36rem;\n    overflow: auto;\n    \n    /* border: ", "; */\n    max-height: ", ";\n"])), globalVariables_1.lightboxStyle, function (_a) {
-    var invert = _a.invert;
-    return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5);
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
-}, mixins_1.boxShadow1, function (_a) {
-    var invert = _a.invert;
-    return invert && "1px solid ".concat(themes_1.colors.greyColor80);
-}, function (_a) {
-    var lightboxHeight = _a.lightboxHeight;
-    switch (lightboxHeight) {
-        case 'large':
-            return '33rem';
-        case 'small':
-            return '20rem';
-        case 'medium':
-        default:
-            return '24rem';
-    }
-});
-exports.StyledOption = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: 1rem 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: 1rem 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: 1rem 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    ", "\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: 1rem 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    ", "\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 1rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
     var S = _a.S;
     return !S
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n       \n        min-height: 4rem;\n      "], ["\n       \n        min-height: 4rem;\n      "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: 3rem;\n      "], ["\n      height: 3rem;\n      "])));
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n       \n        min-height: 4rem;\n      "], ["\n       \n        min-height: 4rem;\n      "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 3rem;\n      "], ["\n      height: 3rem;\n      "])));
 }, (0, mixins_1.transition)('background-color'), function (_a) {
     var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme, invert = _a.invert;
     return isSelected
@@ -65,8 +44,5 @@ exports.StyledOption = styled_components_1.default.li(templateObject_4 || (templ
         : isFocussed
             ? (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5)
             : (invert ? themes_1.colors.greyColor90 : themes_1.colors.white);
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+}, globalVariables_1.globalHoverBackgroundColor);
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Dropdowns/comps/SelectTagsInput/styled.js

@@ -33,12 +33,12 @@ var themes_1 = require("../../../../themes");
 var mixins_1 = require("../../../../themes/mixins");
 var utilsOolib_1 = require("../../../../utilsOolib");
 var globalVariables_1 = require("../../../../globalStyles/globalVariables");
-exports.StyledTagsSelectTextInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), themes_1.colors.none, globalVariables_1.inputElemPadding, themes_1.colors.greyColor40);
+exports.StyledTagsSelectTextInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), themes_1.colors.none, globalVariables_1.globalInputElemPadding, themes_1.colors.greyColor40);
 exports.StyledSelectTagsInputContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"], ["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
-}, (0, mixins_1.transition)("background-color"), globalVariables_1.inputElemFocused, globalVariables_1.inputElemHover);
+}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalInputElemFocused, globalVariables_1.globalInputElemHover);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Hints/styled.js

@@ -13,7 +13,7 @@ var themes_1 = require("../../themes");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
 var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100;
 exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 1000;\n  background: ", ";\n  position: absolute;\n  width: 30rem;\n  height: 35rem;\n  ", "\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"], ["\n  z-index: 1000;\n  background: ", ";\n  position: absolute;\n  width: 30rem;\n  height: 35rem;\n  ", "\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"])), white, globalVariables_1.lightboxStyle, function (_a) {
+exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 1000;\n  background: ", ";\n  position: absolute;\n  width: 30rem;\n  height: 35rem;\n  ", "\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"], ["\n  z-index: 1000;\n  background: ", ";\n  position: absolute;\n  width: 30rem;\n  height: 35rem;\n  ", "\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"])), white, globalVariables_1.globalLightboxStyle, function (_a) {
     var style = _a.style;
     return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : "-1rem");
 }, function (_a) {

package/dist/components/TextInputs/index.styled.js

@@ -43,7 +43,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_9
         case 'icon+text':
             return (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          padding: 0 2rem 0 1.5rem;\n        "], ["\n          padding: 0 2rem 0 1.5rem;\n        "])));
         default:
-            return (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), globalVariables_1.inputElemPadding);
+            return (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), globalVariables_1.globalInputElemPadding);
     }
 }, function (_a) {
     var eyeIcon = _a.eyeIcon;
@@ -54,7 +54,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_9
 }, function (_a) {
     var invert = _a.invert;
     return (invert ? white : greyColor100);
-}, (0, mixins_1.transition)('background-color'), globalVariables_1.inputElemHover, globalVariables_1.inputElemFocused, function (_a) {
+}, (0, mixins_1.transition)('background-color'), globalVariables_1.globalInputElemHover, globalVariables_1.globalInputElemFocused, function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_2.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background-color: ", ";\n      pointer-events: none;\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      pointer-events: none;\n      color: ", ";\n    "])), greyColor15, greyColor40);
 }, function (_a) {

package/dist/components/VideoInput/index.js

@@ -48,6 +48,7 @@ var Typo_1 = require("../Typo");
 var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
 var ActionMenu_1 = require("../ActionMenu");
 var themes_1 = require("../../themes");
+var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
 var VideoInput = function (_a) {
     var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
     width = _a.width, height = _a.height;
@@ -87,8 +88,9 @@ var VideoInput = function (_a) {
         }
     }
     else {
-        upload = uploadVideoToLocalStorage;
-        isLoading = "uploading";
+        var fakeUploadMedia = (0, useFakeUploadMedia_1.useFakeUploadMedia)({ handleUploadProgess: handleUploadProgess });
+        upload = fakeUploadMedia.mutate;
+        isLoading = fakeUploadMedia.isLoading;
     }
     var handleUpload = function (files) {
         // onChange(id, undefined) //so that the prev video is cleared and loader shows up

package/dist/components/cards/CardEmbed/index.d.ts

@@ -0,0 +1,10 @@
+export function CardEmbed({ id, data, config, to, onClick, openInNewTab, disabled, }: {
+    id: any;
+    data: any;
+    config: any;
+    to: any;
+    onClick: any;
+    openInNewTab: any;
+    disabled: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/cards/CardEmbed/index.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardEmbed = void 0;
+var react_1 = __importDefault(require("react"));
+var injectHttps_1 = require("../../../utils/injectHttps");
+var ImageInput_1 = require("../../ImageInput");
+var styled_components_1 = require("styled-components");
+var CardMetaBlock_1 = __importDefault(require("../comps/CardMetaBlock"));
+var styled_1 = require("../styled");
+var styled_2 = require("./styled");
+var utilsOolib_1 = require("../../../utilsOolib");
+var Typo_1 = require("../../Typo");
+var VideoInput_1 = __importDefault(require("../../VideoInput"));
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+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 CardPlaceholder_1 = require("../comps/CardPlaceholder");
+// const ErrorEmbedComp = ({ to }) => {
+//   return (
+//     <ErrorCardEmbedWrapper>
+//       <StyledEmbedCardWrapper>
+//         <StyledContentModule1 error={true}>
+//           <PaddingTopBottom20>
+//             {to && <StyledCardEmbedLink>{to}</StyledCardEmbedLink>}
+//           </PaddingTopBottom20>
+//         </StyledContentModule1>
+//       </StyledEmbedCardWrapper>
+//     </ErrorCardEmbedWrapper>
+//   );
+// };
+var CardEmbed = function (_a) {
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, 
+    // status, //i dont think this should exist in this manner
+    disabled = _a.disabled;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
+    var _b = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax,
+        localize: localize,
+    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
+    var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
+    if (dontRenderRes)
+        return dontRenderRes;
+    var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
+        to: to,
+        openInNewTab: openInNewTab,
+    }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
+    var mediaConfigExists = config.video || config.image;
+    // if (status === "error") return <ErrorEmbedComp to={to} />;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement(styled_2.StyledEmbedCardWrapper, { id: id, disabled: disabled, onClick: onClick },
+            react_1.default.createElement(styled_2.StyledContentModule1, null,
+                cardLabel && (react_1.default.createElement("div", { style: { paddingBottom: "0.7rem" }, title: cardLabel },
+                    react_1.default.createElement(styled_1.StyledLabel, { disabled: disabled, color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
+                title && (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 1, noOfLines_D: 2, title: title },
+                    react_1.default.createElement(styled_1.StyledTitle, { disabled: disabled, as: Typo_1.SERIF_3_4, capitalize: true, className: "StyledTitle" },
+                        react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title)))),
+                (metaBlockData || (externalUrl && to)) && (react_1.default.createElement("div", { style: { paddingTop: "1.7rem" } }, metaBlockData ? (react_1.default.createElement(CardMetaBlock_1.default, { disabled: disabled, value: metaBlockData })) : (externalUrl &&
+                    to && react_1.default.createElement(styled_2.StyledCardEmbedLink, null, to))))),
+            mediaConfigExists && (react_1.default.createElement(styled_2.StyledContentModule2, { disabled: disabled },
+                !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledCardEmbedPlaceholderWrapper, null,
+                    react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: {
+                            position: "absolute",
+                            left: "50%",
+                            transform: "translateX(-50%)",
+                            height: "100%",
+                            width: "auto",
+                        } }))),
+                (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
+                    react_1.default.createElement("div", { style: {
+                            position: "relative",
+                            height: "100%",
+                            width: "23rem" /** arbitrary num just to get a typical youtube video to fit properly within the mask */,
+                        } },
+                        react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
+                        react_1.default.createElement("div", { style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: "100%",
+                            } })))),
+                (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
+                    react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))))));
+};
+exports.CardEmbed = CardEmbed;

package/dist/components/cards/CardEmbed/styled.d.ts

@@ -0,0 +1,10 @@
+export const ErrorCardEmbedWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledEmbedCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledContentModule1: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCardEmbedAction: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCardEmbedLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMetaBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCardEmbedLink: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const StyledCardEmbedPlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/cards/CardEmbed/styled.js

@@ -0,0 +1,62 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledMediaContainer = exports.StyledCardEmbedPlaceholderWrapper = exports.StyledCardEmbedLink = exports.StyledMetaBlock = exports.StyledCardEmbedLabel = exports.StyledCardEmbedAction = exports.StyledContentModule2 = exports.StyledContentModule1 = exports.StyledEmbedCardWrapper = exports.ErrorCardEmbedWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../themes");
+var mixins_1 = require("../../../themes/mixins");
+var Typo_1 = require("../../Typo");
+var styled_1 = require("../styled");
+var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10;
+exports.ErrorCardEmbedWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n"], ["\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n"])));
+exports.StyledEmbedCardWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  cursor: pointer;\n  position: relative;\n  background-color: ", ";\n  justify-content: space-between;\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n  ", ";\n  min-height: 10rem;\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      ", ";\n    }\n  }\n"], ["\n  display: flex;\n  cursor: pointer;\n  position: relative;\n  background-color: ", ";\n  justify-content: space-between;\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n  ", ";\n  min-height: 10rem;\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      ", ";\n    }\n  }\n"])), white, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? themes_1.colors.greyColor3 : greyColor5);
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && themes_1.colors.greyColor3;
+}, (0, mixins_1.transition)("background-color"), greyColor5, function (_a) {
+    var disabled = _a.disabled;
+    return !disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          ", ";\n          #CardPlaceholder {\n            opacity: 1;\n          }\n        "], ["\n          ", ";\n          #CardPlaceholder {\n            opacity: 1;\n          }\n        "])), styled_1.CSSTitleAnimationOnHover);
+});
+exports.StyledContentModule1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  /* align-items: center; */\n  flex-direction: column;\n  padding: 2rem;\n  max-width: 80%;\n  /* border-right: ", " */\n"], ["\n  display: flex;\n  /* align-items: center; */\n  flex-direction: column;\n  padding: 2rem;\n  max-width: 80%;\n  /* border-right: ", " */\n"])), function (_a) {
+    var error = _a.error;
+    return !error ? "2px solid  ".concat(greyColor10) : "none";
+});
+exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 0; // IMP: hack to get this div to not bleed out of parent flex container\n  width: 10rem;\n  opacity: ", ";\n"], ["\n  min-width: 0; // IMP: hack to get this div to not bleed out of parent flex container\n  width: 10rem;\n  opacity: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 0.4 : 1);
+});
+exports.StyledCardEmbedAction = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+exports.StyledCardEmbedLabel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-bottom: 0.5rem;\n"], ["\n  padding-bottom: 0.5rem;\n"])));
+exports.StyledMetaBlock = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
+exports.StyledCardEmbedLink = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n  align-self: flex-start;\n  ", "\n  color: ", ";\n"], ["\n  width: 100%;\n  align-self: flex-start;\n  ", "\n  color: ", ";\n"])), (0, mixins_1.clampText)(1), themes_1.colors.greyColor80);
+exports.StyledCardEmbedPlaceholderWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n  position: relative;\n"], ["\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n  position: relative;\n"])));
+exports.StyledMediaContainer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  text-align: center;\n  background-color: ", ";\n"], ["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  text-align: center;\n  background-color: ", ";\n"])), greyColor5);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListContent = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = require("styled-components");
-var icons_1 = require("../../../icons");
-var themes_1 = require("../../../themes");
 var injectHttps_1 = require("../../../utils/injectHttps");
 var utilsOolib_1 = require("../../../utilsOolib");
 var ActionMenu_1 = require("../../ActionMenu");
@@ -23,14 +21,17 @@ var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAn
 var mediaDataExists_1 = require("../utils/mediaDataExists");
 var parseCardConfig_1 = require("../utils/parseCardConfig");
 var styled_js_1 = require("./styled.js");
-var greyColor100 = themes_1.colors.greyColor100, greyColor40 = themes_1.colors.greyColor40, greyColor15 = themes_1.colors.greyColor15;
-var ArrowLineUpRight = icons_1.icons.ArrowLineUpRight;
 var ListContent = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
-    var _b = (0, parseCardConfig_1.parseCardConfig)({ config: config, data: data, parseSpecialSyntax: parseSpecialSyntax, localize: localize }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
+    var _b = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax,
+        localize: localize,
+    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlockData = _b.metaBlockData;
     var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
     if (dontRenderRes)
         return dontRenderRes;
@@ -45,7 +46,7 @@ var ListContent = function (_a) {
                 react_1.default.createElement(styled_js_1.StyledHeader, null,
                     react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, null,
                         cardLabel && (react_1.default.createElement("div", { title: cardLabel },
-                            react_1.default.createElement(styled_js_1.StyledLabel, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
+                            react_1.default.createElement(styled_1.StyledLabel, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
                         statusTag && (react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", XS: true, display: statusTag }))),
                     title ? (react_1.default.createElement("div", { style: {
                             paddingBottom: "1rem",
@@ -55,26 +56,30 @@ var ListContent = function (_a) {
                         react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, 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" }, title))))) : null,
-                    react_1.default.createElement("div", { style: { width: '100%' } }, (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData.slice(0, 3) }) // show only three metas for listContent
-                    ))),
-                mediaConfigExists &&
-                    react_1.default.createElement(styled_js_1.StyledContentModule2, null,
-                        !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
-                            react_1.default.createElement(styled_js_1.StyledMediaMask, null,
-                                react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: '100%', width: 'auto' } })),
-                        (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
-                            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("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } })))),
-                        (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
-                        // <div
-                        //   // style={{
-                        //   //   width: "14rem",
-                        //   // }}
-                        // >
-                        react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
-                        // </div>
-                        )),
-                        actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" }))))));
+                    (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%" } },
+                        react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData })))),
+                mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
+                    !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
+                        react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
+                    (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
+                        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("div", { style: {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    width: "100%",
+                                    height: "100%",
+                                } })))),
+                    (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
+                    // <div
+                    //   // style={{
+                    //   //   width: "14rem",
+                    //   // }}
+                    // >
+                    react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
+                    // </div>
+                    )),
+                    actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" })))))));
 };
 exports.ListContent = ListContent;

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

@@ -1,7 +1,6 @@
 export const StyledListElemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledStatusTagCardLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledLabel: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
 export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledMediaMask: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledVideoWrapper = exports.StyledMediaMask = exports.StyledContentModule2 = exports.StyledListWrapper = exports.StyledLabel = exports.StyledHeader = exports.StyledStatusTagCardLabelWrapper = exports.StyledListElemContainer = void 0;
+exports.StyledVideoWrapper = exports.StyledMediaMask = exports.StyledContentModule2 = exports.StyledListWrapper = exports.StyledHeader = exports.StyledStatusTagCardLabelWrapper = exports.StyledListElemContainer = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../../themes");
 var mixins_1 = require("../../../themes/mixins");
@@ -16,21 +16,18 @@ var styled_1 = require("../styled");
 exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
 exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"])));
 exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"])));
-exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n"], ["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n"
-    /** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
-])), mixins_1.ellipsis, (0, mixins_1.mediaQuery)("sm"));
 /** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
 var mediaPadding = 20;
 var mediaContainerWidth = 70;
 var mediaContainerWidth_SM = 60;
-exports.StyledListWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: auto;\n  padding-right: ", ";\n  position: relative;\n  ", " {\n    padding-right: ", ";\n  }\n"], ["\n  width: auto;\n  padding-right: ", ";\n  position: relative;\n  ", " {\n    padding-right: ", ";\n  }\n"])), function (_a) {
+exports.StyledListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: auto;\n  padding-right: ", ";\n  position: relative;\n  ", " {\n    padding-right: ", ";\n  }\n"], ["\n  width: auto;\n  padding-right: ", ";\n  position: relative;\n  ", " {\n    padding-right: ", ";\n  }\n"])), function (_a) {
     var mediaConfigExists = _a.mediaConfigExists;
     return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth, "px");
 }, (0, mixins_1.mediaQuery)("sm"), function (_a) {
     var mediaConfigExists = _a.mediaConfigExists;
     return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth_SM, "px");
 });
-exports.StyledContentModule2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translateY(0);\n  justify-content: center;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 ", "px;\n  row-gap: 1rem;\n  column-gap: 0;\n  flex-direction: column-reverse;\n  ", " {\n    top: 50%;\n    transform: translateY(-50%);  \n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translateY(0);\n  justify-content: center;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 ", "px;\n  row-gap: 1rem;\n  column-gap: 0;\n  flex-direction: column-reverse;\n  ", " {\n    top: 50%;\n    transform: translateY(-50%);  \n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"])), mediaPadding, (0, mixins_1.mediaQuery)("sm"));
-exports.StyledMediaMask = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", "px;\n  height: 84px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  flex-wrap: wrap;\n  ", " {\n    width: ", "px;\n    height: 6rem;\n  }\n"], ["\n  width: ", "px;\n  height: 84px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  flex-wrap: wrap;\n  ", " {\n    width: ", "px;\n    height: 6rem;\n  }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
-exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 14rem;\n  height: 8.4rem;\n  ", " {\n    height: 6rem;\n  }\n"], ["\n  width: 14rem;\n  height: 8.4rem;\n  ", " {\n    height: 6rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: center;\n  align-items: flex-end;\n  position: absolute;\n  row-gap: 1rem;\n  column-gap: 0;\n  right: 0;\n  top: 0;\n  transform: translateY(0);\n  padding: 0 ", "px;\n  ", " {\n    top: 50%;\n    transform: translateY(-50%);  \n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"], ["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: center;\n  align-items: flex-end;\n  position: absolute;\n  row-gap: 1rem;\n  column-gap: 0;\n  right: 0;\n  top: 0;\n  transform: translateY(0);\n  padding: 0 ", "px;\n  ", " {\n    top: 50%;\n    transform: translateY(-50%);  \n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"])), mediaPadding, (0, mixins_1.mediaQuery)("sm"));
+exports.StyledMediaMask = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  height: 84px;\n  width: ", "px;\n  ", " {\n    width: ", "px;\n    height: 6rem;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  height: 84px;\n  width: ", "px;\n  ", " {\n    width: ", "px;\n    height: 6rem;\n  }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
+exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 14rem;\n  height: 8.4rem;\n  ", " {\n    height: 6rem;\n  }\n"], ["\n  width: 14rem;\n  height: 8.4rem;\n  ", " {\n    height: 6rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/cards/comps/CardMetaBlock/index.d.ts

@@ -1,5 +1,6 @@
 export default CardMetaBlock;
-declare function CardMetaBlock({ value }: {
+declare function CardMetaBlock({ value, disabled }: {
     value: any;
+    disabled: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/cards/comps/CardMetaBlock/index.js

@@ -38,14 +38,20 @@ var mixins_1 = require("../../../../themes/mixins");
 var greyColor100 = themes_1.colors.greyColor100;
 var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n"])));
 var StyledMetaWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex; \n  align-items: center;\n  max-width: 50%;\n"], ["\n  display: flex; \n  align-items: center;\n  max-width: 50%;\n"])));
-var STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
-var StyledSeparator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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"])), greyColor100);
+var STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n"], ["\n  ", "\n  color: ", ";\n"])), mixins_1.ellipsis, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
+});
+var StyledSeparator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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"])), function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
+});
 var CardMetaBlock = function (_a) {
-    var value = _a.value;
+    var value = _a.value, disabled = _a.disabled;
     return (react_1.default.createElement(StyledContainer, null, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(StyledMetaWrapper, { key: i },
-            react_1.default.createElement(STYLED_SANS_2, { capitalize: true }, v)),
-        i + 1 === value.length ? null : react_1.default.createElement(StyledSeparator, null))); })));
+            react_1.default.createElement(STYLED_SANS_2, { disabled: disabled, capitalize: true }, v)),
+        i + 1 === value.length ? null : react_1.default.createElement(StyledSeparator, { disabled: disabled }))); })));
 };
 exports.default = CardMetaBlock;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,3 +1,6 @@
+/** -- this bit is common for ListContent and CardEmbed */
+export const StyledLabel: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+/** -- END this bit is common for ListContent and CardEmbed */
 /** --- this bit handles the entire title underline hover animation --- */
 export const StyledTitle: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
 export const StyledTitleSpan: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/components/cards/styled.js

@@ -27,21 +27,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CSSTitleAnimationOnHover = exports.StyledTitleSpan = exports.StyledTitle = void 0;
+exports.CSSTitleAnimationOnHover = exports.StyledTitleSpan = exports.StyledTitle = exports.StyledLabel = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
 var Typo_1 = require("../Typo");
 var utilsOolib_1 = require("../../utilsOolib");
+var themes_1 = require("../../themes");
+/** -- this bit is common for ListContent and CardEmbed */
+exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n  \n  ", " \n"], ["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n  \n  ", " \n"
+    /** -- END this bit is common for ListContent and CardEmbed */
+    /** --- this bit handles the entire title underline hover animation --- */
+])), mixins_1.ellipsis, (0, mixins_1.mediaQuery)("sm"), function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  "], ["\n  color: ", ";\n  "])), themes_1.colors.greyColor40);
+});
+/** -- END this bit is common for ListContent and CardEmbed */
 /** --- this bit handles the entire title underline hover animation --- */
-exports.StyledTitle = (0, styled_components_1.default)(Typo_1.SERIF_4_5)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), (0, mixins_1.transition)("color"));
-exports.StyledTitleSpan = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
+exports.StyledTitle = (0, styled_components_1.default)(Typo_1.SERIF_4_5)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n"], ["\n  ", ";\n  color: ", ";\n"])), (0, mixins_1.transition)("color"), function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
+});
+exports.StyledTitleSpan = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return (0, mixins_1.multilineUnderline)({
         color: (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors),
         thickness: '2px',
     }).init;
 }, (0, mixins_1.transition)("background-size 0.5s"));
-exports.CSSTitleAnimationOnHover = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n.StyledTitle {\n      color: ", ";\n    }\n\n    .StyledTitleSpan {\n      //animate the underline created by the mixin : underlineForAnimation\n      ", "\n    }\n"], ["\n.StyledTitle {\n      color: ", ";\n    }\n\n    .StyledTitleSpan {\n      //animate the underline created by the mixin : underlineForAnimation\n      ", "\n    }\n"
+exports.CSSTitleAnimationOnHover = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n.StyledTitle {\n      color: ", ";\n    }\n\n    .StyledTitleSpan {\n      //animate the underline created by the mixin : underlineForAnimation\n      ", "\n    }\n"], ["\n.StyledTitle {\n      color: ", ";\n    }\n\n    .StyledTitleSpan {\n      //animate the underline created by the mixin : underlineForAnimation\n      ", "\n    }\n"
     /** --- END this bit handles the entire title underline hover animation --- */ ])), function (_a) {
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors);
@@ -52,5 +65,5 @@ exports.CSSTitleAnimationOnHover = (0, styled_components_1.css)(templateObject_3
         thickness: "2px",
     }).hovered;
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 /** --- END this bit handles the entire title underline hover animation --- */ 

package/dist/globalStyles/globalVariables.d.ts

@@ -1,4 +1,5 @@
-export const inputElemPadding: import("styled-components").FlattenSimpleInterpolation;
-export const inputElemHover: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export const inputElemFocused: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export const lightboxStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export const globalInputElemPadding: import("styled-components").FlattenSimpleInterpolation;
+export const globalInputElemHover: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export const globalInputElemFocused: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export const globalLightboxStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export const globalHoverBackgroundColor: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/dist/globalStyles/globalVariables.js

@@ -4,17 +4,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.lightboxStyle = exports.inputElemFocused = exports.inputElemHover = exports.inputElemPadding = void 0;
+exports.globalHoverBackgroundColor = exports.globalLightboxStyle = exports.globalInputElemFocused = exports.globalInputElemHover = exports.globalInputElemPadding = void 0;
 var styled_components_1 = require("styled-components");
 var themes_1 = require("../themes");
 var mixins_1 = require("../themes/mixins");
 // Text Input global style variables
-exports.inputElemPadding = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 2rem;\n"], ["\n  padding: 0 2rem;\n"])));
-exports.inputElemHover = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+exports.globalInputElemPadding = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 2rem;\n"], ["\n  padding: 0 2rem;\n"])));
+exports.globalInputElemHover = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
 });
-exports.inputElemFocused = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    box-shadow: inset 0px -2px 0px ", ";\n    ", "\n  }\n  &:focus-within {\n    background-color: ", ";\n    ::after {\n      width: 100%;\n    }\n  } \n"], ["\n    &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    box-shadow: inset 0px -2px 0px ", ";\n    ", "\n  }\n  &:focus-within {\n    background-color: ", ";\n    ::after {\n      width: 100%;\n    }\n  } \n"])), function (_a) {
+exports.globalInputElemFocused = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    box-shadow: inset 0px -2px 0px ", ";\n    ", "\n  }\n  &:focus-within {\n    background-color: ", ";\n    ::after {\n      width: 100%;\n    }\n  } \n"], ["\n    &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    box-shadow: inset 0px -2px 0px ", ";\n    ", "\n  }\n  &:focus-within {\n    background-color: ", ";\n    ::after {\n      width: 100%;\n    }\n  } \n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? themes_1.colors.primaryColor40 : themes_1.colors.primaryColor100);
 }, (0, mixins_1.transition)('width'), function (_a) {
@@ -22,11 +22,18 @@ exports.inputElemFocused = (0, styled_components_1.css)(templateObject_3 || (tem
     return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10);
 });
 // Lghtbox style used for DatePicker, Dropdowns, hints and ActionMenu
-exports.lightboxStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n"], ["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n"])), function (_a) {
+exports.globalLightboxStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px ", ";\n"], ["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px ", ";\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5);
 }, function (_a) {
     var invert = _a.invert;
     return (invert ? themes_1.colors.greyColor80 : themes_1.colors.white);
+}, themes_1.colors.black_opacity05);
+exports.globalHoverBackgroundColor = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.white : themes_1.colors.greyColor100;
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export { BarChart } from "./components/dataViz/comps/BarChart";
 export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
 export { CardContent } from "./components/cards/CardContent";
 export { ListContent } from "./components/cards/ListContent";
+export { CardEmbed } from "./components/cards/CardEmbed";
 export { DropdownSingle } from "./components/Dropdowns/DropdownSingle";
 export { DropdownMulti } from "./components/Dropdowns/DropdownMulti";
 export { OptionsSingle } from "./components/Dropdowns/comps/OptionsSingle";
@@ -46,5 +47,6 @@ export { generateOptions } from "./components/Dropdowns/utils/generateOptions";
 export { genTagComp } from "./components/Dropdowns/utils/genTagComp";
 export { HintsProvider } from "./components/Hints/contextApi";
 export { ImageInput } from "./components/ImageInput";
+export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
 export { default as VideoInput } from "./components/VideoInput";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoInput = exports.ImageInput = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = 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.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = 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;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -92,6 +92,8 @@ var CardContent_1 = require("./components/cards/CardContent");
 Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return CardContent_1.CardContent; } });
 var ListContent_1 = require("./components/cards/ListContent");
 Object.defineProperty(exports, "ListContent", { enumerable: true, get: function () { return ListContent_1.ListContent; } });
+var CardEmbed_1 = require("./components/cards/CardEmbed");
+Object.defineProperty(exports, "CardEmbed", { enumerable: true, get: function () { return CardEmbed_1.CardEmbed; } });
 //dropdowns & options
 var DropdownSingle_1 = require("./components/Dropdowns/DropdownSingle");
 Object.defineProperty(exports, "DropdownSingle", { enumerable: true, get: function () { return DropdownSingle_1.DropdownSingle; } });
@@ -114,5 +116,7 @@ __exportStar(require("./utils/_EXPORTS"), exports);
 //template blocks
 var ImageInput_1 = require("./components/ImageInput");
 Object.defineProperty(exports, "ImageInput", { enumerable: true, get: function () { return ImageInput_1.ImageInput; } });
+var ProfileImageInput_1 = require("./components/ImageInput/derivedComps/ProfileImageInput");
+Object.defineProperty(exports, "ProfileImageInput", { enumerable: true, get: function () { return ProfileImageInput_1.ProfileImageInput; } });
 var VideoInput_1 = require("./components/VideoInput");
 Object.defineProperty(exports, "VideoInput", { enumerable: true, get: function () { return __importDefault(VideoInput_1).default; } });

package/package.json

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