oolib 2.104.0 → 2.106.0

package/dist/components/Container/index.d.ts

@@ -1,13 +1,13 @@
-export function Comp({ children, className, style, enableContainerQuery }: {
-    children: any;
-    className: any;
-    style: any;
-    enableContainerQuery: any;
-}, ref: any): React.JSX.Element;
-export const Container: React.ForwardRefExoticComponent<{
-    children: any;
-    className: any;
-    style: any;
-    enableContainerQuery: any;
-} & React.RefAttributes<any>>;
-import React from "react";
+import React, { CSSProperties, ReactNode } from "react";
+export declare const Comp: ({ children, className, style, enableContainerQuery }: {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    enableContainerQuery?: boolean;
+}, ref: React.RefObject<HTMLDivElement> | null) => React.JSX.Element;
+export declare const Container: React.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    enableContainerQuery?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Container/index.styled.d.ts

@@ -1 +1,6 @@
-export const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { useContainerQuery } from "../../utils/_EXPORTS";
+interface StyledContainerProps {
+    containerQuery?: ReturnType<typeof useContainerQuery>['containerQuery'];
+}
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
+export {};

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

@@ -32,6 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
 exports.StyledContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 2rem;\n\n  ", "\n"], ["\n  padding: 0 2rem;\n\n  ", "\n"])), function (_a) {
     var containerQuery = _a.containerQuery;
-    return containerQuery ? containerQuery('sm')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding: 0 6rem\n          "], ["\n            padding: 0 6rem\n          "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          ", " {\n            padding: 0 6rem;\n          }\n        "], ["\n          ", " {\n            padding: 0 6rem;\n          }\n        "])), (0, mixins_1.mediaQuery)("sm"));
+    return containerQuery
+        ? containerQuery('sm')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 0 6rem;\n        "], ["\n          padding: 0 6rem;\n        "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          ", " {\n            padding: 0 6rem;\n          }\n        "], ["\n          ", " {\n            padding: 0 6rem;\n          }\n        "])), (0, mixins_1.mediaQuery)('sm'));
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -46,6 +46,7 @@ var TextInputs_1 = require("../../../TextInputs");
 var TextLoader_1 = require("../../../LoadersAndProgress/TextLoader");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
 var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
+var VirtualizedWrapper_1 = require("../VirtualizedWrapper");
 /**
  * if used independently, must be used inside a 'position: relative/absolute' div.
  */
@@ -86,32 +87,34 @@ var OptionsSingle = function (_a) {
         react_1.default.createElement("div", { style: { padding: "1rem" } },
             react_1.default.createElement(TextInputs_1.TextInput, { invert: invert, forceFocus: searchBarFocus, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
         react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
-    return (react_1.default.createElement(OptionsShell_1.OptionsShell, __assign({ ref: optionsRef }, {
-        yOrientation: yOrientation,
-        lightboxHeight: lightboxHeight,
-        lightboxStyle: lightboxStyle,
-        options: options,
-        optionsAnchor: optionsAnchor,
-        showOptions: showOptions,
-        SelectComp: SelectComp,
-        handleHideOptions: handleHideOptions,
-        label: label,
-        optionsModalLabel: optionsModalLabel,
-        invert: invert,
-        relativeToRef: relativeToRef,
-        popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent,
-        S: S
-    }),
-        isSearchable && genSearchBar(),
-        options.length === 0
-            ? react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })
-            : options.map(function (d, i) {
-                return (react_1.default.createElement(styled_1.StyledOption, { key: d.value, invert: invert, isSelected: !d.loading && (value === null || value === void 0 ? void 0 : value.value) === d.value, isFocussed: focussedOp === i, className: 'OKE-Dropdown__option', ref: function (el) { return focussedOp === i && el && scrollFocussedOpIntoView(el); }, onClick: function (e) {
-                        if (!d.loading)
-                            handleSelect(d);
-                        setSearchString && setSearchString('');
-                    }, S: S }, d.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: d, optionsClassName: optionsClassName, invert: invert, S: S })))));
-            }),
-        genCreateTagButton && genCreateTagButton(options)));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(OptionsShell_1.OptionsShell, __assign({ ref: optionsRef }, {
+            yOrientation: yOrientation,
+            lightboxHeight: lightboxHeight,
+            lightboxStyle: lightboxStyle,
+            options: options,
+            optionsAnchor: optionsAnchor,
+            showOptions: showOptions,
+            SelectComp: SelectComp,
+            handleHideOptions: handleHideOptions,
+            label: label,
+            optionsModalLabel: optionsModalLabel,
+            invert: invert,
+            relativeToRef: relativeToRef,
+            popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent,
+            S: S
+        }),
+            isSearchable && genSearchBar(),
+            options.length === 0 ?
+                react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })
+                :
+                    react_1.default.createElement(VirtualizedWrapper_1.VirtualizedWrapper, { options: options, lightboxHeight: lightboxHeight, searchString: searchString }, function (option, index, style) {
+                        return react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: 'OKE-Dropdown__option', ref: function (el) { return focussedOp === index && el && scrollFocussedOpIntoView(el); }, onClick: function (e) {
+                                if (!option.loading)
+                                    handleSelect(option);
+                                setSearchString && setSearchString('');
+                            }, S: S, style: style && style }, option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: option, optionsClassName: optionsClassName, invert: invert, S: S }))));
+                    }),
+            genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

package/dist/components/Dropdowns/comps/VirtualizedWrapper/index.d.ts

@@ -0,0 +1,7 @@
+export function VirtualizedWrapper({ children, options, lightboxHeight, searchString }: {
+    children: any;
+    options: any;
+    lightboxHeight: any;
+    searchString: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,66 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedWrapper = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var react_virtualized_1 = require("react-virtualized");
+var VirtualizedWrapper = function (_a) {
+    var children = _a.children, options = _a.options, lightboxHeight = _a.lightboxHeight, searchString = _a.searchString;
+    // Create a cache for measuring row heights
+    var cache = (0, react_1.useRef)(new react_virtualized_1.CellMeasurerCache({
+        fixedWidth: true,
+        defaultHeight: 50, // default height for each row before height is calculated
+    }));
+    (0, react_1.useEffect)(function () {
+    }, [options.length, searchString]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, options.length > 30 ?
+        react_1.default.createElement(styled_1.StyledOptionsShellWrapper, { lightboxHeight: lightboxHeight },
+            react_1.default.createElement(react_virtualized_1.AutoSizer, null, function (_a) {
+                var width = _a.width, height = _a.height;
+                return (react_1.default.createElement(react_virtualized_1.List, { width: width, height: height, rowHeight: cache.current.rowHeight, deferredMeasurementCache: cache.current, rowCount: options.length, rowRenderer: function (_a) {
+                        var key = _a.key, index = _a.index, style = _a.style, parent = _a.parent;
+                        var option = options[index];
+                        return (react_1.default.createElement(react_virtualized_1.CellMeasurer, { key: key, cache: cache.current, parent: parent, columnIndex: 0, rowIndex: index }, children(option, index, style)));
+                    } }));
+            }))
+        :
+            options.map(function (option, index) { return (children(option, index)); })));
+};
+exports.VirtualizedWrapper = VirtualizedWrapper;
+// ################ AutoSizer #######
+// The AutoSizer component is used to automatically calculate and adjust 
+// the size of its child components based on the available space. 
+// It wraps around the List component to dynamically resize the list based on the dimensions of its parent container.
+// ################  List ########## 
+// The List component is a virtualized list that efficiently renders a 
+// large number of items by only rendering the visible items on the screen. 
+// It accepts a rowCount prop to specify the total number of items in the list, 
+// and a rowRenderer prop to define how each item should be rendered.
+// ################  Cell Measurer #############
+// The CellMeasurer component is used within the rowRenderer function 
+// to measure the dimensions of each item in the list. 
+// It calculates the height and width of each cell and provides this information to the List component, 
+// allowing it to efficiently render the list with variable-sized items.

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

@@ -0,0 +1 @@
+export const StyledOptionsShellWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,45 @@
+"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.StyledOptionsShellWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+exports.StyledOptionsShellWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    \n    width: 100%;\n    \n    ", " {\n        width: 36rem;\n    }\n    height: ", ";\n\n"], ["\n    \n    width: 100%;\n    \n    ", " {\n        width: 36rem;\n    }\n    height: ", ";\n\n"])), (0, mixins_1.mediaQuery)("md"), function (_a) {
+    var lightboxHeight = _a.lightboxHeight;
+    switch (lightboxHeight) {
+        case 'large':
+            return '33rem';
+        case 'small':
+            return '20rem';
+        case 'medium':
+        default:
+            return '24rem';
+    }
+});
+var templateObject_1;

package/dist/components/EmptyStates/comps/EmptyStatesRenderer.js

@@ -36,6 +36,7 @@ var ThumbsUpSVG_1 = require("../PublishedSucccessful/comps/ThumbsUpSVG");
 var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var mixins_1 = require("../../../themes/mixins");
 var PublishedSuccessfullySVGShapes_1 = require("../PublishedSucccessful/comps/PublishedSuccessfullySVGShapes");
+var utilsOolib_1 = require("../../../utilsOolib");
 var EmptyStatesRenderer = function (_a) {
     var _image = _a.image, _b = _a.align, align = _b === void 0 ? "center" : _b, _title = _a.title, _subtitle = _a.subtitle, link = _a.link, button = _a.button, onClick = _a.onClick, preset = _a.preset;
     var imagesLookup = {
@@ -50,6 +51,7 @@ var EmptyStatesRenderer = function (_a) {
         searchDashBoardListing: searchDashBoardListing_svg_1.default,
         dashboardListing: dashboardListing_svg_1.default,
     };
+    var localize = (0, utilsOolib_1.useLocale)();
     //basically image prop can be either the src string or an object with more properties
     var image = typeof _image === "string" ? { src: _image } : _image; // src + style
     var title = typeof _title === "string" ? { text: _title } : _title; // text + style
@@ -63,10 +65,10 @@ var EmptyStatesRenderer = function (_a) {
             preset === "successFullyPublish" &&
                 react_1.default.createElement(styled_2.StyledPublishedSVGWrapper, null,
                     react_1.default.createElement(ThumbsUpSVG_1.ThumbsUpSVG, null)),
-            (title === null || title === void 0 ? void 0 : title.text) && (react_1.default.createElement(styled_1.StyledSERIF_4_5, { style: title.style, preset: preset }, title.text)),
-            (subtitle === null || subtitle === void 0 ? void 0 : subtitle.text) && (react_1.default.createElement(Typo_1.SANS_3, { style: subtitle.style }, subtitle.text)),
+            (title === null || title === void 0 ? void 0 : title.text) && (react_1.default.createElement(styled_1.StyledSERIF_4_5, { style: title.style, preset: preset }, localize(title.text))),
+            (subtitle === null || subtitle === void 0 ? void 0 : subtitle.text) && (react_1.default.createElement(Typo_1.SANS_3, { style: subtitle.style }, localize(subtitle.text))),
             link && (react_1.default.createElement(Typo_1.SANS_3, { style: { paddingTop: '1rem' } },
-                react_1.default.createElement(OKELink_1.OKELink, { text: link.text, onClick: onClick }))),
-            button && (react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onClick, style: { marginTop: "2rem" } }, button.text)))));
+                react_1.default.createElement(OKELink_1.OKELink, { text: localize(link.text), onClick: onClick }))),
+            button && (react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onClick, style: { marginTop: "2rem" } }, localize(button.text))))));
 };
 exports.EmptyStatesRenderer = EmptyStatesRenderer;

package/dist/components/EmptyStates/comps/styled.d.ts

@@ -1,8 +1,8 @@
 export const StyledSERIF_4_5: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
 export const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    children: any;
-    className: any;
-    style: any;
-    enableContainerQuery: any;
-} & import("react").RefAttributes<any>>, any, {}, never>;
+    children?: import("react").ReactNode;
+    className?: string;
+    style?: import("react").CSSProperties;
+    enableContainerQuery?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/components/ResourceInput/comp/ResourceDisplayBlock.d.ts

@@ -0,0 +1,8 @@
+export function ResourceDisplayBlock({ resources: _resources, filesLength, uploadProgress, removeResource, invert }: {
+    resources: any;
+    filesLength: any;
+    uploadProgress: any;
+    removeResource: any;
+    invert: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/ResourceInput/comp/ResourceDisplayBlock.js

@@ -0,0 +1,111 @@
+"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 __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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceDisplayBlock = void 0;
+var react_1 = __importStar(require("react"));
+var LoadersAndProgress_1 = require("../../LoadersAndProgress");
+var ActionMenu_1 = require("../../ActionMenu");
+var Typo_1 = require("../../Typo");
+var injectHttps_1 = require("../../../utils/injectHttps");
+var styled_1 = require("./styled");
+var PDFEmbed_1 = __importDefault(require("../../PDFInput/comps/PDFEmbed"));
+var react_player_1 = __importDefault(require("react-player"));
+var icons_1 = require("../../../icons");
+var FilePdf = icons_1.icons.FilePdf, ImageSquare = icons_1.icons.ImageSquare, SpeakerHigh = icons_1.icons.SpeakerHigh, File = icons_1.icons.File, VideoCamera = icons_1.icons.VideoCamera;
+var iconsConfig = { FilePdf: FilePdf, ImageSquare: ImageSquare, SpeakerHigh: SpeakerHigh, File: File, VideoCamera: VideoCamera };
+var ResourceDisplayBlock = function (_a) {
+    var _resources = _a.resources, filesLength = _a.filesLength, uploadProgress = _a.uploadProgress, removeResource = _a.removeResource, invert = _a.invert;
+    var _b = (0, react_1.useState)(__spreadArray([], _resources, true)), resources = _b[0], setResources = _b[1];
+    (0, react_1.useEffect)(function () {
+        setResources((_resources));
+    }, [_resources, resources]);
+    var downloadResource = function (url) {
+        window.open((0, injectHttps_1.injectHttps)(url));
+    };
+    var genInfoBand = function (_a) {
+        var d = _a.d, icon = _a.icon;
+        var IconComp = iconsConfig[icon];
+        return (react_1.default.createElement(styled_1.StyledMediaBand, { invert: invert },
+            react_1.default.createElement(IconComp, { size: 16 }),
+            react_1.default.createElement("div", { style: { width: '14rem' } },
+                react_1.default.createElement(Typo_1.SANS_0, { style: {
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                    } }, d === null || d === void 0 ? void 0 : d.originalFilename))));
+    };
+    var genResourceBlock = function (d) {
+        switch (true) {
+            case ['application/pdf'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
+                return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
+                    react_1.default.createElement(PDFEmbed_1.default, { filePath: d === null || d === void 0 ? void 0 : d.publicUrl, fileName: d === null || d === void 0 ? void 0 : d.originalFilename, fileID: d === null || d === void 0 ? void 0 : d.id }),
+                    genInfoBand({ d: d, icon: "FilePdf" })));
+            case ['image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/jpeg'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
+                return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
+                    react_1.default.createElement("img", { alt: "Thumbnail", src: d.mediaLink, style: { width: '100%' } }),
+                    genInfoBand({ d: d, icon: "ImageSquare" })));
+            case ['video/mp4'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
+                return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
+                    react_1.default.createElement(react_player_1.default, { id: d === null || d === void 0 ? void 0 : d.id, url: d === null || d === void 0 ? void 0 : d.publicUrl, controls: true, width: "100%" }),
+                    genInfoBand({ d: d, icon: "VideoCamera" })));
+            case ['audio/wav', 'audio/mp3', 'audio/mpeg'].indexOf(d === null || d === void 0 ? void 0 : d.contentType) !== -1:
+                return (react_1.default.createElement(styled_1.StyledMediaBlock, null,
+                    react_1.default.createElement(styled_1.StyledAudioElement, { key: "".concat(d === null || d === void 0 ? void 0 : d.id), controls: true, src: d === null || d === void 0 ? void 0 : d.publicUrl, controlsList: "nodownload noplaybackrate" // to hide controls
+                     }),
+                    genInfoBand({ d: d, icon: "SpeakerHigh" })));
+            default:
+                return (react_1.default.createElement(styled_1.StyledDefaultBlock, { id: d === null || d === void 0 ? void 0 : d.id }, genInfoBand({ d: d, icon: 'File' })));
+        }
+    };
+    return (react_1.default.createElement(react_1.Fragment, null, resources === null || resources === void 0 ? void 0 :
+        resources.map(function (file) { return (react_1.default.createElement(styled_1.StyledBlock, { style: { position: 'relative' }, invert: invert, key: file === null || file === void 0 ? void 0 : file.id },
+            genResourceBlock(file),
+            react_1.default.createElement("div", { style: { position: 'absolute', top: '0', right: '0' } },
+                react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonPrimary", invert: invert, actions: [
+                        {
+                            display: "Delete",
+                            onClick: function () { return removeResource(file === null || file === void 0 ? void 0 : file.id); },
+                        },
+                        {
+                            display: "Download",
+                            onClick: function () { return downloadResource((file === null || file === void 0 ? void 0 : file.mediaLink) || (file === null || file === void 0 ? void 0 : file.publicUrl)); },
+                        },
+                    ] })))); }),
+        Array.from({ length: filesLength }).map(function (_, index) { return (react_1.default.createElement(styled_1.StyledBlockWrapper, { key: index }, (react_1.default.createElement(styled_1.StyledBlock, { invert: invert },
+            react_1.default.createElement(LoadersAndProgress_1.ProgressBar, { progress: uploadProgress, invert: invert, text: uploadProgress && uploadProgress !== 100 ? "".concat(uploadProgress, "%") : 'Almost Done...' }))))); })));
+};
+exports.ResourceDisplayBlock = ResourceDisplayBlock;

package/dist/components/ResourceInput/comp/styled.d.ts

@@ -0,0 +1,6 @@
+export const StyledBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledBlockWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledAudioElement: import("styled-components").StyledComponent<"audio", any, {}, never>;
+export const StyledDefaultBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMediaBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMediaBand: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/ResourceInput/comp/styled.js

@@ -0,0 +1,33 @@
+"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.StyledMediaBand = exports.StyledMediaBlock = exports.StyledDefaultBlock = exports.StyledAudioElement = exports.StyledBlockWrapper = exports.StyledBlock = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utilsOolib_1 = require("../../../utilsOolib");
+var themes_1 = require("../../../themes");
+var mixins_1 = require("../../../themes/mixins");
+exports.StyledBlock = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 14rem;\n    height: 14rem;\n    display: flex;\n    align-items: center;\n    align-items: center;\n    overflow: hidden;\n    border: ", ";\n    ", "\n"], ["\n    width: 14rem;\n    height: 14rem;\n    display: flex;\n    align-items: center;\n    align-items: center;\n    overflow: hidden;\n    border: ", ";\n    ", "\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? "0.2px solid ".concat(themes_1.colors.greyColor10) : "1px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(themes_1.colors));
+}, (0, mixins_1.transition)('display'));
+exports.StyledBlockWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+exports.StyledAudioElement = styled_components_1.default.audio(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: inherit;\n    height: 40px;\n    background-color: ", ";\n    &::-webkit-media-controls-enclosure {\n        border-radius: 0;\n    }\n\n    &::-webkit-media-controls-panel {\n        background-color: ", ";\n    }\n    /* -webkit-appearance: none; */\n    \n    /* Reset webkit border-radius to 0 */\n    /* -webkit-border-radius: 0; */\n"], ["\n    width: inherit;\n    height: 40px;\n    background-color: ", ";\n    &::-webkit-media-controls-enclosure {\n        border-radius: 0;\n    }\n\n    &::-webkit-media-controls-panel {\n        background-color: ", ";\n    }\n    /* -webkit-appearance: none; */\n    \n    /* Reset webkit border-radius to 0 */\n    /* -webkit-border-radius: 0; */\n"])), (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors), (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors));
+exports.StyledDefaultBlock = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n"], ["\n"])));
+exports.StyledMediaBlock = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: inherit;\n    height: inherit;\n    display: flex;\n    align-items: center;\n    background-color:  ", ";\n    position: relative;\n    pointer-events: none;\n"], ["\n    width: inherit;\n    height: inherit;\n    display: flex;\n    align-items: center;\n    background-color:  ", ";\n    position: relative;\n    pointer-events: none;\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors);
+});
+exports.StyledMediaBand = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    bottom: 0;\n    height: 3rem;\n    color: ", ";\n    padding: 0.5rem;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 0.5rem;\n    background-color: ", ";\n"], ["\n    position: absolute;\n    bottom: 0;\n    height: 3rem;\n    color: ", ";\n    padding: 0.5rem;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 0.5rem;\n    background-color: ", ";\n"])), function (_a) {
+    var invert = _a.invert;
+    return (invert ? themes_1.colors.white : themes_1.colors.greyColor100);
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(themes_1.colors);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/ResourceInput/index.d.ts

@@ -0,0 +1,2 @@
+export function ResourceInput(props: any): React.JSX.Element;
+import React from "react";

package/dist/components/ResourceInput/index.js

@@ -0,0 +1,120 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceInput = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = require("styled-components");
+var Typo_1 = require("../Typo");
+var bannerContext_1 = require("../Banners/bannerContext");
+var icons_1 = require("../../icons");
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var ResourceDisplayBlock_1 = require("./comp/ResourceDisplayBlock");
+var styled_1 = require("./styled");
+var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
+var Plus = icons_1.icons.Plus;
+var ResourceInput = function (props) {
+    var parentOnChange = props.onChange, comp_id = props.id, _a = props.folderName, folderName = _a === void 0 ? "media" : _a, value = props.value, _b = props.multiple, multiple = _b === void 0 ? true : _b, uploadBtnText = props.uploadBtnText, readOnly = props.readOnly, invert = props.invert;
+    var theme = (0, styled_components_1.useTheme)();
+    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
+    var _c = (0, react_1.useState)(undefined), uploadProgress = _c[0], setUploadProgress = _c[1];
+    var _d = (0, react_1.useState)(0), filesLength = _d[0], setFilesLength = _d[1];
+    var _e = (0, react_1.useState)(value ? __spreadArray([], value, true) : []), resources = _e[0], setResources = _e[1];
+    var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
+    var upload = ((theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
+        mediaConfigs: {
+            type: "files",
+            folderName: folderName,
+            mediaType: "resources",
+        },
+        handleUploadProgess: handleUploadProgess,
+    })) ||
+        (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "resource" })).mutate;
+    var inputRef = (0, react_1.useRef)();
+    var handleUpload = function (files) {
+        if (!files)
+            return;
+        if (!upload)
+            return;
+        setFilesLength(files === null || files === void 0 ? void 0 : files.length);
+        upload(files, {
+            onSuccess: function (data) {
+                var successfulUploads = data // In case of multiple file uploads, there is possiblity of one file failing
+                    .filter(function (d) { return d.status === "success"; })
+                    .map(function (d) { return d.fileData; });
+                var failedUploads = data
+                    .filter(function (d) { return d.status === "error"; })
+                    .map(function (d) { return d.message; });
+                failedUploads && failedUploads.map(function (msg) { return SET_ALERT_BANNER(msg, "red", 3500); });
+                setResources(function (prevResources) {
+                    var newResources = __spreadArray(__spreadArray([], prevResources, true), successfulUploads, true);
+                    return newResources;
+                });
+                parentOnChange(comp_id, resources);
+                setFilesLength(0);
+            },
+            onError: function (err) {
+                var _a;
+                SET_ALERT_BANNER(((_a = err.response) === null || _a === void 0 ? void 0 : _a.data.errors[0].msg) || err.message, "red", 3500);
+                setFilesLength(0);
+            },
+        });
+    };
+    var removeResource = function (id) {
+        var newResources = resources.filter(function (d) { return d.id !== id; });
+        setResources(newResources);
+        parentOnChange && parentOnChange(props.id, newResources);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(styled_1.StyledWrapper, null,
+            react_1.default.createElement(ResourceDisplayBlock_1.ResourceDisplayBlock, { resources: resources, filesLength: filesLength, uploadProgress: uploadProgress, invert: invert, removeResource: function (id) { return removeResource(id); } }),
+            !readOnly &&
+                react_1.default.createElement(styled_1.StyledUploadButton, { onClick: function () { return inputRef.current.click(); }, invert: invert },
+                    react_1.default.createElement(Plus, { stroke: 'white', size: 20, weight: 'bold' }),
+                    react_1.default.createElement(Typo_1.SANS_2, { semibold: true, style: { marginTop: '0.5rem' } }, uploadBtnText || "Add Resource"))),
+        react_1.default.createElement("input", { id: "".concat(comp_id, "_resources_uploader"), type: "file", multiple: multiple, style: { display: 'none' }, ref: inputRef, onChange: function (v) { return handleUpload(v.target.files); } })));
+};
+exports.ResourceInput = ResourceInput;

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

@@ -0,0 +1,2 @@
+export const StyledUploadButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/ResourceInput/styled.js

@@ -0,0 +1,29 @@
+"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.StyledWrapper = exports.StyledUploadButton = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("../../themes/colors");
+var mixins_1 = require("../../themes/mixins");
+var utilsOolib_1 = require("../../utilsOolib");
+exports.StyledUploadButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: none;\n    width: 14rem;\n    height: 14rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    cursor: pointer;\n    color: ", ";;\n    text-align: center;\n    \n    background-color: ", "; \n\n\n    ", "\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n    border: none;\n    width: 14rem;\n    height: 14rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    cursor: pointer;\n    color: ", ";;\n    text-align: center;\n    \n    background-color: ", "; \n\n\n    ", "\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? colors_1.colors.greyColor100 : 'white';
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? (0, utilsOolib_1.getPrimaryColor40)(colors_1.colors) : (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors);
+}, (0, mixins_1.transition)('background-color'), function (_a) {
+    var invert = _a.invert;
+    return invert ? (0, utilsOolib_1.getPrimaryColor10)(colors_1.colors) : (0, utilsOolib_1.getPrimaryColor40)(colors_1.colors);
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? colors_1.colors.greyColor100 : (0, utilsOolib_1.getPrimaryColorText)(colors_1.colors);
+});
+exports.StyledWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  \n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  \n"])));
+var templateObject_1, templateObject_2;