oolib 2.177.1 → 2.177.2

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

@@ -8,6 +8,8 @@ export namespace RadioList {
         let size: string;
         let listingStyle: string;
         let optionsLimit: number;
+        let label: string;
+        let sublabel: string;
         let option1: string;
         let option2: string;
         let option3: string;
@@ -170,7 +172,8 @@ export namespace RadioInput {
         export { disabled_2 as disabled };
         let invert_2: boolean;
         export { invert_2 as invert };
-        export let label: string;
+        let label_1: string;
+        export { label_1 as label };
     }
     export { args_1 as args };
     export namespace argTypes_1 {

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

@@ -63,7 +63,7 @@ var RadioList = function (args) {
         }
     }, [args.markOptions, args.corrrectOption]);
     return (React.createElement("div", { style: { backgroundColor: args.invert && greyColor100, padding: "4rem" } },
-        React.createElement(RadioAndCheckbox_1.RadioList, { options: options, readOnly: args.readOnly, value: chosenOption, onChange: function (id, val) { return setChosenOption(val); }, rightWrongResult: args.markOptions, label: args.label, listType: args.listingStyle, injectOtherOption: args.addOther, disabled: args.disabled, invert: args.invert, S: args.size == "S", commonIsCorrectDesc: args.feedbackMessage, optionsLimit: args.optionsLimit, saveValueAsString: args.saveValueAsString }),
+        React.createElement(RadioAndCheckbox_1.RadioList, { options: options, readOnly: args.readOnly, value: chosenOption, onChange: function (id, val) { return setChosenOption(val); }, rightWrongResult: args.markOptions, label: args.label, sublabel: args.sublabel, listType: args.listingStyle, injectOtherOption: args.addOther, disabled: args.disabled, invert: args.invert, S: args.size == "S", commonIsCorrectDesc: args.feedbackMessage, optionsLimit: args.optionsLimit, saveValueAsString: args.saveValueAsString }),
         React.createElement("br", null),
         " ",
         React.createElement(Divider_1.Divider, null),
@@ -80,7 +80,8 @@ exports.RadioList.args = {
     size: "Medium",
     listingStyle: "horizontal",
     optionsLimit: ops.length,
-    // label: '',
+    label: 'Please choose an option, this is a test.',
+    sublabel: 'Some supplimentary text to better explain the label',
     option1: ops[0].display,
     option2: ops[1].display,
     option3: ops[2].display,

package/dist/utils/comps/DisplayIcon/index.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, MouseEvent } from "react";
+import { FunctionComponent, MouseEvent, CSSProperties } from "react";
 import { icons } from "../../../icons";
 export interface DisplayIconProps {
     icon: keyof typeof icons;
@@ -6,6 +6,7 @@ export interface DisplayIconProps {
     color: string;
     weight?: "bold" | "regular";
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    style?: CSSProperties;
 }
 /**
  * @component Renders an icon component with customizable size, color, weight, and click handler.
@@ -16,6 +17,7 @@ export interface DisplayIconProps {
  * @prop {string} color: The color of the icon.
  * @prop {'bold' | 'regular'} weight: The weight of the icon font. Defaults to "bold".
  * @prop {function} onClick: Optional click handler for the icon.
+ * @prop {CSSProperties} style: Optional additional styles to apply to the container div.
  * @return {ReactElement} The rendered icon component.
  */
 declare const DisplayIcon: FunctionComponent<DisplayIconProps>;

package/dist/utils/comps/DisplayIcon/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -16,11 +27,12 @@ var themes_1 = require("../../../v2/themes");
  * @prop {string} color: The color of the icon.
  * @prop {'bold' | 'regular'} weight: The weight of the icon font. Defaults to "bold".
  * @prop {function} onClick: Optional click handler for the icon.
+ * @prop {CSSProperties} style: Optional additional styles to apply to the container div.
  * @return {ReactElement} The rendered icon component.
  */
 var DisplayIcon = function (_a) {
-    var icon = _a.icon, size = _a.size, _b = _a.color, color = _b === void 0 ? themes_1.colors.grey80 : _b, _c = _a.weight, weight = _c === void 0 ? "bold" : _c, onClick = _a.onClick;
+    var icon = _a.icon, size = _a.size, _b = _a.color, color = _b === void 0 ? themes_1.colors.grey80 : _b, _c = _a.weight, weight = _c === void 0 ? "bold" : _c, onClick = _a.onClick, _d = _a.style, style = _d === void 0 ? {} : _d;
     var IconComp = icons_1.icons[icon];
-    return (react_1.default.createElement("div", { style: { cursor: onClick ? "pointer" : "default", display: "flex" }, onMouseDown: onClick || undefined }, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: weight })));
+    return (react_1.default.createElement("div", { style: __assign({ cursor: onClick ? "pointer" : "default", display: "flex" }, style), onMouseDown: onClick || undefined }, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: weight })));
 };
 exports.DisplayIcon = DisplayIcon;

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -47,7 +58,8 @@ var Typo2_1 = require("../Typo2");
 var colors_1 = require("../../themes/colors");
 var grey40 = colors_1.colors.grey40, grey60 = colors_1.colors.grey60;
 var BlockLabel = function (props) {
-    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip, disabled = props.disabled, S = props.S;
+    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, _a = props.style, style = _a === void 0 ? {} : _a, marginBottom = props.marginBottom, // some comps like radiolist and checkboxlist need a bit more marginbottom, so they control it themselves
+    errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip, disabled = props.disabled, S = props.S;
     var shouldCompRender = label ||
         (!readOnly &&
             (sublabel ||
@@ -61,15 +73,15 @@ var BlockLabel = function (props) {
     var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
         ? "danger"
         : errorMsgs[0].type || "danger";
-    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className, id: "tempBlocklabelOverride", sublabel: sublabel, S: S },
+    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: __assign(__assign({}, style), { marginBottom: (marginBottom || (sublabel ? '0.6rem' : '0.4rem')) }), className: className, id: "tempBlocklabelOverride", sublabel: sublabel, S: S },
         react_1.default.createElement("div", { style: { display: "flex", gap: "0.4rem" } },
-            (label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { color: disabled ? colors_1.colors.grey40 : colors_1.colors.grey80, semibold: true }, label || inputOnlyLabel)),
+            (label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { color: disabled ? colors_1.colors.grey40 : colors_1.colors.grey80, semibold: true }, label || inputOnlyLabel)),
             !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
-            optional && !hideOptionalLabel && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { color: disabled ? colors_1.colors.grey20 : colors_1.colors.grey40 }, "(optional)")),
+            optional && !hideOptionalLabel && (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { color: disabled ? colors_1.colors.grey20 : colors_1.colors.grey40 }, "(optional)")),
             !readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, btnlabel: hintsBtnLabel, subtitle: hintsSubtitle, hints: hints, disabled: disabled })) : null,
             infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || "right", invert: invert, debug: infoTooltip.debug, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: "infoIcon" }))),
         !readOnly &&
             sublabel &&
-            (0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo2_1.UI_CAPTION, { key: i, color: disabled ? colors_1.colors.grey40 : grey60 }, subL)); }))));
+            (0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { key: i, color: disabled ? colors_1.colors.grey40 : grey60 }, subL)); }))));
 };
 exports.BlockLabel = BlockLabel;

package/dist/v2/components/BlockLabel/index.styled.js

@@ -9,11 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledInfoTooltipbutton = exports.StyledBlockLabel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  margin-bottom: ", ";\n\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  margin-bottom: ", ";\n\n  position: relative;\n"])), function (_a) {
-    var sublabel = _a.sublabel, S = _a.S;
-    return S
-        ? (sublabel ? '0.4rem' : '0.2rem')
-        : (sublabel ? '0.6rem' : '0.4rem');
-});
+exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  position: relative;\n"])));
 exports.StyledInfoTooltipbutton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  outline: none;\n"], ["\n  border: none;\n  background: none;\n  outline: none;\n"])));
 var templateObject_1, templateObject_2;

package/dist/v2/components/Hints/comps/HintsButton.js

@@ -18,7 +18,7 @@ var HintsButton = function (_a) {
     var id = _a.id, btnLabel = _a.btnLabel, onClick = _a.onClick;
     return (react_1.default.createElement(StyledButton, { onClick: function () { return onClick(id); } },
         react_1.default.createElement(phosphor_react_1.Lightbulb, { size: 13, weight: "bold", style: { marginBottom: "0.2rem" } }),
-        react_1.default.createElement(Typo2_1.UI_BODY_SM, null, btnLabel)));
+        react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, null, btnLabel)));
 };
 exports.HintsButton = HintsButton;
 var StyledButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border-radius: 0.4rem;\n\n  display: flex;\n  line-height: 100%;\n  padding: 0.1rem 0.3rem 0rem 0.3rem;\n  align-items: center;\n\n  gap: 0.2rem;\n  color: ", ";\n\n\n  &:hover {\n    background-color: ", ";\n    /* color: ", "; */\n  }\n\n  &:active {\n    background-color: ", ";\n    color: white;\n  }\n\n"], ["\n  border: none;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border-radius: 0.4rem;\n\n  display: flex;\n  line-height: 100%;\n  padding: 0.1rem 0.3rem 0rem 0.3rem;\n  align-items: center;\n\n  gap: 0.2rem;\n  color: ", ";\n\n\n  &:hover {\n    background-color: ", ";\n    /* color: ", "; */\n  }\n\n  &:active {\n    background-color: ", ";\n    color: white;\n  }\n\n"])), hint, hintHover, white, hint);

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

@@ -44,8 +44,8 @@ var InlineAlert = function (_a) {
         neutralInactive: { normal: grey70 },
     };
     return (react_1.default.createElement("h5", { style: __assign({ display: 'flex', alignItems: 'center' }, style) },
-        react_1.default.createElement("span", { className: 'UI_BODY_SM', style: { color: typeColor[type][invert ? 'invert' : 'normal'], marginBottom: '0.1rem' } }, localize(text)),
-        link && (react_1.default.createElement("a", { className: 'UI_BODY_SM', style: {
+        react_1.default.createElement("span", { className: 'UI_BODY_SM_DF', style: { color: typeColor[type][invert ? 'invert' : 'normal'], marginBottom: '0.1rem' } }, localize(text)),
+        link && (react_1.default.createElement("a", { className: 'UI_BODY_SM_DF', style: {
                 // paddingLeft: '1rem',
                 textDecoration: 'underline',
                 color: invert ? white : black,

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

@@ -98,8 +98,9 @@ function CheckboxList(_a) {
         onClick: handleCheckboxClick,
     };
     var OptionsContainer = optionsContainers[inputStyle];
+    var blocklabelProps = (0, _EXPORTS_1.getBlockLabelProps)(props);
     return (react_1.default.createElement("div", { className: className, id: id },
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, blocklabelProps, { marginBottom: (blocklabelProps === null || blocklabelProps === void 0 ? void 0 : blocklabelProps.sublabel) ? '1.4rem' : '1.2rem' })),
         readOnly ? (react_1.default.createElement(styled_2.StyledDisplayTagsContainer, null, value === null || value === void 0 ? void 0 : value.map(function (selOp) { return react_1.default.createElement(Tags_1.TagDisplay, { key: selOp.value, invert: invert, display: selOp.display_desc || selOp.display }); }))) : (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(OptionsContainer, { style: style, listType: listType, S: S }, typicalOptions === null || typicalOptions === void 0 ? void 0 :
                 typicalOptions.map(function (option, idx) { return idx < optionsLimit && (react_1.default.createElement(CheckboxInput_1.CheckboxInput, __assign({}, InputCommonProps, { option: option, key: option.value }))); }),

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

@@ -7,12 +7,12 @@ exports.RadioInput = exports.RadioButton = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../../../../../themes");
 var icons_1 = require("../../../../../../../icons");
-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 __1 = require("../../../../../../..");
+var invertGreen = themes_1.colors.invertGreen, red = themes_1.colors.red, 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, className = _a.className;
@@ -46,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(Typo2_1.UI_BODY_SM_DF, { 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 ? __1.colors2.grey40 : __1.colors2.grey80, invert: invert }, option.display)));
 };
 exports.RadioInput = RadioInput;

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

@@ -82,8 +82,9 @@ function RadioList(_a) {
         rightWrongResult: rightWrongResult,
         onClick: handleInputClick,
     };
+    var blocklabelProps = (0, _EXPORTS_1.getBlockLabelProps)(props);
     return (react_1.default.createElement("div", { id: id },
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, blocklabelProps, { marginBottom: (blocklabelProps === null || blocklabelProps === void 0 ? void 0 : blocklabelProps.sublabel) ? '1.4rem' : '1.2rem' })),
         readOnly ? ((value === null || value === void 0 ? void 0 : value.display) && react_1.default.createElement(Tags_1.TagDisplay, { display: value.display_desc || value.display, invert: invert }) //prioritzing display_desc since display of 'other' option is === other
         ) : (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(styled_1.StyledOptionsContainer, { listType: listType, S: S }, typicalOptions === null || typicalOptions === void 0 ? void 0 :

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

@@ -105,6 +105,7 @@ var PhoneInput_1 = require("./derivedComps/PhoneInput");
 Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
 var icons_1 = require("../../../icons");
 var Buttons_1 = require("../Buttons");
+var mixins_1 = require("../../../themes/mixins");
 var BadgeVetted = icons_1.icons.BadgeVetted;
 function TextInput(_a) {
     var _this = this;
@@ -119,9 +120,12 @@ function TextInput(_a) {
     (0, react_1.useEffect)(function () {
         setValidationStatus(_validationStatus);
     }, [_validationStatus]);
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     var actionBtnEnabaled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
     var clearBtnEnabled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
-    var size = S ? "S" : "M";
+    var size = S
+        ? (screenWidth >= (0, mixins_1.getBreakPoint)('md') ? "S" : "M") //wat this basically means is, a defined 'small' text input will dynamically become 'medium' when on mobile, which is in sync with the pattern of the rest of our components
+        : "M";
     var handleValidate = function (e, onBlur) { return __awaiter(_this, void 0, void 0, function () {
         var value, res, validationPlugin, pluginResponse;
         return __generator(this, function (_a) {
@@ -193,14 +197,14 @@ function TextInput(_a) {
         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,
             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: S ? 12 : 16, onClick: !disabled ? iconOnClick || null : undefined })),
-                react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: "UI_BODY_SM", 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" }),
-                validationStatus === "loading" && (react_1.default.createElement("div", null,
+                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" }),
+                validationStatus === "loading" && (react_1.default.createElement("div", { style: { zIndex: 1 } /** so that it stays ahead of the before element inside InputContainerStyled */ },
                     react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
-                (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
+                (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", { style: { zIndex: 1 } /** so that it stays ahead of the before element inside InputContainerStyled */ },
                     react_1.default.createElement(BadgeVetted, { size: 26 }))),
-                (clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } })),
-                actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } }))),
+                (clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem', zIndex: 1 } /** so that it stays ahead of the before element inside InputContainerStyled */ })),
+                actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem', zIndex: 1 } /** so that it stays ahead of the before element inside InputContainerStyled */ }))),
             displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.error })),
                 react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,

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

@@ -48,7 +48,7 @@ exports.MsgContainerStyled = styled_components_1.default.div(templateObject_2 ||
     var status = _a.status;
     return status && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getColorValue(status));
 });
-exports.InputContainerStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", ";\n\n  position: relative;\n  &::before {\n    content: \"\";\n    background-color: ", ";\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n  }\n\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n\n  ", "\n  ", "\n\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", ";\n\n  position: relative;\n  &::before {\n    content: \"\";\n    background-color: ", ";\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n  }\n\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n\n  ", "\n  ", "\n\n  ", ";\n  ", ";\n"])), globalStyles_1.globalInputElemPadding_v2, function (_a) {
+exports.InputContainerStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", ";\n\n  position: relative;\n  &::before {\n    content: \"\";\n    background-color: ", ";\n    position: absolute;\n    z-index: 0;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n  }\n\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n\n  ", "\n  ", "\n\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", ";\n\n  position: relative;\n  &::before {\n    content: \"\";\n    background-color: ", ";\n    position: absolute;\n    z-index: 0;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 6px;\n  }\n\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 6px; // gap between icon and text\n\n  ", "\n  ", "\n\n  ", ";\n  ", ";\n"])), globalStyles_1.globalInputElemPadding_v2, function (_a) {
     var iconAfter = _a.iconAfter;
     return iconAfter && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex-direction: row-reverse;\n      justify-content: space-between;\n    "], ["\n      flex-direction: row-reverse;\n      justify-content: space-between;\n    "])));
 }, themes_1.colors.white, themes_1.colors.grey10, themes_1.colors.grey80, function (_a) {
@@ -64,7 +64,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_6
     var readOnly = _a.readOnly;
     return readOnly && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
-exports.InputStyled = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"], ["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"])), function (_a) {
+exports.InputStyled = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  z-index: 1; //so that it stays ahead of the before element behind it\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"], ["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  z-index: 1; //so that it stays ahead of the before element behind it\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size === "S" ? "36px" : "46px";
 }, function (_a) {

package/package.json

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