oolib 2.110.1 → 2.111.0

package/dist/UIContent/index.d.ts

@@ -1,29 +1,29 @@
 export namespace UIContent {
-    const general: {};
+    let general: {};
     namespace ImageInput {
-        const onlyFirstFileConsiderErrMsg: string;
-        const corruptUrlErrMsg: string;
+        let onlyFirstFileConsiderErrMsg: string;
+        let corruptUrlErrMsg: string;
     }
     namespace VideoInput {
-        const uploadError: string;
+        let uploadError: string;
     }
     namespace Pdf {
-        const uploadError_1: string;
+        let uploadError_1: string;
         export { uploadError_1 as uploadError };
     }
     namespace SimpleTable {
-        const _delete: string;
+        let _delete: string;
         export { _delete as delete };
-        export const duplicate: string;
-        export const insertRowAfter: string;
-        export const insertRowBefore: string;
-        export const clearContent: string;
-        export const insertColAfter: string;
-        export const insertColBefore: string;
-        export const addHeaderCol: string;
-        export const removeHeaderCol: string;
-        export const addHeaderRow: string;
-        export const removeHeaderRow: string;
-        export const stretchToFullWidth: string;
+        export let duplicate: string;
+        export let insertRowAfter: string;
+        export let insertRowBefore: string;
+        export let clearContent: string;
+        export let insertColAfter: string;
+        export let insertColBefore: string;
+        export let addHeaderCol: string;
+        export let removeHeaderCol: string;
+        export let addHeaderRow: string;
+        export let removeHeaderRow: string;
+        export let stretchToFullWidth: string;
     }
 }

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

@@ -1,15 +1,58 @@
-export function Accordion({ id, HeaderStyle, CustomHeader, noHeader, children, expand: expandProp, setExpand: setExpandProp, title, label, infoTooltip, invert, percent, }: {
-    id: any;
-    HeaderStyle?: string;
-    CustomHeader: any;
+import React from 'react';
+import { TooltipProps } from '../Tooltip';
+export interface HeaderProps {
+    title: string;
+    expand: boolean;
+    handleToggle: (expand: boolean) => void;
+    infoTooltip?: string | {
+        text: string;
+        position?: TooltipProps['position'];
+        popOutOfOverflowHiddenParent?: boolean;
+    };
+    invert?: boolean;
+}
+export interface HeaderStyle2Props extends HeaderProps {
+    label?: string;
+    percent?: {
+        value: number;
+    };
+}
+export interface AccordionProps {
+    id: string;
+    HeaderStyle?: 'HeaderStyle1' | 'HeaderStyle2' | 'HeaderStyle3';
+    CustomHeader?: React.ReactNode;
     noHeader?: boolean;
-    children: any;
+    children: React.ReactNode;
     expand?: boolean;
-    setExpand: any;
-    title: any;
-    label: any;
-    infoTooltip: any;
-    invert: any;
-    percent: any;
-}): React.JSX.Element;
-import React from "react";
+    setExpand?: (expand: boolean) => void;
+    title: string;
+    label?: string;
+    infoTooltip?: string | {
+        text: string;
+        position?: TooltipProps['position'];
+        popOutOfOverflowHiddenParent?: boolean;
+    };
+    invert?: boolean;
+    percent?: {
+        value: number;
+    };
+}
+/**
+ * @component Renders an accordion component with customizable title and content.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} id: A unique ID for the accordion.
+ * @prop {'HeaderStyle1' | 'HeaderStyle2' | 'HeaderStyle3'} HeaderStyle: The style of the accordion header. Defaults to "HeaderStyle1".
+ * @prop {React.FunctionComponent} CustomHeader: A component that will be used instead of generating a header based on the other props.
+ * @prop {boolean} noHeader: A boolean indicating whether to render the header. Defaults to false.
+ * @prop {React.ReactNode} children: The content to be rendered inside the accordion.
+ * @prop {boolean} expand: A boolean indicating whether the accordion is expanded. Defaults to false.
+ * @prop {(expand: boolean) => void} setExpand: A callback function to set the expanded state of the accordion.
+ * @prop {string} title: The title of the accordion.
+ * @prop {string} label: A label to be displayed next to the title.
+ * @prop { string | { text: string; position?: TooltipProps['position']; popOutOfOverflowHiddenParent?: boolean }} infoTooltip: A string or object containing text and optional position & popOutOfOverflowHiddenParent props for the info tooltip.
+ * @prop {boolean} invert: A boolean indicating whether to invert the background color of the accordion. Defaults to false.
+ * @prop {object} percent: An object containing a "value" property for the percent to be displayed in the pie. e.g. {value: 80}
+ * @return {ReactElement} The rendered accordion component.
+ */
+export declare const Accordion: React.FunctionComponent<AccordionProps>;

package/dist/components/Accordion/index.js

@@ -1,15 +1,4 @@
 "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);
@@ -45,43 +34,56 @@ var utilsOolib_1 = require("../../utilsOolib");
 var PercentCompletedPie_1 = require("../PercentCompletedPie");
 var Tooltip_1 = require("../Tooltip");
 var styled_1 = require("./styled");
-//this is the new grey background, slim one. with the Caret icon on the right
-//used in access control builder and several other places.
 var HeaderStyle1 = function (_a) {
     var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle, infoTooltip = _a.infoTooltip, invert = _a.invert;
     return (react_1.default.createElement(styled_1.StyledHeaderStyle1Wrapper, { onClick: function () { return handleToggle(!expand); } },
         react_1.default.createElement(styled_1.StyledTitleWrapper, null,
             react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, title),
-            infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right', invert: invert, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))),
+            infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: typeof infoTooltip === 'string' ? infoTooltip : infoTooltip.text, position: typeof infoTooltip !== 'string' ? infoTooltip.position || 'right' : 'right', invert: invert, popOutOfOverflowHiddenParent: typeof infoTooltip !== 'string' && infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))),
         react_1.default.createElement(styled_1.NormalizedButton, null,
             react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
                 react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })))));
 };
-//this is the new grey background, slim one. with the Caret icon on the right
-//used in access control builder and several other places.
 var HeaderStyle3 = function (_a) {
     var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle, infoTooltip = _a.infoTooltip, invert = _a.invert;
     return (react_1.default.createElement(styled_1.StyledHeaderStyle3Wrapper, { onClick: function () { return handleToggle(!expand); } },
         react_1.default.createElement(styled_1.StyledTitleWrapper, null,
             react_1.default.createElement(Typo_1.SERIF_4_5, null, title),
-            infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right', invert: invert, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))),
+            infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: typeof infoTooltip === 'string' ? infoTooltip : infoTooltip.text, position: typeof infoTooltip !== 'string' ? infoTooltip.position || 'right' : 'right', invert: invert, popOutOfOverflowHiddenParent: typeof infoTooltip !== 'string' && infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))),
         react_1.default.createElement(styled_1.NormalizedButton, null,
             react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
                 react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })))));
 };
-//analysis dashboard wordcloud - this is the old accordion header style designed at the time of updates module
 var HeaderStyle2 = function (_a) {
     var title = _a.title, label = _a.label, expand = _a.expand, handleToggle = _a.handleToggle, percent = _a.percent, infoTooltip = _a.infoTooltip, invert = _a.invert;
     return (react_1.default.createElement(styled_1.StyledHeaderStyle2Wrapper, { onClick: function () { return handleToggle(!expand); } },
         react_1.default.createElement(styled_1.StyledTitleHeaderStyle2Wrapper, null,
             percent && react_1.default.createElement(PercentCompletedPie_1.PercentCompletedPie, { percent: percent.value }),
             react_1.default.createElement("div", null,
-                label && (react_1.default.createElement(Typo_1.LABEL, { style: { color: (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors) } }, label)),
+                label && react_1.default.createElement(Typo_1.LABEL, { style: { color: (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors) } }, label),
                 react_1.default.createElement(styled_1.StyledTitleWrapper, null,
                     react_1.default.createElement(Typo_1.SERIF_5_6, null, title),
-                    infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right', invert: invert, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))))),
+                    infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: typeof infoTooltip === 'string' ? infoTooltip : infoTooltip.text, position: typeof infoTooltip !== 'string' ? infoTooltip.position || 'right' : 'right', invert: invert, popOutOfOverflowHiddenParent: typeof infoTooltip !== 'string' && infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))))),
         react_1.default.createElement(Buttons_1.ButtonGhost, { icon: expand ? 'Minus' : 'Plus' })));
 };
+/**
+ * @component Renders an accordion component with customizable title and content.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} id: A unique ID for the accordion.
+ * @prop {'HeaderStyle1' | 'HeaderStyle2' | 'HeaderStyle3'} HeaderStyle: The style of the accordion header. Defaults to "HeaderStyle1".
+ * @prop {React.FunctionComponent} CustomHeader: A component that will be used instead of generating a header based on the other props.
+ * @prop {boolean} noHeader: A boolean indicating whether to render the header. Defaults to false.
+ * @prop {React.ReactNode} children: The content to be rendered inside the accordion.
+ * @prop {boolean} expand: A boolean indicating whether the accordion is expanded. Defaults to false.
+ * @prop {(expand: boolean) => void} setExpand: A callback function to set the expanded state of the accordion.
+ * @prop {string} title: The title of the accordion.
+ * @prop {string} label: A label to be displayed next to the title.
+ * @prop { string | { text: string; position?: TooltipProps['position']; popOutOfOverflowHiddenParent?: boolean }} infoTooltip: A string or object containing text and optional position & popOutOfOverflowHiddenParent props for the info tooltip.
+ * @prop {boolean} invert: A boolean indicating whether to invert the background color of the accordion. Defaults to false.
+ * @prop {object} percent: An object containing a "value" property for the percent to be displayed in the pie. e.g. {value: 80}
+ * @return {ReactElement} The rendered accordion component.
+ */
 var Accordion = function (_a) {
     var id = _a.id, _b = _a.HeaderStyle, HeaderStyle = _b === void 0 ? 'HeaderStyle1' : _b, CustomHeader = _a.CustomHeader, _c = _a.noHeader, noHeader = _c === void 0 ? false : _c, children = _a.children, _d = _a.expand, expandProp = _d === void 0 ? false : _d, setExpandProp = _a.setExpand, title = _a.title, label = _a.label, infoTooltip = _a.infoTooltip, invert = _a.invert, percent = _a.percent;
     var _e = (0, react_1.useState)(expandProp), expand = _e[0], setExpand = _e[1];
@@ -102,23 +104,13 @@ var Accordion = function (_a) {
     var genHeader = function () {
         if (CustomHeader)
             return CustomHeader;
-        //else
         var HeaderStyleComp = HeaderStyles[HeaderStyle];
         if (!HeaderStyleComp)
             return (react_1.default.createElement("div", { style: { padding: '1rem 2rem', background: colors_1.colors.red } },
                 react_1.default.createElement(Typo_1.SANS_2, null, 'Incorrect accordion HeaderStyle')));
-        return (react_1.default.createElement(HeaderStyleComp, __assign({}, {
-            handleToggle: handleToggle,
-            expand: expand,
-            title: title,
-            label: label,
-            infoTooltip: infoTooltip,
-            invert: invert,
-            percent: percent,
-        })));
+        return (react_1.default.createElement(HeaderStyleComp, { handleToggle: handleToggle, expand: expand, title: title, label: label, infoTooltip: infoTooltip, invert: invert, percent: percent }));
     };
     return (react_1.default.createElement("div", { id: id },
-        //unless header is explicitly disabled, generate it
         !noHeader && genHeader(),
         react_1.default.createElement(styled_1.StyledAccordionContentsWrapper, { initial: { height: expand ? 'auto' : 0 }, animate: { height: expand ? 'auto' : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
             react_1.default.createElement("div", null, children))));

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

@@ -1,7 +1,7 @@
-export const StyledAccordionContentsWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-export const StyledHeaderStyle1Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledHeaderStyle2Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledHeaderStyle3Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const NormalizedButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTitleHeaderStyle2Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAccordionContentsWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledHeaderStyle1Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHeaderStyle2Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHeaderStyle3Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NormalizedButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitleHeaderStyle2Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Accordion/styled.js

@@ -12,12 +12,11 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var framer_motion_1 = require("framer-motion");
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
-var greyColor100 = themes_1.colors.greyColor100;
-exports.StyledAccordionContentsWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    \n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    \n"])));
-exports.StyledHeaderStyle1Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"])), themes_1.colors.greyColor5, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor10);
-exports.StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 0; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 0; \n    background-color: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n    ", ";\n"])), themes_1.colors.white, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'));
-exports.StyledHeaderStyle3Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n\n    background-color: ", ";\n    border: 1px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"], ["\n    display: flex; \n    align-items: center; \n    justify-content: space-between; \n    padding: 1rem 2rem; \n\n    background-color: ", ";\n    border: 1px solid ", ";\n    cursor: pointer;\n    ", ";\n    &:hover{\n        background-color: ", ";\n    }\n"])), themes_1.colors.none, themes_1.colors.greyColor15, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor3);
-exports.NormalizedButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border: none;\n    background-color: ", ";\n"], ["\n    border: none;\n    background-color: ", ";\n"])), themes_1.colors.none);
-exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n"])));
-exports.StyledTitleHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n"])));
+exports.StyledAccordionContentsWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n"])));
+exports.StyledHeaderStyle1Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), themes_1.colors.greyColor5, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor10);
+exports.StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n  cursor: pointer;\n  ", ";\n"])), themes_1.colors.white, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'));
+exports.StyledHeaderStyle3Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 2rem;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), themes_1.colors.none, themes_1.colors.greyColor15, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor3);
+exports.NormalizedButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  background-color: ", ";\n"], ["\n  border: none;\n  background-color: ", ";\n"])), themes_1.colors.none);
+exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n"])));
+exports.StyledTitleHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/ActionMenu/index.js

@@ -81,15 +81,8 @@ var ActionMenu = function (_a) {
     var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _h.fixPos, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos, trackerRef = _h.trackerRef;
     var genLighbox = function () {
         var _a, _b;
-        return (react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {
-            id: "dropmenu",
-            align: align,
-            invert: invert,
-            optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height,
-            optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width,
-            showActions: showActions,
-            fixPos: fixPos,
-        }),
+        return (react_1.default.createElement(styled_1.StyledActionsDropMenu, { id: "dropmenu", align: align, invert: invert, optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height,
+            optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width, showActions: showActions, fixPos: fixPos },
             react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
                 return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction),
                     react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {

package/dist/components/AudioInput/comps/AudioAction.d.ts

@@ -4,4 +4,4 @@ export function AudioAction({ id, inputRef, parentOnChange, isInRTE }: {
     parentOnChange: any;
     isInRTE: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/AudioInput/comps/AudioPlayer.d.ts

@@ -1,4 +1,4 @@
 export function AudioPlayer({ audioData }: {
     audioData: any;
 }): React.JSX.Element;
-import React from "react";
+import React from 'react';

package/dist/components/AudioInput/index.js

@@ -97,7 +97,7 @@ function AudioInput(_a) {
         readOnly ? (react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData })) : (audioData === null || audioData === void 0 ? void 0 : audioData.length) === 0 ? (react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: '18rem', isLoading: isLoading, uploadProgress: uploadProgress, mediaType: 'audio', enableClickUpload: false, handleUpload: handleUpload },
             react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Audio", accept: "audio/*", invert: invert }))) : (audioData && (react_1.default.createElement(styled_js_1.StyledAudioPlayerWrapper, { isInRTE: isInRTE },
             react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData }),
-            react_1.default.createElement(AudioAction_1.AudioAction, __assign({}, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange }))))),
+            react_1.default.createElement(AudioAction_1.AudioAction, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange })))),
         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) { return handleUpload(v.target.files); } })));
 }

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

@@ -1,3 +1,3 @@
 declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledLinkCrumb: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+declare const StyledLinkCrumb: import("styled-components").StyledComponent<any, any, any, any>;
 export { StyledBreadcrumbs, StyledLinkCrumb };

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

@@ -5,50 +5,40 @@ export interface DisplayIconProps {
     color?: string;
     iconWeight?: string;
 }
-export interface ButtonStyledWrapperProps {
-    props: {
-        id?: string;
-        link?: {
-            val: string;
-            displayText?: string;
-        };
-        children?: React.ReactNode;
-        value?: string;
-        submit?: boolean;
-        icon?: string;
-        iconAfter?: string;
-        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-        onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-        active?: boolean;
-        disabled?: boolean;
-        invert?: boolean;
-        theme?: string;
-        width?: string;
-        onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-        onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-        color?: string;
-        style?: React.CSSProperties;
-        className?: string;
-        S?: boolean;
-        M?: boolean;
-        iconSize?: number;
-        iconColor?: string;
-        iconWeight?: string;
-        stopPropagation?: boolean;
-        preventDefault?: boolean;
-        forceHover?: boolean;
-    };
-    variant?: string;
-}
 export interface ButtonProps {
-    props: {
-        link?: {
-            val: string;
-            displayText?: string;
-        };
-        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-        [key: string]: any;
+    id?: string;
+    link?: {
+        val: string;
+        displayText?: string;
     };
+    children?: React.ReactNode;
+    value?: string;
+    submit?: boolean;
+    icon?: string;
+    iconAfter?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    active?: boolean;
+    disabled?: boolean;
+    invert?: boolean;
+    theme?: string;
+    width?: string;
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    color?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    S?: boolean;
+    M?: boolean;
+    iconSize?: number;
+    iconColor?: string;
+    iconWeight?: string;
+    stopPropagation?: boolean;
+    preventDefault?: boolean;
+    forceHover?: boolean;
+}
+export interface ButtonStyledWrapperProps {
+    props: ButtonProps;
     variant?: string;
 }
 export declare const ButtonPrimary: React.FunctionComponent<ButtonProps>;

package/dist/components/Buttons/index.js

@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GoogleLogin = exports.UploadButton = exports.ButtonGhost = exports.ButtonCustom = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
 var react_1 = __importStar(require("react"));
-var index_styled_1 = require("./index.styled");
+var styled_1 = require("./styled");
 var react_router_dom_1 = require("react-router-dom");
 var lodash_1 = require("lodash");
 var Typo_1 = require("../Typo");
@@ -66,7 +66,7 @@ var ButtonStyledWrapper = function (_a) {
         return thisSize === 'S' ? 15 : 20;
     };
     var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
-    return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
+    return (react_1.default.createElement(styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
             stopPropagation && e.stopPropagation();
             preventDefault && e.preventDefault();
             debouncedOnClick && debouncedOnClick(e);
@@ -138,7 +138,7 @@ var GoogleLogin = function (props) {
     var theme = props.theme, S = props.S, disabled = props.disabled, width = props.width, className = props.className, style = props.style, value = props.value, children = props.children, onClick = props.onClick;
     var displayText = value || children || "Sign up with Google";
     var size = (S && "S") || "M";
-    return (react_1.default.createElement(index_styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: onClick, variant: "googleAuth", theme: theme, style: style, className: className },
+    return (react_1.default.createElement(styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: onClick, variant: "googleAuth", theme: theme, style: style, className: className },
         react_1.default.createElement(DisplayIcon, { icon: "OkeGoogleIcon", size: 24 }),
         displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
 };

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

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

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

@@ -0,0 +1,68 @@
+"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

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

@@ -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 __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

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