oolib 2.175.2 → 2.175.4

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

@@ -194,7 +194,7 @@ var barConfigs = {
     },
 };
 var BarChart = function (_a) {
-    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f, setAccordionOverflow = _a.setAccordionOverflow;
+    var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.breakdownDisplayType, breakdownDisplayType = _c === void 0 ? "grouped" : _c, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, _f = _a.colorIdx, colorIdx = _f === void 0 ? 0 : _f;
     var isBreakdown = Array.isArray(valuePath);
     var data = usePrepareData({
         _data: _data,
@@ -272,7 +272,7 @@ var BarChart = function (_a) {
                             // god knows why the dataindex gets stored against props.label. 
                             // this is some internal recharts thing for tooltips specifically. 
                             // we dont do this.
-                            value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }), setAccordionOverflow: setAccordionOverflow })));
+                            value: (_a = data[props.label]) === null || _a === void 0 ? void 0 : _a.map(function (item, idx) { return (__assign(__assign({}, item.labels), { color: colors_1.dataVizColors[(colorIdx + idx) % colors_1.dataVizColors.length] })); }) })));
                     }, cursor: false, allowEscapeViewBox: { x: true, y: true } })),
                 isBreakdown
                     ? data[0].map(function (_, stackIndex) {

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

@@ -44,18 +44,17 @@ var DataVizAccordion = function (_a) {
         },
     };
     var _c = (0, react_2.useState)(chartOptions[0]), activeCompConfig = _c[0], setActiveCompConfig = _c[1];
-    var genActiveChartComp = function (activeCompConfig, setAccordionOverflow) {
+    var genActiveChartComp = function (activeCompConfig) {
         var ActiveChartComp = ChartComps[activeCompConfig.comp].comp;
         var wrapperStyle = ChartComps[activeCompConfig.comp].wrapperStyle;
         return (react_1.default.createElement("div", { style: __assign({ padding: "0 1.6rem 1rem 1.6rem" }, (wrapperStyle || {})) },
-            react_1.default.createElement(ActiveChartComp, __assign({}, props, activeCompConfig.props, { setAccordionOverflow: setAccordionOverflow }))));
+            react_1.default.createElement(ActiveChartComp, __assign({}, props, activeCompConfig.props))));
     };
-    var _d = (0, react_2.useState)('hidden'), accordionOverflow = _d[0], setAccordionOverflow = _d[1];
-    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, accordionOverflow: accordionOverflow, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
+    return (react_1.default.createElement(Accordion_1.Accordion, { key: JSON.stringify(activeCompConfig), title: title, actionsConfig: chartOptions.length > 1 && chartOptions.map(function (d) { return ({
             display: d.display,
             onClick: function () {
                 return setActiveCompConfig(d);
             },
-        }); }) }, genActiveChartComp(activeCompConfig, setAccordionOverflow)));
+        }); }) }, genActiveChartComp(activeCompConfig)));
 };
 exports.DataVizAccordion = DataVizAccordion;

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/index.d.ts

@@ -0,0 +1,12 @@
+export function CheckboxButton({ id, className, isSelected: _isSelected, isMixture, value, onChange, disabled, invert, S, }: {
+    id: any;
+    className: any;
+    isSelected: any;
+    isMixture: any;
+    value: any;
+    onChange: any;
+    disabled: any;
+    invert: any;
+    S: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxButton = void 0;
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("../../../../../../../icons");
+var themes_1 = require("../../../../../../themes");
+var styled_1 = require("./styled");
+var Check = icons_1.icons.Check, Minus = icons_1.icons.Minus;
+var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100, onSecondary = themes_1.colors.onSecondary, grey40 = themes_1.colors.grey40;
+/**
+ * value and onChange are being passed as props so
+ * that it can be generated dynamically via our
+ * block generators.
+ */
+var CheckboxButton = function (_a) {
+    var _b;
+    var id = _a.id, className = _a.className, _isSelected = _a.isSelected, isMixture = _a.isMixture, //basically if isSelected/value && isMixture is true, then we get that '-' thing in the checkbox (useful on table headers where some (not all) rows are selected below)
+    value = _a.value, //can be used interchangibly with isSelected
+    onChange = _a.onChange, disabled = _a.disabled, invert = _a.invert, S = _a.S;
+    var isSelected = (_b = _isSelected !== null && _isSelected !== void 0 ? _isSelected : value) !== null && _b !== void 0 ? _b : false;
+    var CheckIcon = (isSelected && isMixture)
+        ? Minus
+        : isSelected
+            ? Check
+            : undefined;
+    return (react_1.default.createElement(styled_1.StyledCheckbox, { style: { overflow: 'hidden' }, onClick: function (e) {
+            // e.preventDefault();
+            // e.stopPropagation(); //this disables the checkbox in checkboxlist which we dont want. so commented. tho we might need this later in table usecase in which case we will have to make stopPropagration a prop
+            onChange && onChange(id, !isSelected);
+        }, className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, isSelected && (react_1.default.createElement("div", { style: { filter: "drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.25))", display: 'flex' } },
+        react_1.default.createElement(CheckIcon, { weight: "bold", color: disabled ? grey40 : onSecondary, size: 16, style: {
+                flexShrink: 0,
+            } })))));
+};
+exports.CheckboxButton = CheckboxButton;

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/styled.d.ts

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

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/styled.js

@@ -0,0 +1,69 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCheckbox = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../../../../themes");
+var mixins_1 = require("../../../../../../../themes/mixins");
+var utils_1 = require("../../../../../../themes/utils");
+var grey20 = themes_1.colors.grey20, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey50 = themes_1.colors.grey50;
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 2rem;\n    height: 2rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  \n\n  &:hover {\n    ", "\n  }\n"], ["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 2rem;\n    height: 2rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  \n\n  &:hover {\n    ", "\n  }\n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    if (isSelected && disabled) {
+        return "1px solid ".concat(grey20);
+    }
+    if (!isSelected) {
+        return "1px solid ".concat(disabled ? grey10 : grey20);
+    }
+    return "none";
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled, colors = _a.theme.colors;
+    if (isSelected) {
+        return disabled ? grey5 : (0, utils_1.getSecondaryContainer)(colors);
+    }
+    return disabled ? grey5 : "white";
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    return !disabled &&
+        !isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), grey50);
+});
+var templateObject_1, templateObject_2;

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.d.ts

@@ -0,0 +1,11 @@
+export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, disabled, rightWrongResult, }: {
+    option: any;
+    onClick: any;
+    S: any;
+    inputStyle: any;
+    value?: any[];
+    invert: any;
+    disabled: any;
+    rightWrongResult: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = void 0;
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("../../../../../../../icons");
+var themes_1 = require("../../../../../../themes");
+var Tags_1 = require("../../../../../Tags");
+var Typo2_1 = require("../../../../../Typo2");
+var styled_1 = require("../../../../styled");
+var utils_1 = require("../../../../utils");
+var CheckboxButton_1 = require("../CheckboxButton");
+var TextLoader_1 = require("../../../../../../../components/LoadersAndProgress/TextLoader");
+var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
+var red = themes_1.colors.red, grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, onSecondary = themes_1.colors.onSecondary, 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; });
+    var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
+    var genCheckboxButton = function (options) {
+        if (options === void 0) { options = {}; }
+        return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: "btn", disabled: disabled }));
+    };
+    var genCheckSquare = function () { return (react_1.default.createElement("div", { style: { flexShrink: 0 } },
+        react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: disabled ? grey40 : onSecondary, 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: invert ? invertRed : red, style: {
+            margin: "-7px -2.8px -7px -3.2px",
+            flexShrink: 0,
+        } })); };
+    return option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : inputStyle === "tagSelect" ? (react_1.default.createElement(Tags_1.TagSelect, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: "flex-start" } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, onClick: function () {
+            return !rightWrongResult && !disabled && onClick && onClick(isSelected, option);
+        } },
+        react_1.default.createElement("div", { style: { flexShrink: 0 } }, rightWrongResult
+            ? ["markCorrect", "revealCorrect"].includes(markingCommand)
+                ? genCheckSquare()
+                : markingCommand === "markWrong"
+                    ? genXSquare()
+                    : genCheckboxButton({ disabled: true }) //else rightWrongResult has come in, but this doesnt have to be marked right or wrong
+            : genCheckboxButton() // rightWrongResult has not come in. so gen normal radio button
+        ),
+        react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { bold: rightWrongResult && isSelected, color: disabled ? grey40 : grey80, invert: invert }, option.display)));
+};
+exports.CheckboxInput = CheckboxInput;

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/index.d.ts

@@ -0,0 +1,20 @@
+export function CheckboxList({ id, injectOtherOption, value: valueProp, onChange, commonIsCorrectDesc, options, saveValueAsString, inputStyle, rightWrongResult, listType, invert, optionsLimit, style, disabled, className, S, readOnly }: {
+    id: any;
+    injectOtherOption?: boolean;
+    value?: any[];
+    onChange: any;
+    commonIsCorrectDesc: any;
+    options?: any[];
+    saveValueAsString: any;
+    inputStyle?: string;
+    rightWrongResult: any;
+    listType?: string;
+    invert: any;
+    optionsLimit?: number;
+    style: any;
+    disabled: any;
+    className: any;
+    S: any;
+    readOnly: any;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,124 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxList = CheckboxList;
+var react_1 = __importStar(require("react"));
+var BlockLabel_1 = require("../../../BlockLabel");
+var Tags_1 = require("../../../Tags");
+var TextInputs_1 = require("../../../TextInputs");
+var Buttons_1 = require("../../../Buttons");
+var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
+var utils_1 = require("../../utils");
+var styled_1 = require("../../styled");
+var CheckboxInput_1 = require("./comps/CheckboxInput");
+var styled_2 = require("./styled");
+var Typo2_1 = require("../../../Typo2");
+var OKELink_1 = require("../../../OKELink");
+var optionsContainers = {
+    checkbox: styled_1.StyledOptionsContainer,
+    tagSelect: styled_2.StyledTagOptionsContainer,
+};
+var convToString = function (value) { return value.map(function (v) { var _a; return (_a = v.display_desc) !== null && _a !== void 0 ? _a : v.value; }); };
+function CheckboxList(_a) {
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, valueProp = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, _d = _a.options, options = _d === void 0 ? [] : _d, saveValueAsString = _a.saveValueAsString, _e = _a.inputStyle, inputStyle = _e === void 0 ? 'checkbox' : _e, rightWrongResult = _a.rightWrongResult, _f = _a.listType, listType = _f === void 0 ? 'horizontal' : _f, invert = _a.invert, _g = _a.optionsLimit, optionsLimit = _g === void 0 ? Infinity : _g, style = _a.style, disabled = _a.disabled, className = _a.className, S = _a.S, readOnly = _a.readOnly;
+    var props = arguments[0];
+    var shouldHideSomeOptions = options.length > optionsLimit;
+    var _h = (0, react_1.useState)(false), seeMore = _h[0], setSeeMore = _h[1];
+    var _j = (0, utils_1.genDisplayedOptions)({ injectOtherOption: injectOtherOption, options: options, valueProp: valueProp, saveValueAsString: saveValueAsString }), typicalOptions = _j.typicalOptions, injectedOtherOption = _j.injectedOtherOption;
+    var value = saveValueAsString ?
+        typicalOptions
+            .concat(injectedOtherOption || [])
+            .filter(function (op) { var _a; return valueProp.includes((_a = op.display_desc) !== null && _a !== void 0 ? _a : op.value); })
+        : valueProp;
+    var handleTextInputChange = function (text) {
+        var newValue = value.map(function (selectedOp) { return (selectedOp.value === 'other' ? (0, utils_1.genOtherValueObject)(text) : selectedOp); });
+        if (saveValueAsString)
+            newValue = convToString(newValue);
+        onChange && onChange(id, newValue);
+    };
+    var handleCheckboxClick = function (isSelected, option) {
+        var newValue = isSelected
+            ? value.filter(function (selOp) { return selOp.value !== option.value; })
+            : value.concat(option);
+        if (saveValueAsString)
+            newValue = convToString(newValue);
+        onChange(id, newValue);
+    };
+    var otherOpInSelectees = value.find(function (selectedOp) { return selectedOp.value === 'other'; });
+    var InputCommonProps = {
+        invert: invert,
+        value: value,
+        S: S,
+        disabled: disabled,
+        inputStyle: inputStyle,
+        rightWrongResult: rightWrongResult,
+        onClick: handleCheckboxClick,
+    };
+    var OptionsContainer = optionsContainers[inputStyle];
+    return (react_1.default.createElement("div", { className: className, id: id },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
+        readOnly ? (react_1.default.createElement(styled_2.StyledDisplayTagsContainer, null, value === null || value === void 0 ? void 0 : value.map(function (selOp) { return react_1.default.createElement(Tags_1.TagDisplay, { key: selOp.value, invert: invert, display: selOp.display_desc || selOp.display }); }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(OptionsContainer, { style: style, listType: listType, S: S }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
+                typicalOptions.map(function (option, idx) { return idx < optionsLimit && (react_1.default.createElement(CheckboxInput_1.CheckboxInput, __assign({}, InputCommonProps, { option: option, key: option.value }))); }),
+                shouldHideSomeOptions && // if we have the case of off limit options
+                    (seeMore || rightWrongResult) && //and decided to show them
+                    typicalOptions.slice(optionsLimit).map(function (option) {
+                        return react_1.default.createElement(CheckboxInput_1.CheckboxInput, __assign({}, InputCommonProps, { option: option, key: option.value }));
+                    }),
+                injectOtherOption && injectedOtherOption && ( //so other box and its textInput act as one entity in the flexbox
+                react_1.default.createElement(styled_1.StyledOtherOptionContainer, { listType: listType },
+                    react_1.default.createElement(CheckboxInput_1.CheckboxInput, __assign({}, InputCommonProps, { option: injectedOtherOption })),
+                    otherOpInSelectees && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, { listType: listType, rightWrongResult: rightWrongResult },
+                        react_1.default.createElement(TextInputs_1.TextInput, { placeholder: "Please Specify Here", value: otherOpInSelectees.display_desc, onChange: function (k, v) { return handleTextInputChange(v); }, disabled: disabled, invert: invert, S: S })))))),
+            shouldHideSomeOptions && !rightWrongResult && (react_1.default.createElement(Typo2_1.UI_BODY_BOLD, { style: { marginTop: '1rem' } },
+                react_1.default.createElement(OKELink_1.OKELink, { onClick: function () { return setSeeMore(!seeMore); }, children: !seeMore ? 'See More' : 'See Less' }))), /*
+              the minute the results have come in, irrespective of user's answers
+              being right or wrong, we show an explanation
+              below the options. provided that an explanation is provided.
+              */
+            rightWrongResult && commonIsCorrectDesc &&
+                react_1.default.createElement(styled_1.StyledCorrectMessage, { invert: invert }, commonIsCorrectDesc)))));
+}

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/styled.d.ts

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

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/styled.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTagOptionsContainer = exports.StyledDisplayTagsContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledDisplayTagsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n"])));
+exports.StyledTagOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n  gap: 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n  gap: 1rem;\n"])), function (_a) {
+    var listType = _a.listType;
+    return listType === 'vertical' ? 'column' : 'row';
+});
+var templateObject_1, templateObject_2;

package/dist/v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index.d.ts

@@ -0,0 +1,18 @@
+export function RadioButton({ isSelected, onClick, disabled, invert, S, readOnly }: {
+    isSelected: any;
+    onClick: any;
+    disabled: any;
+    invert: any;
+    S: any;
+    readOnly: any;
+}): React.JSX.Element;
+export function RadioInput({ option, onClick, disabled, invert, value, S, rightWrongResult, }: {
+    option: any;
+    onClick: any;
+    disabled: any;
+    invert: any;
+    value: any;
+    S: any;
+    rightWrongResult: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioInput = exports.RadioButton = void 0;
+var react_1 = __importDefault(require("react"));
+var themes_1 = require("../../../../../../themes");
+var icons_1 = require("../../../../../../../icons");
+var Typo_1 = require("../../../../../../../components/Typo");
+var utils_1 = require("../../../../utils");
+var styled_1 = require("../../../../styled");
+var styled_2 = require("./styled");
+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, readOnly = _a.readOnly;
+    return (react_1.default.createElement(styled_2.StyledRadioInput, { onClick: function (ev) { return onClick && onClick(ev); }, isSelected: isSelected, disabled: disabled, invert: invert, S: S, readOnly: readOnly }));
+};
+exports.RadioButton = RadioButton;
+var RadioInput = function (_a) {
+    var option = _a.option, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, value = _a.value, S = _a.S, rightWrongResult = _a.rightWrongResult;
+    var isSelected = option.value === (value === null || value === void 0 ? void 0 : value.value);
+    var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
+    var TYPO_COMP = S
+        ? Typo_1.SANS_2
+        : Typo_1.SANS_3;
+    var genRadioButton = function (options) {
+        if (options === void 0) { options = {}; }
+        return (react_1.default.createElement(exports.RadioButton, { isSelected: isSelected, invert: invert, S: S, className: 'btn',
+            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: 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: invert ? invertRed : red, style: {
+            margin: '-5px -1.5px -5px -3px',
+            flexShrink: 0
+        } })); };
+    return (react_1.default.createElement(styled_1.StyledOption, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S, onClick: function () { return !rightWrongResult && !disabled && onClick(option); } },
+        rightWrongResult
+            ? ["markCorrect", "revealCorrect"].includes(markingCommand)
+                ? genCheckCircle()
+                : markingCommand === 'markWrong'
+                    ? genXCircle()
+                    : genRadioButton({ disabled: true }) //else rightWrongResult has come in, but this doesnt have to be marked right or wrong
+            : genRadioButton() // rightWrongResult as not come in. so gen normal radio button
+    ,
+        react_1.default.createElement(TYPO_COMP, { bold: rightWrongResult && isSelected, color: disabled && greyColor40, invert: invert }, option.display)));
+};
+exports.RadioInput = RadioInput;

package/dist/v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/styled.d.ts

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

package/dist/v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/styled.js

@@ -0,0 +1,105 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRadioInput = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../../../../themes");
+var mixins_1 = require("../../../../../../../themes/mixins");
+var utilsOolib_1 = require("../../../../../../../utilsOolib");
+var none = themes_1.colors.none, white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey20 = themes_1.colors.grey20;
+// secondaryContainer = "#1F3B0A";
+// onSecondary = "#CFE8BD";
+exports.StyledRadioInput = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: ", ";\n  border: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: ", ";\n  }\n\n  /* add the smaller circle for selected state */\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    border: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: ", ";\n  border: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: ", ";\n  }\n\n  /* add the smaller circle for selected state */\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    border: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    if (isSelected) {
+        return disabled ? grey5 : utilsOolib_1.onSecondary;
+    }
+    return disabled ? grey5 : "none";
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    if (isSelected) {
+        return "none";
+    }
+    return disabled ? "1px solid ".concat(grey10) : "1px solid ".concat(grey20);
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    return !disabled &&
+        !isSelected &&
+        "\n      background: rgba(0, 0, 0, 0.05); \n    ";
+}, function (_a) {
+    var isSelected = _a.isSelected;
+    return isSelected ? "0px 4px 6px rgba(0, 0, 0, 0.25)" : "none";
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    return isSelected ? (disabled ? grey10 : white) : "transparent";
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    return isSelected
+        ? disabled
+            ? "1px solid ".concat(grey20)
+            : "1px solid ".concat(utilsOolib_1.secondaryContainer)
+        : "none";
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    return isSelected && !disabled ? "0px 4px 6px rgba(0, 0, 0, 0.25)" : "none";
+});
+var templateObject_1;
+// we no longer need StyleRadioInputFill since the ::after pseudo is doing the work. It wasn't working without it.
+// export const StyledRadioInputFill = styled.div`
+//   width: ${({ isSelected }) => (isSelected ? '10px' : '0px')};
+//   height: ${({ isSelected }) => (isSelected ? '10px' : '0px')};
+//   border-radius: 50%;
+//   background: ${({ isSelected, disabled }) => {
+//     if (isSelected) {
+//       return disabled ? 'rgba(0, 0, 0, 0.1)' : white; /* White for selected, light gray for disabled */
+//     }
+//     return 'transparent';
+//   }};
+//   border: ${({ isSelected, disabled }) => {
+//     if (isSelected) {
+//       return disabled ? '1px solid rgba(0, 0, 0, 0.2)' : `1px solid ${onSecondary}`; /* Dark border for selected */
+//     }
+//     return 'none';
+//   }};
+//   box-shadow: ${({ isSelected, disabled }) =>
+//     isSelected && !disabled ? '0px 4px 6px rgba(0, 0, 0, 0.25)' : 'none'};
+// `;

package/dist/v2/components/RadioAndCheckbox/comps/RadioList/comps/index.d.ts

@@ -0,0 +1 @@
+export { RadioInput, RadioButton } from "./RadioInput";

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = exports.RadioInput = void 0;
+var RadioInput_1 = require("./RadioInput");
+Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return RadioInput_1.RadioInput; } });
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioInput_1.RadioButton; } });

package/dist/v2/components/RadioAndCheckbox/comps/RadioList/index.d.ts

@@ -0,0 +1,17 @@
+export function RadioList({ id, injectOtherOption, value: valueProp, onChange, saveValueAsString, options, commonIsCorrectDesc, rightWrongResult, optionsLimit, listType, disabled, invert, readOnly, S }: {
+    id: any;
+    injectOtherOption?: boolean;
+    value: any;
+    onChange: any;
+    saveValueAsString: any;
+    options?: any[];
+    commonIsCorrectDesc: any;
+    rightWrongResult: any;
+    optionsLimit?: number;
+    listType?: string;
+    disabled: any;
+    invert: any;
+    readOnly: any;
+    S: any;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";