oolib 2.229.0 → 2.229.2

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

@@ -1,5 +1,5 @@
 export default AudioInput;
-declare function AudioInput({ id, value, onChange: parentOnChange, readOnly, invert, isInRTE, files, ...props }: {
+declare function AudioInput({ id, value, onChange: parentOnChange, readOnly, invert, isInRTE, files, onUploadStatusChange, ...props }: {
     [x: string]: any;
     id: any;
     value: any;
@@ -8,5 +8,6 @@ declare function AudioInput({ id, value, onChange: parentOnChange, readOnly, inv
     invert: any;
     isInRTE: any;
     files: any;
+    onUploadStatusChange: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/AudioInput/index.js

@@ -67,7 +67,7 @@ var AudioPlayer_1 = require("./comps/AudioPlayer");
 var styled_js_1 = require("./styled.js");
 var FileUploadWrapper_1 = require("../FileUploadWrapper");
 function AudioInput(_a) {
-    var id = _a.id, value = _a.value, parentOnChange = _a.onChange, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, files = _a.files, props = __rest(_a, ["id", "value", "onChange", "readOnly", "invert", "isInRTE", "files"]);
+    var id = _a.id, value = _a.value, parentOnChange = _a.onChange, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, files = _a.files, onUploadStatusChange = _a.onUploadStatusChange, props = __rest(_a, ["id", "value", "onChange", "readOnly", "invert", "isInRTE", "files", "onUploadStatusChange"]);
     var audioData = value || [];
     var theme = (0, styled_components_1.useTheme)();
     var _b = (0, react_1.useState)(null), uploadProgress = _b[0], setUploadProgress = _b[1];
@@ -82,6 +82,9 @@ function AudioInput(_a) {
         },
         handleUploadProgess: handleUploadProgess,
     })) || (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "audio" }), upload = _c.mutate, isLoading = _c.isLoading;
+    (0, react_1.useEffect)(function () {
+        onUploadStatusChange === null || onUploadStatusChange === void 0 ? void 0 : onUploadStatusChange(isLoading);
+    }, [isLoading]);
     var handleUpload = function (_a) {
         var files = _a.files;
         if (!files)

package/dist/components/ImageInput/ImageInputContext.d.ts

@@ -1,5 +1,5 @@
 export const ImageInputContext: React.Context<any>;
-export function ImageInputContextProvider({ children, value, multiple, allowedFormats, formatConvertConfig, folderName, bucketEnv, onChange, id, aspectRatio, readOnly, enableCaptions, defaultImageSpread, invert, containerShape, stretchToFullHeight, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, files, showOptionalLabelInDropzone, isRequired, isInRTE, showImageUploadCaution, imageTags }: {
+export function ImageInputContextProvider({ children, value, multiple, allowedFormats, formatConvertConfig, folderName, bucketEnv, onChange, id, aspectRatio, readOnly, enableCaptions, defaultImageSpread, invert, containerShape, stretchToFullHeight, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, files, showOptionalLabelInDropzone, isRequired, isInRTE, showImageUploadCaution, imageTags, onUploadStatusChange }: {
     children: any;
     value: any;
     multiple: any;
@@ -26,6 +26,7 @@ export function ImageInputContextProvider({ children, value, multiple, allowedFo
     isInRTE: any;
     showImageUploadCaution: any;
     imageTags: any;
+    onUploadStatusChange: any;
 }): React.JSX.Element;
 export function useImageInputContext(): any;
 import React from "react";

package/dist/components/ImageInput/ImageInputContext.js

@@ -60,7 +60,7 @@ var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
 var bannerContext_1 = require("../Banners/bannerContext");
 exports.ImageInputContext = (0, react_1.createContext)();
 var ImageInputContextProvider = function (_a) {
-    var children = _a.children, value = _a.value, multiple = _a.multiple, allowedFormats = _a.allowedFormats, formatConvertConfig = _a.formatConvertConfig, folderName = _a.folderName, bucketEnv = _a.bucketEnv, onChange = _a.onChange, id = _a.id, aspectRatio = _a.aspectRatio, readOnly = _a.readOnly, enableCaptions = _a.enableCaptions, defaultImageSpread = _a.defaultImageSpread, invert = _a.invert, containerShape = _a.containerShape, stretchToFullHeight = _a.stretchToFullHeight, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, disableImageBorder = _a.disableImageBorder, omitEditorTools = _a.omitEditorTools, files = _a.files, showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, isInRTE = _a.isInRTE, showImageUploadCaution = _a.showImageUploadCaution, imageTags = _a.imageTags;
+    var children = _a.children, value = _a.value, multiple = _a.multiple, allowedFormats = _a.allowedFormats, formatConvertConfig = _a.formatConvertConfig, folderName = _a.folderName, bucketEnv = _a.bucketEnv, onChange = _a.onChange, id = _a.id, aspectRatio = _a.aspectRatio, readOnly = _a.readOnly, enableCaptions = _a.enableCaptions, defaultImageSpread = _a.defaultImageSpread, invert = _a.invert, containerShape = _a.containerShape, stretchToFullHeight = _a.stretchToFullHeight, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, disableImageBorder = _a.disableImageBorder, omitEditorTools = _a.omitEditorTools, files = _a.files, showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, isInRTE = _a.isInRTE, showImageUploadCaution = _a.showImageUploadCaution, imageTags = _a.imageTags, onUploadStatusChange = _a.onUploadStatusChange;
     var theme = (0, styled_components_1.useTheme)();
     var _b = (0, react_1.useState)(undefined), uploadProgress = _b[0], setUploadProgress = _b[1];
     var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
@@ -76,6 +76,9 @@ var ImageInputContextProvider = function (_a) {
     })) ||
         (0, useFakeUploadMedia_1.useFakeUploadMedia)({ handleUploadProgess: handleUploadProgess }), upload = _c.mutate, isLoading = _c.isLoading; //for storybook purposes cuz we dont have access to mediaupload api here
     var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
+    (0, react_1.useEffect)(function () {
+        onUploadStatusChange === null || onUploadStatusChange === void 0 ? void 0 : onUploadStatusChange(isLoading);
+    }, [isLoading]);
     var _d = (0, react_1.useState)(0), noOfImagesUploading = _d[0], setNoOfImagesUploading = _d[1];
     var _e = (0, react_1.useState)({}), uploadArgs = _e[0], setUploadArgs = _e[1];
     var _f = (0, react_1.useState)(false), showModal = _f[0], setShowModal = _f[1];

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

@@ -6,7 +6,7 @@
  * - richInputHasValue (util)
  * - RichTextEditor
  */
-export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, imageTags, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, isRequired, showImageUploadCaution, files, isInRTE }: {
+export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, imageTags, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, isRequired, showImageUploadCaution, files, isInRTE, onUploadStatusChange }: {
     id: any;
     value: any;
     onChange: any;
@@ -31,5 +31,6 @@ export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToF
     showImageUploadCaution?: {};
     files: any;
     isInRTE: any;
+    onUploadStatusChange: any;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

package/dist/components/ImageInput/index.js

@@ -35,14 +35,14 @@ function ImageInput(_a) {
     var id = _a.id, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, multiple = _a.multiple, _b = _a.stretchToFullHeight, stretchToFullHeight = _b === void 0 ? false : _b, _c = _a.aspectRatio, aspectRatio = _c === void 0 ? '5/3' : _c, _d = _a.containerShape, containerShape = _d === void 0 ? 'rectangle' : _d, //alt = circle
     invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, imageTags = _a.imageTags, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'contain' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
     isRequired = _a.isRequired, _l = _a.showImageUploadCaution, showImageUploadCaution = _l === void 0 ? {} : _l, files = _a.files, //used by RTEImageInput
-    isInRTE = _a.isInRTE;
+    isInRTE = _a.isInRTE, onUploadStatusChange = _a.onUploadStatusChange;
     var props = arguments[0];
     var showOptionalLabelInDropzone = !props.label && !props.sublabel;
     var localize = (0, utilsOolib_1.useLocale)();
     return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, { value: value, onChange: onChange, id: id, allowedFormats: allowedFormats, formatConvertConfig: formatConvertConfig, folderName: folderName, bucketEnv: bucketEnv, multiple: multiple, aspectRatio: aspectRatio, readOnly: readOnly, enableCaptions: enableCaptions, imageTags: imageTags, defaultImageSpread: defaultImageSpread, invert: invert, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, dropzoneLabel: dropzoneLabel || (multiple ? "".concat(localize('Add Images'), " ( max 10 )") : "Add Image"),
         dropzoneSublabel: dropzoneSublabel ||
             "Supports: ".concat(allowedFormats.map(function (f) { return f.toUpperCase(); }).join(", ")), showOptionalLabelInDropzone: showOptionalLabelInDropzone, // in cases like cover image scenario, we wanna show the 'optional' label in the dropzone area, rather than label area
-        isRequired: isRequired, files: files, isInRTE: isInRTE, showImageUploadCaution: showImageUploadCaution },
+        isRequired: isRequired, files: files, isInRTE: isInRTE, showImageUploadCaution: showImageUploadCaution, onUploadStatusChange: onUploadStatusChange },
         react_1.default.createElement("div", { style: { height: stretchToFullHeight ? "100%" : "auto", } },
             react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(__assign(__assign({}, props), { hideOptionalLabel: showOptionalLabelInDropzone })))),
             multiple ? (react_1.default.createElement(GallerySlider_1.default, null)) : isInRTE

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

@@ -1,5 +1,5 @@
 export default PDFInput;
-declare function PDFInput({ id, onChange: parentOnChange, value, files, readOnly, invert, isInRTE, ...props }: {
+declare function PDFInput({ id, onChange: parentOnChange, value, files, readOnly, invert, isInRTE, onUploadStatusChange, ...props }: {
     [x: string]: any;
     id: any;
     onChange: any;
@@ -8,5 +8,6 @@ declare function PDFInput({ id, onChange: parentOnChange, value, files, readOnly
     readOnly: any;
     invert: any;
     isInRTE: any;
+    onUploadStatusChange: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/PDFInput/index.js

@@ -76,7 +76,7 @@ var PDFActions_1 = require("./comps/PDFActions");
 var FileUploadWrapper_1 = require("../FileUploadWrapper");
 var StyledActionsButtonWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1000;\n  margin: 0.5rem;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1000;\n  margin: 0.5rem;\n"])));
 function PDFInput(_a) {
-    var id = _a.id, parentOnChange = _a.onChange, value = _a.value, files = _a.files, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, props = __rest(_a, ["id", "onChange", "value", "files", "readOnly", "invert", "isInRTE"]);
+    var id = _a.id, parentOnChange = _a.onChange, value = _a.value, files = _a.files, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, onUploadStatusChange = _a.onUploadStatusChange, props = __rest(_a, ["id", "onChange", "value", "files", "readOnly", "invert", "isInRTE", "onUploadStatusChange"]);
     var theme = (0, styled_components_1.useTheme)();
     var _b = (0, react_1.useState)(null), uploadProgress = _b[0], setUploadProgress = _b[1];
     var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
@@ -91,6 +91,9 @@ function PDFInput(_a) {
         },
         handleUploadProgess: handleUploadProgess,
     })) || (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "pdf" }), upload = _c.mutate, isLoading = _c.isLoading;
+    (0, react_1.useEffect)(function () {
+        onUploadStatusChange === null || onUploadStatusChange === void 0 ? void 0 : onUploadStatusChange(isLoading);
+    }, [isLoading]);
     var handleUpload = function (_a) {
         var files = _a.files;
         if (!files)

package/dist/components/ResourceInput/index.js

@@ -68,14 +68,14 @@ var utilsOolib_1 = require("../../utilsOolib");
 var themes_1 = require("../../themes");
 var Plus = icons_1.icons.Plus;
 var ResourceInput = function (props) {
-    var parentOnChange = props.onChange, comp_id = props.id, _a = props.folderName, folderName = _a === void 0 ? "media" : _a, value = props.value, _b = props.multiple, multiple = _b === void 0 ? true : _b, uploadBtnText = props.uploadBtnText, readOnly = props.readOnly, invert = props.invert;
+    var parentOnChange = props.onChange, comp_id = props.id, _a = props.folderName, folderName = _a === void 0 ? "media" : _a, value = props.value, _b = props.multiple, multiple = _b === void 0 ? true : _b, uploadBtnText = props.uploadBtnText, readOnly = props.readOnly, invert = props.invert, onUploadStatusChange = props.onUploadStatusChange;
     var theme = (0, styled_components_1.useTheme)();
     var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
     var _c = (0, react_1.useState)(undefined), uploadProgress = _c[0], setUploadProgress = _c[1];
     var _d = (0, react_1.useState)(0), filesLength = _d[0], setFilesLength = _d[1];
     var _e = (0, react_1.useState)(value ? __spreadArray([], value, true) : []), resources = _e[0], setResources = _e[1];
     var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
-    var upload = ((theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
+    var _f = (theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
         mediaConfigs: {
             type: "files",
             folderName: folderName,
@@ -83,8 +83,11 @@ var ResourceInput = function (props) {
         },
         handleUploadProgess: handleUploadProgess,
     })) ||
-        (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "resource" })).mutate;
+        (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "resource" }), upload = _f.mutate, isLoading = _f.isLoading;
     var inputRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        onUploadStatusChange === null || onUploadStatusChange === void 0 ? void 0 : onUploadStatusChange(isLoading);
+    }, [isLoading]);
     var handleUpload = function (files) {
         if (!files)
             return;

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

@@ -1,5 +1,5 @@
 export default VideoInput;
-declare function VideoInput({ id, label, sublabel, isRequired, value: _value, onChange, readOnly, light: lightPlayer, enableVideoUpload, isInRTE, invert, files, width, height }: {
+declare function VideoInput({ id, label, sublabel, isRequired, value: _value, onChange, readOnly, light: lightPlayer, enableVideoUpload, isInRTE, invert, files, width, height, onUploadStatusChange }: {
     id: any;
     label: any;
     sublabel: any;
@@ -14,5 +14,6 @@ declare function VideoInput({ id, label, sublabel, isRequired, value: _value, on
     files: any;
     width: any;
     height: any;
+    onUploadStatusChange: any;
 }, ...args: any[]): React.JSX.Element;
 import React from 'react';

package/dist/components/VideoInput/index.js

@@ -64,7 +64,7 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 var utils_1 = require("./utils");
 function VideoInput(_a) {
     var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
-    width = _a.width, height = _a.height;
+    width = _a.width, height = _a.height, onUploadStatusChange = _a.onUploadStatusChange;
     var props = arguments[0];
     //backwards compatibility
     var value = typeof _value === 'string'
@@ -86,6 +86,9 @@ function VideoInput(_a) {
         handleUploadProgess: handleUploadProgess,
     })) ||
         (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "video" }), upload = _e.mutate, isLoading = _e.isLoading;
+    (0, react_1.useEffect)(function () {
+        onUploadStatusChange === null || onUploadStatusChange === void 0 ? void 0 : onUploadStatusChange(isLoading);
+    }, [isLoading]);
     var handleUpload = function (_a) {
         // onChange(id, undefined) //so that the prev video is cleared and loader shows up
         var files = _a.files;

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

@@ -93,17 +93,20 @@ function DateRangePicker_(props) {
         }
         return undefined;
     };
-    var getMaxDate = function () {
+    var getMaxDate = function (isStartDate) {
         if (previousDateOnly) {
             return yesterday;
         }
+        if (isStartDate && endDate) {
+            return endDate;
+        }
         return undefined;
     };
     return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.2rem' } },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledDateRangeInputWrapper, { invert: invert, readOnly: readOnly },
             react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
-                react_1.default.createElement(DatePicker_1.default, { value: startDate, onChange: function (date) { return handleDateChange(0, date); }, id: "".concat(id, "-start"), readOnly: readOnly, disabled: disabled, withPortal: withPortal, portalId: "date-picker-portal-start", minDate: getMinDate(false), maxDate: getMaxDate(), pickerLabel: startDateLabel, debug: debug })),
+                react_1.default.createElement(DatePicker_1.default, { value: startDate, onChange: function (date) { return handleDateChange(0, date); }, id: "".concat(id, "-start"), readOnly: readOnly, disabled: disabled, withPortal: withPortal, portalId: "date-picker-portal-start", minDate: getMinDate(false), maxDate: getMaxDate(true), pickerLabel: startDateLabel, debug: debug })),
             react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null),
             react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, value && value[1] === null ? (react_1.default.createElement("div", { style: { border: "1px solid ".concat(__1.colors2.grey20), padding: '8px 20px', borderRadius: '5px', width: '120px', background: "".concat(__1.colors2.grey5) } },
                 react_1.default.createElement(TextInputs_1.TextInput, { value: "OnGoing", readOnly: true }))) : (react_1.default.createElement(DatePicker_1.default, { value: endDate, onChange: function (date) { return handleDateChange(1, date); }, id: "".concat(id, "-end"), readOnly: readOnly, disabled: disabled || (value && value[1] === null), withPortal: withPortal, portalId: "date-picker-portal-end", minDate: getMinDate(true), maxDate: getMaxDate(), pickerLabel: endDateLabel, debug: debug })))),

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

@@ -69,7 +69,7 @@ var List = function (_a) {
     // const theme = useTheme();
     var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, parentOnChange = _a.onChange, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, _c = _a.isMulti, isMulti = _c === void 0 ? false : _c, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, disableShadow = _a.disableShadow, isSearchable = _a.isSearchable, searchbarPlaceholder = _a.searchbarPlaceholder, searchBarFocus = _a.searchBarFocus, searchString = _a.searchString, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus, children = _a.children, enableBorder = _a.enableBorder, style = _a.style, groupHeaderStickyTop = _a.groupHeaderStickyTop, showListInParent = _a.showList, usedIn = _a.usedIn, alignCheckbox = _a.alignCheckbox, iconAfter = _a.iconAfter;
     var renderListItems = function () {
-        if (options.length === 0) {
+        if (options.length === 0 && searchString) {
             return react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S });
         }
         if ((0, exports.isGroupedData)(options)) {

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

@@ -150,13 +150,13 @@ exports.TabBarTabStyled = styled_components_1.default.button(templateObject_17 |
             return exports.tabStyles.style2;
     }
 });
-exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  background-color: ", ";\n  height: 100%;\n  border-right: 1px solid ", ";\n  border-left: 1px solid ", ";\n  z-index: 10;\n"], ["\n  position: absolute;\n  ", "\n  background-color: ", ";\n  height: 100%;\n  border-right: 1px solid ", ";\n  border-left: 1px solid ", ";\n  z-index: 10;\n"])), function (_a) {
+exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  height: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n"], ["\n  position: absolute;\n  ", "\n  height: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var left = _a.left, right = _a.right;
     if (left)
-        return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject([" left: 0;"], [" left: 0;"])));
+        return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n        left: 0;\n        background: linear-gradient(to left, transparent, ", ");\n        padding-right: 0.5rem;\n      "], ["\n        left: 0;\n        background: linear-gradient(to left, transparent, ", ");\n        padding-right: 0.5rem;\n      "])), white);
     else if (right)
-        return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject([" right: 0;"], [" right: 0;"])));
-}, white, grey10, grey10);
+        return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n        right: 0;\n        background: linear-gradient(to right, transparent, ", ");\n        padding-left: 0.5rem;\n      "], ["\n        right: 0;\n        background: linear-gradient(to right, transparent, ", ");\n        padding-left: 0.5rem;\n      "])), white);
+});
 exports.StyledDot = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background: ", ";\n  height: 5px;\n  width: 5px;\n  border-radius: 50%;\n  margin-left: 10px;\n"], ["\n  background: ", ";\n  height: 5px;\n  width: 5px;\n  border-radius: 50%;\n  margin-left: 10px;\n"])), function (_a) {
     var active = _a.active, error = _a.error, tabBarStyle = _a.tabBarStyle;
     return tabBarStyle === "2" && active ? errorColor : !active && error ? errorColor : errorColor;

package/package.json

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