oolib 2.24.3 → 2.25.0

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

@@ -1,3 +1,11 @@
+export function CheckboxButton({ className, isSelected, onClick, disabled, invert, S }: {
+    className: any;
+    isSelected: any;
+    onClick: any;
+    disabled: any;
+    invert: any;
+    S: any;
+}): JSX.Element;
 export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, disabled, rightWrongResult, }: {
     option: any;
     onClick: any;

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxInput = void 0;
+exports.CheckboxInput = exports.CheckboxButton = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../../../icons");
 var themes_1 = require("../../../../../../themes");
@@ -25,15 +25,20 @@ 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 CheckboxButton = function (_a) {
+    var className = _a.className, isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S;
+    return (react_1.default.createElement(styled_2.StyledCheckbox, __assign({ onClick: function (ev) { return onClick && onClick(ev); } }, { className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
+        react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } })));
+};
+exports.CheckboxButton = CheckboxButton;
 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 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 SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
     return inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, __assign({}, { isSelected: isSelected, invert: invert, disabled: disabled }, { onClick: function () { return !disabled && onClick(option, isSelected); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } }))) : (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option, isSelected); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
-                react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } }))
+            react_1.default.createElement(exports.CheckboxButton, __assign({}, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: 'btn' }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
                     react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: green, style: {

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

@@ -32,8 +32,8 @@ 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  \n  width: ", ";\n  height: ", ";\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  \n  width: ", ";\n  height: ", ";\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 none = themes_1.colors.none, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80;
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: ", ";\n\n  ", "\n\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"], ["\n  \n  width: ", ";\n  height: ", ";\n  border: none;\n  box-shadow: inset 0 0 0 2px ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  cursor: ", ";\n\n  ", "\n\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"])), function (_a) {
     var S = _a.S;
     return S ? '1.7rem' : '2rem';
 }, function (_a) {
@@ -43,8 +43,14 @@ exports.StyledCheckbox = styled_components_1.default.button(templateObject_2 ||
     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) {
+}, none, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, (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));
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme, invert = _a.invert;
+    return !isSelected && !disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
 });
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

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

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

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

@@ -51,8 +51,7 @@ var optionsContainers = {
 };
 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, options = _a.options, saveValueAsString = _a.saveValueAsString, _d = _a.inputStyle, inputStyle = _d === void 0 ? 'checkbox' : _d, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, _e = _a.optionsLimit, optionsLimit = _e === void 0 ? Infinity : _e, style = _a.style, //where to attatch this
-    disabled = _a.disabled, className = _a.className, S = _a.S, readOnly = _a.readOnly;
+    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, options = _a.options, saveValueAsString = _a.saveValueAsString, _d = _a.inputStyle, inputStyle = _d === void 0 ? 'checkbox' : _d, rightWrongResult = _a.rightWrongResult, listType = _a.listType, invert = _a.invert, _e = _a.optionsLimit, optionsLimit = _e === void 0 ? Infinity : _e, 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 _f = (0, react_1.useState)(false), seeMore = _f[0], setSeeMore = _f[1];
@@ -90,7 +89,7 @@ function CheckboxList(_a) {
     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, { listType: listType, S: S }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
+            react_1.default.createElement(OptionsContainer, __assign({}, { 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(comps_1.CheckboxInput, __assign({}, __assign(__assign({}, InputCommonProps), { option: option, key: option.value })))); }),
                 shouldHideSomeOptions && // if we have the case of off limit options
                     (seeMore || rightWrongResult) && //and decided to show them

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

@@ -10,7 +10,7 @@ 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  padding: 1.5rem 0 2rem 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: ", ";\n  gap: 1rem;\n  padding: 1.5rem 0 2rem 0;\n"])), function (_a) {
+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';
 });

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

@@ -1,3 +1,11 @@
+export function RadioButton({ className, isSelected, onClick, disabled, invert, S }: {
+    className: any;
+    isSelected: any;
+    onClick: any;
+    disabled: any;
+    invert: any;
+    S: any;
+}): JSX.Element;
 export function RadioInput({ option, onClick, disabled, invert, value, S, rightWrongResult, }: {
     option: any;
     onClick: any;

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = void 0;
+exports.RadioInput = exports.RadioButton = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../../../../../themes");
 var icons_1 = require("../../../../../../icons");
@@ -24,6 +24,11 @@ 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 RadioButton = function (_a) {
+    var className = _a.className, isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S;
+    return (react_1.default.createElement(styled_2.StyledRadioInput, __assign({ onClick: function (ev) { return onClick && onClick(ev); } }, { className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert, S: S })));
+};
+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);
@@ -31,7 +36,7 @@ var RadioInput = function (_a) {
     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, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledRadioInput, __assign({ className: 'btn' }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(styled_2.StyledRadioInputFill, { invert: invert, S: S }))
+            react_1.default.createElement(exports.RadioButton, __assign({}, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: 'btn' }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
                     react_1.default.createElement(CheckCircle, { size: S ? 21 : 24.5, color: green, style: {

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

@@ -32,8 +32,8 @@ 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;
-exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\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: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: inherit;\n  ", "\n\n  ", "\n\n"])), function (_a) {
+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;
+exports.StyledRadioInput = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: ", ";\n  ", "\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"], ["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  border: 2px solid ", ";\n  background-color: ", ";\n  flex: 0 0 auto;\n  cursor: ", ";\n  ", "\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n"])), function (_a) {
     var S = _a.S;
     return S ? '1.7rem' : '2rem';
 }, function (_a) {
@@ -43,15 +43,21 @@ exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 |
     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) {
+}, none, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, (0, mixins_1.transition)('background-color 0.2s'), function (_a) {
     var isSelected = _a.isSelected;
     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);
     });
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme, invert = _a.invert;
+    return !isSelected && !disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors));
 });
-exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
     var S = _a.S;
     return S ? '0.7rem' : '0.8rem';
 }, function (_a) {
@@ -61,4 +67,4 @@ exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3
     var invert = _a.invert;
     return invert ? greyColor100 : white;
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = void 0;
+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/components/RadioAndCheckbox/index.d.ts

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

package/dist/components/RadioAndCheckbox/index.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxInput = exports.CheckboxList = exports.RadioInput = exports.RadioList = void 0;
+exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.RadioButton = 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; } });
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return comps_1.RadioButton; } });
 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; } });
+Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return comps_2.CheckboxButton; } });

package/dist/globalStyles/index.js

@@ -11,5 +11,5 @@ var normalize_1 = require("./normalize");
 var mixins_1 = require("../themes/mixins");
 require("../assets/fonts/style.css");
 var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for vertical bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"], ["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for vertical bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
+exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for horizontal bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"], ["\n  ::-webkit-scrollbar { \n    width: 0.7rem;// for vertical bars\n    height: 0.5rem; //for horizontal bars \n  }\n  ::-webkit-scrollbar-track {background-color: ", ";}\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.4rem;\n  }\n  ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n  ", "{\n    ::-webkit-scrollbar { \n      width: 1rem;\n      height: 0.7rem;\n    }\n    ::-webkit-scrollbar-thumb {\n      border-radius: 0.5rem;\n    }\n  }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
 var templateObject_1, templateObject_2;

package/package.json

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