oolib 2.20.2 → 2.21.0

package/dist/components/ActionMenu/index.js

@@ -41,6 +41,7 @@ var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var utils_1 = require("./utils");
 var styled_1 = require("./styled");
+//
 var ActionMenu = function (_a) {
     var _b, _c;
     var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, //most likely will never change
@@ -60,7 +61,7 @@ var ActionMenu = function (_a) {
     (0, react_1.useEffect)(function () {
         setShowActionsInParent && setShowActionsInParent(showActions);
     }, [showActions]);
-    return (react_1.default.createElement(styled_1.StyledActionMenu, { onClick: function () { return console.log('i can hear this'); }, ref: actionMenuRef },
+    return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
         react_1.default.createElement(ButtonComp, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, onClick: function (e) {
                 setShowActions(!showActions);
             }, active: showActions }),

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

@@ -0,0 +1,10 @@
+export function CheckboxInput({ option, id, onChange, S, value, invert, disabled, rightWrongResult, }: {
+    option: any;
+    id: any;
+    onChange: any;
+    S: any;
+    value: any;
+    invert: any;
+    disabled: any;
+    rightWrongResult: any;
+}): JSX.Element;

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

@@ -0,0 +1,55 @@
+"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 __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 Typo_1 = require("../../../../../Typo");
+var styled_1 = require("../../../../styled");
+var utils_1 = require("../../../../utils");
+var styled_2 = require("./styled");
+var Check = icons_1.icons.Check, CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
+var white = themes_1.colors.white, green = themes_1.colors.green, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100;
+var CheckboxInput = function (_a) {
+    var option = _a.option, id = _a.id, onChange = _a.onChange, S = _a.S, value = _a.value, 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 handleCheckboxClick = function () {
+        if (!rightWrongResult) { // no toggling if users are being informed of thier choices result
+            onChange(id, isSelected ?
+                value.filter(function (selOp) { return selOp.value !== option.value; })
+                : value.concat(option));
+        }
+    };
+    var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
+    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert }, { onClick: handleCheckboxClick }),
+        !rightWrongResult || markingCommand === undefined ?
+            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert }), isSelected && react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16 }))
+            :
+                ["markCorrect", "revealCorrect"].includes(markingCommand) ?
+                    react_1.default.createElement(CheckSquare, { size: 26, color: green, style: {
+                            margin: '-7px -2.8px -7px -3.2px',
+                            flexShrink: 0
+                        } })
+                    : // then wrong
+                        react_1.default.createElement(XSquare, { size: 26, color: red, style: {
+                                margin: '-7px -2.8px -7px -3.2px',
+                                flexShrink: 0
+                            } }),
+        react_1.default.createElement(SuitableTypo, { bold: rightWrongResult && isSelected, color: disabled && greyColor40, invert: invert }, option.display)));
+};
+exports.CheckboxInput = CheckboxInput;

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

@@ -0,0 +1 @@
+export const StyledCheckbox: any;

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

@@ -0,0 +1,44 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCheckbox = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var utilsOolib_1 = require("../../../../../../utilsOolib");
+var themes_1 = require("../../../../../../themes");
+var mixins_1 = require("../../../../../../themes/mixins");
+var none = themes_1.colors.none, greyColor40 = themes_1.colors.greyColor40;
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: inherit;\n\n  ", "\n\n\n  ", "\n\n"])), function (_a) {
+    var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
+    return disabled ?
+        greyColor40 : invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
+}, none, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled, invert = _a.invert, colors = _a.theme.colors;
+    return isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "], ["\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])), disabled ? greyColor40 : invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors));
+});
+var templateObject_1, templateObject_2;

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

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

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

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

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

@@ -0,0 +1,17 @@
+export function CheckboxList({ id, injectOtherOption, value, onChange, commonIsCorrectDesc, options, optionStyle, rightWrongResult, listType, invert, style, disabled, className, S, readOnly }: {
+    id: any;
+    injectOtherOption?: boolean;
+    value?: any[];
+    onChange: any;
+    commonIsCorrectDesc: any;
+    options: any;
+    optionStyle: any;
+    rightWrongResult: any;
+    listType: any;
+    invert: any;
+    style: any;
+    disabled: any;
+    className: any;
+    S: any;
+    readOnly: any;
+}, ...args: any[]): JSX.Element;

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

@@ -0,0 +1,63 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxList = void 0;
+var react_1 = __importDefault(require("react"));
+var BlockLabel_1 = require("../../../BlockLabel");
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var TextInputs_1 = require("../../../TextInputs");
+//import { SANS_3 } from "../../../Typo";
+var styled_1 = require("../../styled");
+var styled_2 = require("./styled");
+var comps_1 = require("./comps");
+var utils_1 = require("../../utils");
+var Tags_1 = require("../../../Tags");
+function CheckboxList(_a) {
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, commonIsCorrectDesc = _a.commonIsCorrectDesc, options = _a.options, optionStyle = _a.optionStyle, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, style = _a.style, //where to attatch this
+    disabled = _a.disabled, className = _a.className, S = _a.S, readOnly = _a.readOnly;
+    var props = arguments[0];
+    var displayedOptions = options;
+    if (options) {
+        if (injectOtherOption && !options.some(function (op) { return op.value === "other"; })) {
+            displayedOptions = options.concat({ value: "other", display: "Other" });
+        }
+    }
+    var otherOpInSelectees = value.find(function (selectedOp) { return selectedOp.value === 'other'; });
+    var handleTextInputChange = function (text) {
+        var newValue = value.map(function (selectedOp) { return (selectedOp === otherOpInSelectees ? (0, utils_1.genOtherValueObject)(text) : selectedOp); });
+        onChange && onChange(id, newValue);
+    };
+    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(styled_1.StyledOptionsContainer, { listType: listType }, displayedOptions === null || displayedOptions === void 0 ? void 0 :
+            displayedOptions.map(function (option) { return react_1.default.createElement(comps_1.CheckboxInput, __assign({}, {
+                option: option,
+                id: id,
+                invert: invert,
+                onChange: onChange,
+                value: value,
+                S: S,
+                invert: invert,
+                disabled: disabled,
+                rightWrongResult: rightWrongResult,
+                key: option.value
+            })); }),
+            injectOtherOption && otherOpInSelectees && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, { listType: listType },
+                react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: otherOpInSelectees.display_desc || '', onChange: function (k, v) { return handleTextInputChange(v); } }, { disabled: disabled, invert: invert, S: S })))),
+            rightWrongResult && commonIsCorrectDesc &&
+                react_1.default.createElement(styled_1.StyledCorrectMessage, null, commonIsCorrectDesc)))));
+}
+exports.CheckboxList = CheckboxList;

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

@@ -0,0 +1 @@
+export const StyledDisplayTagsContainer: any;

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

@@ -0,0 +1,13 @@
+"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.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"])));
+var templateObject_1;

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

@@ -0,0 +1,10 @@
+export function RadioInput({ id, option, onChange, disabled, invert, value, S, rightWrongResult, }: {
+    id: any;
+    option: any;
+    onChange: any;
+    disabled: any;
+    invert: any;
+    value: any;
+    S: any;
+    rightWrongResult: any;
+}): JSX.Element;

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

@@ -0,0 +1,48 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioInput = void 0;
+var react_1 = __importDefault(require("react"));
+var themes_1 = require("../../../../../../themes");
+var icons_1 = require("../../../../../../icons");
+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 XCircle = icons_1.icons.XCircle, CheckCircle = icons_1.icons.CheckCircle;
+var RadioInput = function (_a) {
+    var id = _a.id, option = _a.option, onChange = _a.onChange, 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 SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
+    return (react_1.default.createElement(styled_1.StyledOption, __assign({}, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert }, { onClick: function () { return !rightWrongResult && onChange(id, option); } }),
+        !rightWrongResult || markingCommand === undefined ?
+            react_1.default.createElement(styled_2.StyledRadioInput, __assign({ className: 'btn' }, { isSelected: isSelected, disabled: disabled, invert: invert }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert }))
+            :
+                ["markCorrect", "revealCorrect"].includes(markingCommand) ?
+                    react_1.default.createElement(CheckCircle, { size: 24.5, color: green, style: {
+                            margin: '-5px -1.5px -5px -3px',
+                            flexShrink: 0
+                        } })
+                    : // then wrong
+                        react_1.default.createElement(XCircle, { size: 24.5, color: red, style: {
+                                margin: '-5px -1.5px -5px -3px',
+                                flexShrink: 0
+                            } }),
+        react_1.default.createElement(SuitableTypo, { bold: rightWrongResult && isSelected, color: disabled && greyColor40, invert: invert }, option.display)));
+};
+exports.RadioInput = RadioInput;

package/dist/components/{RadioInput/comps/RadioOption → RadioAndCheckbox/comps/RadioList/comps/RadioInput}/styled.d.ts

@@ -1,4 +1,2 @@
-export const StyledOption: any;
 export const StyledRadioInput: any;
 export const StyledRadioInputFill: any;
-export const StyledCorrectMessage: any;

package/dist/components/{RadioInput/comps/RadioOption → RadioAndCheckbox/comps/RadioList/comps/RadioInput}/styled.js

@@ -27,30 +27,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCorrectMessage = exports.StyledRadioInputFill = exports.StyledRadioInput = exports.StyledOption = void 0;
+exports.StyledRadioInputFill = 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 Typo_1 = require("../../../Typo");
-var none = themes_1.colors.none, white = themes_1.colors.white, green = themes_1.colors.green;
-exports.StyledOption = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .radioBtn {\n    ", "\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .radioBtn {\n    ", "\n  }\n\n"])), function (_a) {
-    var rightWrongResult = _a.rightWrongResult;
-    return rightWrongResult ? 'initial' : 'pointer';
-}, function (_a) {
-    var isSelected = _a.isSelected, theme = _a.theme;
-    return !isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
-});
-exports.StyledRadioInput = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  ", "\n\n  ", "\n\n"], ["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  ", "\n\n  ", "\n\n"])), function (_a) {
-    var theme = _a.theme;
-    return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
+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;
+exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"], ["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"])), function (_a) {
+    var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
+    return disabled ? greyColor40 :
+        invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
 }, none, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
     var isSelected = _a.isSelected;
-    return isSelected && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color:", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n  "], ["\n      background-color:", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n  "])), function (_a) {
-        var theme = _a.theme;
-        return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
+    return isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color:", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n  "], ["\n      background-color:", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n  "])), function (_a) {
+        var colors = _a.theme.colors, disabled = _a.disabled, invert = _a.invert;
+        return disabled ? greyColor40 :
+            invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
     });
 });
-exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 0.8rem;\n  width: 0.8rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  height: 0.8rem;\n  width: 0.8rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), white);
-exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  padding-top: 0.5rem;\n  padding-left: 3.3rem;\n"], ["\n  color: ", ";\n  padding-top: 0.5rem;\n  padding-left: 3.3rem;\n"])), green);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 0.8rem;\n  width: 0.8rem;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  height: 0.8rem;\n  width: 0.8rem;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor100 : white;
+});
+var templateObject_1, templateObject_2, templateObject_3;

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

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

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

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

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

@@ -0,0 +1,15 @@
+export function RadioList({ id, injectOtherOption, value, onChange, options, rightWrongResult, listType, disabled, invert, style, className, readOnly, S }: {
+    id: any;
+    injectOtherOption?: boolean;
+    value: any;
+    onChange: any;
+    options: any;
+    rightWrongResult: any;
+    listType: any;
+    disabled: any;
+    invert: any;
+    style: any;
+    className: any;
+    readOnly: any;
+    S: any;
+}, ...args: any[]): JSX.Element;

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

@@ -0,0 +1,61 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioList = void 0;
+var react_1 = __importDefault(require("react"));
+var BlockLabel_1 = require("../../../BlockLabel");
+var Tags_1 = require("../../../Tags");
+var TextInputs_1 = require("../../../TextInputs");
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var styled_1 = require("../../styled");
+var utils_1 = require("../../utils");
+var comps_1 = require("./comps");
+function RadioList(_a) {
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, value = _a.value, onChange = _a.onChange, options = _a.options, rightWrongResult = _a.rightWrongResult, listType = _a.listType, disabled = _a.disabled, invert = _a.invert, style = _a.style, className = _a.className, readOnly = _a.readOnly, S = _a.S;
+    var props = arguments[0];
+    var displayedOptions = options;
+    if (options) {
+        if (injectOtherOption && !options.some(function (op) { return op.value === "other"; })) {
+            displayedOptions = options.concat({ value: "other", display: "Other" });
+        }
+    }
+    var correctOp = options.find(function (op) { return op.isCorrect; });
+    return (react_1.default.createElement("div", { className: className, id: id },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
+        readOnly ? ((value === null || value === void 0 ? void 0 : value.display) && react_1.default.createElement(Tags_1.TagDisplay, { display: value.display_desc || value.display, invert: invert }) //prioritzing display_desc since display of 'other' option is === other
+        ) : (react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType, style: style }, displayedOptions === null || displayedOptions === void 0 ? void 0 :
+            displayedOptions.map(function (option) { return react_1.default.createElement(comps_1.RadioInput, __assign({}, {
+                option: option,
+                id: id,
+                onChange: onChange,
+                value: value,
+                disabled: disabled,
+                invert: invert,
+                rightWrongResult: rightWrongResult,
+                S: S,
+                key: option.value
+            })); }),
+            injectOtherOption && (value === null || value === void 0 ? void 0 : value.value) === "other" && (react_1.default.createElement(styled_1.StyledOtherTextInputWrapper, { listType: listType },
+                react_1.default.createElement(TextInputs_1.TextInput, __assign({ placeholder: "Please Specify Here", value: value.display_desc || '', onChange: function (k, v) { return onChange(id, (0, utils_1.genOtherValueObject)(v)); } }, { disabled: disabled, invert: invert, S: S })))),
+            /*
+            the minute the results have come in, irrespective of user's answer
+            being right or wrong, we always show an explanation
+            against the right answer. provided that an explanation is provided.
+            */
+            correctOp && rightWrongResult && correctOp.isCorrectDesc &&
+                react_1.default.createElement(styled_1.StyledCorrectMessage, null, correctOp.isCorrectDesc)))));
+}
+exports.RadioList = RadioList;

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

@@ -0,0 +1,4 @@
+export { RadioList } from "./comps/RadioList";
+export { RadioInput } from "./comps/RadioList/comps";
+export { CheckboxList } from "./comps/CheckboxList";
+export { CheckboxInput } from "./comps/CheckboxList/comps";

package/dist/components/RadioAndCheckbox/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = exports.CheckboxList = exports.RadioInput = exports.RadioList = void 0;
+var RadioList_1 = require("./comps/RadioList");
+Object.defineProperty(exports, "RadioList", { enumerable: true, get: function () { return RadioList_1.RadioList; } });
+var comps_1 = require("./comps/RadioList/comps");
+Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return comps_1.RadioInput; } });
+var CheckboxList_1 = require("./comps/CheckboxList");
+Object.defineProperty(exports, "CheckboxList", { enumerable: true, get: function () { return CheckboxList_1.CheckboxList; } });
+var comps_2 = require("./comps/CheckboxList/comps");
+Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return comps_2.CheckboxInput; } });

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

@@ -0,0 +1,4 @@
+export const StyledOptionsContainer: any;
+export const StyledOption: any;
+export const StyledOtherTextInputWrapper: any;
+export const StyledCorrectMessage: any;

package/dist/components/RadioAndCheckbox/styled.js

@@ -0,0 +1,55 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCorrectMessage = exports.StyledOtherTextInputWrapper = exports.StyledOption = exports.StyledOptionsContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+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;
+exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem 2rem;\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem 2rem;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+    var listType = _a.listType;
+    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n      gap: 1.5rem;\n      align-items: initial;\n    "], ["\n      flex-direction: column;\n      gap: 1.5rem;\n      align-items: initial;\n    "]))) :
+        '';
+});
+exports.StyledOption = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  position: relative;\n  cursor: ", ";\n  \n\n  &:hover .btn {\n    ", "\n  }\n\n"])), function (_a) {
+    var rightWrongResult = _a.rightWrongResult, disabled = _a.disabled;
+    return disabled ? 'not-allowed' :
+        rightWrongResult ? 'initial' : 'pointer';
+}, function (_a) {
+    var isSelected = _a.isSelected, rightWrongResult = _a.rightWrongResult, disabled = _a.disabled, theme = _a.theme, invert = _a.invert;
+    return !isSelected && !rightWrongResult && !disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
+});
+exports.StyledOtherTextInputWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 0.5rem;\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"], ["\n  margin-right: 0.5rem;\n\n  ", ";\n  \n  ", "{ width: 28rem; }\n"])), function (_a) {
+    var listType = _a.listType;
+    return listType === 'vertical' ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["margin-left: 2.5rem;"], ["margin-left: 2.5rem;"]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["width: 28rem"], ["width: 28rem"])));
+}, (0, mixins_1.mediaQuery)('sm'));
+exports.StyledCorrectMessage = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  padding-left: 3.3rem;\n"], ["\n  color: ", ";\n  padding-left: 3.3rem;\n"])), green);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/{RadioInput/comps/RadioOption → RadioAndCheckbox}/utils.d.ts

@@ -2,3 +2,9 @@ export function getMarkingCommand({ option, isSelected }: {
     option: any;
     isSelected: any;
 }): "markCorrect" | "markWrong" | "revealCorrect";
+export function genOtherValueObject(text: any): {
+    value: string;
+    display_desc: any;
+    value_desc: any;
+    display: string;
+};

package/dist/components/RadioAndCheckbox/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genOtherValueObject = exports.getMarkingCommand = void 0;
+var genValueFromDisplay_1 = require("../../utils/genValueFromDisplay");
+var getMarkingCommand = function (_a) {
+    var option = _a.option, isSelected = _a.isSelected;
+    if (isSelected) {
+        return option.isCorrect ? 'markCorrect' : 'markWrong';
+    }
+    else { //not selected
+        if (option.isCorrect)
+            return "revealCorrect";
+    }
+};
+exports.getMarkingCommand = getMarkingCommand;
+var genOtherValueObject = function (text) {
+    var value_desc = (0, genValueFromDisplay_1.genValueFromDisplay)(text);
+    return {
+        value: "other",
+        display_desc: text,
+        value_desc: value_desc,
+        display: "Other",
+    };
+};
+exports.genOtherValueObject = genOtherValueObject;

package/dist/components/{ToggleButton → Switches}/index.d.ts

@@ -1,4 +1,4 @@
-export function ToggleButton({ id, value: valueProp, options, onChange, invert, saveValueAsString, disabled, }: {
+export function SwitchDouble({ id, value: valueProp, options, onChange, invert, saveValueAsString, disabled, }: {
     id: any;
     value: any;
     options: any;
@@ -7,12 +7,12 @@ export function ToggleButton({ id, value: valueProp, options, onChange, invert,
     saveValueAsString: any;
     disabled?: boolean;
 }, ...args: any[]): JSX.Element;
-export function SingleToggleButton({ id, value, option, onChange, disabled, invert, saveValueAsString, }: {
+export function SwitchSingle({ id, value, option, onChange, disabled, invert, saveValueAsString, }: {
     id: any;
     value: any;
     option: any;
     onChange: any;
-    disabled: any;
+    disabled?: boolean;
     invert: any;
     saveValueAsString: any;
 }, ...args: any[]): JSX.Element;