oolib 2.157.2 → 2.158.0

package/dist/components/Dropdowns/comps/SelectDropdown/index.js

@@ -49,6 +49,6 @@ var SelectDropdown = function (_a) {
                     // }
                     className: "".concat(selectClassName || "", " ").concat(!value && placeholder) }, dropdownSelectText.display)))),
         react_1.default.createElement(Caret_1.Caret, { showOptions: showOptions, invert: invert, disabled: disabled }))); };
-    return genCustomSelectComp ? genCustomSelectComp() : genSelectComp();
+    return genCustomSelectComp ? genCustomSelectComp({ value: value }) : genSelectComp();
 };
 exports.SelectDropdown = SelectDropdown;

package/dist/index.d.ts

@@ -15,14 +15,13 @@ export * from "./components/RadioAndCheckbox";
 export * from "./components/Margins";
 export * from "./components/Paddings";
 export * from "./utils/_EXPORTS";
-export * from "./v2/components/Buttons";
 export * from "./v2/components/Typo2";
 export * from "./v2/components/BlockLabel";
 export * from "./v2/components/cards/CardContent";
 export * from "./v2/components/cards/ListContent";
 export * from "./v2/components/Tags";
 export * from "./v2/components/ImagePlaceholder";
-export * from "./v2/components/TextInputs";
+export * from "./v2/components/Buttons";
 export { colors } from "./themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";
@@ -72,6 +71,7 @@ export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfir
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";
 export { default as TableCellResizerPlugin } from "./components/Lexical/Plugins/TableCellResizer";
+export { TabBarStyle1 as TabBarV2 } from "./v2/components/TabBar";
 export { colors as colors2 } from "./v2/themes";
 export { HintsProvider } from "./v2/components/Hints/contextApi";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -18,7 +18,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
+exports.HintsProvider = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
+var TabBar_1 = require("./v2/components/TabBar");
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -172,16 +173,20 @@ Object.defineProperty(exports, "styledOKELinkCSS", { enumerable: true, get: func
 var TableCellResizer_1 = require("./components/Lexical/Plugins/TableCellResizer");
 Object.defineProperty(exports, "TableCellResizerPlugin", { enumerable: true, get: function () { return __importDefault(TableCellResizer_1).default; } });
 /////// V2 components /themes 
-__exportStar(require("./v2/components/Buttons"), exports);
 __exportStar(require("./v2/components/Typo2"), exports);
 __exportStar(require("./v2/components/BlockLabel"), exports);
 __exportStar(require("./v2/components/cards/CardContent"), exports);
 __exportStar(require("./v2/components/cards/ListContent"), exports);
 __exportStar(require("./v2/components/Tags"), exports);
 __exportStar(require("./v2/components/ImagePlaceholder"), exports);
-__exportStar(require("./v2/components/TextInputs"), exports);
+// 2 imports available
+__exportStar(require("./v2/components/Buttons"), exports);
+var TabBar_2 = require("./v2/components/TabBar");
+Object.defineProperty(exports, "TabBarV2", { enumerable: true, get: function () { return TabBar_2.TabBarStyle1; } });
 var themes_2 = require("./v2/themes");
 Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });
 // v2 contexts
 var contextApi_1 = require("./v2/components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
+// V2 new ready components
+// export * from './v2/components/TextInputs';

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

@@ -40,6 +40,10 @@ declare namespace _default {
             let name_9: string;
             export { name_9 as name };
         }
+        namespace S {
+            let name_10: string;
+            export { name_10 as name };
+        }
         let inputOnlyLabel: {};
     }
     namespace args {
@@ -65,7 +69,10 @@ declare namespace _default {
         export { readOnly_1 as readOnly };
         let inputOnlyLabel_1: string;
         export { inputOnlyLabel_1 as inputOnlyLabel };
+        let S_1: boolean;
+        export { S_1 as S };
     }
 }
 export default _default;
 export function Block_Label(args: any): import("react").JSX.Element;
+export function Playground(args: any): import("react").JSX.Element;

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

@@ -18,10 +18,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Block_Label = void 0;
+exports.Playground = exports.Block_Label = void 0;
 var BlockLabel_1 = require("../../../v2/components/BlockLabel");
 var themes_1 = require("../../../themes");
 var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../..");
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  /* #tempBlocklabelOverride p{\n    color: red;\n  } */\n"], ["\n\n  /* #tempBlocklabelOverride p{\n    color: red;\n  } */\n"])));
 exports.default = {
     title: "Oolib V 2.0/Components/BlockLabel",
@@ -59,10 +60,13 @@ exports.default = {
         disabled: {
             name: "Disabled",
         },
+        S: {
+            name: "Small"
+        },
         inputOnlyLabel: {},
     },
     args: {
-        label: "default label",
+        label: "Default label",
         sublabel: "",
         showHints: true,
         hintsTitle: "Hints",
@@ -75,6 +79,7 @@ exports.default = {
         // invert: false,
         readOnly: false,
         inputOnlyLabel: "Shows only if label is not defined. AND readOnly = true",
+        S: false,
     },
 };
 var dummyData1 = [
@@ -114,4 +119,25 @@ var Block_Label = function (args) {
                 } }, (React.createElement(BlockLabel_1.BlockLabel, __assign({ id: "hints_1", hints: args.showHints ? dummyData2 : "" }, args, { errorMsgs: errorMsgs }))) || "no label provided"))));
 };
 exports.Block_Label = Block_Label;
+var Playground = function (args) {
+    // return () => {
+    // document.getElementsByTagName("body")[0].removeChild(hintsRootElem);
+    // };
+    var errorMsgs = args.errorMessage ? args.errorMessage.split(",") : undefined;
+    return (React.createElement(Wrapper, null,
+        React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                position: "relative",
+                padding: "2rem",
+                backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
+            } },
+            React.createElement("div", { style: {
+                    backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
+                    padding: "10px",
+                } },
+                (React.createElement(BlockLabel_1.BlockLabel, __assign({ id: "hints_1", hints: args.showHints ? dummyData2 : "" }, args, { errorMsgs: errorMsgs }))) || "no label provided",
+                React.createElement("div", { style: { background: __1.colors2.grey5, width: '100svw', height: '20rem' } })))));
+};
+exports.Playground = Playground;
 var templateObject_1;

package/dist/stories/{Oolib → v2}/components/TabBar.stories.d.ts

@@ -1,45 +1,40 @@
 declare namespace _default {
     let title: string;
     namespace argTypes {
-        namespace tabBarStyle {
+        namespace color {
             let name: string;
             let options: string[];
-            namespace mapping {
-                let Primary: string;
-                let Secondary: string;
-            }
             namespace control {
                 let type: string;
             }
         }
-        namespace color {
+        namespace size {
             let name_1: string;
             export { name_1 as name };
             let options_1: string[];
             export { options_1 as options };
+            export namespace mapping {
+                let Small: string;
+                let Medium: string;
+            }
             export namespace control_1 {
                 let type_1: string;
                 export { type_1 as type };
             }
             export { control_1 as control };
         }
-        namespace size {
+        namespace errorTabs {
             let name_2: string;
             export { name_2 as name };
             let options_2: string[];
             export { options_2 as options };
-            export namespace mapping_1 {
-                let Small: string;
-                let Medium: string;
-            }
-            export { mapping_1 as mapping };
             export namespace control_2 {
                 let type_2: string;
                 export { type_2 as type };
             }
             export { control_2 as control };
         }
-        namespace errorTabs {
+        namespace disabledTabs {
             let name_3: string;
             export { name_3 as name };
             let options_3: string[];
@@ -56,8 +51,6 @@ declare namespace _default {
         }
     }
     namespace args {
-        let tabBarStyle_1: string;
-        export { tabBarStyle_1 as tabBarStyle };
         let size_1: string;
         export { size_1 as size };
         let color_1: string;
@@ -66,6 +59,11 @@ declare namespace _default {
         export { changeWidth_1 as changeWidth };
         let errorTabs_1: string;
         export { errorTabs_1 as errorTabs };
+        let disabledTabs_1: string;
+        export { disabledTabs_1 as disabledTabs };
+        export let responsive: boolean;
+        let title_1: string;
+        export { title_1 as title };
     }
 }
 export default _default;

package/dist/stories/{Oolib → v2}/components/TabBar.stories.js

@@ -36,24 +36,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBar_ = void 0;
 var react_1 = __importStar(require("react"));
-var TabBars = __importStar(require("../../../components/TabBar"));
+var TabBars = __importStar(require("../../../v2/components/TabBar"));
 exports.default = {
-    title: "Components/TabBar",
+    title: "Oolib V 2.0/components/TabBar",
     argTypes: {
-        tabBarStyle: {
-            name: "Tab Bar Style",
-            options: ["Primary", "Secondary"],
-            mapping: {
-                Primary: '1',
-                Secondary: '2',
-            },
-            control: { type: "select" },
-        },
         color: {
             name: "Color",
             options: ['blue', "black"],
             control: { type: 'inline-radio' },
-            // if: { arg: 'tabBarStyle', eq: 'Primary' },
         },
         size: {
             name: "Size",
@@ -69,16 +59,23 @@ exports.default = {
             options: ['value1', 'value2', 'value3'],
             control: { type: 'inline-check' },
         },
+        disabledTabs: {
+            name: "Disabled Tabs",
+            options: ['value1', 'value2', 'value3'],
+            control: { type: 'inline-check' },
+        },
         changeWidth: {
             name: "Change Width"
         }
     },
     args: {
-        tabBarStyle: "Primary",
         size: "Medium",
         color: "blue",
         changeWidth: false,
         errorTabs: "",
+        disabledTabs: "",
+        responsive: false,
+        title: "Page"
     }
 };
 var TabBar_ = function (args) {
@@ -92,12 +89,12 @@ var TabBar_ = function (args) {
         { display: "display 6", value: "value7" },
     ];
     var errorTabs = args.errorTabs && options.filter(function (op) { return args.errorTabs.includes(op.value); });
+    var disabledTabs = args.disabledTabs && options.filter(function (op) { return args.disabledTabs.includes(op.value); });
     var _a = (0, react_1.useState)(options[0]), active = _a[0], setActive = _a[1];
     args.options = options;
     args.value = active;
     args.onChange = function (id, value) { return setActive(value); };
-    return (react_1.default.createElement("div", { style: { width: !args.changeWidth ? '' : '400px' } }, args.tabBarStyle === '2'
-        ? react_1.default.createElement(TabBars.TabBarStyle2, __assign({}, args, { errorTabs: errorTabs }))
-        : react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { errorTabs: errorTabs, black: args.color === "black" ? true : false }))));
+    return (react_1.default.createElement("div", { style: { width: !args.changeWidth ? '' : '400px' } },
+        react_1.default.createElement(TabBars.TabBarStyle1, __assign({}, args, { errorTabs: errorTabs, disabledTabs: disabledTabs, black: args.color === "black" ? true : false }))));
 };
 exports.TabBar_ = TabBar_;

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

@@ -61,6 +61,10 @@ declare namespace _default {
             let name_13: string;
             export { name_13 as name };
         }
+        namespace sublabel {
+            let name_14: string;
+            export { name_14 as name };
+        }
     }
     namespace args {
         let icon_1: any;
@@ -85,13 +89,14 @@ declare namespace _default {
         export { isRequired_1 as isRequired };
         let disabled_1: boolean;
         export { disabled_1 as disabled };
-        export let invert: boolean;
         let customErrorMsg_1: string;
         export { customErrorMsg_1 as customErrorMsg };
         let errorLinkText_1: string;
         export { errorLinkText_1 as errorLinkText };
         let S_1: boolean;
         export { S_1 as S };
+        let sublabel_1: string;
+        export { sublabel_1 as sublabel };
     }
 }
 export default _default;
@@ -109,13 +114,13 @@ export namespace Number_ {
     export { args_1 as args };
     export namespace argTypes_1 {
         export namespace min_1 {
-            let name_14: string;
-            export { name_14 as name };
+            let name_15: string;
+            export { name_15 as name };
         }
         export { min_1 as min };
         export namespace max_1 {
-            let name_15: string;
-            export { name_15 as name };
+            let name_16: string;
+            export { name_16 as name };
         }
         export { max_1 as max };
     }

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

@@ -38,7 +38,6 @@ exports.Number_ = exports.URL_ = exports.Phone_ = exports.Password_ = exports.Em
 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',
@@ -87,6 +86,9 @@ exports.default = {
         },
         S: {
             name: "Small"
+        },
+        sublabel: {
+            name: "Sub Label"
         }
     },
     args: {
@@ -101,10 +103,10 @@ exports.default = {
         readOnly: false,
         isRequired: false,
         disabled: false,
-        invert: false,
         customErrorMsg: 'This is custom error message',
         errorLinkText: "Error Link",
         S: false,
+        sublabel: 'Some sub label',
     },
 };
 var GenInputStories = function (_a) {
@@ -132,14 +134,13 @@ var GenInputStories = function (_a) {
     };
     var actionBtn;
     if (args.actionButton) {
-        actionBtn = { text: args.actionButtonText, invert: args.invert, onClick: function () { return console.log('clicked'); }, icon: args.actionButtonIcon };
+        actionBtn = { text: args.actionButtonText, 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 };
+        clearBtn = { text: args.clearButtonText, onClick: function () { return console.log('clicked'); }, icon: args.clearButtonIcon };
     }
     return (react_1.default.createElement("div", { style: {
-            backgroundColor: args.invert ? themes_1.colors.greyColor100 : '',
             padding: '10px',
         } },
         react_1.default.createElement(Comp, __assign({}, newProps, { onChange: handleOnChange, value: value, actionBtn: actionBtn, clearBtn: clearBtn, passValidationErrorToFormValidation: function (status) {
@@ -153,26 +154,26 @@ var GenInputStories = function (_a) {
             }, validationStatus: formValidation }))));
 };
 var Text = function (args) { return (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'text input', sublabel: 'some sub label' }), Comp: TextInputs_1.TextInput }))); };
+    react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'Text input' }), 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 }));
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'Email input' }), 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 }));
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'Password input' }), 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 }));
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'Phone input' }), 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 }));
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'Url input' }), 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 }));
+    return (react_1.default.createElement(GenInputStories, { args: __assign(__assign({}, args), { label: 'Number input' }), Comp: TextInputs_1.NumberInput }));
 };
 exports.Number_ = Number_;
 exports.Number_.args = {

package/dist/utils/getBlockLabelProps.js

@@ -20,7 +20,8 @@ var getBlockLabelProps = function (props) {
         'hideOptionalLabel',
         'infoTooltip',
         'popOutOfOverflowHiddenParent',
-        'disabled'
+        'disabled',
+        'S'
     ];
     var labelProps = {};
     Object.keys(props).map(function (key) {

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

@@ -37,7 +37,7 @@ var Typo2_1 = require("../Typo2");
 var colors_1 = require("../../themes/colors");
 var grey40 = colors_1.colors.grey40, grey60 = colors_1.colors.grey60;
 var BlockLabel = function (props) {
-    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip, disabled = props.disabled;
+    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip, disabled = props.disabled, S = props.S;
     var shouldCompRender = label ||
         (!readOnly &&
             (sublabel ||
@@ -51,7 +51,7 @@ var BlockLabel = function (props) {
     var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
         ? "danger"
         : errorMsgs[0].type || "danger";
-    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className, id: "tempBlocklabelOverride" },
+    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className, id: "tempBlocklabelOverride", sublabel: sublabel, S: S },
         react_1.default.createElement("div", { style: { display: "flex", gap: "0.4rem" } },
             (label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { color: disabled ? colors_1.colors.grey40 : colors_1.colors.grey80, semibold: true }, label || inputOnlyLabel)),
             !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,

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

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

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

@@ -0,0 +1,2 @@
+export function TabBarStyle1(props: any): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,72 @@
+"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.TabBarStyle1 = void 0;
+var react_1 = __importDefault(require("react"));
+var useScrollBar_1 = require("../../../utils/customHooks/useScrollBar");
+var Buttons_1 = require("../../../components/Buttons");
+var index_styled_1 = require("./index.styled");
+var _EXPORTS_1 = require("../../../utils/_EXPORTS");
+var DropdownSingle_1 = require("../../../components/Dropdowns/DropdownSingle");
+var mixins_1 = require("../../../themes/mixins");
+var Typo2_1 = require("../Typo2");
+var phosphor_react_1 = require("phosphor-react");
+var colors_1 = require("../../themes/colors");
+var Base = function (_a) {
+    var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
+    ;
+    var size = _size || (S ? 'S' : 'M'); //defaults to M
+    var value = saveValueAsString ? options.find(function (d) { return d.value === valueProp; }) : valueProp;
+    var _d = (0, useScrollBar_1.useScrollBar)(), scrollContainerRef = _d.scrollContainerRef, scrollX = _d.scrollX, scrollIsAtEnd = _d.scrollIsAtEnd, scrollIsAtStart = _d.scrollIsAtStart, slide = _d.slide;
+    var handleClick = function (v) {
+        onChange && onChange(id, saveValueAsString ? v.value : v);
+    };
+    return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
+        react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
+            !scrollIsAtStart && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
+                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
+            react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
+                react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX }, options.map(function (op) {
+                    var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
+                    var tabIsDisabled = disabledTabs && disabledTabs.some(function (tab) { return tab.value === op.value; });
+                    var tabIsActive = value && op.value === value.value;
+                    return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, black: black },
+                        react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, disabled: tabIsDisabled, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
+                            react_1.default.createElement(index_styled_1.STYLED_TYPO, { capitalize: true }, op.display),
+                            tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
+                }))),
+            !scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
+                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
+};
+var TabBarStyle1 = function (props) {
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
+    var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
+    return (props.responsive && !isDesktop
+        ? (react_1.default.createElement(DropdownSingle_1.DropdownSingle, __assign({}, props, { genCustomSelectComp: function (_a) {
+                var value = _a.value;
+                return react_1.default.createElement(CustomSelectComp, { value: value, title: props.title });
+            } })))
+        : (react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" }))));
+};
+exports.TabBarStyle1 = TabBarStyle1;
+var CustomSelectComp = function (_a) {
+    var value = _a.value, title = _a.title;
+    return (react_1.default.createElement(index_styled_1.StyledWrapper, null,
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo2_1.UI_TAG, { style: { color: colors_1.colors.grey40 } }, title),
+            react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, { capitalize: true, style: { color: colors_1.colors.black } }, value.display)),
+        react_1.default.createElement(phosphor_react_1.List, { size: 18, weight: "bold" })));
+};

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

@@ -0,0 +1,16 @@
+export namespace wrapperStyles {
+    let style1: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+}
+export namespace tabStyles {
+    let style1_1: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+    export { style1_1 as style1 };
+}
+export const TabBarStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const TabBarContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const TabBarRowStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const TabBarTabWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const TabBarTabStyled: import("styled-components").StyledComponent<"button", any, {}, never>;
+export const STYLED_TYPO: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;
+export const StyledDirectionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledDot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,112 @@
+"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.StyledWrapper = exports.StyledDot = exports.StyledDirectionButtons = exports.STYLED_TYPO = exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = exports.tabStyles = exports.wrapperStyles = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var mixins_1 = require("../../../themes/mixins");
+var themes_1 = require("../../themes");
+var utils_1 = require("../../themes/utils");
+var Typo2_1 = require("../Typo2");
+var secondaryContainer = themes_1.colors.secondaryContainer, onSecondary = themes_1.colors.onSecondary, white = themes_1.colors.white, black = themes_1.colors.black, grey80 = themes_1.colors.grey80, grey40 = themes_1.colors.grey40, grey10 = themes_1.colors.grey10, errorColor = themes_1.colors.error;
+exports.wrapperStyles = {
+    style1: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    :first-of-type {\n      border-radius: 1px 0 0 2px;\n    }\n    :last-of-type {\n      border-radius: 0 2px 2px 0;\n    }\n\n    background-color: white;\n    color: ", ";\n    \n    ", "  \n\n    ", "\n\n    ", "\n\n   \n  "], ["\n    :first-of-type {\n      border-radius: 1px 0 0 2px;\n    }\n    :last-of-type {\n      border-radius: 0 2px 2px 0;\n    }\n\n    background-color: white;\n    color: ", ";\n    \n    ", "  \n\n    ", "\n\n    ", "\n\n   \n  "])), function (_a) {
+        var error = _a.error, active = _a.active, disabled = _a.disabled;
+        return active && error ? errorColor : disabled ? grey40 : black;
+    }, function (_a) {
+        var disabled = _a.disabled;
+        return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: not-allowed;\n        color: ", ";\n    "], ["\n        cursor: not-allowed;\n        color: ", ";\n    "])), grey40);
+    }, function (_a) {
+        var error = _a.error;
+        return error && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        position: relative;\n      "], ["\n        position: relative;\n      "])));
+    }, function (_a) {
+        var active = _a.active;
+        return active && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        /* border-radius: 0.2rem; */\n        position: relative;\n      "], ["\n        /* border-radius: 0.2rem; */\n        position: relative;\n      "])));
+    })
+};
+exports.tabStyles = {
+    style1: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    border-radius: 6px;\n    background-color: ", ";\n    color: ", ";\n      \n      ", "  \n        \n      &:active {\n        background-color: ", " ;\n        color:  ", " ;\n      }\n        \n      &:hover {\n        background-color: ", ";\n        color: ", ";\n        border-radius: 6px;\n      }  \n        \n    ", "\n  "], ["\n    border-radius: 6px;\n    background-color: ", ";\n    color: ", ";\n      \n      ", "  \n        \n      &:active {\n        background-color: ", " ;\n        color:  ", " ;\n      }\n        \n      &:hover {\n        background-color: ", ";\n        color: ", ";\n        border-radius: 6px;\n      }  \n        \n    ", "\n  "])), function (_a) {
+        var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
+        return active ? (0, utils_1.getSecondaryContainer)(colors) || secondaryContainer : white;
+    }, function (_a) {
+        var active = _a.active, disabled = _a.disabled, colors = _a.theme.colors;
+        return disabled ? grey40 : active ? (0, utils_1.getOnSecondary)(colors) || onSecondary : grey80;
+    }, function (_a) {
+        var disabled = _a.disabled;
+        return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          cursor: not-allowed;\n          color: ", ";\n      "], ["\n          cursor: not-allowed;\n          color: ", ";\n      "])), grey40);
+    }, function (_a) {
+        var disabled = _a.disabled, colors = _a.theme.colors;
+        return disabled ? grey40 : (0, utils_1.getSecondaryContainer)(colors) || secondaryContainer;
+    }, function (_a) {
+        var colors = _a.theme.colors;
+        return (0, utils_1.getOnSecondary)(colors) || onSecondary;
+    }, function (_a) {
+        var disabled = _a.disabled;
+        return disabled ? white : grey10;
+    }, function (_a) {
+        var disabled = _a.disabled, colors = _a.theme.colors;
+        return disabled ? grey40 : (0, utils_1.getOnSecondary)(colors) || onSecondary;
+    }, (0, mixins_1.transition)("color"))
+};
+exports.TabBarStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  height: ", ";\n"])), white, function (_a) {
+    var size = _a.size;
+    return size === 'S' ? '2.5rem' : '3rem';
+});
+exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
+exports.TabBarRowStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 2px;\n  ", ";\n  transform: ", ";\n"], ["\n  display: flex;\n  height: 100%;\n  white-space: nowrap;\n  width: fit-content;\n  gap: 2px;\n  ", ";\n  transform: ", ";\n"])), (0, mixins_1.transition)('transform'), function (_a) {
+    var translateX = _a.translateX;
+    return "translateX(".concat(translateX, "px)");
+});
+exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", " \n\n  display: flex;\n  align-items: center;\n"], ["\n  ", " \n\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+    var tabBarStyle = _a.tabBarStyle;
+    switch (tabBarStyle) {
+        case "1":
+            return exports.wrapperStyles.style1;
+    }
+});
+exports.TabBarTabStyled = styled_components_1.default.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding: 0.45rem 0.8rem;\n  height: 100%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n\n  ", " \n"], ["\n  padding: 0.45rem 0.8rem;\n  height: 100%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n\n  ", " \n"])), function (_a) {
+    var tabBarStyle = _a.tabBarStyle;
+    switch (tabBarStyle) {
+        case "1":
+            return exports.tabStyles.style1;
+    }
+});
+exports.STYLED_TYPO = (0, styled_components_1.default)(Typo2_1.UI_BODY_SEMIBOLD)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    \n"], ["\n    \n"])));
+exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  position: absolute;\n  ", "\n  background-color: ", ";\n  height: 100%;\n  border-right: 1px solid ", ";\n  border-left: 1px solid ", ";\n  z-index: 10;\n"], ["\n  position: absolute;\n  ", "\n  background-color: ", ";\n  height: 100%;\n  border-right: 1px solid ", ";\n  border-left: 1px solid ", ";\n  z-index: 10;\n"])), function (_a) {
+    var left = _a.left, right = _a.right;
+    if (left)
+        return (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject([" left: 0;"], [" left: 0;"])));
+    else if (right)
+        return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject([" right: 0;"], [" right: 0;"])));
+}, white, grey10, grey10);
+exports.StyledDot = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background: ", ";\n  height: 5px;\n  width: 5px;\n  border-radius: 50%;\n  margin-left: 10px;\n"], ["\n  background: ", ";\n  height: 5px;\n  width: 5px;\n  border-radius: 50%;\n  margin-left: 10px;\n"])), function (_a) {
+    var active = _a.active, error = _a.error, tabBarStyle = _a.tabBarStyle;
+    return tabBarStyle === "2" && active ? errorColor : !active && error ? errorColor : errorColor;
+});
+exports.StyledWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  /* min-height: 5.6rem; */\n  padding: 0.8rem 1.6rem;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 1.2rem;\n  background: #FFF;\n  gap: 0.5rem;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);\n"], ["\n  display: flex;\n  /* min-height: 5.6rem; */\n  padding: 0.8rem 1.6rem;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 1.2rem;\n  background: #FFF;\n  gap: 0.5rem;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

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

@@ -1,7 +1,6 @@
-export function TextInput({ S, 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, }: {
+export function TextInput({ S, id, 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, }: {
     S: any;
     id: any;
-    invert: any;
     disabled: any;
     icon: any;
     type: any;

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

@@ -98,7 +98,7 @@ var icons_1 = require("../../../icons");
 var BadgeVetted = icons_1.icons.BadgeVetted;
 function TextInput(_a) {
     var _this = this;
-    var S = _a.S, 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
+    var S = _a.S, id = _a.id, 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
@@ -182,15 +182,15 @@ function TextInput(_a) {
     return (react_1.default.createElement("div", { className: className },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         readOnly ? (react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); } },
+            react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); }, size: size },
                 icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: S ? 12 : 16, onClick: !disabled ? iconOnClick || null : undefined })),
-                react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === "S" ? "UI_BODY" : "UI_BODY_SM", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, size: size, onFocus: onFocus, autoComplete: "off" }),
+                react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: "UI_BODY_SM", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, size: size, onFocus: onFocus, autoComplete: "off" }),
                 validationStatus === "loading" && (react_1.default.createElement("div", null,
-                    react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
+                    react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
                     react_1.default.createElement(BadgeVetted, { size: 26 }))),
-                clearBtn && clearBtnEnabled && (react_1.default.createElement(ClearButton_1.ClearButton, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled })),
-                actionBtn && (react_1.default.createElement(ActionButton_1.ActionButton, { value: actionBtn.text || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled }))),
+                clearBtn && clearBtnEnabled && (react_1.default.createElement(ClearButton_1.ClearButton, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } })),
+                actionBtn && (react_1.default.createElement(ActionButton_1.ActionButton, { value: actionBtn.text || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.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: "WarningDiamond", weight: "fill", color: themes_1.colors.error })),
                 react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,

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

@@ -1,5 +1,7 @@
 export const MsgContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const InputContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const InputContainerStyled: import("styled-components").StyledComponent<"div", any, {
+    size: "S" | "M";
+}, never>;
 export const InputStyled: import("styled-components").StyledComponent<"input", any, {}, never>;
 export const ClearButtonStyled: import("styled-components").StyledComponent<"button", any, {}, never>;
 export const ButtonPrimaryStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -29,7 +29,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonPrimaryStyled = 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) {
@@ -57,7 +56,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_6
 });
 exports.InputStyled = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"], ["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"])), function (_a) {
     var size = _a.size;
-    return size === "S" ? "32px" : "36px";
+    return size === "S" ? "36px" : "46px";
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? themes_1.colors.grey40 : themes_1.colors.grey60);

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

@@ -12,6 +12,7 @@ export declare const colors: {
     onTertiary: string;
     surfaceContainer: string;
     surfaceContainerLow: string;
+    grey5: string;
     grey10: string;
     grey20: string;
     grey30: string;

package/dist/v2/themes/colors.js

@@ -1,20 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.colors = exports.dataVizColorsText = exports.dataVizColors = void 0;
-var primary = "#006686";
-var secondary = "#456272";
-var tertiary = "#764F8B";
-var primaryContainer = "#98DCFF";
-var onPrimary = "#000000";
-var secondaryContainer = "#C9E8FA";
-var onSecondary = "#2F4C5B";
-var tertiaryContainer = "#D4CAD8";
-var onTertiary = "#532E68";
-var surfaceContainer = "#EBEEF1";
-var surfaceContainerLow = "#F1F4F7";
+var primary = "#00223D";
+var secondary = "#526070";
+var tertiary = "#30133E";
+var primaryContainer = "#184469";
+var onPrimary = "#BBDAFF";
+var secondaryContainer = "#D9E8FC";
+var onSecondary = "#3E4C5B";
+var tertiaryContainer = "#533461";
+var onTertiary = "#F0C8FF";
+var surfaceContainer = "#EEEDF1";
+var surfaceContainerLow = "#F3F3F7";
 // const grey80 = '#333333'
 // const grey40 = "#999999"
 // const grey10 = "#E7E7E7"
+var grey5 = '#0000000D';
 var grey10 = '#0000001A';
 var grey20 = '#00000033';
 var grey30 = '#0000004D';
@@ -83,6 +84,7 @@ exports.colors = {
     onTertiary: onTertiary,
     surfaceContainer: surfaceContainer,
     surfaceContainerLow: surfaceContainerLow,
+    grey5: grey5,
     grey10: grey10,
     grey20: grey20,
     grey30: grey30,

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

@@ -1,3 +1,5 @@
-export declare const globalInputElemPadding_v2: import("styled-components").FlattenSimpleInterpolation;
+export declare const globalInputElemPadding_v2: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    size: 'S' | 'M';
+}, any>>;
 export declare const globalInputElemHover_v2: import("styled-components").FlattenSimpleInterpolation;
 export declare const globalInputElemFocused_v2: import("styled-components").FlattenSimpleInterpolation;

package/dist/v2/themes/globalStyles.js

@@ -7,7 +7,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 = void 0;
 var styled_components_1 = require("styled-components");
 var colors_1 = require("./colors");
-exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 10px;\n"], ["\n  padding: 0 10px;\n"])));
+exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n"], ["\n  padding: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size === "S" ? '0 10px' : '0 12px';
+});
 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.grey30);
 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.157.2",
+  "version": "2.158.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",