oolib 2.25.3 → 2.25.5

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

@@ -1,9 +1,10 @@
-export function ActionMenu({ icon, invert, actions, align, iconSize, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, storybookPreview }: {
+export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, storybookPreview }: {
     icon?: string;
     invert: any;
     actions: any;
     align?: string;
     iconSize?: string;
+    M: any;
     ButtonComp?: string;
     setShowActions: any;
     popOutOfOverflowHiddenParent?: boolean;

package/dist/components/ActionMenu/index.js

@@ -46,7 +46,7 @@ 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
-    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, _g = _a.ButtonComp, _ButtonComp = _g === void 0 ? 'ButtonGhost' : _g, setShowActionsInParent = _a.setShowActions, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, storybookPreview = _a.storybookPreview //for storybook purposes
+    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, M = _a.M, _g = _a.ButtonComp, _ButtonComp = _g === void 0 ? 'ButtonGhost' : _g, setShowActionsInParent = _a.setShowActions, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, storybookPreview = _a.storybookPreview //for storybook purposes
     ;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
@@ -56,6 +56,9 @@ var ActionMenu = function (_a) {
         return null;
     var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
     var ButtonComp = ButtonComps[_ButtonComp];
+    //basically action menu defaults to 'S' button size (cuz its an icon only button)
+    //so passing 'M' will override this default and make it a Medium sized button
+    var buttonSize = M ? { M: true } : {};
     var genOptionIcon = function (iconName) {
         var IconComp = icons_1.icons[iconName];
         return react_1.default.createElement(IconComp, { size: 16 });
@@ -75,9 +78,9 @@ var ActionMenu = function (_a) {
     }, []);
     var _k = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _k.fixPos, applyFixedPos = _k.applyFixedPos, removeFixedPos = _k.removeFixedPos, trackerRef = _k.trackerRef;
     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) {
+        react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, onClick: function (e) {
                 setShowActions(!showActions);
-            }, active: showActions }),
+            }, active: showActions })),
         popOutOfOverflowHiddenParent &&
             react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef }),
         react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {

package/dist/components/Buttons/index.js

@@ -49,7 +49,8 @@ var DisplayIcon = function (_a) {
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, _iconColor = props.iconColor, stopPropagation = props.stopPropagation;
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, _iconColor = props.iconColor, stopPropagation = props.stopPropagation, forceHover = props.forceHover //used by multi-option button
+    ;
     /**
      * WHY WE ARE HAVING TO DO STOP PROPAGATION IN THIS TWISTED WAY:
      *
@@ -97,7 +98,7 @@ var ButtonStyledWrapper = function (_a) {
         }, onMouseDown: function (e) {
             stopPropagation && e.stopPropagation();
             debouncedMouseDown && debouncedMouseDown(e);
-        }, composition: composition, width: width, color: color },
+        }, composition: composition, width: width, color: color, forceHover: forceHover },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, color: iconColor, size: calcIconSize() }),
         displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
         iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, color: iconColor, size: calcIconSize() })));

package/dist/components/Buttons/index.styled.js

@@ -38,7 +38,40 @@ var SIZES = {
     S: "3rem",
     M: "4rem",
 };
-var ButtonPrimary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var hoverStylingPrimary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\ncolor: ", ";\n"], ["\n  background-color: ", ";\ncolor: ", ";\n"])), function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? (0, utilsOolib_1.getPrimaryColor10)(colors)
+        : (0, utilsOolib_1.getPrimaryColor40)(colors);
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? greyColor100
+        : (0, utilsOolib_1.getPrimaryColorText)(colors);
+});
+var hoverStylingSecondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n   background-color: ", ";\n"], ["\n   background-color: ", ";\n"])), function (_a) {
+    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
+    return active
+        ? ""
+        : invert
+            ? greyColor80
+            : (0, utilsOolib_1.getPrimaryColor40)(colors);
+});
+var hoverStylingCustom = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? greyColor80
+        : (0, utilsOolib_1.getPrimaryColor40)(colors);
+});
+var hoverStylingGhost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
+    return active
+        ? ""
+        : invert
+            ? greyColor80
+            : (0, utilsOolib_1.getPrimaryColor10)(colors);
+});
+var ButtonPrimary = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -48,25 +81,18 @@ var ButtonPrimary = (0, styled_components_1.css)(templateObject_3 || (templateOb
     return invert ? greyColor100 : white;
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+    return color && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "])), function (_a) {
+    return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "])), function (_a) {
         var invert = _a.invert;
         return invert ? greyColor70 : greyColor15;
     }, greyColor40);
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? (0, utilsOolib_1.getPrimaryColor10)(colors)
-        : (0, utilsOolib_1.getPrimaryColor40)(colors);
-}, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? greyColor100
-        : (0, utilsOolib_1.getPrimaryColorText)(colors);
-});
-var ButtonSecondary = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    @media (hover: hover) {\n      &:hover {\n      background-color: ", ";\n      /* color: ", ";  */\n    }\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    @media (hover: hover) {\n      &:hover {\n      background-color: ", ";\n      /* color: ", ";  */\n    }\n  }\n"])), function (_a) {
+    var forceHover = _a.forceHover;
+    return forceHover && hoverStylingPrimary;
+}, hoverStylingPrimary);
+var ButtonSecondary = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n    ", "  \n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n    }\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n    ", "  \n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n    }\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -81,10 +107,10 @@ var ButtonSecondary = (0, styled_components_1.css)(templateObject_7 || (template
         : (0, utilsOolib_1.getPrimaryColorText)(colors);
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+    return color && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var active = _a.active;
-    return active && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), function (_a) {
+    return active && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), function (_a) {
         var invert = _a.invert, colors = _a.theme.colors;
         return invert ?
             (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -96,22 +122,15 @@ var ButtonSecondary = (0, styled_components_1.css)(templateObject_7 || (template
     });
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", "; \n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", "; \n      pointer-events: none;\n    "])), function (_a) {
+    return disabled && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", "; \n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", "; \n      pointer-events: none;\n    "])), function (_a) {
         var invert = _a.invert;
         return invert ? greyColor80 : white;
     }, greyColor15, greyColor40);
 }, function (_a) {
-    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
-    return active
-        ? ""
-        : invert
-            ? greyColor80
-            : (0, utilsOolib_1.getPrimaryColor40)(colors);
-}, function (_a) {
-    var colors = _a.theme.colors;
-    return (0, utilsOolib_1.getPrimaryColorText)(colors);
-});
-var ButtonCustom = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
+    var forceHover = _a.forceHover;
+    return forceHover && hoverStylingSecondary;
+}, hoverStylingSecondary);
+var ButtonCustom = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "  \n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n    \n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "  \n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
     var invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -131,10 +150,10 @@ var ButtonCustom = (0, styled_components_1.css)(templateObject_10 || (templateOb
         : (0, utilsOolib_1.getPrimaryColorText)(colors);
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color);
+    return color && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color);
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: ", ";\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", ";\n      pointer-events: none;\n      background-color: ", "; \n    "], ["\n      color: ", ";\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", ";\n      pointer-events: none;\n      background-color: ", "; \n    "])), greyColor40, function (_a) {
+    return disabled && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      color: ", ";\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", ";\n      pointer-events: none;\n      background-color: ", "; \n    "], ["\n      color: ", ";\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", ";\n      pointer-events: none;\n      background-color: ", "; \n    "])), greyColor40, function (_a) {
         var invert = _a.invert;
         return (invert ? greyColor40 : greyColor15);
     }, greyColor40, function (_a) {
@@ -142,12 +161,10 @@ var ButtonCustom = (0, styled_components_1.css)(templateObject_10 || (templateOb
         return invert ? greyColor80 : white;
     });
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
-    return invert
-        ? greyColor80
-        : (0, utilsOolib_1.getPrimaryColor40)(colors);
-});
-var ButtonGhost = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
+    var forceHover = _a.forceHover;
+    return forceHover && hoverStylingCustom;
+}, hoverStylingCustom);
+var ButtonGhost = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  \n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  \n  ", "  \n  \n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
     var active = _a.active, colors = _a.theme.colors;
     return active ? (0, utilsOolib_1.getPrimaryColor40)(colors) : none;
 }, function (_a) {
@@ -159,27 +176,23 @@ var ButtonGhost = (0, styled_components_1.css)(templateObject_14 || (templateObj
             : (0, utilsOolib_1.getPrimaryColorText)(colors);
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+    return color && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var invert = _a.invert;
-    return invert && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), function (_a) {
+    return invert && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), function (_a) {
         var active = _a.active;
         return active ? greyColor80 : greyColor100;
     });
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "], ["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "])), greyColor40);
+    return disabled && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "], ["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "])), greyColor40);
 }, function (_a) {
-    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
-    return active
-        ? ""
-        : invert
-            ? greyColor80
-            : (0, utilsOolib_1.getPrimaryColor10)(colors);
-});
-var GoogleButton = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"], ["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"])), white, function (_a) {
+    var forceHover = _a.forceHover;
+    return forceHover && hoverStylingGhost;
+}, hoverStylingGhost);
+var GoogleButton = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"], ["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"])), white, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return disabled && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 var buttonVariantSetting = {
     primary: ButtonPrimary,
@@ -188,21 +201,21 @@ var buttonVariantSetting = {
     custom: ButtonCustom,
     googleAuth: GoogleButton,
 };
-exports.ButtonStyled = styled_components_1.default.button(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 2px;\n\n  &:disabled{\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 2px;\n\n  &:disabled{\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+exports.ButtonStyled = styled_components_1.default.button(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 2px;\n\n  &:disabled{\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 2px;\n\n  &:disabled{\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var composition = _a.composition, size = _a.size;
     switch (composition) {
         case "iconOnly":
-            return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "], ["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "])), SIZES[size], SIZES[size]);
+            return (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "], ["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "])), SIZES[size], SIZES[size]);
         case "icon+text":
-            return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          padding: 0 2rem 0 1.5rem;\n          height: ", ";\n        "], ["\n          padding: 0 2rem 0 1.5rem;\n          height: ", ";\n        "])), SIZES[size]);
+            return (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n          padding: 0 2rem 0 1.5rem;\n          height: ", ";\n        "], ["\n          padding: 0 2rem 0 1.5rem;\n          height: ", ";\n        "])), SIZES[size]);
         default:
-            return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n          padding: 0 2rem;\n          height: ", ";\n        "], ["\n          padding: 0 2rem;\n          height: ", ";\n        "])), SIZES[size]);
+            return (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n          padding: 0 2rem;\n          height: ", ";\n        "], ["\n          padding: 0 2rem;\n          height: ", ";\n        "])), SIZES[size]);
     }
 }, function (_a) {
     var width = _a.width;
-    return width && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
+    return width && (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
 }, (0, mixins_1.transition)("background-color"), function (_a) {
     var variant = _a.variant;
     return buttonVariantSetting[variant];
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;

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

@@ -36,20 +36,34 @@ var CheckboxInput = function (_a) {
     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;
+    var genCheckboxButton = function (options) {
+        if (options === void 0) { options = {}; }
+        return (react_1.default.createElement(exports.CheckboxButton, __assign({}, {
+            isSelected: isSelected,
+            disabled: disabled,
+            invert: invert,
+            S: S,
+            className: 'btn',
+            disabled: options.disabled || disabled
+        })));
+    };
+    var genCheckSquare = function () { return (react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: green, style: {
+            margin: '-7px -2.8px -7px -3.2px',
+            flexShrink: 0
+        } })); };
+    var genXSquare = function () { return (react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: red, style: {
+            margin: '-7px -2.8px -7px -3.2px',
+            flexShrink: 0
+        } })); };
     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 && onClick(isSelected, option); } }),
-        !rightWrongResult || markingCommand === undefined ?
-            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: {
-                            margin: '-7px -2.8px -7px -3.2px',
-                            flexShrink: 0
-                        } })
-                    : // then wrong
-                        react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: red, style: {
-                                margin: '-7px -2.8px -7px -3.2px',
-                                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(SuitableTypo, { bold: rightWrongResult && isSelected, color: disabled && greyColor40, invert: invert }, option.display)));
 };
 exports.CheckboxInput = CheckboxInput;

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

@@ -33,7 +33,7 @@ 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, 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  &:focus{\n    border: none;\n    box-shadow: none;\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  &:focus{\n    border: none;\n    box-shadow: none;\n  }\n\n"])), function (_a) {
+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  &:focus{\n    border: none;\n    box-shadow: inset 0 0 0 2px ", ";\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  &:focus{\n    border: none;\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n"])), function (_a) {
     var S = _a.S;
     return S ? '1.7rem' : '2rem';
 }, function (_a) {
@@ -52,5 +52,9 @@ exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 ||
 }, 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));
+}, 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);
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,5 +1,4 @@
-export function RadioButton({ className, isSelected, onClick, disabled, invert, S }: {
-    className: any;
+export function RadioButton({ isSelected, onClick, disabled, invert, S }: {
     isSelected: any;
     onClick: any;
     disabled: any;

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

@@ -25,29 +25,50 @@ 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 })));
+    var 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); } }, { 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);
     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, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option); } }),
-        !rightWrongResult || markingCommand === undefined ?
-            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: {
-                            margin: '-5px -1.5px -5px -3px',
-                            flexShrink: 0
-                        } })
-                    : // then wrong
-                        react_1.default.createElement(XCircle, { size: S ? 21 : 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)));
+    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, __assign({}, {
+            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: green, style: {
+            margin: '-5px -1.5px -5px -3px',
+            flexShrink: 0
+        } })); };
+    var genXCircle = function () { return (react_1.default.createElement(XCircle, { size: S ? 21 : 24.5, color: red, style: {
+            margin: '-5px -1.5px -5px -3px',
+            flexShrink: 0
+        } })); };
+    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
+            ? ["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/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/styled.js

@@ -33,7 +33,7 @@ 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;
-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  &:focus {\n    border: none;\n    box-shadow: none;\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  &:focus {\n    border: none;\n    box-shadow: none;\n  }\n\n"])), function (_a) {
+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  &:focus {\n    border: 2px solid ", ";\n    box-shadow: none;\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  &:focus {\n    border: 2px solid ", ";\n    box-shadow: none;\n  }\n\n"])), function (_a) {
     var S = _a.S;
     return S ? '1.7rem' : '2rem';
 }, function (_a) {
@@ -56,6 +56,10 @@ exports.StyledRadioInput = styled_components_1.default.button(templateObject_3 |
 }, 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));
+}, 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_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;

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

@@ -1,4 +1,4 @@
-export function RadioList({ id, injectOtherOption, value: valueProp, onChange, saveValueAsString, options, commonIsCorrectDesc, rightWrongResult, optionsLimit, listType, disabled, invert, style, className, readOnly, S }: {
+export function RadioList({ id, injectOtherOption, value: valueProp, onChange, saveValueAsString, options, commonIsCorrectDesc, rightWrongResult, optionsLimit, listType, disabled, invert, readOnly, S }: {
     id: any;
     injectOtherOption?: boolean;
     value: any;
@@ -11,8 +11,6 @@ export function RadioList({ id, injectOtherOption, value: valueProp, onChange, s
     listType: any;
     disabled: any;
     invert: any;
-    style: any;
-    className: any;
     readOnly: any;
     S: any;
 }, ...args: any[]): any;

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

@@ -45,7 +45,7 @@ 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, valueProp = _a.value, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, options = _a.options, commonIsCorrectDesc = _a.commonIsCorrectDesc, rightWrongResult = _a.rightWrongResult, _c = _a.optionsLimit, optionsLimit = _c === void 0 ? Infinity : _c, listType = _a.listType, disabled = _a.disabled, invert = _a.invert, style = _a.style, className = _a.className, readOnly = _a.readOnly, S = _a.S;
+    var id = _a.id, _b = _a.injectOtherOption, injectOtherOption = _b === void 0 ? false : _b, valueProp = _a.value, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, options = _a.options, commonIsCorrectDesc = _a.commonIsCorrectDesc, rightWrongResult = _a.rightWrongResult, _c = _a.optionsLimit, optionsLimit = _c === void 0 ? Infinity : _c, listType = _a.listType, disabled = _a.disabled, invert = _a.invert, readOnly = _a.readOnly, S = _a.S;
     var props = arguments[0];
     var shouldHideSomeOptions = options.length > optionsLimit;
     var _d = (0, react_1.useState)(false), seeMore = _d[0], setSeeMore = _d[1];
@@ -72,11 +72,11 @@ function RadioList(_a) {
         rightWrongResult: rightWrongResult,
         onClick: handleInputClick,
     };
-    return (react_1.default.createElement("div", { className: className, id: id },
+    return (react_1.default.createElement("div", { 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(react_1.default.Fragment, null,
-            react_1.default.createElement(styled_1.StyledOptionsContainer, __assign({}, { listType: listType, style: style, S: S }), typicalOptions === null || typicalOptions === void 0 ? void 0 :
+            react_1.default.createElement(styled_1.StyledOptionsContainer, __assign({}, { 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.RadioInput, __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/utils/_EXPORTS/index.d.ts

@@ -4,5 +4,6 @@ export { deleteVal } from "../getterSetterDeleter/deleteVal";
 export { getBlockLabelProps } from "../getBlockLabelProps";
 export { injectHttps } from "../injectHttps";
 export { formatTextToCamelCase } from "../formatTextToCamelCase";
+export { formatCamelCaseToSentenceCase } from "../formatCamelCaseToSentenceCase";
 export { toArray } from "../toArray";
 export { useScroll } from "../customHooks/useScroll";

package/dist/utils/_EXPORTS/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScroll = exports.toArray = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
+exports.useScroll = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
 //the holy setter, getter & deleter
 var getVal_1 = require("../getterSetterDeleter/getVal");
 Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -15,6 +15,8 @@ var injectHttps_1 = require("../injectHttps");
 Object.defineProperty(exports, "injectHttps", { enumerable: true, get: function () { return injectHttps_1.injectHttps; } });
 var formatTextToCamelCase_1 = require("../formatTextToCamelCase");
 Object.defineProperty(exports, "formatTextToCamelCase", { enumerable: true, get: function () { return formatTextToCamelCase_1.formatTextToCamelCase; } });
+var formatCamelCaseToSentenceCase_1 = require("../formatCamelCaseToSentenceCase");
+Object.defineProperty(exports, "formatCamelCaseToSentenceCase", { enumerable: true, get: function () { return formatCamelCaseToSentenceCase_1.formatCamelCaseToSentenceCase; } });
 var toArray_1 = require("../toArray");
 Object.defineProperty(exports, "toArray", { enumerable: true, get: function () { return toArray_1.toArray; } });
 //custom hooks

package/dist/utils/formatCamelCaseToSentenceCase.d.ts

@@ -0,0 +1 @@
+export function formatCamelCaseToSentenceCase(text: any): any;

package/dist/utils/formatCamelCaseToSentenceCase.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCamelCaseToSentenceCase = void 0;
+//e.g CamelCase --> Sentence Case
+var formatCamelCaseToSentenceCase = function (text) {
+    var toReturn = text.replace(/([a-z0-9])([A-Z])/g, '$1 $2');
+    //picked up from here: https://stackoverflow.com/questions/18379254/regex-to-split-camel-case
+    //explanation of $1 $2: https://stackoverflow.com/questions/16702924/how-to-explain-1-2-in-javascript-when-using-regular-expression
+    return toReturn[0].toUpperCase() + toReturn.slice(1);
+};
+exports.formatCamelCaseToSentenceCase = formatCamelCaseToSentenceCase;

package/package.json

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