oolib 2.112.0 → 2.113.0

package/dist/components/AudioInput/index.js

@@ -72,7 +72,8 @@ function AudioInput(_a) {
         },
         handleUploadProgess: handleUploadProgess,
     })) || (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "audio" }), upload = _c.mutate, isLoading = _c.isLoading;
-    var handleUpload = function (files) {
+    var handleUpload = function (_a) {
+        var files = _a.files;
         if (!files)
             return;
         if (!upload)
@@ -89,7 +90,7 @@ function AudioInput(_a) {
     };
     (0, react_1.useEffect)(function () {
         if (files) {
-            handleUpload(files);
+            handleUpload({ files: files });
         }
     }, []);
     return (react_1.default.createElement(react_1.Fragment, null,
@@ -99,7 +100,7 @@ function AudioInput(_a) {
             react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData }),
             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); } })));
+            , accept: "audio/*", ref: inputRef, style: { display: "none" }, id: "AudioField", onChange: function (v) { return handleUpload({ files: v.target.files }); } })));
 }
 ;
 exports.default = AudioInput;

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

@@ -1,4 +1,6 @@
-export function Divider({ invert }: {
-    invert: any;
-}): React.JSX.Element;
-import React from "react";
+import { FunctionComponent } from 'react';
+interface DividerProps {
+    invert?: boolean;
+}
+export declare const Divider: FunctionComponent<DividerProps>;
+export {};

package/dist/components/Divider/index.js

@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var themes_1 = require("../../themes");
 var StyledHr = styled_components_1.default.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n"], ["\n  margin: 0;\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n"])), function (_a) {
     var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor15;
+    return (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor15);
 });
 var Divider = function (_a) {
     var invert = _a.invert;

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

@@ -33,7 +33,7 @@ var NoOptionResultsComp_1 = require("../NoOptionResultsComp");
 var OptionContent_1 = require("../OptionContent");
 var styled_1 = require("../OptionsSingle/styled");
 var CheckboxButton_1 = require("../../../RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton");
-var Divider_1 = require("../../../Divider");
+var index_tsx_1 = require("../../../Divider/index.tsx");
 var TextInputs_1 = require("../../../TextInputs");
 var Typo_1 = require("../../../Typo");
 var TextLoader_1 = require("../../../LoadersAndProgress/TextLoader");
@@ -127,7 +127,7 @@ var OptionsMulti = function (_a) {
         } },
         react_1.default.createElement("div", { style: { padding: "1rem" }, onBlur: function () { return setSearchBarFocus(false); }, tabIndex: 0 },
             react_1.default.createElement(TextInputs_1.TextInput, { forceFocus: searchBarFocus, invert: invert, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
-        react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
+        react_1.default.createElement(index_tsx_1.Divider, { invert: invert }))); };
     return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, invert: invert, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S },
         isSearchable && genSearchBar(),
         !isTagsStyle && createSelectedOptions(),

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, }: {
+export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, lightboxStyle }: {
     options: any;
     optionsRef: any;
     relativeToRef: any;
@@ -8,5 +8,6 @@ export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, show
     fixPos: any;
     optionsAnchor: any;
     children: any;
+    lightboxStyle: any;
 }): React.JSX.Element;
 import React from "react";

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

@@ -40,7 +40,7 @@ var styled_1 = require("./styled");
 var OptionsAnimateWrapper = function (_a) {
     var _b;
     var _c;
-    var options = _a.options, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children;
+    var options = _a.options, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle;
     var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     //we need to recalc when ops length change because, in tag comps, when loading a fixed set of 'loading' options are shown
     //before the actual number of options are loaded
@@ -56,7 +56,7 @@ var OptionsAnimateWrapper = function (_a) {
             openHeight: (_d = (_c = optionsRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.height,
         });
     }, [options.length]);
-    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign({ zIndex: 100000 }, (fixPos
+    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%)" }

package/dist/components/Dropdowns/comps/OptionsShell/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);
@@ -60,10 +49,14 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     }, [showOptions]);
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children },
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle },
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
                 // className={className}
-                style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
+                style: {
+                    position: "absolute",
+                    bottom: yOrientation === "top" ? undefined : 0,
+                    top: yOrientation === "top" ? 0 : undefined,
+                } }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
         SelectComp && SelectComp,
         react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
         showDoneButton && (react_1.default.createElement("div", { style: {

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

@@ -30,7 +30,7 @@ var OptionContent_1 = require("../OptionContent");
 var OptionsShell_1 = require("../OptionsShell");
 var styled_1 = require("./styled");
 var themes_1 = require("../../../../themes");
-var Divider_1 = require("../../../Divider");
+var index_tsx_1 = require("../../../Divider/index.tsx");
 var TextInputs_1 = require("../../../TextInputs");
 var TextLoader_1 = require("../../../LoadersAndProgress/TextLoader");
 var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
@@ -77,7 +77,7 @@ 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 }))); };
+        react_1.default.createElement(index_tsx_1.Divider, { invert: invert }))); };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(OptionsShell_1.OptionsShell, { 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(),

package/dist/components/ImageInput/comps/ImageEditor/index.js

@@ -44,7 +44,7 @@ var themes_1 = require("../../../../themes");
 var mixins_1 = require("../../../../themes/mixins");
 var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
 var renderRTEPlaceholderForOolibPreview_1 = require("../../../../utilsOolib/renderRTEPlaceholderForOolibPreview");
-var Divider_1 = require("../../../Divider");
+var index_tsx_1 = require("../../../Divider/index.tsx");
 var SkeletonLoader_1 = require("../../../LoadersAndProgress/SkeletonLoader");
 var Modal_1 = require("../../../Modals/Modal");
 var Paddings_1 = require("../../../Paddings");
@@ -147,11 +147,11 @@ function ImageEditor(_a) {
             !richTextHasValue(imageData.caption) //backwards compat cuz its possible caption data might be in draftjs shape
             ? null
             : react_1.default.createElement(react_1.Fragment, null,
-                react_1.default.createElement(Divider_1.Divider, { invert: invert }),
+                react_1.default.createElement(index_tsx_1.Divider, { invert: invert }),
                 react_1.default.createElement("div", { style: {
                         borderRadius: "0.2rem",
                         padding: readOnly ? "1rem" : "2rem",
-                        backgroundColor: readOnly ? "initial" : invert ? themes_1.colors.greyColor90 : themes_1.colors.greyColor5,
+                        backgroundColor: invert ? themes_1.colors.greyColor90 : themes_1.colors.greyColor5,
                     } }, !LexicalTextEditor
                     ? (0, renderRTEPlaceholderForOolibPreview_1.renderRTEPlaceholderForOolibPreview)({
                         width: '100%',
@@ -163,6 +163,6 @@ function ImageEditor(_a) {
                                 imageData: __assign(__assign({}, imageData), { caption: val }),
                             });
                         } })),
-                readOnly && react_1.default.createElement(Divider_1.Divider, { invert: invert })))))));
+                readOnly && react_1.default.createElement(index_tsx_1.Divider, { invert: invert })))))));
 }
 exports.ImageEditor = ImageEditor;

package/dist/components/Modals/Modal/index.js

@@ -44,7 +44,7 @@ var ModalHeaderStyle1_1 = require("./comps/ModalHeaderStyle1");
 var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
 var styled_1 = require("./styled");
 var Buttons_1 = require("../../Buttons");
-var Divider_1 = require("../../Divider");
+var index_tsx_1 = require("../../Divider/index.tsx");
 var Modal = function (_a) {
     var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, // used only in header style 2
     _d = _a.fitToContentHeight, // used only in header style 2
@@ -81,7 +81,7 @@ var Modal = function (_a) {
             react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children),
             showActionPanel &&
                 react_1.default.createElement("div", { style: { position: 'sticky', bottom: headerStyle === 'style1' ? 0 : '2.2rem' } },
-                    react_1.default.createElement(Divider_1.Divider, null),
+                    react_1.default.createElement(index_tsx_1.Divider, null),
                     react_1.default.createElement(styled_1.StyledActionButtonsWrapper, { alignActions: alignActions },
                         showConfirmBtn &&
                             typeof onConfirm === 'function'

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

@@ -1,2 +1,21 @@
-export function Section(props: any): React.JSX.Element;
-import React from "react";
+import React, { FunctionComponent } from 'react';
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+    borderTop?: boolean;
+    borderRight?: boolean;
+    borderLeft?: boolean;
+    borderBottom?: boolean;
+    [key: string]: any;
+}
+/**
+ * @component Renders a section component with customizable border properties.
+ *
+ * - The props object containing the following properties:
+ * @prop {boolean} props.borderTop: A boolean indicating whether to display a top border. Defaults to false.
+ * @prop {boolean} props.borderRight: A boolean indicating whether to display a right border. Defaults to false.
+ * @prop {boolean} props.borderLeft: A boolean indicating whether to display a left border. Defaults to false.
+ * @prop {boolean} props.borderBottom: A boolean indicating whether to display a bottom border. Defaults to false.
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the section.
+ * @prop {React.ReactNode} props.children: The content to be rendered inside the section element.
+ * @return {ReactElement} The rendered section component.
+ */
+export declare const Section: FunctionComponent<SectionProps>;

package/dist/components/Section/index.js

@@ -16,18 +16,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
 var react_1 = __importDefault(require("react"));
-var index_styled_1 = require("./index.styled");
-/*
-especially meant for usecases where
-the page container has a max width, but we need its bottom border to stretch the full
-width of the screen
-*/
+var styled_1 = require("./styled");
+/* especially meant for usecases where the page container has a max width,
+/* but we need its bottom border to stretch the full width of the screen */
+/* props can be any valid color value,
+/* can be borderBottom/Top/Left/Right * can be style, className & children */
 /**
- * props can be any valid color value,
- * can be borderBottom/Top/Left/Right
- * can be style, className & children
+ * @component Renders a section component with customizable border properties.
+ *
+ * - The props object containing the following properties:
+ * @prop {boolean} props.borderTop: A boolean indicating whether to display a top border. Defaults to false.
+ * @prop {boolean} props.borderRight: A boolean indicating whether to display a right border. Defaults to false.
+ * @prop {boolean} props.borderLeft: A boolean indicating whether to display a left border. Defaults to false.
+ * @prop {boolean} props.borderBottom: A boolean indicating whether to display a bottom border. Defaults to false.
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the section.
+ * @prop {React.ReactNode} props.children: The content to be rendered inside the section element.
+ * @return {ReactElement} The rendered section component.
  */
 var Section = function (props) {
-    return (react_1.default.createElement(index_styled_1.StyledSection, __assign({}, props), props.children));
+    return (react_1.default.createElement(styled_1.StyledSection, __assign({}, props), props.children));
 };
 exports.Section = Section;

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

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

package/dist/components/Section/{index.styled.js → styled.js}

@@ -23,7 +23,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var setBorder = function (_a) {
     var props = _a.props;
-    var borderStyles = "";
+    var borderStyles = '';
     var greyColor15 = colors_1.colors.greyColor15;
     if (props.borderTop || props.borderRight || props.borderLeft || props.borderBottom) {
         if (props.borderTop)
@@ -40,8 +40,7 @@ var setBorder = function (_a) {
 var setFill = function (_a) {
     var _b;
     var props = _a.props;
-    var colorsObj = ((_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors)
-        ? __assign(__assign({}, colors_1.colors), props.theme.colors) : colors_1.colors;
+    var colorsObj = ((_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors) ? __assign(__assign({}, colors_1.colors), props.theme.colors) : colors_1.colors;
     var colorKey = Object.keys(props).find(function (p) { return !!colorsObj[p]; });
     return colorKey ? "background-color: ".concat(colorsObj[colorKey], ";") : '';
 };

package/dist/components/VideoInput/index.js

@@ -63,8 +63,9 @@ function VideoInput(_a) {
         handleUploadProgess: handleUploadProgess,
     })) ||
         (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "video" }), upload = _e.mutate, isLoading = _e.isLoading;
-    var handleUpload = function (files) {
+    var handleUpload = function (_a) {
         // onChange(id, undefined) //so that the prev video is cleared and loader shows up
+        var files = _a.files;
         if (!files)
             return;
         if (!upload)
@@ -82,7 +83,7 @@ function VideoInput(_a) {
     };
     (0, react_1.useEffect)(function () {
         if (files) {
-            handleUpload(files);
+            handleUpload({ files: files });
         }
     }, []);
     var createVideoPreview = function (_a) {
@@ -121,6 +122,6 @@ function VideoInput(_a) {
                             react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", invert: invert, id: "videoField" }))))),
         showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, { setShowEmbedLinkModal: setShowEmbedLinkModal, value: value, createVideoPreview: createVideoPreview, canPlay: canPlay, onChange: onChange, id: id, invert: invert })),
         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) { return handleUpload(v.target.files); } })));
+            , accept: "video/*", ref: inputRef, style: { display: "none" }, id: "videoField", onChange: function (v) { return handleUpload({ files: v.target.files }); } })));
 }
 exports.default = VideoInput;

package/dist/components/Wrappers/WrapperCardGrid.d.ts

@@ -1,8 +1,6 @@
-export function WrapperCardGrid({ style, className, children, id, minWidth }: {
-    style: any;
-    className: any;
-    children: any;
-    id: any;
+import React, { FunctionComponent } from 'react';
+interface WrapperCardGridProps extends React.HTMLAttributes<HTMLDivElement> {
     minWidth?: string;
-}): React.JSX.Element;
-import React from "react";
+}
+export declare const WrapperCardGrid: FunctionComponent<WrapperCardGridProps>;
+export {};

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

@@ -1,10 +1,17 @@
-export { WrapperCardGrid } from "./WrapperCardGrid";
-export function Wrapper1500(props: any): React.JSX.Element;
-export function Wrapper1120(props: any): React.JSX.Element;
-export function Wrapper1000(props: any): React.JSX.Element;
-export function Wrapper900(props: any): React.JSX.Element;
-export function Wrapper800(props: any): React.JSX.Element;
-export function Wrapper820(props: any): React.JSX.Element;
-export function Wrapper700(props: any): React.JSX.Element;
-export function Wrapper650(props: any): React.JSX.Element;
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+import { WrapperCardGrid } from './WrapperCardGrid';
+export interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: number;
+    align?: 'left' | 'center';
+    left?: boolean;
+}
+export declare const Wrapper: FunctionComponent<WrapperProps>;
+export { WrapperCardGrid };
+export declare const Wrapper1500: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper1120: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper1000: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper900: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper800: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper820: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper700: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;
+export declare const Wrapper650: FunctionComponent<Omit<WrapperProps, 'maxWidth'>>;

package/dist/components/Wrappers/index.js

@@ -14,29 +14,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper650 = exports.Wrapper700 = exports.Wrapper820 = exports.Wrapper800 = exports.Wrapper900 = exports.Wrapper1000 = exports.Wrapper1120 = exports.Wrapper1500 = exports.WrapperCardGrid = void 0;
+exports.Wrapper650 = exports.Wrapper700 = exports.Wrapper820 = exports.Wrapper800 = exports.Wrapper900 = exports.Wrapper1000 = exports.Wrapper1120 = exports.Wrapper1500 = exports.WrapperCardGrid = exports.Wrapper = void 0;
 var react_1 = __importDefault(require("react"));
-var index_styled_1 = require("./index.styled");
+var WrapperCardGrid_1 = require("./WrapperCardGrid");
+Object.defineProperty(exports, "WrapperCardGrid", { enumerable: true, get: function () { return WrapperCardGrid_1.WrapperCardGrid; } });
+var styled_1 = require("./styled");
 var Wrapper = function (_a) {
-    var style = _a.style, children = _a.children, className = _a.className, maxWidth = _a.maxWidth, left = _a.left, align = _a.align;
+    var style = _a.style, children = _a.children, className = _a.className, maxWidth = _a.maxWidth, align = _a.align, left = _a.left;
     align = align || (left ? 'left' : 'center');
-    return (react_1.default.createElement(index_styled_1.StyledWrapper, { maxWidth: maxWidth, align: align, className: className || "", style: style }, children));
+    return (react_1.default.createElement(styled_1.StyledWrapper, { maxWidth: maxWidth, align: align, className: className || '', style: style }, children));
 };
-var WrapperCardGrid_1 = require("./WrapperCardGrid");
-Object.defineProperty(exports, "WrapperCardGrid", { enumerable: true, get: function () { return WrapperCardGrid_1.WrapperCardGrid; } });
-var Wrapper1500 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1500 })); };
+exports.Wrapper = Wrapper;
+var Wrapper1500 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 1500 }))); };
 exports.Wrapper1500 = Wrapper1500;
-var Wrapper1120 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1120 })); };
+var Wrapper1120 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 1120 }))); };
 exports.Wrapper1120 = Wrapper1120;
-var Wrapper1000 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 1000 })); };
+var Wrapper1000 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 1000 }))); };
 exports.Wrapper1000 = Wrapper1000;
-var Wrapper900 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 900 })); };
+var Wrapper900 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 900 }))); };
 exports.Wrapper900 = Wrapper900;
-var Wrapper800 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 800 })); };
+var Wrapper800 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 800 }))); };
 exports.Wrapper800 = Wrapper800;
-var Wrapper820 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 820 })); };
+var Wrapper820 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 820 }))); };
 exports.Wrapper820 = Wrapper820;
-var Wrapper700 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 700 })); };
+var Wrapper700 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 700 }))); };
 exports.Wrapper700 = Wrapper700;
-var Wrapper650 = function (props) { return react_1.default.createElement(Wrapper, __assign({}, props, { maxWidth: 650 })); };
+var Wrapper650 = function (props) { return (react_1.default.createElement(exports.Wrapper, __assign({}, props, { maxWidth: 650 }))); };
 exports.Wrapper650 = Wrapper650;

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

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

package/dist/components/Wrappers/{index.styled.js → styled.js}

@@ -11,9 +11,9 @@ exports.StyledWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", ";\n  margin: ", ";\n"], ["\n  max-width: ", ";\n  margin: ", ";\n"])), function (_a) {
     var maxWidth = _a.maxWidth;
-    return maxWidth + 'px';
+    return (maxWidth ? "".concat(maxWidth, "px") : 'unset');
 }, function (_a) {
     var align = _a.align;
-    return align === 'left' ? 'unset' : '0 auto';
+    return (align === 'left' ? 'unset' : '0 auto');
 });
 var templateObject_1;

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
 export { Accordion } from "./components/Accordion";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
-export { Divider } from "./components/Divider";
+export { Divider } from "./components/Divider/index.tsx";
 export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 export { ModalConfirm } from "./components/Modals/ModalConfirm";
 export { ModalForms } from "./components/Modals/derivedComps/ModalForms";

package/dist/index.js

@@ -64,8 +64,8 @@ var Accordion_1 = require("./components/Accordion");
 Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
 var PercentCompletedPie_1 = require("./components/PercentCompletedPie");
 Object.defineProperty(exports, "PercentCompletedPie", { enumerable: true, get: function () { return PercentCompletedPie_1.PercentCompletedPie; } });
-var Divider_1 = require("./components/Divider");
-Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
+var index_tsx_1 = require("./components/Divider/index.tsx");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return index_tsx_1.Divider; } });
 var SkeletonLoader_1 = require("./components/LoadersAndProgress/SkeletonLoader");
 Object.defineProperty(exports, "SkeletonLoader", { enumerable: true, get: function () { return SkeletonLoader_1.SkeletonLoader; } });
 var ModalConfirm_1 = require("./components/Modals/ModalConfirm");

package/dist/stories/Checkbox.stories.js

@@ -28,7 +28,7 @@ exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = void 0;
 var react_1 = require("react");
 var RadioAndCheckbox_1 = require("../components/RadioAndCheckbox");
 var react_json_view_1 = __importDefault(require("react-json-view"));
-var Divider_1 = require("../components/Divider");
+var index_tsx_1 = require("../components/Divider/index.tsx");
 var themes_1 = require("../themes");
 var greyColor100 = themes_1.colors.greyColor100;
 var ops = [
@@ -66,7 +66,7 @@ var CheckboxList = function (args) {
         React.createElement(RadioAndCheckbox_1.CheckboxList, { options: options, value: selectedOptions, onChange: function (id, val) { return setSelectedOptions(val); }, rightWrongResult: args.markOptions, listType: args.listingStyle, injectOtherOption: args.addOther, commonIsCorrectDesc: args.feedbackMessage, S: args.size == "S", readOnly: args.readOnly, label: args.label, disabled: args.disabled, invert: args.invert, inputStyle: args.inputStyle, optionsLimit: args.optionsLimit }),
         React.createElement("br", null),
         " ",
-        React.createElement(Divider_1.Divider, null),
+        React.createElement(index_tsx_1.Divider, null),
         " ",
         React.createElement("br", null),
         React.createElement("details", { style: { margin: "2rem 0" } },

package/dist/stories/Divider.stories.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
-var Divider_1 = require("../components/Divider");
+var index_tsx_1 = require("../components/Divider/index.tsx");
 var themes_1 = require("../themes");
 exports.default = {
     title: "Components/Divider",
@@ -23,6 +23,6 @@ exports.default = {
 var uid = 0;
 var Divider = function (args) {
     return (React.createElement("div", { style: { padding: '50px', background: args.invert ? themes_1.colors.greyColor100 : themes_1.colors.white } },
-        React.createElement(Divider_1.Divider, __assign({}, args))));
+        React.createElement(index_tsx_1.Divider, __assign({}, args))));
 };
 exports.Divider = Divider;

package/dist/stories/RadioButton.stories.js

@@ -27,7 +27,7 @@ exports.RadioButton = exports.RadioInput = exports.RadioList = void 0;
 var react_1 = require("react");
 var RadioAndCheckbox_1 = require("../components/RadioAndCheckbox");
 var react_json_view_1 = __importDefault(require("react-json-view"));
-var Divider_1 = require("../components/Divider");
+var index_tsx_1 = require("../components/Divider/index.tsx");
 var themes_1 = require("../themes");
 var greyColor100 = themes_1.colors.greyColor100;
 var ops = [
@@ -66,7 +66,7 @@ var RadioList = function (args) {
         React.createElement(RadioAndCheckbox_1.RadioList, { options: options, readOnly: args.readOnly, value: chosenOption, onChange: function (id, val) { return setChosenOption(val); }, rightWrongResult: args.markOptions, label: args.label, listType: args.listingStyle, injectOtherOption: args.addOther, disabled: args.disabled, invert: args.invert, S: args.size == "S", commonIsCorrectDesc: args.feedbackMessage, optionsLimit: args.optionsLimit, saveValueAsString: args.saveValueAsString }),
         React.createElement("br", null),
         " ",
-        React.createElement(Divider_1.Divider, null),
+        React.createElement(index_tsx_1.Divider, null),
         " ",
         React.createElement("br", null),
         React.createElement("details", { style: { margin: '2rem 0' } },

package/dist/stories/SkeletonLoader.stories.js

@@ -16,7 +16,7 @@ exports.SkeletonLoader = void 0;
 var react_1 = __importDefault(require("react"));
 var SkeletonLoader_1 = require("../components/LoadersAndProgress/SkeletonLoader");
 var themes_1 = require("../themes");
-var Divider_1 = require("../components/Divider");
+var index_tsx_1 = require("../components/Divider/index.tsx");
 var TextLoader_1 = require("../components/LoadersAndProgress/TextLoader");
 var Typo_1 = require("../components/Typo");
 var Paddings_1 = require("../components/Paddings");
@@ -68,7 +68,7 @@ var SkeletonLoader = function (args) {
                     width: args.width,
                     height: args.height,
                 } })),
-        react_1.default.createElement(Divider_1.Divider, null),
+        react_1.default.createElement(index_tsx_1.Divider, null),
         react_1.default.createElement(Paddings_1.PaddingTop30, null),
         react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, 'Text Loader'),
         react_1.default.createElement(Typo_1.SANS_3, null, "Defaults to a height of 1.5rem and width of 8rem. Has a fixed color of primaryColor10"),

package/dist/utils/customHooks/useScreenWidth.d.ts

@@ -1 +1,10 @@
-export function useScreenWidth(resizeFn: any): number;
+export interface UseScreenWidthOptions {
+    resizeFn?: () => void;
+}
+/**
+ * Custom hook that tracks the screen width and invokes a resize function if provided.
+ *
+ * @param {resizerFn} resizeFn - The resize function to invoke when the screen width changes. Defaults to `() => {}` -.
+ * @return {number} The current screen width.
+ */
+export declare const useScreenWidth: (options?: UseScreenWidthOptions) => number;

package/dist/utils/customHooks/useScreenWidth.js

@@ -3,20 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScreenWidth = void 0;
 var lodash_1 = require("lodash");
 var react_1 = require("react");
-var useScreenWidth = function (resizeFn) {
-    var _a = (0, react_1.useState)(document.documentElement.clientWidth), screenWidth = _a[0], setScreenWidth = _a[1]; // exclude scrollbar + zoom
-    var handleResize = function () {
-        //if (screenWidth === document.documentElement.clientWidth) return; // in case of vertical resize (mobile browser bottom/top bars)
+/**
+ * Custom hook that tracks the screen width and invokes a resize function if provided.
+ *
+ * @param {resizerFn} resizeFn - The resize function to invoke when the screen width changes. Defaults to `() => {}` -.
+ * @return {number} The current screen width.
+ */
+var useScreenWidth = function (options) {
+    if (options === void 0) { options = {}; }
+    var resizeFn = options.resizeFn;
+    var _a = (0, react_1.useState)(document.documentElement.clientWidth), screenWidth = _a[0], setScreenWidth = _a[1];
+    var handleResize = (0, lodash_1.debounce)(function () {
         setScreenWidth(document.documentElement.clientWidth);
-        resizeFn && resizeFn();
-    };
-    handleResize = (0, lodash_1.debounce)(handleResize, 500);
+        resizeFn === null || resizeFn === void 0 ? void 0 : resizeFn();
+    }, 500);
     (0, react_1.useEffect)(function () {
         window.addEventListener('resize', handleResize);
         return function () {
             window.removeEventListener('resize', handleResize);
         };
-    }, []);
+    }, [handleResize]);
     return screenWidth;
 };
 exports.useScreenWidth = useScreenWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.112.0",
+  "version": "2.113.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,8 +85,9 @@
     "access": "public"
   },
   "dependencies": {
-    "framer-motion": "^4.1.17",
     "@faker-js/faker": "^8.3.1",
+    "@lexical/react": "^0.13.1",
+    "@lexical/table": "^0.13.1",
     "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",
@@ -95,15 +96,14 @@
     "draft-js": "^0.11.7",
     "draftjs-conductor": "^2.2.0",
     "faker": "^6.6.6",
+    "framer-motion": "^4.1.17",
     "immutable": "^3.7.6",
+    "lexical": "^0.13.1",
     "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",
     "phosphor-react": "^1.4.1",
     "react-player": "^2.12.0",
-    "react-virtualized": "^9.22.5",
-    "lexical": "0.13.1",
-    "@lexical/react": "0.13.1",
-    "@lexical/table": "0.13.1"
+    "react-virtualized": "^9.22.5"
   }
 }

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

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

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

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