oolib 2.182.0 → 2.183.0

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

@@ -8,12 +8,10 @@ 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, grey40 = themes_1.colors.grey40;
+var white = themes_1.colors.white, grey40 = themes_1.colors.grey40;
 /**
  * value and onChange are being passed as props so
  * that it can be generated dynamically via our
@@ -24,7 +22,6 @@ 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
@@ -37,7 +34,7 @@ var CheckboxButton = function (_a) {
             // 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 : (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors), size: screenWidth >= (0, mixins_1.getBreakPoint)('md') ? 14 : 16, style: {
+        react_1.default.createElement(CheckIcon, { weight: "bold", color: disabled ? grey40 : white, size: screenWidth >= (0, mixins_1.getBreakPoint)('md') ? 14 : 16, style: {
                 flexShrink: 0,
             } })))));
 };

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

@@ -41,10 +41,9 @@ exports.StyledCheckbox = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../../themes/mixins");
-var getDynamicColors_1 = require("../../../../../../themes/utils/getDynamicColors");
 var baseStyling_1 = require("../../../../../../themes/utils/baseStyling");
-var grey20 = themes_1.colors.grey20, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey50 = themes_1.colors.grey50;
-exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n"], ["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
+var grey20 = themes_1.colors.grey20, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey80 = themes_1.colors.grey80;
+exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  color: white;\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n"], ["\n  \n  width: 2.4rem;\n  height: 2.4rem;\n  ", "{\n    width: 1.8rem;\n    height: 1.8rem;\n  }\n  border-radius: 4px;\n  border: ", ";\n  background-color: ", ";\n  color: white;\n  cursor: ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n"])), (0, mixins_1.mediaQuery)('md'), function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     if (isSelected && disabled) {
         return "1px solid ".concat(grey20);
@@ -56,7 +55,7 @@ exports.StyledCheckbox = styled_components_1.default.button(templateObject_3 ||
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme;
     if (isSelected) {
-        return disabled ? grey5 : (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
+        return disabled ? grey5 : grey80;
     }
     return disabled ? grey5 : "white";
 }, function (_a) {

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

@@ -14,7 +14,7 @@ var utils_1 = require("../../../../utils");
 var CheckboxButton_1 = require("../CheckboxButton");
 var TextLoader_1 = require("../../../../../../../components/LoadersAndProgress/TextLoader");
 var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
-var red = themes_1.colors.red, grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, onSecondary = themes_1.colors.onSecondary, invertGreen = themes_1.colors.invertGreen, green = themes_1.colors.green, invertRed = themes_1.colors.invertRed;
+var red = themes_1.colors.red, grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, onSecondary = themes_1.colors.onSecondary, invertRed = themes_1.colors.invertRed;
 var CheckboxInput = function (_a) {
     var option = _a.option, onClick = _a.onClick, S = _a.S, inputStyle = _a.inputStyle, _b = _a.value, value = _b === void 0 ? [] : _b, invert = _a.invert, disabled = _a.disabled, rightWrongResult = _a.rightWrongResult, _c = _a.className, className = _c === void 0 ? '' : _c;
     var isSelected = !!value.find(function (selOp) { return selOp.value === option.value; });
@@ -35,7 +35,7 @@ var CheckboxInput = function (_a) {
     return option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : inputStyle === "tagSelect" ? (react_1.default.createElement(Tags_1.TagSelect, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: "flex-start" } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: className, onClick: function () {
             return !rightWrongResult && !disabled && onClick && onClick(isSelected, option);
         } },
-        react_1.default.createElement("div", { style: { flexShrink: 0 } }, rightWrongResult
+        react_1.default.createElement("div", { style: { alignSelf: "flex-start", background: "yellow" } }, rightWrongResult
             ? ["markCorrect", "revealCorrect"].includes(markingCommand)
                 ? genCheckSquare()
                 : markingCommand === "markWrong"

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

@@ -48,7 +48,6 @@ exports.CheckboxList = CheckboxList;
 var react_1 = __importStar(require("react"));
 var BlockLabel_1 = require("../../../BlockLabel");
 var TextInputs_1 = require("../../../TextInputs");
-var Buttons_1 = require("../../../Buttons");
 var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
 var utils_1 = require("../../utils");
 var styled_1 = require("../../styled");

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

@@ -38,14 +38,14 @@ var RadioInput = function (_a) {
             flexShrink: 0
         } })); };
     return (react_1.default.createElement(styled_1.StyledOption, { disabled: disabled, rightWrongResult: rightWrongResult, isSelected: isSelected, invert: invert, S: S, onClick: function () { return !rightWrongResult && !disabled && onClick(option); } },
-        rightWrongResult
+        react_1.default.createElement("div", null, rightWrongResult
             ? ["markCorrect", "revealCorrect"].includes(markingCommand)
                 ? genCheckCircle()
                 : markingCommand === 'markWrong'
                     ? genXCircle()
                     : genRadioButton({ disabled: true }) //else rightWrongResult has come in, but this doesnt have to be marked right or wrong
             : genRadioButton() // rightWrongResult as not come in. so gen normal radio button
-    ,
+        ),
         react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { bold: rightWrongResult && isSelected, color: disabled ? __1.colors2.grey40 : __1.colors2.grey80, invert: invert }, option.display)));
 };
 exports.RadioInput = RadioInput;

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

@@ -42,26 +42,25 @@ var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../../../themes");
 var mixins_1 = require("../../../../../../../themes/mixins");
 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;
-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 red = themes_1.colors.red, white = themes_1.colors.white, grey2 = themes_1.colors.grey2, grey5 = themes_1.colors.grey5, grey10 = themes_1.colors.grey10, grey20 = themes_1.colors.grey20, grey80 = themes_1.colors.grey80;
+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  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  background: ", ";\n  border: ", ";\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-color: ", ";\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  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  background: ", ";\n  border: ", ";\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-color: ", ";\n    border: ", ";\n    box-shadow: ", ";\n  }\n"])), (0, mixins_1.mediaQuery)('md'), 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, theme = _a.theme;
     if (isSelected) {
-        return disabled ? grey5 : (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
+        return disabled ? grey5 : grey80;
     }
     return disabled ? grey5 : "none";
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
     if (isSelected) {
-        return "none";
+        return disabled ? "1px solid ".concat(grey20) : "white";
     }
     return disabled ? "1px solid ".concat(grey10) : "1px solid ".concat(grey20);
-}, 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 &&
@@ -71,13 +70,13 @@ exports.StyledRadioButton = styled_components_1.default.button(templateObject_3
     return isSelected ? "0px 4px 6px rgba(0, 0, 0, 0.25)" : "none";
 }, (0, mixins_1.mediaQuery)('md'), function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;
-    return isSelected ? (disabled ? grey10 : white) : "transparent";
+    return isSelected ? white : disabled ? "none" : "none";
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled, theme = _a.theme;
     return isSelected
         ? disabled
             ? "1px solid ".concat(grey20)
-            : "1px solid ".concat((0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors))
+            : "1px solid ".concat(grey80)
         : "none";
 }, function (_a) {
     var isSelected = _a.isSelected, disabled = _a.disabled;

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

@@ -1,5 +1,5 @@
 export const StyledOptionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledOption: import("styled-components").StyledComponent<"button", any, {}, never>;
+export const StyledOption: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledOtherOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledOtherTextInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledCorrectMessage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;

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

@@ -59,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 .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) {
+exports.StyledOption = styled_components_1.default.div(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) {

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

@@ -11,8 +11,6 @@ exports.StyledSwitch = exports.StyledButtonSlider = exports.StyledSwitchWrapper
 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.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'));
@@ -23,7 +21,7 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 ||
     var disabled = _a.disabled, inactive = _a.inactive, colors = _a.theme.colors;
     if (disabled)
         return grey5;
-    return inactive ? grey10 : (0, getDynamicColors_1.getSecondaryContainer)(colors);
+    return inactive ? grey10 : grey80;
 }, function (_a) {
     var disabled = _a.disabled;
     return !disabled && (0, baseStyling_1.applyBlackOverlayOnHover)();
@@ -48,7 +46,7 @@ exports.StyledSwitch = styled_components_1.default.button(templateObject_3 || (t
     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);
+        : inactive ? grey70 : grey80;
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "" : "0px 4px 6px rgba(0, 0, 0, 0.25)");

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

@@ -195,7 +195,9 @@ function TextInput(_a) {
     var localize = (0, utilsOolib_1.useLocale)();
     return (react_1.default.createElement("div", { className: className },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-        readOnly ? (react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
+        readOnly ? (type === "url"
+            ? react_1.default.createElement(OKELink_1.OKELink, { text: value, to: value })
+            : react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); }, size: size },
                 icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: screenWidth >= (0, mixins_1.getBreakPoint)('md') ? 16 : 18, onClick: !disabled ? iconOnClick || null : undefined, style: { zIndex: 1 } /** so that it stays ahead of the before element inside InputContainerStyled */ })),
                 react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: "UI_BODY_SM_DF", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, size: size, onFocus: onFocus, autoComplete: "off" }),

package/package.json

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