oolib 2.137.0 → 2.138.0

package/dist/components/AudioInput/index.js

@@ -102,7 +102,6 @@ function AudioInput(_a) {
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
             , accept: "audio/*", ref: inputRef, style: { display: "none" }, id: "AudioField", onChange: function (v) {
                 handleUpload({ files: v.target.files });
-                v.target.value = null;
             } })));
 }
 ;

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

@@ -57,10 +57,7 @@ var OptionsAnimateWrapper = function (_a) {
         });
     }, [options.length]);
     return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { zIndex: 100000 }), (fixPos
-            ? __assign({ position: "fixed", top: "".concat(fixPos.y -
-                    (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
-                ? { transform: "translateY(-100%)" }
-                : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
+            ? __assign({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top" ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
             ? { bottom: 0, transform: "translateY(100%)" }
             : { top: 0, transform: "translateY(-100%)" })))) }, children));
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { DisplayIconProps } from '../../utils/comps/DisplayIcon';
 import { icons } from '../../icons';
 export interface OKELinkProps {
@@ -18,4 +18,25 @@ export interface OKELinkProps {
     style?: React.CSSProperties;
     avatar?: any;
 }
-export declare const OKELink: React.FC<OKELinkProps>;
+/**
+ * @component Renders a link component with customizable text, styling, and behavior.
+ *
+ * - The component props object containing the following properties:
+ * @prop {string} [to]: The URL to link to.
+ * @prop {string} [link]: An external URL to link to.
+ * @prop {(e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => void} [onClick]: A callback function to execute when the link is clicked.
+ * @prop {keyof typeof icons} [icon]: An icon to display before the text.
+ * @prop {DisplayIconProps['weight']} [iconWeight]: The weight of the icon font. Defaults to "regular".
+ * @prop {keyof typeof icons} [iconAfter]: An icon to display after the text.
+ * @prop {string} [text]: The text to display in the link.
+ * @prop {React.ReactNode} [children]: The content to be rendered inside the link.
+ * @prop {boolean} [invertUnderline]: A boolean indicating whether to invert the underline style of the link. Defaults to false.
+ * @prop {string} [color]: A string indicating the color of the link. Defaults to the primary color of the theme.
+ * @prop {boolean} [invert]: A boolean indicating whether to invert the colors of the link. Defaults to false.
+ * @prop {boolean} [disabled]: A boolean indicating whether the link is disabled. Defaults to false.
+ * @prop {string} [className]: A string indicating the CSS class name to apply to the link.
+ * @prop {React.CSSProperties} [style]: Additional CSS styles to apply to the link.
+ * @prop {ProfileImageInputProps['value']} [avatar]: An avatar to display in the link.
+ * @return {ReactElement} The rendered link component.
+ */
+export declare const OKELink: FunctionComponent<OKELinkProps>;

package/dist/components/OKELink/index.js

@@ -43,6 +43,27 @@ var injectHttps_1 = require("../../utils/injectHttps");
 var utilsOolib_1 = require("../../utilsOolib");
 var styled_1 = require("./styled");
 var ProfileImageInput_1 = require("../ImageInput/derivedComps/ProfileImageInput");
+/**
+ * @component Renders a link component with customizable text, styling, and behavior.
+ *
+ * - The component props object containing the following properties:
+ * @prop {string} [to]: The URL to link to.
+ * @prop {string} [link]: An external URL to link to.
+ * @prop {(e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => void} [onClick]: A callback function to execute when the link is clicked.
+ * @prop {keyof typeof icons} [icon]: An icon to display before the text.
+ * @prop {DisplayIconProps['weight']} [iconWeight]: The weight of the icon font. Defaults to "regular".
+ * @prop {keyof typeof icons} [iconAfter]: An icon to display after the text.
+ * @prop {string} [text]: The text to display in the link.
+ * @prop {React.ReactNode} [children]: The content to be rendered inside the link.
+ * @prop {boolean} [invertUnderline]: A boolean indicating whether to invert the underline style of the link. Defaults to false.
+ * @prop {string} [color]: A string indicating the color of the link. Defaults to the primary color of the theme.
+ * @prop {boolean} [invert]: A boolean indicating whether to invert the colors of the link. Defaults to false.
+ * @prop {boolean} [disabled]: A boolean indicating whether the link is disabled. Defaults to false.
+ * @prop {string} [className]: A string indicating the CSS class name to apply to the link.
+ * @prop {React.CSSProperties} [style]: Additional CSS styles to apply to the link.
+ * @prop {ProfileImageInputProps['value']} [avatar]: An avatar to display in the link.
+ * @return {ReactElement} The rendered link component.
+ */
 var OKELink = function (_a) {
     var _to = _a.to, link = _a.link, onClick = _a.onClick, icon = _a.icon, iconWeight = _a.iconWeight, iconAfter = _a.iconAfter, text = _a.text, children = _a.children, invertUnderline = _a.invertUnderline, color = _a.color, invert = _a.invert, disabled = _a.disabled, className = _a.className, style = _a.style, avatar = _a.avatar;
     var to = link || _to;

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

@@ -1,9 +1,15 @@
-export function genColor({ color, theme, invert, disabled }: {
-    color: any;
-    theme: any;
-    invert: any;
-    disabled: any;
-}): any;
-export const styledOKELinkCSS: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export const StyledLinkText: import("styled-components").StyledComponent<"span", any, {}, never>;
+import { OKFTheme } from "../../interfaces";
+export interface ColorProps {
+    color?: string;
+    theme?: OKFTheme;
+    invert?: boolean;
+    disabled?: boolean;
+}
+export declare const genColor: ({ color, theme, invert, disabled }: ColorProps) => string;
+interface StyledLinkProps extends ColorProps {
+    invertUnderline?: boolean;
+}
+export declare const styledOKELinkCSS: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledLinkProps, any>>;
+export declare const StyledLink: import("styled-components").StyledComponent<"a", any, StyledLinkProps, never>;
+export declare const StyledLinkText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/dist/components/OKELink/styled.js

@@ -43,8 +43,8 @@ var genColor = function (_a) {
                 : (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors);
 };
 exports.genColor = genColor;
-//separated out this way so we can use it in LexicalTextEditor's StyledEditorWrapperLex
-exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: 100%;\n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"], ["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: 100%;\n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"])), function (_a) {
+// Separated out this way so we can use it in LexicalTextEditor's StyledEditorWrapperLex
+exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  gap: 0.7rem;\n  align-items: center;\n  max-width: 100%;\n  text-decoration: none;\n  position: relative;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: ", ";\n    height: ", ";\n    pointer-events: ", ";\n    ", ";\n    background-color: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    &::after { width: ", "; }\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  gap: 0.7rem;\n  align-items: center;\n  max-width: 100%;\n  text-decoration: none;\n  position: relative;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: ", ";\n    height: ", ";\n    pointer-events: ", ";\n    ", ";\n    background-color: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    &::after { width: ", "; }\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return !disabled ? 'pointer' : 'not-allowed';
 }, exports.genColor, function (_a) {
@@ -60,6 +60,6 @@ exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (tem
     var invertUnderline = _a.invertUnderline;
     return invertUnderline ? '100%' : 0;
 });
-exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), exports.styledOKELinkCSS);
-exports.StyledLinkText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    max-width: 100%;\n    ", ";\n"], ["\n    max-width: 100%;\n    ", ";\n"])), mixins_1.ellipsis);
+exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.styledOKELinkCSS);
+exports.StyledLinkText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 100%;\n  ", ";\n"], ["\n  max-width: 100%;\n  ", ";\n"])), mixins_1.ellipsis);
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/PDFInput/index.js

@@ -113,7 +113,6 @@ function PDFInput(_a) {
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
             , accept: "application/pdf", ref: inputRef, style: { display: "none" }, id: "pdfField", onChange: function (v) {
                 handleUpload({ files: v.target.files });
-                v.target.value = null;
             } })));
 }
 exports.default = PDFInput;

package/dist/components/VideoInput/index.js

@@ -137,7 +137,6 @@ function VideoInput(_a) {
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
             , accept: "video/*", ref: inputRef, style: { display: "none" }, id: "videoField", onChange: function (v) {
                 handleUpload({ files: v.target.files });
-                v.target.value = null;
             } })));
 }
 exports.default = VideoInput;

package/dist/interfaces/index.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
 import { DefaultTheme } from "styled-components";
+import { ColorsType } from "../themes/colors";
 export interface OKFTheme extends DefaultTheme {
     ENV?: string;
     localize?: (text: ReactNode) => ReactNode;
+    colors?: ColorsType;
 }

package/package.json

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

package/dist/components/Coachmark/comps/MovingCoachmark/index.d.ts

@@ -1,3 +0,0 @@
-export default MovingCoachmark;
-declare function MovingCoachmark(props: any): React.JSX.Element;
-import React from 'react';

package/dist/components/Coachmark/comps/MovingCoachmark/index.js

@@ -1,68 +0,0 @@
-"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 });
-var react_1 = __importStar(require("react"));
-var Typo_1 = require("../../../Typo");
-var Buttons_1 = require("../../../Buttons");
-var styled_1 = require("./styled");
-var MovingCoachmark = function (props) {
-    var observer = props.observer, targetElm = props.targetElm, handleNext = props.handleNext, handleSkip = props.handleSkip, headline = props.headline, text = props.text, position = props.position, arrow = props.arrow, image = props.image, rank = props.rank;
-    var _a = (0, react_1.useState)(window.pageYOffset), pageYOffset = _a[0], setPageYOffset = _a[1];
-    (0, react_1.useEffect)(function () {
-        var updateScrollState = function (ev) {
-            console.log("".concat(ev.type, "ed while coachmark in view !!"));
-            setPageYOffset(window.pageYOffset);
-        };
-        var resizeTimerId;
-        var updateResizeState = function (ev) {
-            clearTimeout(resizeTimerId); // resize optimization bit
-            resizeTimerId = setTimeout(function () {
-                console.log("".concat(ev.type, "ed while coachmark in view !!"));
-                setPageYOffset(window.pageYOffset);
-            }, 500);
-        };
-        window.addEventListener('scroll', updateScrollState);
-        window.addEventListener('resize', updateResizeState);
-        return function () {
-            window.removeEventListener('scroll', updateScrollState);
-            window.removeEventListener('resize', updateResizeState);
-            observer.unobserve(targetElm);
-        };
-    }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        arrow && position && position !== 'center' && (react_1.default.createElement(styled_1.StyledMarkArrow, { position: position, targetElm: targetElm, pageYOffset: pageYOffset, arrow: arrow })),
-        react_1.default.createElement(styled_1.StyledCoachmark, { position: position, targetElm: targetElm, pageYOffset: pageYOffset },
-            react_1.default.createElement("div", { style: { display: 'flex', gap: '1.5rem', marginBottom: '2rem' } },
-                image && react_1.default.createElement("img", { src: image, alt: "instruction illustration", width: '60px' }),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-                        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, headline),
-                        react_1.default.createElement(Typo_1.SANS_0, null, rank.order)),
-                    react_1.default.createElement(Typo_1.SANS_3, { style: { marginTop: '0.5rem' } }, text))),
-            react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: handleSkip }, "Skip"),
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: handleNext }, rank.isLast ? "Confirm" : "Next")))));
-};
-exports.default = MovingCoachmark;

package/dist/components/Coachmark/comps/MovingCoachmark/styled.d.ts

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

package/dist/components/Coachmark/comps/MovingCoachmark/styled.js

@@ -1,45 +0,0 @@
-"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.StyledMarkArrow = exports.StyledCoachmark = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var themes_1 = require("../../../../themes");
-var utils_1 = require("./utils");
-var white = themes_1.colors.white;
-var StyledCoachmark = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 2rem;\n  max-width: 320px;\n  border-radius: 6px;\n  position: ", ";\n\n \n  ", "\n  \n"], ["\n  background-color: ", ";\n  padding: 2rem;\n  max-width: 320px;\n  border-radius: 6px;\n  position: ", ";\n\n \n  ", "\n  \n"])), white, function (_a) {
-    var position = _a.position;
-    return !position || position === 'center' ? 'relative' : 'absolute';
-}, function (_a) {
-    var position = _a.position, targetElm = _a.targetElm;
-    if (position) {
-        var targetElmCoords = targetElm.getBoundingClientRect();
-        var positionArgs = position.split(' ');
-        return (0, utils_1.positionMark)(targetElmCoords, positionArgs);
-    }
-    else
-        return '';
-});
-exports.StyledCoachmark = StyledCoachmark;
-var arrowOrientation = {
-    left: -90,
-    right: 90,
-    top: 0,
-    bottom: 180
-};
-var StyledMarkArrow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-width: 13px;\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n  transform: ", ";\n\n  ", "\n\n"], ["\n  position: absolute;\n  border-width: 13px;\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n  transform: ", ";\n\n  ", "\n\n"])), white, function (_a) {
-    var position = _a.position;
-    return "rotate(".concat(arrowOrientation[position.split(' ')[0]], "deg)");
-}, function (_a) {
-    var position = _a.position, targetElm = _a.targetElm;
-    var targetElmCoords = targetElm.getBoundingClientRect();
-    var positionArgs = position.split(' ');
-    return (0, utils_1.positionMark)(targetElmCoords, positionArgs, arrowOrientation[positionArgs[0]]);
-});
-exports.StyledMarkArrow = StyledMarkArrow;
-var templateObject_1, templateObject_2;

package/dist/components/Coachmark/comps/MovingCoachmark/utils/index.d.ts

@@ -1 +0,0 @@
-export function positionMark(targetElmCoords: any, markPos: any, arrowDegree: any): import("styled-components").FlattenSimpleInterpolation;

package/dist/components/Coachmark/comps/MovingCoachmark/utils/index.js

@@ -1,57 +0,0 @@
-"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.positionMark = void 0;
-var styled_components_1 = require("styled-components");
-var putInEmptySide = function (elmCoords, arrowDegree) {
-    var leftSideSpace = elmCoords.left;
-    var rightSideSpace = document.documentElement.clientWidth - elmCoords.right;
-    //30px marginal factor (10% of the narrowset phone 'iphone SE')
-    if (leftSideSpace > rightSideSpace + 30) {
-        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      right: ", "px; // 4 : start at the quarter of the element\n    "], ["\n      right: ", "px; // 4 : start at the quarter of the element\n    "])), (document.documentElement.clientWidth - elmCoords.right) + elmCoords.width / 4);
-    }
-    else if (rightSideSpace > leftSideSpace + 30) {
-        return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["left: ", "px;"], ["left: ", "px;"])), elmCoords.left + elmCoords.width / 4);
-    }
-    else {
-        // the target is centered or not to the left nor right by that much
-        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", "px;\n      transform: translateX(-50%) ", ";\n    "], ["\n      left: ", "px;\n      transform: translateX(-50%) ", ";\n    "])), elmCoords.left + elmCoords.width / 2, arrowDegree ? "rotate(".concat(arrowDegree, "deg)") : ''); //center the coachmark too
-    }
-};
-var position2ndArg = function (elmCoords, pos) {
-    switch (pos) {
-        case 'left':
-            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["left: ", "px;"], ["left: ", "px;"])), elmCoords.left);
-        case 'right':
-            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["right: ", "px;"], ["right: ", "px;"])), document.documentElement.clientWidth - elmCoords.right);
-        case 'top':
-            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["top: ", "px;"], ["top: ", "px;"])), elmCoords.top);
-        case 'bottom':
-            return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["bottom: ", "px;"], ["bottom: ", "px;"])), document.documentElement.clientHeight - elmCoords.bottom);
-        default:
-            return;
-    }
-};
-var positionMark = function (targetElmCoords, markPos, arrowDegree) {
-    var possiblePoses = ['left', 'right', 'top', 'bottom'];
-    var arrowSpace = arrowDegree !== undefined ? -13 : 10; //this function is called for arrow || coachmark, arrow width: 13px, leaving 10px space on the side for it
-    var elmVerticalMiddle = targetElmCoords.top + targetElmCoords.height / 2 - 13; //-----------------------------↑
-    var use2ndArg = markPos[1] && possiblePoses.includes(markPos[1]);
-    switch (markPos[0]) {
-        case 'left':
-            return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        right: ", "px;\n        ", "\n      "], ["\n        right: ", "px;\n        ", "\n      "])), (document.documentElement.clientWidth - targetElmCoords.right) + targetElmCoords.width + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : "top: ".concat(elmVerticalMiddle, "px"));
-        case 'right':
-            return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        left: ", "px;\n        ", "\n    "], ["\n        left: ", "px;\n        ", "\n    "])), targetElmCoords.right + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : "top: ".concat(elmVerticalMiddle, "px"));
-        case 'top':
-            return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        bottom: ", "px;////////////////////// -100%???\n        ", "\n    "], ["\n        bottom: ", "px;////////////////////// -100%???\n        ", "\n    "])), (document.documentElement.clientHeight - targetElmCoords.bottom) + targetElmCoords.height + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : putInEmptySide(targetElmCoords, arrowDegree));
-        case 'bottom':
-            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        top: ", "px;\n        ", "\n      "], ["\n        top: ", "px;\n        ", "\n      "])), targetElmCoords.bottom + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : putInEmptySide(targetElmCoords, arrowDegree));
-        default:
-            return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["position: relative"], ["position: relative"]))); // in case of a wrong position argument, re-center
-    }
-};
-exports.positionMark = positionMark;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/dist/components/Coachmark/config.d.ts

@@ -1,31 +0,0 @@
-export default coachingList;
-declare namespace coachingList {
-    let H5PEmbed: ({
-        element: string;
-        mark: {
-            headline: string;
-            text: string;
-            image: any;
-            position?: undefined;
-            arrow?: undefined;
-        };
-    } | {
-        element: string;
-        mark: {
-            headline: string;
-            text: string;
-            image: any;
-            position: string;
-            arrow: boolean;
-        };
-    })[];
-    let AnalysisDashboard: {
-        element: string;
-        mark: {
-            headline: string;
-            text: string;
-            position: string;
-            arrow: boolean;
-        };
-    }[];
-}

package/dist/components/Coachmark/config.js

@@ -1,61 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-// to be moved in the future .. being here is not optimal (oolib wise)
-// this file contain all coachmarks data for all comps using it
-var phone_tilt_png_1 = __importDefault(require("../../assets/images/phone-tilt.png"));
-var expand_arrows_png_1 = __importDefault(require("../../assets/images/expand-arrows.png"));
-var coachingList = {
-    H5PEmbed: [
-        {
-            element: 'set inside comp',
-            mark: {
-                headline: "Rotate your device",
-                text: "Enhance accesibility by rotating device to landscape mode",
-                image: phone_tilt_png_1.default,
-            }
-        },
-        {
-            element: 'set inside comp',
-            mark: {
-                headline: "Expand screen",
-                text: "Click on the expand button to access the presentation",
-                image: expand_arrows_png_1.default,
-                position: 'bottom right',
-                arrow: true,
-            }
-        }
-    ],
-    AnalysisDashboard: [
-        {
-            element: 'set inside comp',
-            mark: {
-                headline: "Set Country",
-                text: "Select All to see data across countries or select any one country to see it's data",
-                position: "bottom",
-                arrow: true
-            }
-        },
-        {
-            element: 'set inside comp',
-            mark: {
-                headline: "Set Research Areas",
-                text: "Select the research area from here",
-                position: "bottom",
-                arrow: true
-            }
-        },
-        {
-            element: 'set inside comp',
-            mark: {
-                headline: "Set Participant Type ",
-                text: "Select the participant type whose data you want to see",
-                position: "bottom",
-                arrow: true
-            }
-        }
-    ]
-};
-exports.default = coachingList;

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

@@ -1,4 +0,0 @@
-export function Coachmark(props: any): React.JSX.Element;
-import { useCoachmark } from './utils';
-import React from 'react';
-export { useCoachmark };

package/dist/components/Coachmark/index.js

@@ -1,74 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCoachmark = exports.Coachmark = void 0;
-var react_1 = __importStar(require("react"));
-var MovingCoachmark_1 = __importDefault(require("./comps/MovingCoachmark"));
-var styled_1 = require("./styled");
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "useCoachmark", { enumerable: true, get: function () { return utils_1.useCoachmark; } });
-var Coachmark = function (props) {
-    var _a = props.active, active = _a === void 0 ? true : _a, _b = props.observerThreshold, observerThreshold = _b === void 0 ? 0.6 : _b, currentMark = props.currentMark, handleSkip = props.handleSkip, handleNext = props.handleNext, rank = props.rank;
-    var _c = (0, react_1.useState)(false), isElementInView = _c[0], setIsElementInView = _c[1];
-    (0, react_1.useEffect)(function () {
-        if ((currentMark === null || currentMark === void 0 ? void 0 : currentMark.element) instanceof Element) {
-            if (currentMark.mark.position && currentMark.mark.position !== 'center') {
-                if (isElementInView)
-                    currentMark.element.style.zIndex = 160;
-            }
-            return function () {
-                if (currentMark.element)
-                    currentMark.element.style.zIndex = 'auto';
-            };
-        }
-    });
-    if (!currentMark || !active)
-        return null;
-    var element = currentMark.element, mark = currentMark.mark;
-    var targetElm = element instanceof Element && element;
-    if (!targetElm)
-        return null;
-    var observer = new IntersectionObserver(function (entries, observer) {
-        setIsElementInView(entries[0].isIntersecting);
-    }, { threshold: observerThreshold }); // if 60% of the element is covered, it is intersecting
-    observer.observe(targetElm);
-    return isElementInView && (react_1.default.createElement(styled_1.StyledOverlay, null,
-        react_1.default.createElement(MovingCoachmark_1.default, __assign({ observer: observer, targetElm: targetElm, handleNext: handleNext, handleSkip: handleSkip, rank: rank }, mark))));
-};
-exports.Coachmark = Coachmark;

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

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

package/dist/components/Coachmark/styled.js

@@ -1,37 +0,0 @@
-"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.StyledOverlay = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var colors_1 = require("../../themes/colors");
-var black_opacity30 = colors_1.colors.black_opacity30;
-var fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {opacity: 0}\n  to {opacity: 1}\n"], ["\n  from {opacity: 0}\n  to {opacity: 1}\n"])));
-var StyledOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  z-index: 150;\n  animation: ", " 0.5s linear; \n  display: grid;// centering the coachmark below by default, will have no\n  place-items: center;// effect if a position (other than 'center') is passed in the tooltip pbject\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  z-index: 150;\n  animation: ", " 0.5s linear; \n  display: grid;// centering the coachmark below by default, will have no\n  place-items: center;// effect if a position (other than 'center') is passed in the tooltip pbject\n"])), black_opacity30, fadeIn);
-exports.StyledOverlay = StyledOverlay;
-var templateObject_1, templateObject_2;

package/dist/components/Coachmark/utils/index.d.ts

@@ -1,13 +0,0 @@
-export function useCoachmark({ coachmarks, compIdentifier }: {
-    coachmarks: any;
-    compIdentifier?: string;
-}): {
-    activeMark: any;
-    rank: {
-        order: string;
-        isLast: boolean;
-    };
-    removeCoachmark: () => void;
-    showNextMark: (condition?: boolean) => void;
-    useReliableRef: (idx: any, dep?: any) => (node: any) => void;
-};

package/dist/components/Coachmark/utils/index.js

@@ -1,70 +0,0 @@
-"use strict";
-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.useCoachmark = void 0;
-var react_1 = require("react");
-var styled_components_1 = require("styled-components");
-var theme = (0, styled_components_1.useTheme)();
-var useCoachmark = function (_a) {
-    var coachmarks = _a.coachmarks, _b = _a.compIdentifier, compIdentifier = _b === void 0 ? '' : _b;
-    var _c = (0, react_1.useState)([]), elmsAttachedMarks = _c[0], setElmsAttachedMarks = _c[1];
-    var _d = (0, react_1.useState)(0), activeMarkIdx = _d[0], setActiveMarkIdx = _d[1];
-    var _e = (0, react_1.useState)(0), lastShownMark = _e[0], setLastShownMark = _e[1];
-    var setElmToMark = function (node, idx) {
-        if (idx instanceof Array) {
-            idx.forEach(function (i) { return coachmarks[i].element = node; });
-        }
-        else {
-            coachmarks[idx].element = node;
-        }
-        if (coachmarks.every(function (mark) { return mark.element instanceof Element; })) {
-            setElmsAttachedMarks(__spreadArray([], coachmarks, true));
-        }
-    };
-    var useReliableRef = function (idx, dep) {
-        if (dep === void 0) { dep = null; }
-        return (0, react_1.useCallback)(function (node) { return setElmToMark(node, idx); }, dep ? [dep] : []);
-    };
-    var showNextMark = function (condition) {
-        if (condition === void 0) { condition = true; }
-        if (condition) {
-            if (activeMarkIdx + 1 === elmsAttachedMarks.length) {
-                removeCoachmark();
-            }
-            else {
-                setActiveMarkIdx((activeMarkIdx === -1 ? lastShownMark : activeMarkIdx) + 1); // in case the mark was hidden temporarily if the condition isn't met 
-            }
-        }
-        else {
-            setLastShownMark(activeMarkIdx);
-            setActiveMarkIdx(-1);
-        }
-    };
-    var updateCoachmarkList = theme === null || theme === void 0 ? void 0 : theme.useUpdateCoachmarkChecklist();
-    // const {_Branch} = useGetQueryData('platformConfigs');
-    var removeCoachmark = function () {
-        if (process.env.REACT_APP_ENV !== 'dev') {
-            updateCoachmarkList.mutate({ property: compIdentifier, value: true });
-        }
-        setActiveMarkIdx(-1);
-    };
-    return {
-        activeMark: elmsAttachedMarks[activeMarkIdx],
-        rank: {
-            order: "".concat(activeMarkIdx + 1, "/").concat(elmsAttachedMarks.length),
-            isLast: activeMarkIdx === elmsAttachedMarks.length - 1
-        },
-        removeCoachmark: removeCoachmark,
-        showNextMark: showNextMark,
-        useReliableRef: useReliableRef
-    };
-};
-exports.useCoachmark = useCoachmark;