oolib 2.141.4 → 2.143.0

package/dist/components/Tooltip/index.js

@@ -74,7 +74,7 @@ var Tooltip = function (_a) {
     (0, react_1.useEffect)(function () {
         setShowTooltip(debug);
     }, [debug]);
-    return (react_1.default.createElement(styled_1.StyledWrapper, { ref: trackerRef },
+    return (react_1.default.createElement(styled_1.StyledWrapper, { ref: trackerRef, id: "wrapper" },
         react_1.default.createElement(styled_1.StyledTooltipTarget, { onMouseEnter: function () {
                 if (!isClicked) {
                     setShowTooltip(true);
@@ -88,7 +88,8 @@ var Tooltip = function (_a) {
             }, onBlur: function () {
                 setIsClicked(false), setShowTooltip(false);
             }, ref: targetRef, tabIndex: 0 }, presetTarget === "infoIcon" ? (react_1.default.createElement(styled_1.StyledIconButton, null,
-            react_1.default.createElement(phosphor_react_1.Info, { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100, size: 20, weight: showTooltip ? 'fill' : 'regular' }))) : (children)),
+            " ",
+            react_1.default.createElement(phosphor_react_1.Info, { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100, size: 16, weight: showTooltip ? 'fill' : 'regular' }))) : (children)),
         showTooltip && (react_1.default.createElement(styled_1.StyledTooltipBox, { fixPos: fixPos, isOpen: showTooltip, position: position, show: showTooltip, style: style, invert: invert },
             text.split('\n').filter(Boolean).map(function (singleline, i) { return (react_1.default.createElement(Typo_1.SANS_2, __assign({}, (i !== 0 ? { style: { marginTop: '0.5rem' } } : {})), singleline)); }),
             react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },

package/dist/components/Tooltip/styled.d.ts

@@ -23,5 +23,5 @@ interface StyledArrowProps {
     invert: boolean;
 }
 export declare const StyledArrow: import("styled-components").StyledComponent<"span", any, StyledArrowProps, never>;
-export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledIconButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/components/Tooltip/styled.js

@@ -24,7 +24,7 @@ exports.StyledTooltipBox = styled_components_1.default.div(templateObject_2 || (
     var position = _a.position, fixPos = _a.fixPos;
     return (0, util_1.positionTooltip)({ position: position, fixPos: fixPos });
 });
-exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n  width: 100%;\n"], ["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n  width: 100%;\n"])));
+exports.StyledTooltipTarget = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"], ["\n  border: none;\n  background: inherit;\n  font-size: inherit;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"])));
 exports.StyledArrowOutline = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"], ["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", ";\n"])), greyColor15, function (_a) {
     var position = _a.position;
     return clipPaths[position];
@@ -33,5 +33,5 @@ exports.StyledArrow = styled_components_1.default.span(templateObject_5 || (temp
     var position = _a.position;
     return clipPaths[position];
 }, util_1.positionArrow);
-exports.StyledIconButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  outline: none;\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border: none;\n  outline: none;\n  cursor: pointer;\n"])), themes_1.colors.none);
+exports.StyledIconButton = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  outline: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  background-color: ", ";\n  border: none;\n  outline: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])), themes_1.colors.none);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/icons/index.d.ts

@@ -22,6 +22,7 @@ export namespace icons {
     export { CalendarBlank };
     export { Trash };
     export { DotsThreeVertical };
+    export { DotsThreeCircle };
     export { DotsThree };
     export { CaretUp };
     export { CaretDown };
@@ -200,6 +201,7 @@ import { ArrowLeft } from 'phosphor-react';
 import { CalendarBlank } from 'phosphor-react';
 import { Trash } from 'phosphor-react';
 import { DotsThreeVertical } from 'phosphor-react';
+import { DotsThreeCircle } from 'phosphor-react';
 import { DotsThree } from 'phosphor-react';
 import { CaretUp } from 'phosphor-react';
 import { CaretDown } from 'phosphor-react';

package/dist/icons/index.js

@@ -27,6 +27,7 @@ exports.icons = {
     CalendarBlank: phosphor_react_1.CalendarBlank,
     Trash: phosphor_react_1.Trash,
     DotsThreeVertical: phosphor_react_1.DotsThreeVertical,
+    DotsThreeCircle: phosphor_react_1.DotsThreeCircle,
     DotsThree: phosphor_react_1.DotsThree,
     CaretUp: phosphor_react_1.CaretUp,
     CaretDown: phosphor_react_1.CaretDown,

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from "./components/Paddings";
 export * from "./utils/_EXPORTS";
 export * from "./v2/components/Buttons";
 export * from "./v2/components/Typo2";
+export * from "./v2/components/BlockLabel";
 export { colors } from "./themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";

package/dist/index.js

@@ -176,5 +176,10 @@ Object.defineProperty(exports, "TableCellResizerPlugin", { enumerable: true, get
 /////// V2 components /themes 
 __exportStar(require("./v2/components/Buttons"), exports);
 __exportStar(require("./v2/components/Typo2"), exports);
+__exportStar(require("./v2/components/BlockLabel"), exports);
+__exportStar(require(""), exports);
 var themes_2 = require("./v2/themes");
 Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });
+// v2 contexts
+var contextApi_2 = require("./v2/components/Hints/contextApi");
+Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_2.HintsProvider; } });

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

@@ -36,7 +36,7 @@ declare namespace _default {
             let name_8: string;
             export { name_8 as name };
         }
-        namespace invert {
+        namespace disabled {
             let name_9: string;
             export { name_9 as name };
         }
@@ -59,8 +59,8 @@ declare namespace _default {
         export { errorMessage_1 as errorMessage };
         let isRequired_1: boolean;
         export { isRequired_1 as isRequired };
-        let invert_1: boolean;
-        export { invert_1 as invert };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
         let readOnly_1: boolean;
         export { readOnly_1 as readOnly };
         let inputOnlyLabel_1: string;

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

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Block_Label = void 0;
-var BlockLabel_1 = require("../../../components/BlockLabel");
+var BlockLabel_1 = require("../../../v2/components/BlockLabel");
 var themes_1 = require("../../../themes");
 exports.default = {
     title: "Oolib V 2.0/Components/BlockLabel",
@@ -47,8 +47,8 @@ exports.default = {
         readOnly: {
             name: "Read Only",
         },
-        invert: {
-            name: "Invert",
+        disabled: {
+            name: "Disabled",
         },
         inputOnlyLabel: {},
     },
@@ -62,7 +62,8 @@ exports.default = {
         infoTooltip: "",
         errorMessage: "", //gets converted into the appropriate errorMsgs prop below
         isRequired: false,
-        invert: false,
+        disabled: false,
+        // invert: false,
         readOnly: false,
         inputOnlyLabel: "Shows only if label is not defined. AND readOnly = true",
     },

package/dist/utils/getBlockLabelProps.js

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

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

@@ -28,18 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockLabel = void 0;
 var react_1 = __importStar(require("react"));
-var Typo_1 = require("../../../components/Typo");
-var InlineAlert_1 = require("../../../components/InlineAlert");
+var InlineAlert_1 = require("../InlineAlert ");
 var index_styled_1 = require("./index.styled");
-var colors_1 = require("../../../themes/colors");
 var toArray_1 = require("../../../utils/toArray");
-var Hints_1 = __importDefault(require("../../../components/Hints"));
+var Hints_1 = __importDefault(require("../Hints"));
 var Tooltip_1 = require("../../../components/Tooltip");
-var phosphor_react_1 = require("phosphor-react");
 var Typo2_1 = require("../Typo2");
-var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
+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;
+    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 shouldCompRender = label ||
         (!readOnly &&
             (sublabel ||
@@ -54,14 +52,14 @@ var BlockLabel = function (props) {
         ? "danger"
         : errorMsgs[0].type || "danger";
     return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
-        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
-            (label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { invert: invert, semibold: true, capitalize: true, style: { background: 'red' } }, label || inputOnlyLabel)),
-            !readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, btnlabel: hintsBtnLabel, subtitle: hintsSubtitle, hints: hints })) : null,
-            optional && !hideOptionalLabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)")),
+        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, capitalize: true }, label || inputOnlyLabel)),
             !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
+            optional && !hideOptionalLabel && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { color: disabled ? colors_1.colors.grey20 : colors_1.colors.grey40 }, "(optional)")),
+            !readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, btnlabel: hintsBtnLabel, subtitle: hintsSubtitle, hints: hints, disabled: disabled })) : null,
             infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || "right", invert: invert, debug: infoTooltip.debug, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: "infoIcon" }))),
         !readOnly &&
             sublabel &&
-            (0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo_1.SANS_3, { key: i, color: invert ? greyColor40 : greyColor80 }, subL)); }))));
+            (0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo2_1.UI_CAPTION, { key: i, color: disabled ? colors_1.colors.grey40 : grey60 }, subL)); }))));
 };
 exports.BlockLabel = BlockLabel;

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

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledInfoTooltipbutton = exports.StyledBlockLabel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0rem;\n  margin-bottom: 1rem;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0rem;\n  margin-bottom: 1rem;\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: 0.2rem;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  margin-bottom: 0.2rem;\n  position: relative;\n"])));
 exports.StyledInfoTooltipbutton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  outline: none;\n"], ["\n  border: none;\n  background: none;\n  outline: none;\n"])));
 var templateObject_1, templateObject_2;

package/dist/v2/components/Hints/comps/BulletIcon.d.ts

@@ -0,0 +1 @@
+export function BulletIcon(): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulletIcon = void 0;
+var colors_1 = require("../../../themes/colors");
+var DisplayIcon_1 = require("../../../../utils/comps/DisplayIcon");
+var black = colors_1.colors.black;
+var BulletIcon = function () { return (
+// line height of SANS_3 is 21px. Dot is 8px tall. so below css (21/2 - 8/2) makes the circle perfectly aligned with the first line
+React.createElement("div", { style: { fontSize: 0, marginTop: '6.5px', lineHeight: 0 } },
+    React.createElement(DisplayIcon_1.DisplayIcon, { color: black, weight: "fill", icon: "Circle", size: 8 }))); };
+exports.BulletIcon = BulletIcon;

package/dist/v2/components/Hints/comps/HintsButton.d.ts

@@ -0,0 +1,5 @@
+export function HintsButton({ id, btnLabel, onClick }: {
+    id: any;
+    btnLabel: any;
+    onClick: any;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintsButton = void 0;
+var phosphor_react_1 = require("phosphor-react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Typo2_1 = require("../../Typo2");
+var colors_1 = require("../../../themes/colors");
+var hintHover = colors_1.colors.hintHover, hint = colors_1.colors.hint, white = colors_1.colors.white;
+var HintsButton = function (_a) {
+    var id = _a.id, btnLabel = _a.btnLabel, onClick = _a.onClick;
+    return (React.createElement(StyledButton, { onClick: function () { return onClick(id); } },
+        React.createElement(phosphor_react_1.Lightbulb, { size: 13, weight: "bold", style: { marginBottom: "0.2rem" } }),
+        React.createElement(Typo2_1.UI_BODY_SM, null, btnLabel)));
+};
+exports.HintsButton = HintsButton;
+var StyledButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border-radius: 0.4rem;\n\n  display: flex;\n  line-height: 100%;\n  padding: 0.1rem 0.3rem 0rem 0.3rem;\n  align-items: center;\n\n  gap: 0.2rem;\n  color: ", ";\n\n\n  &:hover {\n    background-color: ", ";\n    /* color: ", "; */\n  }\n\n  &:active {\n    background-color: ", ";\n    color: white;\n  }\n\n"], ["\n  border: none;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border-radius: 0.4rem;\n\n  display: flex;\n  line-height: 100%;\n  padding: 0.1rem 0.3rem 0rem 0.3rem;\n  align-items: center;\n\n  gap: 0.2rem;\n  color: ", ";\n\n\n  &:hover {\n    background-color: ", ";\n    /* color: ", "; */\n  }\n\n  &:active {\n    background-color: ", ";\n    color: white;\n  }\n\n"])), hint, hintHover, white, hint);
+var templateObject_1;

package/dist/v2/components/Hints/contextApi.d.ts

@@ -0,0 +1,6 @@
+export const HintsContext: React.Context<any>;
+export function HintsProvider({ children }: {
+    children: any;
+}): React.JSX.Element;
+export function useHintsContext(): any;
+import React from "react";

package/dist/v2/components/Hints/contextApi.js

@@ -0,0 +1,38 @@
+"use strict";
+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.useHintsContext = exports.HintsProvider = exports.HintsContext = void 0;
+var react_1 = __importStar(require("react"));
+exports.HintsContext = (0, react_1.createContext)();
+var HintsProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(""), active = _b[0], setActive = _b[1];
+    return (react_1.default.createElement(exports.HintsContext.Provider, { value: { active: active, setActive: setActive } }, children));
+};
+exports.HintsProvider = HintsProvider;
+var useHintsContext = function () {
+    return (0, react_1.useContext)(exports.HintsContext);
+};
+exports.useHintsContext = useHintsContext;

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

@@ -0,0 +1,10 @@
+export default Hints;
+declare function Hints({ id, hints, title, btnlabel, subtitle, disabled }: {
+    id: any;
+    hints: any;
+    title?: string;
+    btnlabel?: string;
+    subtitle: any;
+    disabled: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,87 @@
+"use strict";
+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 });
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var Typo_1 = require("../../../components/Typo");
+var contextApi_1 = require("../../../components/Hints/contextApi");
+var colors_1 = require("../../themes/colors");
+var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
+var Buttons_1 = require("../../../components/Buttons");
+var Modal_1 = require("../../../components/Modals/Modal");
+var mixins_1 = require("../../../themes/mixins");
+var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
+var styled_2 = require("../../../components/Modals/Modal/styled");
+var getPositionStyles_1 = require("./utils/getPositionStyles");
+var BulletIcon_1 = require("./comps/BulletIcon");
+var HintsButton_1 = require("./comps/HintsButton");
+var grey80 = colors_1.colors.grey80, black = colors_1.colors.black;
+var Hints = function (_a) {
+    var id = _a.id, hints = _a.hints, _b = _a.title, title = _b === void 0 ? "Hints" : _b, _c = _a.btnlabel, btnlabel = _c === void 0 ? "Hints" : _c, subtitle = _a.subtitle, disabled = _a.disabled;
+    //get the context state
+    var _d = (0, contextApi_1.useHintsContext)(), active = _d.active, setActive = _d.setActive;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var lightBoxRef = (0, react_1.useRef)();
+    var _e = (0, react_1.useState)((0, getPositionStyles_1.getPositionStyles)("left")), styles = _e[0], setStyles = _e[1];
+    //isStorybook is temporary hack to get correct with on storybook, since a story is getting renderend within an iframe, screen.width gives the incorrect width
+    var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
+    (0, react_1.useEffect)(function () {
+        if (!lightBoxRef.current)
+            return;
+        var lightBoxRect = lightBoxRef.current.getBoundingClientRect();
+        // by default open on leftside, if the below condition is true than open at the bottom of hints
+        //note for future: arrow comp is fixed and lightbox will move to place itself within the visible area
+        if (lightBoxRect.left < 0) {
+            setStyles((0, getPositionStyles_1.getPositionStyles)("bottom"));
+            // setStyles({
+            //   lightBox: { top: "4rem", right: "0" },
+            //   arrow: { top: `none`, right: "3.5rem", transform: "none" },
+            // });
+        }
+    }, [active]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); }, disabled: disabled },
+            react_1.default.createElement(HintsButton_1.HintsButton, { id: id, btnLabel: btnlabel, onClick: function () { return setActive(id); } })),
+        active === id ? (isDesktop ? (react_1.default.createElement("div", null,
+            react_1.default.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
+            react_1.default.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
+                react_1.default.createElement(styled_2.StyledModalHeaderStyle2Container, null,
+                    react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem", fontSize: 0 } },
+                        react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: "ModalBulbIcon" })),
+                    react_1.default.createElement(styled_2.StyledModalHeaderStyle2Title, null,
+                        react_1.default.createElement(Typo_1.SANS_3, { semibold: true, capitalize: true }, title),
+                        subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: grey80 }, subtitle)) : null,
+                        react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
+                react_1.default.createElement(styled_1.StyledLightBoxContent, null,
+                    react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
+                        react_1.default.createElement(BulletIcon_1.BulletIcon, null),
+                        react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : (react_1.default.createElement(Modal_1.Modal, { isStorybook: true, headerStyle: "style2", id: "modal", title: title, onClose: function () { return setActive(""); } },
+            react_1.default.createElement("div", { style: { padding: ".5rem 2rem" } },
+                react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
+                    react_1.default.createElement("div", { style: { marginTop: ".5rem", lineHeight: 0 } },
+                        react_1.default.createElement(DisplayIcon_1.DisplayIcon, { color: black, weight: "fill", icon: "Circle", size: 8 })),
+                    react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
+};
+exports.default = Hints;

package/dist/v2/components/Hints/styled.d.ts

@@ -0,0 +1,6 @@
+export const StyledHints: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLightbox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLightBoxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLightBoxContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLightBoxList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export const StyledTriangle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/v2/components/Hints/styled.js

@@ -0,0 +1,57 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTriangle = exports.StyledLightBoxList = exports.StyledLightBoxContent = exports.StyledLightBoxHeader = exports.StyledLightbox = exports.StyledHints = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("../../themes/colors");
+var globalVariables_1 = require("../../../globalStyles/globalVariables");
+var hintHover = colors_1.colors.hintHover, hint = colors_1.colors.hint, white = colors_1.colors.white, black = colors_1.colors.black, grey20 = colors_1.colors.grey20;
+exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: ", ";\n"], ["\n    pointer-events: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return disabled && "none";
+});
+exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 1000;\n  background: ", ";\n  position: absolute;\n  width: 30rem;\n  height: 35rem;\n  ", "\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"], ["\n  z-index: 1000;\n  background: ", ";\n  position: absolute;\n  width: 30rem;\n  height: 35rem;\n  ", "\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"])), white, globalVariables_1.globalLightboxStyle, function (_a) {
+    var style = _a.style;
+    return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : "-1rem");
+}, function (_a) {
+    var style = _a.style;
+    return ((style === null || style === void 0 ? void 0 : style.right) ? style.right : "-31.5rem");
+}, function (_a) {
+    var top = _a.style.top;
+    return top;
+}, function (_a) {
+    var left = _a.style.left;
+    return left;
+}, function (_a) {
+    var bottom = _a.style.bottom;
+    return bottom;
+}, function (_a) {
+    var right = _a.style.right;
+    return right;
+});
+exports.StyledLightBoxHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 2px;\n  gap: 1rem;\n\n  padding: 1rem 1.5rem;\n"], ["\n  height: 4rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 2px;\n  gap: 1rem;\n\n  padding: 1rem 1.5rem;\n"])));
+exports.StyledLightBoxContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0.5rem 2rem 2rem 1.5rem;\n  overflow-y: auto;\n"], ["\n  padding: 0.5rem 2rem 2rem 1.5rem;\n  overflow-y: auto;\n"])));
+exports.StyledLightBoxList = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0;\n  li {\n    list-style-type: none;\n    padding: 0.5rem 0;\n    display: flex;\n    gap: 1rem;\n    /* align-items: center; */\n    /* ::before {\n      content: \"\";\n      margin-top: 0.5rem;\n      flex: 0 0 .5rem;\n      width: .5rem;\n      padding: 0%.5r;\n      height: .5rem;\n      background-color: ", ";\n      border-radius: 50%;\n      flex-shrink: 0;\n    } */\n  }\n"], ["\n  padding: 0;\n  li {\n    list-style-type: none;\n    padding: 0.5rem 0;\n    display: flex;\n    gap: 1rem;\n    /* align-items: center; */\n    /* ::before {\n      content: \"\";\n      margin-top: 0.5rem;\n      flex: 0 0 .5rem;\n      width: .5rem;\n      padding: 0%.5r;\n      height: .5rem;\n      background-color: ", ";\n      border-radius: 50%;\n      flex-shrink: 0;\n    } */\n  }\n"])), black);
+exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n\n  width: 10px;\n  height: 10px;\n  border-style: solid;\n\n  border-width: 1px;\n  border-color: ", " ", " transparent transparent;\n  /* transform:rotate(-45deg); */\n  z-index: 1001;\n  background-color: white;\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  transform: ", ";\n\n  /* position:absolute; */\n  /* top:.7rem; */\n  /* left:-2rem; */\n  /* transform :rotate(90deg); */\n"], ["\n  position: absolute;\n\n  width: 10px;\n  height: 10px;\n  border-style: solid;\n\n  border-width: 1px;\n  border-color: ", " ", " transparent transparent;\n  /* transform:rotate(-45deg); */\n  z-index: 1001;\n  background-color: white;\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  transform: ", ";\n\n  /* position:absolute; */\n  /* top:.7rem; */\n  /* left:-2rem; */\n  /* transform :rotate(90deg); */\n"])), grey20, grey20, function (_a) {
+    var top = _a.style.top;
+    return top;
+}, function (_a) {
+    var left = _a.style.left;
+    return left;
+}, function (_a) {
+    var bottom = _a.style.bottom;
+    return bottom;
+}, function (_a) {
+    var right = _a.style.right;
+    return right;
+}, function (_a) {
+    var transform = _a.style.transform;
+    return transform;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/v2/components/Hints/utils/getPositionStyles.d.ts

@@ -0,0 +1 @@
+export function getPositionStyles(position: any): any;

package/dist/v2/components/Hints/utils/getPositionStyles.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPositionStyles = void 0;
+var getPositionStyles = function (position) {
+    var styles = {
+        left: {
+            lightBox: { top: "-2rem", left: "-31.5rem" },
+            arrow: { top: ".7rem", left: "-2rem", transform: "rotate(45deg)" },
+        },
+        bottom: {
+            lightBox: { top: "4.5rem", left: "-2rem" },
+            arrow: { top: "3.9rem", left: "6rem", transform: "rotate(-45deg)" },
+        },
+    };
+    return styles[position];
+};
+exports.getPositionStyles = getPositionStyles;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+type AlertType = 'success' | 'danger' | 'neutral' | 'neutralInactive';
+interface InlineAlertProps {
+    text: string;
+    link?: {
+        url: string;
+        text: string;
+    };
+    type?: AlertType;
+    style?: React.CSSProperties;
+    invert?: boolean;
+}
+/**
+ * @component Renders a inline alert component with customizable text and style.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} props.text: The text to be displayed in the inline alert.
+ * @prop {'success' | 'danger' | 'neutral' | 'neutralInactive'} props.type: The type of alert to be displayed. Defaults to "neutral".
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the inline alert.
+ * @prop {boolean} props.invert: A boolean indicating whether to invert the colors of the inline alert. Defaults to false.
+ * @prop {object} props.link: An object containing the link properties: url and text. If provided, a link is rendered next to the text.
+ * @return {ReactElement} The rendered inline alert component.
+ */
+export declare const InlineAlert: React.FunctionComponent<InlineAlertProps>;
+export {};

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

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineAlert = void 0;
+var react_1 = __importDefault(require("react"));
+var colors_1 = require("../../themes/colors");
+var utilsOolib_1 = require("../../../utilsOolib");
+var success = colors_1.colors.success, error = colors_1.colors.error, 
+// invertRed, 
+white = colors_1.colors.white, 
+// invertGreen, 
+grey20 = colors_1.colors.grey20, grey70 = colors_1.colors.grey70, black = colors_1.colors.black;
+/**
+ * @component Renders a inline alert component with customizable text and style.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} props.text: The text to be displayed in the inline alert.
+ * @prop {'success' | 'danger' | 'neutral' | 'neutralInactive'} props.type: The type of alert to be displayed. Defaults to "neutral".
+ * @prop {React.CSSProperties} props.style: Additional CSS styles to apply to the inline alert.
+ * @prop {boolean} props.invert: A boolean indicating whether to invert the colors of the inline alert. Defaults to false.
+ * @prop {object} props.link: An object containing the link properties: url and text. If provided, a link is rendered next to the text.
+ * @return {ReactElement} The rendered inline alert component.
+ */
+var InlineAlert = function (_a) {
+    var text = _a.text, link = _a.link, _b = _a.type, type = _b === void 0 ? 'neutral' : _b, style = _a.style, invert = _a.invert;
+    var localize = (0, utilsOolib_1.useLocale)();
+    var typeColor = {
+        success: { normal: success },
+        danger: { normal: error },
+        neutral: { normal: black },
+        neutralInactive: { normal: grey70 },
+    };
+    return (react_1.default.createElement("h5", { style: __assign({ display: 'flex', alignItems: 'center' }, style) },
+        react_1.default.createElement("span", { className: 'UI_BODY_SM', style: { color: typeColor[type][invert ? 'invert' : 'normal'], marginBottom: '0.1rem' } }, localize(text)),
+        link && (react_1.default.createElement("a", { className: 'UI_BODY_SM', style: {
+                // paddingLeft: '1rem',
+                textDecoration: 'underline',
+                color: invert ? white : black,
+            }, href: link.url, target: "_blank", rel: "noopener noreferrer" }, localize(link.text)))));
+};
+exports.InlineAlert = InlineAlert;

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

@@ -84,10 +84,9 @@ 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 BlockLabel_1 = require("../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");
@@ -190,7 +189,7 @@ function TextInput(_a) {
                         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 })),
+                    (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.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))))))))));

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

@@ -57,7 +57,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"])), globalStyles_1.globalInputHeight, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? themes_1.colors.grey40 : themes_1.colors.grey80);
+    return (disabled ? themes_1.colors.grey40 : themes_1.colors.grey60);
 });
 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

@@ -10,12 +10,21 @@ export declare const colors: {
     onTertiary: string;
     surfaceContainer: string;
     surfaceContainerLow: string;
-    grey80: string;
-    grey40: string;
     grey10: string;
+    grey20: string;
+    grey30: string;
+    grey40: string;
+    grey50: string;
+    grey60: string;
+    grey70: string;
+    grey80: string;
+    grey90: string;
+    black: string;
     white: string;
-    green: string;
-    red: string;
+    success: string;
+    error: string;
+    hintHover: string;
+    hint: string;
 };
 export interface Colors2Type {
     primary: string;
@@ -29,10 +38,19 @@ export interface Colors2Type {
     onTertiary: string;
     surfaceContainer: string;
     surfaceContainerLow: string;
-    grey80: string;
-    grey40: string;
     grey10: string;
+    grey20: string;
+    grey30: string;
+    grey40: string;
+    grey50: string;
+    grey60: string;
+    grey70: string;
+    grey80: string;
+    grey90: string;
     white: string;
-    green: string;
-    red: string;
+    black: string;
+    error: string;
+    success: string;
+    hintHover: string;
+    hint: string;
 }

package/dist/v2/themes/colors.js

@@ -12,12 +12,25 @@ var tertiaryContainer = "#D4CAD8";
 var onTertiary = "#532E68";
 var surfaceContainer = "#EBEEF1";
 var surfaceContainerLow = "#F1F4F7";
-var grey80 = '#333333';
-var grey40 = "#999999";
-var grey10 = "#E7E7E7";
+// const grey80 = '#333333'
+// const grey40 = "#999999"
+// const grey10 = "#E7E7E7"
+var grey10 = '#0000001A';
+var grey20 = '#00000033';
+var grey30 = '#0000004D';
+var grey40 = '#00000066';
+var grey50 = '#00000080';
+var grey60 = '#00000099';
+var grey70 = '#000000B3';
+var grey80 = '#000000CC';
+var grey90 = '#000000E6';
+var black = '#000000';
 var white = "#ffffff";
-var green = "#159300";
-var red = "#C41717";
+// const green = "#159300";
+var error = "#C41717";
+var success = "#53AC00";
+var hintHover = "#F4E8C3";
+var hint = "#B77222";
 exports.colors = {
     primary: primary,
     secondary: secondary,
@@ -30,10 +43,19 @@ exports.colors = {
     onTertiary: onTertiary,
     surfaceContainer: surfaceContainer,
     surfaceContainerLow: surfaceContainerLow,
-    grey80: grey80,
-    grey40: grey40,
     grey10: grey10,
+    grey20: grey20,
+    grey30: grey30,
+    grey40: grey40,
+    grey50: grey50,
+    grey60: grey60,
+    grey70: grey70,
+    grey80: grey80,
+    grey90: grey90,
+    black: black,
     white: white,
-    green: green,
-    red: red
+    success: success,
+    error: error,
+    hintHover: hintHover,
+    hint: hint
 };

package/dist/v2/themes/globalStyles.js

@@ -9,6 +9,6 @@ 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.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.141.4",
+  "version": "2.143.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -1,71 +0,0 @@
-declare namespace _default {
-    let title: string;
-    namespace argTypes {
-        namespace label {
-            let name: string;
-        }
-        namespace sublabel {
-            let name_1: string;
-            export { name_1 as name };
-        }
-        namespace showHints {
-            let name_2: string;
-            export { name_2 as name };
-        }
-        namespace hintsTitle {
-            let name_3: string;
-            export { name_3 as name };
-        }
-        namespace hintsBtnLabel {
-            let name_4: string;
-            export { name_4 as name };
-        }
-        namespace infoTooltip {
-            let name_5: string;
-            export { name_5 as name };
-        }
-        namespace errorMessage {
-            let name_6: string;
-            export { name_6 as name };
-        }
-        namespace isRequired {
-            let name_7: string;
-            export { name_7 as name };
-        }
-        namespace readOnly {
-            let name_8: string;
-            export { name_8 as name };
-        }
-        namespace invert {
-            let name_9: string;
-            export { name_9 as name };
-        }
-        let inputOnlyLabel: {};
-    }
-    namespace args {
-        let label_1: string;
-        export { label_1 as label };
-        let sublabel_1: string;
-        export { sublabel_1 as sublabel };
-        let showHints_1: boolean;
-        export { showHints_1 as showHints };
-        let hintsTitle_1: string;
-        export { hintsTitle_1 as hintsTitle };
-        let hintsBtnLabel_1: string;
-        export { hintsBtnLabel_1 as hintsBtnLabel };
-        let infoTooltip_1: string;
-        export { infoTooltip_1 as infoTooltip };
-        let errorMessage_1: string;
-        export { errorMessage_1 as errorMessage };
-        let isRequired_1: boolean;
-        export { isRequired_1 as isRequired };
-        let invert_1: boolean;
-        export { invert_1 as invert };
-        let readOnly_1: boolean;
-        export { readOnly_1 as readOnly };
-        let inputOnlyLabel_1: string;
-        export { inputOnlyLabel_1 as inputOnlyLabel };
-    }
-}
-export default _default;
-export function Block_Label(args: any): import("react").JSX.Element;

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

@@ -1,106 +0,0 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Block_Label = void 0;
-var BlockLabel_1 = require("../../../components/BlockLabel");
-var themes_1 = require("../../../themes");
-exports.default = {
-    title: "Oolib V 2.0/Components/BlockLabel",
-    argTypes: {
-        label: {
-            name: "Label",
-        },
-        sublabel: {
-            name: "Sub Label",
-        },
-        showHints: {
-            name: "Hints",
-        },
-        hintsTitle: {
-            name: "Hints Title",
-        },
-        hintsBtnLabel: {
-            name: "Hints button text",
-        },
-        // hintsSubtitle: {
-        //   name: "Hints Subtitle",
-        // },
-        infoTooltip: {
-            name: "Info Tooltip",
-        },
-        errorMessage: {
-            name: "Error Message",
-        },
-        isRequired: {
-            name: "Required",
-        },
-        readOnly: {
-            name: "Read Only",
-        },
-        invert: {
-            name: "Invert",
-        },
-        inputOnlyLabel: {},
-    },
-    args: {
-        label: "default label",
-        sublabel: "",
-        showHints: true,
-        hintsTitle: "Hints",
-        hintsBtnLabel: "Hints",
-        // hintsSubtitle: "",
-        infoTooltip: "",
-        errorMessage: "", //gets converted into the appropriate errorMsgs prop below
-        isRequired: false,
-        invert: false,
-        readOnly: false,
-        inputOnlyLabel: "Shows only if label is not defined. AND readOnly = true",
-    },
-};
-var dummyData1 = [
-    "आप इस व्यक्ति को कैसे जानते हैं?",
-    "वे कहाँ रहते हैं?",
-    "क्या आप हमें इस व्यक्ति के बारे में कोई एक छोटी सी घटना बता सकते हैं? इस से पाठक को इस व्यक्ति को समझने मे आसानी होगी।",
-    "आपकी इस व्यक्ति से पहचान कैसे हुई?",
-];
-var dummyData2 = [
-    "What do you want to write about this person?",
-    "What did this person do?",
-    "Why are you writing this story? What should we learn from it?",
-    "What do you want to write about this person?",
-    "What did this person do?",
-    "Why are you writing this story? What should we learn from it?",
-    "What do you want to write about this person?",
-    "What did this person do?",
-    "Why are you writing this story? What should we learn from it?",
-    "What do you want to write about this person?",
-];
-var Block_Label = function (args) {
-    // return () => {
-    // document.getElementsByTagName("body")[0].removeChild(hintsRootElem);
-    // };
-    var errorMsgs = args.errorMessage ? args.errorMessage.split(",") : undefined;
-    return (React.createElement("div", 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"))));
-};
-exports.Block_Label = Block_Label;