oolib 2.26.2 → 2.26.3

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

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0rem;\n  margin-bottom: 1rem;\n"])));
+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"])));
 var templateObject_1;

package/dist/components/Hints/index.js

@@ -22,16 +22,29 @@ var Modal_1 = require("../Modal");
 var mixins_1 = require("../../themes/mixins");
 var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
 var index_styled_1 = require("../Modal/index.styled");
-var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15;
+var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15;
 var TriangleIconComp = function (props) { return (React.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { d: "m8.894 1.206-7.59 8.28C.422 10.448 1.104 12 2.41 12h15.18c1.305 0 1.988-1.552 1.106-2.514l-7.59-8.28a1.5 1.5 0 0 0-2.212 0Z", fill: "#fff", stroke: greyColor15 }))); };
+var getPositionStyles = function (position) {
+    var styles = {
+        left: {
+            lightBox: { top: "-2rem", left: "-31.5rem" },
+            arrow: { top: ".7rem", left: "-2rem", transform: "rotate(90deg)" },
+        },
+        bottom: {
+            lightBox: { top: "4.5rem", left: "-2rem" },
+            arrow: { top: "3.5rem", left: "6rem" },
+        },
+    };
+    return styles[position];
+};
 var Hints = function (_a) {
     var id = _a.id, hints = _a.hints, title = _a.title, subtitle = _a.subtitle;
     //get the context state
     var _b = (0, contextApi_1.useHintsContext)(), active = _b.active, setActive = _b.setActive;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var lightBoxRef = (0, react_1.useRef)();
-    var _c = (0, react_1.useState)({}), styles = _c[0], setStyles = _c[1];
+    var _c = (0, react_1.useState)(getPositionStyles("left")), styles = _c[0], setStyles = _c[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 () {
@@ -40,14 +53,15 @@ var Hints = function (_a) {
         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.right > screenWidth) {
-            setStyles({
-                lightBox: { top: "4rem", right: "0" },
-                arrow: { top: "none", right: "3.5rem", transform: "none" },
-            });
+        if (lightBoxRect.left < 0) {
+            setStyles(getPositionStyles("bottom"));
+            // setStyles({
+            //   lightBox: { top: "4rem", right: "0" },
+            //   arrow: { top: `none`, right: "3.5rem", transform: "none" },
+            // });
         }
     }, [active]);
-    return (React.createElement("div", { style: { position: "relative" } },
+    return (React.createElement("div", null,
         " ",
         React.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
             React.createElement(Buttons_1.ButtonGhost, { S: true, active: active === id ? true : false, icon: "LightbulbFilament" }, "Hints")),
@@ -56,12 +70,12 @@ var Hints = function (_a) {
                 React.createElement(TriangleIconComp, null)),
             React.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
                 React.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
-                    React.createElement("div", { style: { position: "absolute", top: "-3rem" } },
-                        React.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
+                    React.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
+                        React.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
                     React.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
-                        React.createElement(Typo_1.SANS_4_5, { capitalize: true }, title || "title"),
-                        React.createElement(Typo_1.SANS_3_4, { capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle")),
-                    React.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" })),
+                        React.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
+                        React.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
+                        React.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
                 React.createElement(styled_1.StyledLightBoxContent, null,
                     React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
                         React.createElement(Typo_1.SANS_3, null, d))); })))))) : (React.createElement(Modal_1.ModalLarge, { isStorybook: true, headerStyle: "style2", id: "modal", title: "title", onClose: function () { return setActive(""); } },

package/dist/components/Hints/styled.js

@@ -10,26 +10,44 @@ 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 themes_1 = require("../../themes");
-var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15;
+var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100;
 exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n\n  border: 1px solid ", ";\n  z-index: 2;\n  width: 30rem;\n  height: 35rem;\n  background-color: white;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  border-radius: 2px;\n  top: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"], ["\n  background: ", ";\n  position: absolute;\n\n  border: 1px solid ", ";\n  z-index: 2;\n  width: 30rem;\n  height: 35rem;\n  background-color: white;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  border-radius: 2px;\n  top: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"])), white, greyColor15, function (_a) {
+exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n\n  border: 1px solid ", ";\n  z-index: 2;\n  width: 30rem;\n  height: 35rem;\n  background-color: white;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  border-radius: 2px;\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"], ["\n  background: ", ";\n  position: absolute;\n\n  border: 1px solid ", ";\n  z-index: 2;\n  width: 30rem;\n  height: 35rem;\n  background-color: white;\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  border-radius: 2px;\n  /* top: ", "; */\n  /* right: ", "; */\n\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n\n  display: flex;\n  flex-direction: column;\n"])), white, greyColor15, 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;\n  overflow-y: auto;\n"], ["\n  padding: 0.5rem 2rem;\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: \"\u00B7\";\n      font-size: 4.5rem;\n      vertical-align: middle;\n      line-height: 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: \"\u00B7\";\n      font-size: 4.5rem;\n      vertical-align: middle;\n      line-height: 0;\n    }\n  }\n"])));
-exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  transform: ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  transform: ", ";\n"])), function (_a) {
-    var style = _a.style;
-    return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : ".9rem");
+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      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      height: .5rem;\n      background-color: ", ";\n      border-radius: 50%;\n      flex-shrink: 0;\n    }\n  }\n"])), greyColor100);
+exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\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  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  right: ", ";\n  transform: ", ";\n\n  /* position:absolute; */\n  /* top:.7rem; */\n  /* left:-2rem; */\n  /* transform :rotate(90deg); */\n"])), function (_a) {
+    var top = _a.style.top;
+    return top;
 }, function (_a) {
-    var style = _a.style;
-    return ((style === null || style === void 0 ? void 0 : style.right) ? style.right : "-2rem");
+    var left = _a.style.left;
+    return left;
 }, function (_a) {
-    var style = _a.style;
-    return (style === null || style === void 0 ? void 0 : style.transform) ? style.transform : "rotate(-90deg)";
+    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/components/Modal/index.js

@@ -127,12 +127,12 @@ var ModalLarge = function (_a) {
     };
     var ModalHeaderStyle2 = function () {
         return (react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
-            react_1.default.createElement("div", { style: { position: "absolute", top: "-3rem" } },
+            react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
                 react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
             react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
-                react_1.default.createElement(Typo_1.SANS_4_5, { capitalize: true }, title || "title"),
-                react_1.default.createElement(Typo_1.SANS_3_4, { capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle")),
-            react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose, icon: "X" })));
+                react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
+                react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
+                react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose, icon: "X" }))));
     };
     var genHeader = function () {
         var headerStyles = {

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

@@ -23,5 +23,5 @@ exports.StyledModalLargeHeader = styled_components_1.default.header(templateObje
 exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.ModalsClassProvider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  .Modals {\n    width: 100%;\n    height: 100%;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    background: ", ";\n    z-index: 99999999;\n  }\n\n  .ModalSmall {\n    .ModalSmall__contentWrapper {\n      width: 100%;\n      position: absolute;\n      bottom: 0;\n      background-color: ", ";\n      .ModalSmall__close {\n        width: 100%;\n        display: flex;\n        justify-content: flex-end;\n      }\n      .ModalSmall__content {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        padding: 0 2rem 4rem 2rem;\n        .ModalSmall__content--subTitle {\n          margin-top: 0.5rem;\n        }\n      }\n    }\n  }\n\n  ", " {\n    .ModalSmall {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .ModalSmall__contentWrapper {\n        border: 2px solid ", ";\n        width: 50vw;\n        position: relative;\n        border-radius: 0.2rem;\n        .ModalSmall__content {\n          position: relative;\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          padding: 0 4rem 4rem 4rem;\n        }\n      }\n    }\n  }\n"], ["\n  .Modals {\n    width: 100%;\n    height: 100%;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    background: ", ";\n    z-index: 99999999;\n  }\n\n  .ModalSmall {\n    .ModalSmall__contentWrapper {\n      width: 100%;\n      position: absolute;\n      bottom: 0;\n      background-color: ", ";\n      .ModalSmall__close {\n        width: 100%;\n        display: flex;\n        justify-content: flex-end;\n      }\n      .ModalSmall__content {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        padding: 0 2rem 4rem 2rem;\n        .ModalSmall__content--subTitle {\n          margin-top: 0.5rem;\n        }\n      }\n    }\n  }\n\n  ", " {\n    .ModalSmall {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .ModalSmall__contentWrapper {\n        border: 2px solid ", ";\n        width: 50vw;\n        position: relative;\n        border-radius: 0.2rem;\n        .ModalSmall__content {\n          position: relative;\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          padding: 0 4rem 4rem 4rem;\n        }\n      }\n    }\n  }\n"])), greyColor100_opacity70, white, (0, mixins_1.mediaQuery)("sm"), white);
 exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\ndisplay: flex;\nborder-bottom: 1px solid ", ";\npadding: 1rem 2rem;\nposition: relative;\n\n"], ["\ndisplay: flex;\nborder-bottom: 1px solid ", ";\npadding: 1rem 2rem;\nposition: relative;\n\n"])), greyColor15);
-exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\npadding-top:1.5rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"], ["\npadding-top:1.5rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"])));
+exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\npadding-top:1rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"], ["\npadding-top:1rem;\ndisplay: flex;\nflex-grow: 1;\ngap: 1.5rem;\njustify-content: space-between;\nalign-items: center;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/icons/custom/index.d.ts

@@ -17,4 +17,4 @@ export function BadgeMod(props: any): any;
 export function BadgeVetted(props: any): any;
 export function IndiaFlag(props: any): any;
 export function KenyaFlag(props: any): any;
-export function ModalBulbIcon(props: any): any;
+export function ModalBulbIcon(): any;

package/dist/icons/custom/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalBulbIcon = exports.KenyaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
+var comps_1 = require("../../utils/comps");
 var yellow = themes_1.colors.yellow, greyColor100 = themes_1.colors.greyColor100;
 var IndexIcon = function (_a) {
     var _b = _a.color, color = _b === void 0 ? greyColor100 : _b, _c = _a.size, size = _c === void 0 ? 24 : _c;
@@ -106,8 +107,43 @@ var KenyaFlag = function (props) { return (react_1.default.createElement("svg",
         react_1.default.createElement("path", { fill: "#F7FCFF", fillRule: "evenodd", d: "M20.266 29.813v-8.038c-.573.38-1.005 2.035-1.005 4.02 0 1.983.432 3.638 1.005 4.018zM20.266 19.255v-8.038c-.573.38-1.005 2.035-1.005 4.02 0 1.983.432 3.638 1.005 4.018z", clipRule: "evenodd" }),
         react_1.default.createElement("path", { fill: "#272727", d: "M23.627 20.515c0-1.813.632-3.487 1.703-4.842.836 1.412 1.406 3.025 1.425 4.838.02 1.813-.586 3.395-1.425 4.847-1.07-1.355-1.703-3.03-1.703-4.843zM17.374 20.515c0-1.813-.633-3.487-1.703-4.842-.836 1.412-1.407 3.025-1.426 4.838-.02 1.813.586 3.395 1.425 4.847 1.07-1.355 1.704-3.03 1.704-4.843z" })))); };
 exports.KenyaFlag = KenyaFlag;
-var ModalBulbIcon = function (props) { return (react_1.default.createElement("svg", __assign({ width: 48, height: 48, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    react_1.default.createElement("rect", { width: 48, height: 48, rx: 24, fill: "#33A4FF" }),
-    react_1.default.createElement("path", { d: "M19 37h10M24 33v-7M20 22l4 4 4-4", stroke: "#fff", strokeWidth: 3.2, strokeLinecap: "round", strokeLinejoin: "round" }),
-    react_1.default.createElement("path", { d: "M17.838 28.877A9.982 9.982 0 0 1 14 21.056c-.03-5.42 4.34-9.927 9.759-10.054a10 10 0 0 1 6.418 17.862A3.037 3.037 0 0 0 29 31.247V32a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-.754a3.014 3.014 0 0 0-1.162-2.37v0Z", stroke: "#fff", strokeWidth: 3.2, strokeLinecap: "round", strokeLinejoin: "round" }))); };
+var ModalBulbIcon = function () {
+    return (react_1.default.createElement("div", { style: {
+            width: "4.4rem",
+            height: "4.4rem",
+            borderRadius: "50%",
+            backgroundColor: "#33a4ff",
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        } },
+        react_1.default.createElement("div", { style: { position: "absolute" } },
+            react_1.default.createElement(comps_1.DisplayIcon, { size: 28, color: "white", icon: "LightbulbFilament" }))));
+};
 exports.ModalBulbIcon = ModalBulbIcon;
+// export const ModalBulbIcon = (props) => (
+//   <svg
+//     width={45}
+//     height={45}
+//     fill="none"
+//     xmlns="http://www.w3.org/2000/svg"
+//     {...props}
+//   >
+//     <rect width={45} height={45} rx={24} fill="#33A4FF" />
+//     <path
+//       d="M19 37h10M24 33v-7M20 22l4 4 4-4"
+//       stroke="#fff"
+//       strokeWidth={3.2}
+//       strokeLinecap="round"
+//       strokeLinejoin="round"
+//     />
+//     <path
+//       d="M17.838 28.877A9.982 9.982 0 0 1 14 21.056c-.03-5.42 4.34-9.927 9.759-10.054a10 10 0 0 1 6.418 17.862A3.037 3.037 0 0 0 29 31.247V32a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-.754a3.014 3.014 0 0 0-1.162-2.37v0Z"
+//       stroke="#fff"
+//       strokeWidth={3.2}
+//       strokeLinecap="round"
+//       strokeLinejoin="round"
+//     />
+//   </svg>
+// )

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

@@ -1,5 +1,6 @@
-export function DisplayIcon({ icon, size, color }: {
+export function DisplayIcon({ icon, size, color, weight }: {
     icon: any;
     size: any;
     color: any;
+    weight?: string;
 }): any;

package/dist/utils/comps/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisplayIcon = void 0;
 var icons_1 = require("../../icons");
 var DisplayIcon = function (_a) {
-    var icon = _a.icon, size = _a.size, color = _a.color;
+    var icon = _a.icon, size = _a.size, color = _a.color, _b = _a.weight, weight = _b === void 0 ? "bold" : _b;
     var IconComp = icons_1.icons[icon];
-    return React.createElement(React.Fragment, null, IconComp && React.createElement(IconComp, { size: size, color: color, weight: "bold" }));
+    return React.createElement(React.Fragment, null, IconComp && React.createElement(IconComp, { size: size, color: color, weight: weight }));
 };
 exports.DisplayIcon = DisplayIcon;

package/package.json

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