oolib 2.154.0 → 2.155.0

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

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

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

@@ -1,144 +1,76 @@
-// import React from "react";
-// import { useTheme } from "styled-components";
-// import { injectHttps } from "../../../utils/injectHttps";
-// import { getPrimaryColorText, useLocale } from "../../../utilsOolib";
-// import { ActionMenu } from "../../ActionMenu";
-// import { LABEL } from "../../Typo";
-// import VideoInput from "../../VideoInput";
-// import MetaBlock from "../../MetaBlock";
-// import { LineClampWrapper } from "../comps/LineClampWrapper";
-// import { StyledTitle, StyledTitleSpan } from "../styled";
-// import { decideLinkCompAndTarget } from "../utils/decideLinkCompAndTarget";
-// import { dontRenderIfBothOnClickAndTo } from "../utils/dontRenderIfBothOnClickAndTo";
-// import { parseCardConfig } from "../utils/parseCardConfig";
-// import {imageDataExists, videoDataExists} from '../utils/mediaDataExists'
-// import {
-//   StyledCardWrapper,
-//   StyledContainer1,
-//   StyledCrown,
-//   StyledCrownWrapper,
-//   StyledEmbedSection,
-//   StyledUpperSection,
-// } from "./styled";
-// import {CardPlaceholder} from '../comps/CardPlaceholder'
-// import { ImageInput } from "../../ImageInput";
-// import { icons } from "../../../icons"
-// import { TagDisplay, TagLink } from "../../Tags";
-// const { CrownSimple } = icons;
-// export const CardContent = ({
-//   id,
-//   data,
-//   config,
-//   to,
-//   onClick,
-//   openInNewTab,
-//   actions,
-//   highlight
-// }) => {
-//   const theme = useTheme();
-//   const localize = useLocale();
-//   const { parseSpecialSyntax } = theme || {};
-//   const showEmbedSection = !!(config?.image || config?.video);
-//   const { cardLabel, title, video, image, metaBlock, tagDisplay } =
-//     parseCardConfig({
-//       config,
-//       data,
-//       parseSpecialSyntax
-//     });
-//     let dontRenderRes = dontRenderIfBothOnClickAndTo({onClick, to});
-//     if(dontRenderRes) return dontRenderRes
-//   const {LinkComp, target, externalUrl } = decideLinkCompAndTarget({to, openInNewTab})
-//   return (
-//     <LinkComp
-//       target={target}
-//       href={injectHttps(to)}
-//       to={to}
-//     >
-//       <StyledCardWrapper 
-//         id={id} 
-//         highlight={highlight}
-//         onClick={onClick ? e => onClick(e,data) : undefined} 
-//         /** imp to pass data cuz its used by some on okf eg. LinkOrEmbedModal*/
-//         >
-//           {highlight && <StyledCrownWrapper>
-//             <StyledCrown>
-//               <CrownSimple size={24}/>
-//             </StyledCrown>
-//           </StyledCrownWrapper>}
-//         <StyledUpperSection highlight={highlight}>
-//           <StyledContainer1>
-//             {cardLabel ? (
-//               <div
-//                 title={cardLabel}
-//                 style={{
-//                   display: "flex",
-//                   gap: "2rem",
-//                   justifyContent: "space-between",
-//                 }}
-//               >
-//                 <LABEL
-//                   style={{
-//                     textOverflow: "ellipsis",
-//                     overflow: "hidden",
-//                     whiteSpace: "nowrap",
-//                   }}
-//                   color={getPrimaryColorText(theme?.colors)}
-//                 >
-//                   {cardLabel}
-//                 </LABEL>
-//                 <div style={{ marginTop: "-1rem", marginRight: "-1rem" }}>
-//                   {actions && <ActionMenu actions={actions} />}
-//                 </div>
-//               </div>
-//             ) : null}
-//             {title ? (
-//               <div style={{ display: "flex", alignItems: "end", gap: ".5rem" }}>
-//                 {" "}
-//                 <LineClampWrapper noOfLines_M={6} title={title}>
-//                   <StyledTitle capitalize className="StyledTitle">
-//                       <StyledTitleSpan className="StyledTitleSpan">
-//                         {localize(title)}
-//                       </StyledTitleSpan>
-//                   </StyledTitle>
-//                 </LineClampWrapper>
-//               </div>
-//             ) : null}
-//           </StyledContainer1>
-//           {/* {((Array.isArray(tagDisplay?.data) && tagDisplay?.data?.length > 0) || typeof tagDisplay ===  "string") && <TagDisplay display={Array.isArray(tagDisplay?.data) ? tagDisplay?.data[0]?.display : tagDisplay} to={tagDisplay?.collectionId ? `/published-page/${tagDisplay?.collectionId}?id=${tagDisplay?.data[0]?._id}` : "#"} color="green"/>} */}
-//           {tagDisplay && <TagDisplay display={tagDisplay} color="green"/>} 
-//           {metaBlock?.length > 0 ? (
-//             <MetaBlock data={data} config={metaBlock} /> //show only two meta for cardContent
-//           ) : null}
-//         </StyledUpperSection>
-//         {showEmbedSection && (
-//           <StyledEmbedSection>
-//             {!imageDataExists(image) && !videoDataExists(video) &&
-//               <CardPlaceholder/>
-//             }
-//             {imageDataExists(image) && (
-//               <div style={{ width: "100%" }}>
-//                 {
-//                   <ImageInput
-//                     value={image}
-//                     aspectRatio={"5/3"}
-//                     readOnly={true}
-//                     defaultImageSpread={"cover"} //meaning if a spread is not defined in image data, it will fallback to this.
-//                     enableCaptions={false}
-//                     disableImageBorder={true}
-//                   />
-//                 }
-//               </div>
-//             )}
-//             {videoDataExists(video) && !imageDataExists(image) ? (
-//               <div style={{ width: "100%", position: 'relative' }}>
-//                 <VideoInput value={video} readOnly={true} light={true} />
-//                 {/**below div ensures the video is not clickable */}
-//                 <div style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}/>
-//               </div>
-//             ) : null}
-//           </StyledEmbedSection>
-//         )}
-//       </StyledCardWrapper>
-//     </LinkComp>
-//   );
-// };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardContent = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
+var injectHttps_1 = require("../../../utils/injectHttps");
+var utilsOolib_1 = require("../../../utilsOolib");
+var ActionMenu_1 = require("../../ActionMenu");
+var Typo_1 = require("../../Typo");
+var VideoInput_1 = __importDefault(require("../../VideoInput"));
+var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var styled_1 = require("../styled");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var parseCardConfig_1 = require("../utils/parseCardConfig");
+var mediaDataExists_1 = require("../utils/mediaDataExists");
+var styled_2 = require("./styled");
+var CardPlaceholder_1 = require("../comps/CardPlaceholder");
+var ImageInput_1 = require("../../ImageInput");
+var icons_1 = require("../../../icons");
+var Tags_1 = require("../../Tags");
+var CrownSimple = icons_1.icons.CrownSimple;
+var CardContent = function (_a) {
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, highlight = _a.highlight;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
+    var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
+    var _b = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax
+    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock, tagDisplay = _b.tagDisplay;
+    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;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, highlight: highlight, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
+            highlight && react_1.default.createElement(styled_2.StyledCrownWrapper, null,
+                react_1.default.createElement(styled_2.StyledCrown, null,
+                    react_1.default.createElement(CrownSimple, { size: 24 }))),
+            react_1.default.createElement(styled_2.StyledUpperSection, { highlight: highlight },
+                react_1.default.createElement(styled_2.StyledContainer1, null,
+                    cardLabel ? (react_1.default.createElement("div", { title: cardLabel, style: {
+                            display: "flex",
+                            gap: "2rem",
+                            justifyContent: "space-between",
+                        } },
+                        react_1.default.createElement(Typo_1.LABEL, { style: {
+                                textOverflow: "ellipsis",
+                                overflow: "hidden",
+                                whiteSpace: "nowrap",
+                            }, color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel),
+                        react_1.default.createElement("div", { style: { marginTop: "-1rem", marginRight: "-1rem" } }, actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions })))) : null,
+                    title ? (react_1.default.createElement("div", { style: { display: "flex", alignItems: "end", gap: ".5rem" } },
+                        " ",
+                        react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
+                            react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
+                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
+                tagDisplay && react_1.default.createElement(Tags_1.TagDisplay, { display: tagDisplay, color: "green" }),
+                (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }) //show only two meta for cardContent
+                ) : null),
+            showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
+                !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
+                    react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, null),
+                (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))),
+                (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
+                    react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
+                    react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : null)))));
+};
+exports.CardContent = CardContent;

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

@@ -0,0 +1,7 @@
+export const StyledContainer1: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMetaBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledEmbedSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledUpperSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrown: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,60 +1,53 @@
-// import styled, { css } from "styled-components";
-// import { colors } from "../../../themes/colors";
-// import { transition } from "../../../themes/mixins/transitions";
-// import { CSSTitleAnimationOnHover } from "../styled";
-// const { greyColor5, white, invertGreen } = colors;
-// const flexColumn = css`
-//   display: flex;
-//   flex-direction: column;
-// `;
-// export const StyledContainer1 = styled.div`
-//   ${flexColumn}
-//   gap: 1rem;
-// `;
-// export const StyledMetaBlock = styled.div`
-//   display: flex;
-//   gap: 0.5em;
-// `;
-// export const StyledEmbedSection = styled.div`
-//   height: 100px;
-//   display: flex;
-//   align-items: center;
-//   overflow: hidden;
-//   width: 100%;
-// `;
-// export const StyledCardWrapper = styled.div`
-//   height: 100%;
-//   border: 2px solid ${greyColor5};
-//   background-color: ${({ highlight }) => highlight ? colors.lightGreen : greyColor5 }; 
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: space-between;
-//   ${transition("background-color")}
-//   cursor: pointer;
-//   &:hover {
-//     background-color: ${white};
-//     ${CSSTitleAnimationOnHover};
-//      #CardPlaceholder {
-//       opacity: 1;
-//     }
-//   }
-// `;
-// export const StyledUpperSection = styled.div`
-//   /* height: 100%; */
-//   flex-grow: 1;
-//   justify-content: space-between;
-//   padding: 2rem;
-//   ${flexColumn}
-//   gap: ${({ highlight }) => highlight ? '2rem' : '3rem'};
-//   padding-top: ${({ highlight }) => highlight ? "1rem" : "2rem"};
-// `;
-// export const StyledCrownWrapper = styled.div`
-//   width: 100%;
-//   display: flex; 
-//   justify-content: flex-end
-// `;
-// export const StyledCrown = styled.div`
-//   width: max-content;
-//   background-color: ${invertGreen};
-//   padding: 1rem;
-// `
+"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.StyledCrown = exports.StyledCrownWrapper = exports.StyledUpperSection = exports.StyledCardWrapper = exports.StyledEmbedSection = exports.StyledMetaBlock = exports.StyledContainer1 = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../../themes/colors");
+var transitions_1 = require("../../../themes/mixins/transitions");
+var styled_1 = require("../styled");
+var greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white, invertGreen = colors_1.colors.invertGreen;
+var flexColumn = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  gap: 1rem;\n"], ["\n  ", "\n  gap: 1rem;\n"])), flexColumn);
+exports.StyledMetaBlock = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  gap: 0.5em;\n"])));
+exports.StyledEmbedSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"])));
+exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, function (_a) {
+    var highlight = _a.highlight;
+    return highlight ? colors_1.colors.lightGreen : greyColor5;
+}, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
+exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"])), flexColumn, function (_a) {
+    var highlight = _a.highlight;
+    return highlight ? '2rem' : '3rem';
+}, function (_a) {
+    var highlight = _a.highlight;
+    return highlight ? "1rem" : "2rem";
+});
+exports.StyledCrownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"], ["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"])));
+exports.StyledCrown = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"], ["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"])), invertGreen);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

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

@@ -1,172 +1,87 @@
-// import React from "react";
-// import { useTheme } from "styled-components";
-// import { injectHttps } from "../../../utils/injectHttps";
-// import { getPrimaryColorText, useLocale } from "../../../utilsOolib";
-// import { ActionMenu } from "../../ActionMenu";
-// import { ImageInput } from "../../ImageInput";
-// import { TagDisplay } from "../../Tags";
-// import VideoInput from "../../VideoInput";
-// import MetaBlock from "../../MetaBlock";
-// import { CardPlaceholder } from "../comps/CardPlaceholder";
-// import { LineClampWrapper } from "../comps/LineClampWrapper";
-// import { StyledLabel, StyledTitle, StyledTitleSpan } from "../styled";
-// import { decideLinkCompAndTarget } from "../utils/decideLinkCompAndTarget";
-// import { dontRenderIfBothOnClickAndTo } from "../utils/dontRenderIfBothOnClickAndTo";
-// import { imageDataExists, videoDataExists } from "../utils/mediaDataExists";
-// import { parseCardConfig } from "../utils/parseCardConfig";
-// import {
-//   StyledContentModule2,
-//   StyledHeader,
-//   StyledListElemContainer,
-//   StyledListWrapper,
-//   StyledMediaMask,
-//   StyledStatusTagCardLabelWrapper,
-//   StyledVideoWrapper,
-// } from "./styled.js";
-// import { ProfileImageInput } from "../../ImageInput/derivedComps/ProfileImageInput";
-// import { useScreenWidth } from "../../../utils/_EXPORTS";
-// import { getBreakPoint } from "../../../themes/mixins";
-// export const ListContent = ({
-//   id,
-//   data,
-//   config,
-//   to,
-//   onClick,
-//   openInNewTab,
-//   actions,
-//   statusTag,
-//   variant = "content", //alt = profile
-// }) => {
-//   const theme = useTheme();
-//   const localize = useLocale();
-//   const screenWidth = useScreenWidth()
-//   const { parseSpecialSyntax } = theme || {};
-//   const { cardLabel, title, video, image, metaBlock } = parseCardConfig({
-//     config,
-//     data,
-//     parseSpecialSyntax,
-//   });
-//   let dontRenderRes = dontRenderIfBothOnClickAndTo({ onClick, to });
-//   if (dontRenderRes) return dontRenderRes;
-//   const { LinkComp, target, externalUrl } = decideLinkCompAndTarget({
-//     to,
-//     openInNewTab,
-//   });
-//   const mediaConfigExists = config.video || config.image;
-//   return (
-//     <LinkComp target={target} href={injectHttps(to)} to={to}>
-//       <StyledListElemContainer 
-//         id={id} 
-//         onClick={onClick ? e => onClick(e,data) : undefined} 
-//         /** imp to pass data cuz its used by some on okf eg. LinkOrEmbedModal*/
-//         >
-//         <StyledListWrapper
-//           mediaConfigExists={
-//             mediaConfigExists /*cuz if it does space needs to be allocated for it */
-//           }
-//           actions={actions}
-//         >
-//           <StyledHeader>
-//             {(cardLabel || statusTag) && 
-//             <StyledStatusTagCardLabelWrapper style={{maxWidth: '100%', paddingBottom: '0.7rem'}}> 
-//               {cardLabel && (
-//                 <div title={cardLabel} style={{maxWidth: '100%'}}>
-//                   <StyledLabel color={getPrimaryColorText(theme?.colors)}>
-//                     {cardLabel}
-//                   </StyledLabel>
-//                 </div>
-//               )}
-//               {statusTag && (
-//                 <TagDisplay variant={"secondary"} XS display={statusTag} />
-//               )}
-//             </StyledStatusTagCardLabelWrapper>}
-//             {title ? (
-//               <div style={{flexGrow: 1}}>
-//                 <LineClampWrapper noOfLines_M={6} noOfLines_D={3} title={title}>
-//                   <StyledTitle capitalize className="StyledTitle">
-//                     <StyledTitleSpan className="StyledTitleSpan">
-//                     {localize(title)}
-//                     </StyledTitleSpan>
-//                   </StyledTitle>
-//                 </LineClampWrapper>
-//                 </div>
-//             ) : null}
-//             {metaBlock?.length > 0 && (
-//               <div style={{ width: "100%", paddingTop: "1rem" }}>
-//                 <MetaBlock data={data} config={metaBlock} />
-//               </div>
-//             )}
-//           </StyledHeader>
-//           {variant === "content" ? (
-//             (mediaConfigExists || actions) && (
-//               <StyledContentModule2>
-//                 {mediaConfigExists && <>
-//                   {!imageDataExists(image) && !videoDataExists(video) && (
-//                     <StyledMediaMask>
-//                       <CardPlaceholder
-//                         style={{ height: "100%", width: "auto" }}
-//                       />
-//                     </StyledMediaMask>
-//                   )}
-//                   {videoDataExists(video) && !imageDataExists(image) ? (
-//                     <StyledMediaMask>
-//                       <StyledVideoWrapper>
-//                         <VideoInput
-//                           value={video}
-//                           readOnly={true}
-//                           light={true}
-//                           height={"100%"}
-//                         />
-//                         {/**below div ensures the video is not clickable */}
-//                         <div
-//                           style={{
-//                             position: "absolute",
-//                             top: 0,
-//                             left: 0,
-//                             width: "100%",
-//                             height: "100%",
-//                           }}
-//                         />
-//                       </StyledVideoWrapper>
-//                     </StyledMediaMask>
-//                   ) : null}
-//                   {imageDataExists(image) && (
-//                     <StyledMediaMask>
-//                       {
-//                         // <div
-//                         //   // style={{
-//                         //   //   width: "14rem",
-//                         //   // }}
-//                         // >
-//                         <ImageInput
-//                           stretchToFullHeight
-//                           value={image}
-//                           aspectRatio={"5/3"}
-//                           readOnly={true}
-//                           enableCaptions={false}
-//                           disableImageBorder={true}
-//                           defaultImageSpread={"cover"}
-//                         />
-//                         // </div>
-//                       }
-//                     </StyledMediaMask>
-//                   )}
-//                 </>}
-//                 {actions && <ActionMenu actions={actions} align="right" />}
-//               </StyledContentModule2>
-//             )
-//           ) : (
-//             <StyledContentModule2>
-//               <ProfileImageInput
-//                 readOnly
-//                 value={image}
-//                 size={screenWidth >= getBreakPoint('sm') ? 60 : 70}
-//                 imageTitle={title}
-//               />
-//             </StyledContentModule2>
-//           )}
-//         </StyledListWrapper>
-//       </StyledListElemContainer>
-//     </LinkComp>
-//   );
-// };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListContent = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
+var injectHttps_1 = require("../../../utils/injectHttps");
+var utilsOolib_1 = require("../../../utilsOolib");
+var ActionMenu_1 = require("../../ActionMenu");
+var ImageInput_1 = require("../../ImageInput");
+var Tags_1 = require("../../Tags");
+var VideoInput_1 = __importDefault(require("../../VideoInput"));
+var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
+var CardPlaceholder_1 = require("../comps/CardPlaceholder");
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var styled_1 = require("../styled");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var mediaDataExists_1 = require("../utils/mediaDataExists");
+var parseCardConfig_1 = require("../utils/parseCardConfig");
+var styled_js_1 = require("./styled.js");
+var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
+var _EXPORTS_1 = require("../../../utils/_EXPORTS");
+var mixins_1 = require("../../../themes/mixins");
+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, _b = _a.variant, variant = _b === void 0 ? "content" : _b;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
+    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
+    var _c = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax,
+    }), cardLabel = _c.cardLabel, title = _c.title, video = _c.video, image = _c.image, metaBlock = _c.metaBlock;
+    var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
+    if (dontRenderRes)
+        return dontRenderRes;
+    var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
+        to: to,
+        openInNewTab: openInNewTab,
+    }), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
+    var mediaConfigExists = config.video || config.image;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
+            react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: mediaConfigExists /*cuz if it does space needs to be allocated for it */, actions: actions },
+                react_1.default.createElement(styled_js_1.StyledHeader, null,
+                    (cardLabel || statusTag) &&
+                        react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, { style: { maxWidth: '100%', paddingBottom: '0.7rem' } },
+                            cardLabel && (react_1.default.createElement("div", { title: cardLabel, style: { maxWidth: '100%' } },
+                                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: { flexGrow: 1 } },
+                        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" }, localize(title)))))) : null,
+                    (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem" } },
+                        react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
+                variant === "content" ? ((mediaConfigExists || actions) && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
+                    mediaConfigExists && react_1.default.createElement(react_1.default.Fragment, 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) && !(0, mediaDataExists_1.imageDataExists)(image) ? (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%",
+                                    } })))) : null,
+                        (0, mediaDataExists_1.imageDataExists)(image) && (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" })))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
+                    react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? 60 : 70, imageTitle: title })))))));
+};
+exports.ListContent = ListContent;

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

@@ -0,0 +1,7 @@
+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 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>;
+export const StyledVideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,71 +1,26 @@
-// import styled from "styled-components";
-// import { colors } from "../../../themes";
-// import { ellipsis, mediaQuery } from "../../../themes/mixins";
-// import { LABEL } from "../../Typo";
-// import { CSSTitleAnimationOnHover } from "../styled";
-// export const StyledListElemContainer = styled.div`
-//   border-bottom: 1px solid ${colors.greyColor15};
-//   margin-bottom: 2rem;
-//   padding-bottom: 2rem;
-//   cursor: pointer;
-//   &:hover {
-//     ${CSSTitleAnimationOnHover};
-//     #CardPlaceholder {
-//       opacity: 1;
-//     }
-//   }
-// `;
-// export const StyledStatusTagCardLabelWrapper = styled.div`
-//   display: flex;
-//   gap: 1rem;
-//   align-items: center;
-//   flex-wrap: wrap;
-// `
-// export const StyledHeader = styled.div`
-//   display: flex;
-//   align-items: flex-start;
-//   flex-direction: column;
-//   flex-wrap: wrap;
-//   min-width: 0;
-//   flex-grow: 1;
-// `;
-// /** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
-// const mediaContainerWidth = 70;
-// const mediaContainerWidth_SM = 60;
-// export const StyledListWrapper = styled.div`
-//   width: auto;
-//   display: flex;
-//   gap:2rem;
-//   position: relative;
-// `;
-// export const StyledContentModule2 = styled.div`
-//   display: flex;
-//   flex-direction: column-reverse;
-//   justify-content: flex-end;
-//   align-items: flex-end;
-//   gap: 1rem;
-//   flex-shrink: 0;
-//   ${mediaQuery("sm")} {
-//     flex-direction: row;
-//     align-items: center;
-//   }
-// `;
-// export const StyledMediaMask = styled.div`
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   overflow: hidden;
-//   height: 84px;
-//   width: ${mediaContainerWidth}px;
-//   ${mediaQuery("sm")} {
-//     width: ${mediaContainerWidth_SM}px;
-//     height: 6rem;
-//   }
-// `;
-// export const StyledVideoWrapper = styled.div`
-//   width: 14rem;
-//   height: 8.4rem;
-//   ${mediaQuery("sm")} {
-//     height: 6rem;
-//   }
-// `
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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");
+var Typo_1 = require("../../Typo");
+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  \n  min-width: 0;\n  flex-grow: 1;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  \n  min-width: 0;\n  flex-grow: 1;\n"])));
+/** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
+var mediaContainerWidth = 70;
+var mediaContainerWidth_SM = 60;
+exports.StyledListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: auto;\n  display: flex;\n  gap:2rem;\n  position: relative;\n  \n"], ["\n  width: auto;\n  display: flex;\n  gap:2rem;\n  position: relative;\n  \n"])));
+exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+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/stories/Oolib/components/Playground.stories.d.ts

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

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

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

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

@@ -12,7 +12,9 @@ declare namespace _default {
         export let width: number;
         export let aspectRatio: string;
         export let fontWeight: number;
+        export let style: {};
         export let letterSizeMultiplier: string;
+        export let strechToFullHeight: boolean;
     }
 }
 export default _default;

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

@@ -25,11 +25,16 @@ exports.default = {
         width: 500,
         aspectRatio: "5/3",
         fontWeight: 900,
-        letterSizeMultiplier: '1.8'
+        style: {},
+        letterSizeMultiplier: '1.8',
+        strechToFullHeight: false,
     },
 };
 var Image_Placeholder = function (args) {
-    return (React.createElement("div", { style: { width: "".concat(args.width, "px") } },
+    return (React.createElement("div", { style: {
+            width: "".concat(args.width, "px"),
+            height: '700px',
+        } },
         React.createElement(ImagePlaceholder_1.ImagePlaceholder, __assign({}, args))));
 };
 exports.Image_Placeholder = Image_Placeholder;

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

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

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

@@ -31,9 +31,9 @@ var react_1 = __importStar(require("react"));
 var gradient_background_jpg_1 = __importDefault(require("../../../assets/images/gradient_background.jpg"));
 var styled_1 = require("./styled");
 var ImagePlaceholder = function (_a) {
-    var title = _a.title, height = _a.height, fontWeight = _a.fontWeight, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? "5/3" : _b, _c = _a.letterSizeMultiplier, letterSizeMultiplier = _c === void 0 ? 1.8 : _c;
+    var title = _a.title, height = _a.height, fontWeight = _a.fontWeight, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? "5/3" : _b, _c = _a.letterSizeMultiplier, letterSizeMultiplier = _c === void 0 ? 1.8 : _c, _d = _a.strechToFullHeight, strechToFullHeight = _d === void 0 ? false : _d, _e = _a.style, style = _e === void 0 ? {} : _e;
     var containerRef = (0, react_1.useRef)(null);
-    var _d = (0, react_1.useState)(200), letterSize = _d[0], setLetterSize = _d[1];
+    var _f = (0, react_1.useState)(200), letterSize = _f[0], setLetterSize = _f[1];
     (0, react_1.useEffect)(function () {
         var calculateLetterSize = function () {
             if (containerRef.current) {
@@ -62,7 +62,7 @@ var ImagePlaceholder = function (_a) {
     var randomColor = colors[Math.floor(Math.random() * colors.length)];
     randomColor += '80'; // to convert to RGBA format for 50% opacity
     var firstLetter = title.charAt(0).toUpperCase();
-    return (react_1.default.createElement(styled_1.StyledContainer, { ref: containerRef, aspectRatio: aspectRatio, height: height },
+    return (react_1.default.createElement(styled_1.StyledContainer, { ref: containerRef, aspectRatio: aspectRatio, height: height, strechToFullHeight: strechToFullHeight, style: style },
         react_1.default.createElement(styled_1.StyledImageLayer, null,
             react_1.default.createElement(styled_1.StyledImage, { src: gradient_background_jpg_1.default, alt: title })),
         react_1.default.createElement(styled_1.StyledColorOverlay, { color: randomColor }),

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

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var white = themes_1.colors.white;
 exports.StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  aspect-ratio: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  aspect-ratio: ", ";\n"])), function (_a) {
-    var height = _a.height;
-    return height || "inherit";
+    var height = _a.height, strechToFullHeight = _a.strechToFullHeight;
+    return height ? height : (strechToFullHeight ? '100%' : 'auto');
 }, function (props) { return props.aspectRatio; });
 exports.StyledImageLayer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n"], ["\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n"])));
 exports.StyledImage = styled_components_1.default.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));

package/package.json

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

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

@@ -1,6 +0,0 @@
-declare namespace _default {
-    let title: string;
-}
-export default _default;
-export function CardContent(args: any): React.JSX.Element;
-import React from "react";

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

@@ -1,47 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardContent = void 0;
-var react_1 = __importDefault(require("react"));
-// import { Container } from "../../../../components/Container";
-// import { PaddingTopBottom30 } from "../../../../components/Paddings";
-// import { WrapperCardGrid } from "../../../../components/Wrappers/WrapperCardGrid";
-// import { Wrapper1500 } from "../../../../components/Wrappers";
-// import { CardContent as CardContent_ } from "../../../../components/cards/CardContent";
-// import { commonCardArgs, commonCardArgTypes, cardContentArgs, cardContentArgTypes } from "./utils/cardArgTypes";
-// import { parseCardArgs } from "./utils/parseCardArgs";
-// import { makeArrayFromLength } from "../../../../utils/makeArrayFromLength";
-exports.default = {
-    title: "Components/CardContent",
-    // argTypes: {
-    //   ...commonCardArgTypes,
-    //   ...cardContentArgTypes
-    // },
-    // args: {
-    //   ...commonCardArgs,
-    //   ...cardContentArgs
-    // },
-};
-var CardContent = function (args) {
-    // const props = parseCardArgs(args);
-    return (react_1.default.createElement(react_1.default.Fragment, null));
-};
-exports.CardContent = CardContent;
-// export const Playground = (args) => {
-//   const props = parseCardArgs(args);
-//   return (
-//     <Container>
-//       {/* <PaddingTopBottom30>
-//         <Wrapper1500 left>
-//         <WrapperCardGrid>
-//         {makeArrayFromLength(50).map(d => (
-//           <CardContent_ {...props} config={props.config} />
-//         )) }
-//         </WrapperCardGrid>
-//         </Wrapper1500>
-//       </PaddingTopBottom30> */}
-//     </Container>
-//   );
-// };

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

@@ -1,6 +0,0 @@
-declare namespace _default {
-    let title: string;
-}
-export default _default;
-export function ListContent(args: any): React.JSX.Element;
-import React from "react";

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

@@ -1,50 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListContent = void 0;
-var react_1 = __importDefault(require("react"));
-// import { Container } from "../../../../components/Container";
-// import { PaddingTopBottom30 } from "../../../../components/Paddings";
-// import { ListContent as ListContent_ } from "../../../../components/cards/ListContent";
-// import docs from "./ListContent.mdx";
-// import { commonCardArgs, commonCardArgTypes, listContentArgs, listContentArgTypes } from "./utils/cardArgTypes";
-// import { parseCardArgs } from "./utils/parseCardArgs";
-// import { Wrapper700 } from "../../../../components/Wrappers";
-// import { makeArrayFromLength } from "../../../../utils/makeArrayFromLength";
-exports.default = {
-    title: "Components/ListContent",
-    // argTypes: {
-    //   ...commonCardArgTypes,
-    //   ...listContentArgTypes
-    // },
-    // args: {
-    //   ...commonCardArgs,
-    //   ...listContentArgs
-    // },
-    // parameters: {
-    //   docs: {
-    //     page: docs,
-    //   },
-    // },
-};
-var ListContent = function (args) {
-    // const props = parseCardArgs(args);
-    return (react_1.default.createElement(react_1.default.Fragment, null));
-};
-exports.ListContent = ListContent;
-// export const Playground = (args) => {
-//   const props = parseCardArgs(args);
-//   return (
-//     <Container>
-//       <PaddingTopBottom30>
-//         <Wrapper700 left>
-//         {makeArrayFromLength(50).map(d => (
-//           <ListContent_ {...props} config={props.config} />
-//         )) }
-//         </Wrapper700>
-//       </PaddingTopBottom30>
-//     </Container>
-//   );
-// };