oolib 2.141.2 → 2.141.4

package/dist/components/IFrameInput/comps/Embed.js

@@ -34,7 +34,7 @@ var styled_components_1 = require("styled-components");
 var filters_1 = require("../utils/filters");
 var Embed = function (_a) {
     var isBlock = _a.isBlock, readOnly = _a.readOnly, value = _a.value, isValidURL = _a.isValidURL, onChange = _a.onChange;
-    var _b = (0, react_1.useState)(value ? (0, filters_1.extractHeight)(value) : "450px"), height = _b[0], setHeight = _b[1];
+    var _b = (0, react_1.useState)(value && (0, filters_1.extractHeight)(value)), height = _b[0], setHeight = _b[1];
     var theme = (0, styled_components_1.useTheme)();
     // const { user } = theme?.useGetQueryData('userData') || {};
     // const screenWidth = useScreenWidth()

package/dist/components/IFrameInput/utils/filters.js

@@ -26,6 +26,6 @@ function extractHeight(address) {
     var tempElement = document.createElement('div');
     tempElement.innerHTML = address;
     var heightValue = (_a = tempElement.querySelector('iframe')) === null || _a === void 0 ? void 0 : _a.getAttribute('height');
-    return heightValue;
+    return heightValue || "450px";
 }
 exports.extractHeight = extractHeight;

package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.d.ts

@@ -1,8 +1,9 @@
-export function RowActionsMenu({ value, rowIdx, onChange, id, setActionsActiveOnRow, rowActionsButtonWidth, conditionsToRender }: {
+export function RowActionsMenu({ value, rowIdx, onChange, id, disableAddRow, setActionsActiveOnRow, rowActionsButtonWidth, conditionsToRender }: {
     value: any;
     rowIdx: any;
     onChange: any;
     id: any;
+    disableAddRow: any;
     setActionsActiveOnRow: any;
     rowActionsButtonWidth: any;
     conditionsToRender?: boolean;

package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.js

@@ -26,6 +26,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -41,7 +50,7 @@ var styled_1 = require("../styled");
 var StyledCustomSelectCompWrapper = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  /* width: 1.5rem; */\n  height: 2.5rem;\n"], ["\n  ", "\n  /* width: 1.5rem; */\n  height: 2.5rem;\n"])), styled_1.commonRowColActionMenuStyles);
 // const CustomSelectComp =
 var RowActionsMenu = function (_a) {
-    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, setActionsActiveOnRow = _a.setActionsActiveOnRow, rowActionsButtonWidth = _a.rowActionsButtonWidth, _b = _a.conditionsToRender, conditionsToRender = _b === void 0 ? true : _b;
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, disableAddRow = _a.disableAddRow, setActionsActiveOnRow = _a.setActionsActiveOnRow, rowActionsButtonWidth = _a.rowActionsButtonWidth, _b = _a.conditionsToRender, conditionsToRender = _b === void 0 ? true : _b;
     var _c = (0, react_1.useState)(false), actionMenuIsOpen = _c[0], setActionMenuIsOpen = _c[1];
     var isFirstMount = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(function () {
@@ -67,7 +76,7 @@ var RowActionsMenu = function (_a) {
                 var active = _a.active, onClick = _a.onClick;
                 return (react_1.default.createElement(StyledCustomSelectCompWrapper, { style: { width: rowActionsButtonWidth + "px" }, onClick: onClick, active: active },
                     react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: "DotsThreeVertical", size: 16 })));
-            }, actions: [
+            }, actions: __spreadArray(__spreadArray([], (!disableAddRow ? [
                 {
                     display: UIContent_1.UIContent.SimpleTable.delete,
                     onClick: function () { return (0, handleRowActions_1.handleDeleteRow)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id }); },
@@ -88,13 +97,14 @@ var RowActionsMenu = function (_a) {
                         return (0, handleRowActions_1.handleInsertRowAfter)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
                     },
                 },
+            ] : []), true), [
                 {
                     display: UIContent_1.UIContent.SimpleTable.clearContent,
                     onClick: function () {
                         return (0, handleRowActions_1.handleClearRowContent)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
                     },
                 },
-            ] })));
+            ], false) })));
 };
 exports.RowActionsMenu = RowActionsMenu;
 var templateObject_1;

package/dist/components/SimpleTable/index.js

@@ -219,7 +219,8 @@ function SimpleTable(_a) {
                     enableColActions &&
                     rowIdx === 0 &&
                     hoveredRowAndCol.colIdx === cellIdx }),
-            !config.disableRowActionsMenu && react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, { value: value, rowIdx: rowIdx, onChange: onChange, id: id, setActionsActiveOnRow: setActionsActiveOnRow, rowActionsButtonWidth: rowActionsButtonWidth, conditionsToRender: !readOnly &&
+            !config.disableRowActionsMenu && react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, { value: value, rowIdx: rowIdx, onChange: onChange, id: id, setActionsActiveOnRow: setActionsActiveOnRow, rowActionsButtonWidth: rowActionsButtonWidth, disableAddRow: config === null || config === void 0 ? void 0 : config.disableAddRow,
+                conditionsToRender: !readOnly &&
                     enableRowActions &&
                     cellIdx === 0 &&
                     rowIdx !== undefined && //cuz for fixed col headers, rowIdx is undefined

package/dist/icons/index.d.ts

@@ -114,6 +114,7 @@ export namespace icons {
     export { ThumbsDown };
     export { CopySimple };
     export { PaperPlaneRight };
+    export { Warning };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -291,6 +292,7 @@ import { Funnel } from 'phosphor-react';
 import { ThumbsDown } from 'phosphor-react';
 import { CopySimple } from 'phosphor-react';
 import { PaperPlaneRight } from 'phosphor-react';
+import { Warning } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -119,6 +119,7 @@ exports.icons = {
     ThumbsDown: phosphor_react_1.ThumbsDown,
     CopySimple: phosphor_react_1.CopySimple,
     PaperPlaneRight: phosphor_react_1.PaperPlaneRight,
+    Warning: phosphor_react_1.Warning,
     //custom
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

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

@@ -0,0 +1,112 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace blockError {
+            let name: string;
+        }
+        namespace icon {
+            let name_1: string;
+            export { name_1 as name };
+            export { availableIcons as options };
+            export namespace control {
+                let type: string;
+            }
+            export let defaultValue: any;
+        }
+        namespace iconAfter {
+            let name_2: string;
+            export { name_2 as name };
+        }
+        namespace clearButton {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace validateOnlyOnBlur {
+            let name_4: string;
+            export { name_4 as name };
+        }
+        namespace actionButton {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        namespace actionButtonText {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        namespace clearButtonText {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        namespace readOnly {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        namespace isRequired {
+            let name_9: string;
+            export { name_9 as name };
+        }
+        namespace disabled {
+            let name_10: string;
+            export { name_10 as name };
+        }
+        namespace invert {
+            let name_11: string;
+            export { name_11 as name };
+        }
+    }
+    namespace args {
+        let icon_1: any;
+        export { icon_1 as icon };
+        let iconAfter_1: boolean;
+        export { iconAfter_1 as iconAfter };
+        let blockError_1: string;
+        export { blockError_1 as blockError };
+        let validateOnlyOnBlur_1: boolean;
+        export { validateOnlyOnBlur_1 as validateOnlyOnBlur };
+        let actionButton_1: boolean;
+        export { actionButton_1 as actionButton };
+        let actionButtonText_1: string;
+        export { actionButtonText_1 as actionButtonText };
+        let clearButton_1: boolean;
+        export { clearButton_1 as clearButton };
+        let clearButtonText_1: string;
+        export { clearButtonText_1 as clearButtonText };
+        let readOnly_1: boolean;
+        export { readOnly_1 as readOnly };
+        let isRequired_1: boolean;
+        export { isRequired_1 as isRequired };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+}
+export default _default;
+export function Text(args: any): React.JSX.Element;
+export function Email_(args: any): React.JSX.Element;
+export function Password_(args: any): React.JSX.Element;
+export function Phone_(args: any): React.JSX.Element;
+export function URL_(args: any): React.JSX.Element;
+export function Number_(args: any): React.JSX.Element;
+export namespace Number_ {
+    export namespace args_1 {
+        let min: number;
+        let max: number;
+    }
+    export { args_1 as args };
+    export namespace argTypes_1 {
+        export namespace min_1 {
+            let name_12: string;
+            export { name_12 as name };
+        }
+        export { min_1 as min };
+        export namespace max_1 {
+            let name_13: string;
+            export { name_13 as name };
+        }
+        export { max_1 as max };
+    }
+    export { argTypes_1 as argTypes };
+}
+declare const availableIcons: string[];
+import React from 'react';

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

@@ -0,0 +1,170 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Number_ = exports.URL_ = exports.Phone_ = exports.Password_ = exports.Email_ = exports.Text = void 0;
+var react_1 = __importStar(require("react"));
+var TextInputs_1 = require("../../../v2/components/TextInputs");
+var icons_1 = require("../../../icons");
+var themes_1 = require("../../../themes");
+var availableIcons = Object.keys(icons_1.icons).sort();
+exports.default = {
+    title: 'Oolib V 2.0/components/TextInputs',
+    argTypes: {
+        blockError: {
+            name: "Block Error"
+        },
+        icon: {
+            name: "Icon",
+            options: availableIcons,
+            control: { type: 'select' },
+            defaultValue: undefined
+        },
+        iconAfter: {
+            name: "Icon After",
+        },
+        clearButton: {
+            name: "Clear Button"
+        },
+        validateOnlyOnBlur: {
+            name: "Validate Only On Blur"
+        },
+        actionButton: {
+            name: "Primary Action"
+        },
+        actionButtonText: {
+            name: "Primary Action Text"
+        },
+        clearButtonText: {
+            name: "Clear Button Text"
+        },
+        readOnly: {
+            name: "Read Only",
+        },
+        isRequired: {
+            name: "Is Required"
+        },
+        disabled: {
+            name: "Disabled"
+        },
+        invert: {
+            name: "Invert"
+        }
+    },
+    args: {
+        icon: undefined,
+        iconAfter: false,
+        blockError: '',
+        validateOnlyOnBlur: false,
+        actionButton: false,
+        actionButtonText: 'Action',
+        clearButton: false,
+        clearButtonText: '',
+        readOnly: false,
+        isRequired: false,
+        disabled: false,
+        invert: false,
+    },
+};
+var GenInputStories = function (_a) {
+    var args = _a.args, Comp = _a.Comp, searchUrl = _a.searchUrl;
+    var _b = (0, react_1.useState)(''), value = _b[0], setValue = _b[1];
+    var handleOnChange = function (key, value) {
+        setValue(value);
+    };
+    args[args['size']] = true;
+    var newProps = __assign({}, args);
+    // if (Comp === Password) {
+    //   newProps = { ...args }
+    //   delete newProps['icon']
+    // } else {
+    //   newProps = { ...args, icon: args.icon ? 'PencilSimple' : null }
+    // }
+    newProps['theme'] = {
+        colors: {
+            primaryColor40: '#addbff',
+            primaryColor100: '#33a4ff',
+            primaryColor10: '#EBF6FF',
+            primaryColorText: '#0071CC',
+        },
+    };
+    var actionBtn;
+    if (args.actionButton) {
+        actionBtn = { text: args.actionButtonText, invert: args.invert, onClick: function () { return console.log('clicked'); }, icon: args.actionButtonIcon };
+    }
+    var clearBtn;
+    if (args.clearButton) {
+        clearBtn = { text: args.clearButtonText, invert: args.invert, onClick: function () { return console.log('clicked'); }, icon: args.clearButtonIcon };
+    }
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: args.invert ? themes_1.colors.greyColor100 : '',
+            padding: '20px',
+        } },
+        react_1.default.createElement(Comp, __assign({}, newProps, { onChange: handleOnChange, value: value, actionBtn: actionBtn, clearBtn: clearBtn }))));
+};
+var Text = function (args) { return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput })); };
+exports.Text = Text;
+var Email_ = function (args) {
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'email input', sublabel: 'some sub label' }), Comp: TextInputs_1.EmailInput }));
+};
+exports.Email_ = Email_;
+var Password_ = function (args) {
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'password input', sublabel: 'some sub label' }), Comp: TextInputs_1.PasswordInput }));
+};
+exports.Password_ = Password_;
+var Phone_ = function (args) {
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'phone input', sublabel: 'some sub label' }), Comp: TextInputs_1.PhoneInput }));
+};
+exports.Phone_ = Phone_;
+var URL_ = function (args) {
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'url input', sublabel: 'some sub label' }), Comp: TextInputs_1.URLInput }));
+};
+exports.URL_ = URL_;
+var Number_ = function (args) {
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'number input', sublabel: 'some sub label' }), Comp: TextInputs_1.NumberInput }));
+};
+exports.Number_ = Number_;
+exports.Number_.args = {
+    min: 0,
+    max: 100,
+};
+exports.Number_.argTypes = {
+    min: {
+        name: "Min"
+    },
+    max: {
+        name: "Max"
+    }
+};

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

@@ -1,19 +1,21 @@
-import { FunctionComponent } from 'react';
-import { icons } from '../../../icons';
+import { FunctionComponent, MouseEvent } from "react";
+import { icons } from "../../../icons";
 export interface DisplayIconProps {
     icon: keyof typeof icons;
     size: number;
     color: string;
-    weight?: 'bold' | 'regular';
+    weight?: "bold" | "regular";
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 /**
- * @component Renders an icon component with customizable size, color, and weight.
+ * @component Renders an icon component with customizable size, color, weight, and click handler.
  *
  * - The props object containing the following properties:
  * @prop {keyof typeof icons} icon: The name of the icon to be rendered.
  * @prop {number} size: The size of the icon in pixels.
  * @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.
  * @return {ReactElement} The rendered icon component.
  */
 declare const DisplayIcon: FunctionComponent<DisplayIconProps>;

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

@@ -6,19 +6,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisplayIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../icons");
+var themes_1 = require("../../../v2/themes");
 /**
- * @component Renders an icon component with customizable size, color, and weight.
+ * @component Renders an icon component with customizable size, color, weight, and click handler.
  *
  * - The props object containing the following properties:
  * @prop {keyof typeof icons} icon: The name of the icon to be rendered.
  * @prop {number} size: The size of the icon in pixels.
  * @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.
  * @return {ReactElement} The rendered icon component.
  */
 var DisplayIcon = function (_a) {
-    var icon = _a.icon, size = _a.size, color = _a.color, _b = _a.weight, weight = _b === void 0 ? 'bold' : _b;
+    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 IconComp = icons_1.icons[icon];
-    return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: weight }));
+    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 })));
 };
 exports.DisplayIcon = DisplayIcon;

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

@@ -0,0 +1,52 @@
+export function TextInput({ id, invert, disabled, icon, type, placeholder, value, onChange, onFocus, onBlur, readOnly, iconOnClick, iconAfter, handleValidation, validateOnMount, actionBtn, clearBtn, className, maxLength, maxNumLimiter: DEPRECATED_maxNumLimiter, forceFocus, validateOnlyOnBlur, validationStatus: _validationStatus, displayValidationMsg, content, passValidationErrorToFormValidation, plugin, }: {
+    id: any;
+    invert: any;
+    disabled: any;
+    icon: any;
+    type: any;
+    placeholder?: string;
+    value?: string;
+    onChange: any;
+    onFocus: any;
+    onBlur: any;
+    readOnly: any;
+    iconOnClick: any;
+    iconAfter: any;
+    handleValidation: any;
+    validateOnMount?: boolean;
+    actionBtn: any;
+    clearBtn: any;
+    className: any;
+    maxLength: any;
+    maxNumLimiter: any;
+    forceFocus: any;
+    validateOnlyOnBlur?: boolean;
+    validationStatus: any;
+    displayValidationMsg?: boolean;
+    content: any;
+    passValidationErrorToFormValidation: any;
+    plugin: any;
+}, ...args: any[]): React.JSX.Element;
+export function PasswordInput({ ...props }: {
+    [x: string]: any;
+}): React.JSX.Element;
+export function EmailInput({ passValidationErrorToFormValidation, ...props }: {
+    [x: string]: any;
+    passValidationErrorToFormValidation: any;
+}): React.JSX.Element;
+export function PhoneInput({ passValidationErrorToFormValidation, ...props }: {
+    [x: string]: any;
+    passValidationErrorToFormValidation: any;
+}): React.JSX.Element;
+export function URLInput({ routesAreValidInputs, validationPlugin, passValidationErrorToFormValidation, content, ...props }: {
+    [x: string]: any;
+    routesAreValidInputs?: boolean;
+    validationPlugin: any;
+    passValidationErrorToFormValidation: any;
+    content: any;
+}): React.JSX.Element;
+export function NumberInput({ passValidationErrorToFormValidation, ...props }: {
+    [x: string]: any;
+    passValidationErrorToFormValidation: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,353 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 (g && (g = 0, op[0] && (_ = 0)), _) 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 };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 styled_components_1 = require("styled-components");
+var BlockLabel_1 = require("../../../components/BlockLabel");
+var LoadersAndProgress_1 = require("../../../components/LoadersAndProgress");
+var OKELink_1 = require("../../../components/OKELink");
+var icons_1 = require("../../../icons");
+var _EXPORTS_1 = require("../../../utils/_EXPORTS");
+var utilsOolib_1 = require("../../../utilsOolib");
+var themes_1 = require("../../themes");
+var Buttons_1 = require("../Buttons");
+var Typo2_1 = require("../Typo2");
+var index_styled_1 = require("./index.styled");
+var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
+function TextInput(_a) {
+    var _this = this;
+    var id = _a.id, invert = _a.invert, disabled = _a.disabled, icon = _a.icon, type = _a.type, _b = _a.placeholder, placeholder = _b === void 0 ? "Enter Text..." : _b, _c = _a.value, value = _c === void 0 ? "" : _c, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, iconOnClick = _a.iconOnClick, iconAfter = _a.iconAfter, handleValidation = _a.handleValidation, _d = _a.validateOnMount, validateOnMount = _d === void 0 ? true : _d, // i think it makes sense to always run validation the minute the comp mounts, but we will see if this has sideeffects
+    actionBtn = _a.actionBtn, clearBtn = _a.clearBtn, className = _a.className, maxLength = _a.maxLength, DEPRECATED_maxNumLimiter = _a.maxNumLimiter, forceFocus = _a.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    _e = _a.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    validateOnlyOnBlur = _e === void 0 ? false : _e, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
+    _validationStatus = _a.validationStatus, _f = _a.displayValidationMsg, displayValidationMsg = _f === void 0 ? true : _f, content = _a.content, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, plugin = _a.plugin;
+    var props = arguments[0];
+    var theme = (0, styled_components_1.useTheme)();
+    var _g = (0, react_1.useState)(_validationStatus), validationStatus = _g[0], setValidationStatus = _g[1];
+    (0, react_1.useEffect)(function () {
+        setValidationStatus(_validationStatus);
+    }, [_validationStatus]);
+    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 handleValidate = function (e, onBlur) { return __awaiter(_this, void 0, void 0, function () {
+        var value, res, validationPlugin, pluginResponse;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onBlur && onBlur(e);
+                    value = e.target.value;
+                    if (!value)
+                        return [2 /*return*/];
+                    if (type === "url")
+                        setValidationStatus("loading");
+                    if (!handleValidation) return [3 /*break*/, 2];
+                    return [4 /*yield*/, handleValidation(value)];
+                case 1:
+                    res = _a.sent();
+                    setValidationStatus(res);
+                    _a.label = 2;
+                case 2:
+                    validationPlugin = (plugin === null || plugin === void 0 ? void 0 : plugin.validation) &&
+                        theme.pluginConfigs &&
+                        theme.pluginConfigs.tplBlockPlugins[plugin.validation];
+                    if (!validationPlugin) return [3 /*break*/, 4];
+                    setValidationStatus("loading");
+                    return [4 /*yield*/, validationPlugin({
+                            value: value,
+                            content: content,
+                            passValidationErrorToFormValidation: passValidationErrorToFormValidation,
+                        })];
+                case 3:
+                    pluginResponse = _a.sent();
+                    //if plugin responds with undefined, it means it found no error. hence lets pass the 'success info' to passValidationErrorToFormValidation
+                    if (!pluginResponse)
+                        passValidationErrorToFormValidation("success");
+                    setValidationStatus(pluginResponse);
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    (0, react_1.useEffect)(function () {
+        if (validateOnMount) {
+            handleValidate({ target: { value: value } });
+        }
+    }, [validateOnMount]);
+    var handleOnChange = function (e) {
+        onChange(id, e.target.value);
+        if (!e.target.value)
+            setValidationStatus("");
+        if (!validateOnlyOnBlur) {
+            handleValidate(e);
+        }
+        else {
+            /**
+             * basically if an error has already been set then, run validation in realtime on change
+             */
+            if (validationStatus) {
+                if (type === "url")
+                    return setValidationStatus("");
+                handleValidate(e);
+            }
+        }
+    };
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        forceFocus && inputRef.current && inputRef.current.focus();
+    }, [forceFocus]);
+    var localize = (0, utilsOolib_1.useLocale)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: className },
+            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
+            readOnly ? (react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); } },
+                    icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: 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, onFocus: onFocus, autoComplete: "off" }),
+                    validationStatus === "loading" && (react_1.default.createElement("div", null,
+                        react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
+                    clearBtn && clearBtnEnabled && (react_1.default.createElement(index_styled_1.ClearButtonStyled, { onClick: function () { return onChange(id, ""); } },
+                        react_1.default.createElement(Typo2_1.UI_CAPTION, null, localize((clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "clear")))),
+                    actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: "-2rem" } }))),
+                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: "Warning", weight: "fill", color: themes_1.colors.red })),
+                    react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,
+                        validationStatus.msg,
+                        validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: "1rem" }, to: validationStatus.link.to }, validationStatus.link.text))))))))));
+}
+exports.TextInput = TextInput;
+//passValidationErrorToFormValidation is not being handled by PasswordInput, cuz i dont think we will need it here..
+var PasswordInput = function (_a) {
+    var props = __rest(_a, []);
+    var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
+    var icon = showPassword ? "Eye" : "EyeClosed";
+    var toggleShowPassword = function (e) {
+        if (props.disabled)
+            return;
+        e.preventDefault();
+        setShowPassword(function (prev) { return !prev; });
+    };
+    return (react_1.default.createElement(TextInput, __assign({ placeholder: "Enter password...", type: showPassword ? "text" : "password", iconOnClick: toggleShowPassword, iconAfter: true, icon: icon }, props)));
+};
+exports.PasswordInput = PasswordInput;
+var EmailInput = function (_a) {
+    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
+    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,}))$/;
+        var errorObj = regEx.test(value)
+            ? ""
+            : { type: "error", msg: "Enter a valid email address" };
+        if (passValidationErrorToFormValidation) {
+            passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) || "success");
+        }
+        return errorObj;
+    };
+    return (react_1.default.createElement(TextInput, __assign({ type: "email", placeholder: "Enter email...", handleValidation: handleValidation }, props)));
+};
+exports.EmailInput = EmailInput;
+var PhoneInput = function (_a) {
+    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
+    var handleValidation = function (value) {
+        var errorObj;
+        if (isNaN(value)) {
+            errorObj = { type: "error", msg: "Enter a valid phone number" };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj.type);
+            return errorObj;
+        }
+        if (value.length < 9) {
+            errorObj = { type: "error", msg: "Enter a valid phone number" };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj.type);
+            return errorObj;
+        }
+        //else
+        if (passValidationErrorToFormValidation)
+            passValidationErrorToFormValidation("success");
+    };
+    return (react_1.default.createElement(TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 11 }, props)));
+};
+exports.PhoneInput = PhoneInput;
+var URLInput = function (_a) {
+    var _b = _a.routesAreValidInputs, routesAreValidInputs = _b === void 0 ? false : _b, //if we want react route declarations to be considered as 'valid' then set this to true
+    validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content"]);
+    var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var pluginResponse, successObj, response, successObj, err_1, successObj, errorObj;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!validationPlugin) return [3 /*break*/, 2];
+                    return [4 /*yield*/, validationPlugin({
+                            value: value,
+                            content: content,
+                            passValidationErrorToFormValidation: passValidationErrorToFormValidation,
+                        })];
+                case 1:
+                    pluginResponse = _a.sent();
+                    if (pluginResponse)
+                        return [2 /*return*/, pluginResponse];
+                    _a.label = 2;
+                case 2:
+                    //else
+                    //if routesAreValidInputs, then first validate for a route
+                    if (routesAreValidInputs && value.substring(0, 1) === "/") {
+                        successObj = { type: "success", msg: "valid route" };
+                        if (passValidationErrorToFormValidation)
+                            passValidationErrorToFormValidation(successObj.type);
+                        return [2 /*return*/, successObj];
+                    }
+                    //else validate for a url
+                    if (!/^https?:\/\//i.test(value)) {
+                        value = "https://" + value;
+                    }
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 5, , 6]);
+                    return [4 /*yield*/, fetch(value)];
+                case 4:
+                    response = _a.sent();
+                    if (response.status !== 200)
+                        throw new Error("");
+                    successObj = { type: "success", msg: "valid url" };
+                    if (passValidationErrorToFormValidation)
+                        passValidationErrorToFormValidation(successObj.type);
+                    return [2 /*return*/, successObj];
+                case 5:
+                    err_1 = _a.sent();
+                    if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(value)) {
+                        successObj = { type: "success", msg: "valid url" };
+                        if (passValidationErrorToFormValidation)
+                            passValidationErrorToFormValidation(successObj.type);
+                        return [2 /*return*/, successObj];
+                    }
+                    errorObj = { type: "error", msg: "Enter a valid url..." };
+                    if (passValidationErrorToFormValidation)
+                        passValidationErrorToFormValidation(errorObj.type);
+                    return [2 /*return*/, errorObj];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(TextInput, __assign({ type: "url", handleValidation: handleValidation, placeholder: "Enter a valid url..." }, props)));
+};
+exports.URLInput = URLInput;
+var NumberInput = function (_a) {
+    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
+    var min = props.min, max = props.max;
+    var handleValidation = function (value) {
+        var errorObj;
+        if (isNaN(value)) {
+            errorObj = { type: "error", msg: "Enter a number" };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj.type);
+            return errorObj;
+        }
+        if (min && value < min) {
+            errorObj = {
+                type: "error",
+                msg: "Enter value greater than or equal to ".concat(min),
+            };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj.type);
+            return errorObj;
+        }
+        if (max && value > max) {
+            errorObj = {
+                type: "error",
+                msg: "Enter value less than or equal to ".concat(max),
+            };
+            if (passValidationErrorToFormValidation)
+                passValidationErrorToFormValidation(errorObj.type);
+            return errorObj;
+        }
+        //else
+        if (passValidationErrorToFormValidation)
+            passValidationErrorToFormValidation("success");
+    };
+    return (react_1.default.createElement(TextInput
+    // type="number"
+    , __assign({ 
+        // type="number"
+        handleValidation: handleValidation, placeholder: "Enter Number..." }, props)));
+};
+exports.NumberInput = NumberInput;

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

@@ -0,0 +1,4 @@
+export const MsgContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const InputContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const InputStyled: import("styled-components").StyledComponent<"input", any, {}, never>;
+export const ClearButtonStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -0,0 +1,63 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButtonStyled = exports.InputStyled = exports.InputContainerStyled = exports.MsgContainerStyled = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var mixins_1 = require("../../../themes/mixins");
+var themes_1 = require("../../themes");
+var globalStyles_1 = require("../../themes/globalStyles");
+var getColorValue = function (status) {
+    return status === "error" ? themes_1.colors.red : status === "success" && themes_1.colors.green;
+};
+exports.MsgContainerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 2px;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  ", "\n"], ["\n  margin-top: 2px;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  ", "\n"])), function (_a) {
+    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;\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;\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) {
+    var disabled = _a.disabled;
+    return !disabled && globalStyles_1.globalInputElemHover_v2;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return !disabled && globalStyles_1.globalInputElemFocused_v2;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      border-color: ", ";\n      color: ", ";\n    "], ["\n      border-color: ", ";\n      color: ", ";\n    "])), themes_1.colors.grey10, themes_1.colors.grey40);
+}, function (_a) {
+    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"])), globalStyles_1.globalInputHeight, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? themes_1.colors.grey40 : themes_1.colors.grey80);
+});
+exports.ClearButtonStyled = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border-radius: 14px;\n  background-color: ", ";\n  cursor: pointer;\n  border: 0;\n  padding: 4px 10px;\n"], ["\n  border-radius: 14px;\n  background-color: ", ";\n  cursor: pointer;\n  border: 0;\n  padding: 4px 10px;\n"])), themes_1.colors.grey10);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/v2/themes/colors.d.ts

@@ -13,6 +13,9 @@ export declare const colors: {
     grey80: string;
     grey40: string;
     grey10: string;
+    white: string;
+    green: string;
+    red: string;
 };
 export interface Colors2Type {
     primary: string;
@@ -29,4 +32,7 @@ export interface Colors2Type {
     grey80: string;
     grey40: string;
     grey10: string;
+    white: string;
+    green: string;
+    red: string;
 }

package/dist/v2/themes/colors.js

@@ -15,6 +15,9 @@ var surfaceContainerLow = "#F1F4F7";
 var grey80 = '#333333';
 var grey40 = "#999999";
 var grey10 = "#E7E7E7";
+var white = "#ffffff";
+var green = "#159300";
+var red = "#C41717";
 exports.colors = {
     primary: primary,
     secondary: secondary,
@@ -29,5 +32,8 @@ exports.colors = {
     surfaceContainerLow: surfaceContainerLow,
     grey80: grey80,
     grey40: grey40,
-    grey10: grey10
+    grey10: grey10,
+    white: white,
+    green: green,
+    red: red
 };

package/dist/v2/themes/globalStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const globalInputHeight = "36px";
+export declare const globalInputElemPadding_v2: import("styled-components").FlattenSimpleInterpolation;
+export declare const globalInputElemHover_v2: import("styled-components").FlattenSimpleInterpolation;
+export declare const globalInputElemFocused_v2: import("styled-components").FlattenSimpleInterpolation;

package/dist/v2/themes/globalStyles.js

@@ -0,0 +1,14 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 = exports.globalInputHeight = void 0;
+var styled_components_1 = require("styled-components");
+var colors_1 = require("./colors");
+exports.globalInputHeight = '36px';
+exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 10px;\n"], ["\n  padding: 0 10px;\n"])));
+exports.globalInputElemHover_v2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    &::before{\n        border: 1.5px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"], ["\n  &:hover {\n    &::before{\n        border: 1.5px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"])), colors_1.colors.grey80);
+exports.globalInputElemFocused_v2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n&:focus-within {\n    &::before{\n        border: 1.5px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"], ["\n&:focus-within {\n    &::before{\n        border: 1.5px solid ", ";\n        box-shadow: 0 4px 10px #00000012;\n    }\n  }\n"])), colors_1.colors.grey80);
+var templateObject_1, templateObject_2, templateObject_3;

package/package.json

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