oolib 2.24.4 → 2.25.1

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

@@ -8,4 +8,4 @@ export function ActionMenu({ icon, invert, actions, align, iconSize, ButtonComp:
     setShowActions: any;
     popOutOfOverflowHiddenParent?: boolean;
     storybookPreview: any;
-}): JSX.Element;
+}): any;

package/dist/components/ActionMenu/utils/usePopOutOfOverflowHiddenParent.d.ts

@@ -1,6 +1,6 @@
 export function usePopOutOfOverflowHiddenParent(popOutOfOverflowHiddenParent: any): {
-    trackerRef: import("react").MutableRefObject<any>;
+    trackerRef: any;
     applyFixedPos: () => void;
-    removeFixedPos: () => void;
+    removeFixedPos: () => any;
     fixPos: any;
 };

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

@@ -1,8 +1,8 @@
 export function BannerAlert({ BANNER_STATE, REMOVE_ALERT_BANNER }: {
     BANNER_STATE: any;
     REMOVE_ALERT_BANNER: any;
-}): JSX.Element;
+}): any;
 export function BannerInfo({ BANNER_STATE, REMOVE_INFO_BANNER }: {
     BANNER_STATE: any;
     REMOVE_INFO_BANNER: any;
-}): JSX.Element;
+}): any;

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

@@ -31,7 +31,6 @@ exports.BannerInfoStyled = exports.BannerAlertStyled = exports.BannerStyled = ex
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
-var transitions_1 = require("../../themes/mixins/transitions");
 var greyColor15 = themes_1.colors.greyColor15, lightRed = themes_1.colors.lightRed, lightGreen = themes_1.colors.lightGreen, lightYellow = themes_1.colors.lightYellow, red = themes_1.colors.red, green = themes_1.colors.green, yellow = themes_1.colors.yellow, greyColor5 = themes_1.colors.greyColor5, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
 var colorConfig = {
     red: { bgColor: lightRed, color: red },
@@ -40,7 +39,7 @@ var colorConfig = {
     grey: { bgColor: greyColor5 },
     dark: { bgColor: greyColor100 },
 };
-exports.BannerAnimateStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  ", "\n  height: ", "px;\n"], ["\n  overflow: hidden;\n  ", "\n  height: ", "px;\n"])), (0, transitions_1.transition)("height"), function (_a) {
+exports.BannerAnimateStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  ", "\n  height: ", "px;\n"], ["\n  overflow: hidden;\n  ", "\n  height: ", "px;\n"])), (0, mixins_1.transition)("height"), function (_a) {
     var height = _a.height;
     return height;
 });
@@ -66,6 +65,6 @@ exports.BannerStyled = styled_components_1.default.div(templateObject_4 || (temp
 exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  width: 100%;\n  ", ";\n\n  ", "\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  width: 100%;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var top = _a.top;
     return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      top: ", "px;\n    "], ["\n      top: ", "px;\n    "])), top);
-}, (0, transitions_1.transition)("top"));
+}, (0, mixins_1.transition)("top"));
 exports.BannerInfoStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -1 +1 @@
-export function BlockLabel(props: any): JSX.Element;
+export function BlockLabel(props: any): any;

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

@@ -1,4 +1,4 @@
 export function Breadcrumbs({ links, invert }: {
     links: any;
     invert: any;
-}): JSX.Element;
+}): any;

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

@@ -1,6 +1,6 @@
-export function ButtonPrimary(props: any): JSX.Element;
-export function ButtonSecondary(props: any): JSX.Element;
-export function ButtonCustom(props: any): JSX.Element;
-export function ButtonGhost(props: any): JSX.Element;
-export function UploadButton(props: any): JSX.Element;
-export function GoogleLogin(props: any): JSX.Element;
+export function ButtonPrimary(props: any): any;
+export function ButtonSecondary(props: any): any;
+export function ButtonCustom(props: any): any;
+export function ButtonGhost(props: any): any;
+export function UploadButton(props: any): any;
+export function GoogleLogin(props: any): any;

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

@@ -3,23 +3,42 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 };
+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.ButtonStyled = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var styled_components_2 = require("styled-components");
-var mixins_1 = require("../../themes/mixins");
+var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../themes/colors");
+var mixins_1 = require("../../themes/mixins");
 var utilsOolib_1 = require("../../utilsOolib");
-var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
+var greyColor100 = colors_1.colors.greyColor100, greyColor90 = colors_1.colors.greyColor90, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, none = colors_1.colors.none;
 //sizes
 var SIZES = {
     S: "3rem",
     M: "4rem",
 };
-var ButtonPrimary = (0, styled_components_2.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 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 invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -29,10 +48,10 @@ var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateOb
     return invert ? greyColor100 : white;
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+    return color && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_2.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_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) {
         var invert = _a.invert;
         return invert ? greyColor70 : greyColor15;
     }, greyColor40);
@@ -47,7 +66,7 @@ var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateOb
         ? greyColor100
         : (0, utilsOolib_1.getPrimaryColorText)(colors);
 });
-var ButtonSecondary = (0, styled_components_2.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 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 invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -62,10 +81,10 @@ var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (template
         : (0, utilsOolib_1.getPrimaryColorText)(colors);
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+    return color && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var active = _a.active;
-    return active && (0, styled_components_2.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_5 || (templateObject_5 = __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)
@@ -77,7 +96,7 @@ var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (template
     });
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_2.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_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) {
         var invert = _a.invert;
         return invert ? greyColor80 : white;
     }, greyColor15, greyColor40);
@@ -86,13 +105,13 @@ var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (template
     return active
         ? ""
         : invert
-            ? (0, utilsOolib_1.getPrimaryColor10)(colors)
+            ? greyColor80
             : (0, utilsOolib_1.getPrimaryColor40)(colors);
 }, function (_a) {
     var colors = _a.theme.colors;
     return (0, utilsOolib_1.getPrimaryColorText)(colors);
 });
-var ButtonCustom = (0, styled_components_2.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 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 invert = _a.invert, colors = _a.theme.colors;
     return invert
         ? (0, utilsOolib_1.getPrimaryColor40)(colors)
@@ -112,10 +131,10 @@ var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateOb
         : (0, utilsOolib_1.getPrimaryColorText)(colors);
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_2.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color);
+    return color && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color);
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_2.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_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) {
         var invert = _a.invert;
         return (invert ? greyColor40 : greyColor15);
     }, greyColor40, function (_a) {
@@ -128,9 +147,9 @@ var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateOb
         ? greyColor80
         : (0, utilsOolib_1.getPrimaryColor40)(colors);
 });
-var ButtonGhost = (0, styled_components_2.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
+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 active = _a.active, colors = _a.theme.colors;
-    return active ? (0, utilsOolib_1.getPrimaryColor40)(colors) : "inherit";
+    return active ? (0, utilsOolib_1.getPrimaryColor40)(colors) : none;
 }, function (_a) {
     var invert = _a.invert, composition = _a.composition, colors = _a.theme.colors;
     return invert
@@ -140,27 +159,27 @@ var ButtonGhost = (0, styled_components_2.css)(templateObject_14 || (templateObj
             : (0, utilsOolib_1.getPrimaryColorText)(colors);
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_2.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+    return color && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var invert = _a.invert;
-    return invert && (0, styled_components_2.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), function (_a) {
+    return invert && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __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_2.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_13 || (templateObject_13 = __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
-            ? greyColor70
+            ? greyColor80
             : (0, utilsOolib_1.getPrimaryColor10)(colors);
 });
-var GoogleButton = (0, styled_components_2.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 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 disabled = _a.disabled;
-    return disabled && (0, styled_components_2.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+    return disabled && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
 var buttonVariantSetting = {
     primary: ButtonPrimary,
@@ -173,15 +192,15 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_21 || (
     var composition = _a.composition, size = _a.size;
     switch (composition) {
         case "iconOnly":
-            return (0, styled_components_2.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_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]);
         case "icon+text":
-            return (0, styled_components_2.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_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]);
         default:
-            return (0, styled_components_2.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_19 || (templateObject_19 = __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_2.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
+    return width && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
 }, (0, mixins_1.transition)("background-color"), function (_a) {
     var variant = _a.variant;
     return buttonVariantSetting[variant];

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

@@ -3,11 +3,5 @@ export function Comp({ children, className, style, noPadding }: {
     className: any;
     style: any;
     noPadding: any;
-}, ref: any): JSX.Element;
-export const Container: React.ForwardRefExoticComponent<{
-    children: any;
-    className: any;
-    style: any;
-    noPadding: any;
-} & React.RefAttributes<any>>;
-import React from "react";
+}, ref: any): any;
+export const Container: any;

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

@@ -1,3 +1,3 @@
 export function Divider({ invert }: {
     invert: any;
-}): JSX.Element;
+}): any;

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

@@ -4,4 +4,4 @@ export function InlineAlert({ text, link, type, style, invert }: {
     type?: string;
     style: any;
     invert: any;
-}): JSX.Element;
+}): any;

package/dist/components/LoadersAndProgress/LoaderCircle/index.d.ts

@@ -5,4 +5,4 @@ export function LoaderCircle({ isBlock, blockHeight, L, S, M, ...props }: {
     L: any;
     S: any;
     M: any;
-}): JSX.Element;
+}): any;

package/dist/components/LoadersAndProgress/ProgressBar/index.d.ts

@@ -1,7 +1,8 @@
-export function ProgressBar({ progress, text, children, isBlock, blockHeight, }: {
+export function ProgressBar({ progress, text, children, isBlock, blockHeight, barWidth }: {
     progress: any;
     text: any;
     children: any;
     isBlock?: boolean;
     blockHeight?: string;
-}): JSX.Element;
+    barWidth?: number;
+}): any;

package/dist/components/LoadersAndProgress/ProgressBar/index.js

@@ -8,11 +8,11 @@ var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../../Typo");
 var styled_1 = require("../styled");
 var ProgressBar = function (_a) {
-    var progress = _a.progress, text = _a.text, children = _a.children, _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c;
+    var progress = _a.progress, text = _a.text, children = _a.children, _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 100 : _d;
     var loaderWidth = 100; //maybe in the future this will be controlled by a size prop
     var genLoader = function () { return (react_1.default.createElement(styled_1.StyledLoaderWrapper, { isBlock: isBlock },
-        react_1.default.createElement(styled_1.StyledHorLoader, { loaderWidth: loaderWidth },
-            react_1.default.createElement(styled_1.StyledHorLoadingBar, { loaderWidth: loaderWidth, progress: progress })),
+        react_1.default.createElement(styled_1.StyledHorLoader, { barWidth: barWidth },
+            react_1.default.createElement(styled_1.StyledHorLoadingBar, { barWidth: barWidth, progress: progress })),
         (text || children) && react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, text || children))); };
     return !isBlock ? (genLoader()) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, { blockHeight: blockHeight }, genLoader()));
 };

package/dist/components/LoadersAndProgress/styled.js

@@ -46,8 +46,8 @@ exports.StyledLoaderOverlay = styled_components_1.default.div(templateObject_6 |
     return blockHeight;
 });
 exports.StyledHorLoader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"], ["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"])), function (_a) {
-    var loaderWidth = _a.loaderWidth;
-    return loaderWidth + 'px';
+    var barWidth = _a.barWidth;
+    return barWidth + 'px';
 }, function (_a) {
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
@@ -56,7 +56,7 @@ exports.StyledHorLoadingBar = styled_components_1.default.div(templateObject_8 |
     var theme = _a.theme;
     return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
 }, function (_a) {
-    var progress = _a.progress, loaderWidth = _a.loaderWidth;
-    return (progress / 100) * loaderWidth + "px";
+    var progress = _a.progress, barWidth = _a.barWidth;
+    return (progress / 100) * barWidth + "px";
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/LoadersAndProgress/utils/index.d.ts

@@ -1,5 +1,5 @@
 export function getTypoAndLoaderDimensions(size: any): {
-    TypoComp: (props: any) => JSX.Element;
+    TypoComp: (props: any) => any;
     trackThickness: number;
     diameter: number;
 };

package/dist/components/OKELink/comps/AvatarDisplay/index.d.ts

@@ -4,4 +4,4 @@ export function AvatarDisplay({ value, title: titleProp, style, size, invert }:
     style: any;
     size?: number;
     invert: any;
-}): JSX.Element;
+}): any;

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

@@ -15,4 +15,4 @@ export function OKELink({ invert, disabled, color, invertUnderline, linkType, li
     iconSize?: number;
     avatar: any;
     avatarTitle: any;
-}): JSX.Element;
+}): any;

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

@@ -2,4 +2,4 @@ export function PercentCompletedPie({ percent, size, label }: {
     percent: any;
     size?: number;
     label: any;
-}): JSX.Element;
+}): any;

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;
+}): any;
 export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, disabled, rightWrongResult, }: {
     option: any;
     onClick: any;
@@ -7,4 +15,4 @@ export function CheckboxInput({ option, onClick, S, inputStyle, value, invert, d
     invert: any;
     disabled: any;
     rightWrongResult: any;
-}): JSX.Element;
+}): 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 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 && 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(option, isSelected); } }),
+    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.d.ts

@@ -16,4 +16,4 @@ export function CheckboxList({ id, injectOtherOption, value: valueProp, onChange
     className: any;
     S: any;
     readOnly: any;
-}, ...args: any[]): JSX.Element;
+}, ...args: any[]): any;

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;
+}): any;
 export function RadioInput({ option, onClick, disabled, invert, value, S, rightWrongResult, }: {
     option: any;
     onClick: any;
@@ -6,4 +14,4 @@ export function RadioInput({ option, onClick, disabled, invert, value, S, rightW
     value: any;
     S: any;
     rightWrongResult: any;
-}): JSX.Element;
+}): 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,14 +24,19 @@ 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);
     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 && onClick(option); } }),
+    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/comps/RadioList/index.d.ts

@@ -15,4 +15,4 @@ export function RadioList({ id, injectOtherOption, value: valueProp, onChange, s
     className: any;
     readOnly: any;
     S: any;
-}, ...args: any[]): JSX.Element;
+}, ...args: any[]): any;

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/components/Section/index.d.ts

@@ -1 +1 @@
-export function Section(props: any): JSX.Element;
+export function Section(props: any): any;

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

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

package/dist/components/Switches/index.js

@@ -16,9 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchSingle = exports.SwitchDouble = void 0;
 var react_1 = __importDefault(require("react"));
-var BlockLabel_1 = require("../BlockLabel");
-var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var themes_1 = require("../../themes");
+var _EXPORTS_1 = require("../../utils/_EXPORTS");
+var BlockLabel_1 = require("../BlockLabel");
 var styled_1 = require("./styled");
 var greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
 function SwitchDouble(_a) {
@@ -34,23 +34,14 @@ function SwitchDouble(_a) {
     };
     var props = arguments[0];
     var isLeftOptionActive = options[0].value === (value === null || value === void 0 ? void 0 : value.value);
-    var leftOptionColor, rightOptionColor;
-    if (invert) {
-        leftOptionColor = isLeftOptionActive ? white : greyColor40;
-        rightOptionColor = isLeftOptionActive ? greyColor40 : white;
-    }
-    else {
-        leftOptionColor = isLeftOptionActive ? greyColor100 : greyColor40;
-        rightOptionColor = isLeftOptionActive ? greyColor40 : greyColor100;
-    }
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
-            react_1.default.createElement(styled_1.STYLED_LABEL, __assign({}, { lineHeight: 1, color: leftOptionColor, invert: invert }), options[0].display),
+            react_1.default.createElement(styled_1.STYLED_SANS_3, __assign({}, { lineHeight: 1, semibold: isLeftOptionActive ? true : false, invert: invert }), options[0].display),
             react_1.default.createElement(styled_1.StyledButtonSlider, { invert: invert, disabled: disabled, onClick: handleClick },
                 react_1.default.createElement(styled_1.StyledSwitch, { className: 'StyledSwitch' //read in styled.js why we are using an okf-anti-pattern
                     , invert: invert, disabled: disabled, direction: isLeftOptionActive ? "left" : "right" })),
-            react_1.default.createElement(styled_1.STYLED_LABEL, __assign({}, { invert: invert, color: rightOptionColor, lineHeight: 1 }), options[1].display))));
+            react_1.default.createElement(styled_1.STYLED_SANS_3, __assign({}, { invert: invert, semibold: isLeftOptionActive ? false : true, lineHeight: 1 }), options[1].display))));
 }
 exports.SwitchDouble = SwitchDouble;
 function SwitchSingle(_a) {
@@ -71,15 +62,12 @@ function SwitchSingle(_a) {
             onChange &&
             onChange(id, isInactive ? (saveValueAsString ? option.value : option) : undefined);
     };
-    var labelColor = isInactive ? greyColor40 : greyColor100;
-    if (invert)
-        labelColor = isInactive ? greyColor40 : white;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
             react_1.default.createElement(styled_1.StyledButtonSlider, { inactive: isInactive, disabled: disabled, invert: invert, onClick: handleClick },
                 react_1.default.createElement(styled_1.StyledSwitch, { className: 'StyledSwitch' //read in styled.js why we are using an okf-anti-pattern
                     , direction: isInactive ? "left" : "right", inactive: isInactive, disabled: disabled, invert: invert })),
-            react_1.default.createElement(styled_1.STYLED_LABEL, __assign({}, { invert: invert, color: labelColor, lineHeight: 1 }), option.display))));
+            react_1.default.createElement(styled_1.STYLED_SANS_3, __assign({}, { invert: invert, lineHeight: 1, semibold: isInactive ? false : true }), option.display))));
 }
 exports.SwitchSingle = SwitchSingle;

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

@@ -1,4 +1,4 @@
 export const StyledSwitchWrapper: any;
 export const StyledButtonSlider: any;
 export const StyledSwitch: any;
-export const STYLED_LABEL: any;
+export const STYLED_SANS_3: any;

package/dist/components/Switches/styled.js

@@ -7,11 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STYLED_LABEL = exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapper = void 0;
+exports.STYLED_SANS_3 = exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var utilsOolib_1 = require("../../utilsOolib");
-var themes_1 = require("../../themes");
 var Typo_1 = require("../Typo");
 var white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor40 = themes_1.colors.greyColor40;
 exports.StyledSwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  /* justify-content: center; */\n  align-items: center;\n  gap: 1rem;\n"], ["\n  display: flex;\n  /* justify-content: center; */\n  align-items: center;\n  gap: 1rem;\n"])));
@@ -52,7 +52,7 @@ exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (t
     var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
     return !disabled && (inactive ? greyColor40 : (0, utilsOolib_1.getPrimaryColorText)(colors));
 });
-exports.STYLED_LABEL = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\ncolor: ", ";\nline-height: ", ";\n", "\n"], ["\ncolor: ", ";\nline-height: ", ";\n", "\n"])), function (_a) {
+exports.STYLED_SANS_3 = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  line-height: ", ";\n  ", "\n"], ["\n  color: ", ";\n  line-height: ", ";\n  ", "\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {

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

@@ -1,2 +1,2 @@
-export function TabBarStyle1(props: any): JSX.Element;
-export function TabBarStyle2(props: any): JSX.Element;
+export function TabBarStyle1(props: any): any;
+export function TabBarStyle2(props: any): any;

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

@@ -5,7 +5,7 @@ export function TagDisplay({ display, style, invert, M, XS, variant }: {
     M: any;
     XS: any;
     variant?: string;
-}): JSX.Element;
+}): any;
 export function TagClear({ id, display, value, M, XS, invert, onClick, variant, grey, }: {
     id: any;
     display: any;
@@ -16,7 +16,7 @@ export function TagClear({ id, display, value, M, XS, invert, onClick, variant,
     onClick?: () => void;
     variant?: string;
     grey: any;
-}): JSX.Element;
+}): any;
 export function TagSelect({ onClick, isSelected, display, value, M, XS, invert, disabled, style, onMouseDown }: {
     onClick: any;
     isSelected?: boolean;
@@ -28,7 +28,7 @@ export function TagSelect({ onClick, isSelected, display, value, M, XS, invert,
     disabled: any;
     style: any;
     onMouseDown: any;
-}): JSX.Element;
+}): any;
 export function TagLink({ display, to, invert, M, XS, variant }: {
     display: any;
     to: any;
@@ -36,4 +36,4 @@ export function TagLink({ display, to, invert, M, XS, variant }: {
     M: any;
     XS: any;
     variant?: string;
-}): JSX.Element;
+}): any;

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

@@ -1,9 +1,9 @@
-export function TextInput(props: any): JSX.Element;
-export function PasswordInput(props: any): JSX.Element;
-export function EmailInput(props: any): JSX.Element;
-export function PhoneInput(props: any): JSX.Element;
+export function TextInput(props: any): any;
+export function PasswordInput(props: any): any;
+export function EmailInput(props: any): any;
+export function PhoneInput(props: any): any;
 export function URLInput({ routesAreValidInputs, ...props }: {
     [x: string]: any;
     routesAreValidInputs?: boolean;
-}): JSX.Element;
-export function NumberInput(props: any): JSX.Element;
+}): any;
+export function NumberInput(props: any): any;

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

@@ -3,4 +3,4 @@ export function Tooltip({ text, position, style, children }: {
     position?: string;
     style: any;
     children: any;
-}): JSX.Element;
+}): any;

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

@@ -1,18 +1,18 @@
-export function LABEL(props: any): JSX.Element;
-export function SANS_0(props: any): JSX.Element;
-export function SANS_2(props: any): JSX.Element;
-export function SANS_3(props: any): JSX.Element;
-export function SANS_3_4(props: any): JSX.Element;
-export function SANS_4(props: any): JSX.Element;
-export function SANS_4_5(props: any): JSX.Element;
-export function SANS_5_6(props: any): JSX.Element;
-export function SANS_7_8(props: any): JSX.Element;
-export function SERIF_3(props: any): JSX.Element;
-export function SERIF_3_4(props: any): JSX.Element;
-export function SERIF_4_5(props: any): JSX.Element;
-export function SERIF_5_6(props: any): JSX.Element;
-export function SERIF_6_7(props: any): JSX.Element;
-export function SERIF_7_8(props: any): JSX.Element;
-export function SERIF_9_10(props: any): JSX.Element;
-export function BLOCKQUOTE(props: any): JSX.Element;
-export function TypoClassesProvider(props: any): JSX.Element;
+export function LABEL(props: any): any;
+export function SANS_0(props: any): any;
+export function SANS_2(props: any): any;
+export function SANS_3(props: any): any;
+export function SANS_3_4(props: any): any;
+export function SANS_4(props: any): any;
+export function SANS_4_5(props: any): any;
+export function SANS_5_6(props: any): any;
+export function SANS_7_8(props: any): any;
+export function SERIF_3(props: any): any;
+export function SERIF_3_4(props: any): any;
+export function SERIF_4_5(props: any): any;
+export function SERIF_5_6(props: any): any;
+export function SERIF_6_7(props: any): any;
+export function SERIF_7_8(props: any): any;
+export function SERIF_9_10(props: any): any;
+export function BLOCKQUOTE(props: any): any;
+export function TypoClassesProvider(props: any): any;

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

@@ -3,4 +3,4 @@ export function UserRoleBadge({ role, value, className, dummyThemeFromStoryBook
     value: any;
     className: any;
     dummyThemeFromStoryBook: any;
-}): JSX.Element;
+}): any;

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

@@ -1,8 +1,8 @@
-export function Wrapper1500(props: any): JSX.Element;
-export function Wrapper1120(props: any): JSX.Element;
-export function Wrapper1000(props: any): JSX.Element;
-export function Wrapper900(props: any): JSX.Element;
-export function Wrapper800(props: any): JSX.Element;
-export function Wrapper820(props: any): JSX.Element;
-export function Wrapper700(props: any): JSX.Element;
-export function Wrapper650(props: any): JSX.Element;
+export function Wrapper1500(props: any): any;
+export function Wrapper1120(props: any): any;
+export function Wrapper1000(props: any): any;
+export function Wrapper900(props: any): any;
+export function Wrapper800(props: any): any;
+export function Wrapper820(props: any): any;
+export function Wrapper700(props: any): any;
+export function Wrapper650(props: any): any;

package/dist/icons/custom/index.d.ts

@@ -1,19 +1,19 @@
 export function IndexIcon({ color, size }: {
     color?: string;
     size?: number;
-}): JSX.Element;
+}): any;
 export function LanguageIcon({ color, size }: {
     color?: string;
     size?: number;
-}): JSX.Element;
+}): any;
 export function LetterH({ role, size }: {
     role: any;
     size: any;
-}): JSX.Element;
-export function OkeGoogleIcon(props: any): JSX.Element;
-export function BadgeAdmin(props: any): JSX.Element;
-export function BadgeSuperAdmin(props: any): JSX.Element;
-export function BadgeMod(props: any): JSX.Element;
-export function BadgeVetted(props: any): JSX.Element;
-export function IndiaFlag(props: any): JSX.Element;
-export function KenyaFlag(props: any): JSX.Element;
+}): any;
+export function OkeGoogleIcon(props: any): any;
+export function BadgeAdmin(props: any): any;
+export function BadgeSuperAdmin(props: any): any;
+export function BadgeMod(props: any): any;
+export function BadgeVetted(props: any): any;
+export function IndiaFlag(props: any): any;
+export function KenyaFlag(props: any): any;

package/package.json

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