oolib 2.145.0 → 2.147.0

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

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCardArgs = void 0;
+var parseCardArgs = function (_a) {
+    var cardLabel = _a.cardLabel, title = _a.title, mediaType = _a.mediaType, image = _a.image, video = _a.video, metaName = _a.metaName, metaDate = _a.metaDate, statusTag = _a.statusTag, disabled = _a.disabled, tagDisplay = _a.tagDisplay, highlight = _a.highlight, desc = _a.desc, statusTagVariant = _a.statusTagVariant;
+    var data = {
+        title: title,
+        cardLabel: cardLabel,
+        highlight: highlight,
+        image: image && [{ publicUrl: image }],
+        video: video && [{ publicUrl: video }],
+        name: metaName || undefined,
+        date: metaDate || undefined,
+        tagDisplay: tagDisplay,
+        desc: desc,
+    };
+    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay", statusTagVariant: 'statusTagVariant', desc: "desc" }, (mediaType === "image" ? { image: "image" } : {})), (mediaType === "video" ? { video: "video" } : {})), { metaBlock: __spreadArray(__spreadArray([], (metaName ? [{ key: "name", valuePath: "name" }] : []), true), (metaDate ? [{ key: "date", valuePath: "date" }] : []), true) });
+    return {
+        data: data,
+        statusTag: statusTag,
+        config: config,
+        disabled: disabled,
+        highlight: highlight,
+        statusTagVariant: statusTagVariant
+    };
+};
+exports.parseCardArgs = parseCardArgs;

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

@@ -51,7 +51,7 @@ var BlockLabel = function (props) {
     var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
         ? "danger"
         : errorMsgs[0].type || "danger";
-    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
+    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className, id: "tempBlocklabelOverride" },
         react_1.default.createElement("div", { style: { display: "flex", gap: "0.4rem" } },
             (label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { color: disabled ? colors_1.colors.grey40 : colors_1.colors.grey80, semibold: true }, label || inputOnlyLabel)),
             !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,

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

@@ -21,6 +21,7 @@ var react_router_dom_1 = require("react-router-dom");
 var lodash_1 = require("lodash");
 var icons_1 = require("../../../icons");
 var themes_1 = require("../../../themes");
+var Typo2_1 = require("../Typo2");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, size = _a.size, color = _a.color, iconWeight = _a.iconWeight;
     var IconComp = icons_1.icons[icon];
@@ -42,7 +43,7 @@ var ButtonStyledWrapper = function (_a) {
         : (M && 'M') || 'S';
     var calcIconSize = function () {
         var thisSize = iconSize || size;
-        return thisSize === 'S' ? 14 : 20;
+        return thisSize === 'S' ? 16 : 20;
     };
     var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
     return (react_1.default.createElement(styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
@@ -55,7 +56,7 @@ var ButtonStyledWrapper = function (_a) {
             debouncedMouseDown && debouncedMouseDown(e);
         }, composition: composition, width: width, color: color, forceHover: forceHover },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' }),
-        displayText && react_1.default.createElement(styled_1.Styled_UI_BODY_BOLD_SM, { semibold: true }, displayText),
+        displayText && react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, { semibold: true }, displayText),
         iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' })));
 };
 /**

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

@@ -0,0 +1,4 @@
+export function ImagePlaceholder({ title, aspectRatio }: {
+    title: any;
+    aspectRatio?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePlaceholder = void 0;
+var gradient_background_jpg_1 = __importDefault(require("../../../assets/images/gradient_background.jpg"));
+var styled_1 = require("./styled");
+var ImagePlaceholder = function (_a) {
+    var title = _a.title, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? "5/3" : _b;
+    var colors = [
+        '#9EE4F1',
+        '#ABF3BD',
+        '#ABBAF3',
+        '#C9ABF3',
+        '#F3ABC8',
+        '#F3DAAB',
+        '#F1F3AB',
+        '#CAF3AB',
+    ];
+    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.createElement(styled_1.StyledContainer, { aspectRatio: aspectRatio },
+        React.createElement(styled_1.StyledImageLayer, null,
+            React.createElement(styled_1.StyledImage, { src: gradient_background_jpg_1.default, alt: title })),
+        React.createElement(styled_1.StyledColorOverlay, { color: randomColor }),
+        React.createElement(styled_1.StyledLetterContainer, null,
+            React.createElement(styled_1.StyledLetter, null, firstLetter))));
+};
+exports.ImagePlaceholder = ImagePlaceholder;

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

@@ -0,0 +1,6 @@
+export const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledImageLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export const StyledColorOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLetterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLetter: import("styled-components").StyledComponent<"span", any, {}, never>;

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

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

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

@@ -0,0 +1,9 @@
+export default MetaBlock;
+declare function MetaBlock({ data, config, disabled, align, orientation, }: {
+    data: any;
+    config: any;
+    disabled: any;
+    align?: string;
+    orientation?: string;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,96 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../themes/colors");
+var Typo2_1 = require("../../components/Typo2");
+var mixins_1 = require("../../../themes/mixins");
+var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
+var OKELink_1 = require("../../../components/OKELink");
+var parseMetaBlockConfig_1 = require("./utils/parseMetaBlockConfig");
+var utilsOolib_1 = require("../../../utilsOolib");
+var grey40 = colors_1.colors.grey40, grey50 = colors_1.colors.grey50, grey90 = colors_1.colors.grey90;
+var StyledHorOrientContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n  ", "\n"])), function (_a) {
+    var align = _a.align;
+    return align === "center" && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
+});
+var StyledVerOrientContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  ", "\n"])), function (_a) {
+    var align = _a.align;
+    return align === "center" && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+});
+var StyledMetaWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n"])));
+var STYLED_UI_CAPTION = (0, styled_components_1.default)(Typo2_1.UI_CAPTION)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), mixins_1.ellipsis, function (_a) {
+    var disabled = _a.disabled;
+    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), disabled ? grey40 : grey50);
+});
+var StyledSeparator = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 0.3rem;\n  height: 0.3rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), grey50);
+var MetaBlock = function (_a) {
+    var data = _a.data, config = _a.config, disabled = _a.disabled, _b = _a.align, align = _b === void 0 ? "left" : _b, _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var localize = (0, utilsOolib_1.useLocale)();
+    var value = (0, parseMetaBlockConfig_1.parseMetaBlockConfig)({ config: config, data: data, localize: localize });
+    if (value.length === 0)
+        return null;
+    var genText = function (_a) {
+        var icon = _a.icon, display = _a.display;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, size: 15, color: grey90, weight: "regular" })),
+            react_1.default.createElement(STYLED_UI_CAPTION, { disabled: disabled, capitalize: true }, display)));
+    };
+    var genLink = function (_a) {
+        var icon = _a.icon, display = _a.display, to = _a.to;
+        return (react_1.default.createElement(Typo2_1.UI_CAPTION, { style: icon ? { marginBottom: "-3.3px" } : {} },
+            " ",
+            react_1.default.createElement(OKELink_1.OKELink, { to: to, text: display, icon: icon })));
+    };
+    /**
+     * basically we need a max width on each meta item
+     * only then the ellipsis would work. So the logic we
+     * use for now is, the max width is equally divided between
+     * the total number of meta items. However to calc this,
+     * we need to minus out the separator/s and flex gap/s
+     *
+     * Hence this semi complex calculation
+     */
+    var calcMaxWidthForEachMetaItem_HOR = function (value) {
+        var percent = (100 / value.length) + '%';
+        var pixelsToMinus = ((value.length - 1) * (2 + 0.3)) + 'rem'; // 2 = flex gap on the 2 sides of the separator, 0.3 = separator width
+        var toReturn = "calc(".concat(percent, " - ").concat(pixelsToMinus, ")");
+        return toReturn;
+    };
+    return orientation === "horizontal" ? (react_1.default.createElement(StyledHorOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, { key: i },
+        react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: calcMaxWidthForEachMetaItem_HOR(value) /*100 / value.length + "%"*/ } }, v.to
+            ? genLink({ display: v.display, to: v.to, icon: v.icon })
+            : genText({ icon: v.icon, display: v.display })),
+        i + 1 === value.length ? null : (react_1.default.createElement(StyledSeparator, { disabled: disabled })))); }))) : (react_1.default.createElement(StyledVerOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement("div", { style: { maxWidth: "100%" } }, v.to
+        ? genLink({ display: v.display, to: v.to, icon: v.icon })
+        : genText({ icon: v.icon, display: v.display }))); })));
+};
+exports.default = MetaBlock;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/v2/components/MetaBlock/utils/parseMetaBlockConfig.d.ts

@@ -0,0 +1,5 @@
+export function parseMetaBlockConfig({ config, localize, data }: {
+    config: any;
+    localize: any;
+    data: any;
+}): any;

package/dist/v2/components/MetaBlock/utils/parseMetaBlockConfig.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseMetaBlockConfig = void 0;
+var stitchLink_1 = require("../../../../utils/stitchLink");
+var createFormattedDate_1 = require("../../../../utils/momentjs/createFormattedDate");
+var getVal_1 = require("../../../../utils/getterSetterDeleter/getVal");
+var parseMetaBlockConfig = function (_a) {
+    var config = _a.config, localize = _a.localize, data = _a.data;
+    if (!config)
+        return [];
+    //else
+    return config
+        .map(function (d) {
+        var key = d.key, valuePath = d.valuePath, prefix = d.prefix, icon = d.icon, linkConfig = d.linkConfig;
+        var display;
+        switch (key) {
+            case "name":
+                display = (0, getVal_1.getVal)(data, valuePath);
+                if (display && typeof display === 'string') {
+                    //reduce surname down to initials
+                    var split = display.split(" ");
+                    var name_1 = split[0];
+                    var surname = split[1];
+                    display = "".concat(name_1).concat(surname ? " ".concat(surname[0], ".") : "");
+                }
+                break;
+            case "date":
+                display = (0, createFormattedDate_1.createFormattedDate)((0, getVal_1.getVal)(data, valuePath));
+                break;
+            case "text":
+            default:
+                display = (0, getVal_1.getVal)(data, valuePath);
+        }
+        if (prefix) {
+            display = "".concat(localize(prefix)).concat(display);
+        }
+        var toReturn = { display: display };
+        //now to incorporate things like icons, imgs, links
+        if (icon)
+            toReturn.icon = icon;
+        if (linkConfig)
+            toReturn.to = (0, stitchLink_1.stitchLink)({ data: data, config: linkConfig });
+        return toReturn;
+    })
+        .filter(function (d) { return d.display !== undefined; });
+};
+exports.parseMetaBlockConfig = parseMetaBlockConfig;

package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react';
+export interface TagDisplayProps {
+    display: string;
+    style?: React.CSSProperties;
+    M?: boolean;
+    XS?: boolean;
+    tagColor?: string;
+    textColor?: string;
+    variant?: 'primary' | 'secondary' | 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | 'grey';
+}
+/**
+ * @component Renders a TagDisplay component with customizable text, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagDisplay component.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the TagDisplay.
+ * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
+ * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
+ * @prop {string} [tagColor] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {red | green | black} [color] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {string} [textColor] : A string indicating the text color of the component. Defaults to undefined.
+ * @prop {('primary' | 'secondary')} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @return {ReactElement} The rendered TagDisplay component.
+ */
+export declare const TagDisplay: FunctionComponent<TagDisplayProps>;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagDisplay = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var getTypoComp_1 = require("../../utils/getTypoComp");
+/**
+ * @component Renders a TagDisplay component with customizable text, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagDisplay component.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the TagDisplay.
+ * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
+ * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
+ * @prop {string} [tagColor] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {red | green | black} [color] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {string} [textColor] : A string indicating the text color of the component. Defaults to undefined.
+ * @prop {('primary' | 'secondary')} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @return {ReactElement} The rendered TagDisplay component.
+ */
+var TagDisplay = function (_a) {
+    var display = _a.display, style = _a.style, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = (0, getTypoComp_1.getTypoComp)({ typo: variant === "secondary" ? "caption" : "tag" }); // secondary variant has a different typo - "UI_CAPTION"
+    return (react_1.default.createElement(styled_1.StyledTagDisplay, { variant: variant, textColor: textColor, tagColor: tagColor, size: size, style: style },
+        react_1.default.createElement(TYPO_COMP, null, display)));
+};
+exports.TagDisplay = TagDisplay;

package/dist/v2/components/Tags/Comps/TagDisplay/styled.d.ts

@@ -0,0 +1,5 @@
+import { TagDisplayProps } from ".";
+export interface StyledTagDisplayProps extends Omit<TagDisplayProps, 'display' | 'style' | 'M' | 'XS'> {
+    size?: 'M' | 'XS' | 'S';
+}
+export declare const StyledTagDisplay: import("styled-components").StyledComponent<"div", any, StyledTagDisplayProps, never>;

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

@@ -0,0 +1,59 @@
+"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.StyledTagDisplay = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var styled_1 = require("../styled");
+var themes_1 = require("../../../../themes");
+var grey10 = themes_1.colors.grey10, grey30 = themes_1.colors.grey30, white = themes_1.colors.white, grey80 = themes_1.colors.grey80, success = themes_1.colors.success, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
+exports.StyledTagDisplay = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: max-content;\n  ", "\n  ", "\n"], ["\n  width: max-content;\n  ", "\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return (0, styled_1.commonStyle)({ size: size });
+}, function (_a) {
+    var variant = _a.variant, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
+    switch (variant) {
+        case 'primary':
+            return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), tagColor || grey30, textColor || white);
+        case 'secondary':
+            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n          height: ", ";\n          border-radius: 3.1rem;\n        "], ["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n          height: ", ";\n          border-radius: 3.1rem;\n        "])), (size === 'XS' || size === 'S') ? '1px' : '2px', tagColor || grey10, textColor || grey80, size === 'XS' ? '2.4rem' : '2.6rem');
+        case 'positive':
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n        "], ["\n          background-color: ", ";    \n          color: ", ";\n        "])), success, textColor || white);
+        case 'inProgress':
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n        "], ["\n          background-color: ", ";    \n          color: ", ";\n        "])), blue, textColor || white);
+        case 'warning':
+            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n        "], ["\n          background-color: ", ";    \n          color: ", ";\n        "])), yellow, textColor || white);
+        case 'negative':
+            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n        "], ["\n          background-color: ", ";    \n          color: ", ";\n        "])), tagColor || error, textColor || white);
+        case 'special':
+            return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          background-color: ", ";    \n          color: ", ";\n      "], ["\n          background-color: ", ";    \n          color: ", ";\n      "])), tagColor || purple, textColor || white);
+        case 'grey':
+            return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";  \n        "], ["\n          background-color: ", ";\n          color: ", ";  \n        "])), tagColor || grey30, textColor || white);
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/v2/components/Tags/Comps/styled.d.ts

@@ -0,0 +1,25 @@
+import { ColorsType } from '../../../../themes/colors';
+interface CommonStyleProps {
+    size: keyof typeof SIZES;
+}
+interface TextColorProps {
+    invert?: boolean;
+    colors?: ColorsType;
+}
+export interface HoverProps {
+    invert?: boolean;
+    colors: ColorsType;
+}
+export declare const SIZES: {
+    XS: string;
+    S: string;
+    M: string;
+};
+export declare const commonStyle: ({ size }: CommonStyleProps) => string;
+export declare const textColor: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const blueHover: ({ invert, colors }: HoverProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const redHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const greenHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const blackHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const greyHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export {};

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

@@ -0,0 +1,52 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.greyHover = exports.blackHover = exports.greenHover = exports.redHover = exports.blueHover = exports.textColor = exports.commonStyle = exports.SIZES = void 0;
+var styled_components_1 = require("styled-components");
+var colors_1 = require("../../../../themes/colors");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, white = colors_1.colors.white, greyColor5 = colors_1.colors.greyColor5, hoverRed = colors_1.colors.hoverRed, hoverInvertRed = colors_1.colors.hoverInvertRed, hoverGreen = colors_1.colors.hoverGreen, invertHoverGreen = colors_1.colors.invertHoverGreen;
+exports.SIZES = {
+    XS: '1.8rem',
+    S: "2.5rem",
+    M: "3rem",
+};
+var commonStyle = function (_a) {
+    var size = _a.size;
+    return "\n  padding: ".concat(size === 'XS' ? '0.5rem' : '1rem', ";\n  border-radius: 4px;\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  height: ").concat(exports.SIZES[size], ";\n  max-width: 100%;\n");
+};
+exports.commonStyle = commonStyle;
+var textColor = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), invert ? greyColor100 : white);
+};
+exports.textColor = textColor;
+var blueHover = function (_a) {
+    var invert = _a.invert, colors = _a.colors;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), invert ? (0, utilsOolib_1.getPrimaryColor10)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), invert ? greyColor100 : (0, utilsOolib_1.getPrimaryColorText)(colors));
+};
+exports.blueHover = blueHover;
+var redHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? hoverInvertRed : hoverRed);
+};
+exports.redHover = redHover;
+var greenHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? invertHoverGreen : hoverGreen);
+};
+exports.greenHover = greenHover;
+var blackHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? greyColor5 : greyColor80);
+};
+exports.blackHover = blackHover;
+var greyHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? greyColor80 : greyColor10);
+};
+exports.greyHover = greyHover;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1 @@
+export { TagDisplay } from './Comps/TagDisplay';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagDisplay = void 0;
+var TagDisplay_1 = require("./Comps/TagDisplay");
+Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function () { return TagDisplay_1.TagDisplay; } });

package/dist/v2/components/Tags/utils/getTypoComp.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const STYLED_ELLIPSIS_UI_TAG: import("styled-components").StyledComponent<React.FunctionComponent<import("../../Typo2").TypoCompProps>, any, {}, never>;
+export declare const STYLED_ELLIPSIS_UI_CAPTION: import("styled-components").StyledComponent<React.FunctionComponent<import("../../Typo2").TypoCompProps>, any, {}, never>;
+type TypoVariant = 'tag' | 'caption';
+type TypoComponent = (props: React.HTMLAttributes<HTMLSpanElement>) => JSX.Element;
+type GetTypoComp = (config?: {
+    typo?: TypoVariant;
+}) => TypoComponent;
+export declare const getTypoComp: GetTypoComp;
+export {};

package/dist/v2/components/Tags/utils/getTypoComp.js

@@ -0,0 +1,38 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTypoComp = exports.STYLED_ELLIPSIS_UI_CAPTION = exports.STYLED_ELLIPSIS_UI_TAG = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+var Typo2_1 = require("../../Typo2");
+exports.STYLED_ELLIPSIS_UI_TAG = (0, styled_components_1.default)(Typo2_1.UI_TAG)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
+exports.STYLED_ELLIPSIS_UI_CAPTION = (0, styled_components_1.default)(Typo2_1.UI_CAPTION)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
+var getTypoComp = function (_a) {
+    var _b = _a.typo, typo = _b === void 0 ? "tag" : _b;
+    return function (props) {
+        console.log({ typo: typo });
+        return (typo === "caption"
+            ? react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_CAPTION, __assign({}, props))
+            : react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_TAG, __assign({}, props)));
+    };
+};
+exports.getTypoComp = getTypoComp;
+var templateObject_1, templateObject_2;

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

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