oolib 2.176.1 → 2.176.3

package/dist/index.d.ts

@@ -8,7 +8,6 @@ export * from "./components/InlineAlert";
 export * from "./components/TextInputs";
 export * from "./components/Container";
 export * from "./components/Wrappers";
-export * from "./components/Switches";
 export * from "./components/TabBar";
 export * from "./components/Margins";
 export * from "./components/Paddings";
@@ -20,6 +19,7 @@ export * from "./v2/components/Typo2";
 export * from "./v2/components/BlockLabel";
 export { colors } from "./themes";
 export { icons } from "./icons";
+export { SwitchDouble } from "./components/Switches";
 export { Section } from "./components/Section";
 export { UserRoleBadge } from "./components/UserRoleBadge";
 export { OKELink } from "./components/OKELink";
@@ -76,11 +76,13 @@ export { DataVizAccordion } from "./v2/components/DataVizAccordion";
 export { CheckboxList } from "./v2/components/RadioAndCheckbox/comps/CheckboxList";
 export { CheckboxInput } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput";
 export { CheckboxButton } from "./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton";
+export { RadioList } from "./v2/components/RadioAndCheckbox/comps/RadioList/index";
+export { SwitchSingle } from "./v2/components/Switches";
 export * as baseStyling from "./v2/themes/utils/baseStyling";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
-export { RadioButton, RadioInput, RadioList } from "./components/RadioAndCheckbox";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
 export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2 } from "./v2/components/Tags";
 export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact } from "./v2/components/Buttons";
+export { RadioInput, RadioButton } from "./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index";

package/dist/index.js

@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.RadioList = exports.RadioInput = exports.RadioButton = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.baseStyling = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.DataVizAccordion = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = void 0;
+exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.SwitchDouble = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.baseStyling = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.DataVizAccordion = exports.BarChart = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -71,12 +71,14 @@ __exportStar(require("./components/InlineAlert"), exports);
 __exportStar(require("./components/TextInputs"), exports);
 __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
-__exportStar(require("./components/Switches"), exports);
+var Switches_1 = require("./components/Switches");
+Object.defineProperty(exports, "SwitchDouble", { enumerable: true, get: function () { return Switches_1.SwitchDouble; } });
 __exportStar(require("./components/TabBar"), exports);
-var RadioAndCheckbox_1 = require("./components/RadioAndCheckbox");
-Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioAndCheckbox_1.RadioButton; } });
-Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return RadioAndCheckbox_1.RadioInput; } });
-Object.defineProperty(exports, "RadioList", { enumerable: true, get: function () { return RadioAndCheckbox_1.RadioList; } });
+// export {
+//   RadioButton,
+//   RadioInput,
+//   RadioList
+// } from './components/RadioAndCheckbox';
 __exportStar(require("./components/Margins"), exports);
 __exportStar(require("./components/Paddings"), exports);
 var Section_1 = require("./components/Section");
@@ -237,4 +239,12 @@ var CheckboxInput_1 = require("./v2/components/RadioAndCheckbox/comps/CheckboxLi
 Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return CheckboxInput_1.CheckboxInput; } });
 var CheckboxButton_1 = require("./v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton");
 Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return CheckboxButton_1.CheckboxButton; } });
+var index_1 = require("./v2/components/RadioAndCheckbox/comps/RadioList/index");
+Object.defineProperty(exports, "RadioList", { enumerable: true, get: function () { return index_1.RadioList; } });
+var index_2 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index");
+Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return index_2.RadioInput; } });
+var index_3 = require("./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index");
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return index_3.RadioButton; } });
+var Switches_2 = require("./v2/components/Switches");
+Object.defineProperty(exports, "SwitchSingle", { enumerable: true, get: function () { return Switches_2.SwitchSingle; } });
 exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));

package/dist/stories/v2/components/RadioButton.stories.d.ts

@@ -170,6 +170,7 @@ export namespace RadioInput {
         export { disabled_2 as disabled };
         let invert_2: boolean;
         export { invert_2 as invert };
+        export let label: string;
     }
     export { args_1 as args };
     export namespace argTypes_1 {

package/dist/stories/v2/components/RadioButton.stories.js

@@ -191,6 +191,7 @@ exports.RadioInput.args = {
     optionIsCorrect: false,
     disabled: false,
     invert: false,
+    label: "Option 1"
 };
 exports.RadioInput.argTypes = {
     optionIsCorrect: {

package/dist/stories/v2/components/Switches.stories.js

@@ -76,8 +76,8 @@ var SwitchDouble = function (args) {
 };
 exports.SwitchDouble = SwitchDouble;
 exports.SwitchDouble.args = {
-    rightOption: 'right option',
-    leftOption: 'left Option',
+    rightOption: 'Right Option',
+    leftOption: 'Left Option',
     disabled: false,
     invert: false,
     saveValueAsString: true,
@@ -89,7 +89,7 @@ exports.SwitchDouble.argTypes = {
         defaultValue: 'style1'
     },
     rightOption: {
-        name: 'Right option'
+        name: 'Right Option'
     },
     leftOption: {
         name: "Left Option"
@@ -121,7 +121,7 @@ exports.SwitchSingle.parameters = {
     controls: { exclude: ['leftOption'] }
 };
 exports.SwitchSingle.args = {
-    rightOption: 'right option',
+    rightOption: 'Right Option',
     layoutStyle: 'style1',
     disabled: false,
     invert: false,

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

@@ -72,11 +72,11 @@ var variants = {
         return colors ? (0, getDynamicColors_1.getOnPrimary)(colors) : onPrimary;
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
+        return forceHover && (0, baseStyling_1.applyBlackOverlayOnHover)();
     }, function (_a) {
         var disabled = _a.disabled;
         return disabled && disabledStyles;
-    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
+    }, (0, baseStyling_1.applyBlackOverlayOnHover)()),
     secondary: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    \n    ", "\n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), function (_a) {
         var colors = _a.theme.colors;
         return colors ? (0, getDynamicColors_1.getSecondaryContainer)(colors) : secondaryContainer;
@@ -88,22 +88,22 @@ var variants = {
         return disabled && disabledStyles;
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
-    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
+        return forceHover && (0, baseStyling_1.applyBlackOverlayOnHover)();
+    }, (0, baseStyling_1.applyBlackOverlayOnHover)()),
     tertiary: (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n    /* border: 1px solid ", "; */\n    box-sizing: border-box;\n    outline: 1px solid ", ";\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n    /* border: 1px solid ", "; */\n    box-sizing: border-box;\n    outline: 1px solid ", ";\n    ", "\n\n    ", "\n\n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), grey80, colors_1.colors.grey10, grey10, function (_a) {
         var disabled = _a.disabled;
         return disabled && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey40);
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
-    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
+        return forceHover && (0, baseStyling_1.applyBlackOverlayOnHover)();
+    }, (0, baseStyling_1.applyBlackOverlayOnHover)()),
     ghost: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: transparent;\n    color: ", ";\n\n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    background-color: transparent;\n    color: ", ";\n\n    ", "\n    \n    ", "\n    \n    @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), grey80, function (_a) {
         var disabled = _a.disabled;
         return disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey40);
     }, function (_a) {
         var forceHover = _a.forceHover;
-        return forceHover && (0, baseStyling_1.apply10PercentBlackOnHover)();
-    }, (0, baseStyling_1.apply10PercentBlackOnHover)()),
+        return forceHover && (0, baseStyling_1.applyBlackOverlayOnHover)();
+    }, (0, baseStyling_1.applyBlackOverlayOnHover)()),
 };
 // Composition Styles
 var getCompositionStyles = function (composition, responsive) {

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

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

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

@@ -54,9 +54,9 @@ exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 ||
     }
     return "none";
 }, function (_a) {
-    var isSelected = _a.isSelected, disabled = _a.disabled, colors = _a.theme.colors;
+    var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme;
     if (isSelected) {
-        return disabled ? grey5 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
+        return disabled ? grey5 : (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
     }
     return disabled ? grey5 : "white";
 }, function (_a) {
@@ -64,10 +64,10 @@ exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 ||
     return (disabled ? "not-allowed" : "pointer");
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
-    return isSelected && !disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " \n  "], ["\n    ", " \n  "])), (0, baseStyling_1.apply10PercentBlackOnHover)());
+    return isSelected && !disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " \n  "], ["\n    ", " \n  "])), (0, baseStyling_1.applyBlackOverlayOnHover)());
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     return !disabled &&
-        !isSelected && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), grey50);
+        !isSelected && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), baseStyling_1.borderStyleOnHover);
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -21,7 +21,7 @@ var CheckboxInput = function (_a) {
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
     var genCheckboxButton = function (options) {
         if (options === void 0) { options = {}; }
-        return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: "checkboxButton_inside_checkboxInput", disabled: disabled }));
+        return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: "radioOrCheckboxButton_inside_input", disabled: disabled }));
     };
     var genCheckSquare = function () { return (react_1.default.createElement("div", { style: { flexShrink: 0 } },
         react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: disabled ? grey40 : onSecondary, style: {

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

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

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

@@ -11,23 +11,21 @@ var Typo_1 = require("../../../../../../../components/Typo");
 var utils_1 = require("../../../../utils");
 var styled_1 = require("../../../../styled");
 var styled_2 = require("./styled");
+var Typo2_1 = require("../../../../../Typo2");
 var invertGreen = themes_1.colors.invertGreen, red = themes_1.colors.red, greyColor40 = themes_1.colors.greyColor40, green = themes_1.colors.green, invertRed = themes_1.colors.invertRed;
 var XCircle = icons_1.icons.XCircle, CheckCircle = icons_1.icons.CheckCircle;
 var RadioButton = function (_a) {
-    var isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S, readOnly = _a.readOnly;
-    return (react_1.default.createElement(styled_2.StyledRadioInput, { onClick: function (ev) { return onClick && onClick(ev); }, isSelected: isSelected, disabled: disabled, invert: invert, S: S, readOnly: readOnly }));
+    var isSelected = _a.isSelected, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, S = _a.S, readOnly = _a.readOnly, className = _a.className;
+    return (react_1.default.createElement(styled_2.StyledRadioButton, { style: { overflow: 'hidden' }, className: className || '', onClick: function (ev) { return onClick && onClick(ev); }, isSelected: isSelected, disabled: disabled, invert: invert, S: S, readOnly: readOnly }));
 };
 exports.RadioButton = RadioButton;
 var RadioInput = function (_a) {
     var option = _a.option, onClick = _a.onClick, disabled = _a.disabled, invert = _a.invert, value = _a.value, S = _a.S, rightWrongResult = _a.rightWrongResult;
     var isSelected = option.value === (value === null || value === void 0 ? void 0 : value.value);
     var markingCommand = (0, utils_1.getMarkingCommand)({ option: option, isSelected: isSelected }); // returns undefined if option isn't labeled as 'correct' nor selected
-    var TYPO_COMP = S
-        ? Typo_1.SANS_2
-        : Typo_1.SANS_3;
     var genRadioButton = function (options) {
         if (options === void 0) { options = {}; }
-        return (react_1.default.createElement(exports.RadioButton, { isSelected: isSelected, invert: invert, S: S, className: 'btn',
+        return (react_1.default.createElement(exports.RadioButton, { isSelected: isSelected, invert: invert, S: S, className: 'radioOrCheckboxButton_inside_input',
             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
          }));
     };
@@ -48,6 +46,6 @@ var RadioInput = function (_a) {
                     : 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)));
+        react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { bold: rightWrongResult && isSelected, color: disabled && greyColor40, invert: invert }, option.display)));
 };
 exports.RadioInput = RadioInput;

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

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

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

@@ -37,18 +37,17 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledRadioInput = void 0;
+exports.StyledRadioButton = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../../themes/mixins");
-var utilsOolib_1 = require("../../../../../../../utilsOolib");
+var baseStyling_1 = require("../../../../../../themes/utils/baseStyling");
+var getDynamicColors_1 = require("../../../../../../themes/utils/getDynamicColors");
 var none = themes_1.colors.none, white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey20 = themes_1.colors.grey20;
-// secondaryContainer = "#1F3B0A";
-// onSecondary = "#CFE8BD";
-exports.StyledRadioInput = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: ", ";\n  border: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: ", ";\n  }\n\n  /* add the smaller circle for selected state */\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    border: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: ", ";\n  border: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: ", ";\n  }\n\n  /* add the smaller circle for selected state */\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    border: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
-    var isSelected = _a.isSelected, disabled = _a.disabled;
+exports.StyledRadioButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 50%;\n  background: ", ";\n  border: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  /* &:focus {\n    outline: none;\n    box-shadow: ", ";\n  } */\n\n  /* add the smaller circle for selected state */\n  &::after {\n    z-index: 1; //so that the black overlay that appears via ::before is below this\n    content: \"\";\n    position: absolute;\n    width: 1.4rem;\n    height: 1.4rem;\n    ", "{\n      width: 1rem;\n      height: 1rem;\n    }\n    border-radius: 50%;\n    background: ", ";\n    border: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  position: relative;\n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 50%;\n  background: ", ";\n  border: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  /* &:focus {\n    outline: none;\n    box-shadow: ", ";\n  } */\n\n  /* add the smaller circle for selected state */\n  &::after {\n    z-index: 1; //so that the black overlay that appears via ::before is below this\n    content: \"\";\n    position: absolute;\n    width: 1.4rem;\n    height: 1.4rem;\n    ", "{\n      width: 1rem;\n      height: 1rem;\n    }\n    border-radius: 50%;\n    background: ", ";\n    border: ", ";\n    box-shadow: ", ";\n  }\n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme;
     if (isSelected) {
-        return disabled ? grey5 : utilsOolib_1.onSecondary;
+        return disabled ? grey5 : (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
     }
     return disabled ? grey5 : "none";
 }, function (_a) {
@@ -60,29 +59,31 @@ exports.StyledRadioInput = styled_components_1.default.button(templateObject_1 |
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var isSelected = _a.isSelected, disabled = _a.disabled;
+    return isSelected && !disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " \n  "], ["\n    ", " \n  "])), (0, baseStyling_1.applyBlackOverlayOnHover)());
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     return !disabled &&
-        !isSelected &&
-        "\n      background: rgba(0, 0, 0, 0.05); \n    ";
+        !isSelected && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), baseStyling_1.borderStyleOnHover);
 }, function (_a) {
     var isSelected = _a.isSelected;
     return isSelected ? "0px 4px 6px rgba(0, 0, 0, 0.25)" : "none";
-}, function (_a) {
+}, (0, mixins_1.mediaQuery)('md'), function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     return isSelected ? (disabled ? grey10 : white) : "transparent";
 }, function (_a) {
-    var isSelected = _a.isSelected, disabled = _a.disabled;
+    var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme;
     return isSelected
         ? disabled
             ? "1px solid ".concat(grey20)
-            : "1px solid ".concat(utilsOolib_1.secondaryContainer)
+            : "1px solid ".concat((0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors))
         : "none";
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     return isSelected && !disabled ? "0px 4px 6px rgba(0, 0, 0, 0.25)" : "none";
 });
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3;
 // we no longer need StyleRadioInputFill since the ::after pseudo is doing the work. It wasn't working without it.
 // export const StyledRadioInputFill = styled.div`
 //   width: ${({ isSelected }) => (isSelected ? '10px' : '0px')};

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

@@ -42,13 +42,14 @@ var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
+var baseStyling_1 = require("../../themes/utils/baseStyling");
 exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n  align-items: center;\n\n  ", "\n"])), function (_a) {
     var S = _a.S;
     return (S ? "0.7rem 1.5rem" : "1rem 2rem");
 }, function (_a) {
     var listType = _a.listType;
     return listType === "vertical"
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          flex-direction: column;\n\n          gap: ", "; //0.6 because on mobile checkbox has 0.4 rem extra click area top and bottom. so 1.4rem - 0.8rem\n          align-items: flex-start;\n          ", " {\n            gap: ", ";\n          }\n        "], ["\n          flex-direction: column;\n\n          gap: ", "; //0.6 because on mobile checkbox has 0.4 rem extra click area top and bottom. so 1.4rem - 0.8rem\n          align-items: flex-start;\n          ", " {\n            gap: ", ";\n          }\n        "])), function (_a) {
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          flex-direction: column;\n\n          gap: ", "; //0.6 because on mobile checkbox & radio has 0.4 rem extra click area top and bottom. so 1.4rem - 0.8rem\n          align-items: flex-start;\n          ", " {\n            gap: ", ";\n          }\n        "], ["\n          flex-direction: column;\n\n          gap: ", "; //0.6 because on mobile checkbox & radio has 0.4 rem extra click area top and bottom. so 1.4rem - 0.8rem\n          align-items: flex-start;\n          ", " {\n            gap: ", ";\n          }\n        "])), function (_a) {
             var S = _a.S;
             return S
                 ? "1rem"
@@ -58,7 +59,7 @@ exports.StyledOptionsContainer = styled_components_1.default.div(templateObject_
             return (S ? "1rem" : "1.4rem");
         }) : "";
 });
-exports.StyledOption = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  background-color: unset;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  padding: 0.4rem 0; //this is so that there is more click area on mobile\n  ", " {\n    gap: 0.6rem;\n    padding: 0;\n  }\n  position: relative;\n  cursor: ", ";\n\n  &:hover .checkboxButton_inside_checkboxInput {\n    ", "\n    ", "\n  }\n"], ["\n  border: none;\n  background-color: unset;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  padding: 0.4rem 0; //this is so that there is more click area on mobile\n  ", " {\n    gap: 0.6rem;\n    padding: 0;\n  }\n  position: relative;\n  cursor: ", ";\n\n  &:hover .checkboxButton_inside_checkboxInput {\n    ", "\n    ", "\n  }\n"])), function (_a) {
+exports.StyledOption = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  background-color: unset;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  padding: 0.4rem 0; //this is so that there is more click area on mobile\n  ", " {\n    gap: 0.6rem;\n    padding: 0;\n  }\n  position: relative;\n  cursor: ", ";\n\n  &:hover .radioOrCheckboxButton_inside_input {\n    ", "\n    \n    // here we manually trigger what apply10PeecentBlackOnHover does\n    ", "\n  }\n"], ["\n  border: none;\n  background-color: unset;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  /* gap: ", "; */\n  gap: 0.8rem;\n  padding: 0.4rem 0; //this is so that there is more click area on mobile\n  ", " {\n    gap: 0.6rem;\n    padding: 0;\n  }\n  position: relative;\n  cursor: ", ";\n\n  &:hover .radioOrCheckboxButton_inside_input {\n    ", "\n    \n    // here we manually trigger what apply10PeecentBlackOnHover does\n    ", "\n  }\n"])), function (_a) {
     var S = _a.S;
     return (S ? "0.7rem" : "1rem");
 }, (0, mixins_1.mediaQuery)("md"), function (_a) {
@@ -70,9 +71,9 @@ exports.StyledOption = styled_components_1.default.button(templateObject_5 || (t
         !rightWrongResult &&
         !disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), themes_1.colors.grey50);
 }, function (_a) {
-    var isSelected = _a.isSelected, isDisabled = _a.isDisabled;
+    var isSelected = _a.isSelected, disabled = _a.disabled;
     return isSelected &&
-        !isDisabled && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        &::before {\n          background: ", ";\n        }\n      "], ["\n        &::before {\n          background: ", ";\n        }\n      "])), themes_1.colors.grey10);
+        !disabled && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        &::before {\n          ", "\n        }\n      "], ["\n        &::before {\n          ", "\n        }\n      "])), baseStyling_1.blackOverlayEffect);
 });
 exports.StyledOtherOptionContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"], ["\n  display: flex;\n  gap: 1rem;\n  flex-direction: ", ";\n"])), function (_a) {
     var listType = _a.listType;

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

@@ -52,6 +52,7 @@ var BlockLabel_1 = require("../BlockLabel");
 var styled_1 = require("./styled");
 var Tooltip_1 = require("../../../components/Tooltip");
 var utilsOolib_1 = require("../../../utilsOolib");
+var Typo2_1 = require("../Typo2");
 function SwitchDouble(_a) {
     var id = _a.id, valueProp = _a.value, options = _a.options, onChange = _a.onChange, saveValueAsString = _a.saveValueAsString, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var value = saveValueAsString
@@ -69,7 +70,7 @@ function SwitchDouble(_a) {
         throw new Error("You need to pass a value prop to make SwitchDouble work");
     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.StyledSwitchWrapperStyle1, null,
+        react_1.default.createElement(StyledSwitchWrapperStyle1, null,
             react_1.default.createElement(styled_1.STYLED_UI_BODY_SM, { lineHeight: 1,
                 semibold: isLeftOptionActive ? true : false }, options[0].display),
             react_1.default.createElement(styled_1.StyledButtonSlider, { disabled: disabled, onClick: handleClick },
@@ -123,7 +124,7 @@ function SwitchSingle(_a) {
         //else
         return display; //cuz ofcourse its not optional, so no need to show optional label
     };
-    var genDisplayText = function () { return (react_1.default.createElement(styled_1.STYLED_UI_BODY_SM, { lineHeight: 1, semibold: isInactive ? false : true, disabled: disabled }, injectOptionalLabelIntoDisplayText({
+    var genDisplayText = function () { return (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { disabled: disabled }, injectOptionalLabelIntoDisplayText({
         display: option.display,
         label: props.label,
         isRequired: props.isRequired
@@ -135,9 +136,9 @@ function SwitchSingle(_a) {
     };
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({ hideOptionalLabel: !!props.label === false }, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        layoutStyle === "style1" ? (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle1, null,
+        layoutStyle === "style1" ? (react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
             genSwitch(),
-            genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle2, null,
+            genSwitchDisplay())) : (layoutStyle === "style2" && (react_1.default.createElement(styled_1.StyledSwitchWrapper, null,
             genSwitchDisplay(),
             genSwitch())))));
 }

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

@@ -1,5 +1,3 @@
-export const StyledSwitchWrapperStyle1: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledSwitchWrapperStyle2: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSwitchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledButtonSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSwitch: import("styled-components").StyledComponent<"button", any, {}, never>;
-export const STYLED_UI_BODY_SM: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;

package/dist/v2/components/Switches/styled.js

@@ -7,16 +7,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STYLED_UI_BODY_SM = exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapperStyle2 = exports.StyledSwitchWrapperStyle1 = void 0;
+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 getDynamicColors_1 = require("../../themes/utils/getDynamicColors");
 var Typo2_1 = require("../Typo2");
+var baseStyling_1 = require("../../themes/utils/baseStyling");
 var white = themes_1.colors.white, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey20 = themes_1.colors.grey20, grey40 = themes_1.colors.grey40, grey70 = themes_1.colors.grey70, grey80 = themes_1.colors.grey80;
-exports.StyledSwitchWrapperStyle1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: auto; \n  height: 18px; \n  left: 22px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 37px;\n  transition: all 0.5s ease;\n  \n"], ["\n  position: relative;\n  width: auto; \n  height: 18px; \n  left: 22px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 37px;\n  transition: all 0.5s ease;\n  \n"])));
-exports.StyledSwitchWrapperStyle2 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: auto; \n  height: 18px; \n  left: 22px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 37px;\n  transition: all 0.5s ease;\n  \n"], ["\n  position: relative;\n  width: auto; \n  height: 18px; \n  left: 22px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 37px;\n  transition: all 0.5s ease;\n  \n"])));
-exports.StyledButtonSlider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 28px;\n  height: 18px;\n  user-select: none;\n  position: relative;\n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n  \n  &:hover {\n    background-color: ", ";\n\n    & > .StyledSwitch {\n      border-color: ", ";\n    }\n  }\n\n  ", "\n"], ["\n  width: 28px;\n  height: 18px;\n  user-select: none;\n  position: relative;\n  border-radius: 1rem;\n  cursor: ", ";\n  background-color: ", ";\n  \n  &:hover {\n    background-color: ", ";\n\n    & > .StyledSwitch {\n      border-color: ", ";\n    }\n  }\n\n  ", "\n"])), function (_a) {
+exports.StyledSwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  ", "{\n    gap: 6px;\n  }\n  \n  \n"], ["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  ", "{\n    gap: 6px;\n  }\n  \n  \n"])), (0, mixins_1.mediaQuery)('md'));
+exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 3.6rem;\n  height: 2.4rem;\n  ", "{\n    width: 2.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4rem;\n\n  user-select: none;\n  position: relative;\n  cursor: ", ";\n  background-color: ", ";\n  overflow: hidden; //so that this hover below is within bounds\n  ", "\n\n  \n"], ["\n  width: 3.6rem;\n  height: 2.4rem;\n  ", "{\n    width: 2.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4rem;\n\n  user-select: none;\n  position: relative;\n  cursor: ", ";\n  background-color: ", ";\n  overflow: hidden; //so that this hover below is within bounds\n  ", "\n\n  \n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {
@@ -25,38 +25,32 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_3 ||
         return grey5;
     return inactive ? grey10 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
 }, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    return !disabled && (inactive ? grey40 : (0, getDynamicColors_1.getOnPrimary)(colors));
-}, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    return !disabled && (inactive ? grey40 : (0, getDynamicColors_1.getOnPrimary)(colors));
-}, (0, mixins_1.transition)('background-color'));
-exports.StyledSwitch = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 12px; /* Updated based on Figma */\n  height: 12px; /* Updated based on Figma */\n  background-color: ", "; \n  outline: none;\n  ", "; \n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; /* Updated based on Figma */\n  border-color: ", ";\n  position: absolute;\n  top: calc(50% - 6px); /* Updated for vertical centering */\n  left: ", "; \n  box-shadow: ", ";\n  transition: all 0.3s ease;\n\n  /**\n  this is the styled comps way of dealing with child hover.\n  But it is a buggy functionality. Probably an issue at\n  the styled-components package level. Should report on their github\n\n  Instead we use the oldschool class approach for child hover (line 40)\n  */\n  /* ", ":hover & {\n      border-color: ", ";  \n    } */\n"], ["\n  width: 12px; /* Updated based on Figma */\n  height: 12px; /* Updated based on Figma */\n  background-color: ", "; \n  outline: none;\n  ", "; \n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; /* Updated based on Figma */\n  border-color: ", ";\n  position: absolute;\n  top: calc(50% - 6px); /* Updated for vertical centering */\n  left: ", "; \n  box-shadow: ", ";\n  transition: all 0.3s ease;\n\n  /**\n  this is the styled comps way of dealing with child hover.\n  But it is a buggy functionality. Probably an issue at\n  the styled-components package level. Should report on their github\n\n  Instead we use the oldschool class approach for child hover (line 40)\n  */\n  /* ", ":hover & {\n      border-color: ", ";  \n    } */\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return !disabled && (0, baseStyling_1.applyBlackOverlayOnHover)();
+});
+var desktop_size = 1.2;
+var desktop_left_right_gap = 0.3;
+var mob_size = 1.4;
+var mob_left_right_gap = 0.5;
+exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  \n  width: ", "rem; \n  height: ", "rem;\n  top: calc(50% - ", "rem); /* Updated for vertical centering */\n  left: ", "; \n  ", "\n\n  ", "{\n    width: ", "rem; \n    height: ", "rem;\n    top: calc(50% - ", "rem); /* Updated for vertical centering */\n    left: ", ";   \n    ", "\n  }\n\n  z-index: 1; //so that this is above the blackoverlay hover above\n  background-color: ", "; \n  outline: none;\n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; \n  border-color: ", ";\n  position: absolute;\n  \n  box-shadow: ", ";\n  \n  \n  \n"], ["\n  \n  width: ", "rem; \n  height: ", "rem;\n  top: calc(50% - ", "rem); /* Updated for vertical centering */\n  left: ", "; \n  ", "\n\n  ", "{\n    width: ", "rem; \n    height: ", "rem;\n    top: calc(50% - ", "rem); /* Updated for vertical centering */\n    left: ", ";   \n    ", "\n  }\n\n  z-index: 1; //so that this is above the blackoverlay hover above\n  background-color: ", "; \n  outline: none;\n  border-radius: 50%; \n  cursor: ", "; \n  border: 1px solid; \n  border-color: ", ";\n  position: absolute;\n  \n  box-shadow: ", ";\n  \n  \n  \n"])), mob_size, mob_size, mob_size / 2, function (_a) {
+    var direction = _a.direction;
+    return direction === 'left' ? mob_left_right_gap + 'rem' : "calc(100% - ".concat(mob_size + mob_left_right_gap, "rem)");
+}, (0, mixins_1.transition)('left 0.15s ease-out'), (0, mixins_1.mediaQuery)('md'), desktop_size, desktop_size, desktop_size / 2, function (_a) {
+    var direction = _a.direction;
+    return direction === 'left' ? desktop_left_right_gap + 'rem' : "calc(100% - ".concat(desktop_size + desktop_left_right_gap, "rem)");
+}, (0, mixins_1.transition)('left 0.1s ease-out'), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "" : white);
-}, (0, mixins_1.transition)('border-color', 'left 0.2s'), function (_a) {
+}, function (_a) {
     var disabled = _a.disabled;
     return disabled ? 'not-allowed' : 'pointer';
 }, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    disabled ? grey20 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
-    if (inactive && !disabled)
-        return grey70;
-}, function (_a) {
-    var direction = _a.direction;
-    return direction === 'left' ? '3px' : 'calc(100% - 15px)';
+    var theme = _a.theme, inactive = _a.inactive, disabled = _a.disabled;
+    return disabled
+        ? grey20
+        : inactive ? grey70 : (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors);
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "" : "0px 4px 6px rgba(0, 0, 0, 0.25)");
-}, exports.StyledButtonSlider, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
-    return !disabled && (inactive ? grey40 : (0, getDynamicColors_1.getOnPrimary)(colors));
 });
-exports.STYLED_UI_BODY_SM = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"], ["\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? grey40 : grey80);
-}, function (_a) {
-    var lineHeight = _a.lineHeight;
-    return lineHeight;
-}, (0, mixins_1.transition)('color'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/themes/utils/baseStyling.d.ts

@@ -1,5 +1,7 @@
 interface HoverEffectOptions {
     borderRadius?: string;
 }
-export declare const apply10PercentBlackOnHover: (options?: HoverEffectOptions) => import("styled-components").FlattenSimpleInterpolation;
+export declare const applyBlackOverlayOnHover: (options?: HoverEffectOptions) => import("styled-components").FlattenSimpleInterpolation;
+export declare const blackOverlayEffect: import("styled-components").FlattenSimpleInterpolation;
+export declare const borderStyleOnHover: import("styled-components").FlattenSimpleInterpolation;
 export {};

package/dist/v2/themes/utils/baseStyling.js

@@ -4,14 +4,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.apply10PercentBlackOnHover = void 0;
+exports.borderStyleOnHover = exports.blackOverlayEffect = exports.applyBlackOverlayOnHover = void 0;
 var styled_components_1 = require("styled-components");
 var colors_1 = require("../colors");
 // Hover Effects
-var apply10PercentBlackOnHover = function (options) {
+var applyBlackOverlayOnHover = function (options) {
     if (options === void 0) { options = {}; }
     var _a = options.borderRadius, borderRadius = _a === void 0 ? 0 : _a; //some cases we want to trigger the
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &::before {\n      content: \"\";\n      background-color: transparent;\n      position: absolute;\n      border-radius: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n    &:hover::before {\n      background-color: ", ";\n    }\n  "], ["\n    &::before {\n      content: \"\";\n      background-color: transparent;\n      position: absolute;\n      border-radius: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n    &:hover::before {\n      background-color: ", ";\n    }\n  "])), borderRadius, colors_1.colors.grey10);
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &::before {\n      content: \"\";\n      background-color: transparent;\n      position: absolute;\n      border-radius: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n    &:hover::before {\n      ", "\n    }\n  "], ["\n    &::before {\n      content: \"\";\n      background-color: transparent;\n      position: absolute;\n      border-radius: ", ";\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n    }\n    &:hover::before {\n      ", "\n    }\n  "])), borderRadius, exports.blackOverlayEffect);
 };
-exports.apply10PercentBlackOnHover = apply10PercentBlackOnHover;
-var templateObject_1;
+exports.applyBlackOverlayOnHover = applyBlackOverlayOnHover;
+exports.blackOverlayEffect = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), colors_1.colors.grey10);
+exports.borderStyleOnHover = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 1px solid ", "\n"], ["\n border: 1px solid ", "\n"])), colors_1.colors.grey50);
+var templateObject_1, templateObject_2, templateObject_3;

package/package.json

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