oolib 2.83.1 → 2.84.0

package/dist/components/Dropdowns/DropdownMulti/index.d.ts

@@ -1,4 +1,4 @@
-export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, caretColor, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, displayCompStyle, S, disabled, broadcastShowOptions }: {
+export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions }: {
     saveValueAsString: any;
     value: any;
     id: any;
@@ -21,7 +21,6 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
     optionsModalLabel: any;
     genCreateTagButton: any;
     placeholder: any;
-    caretColor: any;
     genCustomSelectComp: any;
     disableSelectTextUpdate: any;
     selectConfig: any;
@@ -29,7 +28,6 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
     lightboxStyle: any;
     optionsAnchor: any;
     popOutOfOverflowHiddenParent: any;
-    displayCompStyle: any;
     S: any;
     disabled: any;
     broadcastShowOptions: any;

package/dist/components/Dropdowns/DropdownMulti/index.js

@@ -60,10 +60,9 @@ function DropdownMulti(_a) {
     // injectOtherOption,
     readOnly = _a.readOnly, invert = _a.invert, selectClassName = _a.selectClassName, //used to override font size in priimary header
     optionsClassName = _a.optionsClassName, //used to override font size in priimary header
-    selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, caretColor = _a.caretColor, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig, 
+    selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig, 
     //props whose existence needs to be questioned:
-    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, displayCompStyle = _a.displayCompStyle, //can be either tagsStyle OR commaSeparatedStyle
-    S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions;
+    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
     var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
@@ -137,23 +136,8 @@ function DropdownMulti(_a) {
     var genDisplayComp = function () {
         if (!(value === null || value === void 0 ? void 0 : value.length) > 0)
             return null;
-        var tagsStyle = (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme }); })));
-        var commaSeparatedStyle = (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: '0.5rem' } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
+        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme }); }))) : (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1 }))); })));
-        //if an explicit displayComp style is specified then listen to it.
-        //else apply tagsStyle to 'tagStyle' inputs & commaseparatedstyle to
-        //regular plain dropdowns.
-        if (!!displayCompStyle) {
-            return displayCompStyle === 'tagsStyle'
-                ? tagsStyle
-                : displayCompStyle === 'commaSeparatedStyle'
-                    && commaSeparatedStyle;
-        }
-        else {
-            return isTagsStyle
-                ? tagsStyle
-                : commaSeparatedStyle;
-        }
     };
     var _e = (0, react_1.useState)(false), focusSelectTagsInput = _e[0], setFocusSelectTagsInput = _e[1];
     var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, __assign({}, {
@@ -185,7 +169,6 @@ function DropdownMulti(_a) {
                 selectClassName: selectClassName,
                 selectStyleOverride: selectStyleOverride,
                 showOptions: showOptions,
-                caretColor: caretColor,
                 genCustomSelectComp: genCustomSelectComp,
                 disableSelectTextUpdate: disableSelectTextUpdate,
                 selectConfig: selectConfig,

package/dist/components/Dropdowns/DropdownSingle/index.d.ts

@@ -1,4 +1,4 @@
-export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, caretColor, genCreateTagButton, popOutOfOverflowHiddenParent, displayCompStyle, S, disabled }: {
+export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, genCreateTagButton, popOutOfOverflowHiddenParent, S, disabled }: {
     optionsAnchor: any;
     lightboxHeight: any;
     lightboxStyle: any;
@@ -28,10 +28,8 @@ export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, s
     searchString: any;
     genCustomSelectComp: any;
     placeholder: any;
-    caretColor: any;
     genCreateTagButton: any;
     popOutOfOverflowHiddenParent: any;
-    displayCompStyle: any;
     S: any;
     disabled: any;
 }, ...args: any[]): React.JSX.Element;

package/dist/components/Dropdowns/DropdownSingle/index.js

@@ -70,7 +70,7 @@ function DropdownSingle(_a) {
     //combobox specific
     isSearchable = _a.isSearchable, //
     searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, genCustomSelectComp = _a.genCustomSelectComp, placeholder = _a.placeholder, //
-    caretColor = _a.caretColor, genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, displayCompStyle = _a.displayCompStyle, S = _a.S, //
+    genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, //
     disabled = _a.disabled //
     ;
     var theme = (0, styled_components_1.useTheme)();
@@ -143,7 +143,6 @@ function DropdownSingle(_a) {
                 invert: invert,
                 value: value,
                 placeholder: placeholder,
-                caretColor: caretColor,
                 genCustomSelectComp: genCustomSelectComp,
                 selectClassName: selectClassName,
                 selectStyleOverride: selectStyleOverride,
@@ -160,22 +159,7 @@ function DropdownSingle(_a) {
     var genDisplayComp = function () {
         if (!value)
             return null;
-        var tagsStyle = (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme })));
-        var commaSeparatedStyle = react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert }));
-        //if an explicit displayComp style is specified then listen to it.
-        //else apply tagsStyle to 'tagStyle' inputs & commaseparatedstyle to
-        //regular plain dropdowns.
-        if (!!displayCompStyle) {
-            return displayCompStyle === 'tagsStyle'
-                ? tagsStyle
-                : displayCompStyle === 'commaSeparatedStyle'
-                    && commaSeparatedStyle;
-        }
-        else {
-            return isTagsStyle
-                ? tagsStyle
-                : commaSeparatedStyle;
-        }
+        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert })));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : ""), style: style },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props) /** in other words, props. */)),

package/dist/components/Dropdowns/comps/Caret/index.d.ts

@@ -1,6 +1,5 @@
-export function Caret({ invert, caretColor, showOptions, disabled }: {
+export function Caret({ invert, showOptions, disabled }: {
     invert: any;
-    caretColor: any;
     showOptions: any;
     disabled: any;
 }): React.JSX.Element;

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

@@ -11,9 +11,9 @@ var styled_1 = require("./styled");
 var white = colors_1.colors.white, greyColor100 = colors_1.colors.greyColor100, greyColor40 = colors_1.colors.greyColor40;
 var CaretDown = icons_1.icons.CaretDown, CaretUp = icons_1.icons.CaretUp;
 var Caret = function (_a) {
-    var invert = _a.invert, caretColor = _a.caretColor, showOptions = _a.showOptions, disabled = _a.disabled;
+    var invert = _a.invert, showOptions = _a.showOptions, disabled = _a.disabled;
     return (react_1.default.createElement(styled_1.StyledCaret, null,
-        showOptions ? (react_1.default.createElement(CaretUp, { size: 12, color: invert ? white : caretColor || greyColor100, weight: "bold" })) : (react_1.default.createElement(CaretDown, { size: 12, color: disabled ? greyColor40 : invert ? white : caretColor || greyColor100, weight: "bold" })),
+        showOptions ? (react_1.default.createElement(CaretUp, { size: 12, color: invert ? white : greyColor100, weight: "bold" })) : (react_1.default.createElement(CaretDown, { size: 12, color: disabled ? greyColor40 : invert ? white : greyColor100, weight: "bold" })),
         react_1.default.createElement(styled_1.StyledCaretClickArea, null)));
 };
 exports.Caret = Caret;

package/dist/components/Dropdowns/comps/SelectDropdown/index.d.ts

@@ -1,8 +1,7 @@
-export function SelectDropdown({ invert, value, placeholder, caretColor, genCustomSelectComp, selectClassName, showOptions, disableSelectTextUpdate, selectConfig, selectStyleOverride, S, disabled, }: {
+export function SelectDropdown({ invert, value, placeholder, genCustomSelectComp, selectClassName, showOptions, disableSelectTextUpdate, selectConfig, selectStyleOverride, S, disabled, }: {
     invert: any;
     value: any;
     placeholder: any;
-    caretColor: any;
     genCustomSelectComp: any;
     selectClassName: any;
     showOptions: any;

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

@@ -24,7 +24,7 @@ var styled_1 = require("./styled");
 var SelectDropdown = function (_a) {
     var 
     //from root
-    invert = _a.invert, value = _a.value, placeholder = _a.placeholder, caretColor = _a.caretColor, genCustomSelectComp = _a.genCustomSelectComp, selectClassName = _a.selectClassName, 
+    invert = _a.invert, value = _a.value, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, selectClassName = _a.selectClassName, 
     //from Dropdown
     showOptions = _a.showOptions, 
     //used only for filters, where we dont remove the placeholder even when an option is selected, instead we sustain the blue underline
@@ -57,7 +57,7 @@ var SelectDropdown = function (_a) {
                     //   dropdownSelectText.desc && showElem("desc") ? true : undefined
                     // }
                     className: "".concat(selectClassName || "", " ").concat(!value && placeholder) }, dropdownSelectText.display)))),
-        react_1.default.createElement(Caret_1.Caret, __assign({}, { caretColor: caretColor, showOptions: showOptions, invert: invert, disabled: disabled })))); };
+        react_1.default.createElement(Caret_1.Caret, __assign({}, { showOptions: showOptions, invert: invert, disabled: disabled })))); };
     return genCustomSelectComp ? genCustomSelectComp() : genSelectComp();
 };
 exports.SelectDropdown = SelectDropdown;

package/dist/components/ImageInput/comps/Placeholder/styled.js

@@ -22,9 +22,9 @@ exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObjec
     var smallPlaceholderUI = _a.smallPlaceholderUI;
     return !smallPlaceholderUI && "1.2rem";
 }, (0, mixins_1.transition)("background-color"));
-exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"])), function (_a) {
+exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  /* gap: ", "; */\n  gap: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  /* gap: ", "; */\n  gap: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var smallPlaceholderUI = _a.smallPlaceholderUI;
-    return !smallPlaceholderUI && "0.3rem";
+    return !smallPlaceholderUI && "0.5rem";
 }, function (_a) {
     var containerShape = _a.containerShape;
     return containerShape === "circle" ? "50%" : "unset";

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

@@ -1,9 +1,10 @@
 export default PDFInput;
-declare function PDFInput({ id, onChange: parentOnChange, value, readOnly, invert, isInRTE, ...props }: {
+declare function PDFInput({ id, onChange: parentOnChange, value, files, readOnly, invert, isInRTE, ...props }: {
     [x: string]: any;
     id: any;
     onChange: any;
     value: any;
+    files: any;
     readOnly: any;
     invert: any;
     isInRTE: any;

package/dist/components/PDFInput/index.js

@@ -67,7 +67,7 @@ var ProgressBar_1 = require("../LoadersAndProgress/ProgressBar");
 var PDFActions_1 = require("./comps/PDFActions");
 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, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, props = __rest(_a, ["id", "onChange", "value", "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, props = __rest(_a, ["id", "onChange", "value", "files", "readOnly", "invert", "isInRTE"]);
     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;
@@ -97,6 +97,11 @@ function PDFInput(_a) {
             },
         });
     };
+    (0, react_1.useEffect)(function () {
+        if (files) {
+            handleUpload(files);
+        }
+    }, []);
     return (react_1.default.createElement(react_3.Fragment, null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props), { invert: invert })),
         readOnly ? (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 })); }))

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -25,7 +25,7 @@ var utils_1 = require("../../../../utils");
 var CheckboxButton_1 = require("../CheckboxButton");
 var TextLoader_1 = require("../../../../../LoadersAndProgress/TextLoader");
 var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
-var green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40;
+var red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, invertGreen = themes_1.colors.invertGreen, green = themes_1.colors.green, invertRed = themes_1.colors.invertRed;
 var CheckboxInput = function (_a) {
     var option = _a.option, onClick = _a.onClick, S = _a.S, inputStyle = _a.inputStyle, _b = _a.value, value = _b === void 0 ? [] : _b, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult;
     var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
@@ -42,11 +42,11 @@ var CheckboxInput = function (_a) {
             disabled: options.disabled || disabled
         })));
     };
-    var genCheckSquare = function () { return (react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: green, style: {
+    var genCheckSquare = function () { return (react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: invert ? invertGreen : green, style: {
             margin: '-7px -2.8px -7px -3.2px',
             flexShrink: 0
         } })); };
-    var genXSquare = function () { return (react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: red, style: {
+    var genXSquare = function () { return (react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: invert ? invertRed : red, style: {
             margin: '-7px -2.8px -7px -3.2px',
             flexShrink: 0
         } })); };

package/dist/components/RadioAndCheckbox/comps/CheckboxList/index.js

@@ -106,6 +106,6 @@ function CheckboxList(_a) {
             shouldHideSomeOptions && !rightWrongResult && (react_1.default.createElement(Typo_1.SANS_3, { style: { marginTop: '1rem' } },
                 react_1.default.createElement(OKELink_1.OKELink, { onClick: function () { return setSeeMore(!seeMore); }, children: !seeMore ? 'See More' : 'See Less' }))),
             rightWrongResult && commonIsCorrectDesc &&
-                react_1.default.createElement(styled_1.StyledCorrectMessage, null, commonIsCorrectDesc)))));
+                react_1.default.createElement(styled_1.StyledCorrectMessage, { invert: invert }, commonIsCorrectDesc)))));
 }
 exports.CheckboxList = CheckboxList;

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.js

@@ -22,7 +22,7 @@ var Typo_1 = require("../../../../../Typo");
 var utils_1 = require("../../../../utils");
 var styled_1 = require("../../../../styled");
 var styled_2 = require("./styled");
-var green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40;
+var invertGreen = themes_1.colors.invertGreen, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, green = themes_1.colors.green, invertRed = themes_1.colors.invertRed;
 var XCircle = icons_1.icons.XCircle, CheckCircle = icons_1.icons.CheckCircle;
 var RadioButton = function (_a) {
     var isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S;
@@ -46,11 +46,11 @@ var RadioInput = function (_a) {
             disabled: options.disabled || disabled //because we force disabled if rightWrongResult exists & no markingCommand exists against this option i.e, it neither has to be marked right nor wrong
         })));
     };
-    var genCheckCircle = function () { return (react_1.default.createElement(CheckCircle, { size: S ? 21 : 24.5, color: green, style: {
+    var genCheckCircle = function () { return (react_1.default.createElement(CheckCircle, { size: S ? 21 : 24.5, color: invert ? invertGreen : green, style: {
             margin: '-5px -1.5px -5px -3px',
             flexShrink: 0
         } })); };
-    var genXCircle = function () { return (react_1.default.createElement(XCircle, { size: S ? 21 : 24.5, color: red, style: {
+    var genXCircle = function () { return (react_1.default.createElement(XCircle, { size: S ? 21 : 24.5, color: invert ? invertRed : red, style: {
             margin: '-5px -1.5px -5px -3px',
             flexShrink: 0
         } })); };

package/dist/components/RadioAndCheckbox/comps/RadioList/index.js

@@ -95,6 +95,6 @@ function RadioList(_a) {
             against the right answer. provided that an explanation is provided.
             */
             correctOp && rightWrongResult && commonIsCorrectDesc &&
-                react_1.default.createElement(styled_1.StyledCorrectMessage, null, commonIsCorrectDesc)))));
+                react_1.default.createElement(styled_1.StyledCorrectMessage, { invert: invert }, commonIsCorrectDesc)))));
 }
 exports.RadioList = RadioList;

package/dist/components/RadioAndCheckbox/styled.js

@@ -33,7 +33,7 @@ var utilsOolib_1 = require("../../utilsOolib");
 var Typo_1 = require("../Typo");
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
-var green = themes_1.colors.green, greyColor80 = themes_1.colors.greyColor80;
+var green = themes_1.colors.green, greyColor80 = themes_1.colors.greyColor80, white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100;
 exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"])), function (_a) {
     var S = _a.S;
     return S ? '0.7rem 1.5rem' : '1rem 2rem';
@@ -67,5 +67,8 @@ exports.StyledOtherTextInputWrapper = styled_components_1.default.div(templateOb
     var listType = _a.listType;
     return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["margin-left: 2.5rem;"], ["margin-left: 2.5rem;"]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["width: 28rem"], ["width: 28rem"])));
 }, (0, mixins_1.mediaQuery)('sm'));
-exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  padding-top: 1rem;\n"], ["\n  color: ", ";\n  padding-top: 1rem;\n"])), green);
+exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  padding-top: 1rem;\n"], ["\n  color: ", ";\n  padding-top: 1rem;\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? white : greyColor100;
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/package.json

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