oolib 2.240.0 → 3.1.0

package/dist/components/Accordion/index.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
 var framer_motion_1 = require("framer-motion");
 var react_1 = __importStar(require("react"));
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var Typo_1 = require("../Typo");
 var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");

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

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from "react";
-import * as ButtonComps from "../Buttons";
+import * as ButtonComps from "../../v2/components/Buttons";
 export interface ActionItem {
     display: string;
     icon?: string;

package/dist/components/ActionMenu/index.js

@@ -46,7 +46,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionMenu = void 0;
 var react_1 = __importStar(require("react"));
-var ButtonComps = __importStar(require("../Buttons"));
+var ButtonComps = __importStar(require("../../v2/components/Buttons"));
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var useHandleClickOutside_1 = require("../../utils/customHooks/useHandleClickOutside");
@@ -154,7 +154,7 @@ var ActionMenu = function (_a) {
             } },
             react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
                     setShowActions(!showActions);
-                } }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
+                } }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, stopPropagation: true, preventDefault: true, onClick: function (e) {
                 setShowActions(!showActions);
             }, active: showActions })))),
         popOutOfOverflowHiddenParent && (react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef })),

package/dist/components/DatePicker/index.js

@@ -53,7 +53,7 @@ var buildCalenderObj_1 = require("./utils/buildCalenderObj");
 var handlePos_1 = require("./utils/handlePos");
 var themes_1 = require("../../themes");
 var styled_1 = require("./styled");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var mixins_1 = require("../../themes/mixins");
 var Modal_1 = require("../Modals/Modal");
 var white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40;
@@ -251,10 +251,10 @@ function DatePicker(props) {
         setRange(item);
     };
     var wrapCaretLeft = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, invert: invert, icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer" } }));
     }, [value, invert]);
     var wrapCaretRight = react_1.default.useCallback(function () {
-        return (react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, invert: invert, icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer", color: invert && white } }));
+        return (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer" } }));
     }, [value, invert]);
     var getReadOnlyDate = function () {
         var dateObj = new Date(value);

package/dist/components/HomeCover/index.js

@@ -49,7 +49,7 @@ var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 // import { useScreenWidth } from "../../utils/customHooks/useScreenWidth";
 var toArray_1 = require("../../utils/toArray");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var mixins_1 = require("../../themes/mixins");
 var Typo_1 = require("../Typo");
 var styled_1 = require("./styled");

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

@@ -49,7 +49,7 @@ var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var changesMadeToUnderEditImageData_1 = require("../../utils/changesMadeToUnderEditImageData");
 var themes_1 = require("../../../../../../themes");
-var Buttons_1 = require("../../../../../Buttons");
+var Buttons_1 = require("../../../../../../v2/components/Buttons");
 /**
  * fiddle for dealing with rotation: https://jsfiddle.net/wunderbart/w1hw5kv1/
  */
@@ -68,14 +68,14 @@ function EditToolbar(_a) {
                 gap: "0.5rem",
             } },
             !omitEditorTools.includes('cover_contain') &&
-                react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, S: true, iconSize: "M", onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, iconSize: "M", onClick: function () {
                         return setUnderEditImageData(function (prev) {
                             var spreadToSet = imageSpread === "cover" ? "contain" : "cover";
                             return __assign(__assign(__assign({}, prev), { imageSpread: spreadToSet }), (spreadToSet === "contain" ? { cropX: 0, cropY: 0 } : {}));
                         });
                     }, icon: imageSpread === "cover" ? "ArrowsIn" : "ArrowsOut" }),
             !omitEditorTools.includes('rotate') &&
-                react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, icon: "ArrowsClockwise", iconSize: "M", S: true, onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, icon: "ArrowsClockwise", iconSize: "M", onClick: function () {
                         setUnderEditImageData(function (prev) { return (__assign(__assign({}, prev), { imageRotate: ((prev.imageRotate || 0) + 90) % 360 })); });
                     } })),
         react_1.default.createElement("div", { style: {
@@ -87,10 +87,10 @@ function EditToolbar(_a) {
                 underEditImageData: underEditImageData,
                 defaultImageSpread: defaultImageSpread,
             }) && (react_1.default.createElement(react_1.Fragment, null,
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { invert: true, S: true, onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () {
                         setUnderEditImageData((0, lodash_1.cloneDeep)(imageData));
                     } }, "Revert"),
-                react_1.default.createElement(Buttons_1.ButtonPrimary, { invert: true, S: true, onClick: function () {
+                react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: function () {
                         handleSingleImageDataChange({
                             publicUrl: publicUrl,
                             imageData: __assign(__assign({}, underEditImageData), { caption: imageData.caption //cuz caption edits are made directly to imageData and we dont want underEditImageData to overwrite that.
@@ -99,7 +99,7 @@ function EditToolbar(_a) {
                         setUnderEditImageData(undefined);
                         setImageUnderEdit && setImageUnderEdit(false);
                     } }, "Save"))),
-            react_1.default.createElement(Buttons_1.ButtonGhost, { invert: true, icon: "X", S: true, onClick: function () {
+            react_1.default.createElement(Buttons_1.ButtonGhost, { iconColor: themes_1.colors.white, icon: "X", onClick: function () {
                     setUnderEditImageData(undefined);
                 } }))));
 }

package/dist/components/Modals/Modal/index.d.ts

@@ -27,6 +27,7 @@ export interface ModalProps {
     fitToContentHeight?: boolean;
     invert?: boolean;
     overflowVisible?: boolean;
+    hideBackdrop?: boolean;
     showActionPanel?: boolean;
     onCloseText?: string;
     onConfirm?: React.MouseEventHandler<HTMLButtonElement> | React.ReactNode;
@@ -51,6 +52,7 @@ export interface ModalProps {
  * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
  * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
  * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [hideBackdrop]: A boolean indicating whether to make the modal's own backdrop transparent (the click-to-close layer is kept). Use when the caller renders its own backdrop behind the modal. Defaults to false.
  * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
  * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
  * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.

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

@@ -69,6 +69,7 @@ var Divider_1 = require("../../Divider");
  * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
  * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
  * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [hideBackdrop]: A boolean indicating whether to make the modal's own backdrop transparent (the click-to-close layer is kept). Use when the caller renders its own backdrop behind the modal. Defaults to false.
  * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
  * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
  * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.
@@ -81,12 +82,12 @@ var Divider_1 = require("../../Divider");
  * @return {ReactElement} The rendered modal component.
  */
 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, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l, _m = _a.dynamicHeaderHeight, dynamicHeaderHeight = _m === void 0 ? false : _m;
+    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, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.hideBackdrop, hideBackdrop = _e === void 0 ? false : _e, _f = _a.showActionPanel, showActionPanel = _f === void 0 ? false : _f, _g = _a.onCloseText, onCloseText = _g === void 0 ? "Close" : _g, onConfirm = _a.onConfirm, _h = _a.showCloseBtn, showCloseBtn = _h === void 0 ? true : _h, _j = _a.onConfirmText, onConfirmText = _j === void 0 ? "Confirm" : _j, _k = _a.showConfirmBtn, showConfirmBtn = _k === void 0 ? true : _k, _l = _a.alignActions, alignActions = _l === void 0 ? "right" : _l, _m = _a.disableHeader, disableHeader = _m === void 0 ? false : _m, _o = _a.dynamicHeaderHeight, dynamicHeaderHeight = _o === void 0 ? false : _o;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100dvh", opacity: 0 };
     var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _o = (0, react_1.useState)(endAnimPos), animPos = _o[0], setAnimPos = _o[1];
+    var _p = (0, react_1.useState)(endAnimPos), animPos = _p[0], setAnimPos = _p[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { document.body.style.overflow = "unset"; };
@@ -116,7 +117,7 @@ var Modal = function (_a) {
                             : onConfirm,
                         showCloseBtn && react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
-        react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
+        react_1.default.createElement(styled_1.StyledModalLargeBgColor, { "$hideBackdrop": hideBackdrop, initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",
                 ease: "easeOut",
             }, onClick: function () { return handleClose(); } }),

package/dist/components/Modals/Modal/styled.d.ts

@@ -14,7 +14,9 @@ interface StyledActionButtonsWrapperProps {
     alignActions: alignActionsType;
 }
 export declare const StyledModalLargeBg: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
-export declare const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
+    $hideBackdrop?: boolean;
+}, never>;
 export declare const StyledModalLargeContentWrapper: import("styled-components").StyledComponent<"div", any, StyledModalLargeContentWrapperProps, never>;
 export declare const StyledModalLargeHeader: import("styled-components").StyledComponent<"header", any, {
     invert?: boolean;

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

@@ -45,7 +45,10 @@ var framer_motion_1 = require("framer-motion");
 var styled_components_1 = __importStar(require("styled-components"));
 var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white;
 exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 999999999;\n  overflow-y: auto;\n  overflow-x: hidden;\n  ", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
-exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"], ["\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"])), black_opacity80);
+exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // $hideBackdrop keeps this layer (so click-outside-to-close still works) but\n  // makes it transparent \u2014 for callers that render their own backdrop behind\n  // the Modal and don't want a second tint stacked on top.\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"], ["\n  // $hideBackdrop keeps this layer (so click-outside-to-close still works) but\n  // makes it transparent \u2014 for callers that render their own backdrop behind\n  // the Modal and don't want a second tint stacked on top.\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"])), function (_a) {
+    var $hideBackdrop = _a.$hideBackdrop;
+    return ($hideBackdrop ? "transparent" : black_opacity80);
+});
 exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50dvh; */\n    max-height: 90dvh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 16px;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    /* min-height: 50dvh; */\n    max-height: 90dvh;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: 16px;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return takeFullScreenOnScroll

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

@@ -38,7 +38,7 @@ var react_1 = __importStar(require("react"));
 var react_dom_1 = require("react-dom");
 var mixins_1 = require("../../../themes/mixins");
 var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
-var Buttons_1 = require("../../Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 var Typo_1 = require("../../Typo");
 var styled_1 = require("./styled");
 /**
@@ -70,7 +70,7 @@ var ModalConfirm = function (_a) {
     var SubTitleText = screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? Typo_1.SANS_4 : Typo_1.SANS_3;
     var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
         onClose && (react_1.default.createElement(styled_1.StyledModalConfirmClose, null,
-            react_1.default.createElement(Buttons_1.ButtonPrimary, { S: true, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
         react_1.default.createElement(styled_1.StyledModalConfirmContent, null,
             title && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),

package/dist/components/PDFInput/index.js

@@ -66,7 +66,7 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var BlockLabel_1 = require("../../v2/components/BlockLabel");
 var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var bannerContext_1 = require("../Banners/bannerContext");
 var PDFEmbed_1 = __importDefault(require("./comps/PDFEmbed"));
 var react_2 = require("react");
@@ -119,7 +119,7 @@ function PDFInput(_a) {
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props), { invert: invert })),
         (readOnly && value) ? (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement(PDFEmbed_1.default, { key: i, filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation })); }))
             : !value || (value === null || value === void 0 ? void 0 : value.length) === 0 && !isLoading ? (react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: "18rem", isLoading: isLoading, mediaType: "pdf", handleUpload: handleUpload, onChange: parentOnChange, uploadProgress: uploadProgress, enableClickUpload: false },
-                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf", invert: invert }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf" }))) : (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement("div", { style: { position: 'relative' }, key: i },
                 react_1.default.createElement(PDFEmbed_1.default, { filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation }),
                 react_1.default.createElement(StyledActionsButtonWrapper, null,
                     react_1.default.createElement(PDFActions_1.PDFActions, { id: id, isInRTE: isInRTE, inputRef: inputRef, parentOnChange: parentOnChange })))); })),

package/dist/components/TabBar/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
 var react_1 = __importDefault(require("react"));
 var useScrollBar_1 = require("../../utils/customHooks/useScrollBar");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var index_styled_1 = require("./index.styled");
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
@@ -31,7 +31,7 @@ var Base = function (_a) {
     return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
         react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
             !scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
             react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
                 react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX }, options.map(function (op) {
                     var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
@@ -42,7 +42,7 @@ var Base = function (_a) {
                             tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
                 }))),
             !scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
 };
 var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
 exports.TabBarStyle1 = TabBarStyle1;

package/dist/components/VideoInput/comps/EmbedLinkModal.js

@@ -37,7 +37,7 @@ exports.EmbedLinkModal = void 0;
 var react_1 = __importStar(require("react"));
 var Modal_1 = require("../../Modals/Modal");
 var Paddings_1 = require("../../Paddings");
-var Buttons_1 = require("../../Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 var styled_1 = require("../styled");
 var utils_1 = require("../utils");
 var TextInputs_1 = require("../../../v2/components/TextInputs");

package/dist/components/VideoInput/index.js

@@ -52,7 +52,7 @@ var styled_components_1 = require("styled-components");
 var react_player_1 = __importDefault(require("react-player"));
 var BlockLabel_1 = require("../../v2/components/BlockLabel");
 var styled_1 = require("./styled");
-var Buttons_1 = require("../Buttons");
+var Buttons_1 = require("../../v2/components/Buttons");
 var Typo_1 = require("../Typo");
 var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
 var themes_1 = require("../../themes");
@@ -146,10 +146,10 @@ function VideoInput(_a) {
             (value === null || value === void 0 ? void 0 : value.length) > 0 ? (createVideoPreview({ value: value, actionMenuButton: true })) :
                 react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: '18rem', isLoading: isLoading, uploadProgress: uploadProgress, enableClickUpload: false, mediaType: 'video', handleUpload: handleUpload },
                     react_1.default.createElement(styled_1.StyledInnerWrapper, null,
-                        react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); }, invert: invert }),
+                        react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); } }),
                         enableVideoUpload && (react_1.default.createElement(react_1.default.Fragment, null,
                             react_1.default.createElement(Typo_1.SANS_2, { semibold: true, color: invert ? themes_1.colors.white_opacity60 : themes_1.colors.greyColor80 }, "OR"),
-                            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", invert: invert, id: "videoField" }))))),
+                            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", id: "videoField" }))))),
         showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, { setShowEmbedLinkModal: setShowEmbedLinkModal, value: value, createVideoPreview: createVideoPreview, 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) {

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { GlobalStyles } from "./globalStyles";
 export * from "./themes/mixins";
 export * from "./components/Typo";
 export * from "./globalStyles/globalVariables";
-export * from "./components/Buttons";
 export * from "./components/Breadcrumbs";
 export * from "./components/InlineAlert";
 export * from "./components/Container";
@@ -30,7 +29,6 @@ export { ModalForms } from "./components/Modals/derivedComps/ModalForms";
 export { Modal } from "./components/Modals/Modal";
 export { ModalSmall } from "./components/Modals/derivedComps/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";
-export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";
 export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
 export { default as DatePicker } from "./components/DatePicker";
@@ -83,7 +81,7 @@ export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
 export { TextInput, EmailInput, NumberInput, PhoneInput, PasswordInput, URLInput } from "./v2/components/TextInputs";
-export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2 } from "./v2/components/Tags";
+export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2, TagSelect as TagSelectV2 } from "./v2/components/Tags";
 export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact, ButtonGhostCompact, ButtonUpload } from "./v2/components/Buttons";
 export { colors as colors2, typo as typoV2_CSS } from "./v2/themes";
 export { RadioInput, RadioButton } from "./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index";

package/dist/index.js

@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.FileUploadWrapper = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.ProgressBar = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.TooltipV2 = exports.ListItem = exports.List = exports.LoaderCircleV2 = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction = exports.BannerProvider = void 0;
+exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.FileUploadWrapper = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.ProgressBar = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.TooltipV2 = exports.ListItem = exports.List = exports.LoaderCircleV2 = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagSelectV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.ModalConfirmAction = void 0;
 exports.FloatingPortal = exports.FloatingFocusManager = exports.useFloatingPosition = exports.baseStyling = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
@@ -60,7 +60,6 @@ var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return LoadersAndProgress_1.ProgressBar; } });
 var LoadersAndProgress_2 = require("./components/LoadersAndProgress");
 Object.defineProperty(exports, "LoaderOverlay", { enumerable: true, get: function () { return LoadersAndProgress_2.LoaderOverlay; } });
-__exportStar(require("./components/Buttons"), exports);
 var Tags_1 = require("./components/Tags");
 Object.defineProperty(exports, "TagClear", { enumerable: true, get: function () { return Tags_1.TagClear; } });
 Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () { return Tags_1.TagLink; } });
@@ -101,8 +100,6 @@ var ModalSmall_1 = require("./components/Modals/derivedComps/ModalSmall");
 Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 var EmptyStates_1 = require("./components/EmptyStates");
 Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
-var HomeCover_1 = require("./components/HomeCover");
-Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 var PageScrollIndicator_1 = require("./components/PageScrollIndicator");
 Object.defineProperty(exports, "PageScrollIndicator", { enumerable: true, get: function () { return PageScrollIndicator_1.PageScrollIndicator; } });
 var TextLoader_1 = require("./components/LoadersAndProgress/TextLoader");
@@ -202,6 +199,7 @@ var Tags_2 = require("./v2/components/Tags");
 Object.defineProperty(exports, "TagDisplayV2", { enumerable: true, get: function () { return Tags_2.TagDisplay; } });
 Object.defineProperty(exports, "TagLinkV2", { enumerable: true, get: function () { return Tags_2.TagLink; } });
 Object.defineProperty(exports, "TagClearV2", { enumerable: true, get: function () { return Tags_2.TagClear; } });
+Object.defineProperty(exports, "TagSelectV2", { enumerable: true, get: function () { return Tags_2.TagSelect; } });
 var Buttons_1 = require("./v2/components/Buttons");
 Object.defineProperty(exports, "ButtonPrimaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonPrimary; } });
 Object.defineProperty(exports, "ButtonSecondaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonSecondary; } });
@@ -221,8 +219,8 @@ var MetaBlock_2 = require("./v2/components/MetaBlock");
 Object.defineProperty(exports, "MetaBlockV2", { enumerable: true, get: function () { return __importDefault(MetaBlock_2).default; } });
 var DateRangePicker_2 = require("./v2/components/DateRangePicker");
 Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
-var HomeCover_2 = require("./v2/components/HomeCover");
-Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_2.HomeCover; } });
+var HomeCover_1 = require("./v2/components/HomeCover");
+Object.defineProperty(exports, "HomeCoverV2", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 //V2 data viz comps
 var Accordion_2 = require("./v2/components/Accordion");
 Object.defineProperty(exports, "AccordionV2", { enumerable: true, get: function () { return Accordion_2.Accordion; } });

package/dist/stories/Oolib/components/HomeCover.stories.js

@@ -18,7 +18,7 @@ exports.HomeCover_ = void 0;
 var react_1 = __importDefault(require("react"));
 var HomeCover_1 = require("../../../components/HomeCover");
 var Typo_1 = require("../../../components/Typo");
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 exports.default = {
     title: "Components/HomeCover",
     argTypes: {

package/dist/stories/Oolib/components/ModalConfirmAction.stories.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal_Confirm_Action = void 0;
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../../../v2/components/Buttons");
 var ModalConfirmAction_1 = require("../../../components/Modals/derivedComps/ModalConfirmAction");
 var Banners_1 = require("../../../components/Banners");
 var react_1 = require("react");

package/dist/stories/Oolib/components/Tooltip.stories.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 var react_1 = __importDefault(require("react"));
 var Tooltip_1 = require("../../../components/Tooltip");
-// import { ButtonPrimary } from '../components/Buttons';
 var themes_1 = require("../../../themes");
 var icons_1 = require("../../../icons");
 var Info = icons_1.icons.Info;

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

@@ -39,7 +39,7 @@ var Typo_1 = require("../../../components/Typo");
 var contextApi_1 = require("./contextApi");
 var colors_1 = require("../../themes/colors");
 var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../Buttons");
 var Modal_1 = require("../../../components/Modals/Modal");
 var mixins_1 = require("../../../themes/mixins");
 var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");

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

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
 var react_1 = __importDefault(require("react"));
 var useScrollBar_1 = require("../../../utils/customHooks/useScrollBar");
-var Buttons_1 = require("../../../components/Buttons");
+var Buttons_1 = require("../Buttons");
 var index_styled_1 = require("./index.styled");
 var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var mixins_1 = require("../../../themes/mixins");
@@ -48,7 +48,7 @@ var Base = function (_a) {
     return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
         react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
             !scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
             react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
                 react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX, tabsHasText: tabsHasText, tabBarStyle: tabBarStyle }, options.map(function (op) {
                     var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
@@ -69,7 +69,7 @@ var Base = function (_a) {
                             tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
                 }))),
             !scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
-                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
+                react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
 };
 var TabBarStyle1 = function (props) {
     var _a = props.placeholder, placeholder = _a === void 0 ? 'Select An Option' : _a;

package/package.json

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

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

@@ -1,75 +0,0 @@
-import React from "react";
-import { To } from "react-router-dom";
-export interface DisplayIconProps {
-    icon: string;
-    size: number;
-    color?: string;
-    iconWeight?: string;
-}
-export interface ButtonProps {
-    id?: string;
-    link?: {
-        val: To;
-        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 | "S" | "M";
-    iconColor?: string;
-    iconWeight?: string;
-    stopPropagation?: boolean;
-    preventDefault?: boolean;
-    forceHover?: boolean;
-}
-export interface ButtonStyledWrapperProps {
-    props: ButtonProps;
-    variant?: string;
-}
-export declare const ButtonPrimary: React.FunctionComponent<ButtonProps>;
-export declare const ButtonSecondary: React.FunctionComponent<ButtonProps>;
-export declare const ButtonCustom: React.FunctionComponent<ButtonProps>;
-export declare const ButtonGhost: React.FunctionComponent<ButtonProps>;
-export interface GoogleLoginProps {
-    theme?: string;
-    S?: boolean;
-    disabled?: boolean;
-    width?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    value?: string;
-    children?: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}
-/**
- * Renders a Google login button component.
- *
- * @props - The props for the Google login button component.
- * @prop {string} props.theme - The theme for the button.
- * @prop {string} props.S - The size of the button.
- * @prop {boolean} props.disabled - Whether the button is disabled or not.
- * @prop {string} props.width - The width of the button.
- * @prop {string} props.className - The class name of the button.
- * @prop {React.CSSProperties} props.style - The inline style of the button.
- * @prop {string} props.value - The value of the button.
- * @prop {React.ReactNode} props.children - The children of the button.
- * @prop {Function} props.onClick - The click event handler for the button.
- * @return {React.ReactNode} The rendered Google login button component.
- */
-export declare const GoogleLogin: React.FunctionComponent<GoogleLoginProps>;