oolib 2.4.0 → 2.5.2

package/dist/components/BlockLabel/index.js

@@ -6,17 +6,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../Typo");
+var InlineAlert_1 = require("../InlineAlert");
 var index_styled_1 = require("./index.styled");
 var colors_1 = require("../../themes/colors");
-var red = colors_1.colors.red, greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
+var red = colors_1.colors.red, greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80, 
+//InlineAlert colors below
+white = colors_1.colors.white, green = colors_1.colors.green, black = colors_1.colors.black, darkGrey = colors_1.colors.darkGrey, greyColor100 = colors_1.colors.greyColor100;
 var BlockLabel = function (props) {
-    var label = props.label, subLabel = props.subLabel, invert = props.invert, error = props.error, required = props.required, readOnly = props.readOnly, style = props.style;
-    var optional = readOnly ? false : !required;
-    return (react_1.default.createElement(index_styled_1.BlockLabelStyled, { style: style },
-        react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
-            react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label),
-            optional && react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)"),
-            error && react_1.default.createElement(Typo_1.SANS_3, { color: red }, error)),
-        subLabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, subLabel))));
+    /*
+      missing parts of this component compared to kPlabel:
+        - deployment._ShowOptionalTag configuration
+        - localization (translation)
+    */
+    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, error = props.error, //for storybook view purposes
+    isRequired = props.isRequired, readOnly = props.readOnly, style = props.style, errorMsgs = props.errorMsgs;
+    var shouldCompRender = (label ||
+        !readOnly && (sublabel || inputOnlyLabel || isRequired === false || (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
+    var optional = readOnly ? false : !isRequired;
+    var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return typeof er === 'object' ? er.text : er; }).join(', ');
+    //next 2 vars is for 'test link' usecase
+    var errLink = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? undefined : errorMsgs[0].link;
+    var errType = ((errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1) ? 'danger' : (errorMsgs[0].type || 'danger');
+    return (shouldCompRender &&
+        react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style },
+            react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
+                react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel),
+                optional && react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)"),
+                !readOnly && (error ?
+                    react_1.default.createElement(Typo_1.SANS_3, { color: red },
+                        " ",
+                        error,
+                        " ")
+                    : (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)),
+            !readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel))));
 };
 exports.BlockLabel = BlockLabel;

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

@@ -1 +1 @@
-export const BlockLabelStyled: any;
+export const StyledBlockLabel: any;

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

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockLabelStyled = void 0;
+exports.StyledBlockLabel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.BlockLabelStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ndisplay: flex;\nflex-direction: column;\ngap: 0rem;\n\n"], ["\ndisplay: flex;\nflex-direction: column;\ngap: 0rem;\n\n"])));
+exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ndisplay: flex;\nflex-direction: column;\ngap: 0rem;\n\n"], ["\ndisplay: flex;\nflex-direction: column;\ngap: 0rem;\n\n"])));
 var templateObject_1;

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

@@ -0,0 +1 @@
+export function InlineAlert(props: any): JSX.Element;

package/dist/components/InlineAlert/index.js

@@ -0,0 +1,33 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineAlert = void 0;
+var react_1 = __importDefault(require("react"));
+var colors_1 = require("../../themes/colors");
+var red = colors_1.colors.red, white = colors_1.colors.white, green = colors_1.colors.green, black = colors_1.colors.black, darkGrey = colors_1.colors.darkGrey, greyColor100 = colors_1.colors.greyColor100;
+var InlineAlert = function (props) {
+    var text = props.text, link = props.link, type = props.type, style = props.style, invert = props.invert;
+    var typeColor = {
+        success: green,
+        danger: red,
+        neutral: black,
+        neutralInactive: darkGrey,
+    };
+    return (react_1.default.createElement("h5", { style: __assign({ display: 'flex', alignItems: 'center', gap: '0.5rem' }, style) },
+        react_1.default.createElement("span", { className: 'SANS_2', style: { color: typeColor[type] } }, text),
+        link && (react_1.default.createElement("a", { style: { paddingLeft: '1rem', textDecoration: 'underline', color: invert ? white : greyColor100 }, href: link.url, target: "_blank" }, link.text))));
+};
+exports.InlineAlert = InlineAlert;

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

@@ -0,0 +1,6 @@
+export function TextInput(props: any): JSX.Element;
+export function PasswordInput(props: any): JSX.Element;
+export function EmailInput(props: any): JSX.Element;
+export function PhoneInput(props: any): JSX.Element;
+export function URLInput(props: any): JSX.Element;
+export function NumberInput(props: any): JSX.Element;

package/dist/components/TextInputs/index.js

@@ -0,0 +1,234 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = exports.URLInput = exports.PhoneInput = exports.EmailInput = exports.PasswordInput = exports.TextInput = void 0;
+var react_1 = __importStar(require("react"));
+var index_styled_1 = require("./index.styled");
+var icons_1 = require("../../icons");
+var Loader_1 = require("../Loader");
+var BlockLabel_1 = require("../BlockLabel");
+var Typo_1 = require("../Typo");
+var Buttons_1 = require("../Buttons");
+var uitls_1 = require("../uitls");
+var DisplayIcon = function (_a) {
+    var icon = _a.icon, onClick = _a.onClick, size = _a.size;
+    var IconComp = icons_1.phosphorIcons[icon];
+    return (react_1.default.createElement("div", { style: { cursor: onClick ? 'pointer' : '' }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
+};
+var TextInput = function (props) {
+    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, maxNumLimiter = props.maxNumLimiter, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, value = props.value, onChange = props.onChange, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn
+    // button,
+    // onClick,
+    // theme
+    ;
+    var _b = (0, react_1.useState)(''), inputStatus = _b[0], setInputStatus = _b[1];
+    var composition = icon && !eyeIcon ? 'icon+text' : 'textOnly';
+    var size = S ? 'S' : 'M';
+    var actionBtnEnabaled = !!value && (type !== 'url' ? true : inputStatus.type === 'success');
+    var handleValidateOnBlur = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var value, res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    value = e.target.value;
+                    if (!value)
+                        return [2 /*return*/];
+                    if (type === 'url')
+                        setInputStatus('loading');
+                    if (!validateOnBlur) return [3 /*break*/, 2];
+                    return [4 /*yield*/, validateOnBlur(value)];
+                case 1:
+                    res = _a.sent();
+                    setInputStatus(res);
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleOnChange = function (e) {
+        onChange(id, e.target.value);
+        if (inputStatus) {
+            if (type === 'url')
+                return setInputStatus('');
+            handleValidateOnBlur(e);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { marginBottom: '1rem' } },
+                react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, uitls_1.getBlockLabelProps)(props)))),
+            readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition },
+                    icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
+                    react_1.default.createElement(index_styled_1.InputStyled, { className: 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxNumLimiter, onBlur: handleValidateOnBlur, size: size, autoComplete: 'off' }),
+                    inputStatus === 'loading' && (react_1.default.createElement("div", { style: { padding: '1rem 0' } },
+                        react_1.default.createElement(Loader_1.Loader, { invert: invert, inline: true }))),
+                    actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick(), disabled: !actionBtnEnabaled, theme: props.theme, style: { marginRight: '-2rem' } }))),
+                (inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type },
+                    react_1.default.createElement(Typo_1.SANS_3, null, inputStatus.msg))))))));
+};
+exports.TextInput = TextInput;
+var PasswordInput = function (props) {
+    var _a = (0, react_1.useState)(false), showPassword = _a[0], setShowPassword = _a[1];
+    var icon = showPassword ? 'Eye' : 'EyeClosed';
+    var toggleShowPassword = function (e) {
+        e.preventDefault();
+        setShowPassword(function (prev) { return !prev; });
+    };
+    var handleValidation = function (value) {
+        if (value.length < 8) {
+            return { type: 'error', msg: 'Password cannot be less than 8 characters' };
+        }
+        if (!/[A-Z]/g.test(value)) {
+            return {
+                type: 'error',
+                msg: 'Password must contain a uppercase character',
+            };
+        }
+        if (!/[\d]/g.test(value)) {
+            return {
+                type: 'error',
+                msg: 'Password must contain a digit',
+            };
+        }
+        if (!/[a-z]/g.test(value)) {
+            return {
+                type: 'error',
+                msg: 'Password must contain a lowercase character',
+            };
+        }
+        if (!/\W|_/g.test(value)) {
+            return { type: 'error', msg: 'Password must contain a special character' };
+        }
+    };
+    return (react_1.default.createElement(exports.TextInput, __assign({ placeholder: 'Enter password...', type: showPassword ? 'text' : 'password', iconOnClick: toggleShowPassword, eyeIcon: true, icon: icon, validateOnBlur: handleValidation }, props)));
+};
+exports.PasswordInput = PasswordInput;
+var EmailInput = function (props) {
+    var handleValidation = function (value) {
+        var regEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return regEx.test(value)
+            ? ''
+            : { type: 'error', msg: 'Enter a valid email address' };
+    };
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "email", placeholder: 'Enter email...', validateOnBlur: handleValidation }, props)));
+};
+exports.EmailInput = EmailInput;
+var PhoneInput = function (props) {
+    var handleValidation = function (value) {
+        if (isNaN(value)) {
+            return { type: 'error', msg: 'Enter a valid phone number' };
+        }
+        if (value.length < 10) {
+            return { type: 'error', msg: 'Enter a valid phone number' };
+        }
+    };
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: 'Enter Phone...', validateOnBlur: handleValidation, maxNumLimiter: 10 }, props)));
+};
+exports.PhoneInput = PhoneInput;
+var URLInput = function (props) {
+    var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!/^https?:\/\//i.test(value)) {
+                        value = 'https://' + value;
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, fetch(value)];
+                case 2:
+                    response = _a.sent();
+                    if (response.status !== 200)
+                        throw new Error('');
+                    return [2 /*return*/, { type: 'success', msg: 'valid url' }];
+                case 3:
+                    error_1 = _a.sent();
+                    return [2 /*return*/, { type: 'error', msg: 'Enter a valid url...' }];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(exports.TextInput, __assign({}, props, { type: "url", validateOnBlur: handleValidation, placeholder: "Enter a valid url..." })));
+};
+exports.URLInput = URLInput;
+var NumberInput = function (props) {
+    var min = props.min, max = props.max;
+    var handleValidation = function (value) {
+        if (min && value < min) {
+            return { type: 'error', msg: "Enter value greater than ".concat(min) };
+        }
+        if (max && value > max) {
+            return { type: 'error', msg: "Enter value less than ".concat(max) };
+        }
+    };
+    return (react_1.default.createElement(exports.TextInput, __assign({}, props, { type: "number", validateOnBlur: handleValidation, placeholder: "Enter Number..." })));
+};
+exports.NumberInput = NumberInput;

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

@@ -0,0 +1,3 @@
+export const MsgContainer: any;
+export const InputContainerStyled: any;
+export const InputStyled: any;

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

@@ -0,0 +1,85 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputStyled = exports.InputContainerStyled = exports.MsgContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_2 = require("styled-components");
+var themes_1 = require("../../themes");
+var mixins_1 = require("../../themes/mixins");
+var greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor80 = themes_1.colors.greyColor80, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white, red = themes_1.colors.red, green = themes_1.colors.green, invertRed = themes_1.colors.invertRed, invertGreen = themes_1.colors.invertGreen;
+var SIZES = {
+    S: "3rem",
+    M: "4rem",
+};
+var getColorValue = function (status, invert) {
+    switch (status) {
+        case 'error':
+            return invert ? invertRed : red;
+        case 'success':
+            return invert ? invertGreen : green;
+    }
+};
+exports.MsgContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 0.5rem;\n  ", "\n"], ["\n  margin-top: 0.5rem;\n  ", "\n"])), function (_a) {
+    var status = _a.status, invert = _a.invert;
+    return status && (0, styled_components_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), getColorValue(status, invert));
+});
+exports.InputContainerStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  ", ";\n\n  position: relative;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n  ::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    box-shadow: inset 0px -2px 0px ", ";\n    ", "\n  }\n  :focus-within {\n    background-color: ", ";\n    ::after {\n      width: 100%;\n    }\n  }\n\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", "\n  ", ";\n\n  position: relative;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n  ::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    box-shadow: inset 0px -2px 0px ", ";\n    ", "\n  }\n  :focus-within {\n    background-color: ", ";\n    ::after {\n      width: 100%;\n    }\n  }\n\n  ", ";\n  ", ";\n  ", "\n"
+    // export const DisplayOnlyComp = styled.div`
+    // ${({ size }) =>
+    //     css`
+    //       height: ${SIZES[size]};
+    //     `}
+    // `
+])), function (_a) {
+    var composition = _a.composition;
+    switch (composition) {
+        case 'icon+text':
+            return (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          padding: 0 2rem 0 1.5rem;\n        "], ["\n          padding: 0 2rem 0 1.5rem;\n        "])));
+        default:
+            return (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          padding: 0 2rem;\n        "], ["\n          padding: 0 2rem;\n        "])));
+    }
+}, function (_a) {
+    var eyeIcon = _a.eyeIcon;
+    return eyeIcon && (0, styled_components_2.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      flex-direction: row-reverse;\n    "], ["\n      flex-direction: row-reverse;\n    "])));
+}, function (_a) {
+    var invert = _a.invert;
+    return (invert ? greyColor80 : greyColor5);
+}, function (_a) {
+    var invert = _a.invert;
+    return (invert ? white : greyColor100);
+}, (0, mixins_1.transition)('background-color'), function (_a) {
+    var invert = _a.invert;
+    return (invert ? greyColor70 : greyColor10);
+}, function (_a) {
+    var invert = _a.invert;
+    return (invert ? "#ADDBFF" : "#33A4FF");
+}, (0, mixins_1.transition)('width'), function (_a) {
+    var invert = _a.invert;
+    return (invert ? greyColor70 : greyColor10);
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_2.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background-color: ", ";\n      pointer-events: none;\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      pointer-events: none;\n      color: ", ";\n    "])), greyColor15, greyColor40);
+}, function (_a) {
+    var readOnly = _a.readOnly;
+    return readOnly && (0, styled_components_2.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+}, function (_a) {
+    var status = _a.status, invert = _a.invert;
+    return status && (0, styled_components_2.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n     ::after{\n         content: none;\n        }\n        box-shadow: inset 0px -2px 0px ", ";;\n     }\n    "], ["\n     ::after{\n         content: none;\n        }\n        box-shadow: inset 0px -2px 0px ", ";;\n     }\n    "])), getColorValue(status, invert));
+});
+// export const DisplayOnlyComp = styled.div`
+// ${({ size }) =>
+//     css`
+//       height: ${SIZES[size]};
+//     `}
+// `
+exports.InputStyled = styled_components_1.default.input(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\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  }\n"], ["\n  ", "\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  }\n"])), function (_a) {
+    var size = _a.size;
+    return (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), SIZES[size]);
+}, greyColor40);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/uitls.d.ts

@@ -0,0 +1 @@
+export function getBlockLabelProps(props: any): {};

package/dist/components/uitls.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBlockLabelProps = void 0;
+var blockLabelProps = [
+    'id',
+    'srNo',
+    'label',
+    'sublabel',
+    'inputOnlyLabel',
+    'readOnly',
+    'errorMsgs',
+    'error',
+    'isRequired',
+    'invert',
+];
+var getBlockLabelProps = function (props) {
+    var labelProps = {};
+    Object.keys(props).map(function (key) {
+        if (blockLabelProps.includes(key)) {
+            labelProps[key] = props[key];
+        }
+    });
+    return labelProps;
+};
+exports.getBlockLabelProps = getBlockLabelProps;

package/dist/globalStyles/index.js

@@ -8,5 +8,6 @@ exports.GlobalStyles = void 0;
 var styled_components_1 = require("styled-components");
 var themes_1 = require("../themes");
 require("../assets/fonts/style.css");
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nul, ol { padding-left: 2rem;}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"], ["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nul, ol { padding-left: 2rem;}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"])), themes_1.colors.greyColor100);
+var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
+exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nul, ol { padding-left: 2rem;}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"], ["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nul, ol { padding-left: 2rem;}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"])), greyColor100, greyColor15, greyColor40, greyColor80);
 var templateObject_1;

package/dist/icons/index.d.ts

@@ -70,6 +70,7 @@ export namespace phosphorIcons {
     export { LanguageIcon };
     export { ArrowRight };
     export { Sliders };
+    export { Faders };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -142,3 +143,4 @@ import IndexIcon from "./IndexIcon";
 import LanguageIcon from "./LangIcon";
 import { ArrowRight } from "phosphor-react";
 import { Sliders } from "phosphor-react";
+import { Faders } from "phosphor-react";

package/dist/icons/index.js

@@ -81,5 +81,6 @@ exports.phosphorIcons = {
     IndexIcon: IndexIcon_1.default,
     LanguageIcon: LangIcon_1.default,
     ArrowRight: phosphor_react_1.ArrowRight,
-    Sliders: phosphor_react_1.Sliders
+    Sliders: phosphor_react_1.Sliders,
+    Faders: phosphor_react_1.Faders
 };

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export * from "./components/Buttons";
 export * from "./components/Tags";
 export * from "./components/Breadcrumbs";
 export * from "./components/BlockLabel";
+export * from "./components/InlineAlert";
+export * from "./components/TextInputs";
 export { colors } from "./themes";
 export { phosphorIcons } from "./icons";
 export { mediaQuery, getBreakPoint, transition, transitionWithDuration, transitionWithDelay, multiTransition } from "./themes/mixins";

package/dist/index.js

@@ -23,6 +23,8 @@ __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);
 __exportStar(require("./components/BlockLabel"), exports);
+__exportStar(require("./components/InlineAlert"), exports);
+__exportStar(require("./components/TextInputs"), exports);
 var mixins_1 = require("./themes/mixins");
 Object.defineProperty(exports, "mediaQuery", { enumerable: true, get: function () { return mixins_1.mediaQuery; } });
 Object.defineProperty(exports, "getBreakPoint", { enumerable: true, get: function () { return mixins_1.getBreakPoint; } });

package/package.json

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