oolib 2.176.1 → 2.176.2

package/dist/index.d.ts

@@ -76,11 +76,12 @@ 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 * 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.IFrameInput = 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.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.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 = 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; } });
@@ -73,10 +73,11 @@ __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
 __exportStar(require("./components/Switches"), exports);
 __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 +238,10 @@ 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; } });
 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/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/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.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",