oolib 2.3.1 → 2.5.1

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/Breadcrumbs/index.js

@@ -27,7 +27,7 @@ var icons_1 = require("../../icons");
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var ArrowLeft = icons_1.phosphorIcons.ArrowLeft;
-var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50;
+var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100, greyColor50 = themes_1.colors.greyColor50;
 // links array will be taken from params in the future (react router)
 var Breadcrumbs = function (_a) {
     var links = _a.links, invert = _a.invert;
@@ -50,6 +50,7 @@ var Breadcrumbs = function (_a) {
         return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer }, linksDisplayed_1.map(function (link, ind) {
             return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: ind == linksDisplayed_1.length - 1 ? {
                     pointerEvents: 'none',
+                    color: greyColor50,
                     width: !beConcise ? 'auto' : (function () {
                         var children = measuredContainer.current.children;
                         var childrenCount = children.length;
@@ -63,7 +64,7 @@ var Breadcrumbs = function (_a) {
     }
     return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
         react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: links[links.length - 2].to, invert: invert },
-            react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor50 }),
+            react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor100 }),
             react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "Back"))));
 };
 exports.Breadcrumbs = Breadcrumbs;

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

@@ -14,12 +14,12 @@ var themes_1 = require("../../themes");
 var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50, greyColor100 = themes_1.colors.greyColor100;
 var StyledBreadcrumbs = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  gap: 15px;\n  overflow: hidden;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  gap: 15px;\n  overflow: hidden;\n"])));
 exports.StyledBreadcrumbs = StyledBreadcrumbs;
-var StyledLinkCrumb = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child {color: ", "}\n  &:last-child::after {content: none;}\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child {color: ", "}\n  &:last-child::after {content: none;}\n"])), function (_a) {
+var StyledLinkCrumb = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child::after {content: none;}\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child::after {content: none;}\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? white : greyColor100;
 }, function (_a) {
     var invert = _a.invert;
     return invert ? white : greyColor100;
-}, greyColor50);
+});
 exports.StyledLinkCrumb = StyledLinkCrumb;
 var templateObject_1, templateObject_2;

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/LangIcon.d.ts

@@ -0,0 +1,5 @@
+export default LanguageIcon;
+declare function LanguageIcon({ color, size }: {
+    color?: string;
+    size?: number;
+}): JSX.Element;

package/dist/icons/LangIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var themes_1 = require("../themes");
+var LanguageIcon = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? themes_1.colors.greyColor100 : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M7.96924 10.0556C9.06013 10.0556 9.94447 9.25962 9.94447 8.27778C9.94447 7.29594 9.06013 6.5 7.96924 6.5C7.32302 6.5 6.74928 6.77931 6.38892 7.21111", stroke: color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M7.82804 10.0557C8.9969 10.0557 9.94444 10.8516 9.94444 11.8334C9.94444 12.8153 8.9969 13.6112 7.82804 13.6112C6.64286 13.6112 5.78219 12.426 5.5 11.8334", stroke: color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M8.16666 9.05566C7.61438 9.05566 7.16666 9.50338 7.16666 10.0557C7.16666 10.6079 7.61438 11.0557 8.16666 11.0557V9.05566ZM11.7222 11.0557C12.2745 11.0557 12.7222 10.6079 12.7222 10.0557C12.7222 9.50338 12.2745 9.05566 11.7222 9.05566V11.0557ZM8.16666 11.0557H11.7222V9.05566H8.16666V11.0557Z", fill: color }),
+        react_1.default.createElement("path", { d: "M11.5 5.5C10.9477 5.5 10.5 5.94772 10.5 6.5C10.5 7.05228 10.9477 7.5 11.5 7.5V5.5ZM14.1667 7.5C14.719 7.5 15.1667 7.05228 15.1667 6.5C15.1667 5.94772 14.719 5.5 14.1667 5.5V7.5ZM11.5 7.5H14.1667V5.5H11.5V7.5Z", fill: color }),
+        react_1.default.createElement("path", { d: "M14 6.5C14 5.94772 13.5523 5.5 13 5.5C12.4477 5.5 12 5.94772 12 6.5L14 6.5ZM12 13.6111C12 14.1634 12.4477 14.6111 13 14.6111C13.5523 14.6111 14 14.1634 14 13.6111L12 13.6111ZM12 6.5L12 13.6111L14 13.6111L14 6.5L12 6.5Z", fill: color }),
+        react_1.default.createElement("circle", { cx: "10", cy: "10", r: "9", stroke: color, "stroke-width": "2" })));
+};
+exports.default = LanguageIcon;

package/dist/icons/index.d.ts

@@ -67,6 +67,7 @@ export namespace phosphorIcons {
     export { LetterH };
     export { LetterP };
     export { IndexIcon };
+    export { LanguageIcon };
     export { ArrowRight };
     export { Sliders };
 }
@@ -138,5 +139,6 @@ import OkeGoogleIcon from "./OkeGoogleIcon";
 import LetterH from "./LetterH";
 import LetterP from "./LetterP";
 import IndexIcon from "./IndexIcon";
+import LanguageIcon from "./LangIcon";
 import { ArrowRight } from "phosphor-react";
 import { Sliders } from "phosphor-react";

package/dist/icons/index.js

@@ -9,6 +9,7 @@ var OkeGoogleIcon_1 = __importDefault(require("./OkeGoogleIcon"));
 var LetterH_1 = __importDefault(require("./LetterH"));
 var LetterP_1 = __importDefault(require("./LetterP"));
 var IndexIcon_1 = __importDefault(require("./IndexIcon"));
+var LangIcon_1 = __importDefault(require("./LangIcon"));
 exports.phosphorIcons = {
     PencilSimple: phosphor_react_1.PencilSimple,
     PencilLine: phosphor_react_1.PencilLine,
@@ -78,6 +79,7 @@ exports.phosphorIcons = {
     LetterH: LetterH_1.default,
     LetterP: LetterP_1.default,
     IndexIcon: IndexIcon_1.default,
+    LanguageIcon: LangIcon_1.default,
     ArrowRight: phosphor_react_1.ArrowRight,
     Sliders: phosphor_react_1.Sliders
 };

package/dist/index.d.ts

@@ -5,5 +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

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
+exports.multiTransition = exports.transitionWithDelay = exports.transitionWithDuration = exports.transition = exports.getBreakPoint = exports.mediaQuery = exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
 __exportStar(require("./components/Typo"), exports);
@@ -23,3 +23,12 @@ __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; } });
+Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return mixins_1.transition; } });
+Object.defineProperty(exports, "transitionWithDuration", { enumerable: true, get: function () { return mixins_1.transitionWithDuration; } });
+Object.defineProperty(exports, "transitionWithDelay", { enumerable: true, get: function () { return mixins_1.transitionWithDelay; } });
+Object.defineProperty(exports, "multiTransition", { enumerable: true, get: function () { return mixins_1.multiTransition; } });

package/package.json

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