oolib 2.60.0 → 2.61.1

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

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardContent = void 0;
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var VideoInput_1 = __importDefault(require("../../VideoInput"));
+var styled_1 = require("./styled");
+var styled_components_1 = require("styled-components");
+var isExternalUrl_1 = require("../utils/isExternalUrl");
+var parseCardConfig_1 = require("../utils/parseCardConfig");
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var CardMetaBlock_1 = __importDefault(require("../comps/CardMetaBlock"));
+var Typo_1 = require("../../Typo");
+var injectHttps_1 = require("../../../utils/injectHttps");
+var ActionMenu_1 = require("../../ActionMenu");
+var icons_1 = require("../../../icons");
+var utilsOolib_1 = require("../../../utilsOolib");
+var renderImagePlaceholderForOolibPreview_1 = require("../../../utilsOolib/renderImagePlaceholderForOolibPreview");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var ArrowLineUpRight = icons_1.icons.ArrowLineUpRight;
+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;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var _b = theme || {}, ImageInput = _b.ImageInput, parseSpecialSyntax = _b.parseSpecialSyntax;
+    var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
+    var _c = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax,
+        localize: localize,
+    }), cardLabel = _c.cardLabel, title = _c.title, titleOptional = _c.titleOptional, video = _c.video, image = _c.image, metaBlockData = _c.metaBlockData;
+    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;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement(styled_1.StyledCardWrapper, { id: id, onClick: onClick },
+            react_1.default.createElement(styled_1.StyledUpperSection, null,
+                react_1.default.createElement(styled_1.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,
+                    titleOptional ? (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: titleOptional },
+                        react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, style: { wordBreak: "break-word" }, capitalize: true }, titleOptional))) : 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: titleOptional },
+                            react_1.default.createElement(Typo_1.SERIF_5_6, { style: { wordBreak: "break-word" }, capitalize: true }, title)))) : null),
+                metaBlockData ? (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData.slice(0, 2) }) //show only two meta for cardContent
+                ) : null),
+            showEmbedSection ? (react_1.default.createElement(styled_1.StyledEmbedSection, null,
+                (video === null || video === void 0 ? void 0 : video.length) > 0 ? (react_1.default.createElement("div", { style: { width: "100%" } },
+                    react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }))) : null,
+                (image === null || image === void 0 ? void 0 : image.length) > 0 && !video ? (react_1.default.createElement("div", { style: { width: "100%" } }, !ImageInput ? ((0, renderImagePlaceholderForOolibPreview_1.renderImagePlaceholderForOolibPreview)({
+                    tooltipPos: "right",
+                    width: "100%",
+                    height: "100px",
+                    borderRadius: 0,
+                })) : (react_1.default.createElement(ImageInput, { value: image, aspectRatio: image.aspectRatio || "5/3", containerShape: image.containerShape, readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true })))) : null)) : null)));
+};
+exports.CardContent = CardContent;

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

@@ -0,0 +1,5 @@
+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>;

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

@@ -0,0 +1,41 @@
+"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.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 greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white;
+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  :hover {\n    background-color: ", ";\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  :hover {\n    background-color: ", ";\n  }\n"])), greyColor5, greyColor5, (0, transitions_1.transition)("background-color"), white);
+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\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"])), flexColumn);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

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

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

@@ -0,0 +1,75 @@
+"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 parseCardConfig_1 = require("../utils/parseCardConfig");
+var styled_js_1 = require("./styled.js");
+var styled_components_1 = require("styled-components");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var ActionMenu_1 = require("../../ActionMenu");
+var Typo_1 = require("../../Typo");
+var Tags_1 = require("../../Tags");
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var VideoInput_1 = __importDefault(require("../../VideoInput"));
+var CardMetaBlock_1 = __importDefault(require("../comps/CardMetaBlock"));
+var injectHttps_1 = require("../../../utils/injectHttps");
+var utilsOolib_1 = require("../../../utilsOolib");
+var themes_1 = require("../../../themes");
+var icons_1 = require("../../../icons");
+var renderImagePlaceholderForOolibPreview_1 = require("../../../utilsOolib/renderImagePlaceholderForOolibPreview");
+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, disabled = _a.disabled, statusTag = _a.statusTag;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var _b = theme || {}, ImageInput = _b.ImageInput, parseSpecialSyntax = _b.parseSpecialSyntax;
+    var _c = (0, parseCardConfig_1.parseCardConfig)({ config: config, data: data, parseSpecialSyntax: parseSpecialSyntax, localize: localize }), cardLabel = _c.cardLabel, title = _c.title, titleOptional = _c.titleOptional, video = _c.video, image = _c.image, metaBlockData = _c.metaBlockData;
+    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;
+    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, disableHover: disabled ? true : false },
+            react_1.default.createElement(styled_js_1.StyledListWrapper, null,
+                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))),
+                        statusTag && (react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", XS: true, display: statusTag }))),
+                    titleOptional && (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: titleOptional },
+                        " ",
+                        react_1.default.createElement(Typo_1.SANS_5_6, { color: greyColor100 }, titleOptional))),
+                    title ? (react_1.default.createElement("div", { style: {
+                            paddingBottom: "1rem",
+                            display: "flex",
+                            alignItems: "end",
+                        } },
+                        react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
+                            react_1.default.createElement(styled_js_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
+                                react_1.default.createElement(styled_js_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
+                    react_1.default.createElement(styled_js_1.StyledMeta, null, metaBlockData && (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData.slice(0, 3) }) // show only three metas for listContent
+                    ))),
+                react_1.default.createElement(styled_js_1.StyledContentModule2, null,
+                    (video === null || video === void 0 ? void 0 : video.length) > 0 && (react_1.default.createElement(styled_js_1.StyledMediaWrapper, null,
+                        react_1.default.createElement("div", { style: { width: "14rem", border: "1px solid ".concat(greyColor15) } },
+                            react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true })))),
+                    (image === null || image === void 0 ? void 0 : image.length) > 0 && !video && (react_1.default.createElement(styled_js_1.StyledMediaWrapper, null, !ImageInput ? ((0, renderImagePlaceholderForOolibPreview_1.renderImagePlaceholderForOolibPreview)({
+                        width: "100%",
+                        height: "100%",
+                        borderRadius: 0,
+                    })) : (react_1.default.createElement("div", { style: {
+                            width: "14rem",
+                            border: "1px solid ".concat(greyColor15),
+                        } },
+                        react_1.default.createElement(ImageInput, { value: image, aspectRatio: image.aspectRatio || "5/3", containerShape: image.containerShape, readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))),
+                    actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" }))))));
+};
+exports.ListContent = ListContent;

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

@@ -0,0 +1,10 @@
+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 StyledTitle: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTitleSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMediaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMeta: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,67 @@
+"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.StyledMeta = exports.StyledMediaWrapper = exports.StyledContentModule2 = exports.StyledTitleSpan = exports.StyledListWrapper = exports.StyledTitle = exports.StyledLabel = exports.StyledHeader = exports.StyledStatusTagCardLabelWrapper = exports.StyledListElemContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var utilsOolib_1 = require("../../../utilsOolib");
+var themes_1 = require("../../../themes");
+var Typo_1 = require("../../Typo");
+var mixins_1 = require("../../../themes/mixins");
+exports.StyledListElemContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: ", ";\n  ", "\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: ", ";\n  ", "\n"])), themes_1.colors.greyColor15, function (_a) {
+    var disableHover = _a.disableHover;
+    return !disableHover ? 'pointer' : '';
+}, function (_a) {
+    var disableHover = _a.disableHover;
+    return !disableHover && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:hover {\n        .StyledTitle {\n          color: ", ";\n        }\n\n        .StyledTitleSpan {\n          //animate the underline created by the mixin : underlineForAnimation\n          ", "\n        }\n      }\n    "], ["\n      &:hover {\n        .StyledTitle {\n          color: ", ";\n        }\n\n        .StyledTitleSpan {\n          //animate the underline created by the mixin : underlineForAnimation\n          ", "\n        }\n      }\n    "])), function (_a) {
+        var theme = _a.theme;
+        return (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors);
+    }, 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',
+        }).hovered;
+    });
+});
+exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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_4 || (templateObject_4 = __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_5 || (templateObject_5 = __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"])), mixins_1.ellipsis, (0, mixins_1.mediaQuery)("sm"));
+exports.StyledTitle = (0, styled_components_1.default)(Typo_1.SERIF_4_5)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 23rem;\n  gap: 1rem;\n  ", "{\n    width: 40rem;\n  }   */\n  ", "\n"], ["\n  /* position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 23rem;\n  gap: 1rem;\n  ", "{\n    width: 40rem;\n  }   */\n  ", "\n"])), (0, mixins_1.mediaQuery)("sm"), (0, mixins_1.transition)("color"));
+exports.StyledListWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  width: auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+exports.StyledTitleSpan = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 2em 0;\n  margin-right: .5rem;\n  background-repeat: no-repeat;\n  ", "\n  ", "\n"], ["\n  margin: 2em 0;\n  margin-right: .5rem;\n  background-repeat: no-repeat;\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.StyledContentModule2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  justify-content: center;\n  display: flex;\n  align-items: flex-end;\n  position: relative;\n  padding: 0 2rem;\n  row-gap: 1rem;\n  column-gap: 0;\n  flex-direction: column-reverse;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"], ["\n  justify-content: center;\n  display: flex;\n  align-items: flex-end;\n  position: relative;\n  padding: 0 2rem;\n  row-gap: 1rem;\n  column-gap: 0;\n  flex-direction: column-reverse;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n    row-gap: 0;\n    column-gap: 1rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledMediaWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: 70px;\n  height: 84px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  flex-wrap: wrap;\n  ", " {\n    width: 6rem;\n    height: 6rem;\n  }\n"], ["\n  width: 70px;\n  height: 84px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  flex-wrap: wrap;\n  ", " {\n    width: 6rem;\n    height: 6rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledMeta = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
+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/comps/CardMetaBlock/index.d.ts

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

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

@@ -0,0 +1,49 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../../../themes");
+var Typo_1 = require("../../../Typo");
+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"], ["\n  display: flex; \n  align-items: center;\n"])));
+var StyledSeparator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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 CardMetaBlock = function (_a) {
+    var value = _a.value;
+    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(Typo_1.SANS_2, { capitalize: true }, v)),
+        i + 1 === value.length ? null : react_1.default.createElement(StyledSeparator, null))); })));
+};
+exports.default = CardMetaBlock;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,7 @@
+export function LineClampWrapper({ title, children, noOfLines_D, noOfLines_M }: {
+    title: any;
+    children: any;
+    noOfLines_D: any;
+    noOfLines_M: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,26 @@
+"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.LineClampWrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+var LineClampWrapperStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n\n  ", " {\n    ", "\n  }\n"])), function (_a) {
+    var noOfLines_D = _a.noOfLines_D, noOfLines_M = _a.noOfLines_M;
+    return (noOfLines_M && (0, mixins_1.clampText)(noOfLines_M)) || (noOfLines_D && (0, mixins_1.clampText)(noOfLines_D));
+}, (0, mixins_1.mediaQuery)("sm"), function (_a) {
+    var noOfLines_D = _a.noOfLines_D, noOfLines_M = _a.noOfLines_M;
+    return (noOfLines_D && (0, mixins_1.clampText)(noOfLines_D)) || (noOfLines_M && (0, mixins_1.clampText)(noOfLines_M));
+});
+var LineClampWrapper = function (_a) {
+    var title = _a.title, children = _a.children, noOfLines_D = _a.noOfLines_D, noOfLines_M = _a.noOfLines_M;
+    return (react_1.default.createElement(LineClampWrapperStyled, { title: title, noOfLines_D: noOfLines_D, noOfLines_M: noOfLines_M }, children));
+};
+exports.LineClampWrapper = LineClampWrapper;
+var templateObject_1;

package/dist/components/cards/utils/decideLinkCompAndTarget.d.ts

@@ -0,0 +1,8 @@
+export function decideLinkCompAndTarget({ to, openInNewTab }: {
+    to: any;
+    openInNewTab: any;
+}): {
+    LinkComp: any;
+    target: string;
+    externalUrl: boolean;
+};

package/dist/components/cards/utils/decideLinkCompAndTarget.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decideLinkCompAndTarget = void 0;
+var react_1 = require("react");
+var isExternalUrl_1 = require("./isExternalUrl");
+var react_router_dom_1 = require("react-router-dom");
+var decideLinkCompAndTarget = function (_a) {
+    var to = _a.to, openInNewTab = _a.openInNewTab;
+    var externalUrl = (0, isExternalUrl_1.isExternalUrl)(to);
+    var LinkComp = externalUrl === null ? react_1.Fragment : externalUrl ? "a" : react_router_dom_1.Link;
+    /* openInNewTab is explicitly defined, then listen to whatever it says else
+       by default externalUrl will open in new tab, internalUrl will not.*/
+    var target = openInNewTab === true
+        ? "_blank"
+        : openInNewTab === false
+            ? "_self"
+            : externalUrl
+                ? "_blank"
+                : "_self";
+    return { LinkComp: LinkComp, target: target, externalUrl: externalUrl };
+};
+exports.decideLinkCompAndTarget = decideLinkCompAndTarget;

package/dist/components/cards/utils/dontRenderIfBothOnClickAndTo.d.ts

@@ -0,0 +1,5 @@
+export function dontRenderIfBothOnClickAndTo({ onClick, to }: {
+    onClick: any;
+    to: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/cards/utils/dontRenderIfBothOnClickAndTo.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dontRenderIfBothOnClickAndTo = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../../Typo");
+var dontRenderIfBothOnClickAndTo = function (_a) {
+    var onClick = _a.onClick, to = _a.to;
+    if (onClick && to) {
+        return (react_1.default.createElement(Typo_1.SANS_4_5, { color: "red" }, "Only one prop is allowed for this component - \"to\" or \"onClick\" ."));
+    }
+    else {
+        return undefined;
+    }
+};
+exports.dontRenderIfBothOnClickAndTo = dontRenderIfBothOnClickAndTo;

package/dist/components/cards/utils/isExternalUrl.d.ts

@@ -0,0 +1 @@
+export function isExternalUrl(to: any): boolean;

package/dist/components/cards/utils/isExternalUrl.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isExternalUrl = void 0;
+var isExternalUrl = function (to) { return to ? (to.charAt(0) === "/" ? false : true) : null; };
+exports.isExternalUrl = isExternalUrl;

package/dist/components/cards/utils/parseCardConfig.d.ts

@@ -0,0 +1,15 @@
+export function parseCardConfig({ config, data, localize, parseSpecialSyntax, }: {
+    config: any;
+    data: any;
+    localize: any;
+    parseSpecialSyntax?: () => any;
+}): {
+    title: string;
+    titleOptional: string;
+    desc: string;
+    cardLabel: any;
+    video: any;
+    image: any;
+    metaBlockData: any;
+    tagDisplay: any;
+};

package/dist/components/cards/utils/parseCardConfig.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCardConfig = void 0;
+var getText_1 = require("../../../utils/getText");
+var getVal_1 = require("../../../utils/getterSetterDeleter/getVal");
+var createFormattedDate_1 = require("../../../utils/momentjs/createFormattedDate");
+var parseCardConfig = function (_a) {
+    var _b;
+    var config = _a.config, data = _a.data, localize = _a.localize, _c = _a.parseSpecialSyntax, parseSpecialSyntax = _c === void 0 ? function () { return undefined; } : _c;
+    var title = config.title && (0, getText_1.getText)((0, getVal_1.getVal)(data, config.title)); //getText converts richtext into plain. and leaves plain text unchanged
+    var titleOptional = config.titleOptional && (0, getText_1.getText)((0, getVal_1.getVal)(data, config.titleOptional));
+    var desc = config.desc && (0, getText_1.getText)((0, getVal_1.getVal)(data, config.desc));
+    var cardLabel = config.cardLabel &&
+        (parseSpecialSyntax({ string: config.cardLabel, content: data }) ||
+            (0, getVal_1.getVal)(data, config.cardLabel));
+    var video = config.video && (0, getVal_1.getVal)(data, config.video);
+    var tagDisplay = config.tagDisplay && (0, getVal_1.getVal)(data, config.tagDisplay);
+    var image = config.image && (0, getVal_1.getVal)(data, config.image);
+    var metaBlockData = (_b = config.metaBlock) === null || _b === void 0 ? void 0 : _b.map(function (d) {
+        var key = d.key;
+        var valuePath = d.valuePath;
+        var prefix = d.prefix;
+        var returnValue;
+        switch (key) {
+            case "name":
+                returnValue = (0, getVal_1.getVal)(data, valuePath);
+                //reduce surname down to initials
+                var split = returnValue.split(" ");
+                var name_1 = split[0];
+                var surname = split[1];
+                returnValue = "".concat(name_1).concat(surname ? " ".concat(surname[0], ".") : "");
+                break;
+            case "date":
+                returnValue = (0, createFormattedDate_1.createFormattedDate)((0, getVal_1.getVal)(data, valuePath));
+                break;
+            case "text":
+            default:
+                returnValue = (0, getVal_1.getVal)(data, valuePath);
+        }
+        if (prefix) {
+            return "".concat(localize(prefix), " : ").concat(returnValue);
+        }
+        return returnValue;
+    }).filter(function (d) { return d !== undefined; });
+    return {
+        title: title,
+        titleOptional: titleOptional,
+        desc: desc,
+        cardLabel: cardLabel,
+        video: video,
+        image: image,
+        metaBlockData: metaBlockData,
+        tagDisplay: tagDisplay,
+    };
+};
+exports.parseCardConfig = parseCardConfig;

package/dist/globalStyles/index.js

@@ -11,5 +11,5 @@ var normalize_1 = require("./normalize");
 var mixins_1 = require("../themes/mixins");
 require("../assets/fonts/style.css");
 var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for horizontal bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"], ["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for horizontal bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
+exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\na,\na:hover {\n  text-decoration: none !important;\n  color: ", ";\n  cursor: pointer;\n}\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\na,\na:hover {\n  text-decoration: none !important;\n  color: ", ";\n  cursor: pointer;\n}\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for horizontal bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"], ["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for horizontal bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.colors.greyColor100, themes_1.typo.sansSerif, themes_1.typo.serif);
 var templateObject_1, templateObject_2;