oolib 2.26.2 → 2.26.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BlockLabel/index.styled.js +1 -1
- package/dist/components/Hints/index.js +27 -13
- package/dist/components/Hints/styled.js +29 -11
- package/dist/components/Modal/index.js +4 -4
- package/dist/components/Modal/index.styled.js +1 -1
- package/dist/icons/custom/index.d.ts +1 -1
- package/dist/icons/custom/index.js +40 -4
- package/dist/themes/mixins/boxShadows.js +4 -3
- package/dist/utils/comps/index.d.ts +2 -1
- package/dist/utils/comps/index.js +2 -2
- package/package.json +1 -1
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.StyledBlockLabel = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
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"])));
|
|
12
|
+
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"])));
|
|
13
13
|
var templateObject_1;
|
|
@@ -22,16 +22,29 @@ var Modal_1 = require("../Modal");
|
|
|
22
22
|
var mixins_1 = require("../../themes/mixins");
|
|
23
23
|
var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
|
|
24
24
|
var index_styled_1 = require("../Modal/index.styled");
|
|
25
|
-
var
|
|
25
|
+
var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15;
|
|
26
26
|
var TriangleIconComp = function (props) { return (React.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
27
27
|
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 }))); };
|
|
28
|
+
var getPositionStyles = function (position) {
|
|
29
|
+
var styles = {
|
|
30
|
+
left: {
|
|
31
|
+
lightBox: { top: "-2rem", left: "-31.5rem" },
|
|
32
|
+
arrow: { top: ".7rem", left: "-2rem", transform: "rotate(90deg)" },
|
|
33
|
+
},
|
|
34
|
+
bottom: {
|
|
35
|
+
lightBox: { top: "4.5rem", left: "-2rem" },
|
|
36
|
+
arrow: { top: "3.5rem", left: "6rem" },
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
return styles[position];
|
|
40
|
+
};
|
|
28
41
|
var Hints = function (_a) {
|
|
29
42
|
var id = _a.id, hints = _a.hints, title = _a.title, subtitle = _a.subtitle;
|
|
30
43
|
//get the context state
|
|
31
44
|
var _b = (0, contextApi_1.useHintsContext)(), active = _b.active, setActive = _b.setActive;
|
|
32
45
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
33
46
|
var lightBoxRef = (0, react_1.useRef)();
|
|
34
|
-
var _c = (0, react_1.useState)(
|
|
47
|
+
var _c = (0, react_1.useState)(getPositionStyles("left")), styles = _c[0], setStyles = _c[1];
|
|
35
48
|
//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
|
|
36
49
|
var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
|
|
37
50
|
(0, react_1.useEffect)(function () {
|
|
@@ -40,14 +53,15 @@ var Hints = function (_a) {
|
|
|
40
53
|
var lightBoxRect = lightBoxRef.current.getBoundingClientRect();
|
|
41
54
|
// by default open on leftside, if the below condition is true than open at the bottom of hints
|
|
42
55
|
//note for future: arrow comp is fixed and lightbox will move to place itself within the visible area
|
|
43
|
-
if (lightBoxRect.
|
|
44
|
-
setStyles(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
56
|
+
if (lightBoxRect.left < 0) {
|
|
57
|
+
setStyles(getPositionStyles("bottom"));
|
|
58
|
+
// setStyles({
|
|
59
|
+
// lightBox: { top: "4rem", right: "0" },
|
|
60
|
+
// arrow: { top: `none`, right: "3.5rem", transform: "none" },
|
|
61
|
+
// });
|
|
48
62
|
}
|
|
49
63
|
}, [active]);
|
|
50
|
-
return (React.createElement("div",
|
|
64
|
+
return (React.createElement("div", null,
|
|
51
65
|
" ",
|
|
52
66
|
React.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
|
|
53
67
|
React.createElement(Buttons_1.ButtonGhost, { S: true, active: active === id ? true : false, icon: "LightbulbFilament" }, "Hints")),
|
|
@@ -56,12 +70,12 @@ var Hints = function (_a) {
|
|
|
56
70
|
React.createElement(TriangleIconComp, null)),
|
|
57
71
|
React.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
|
|
58
72
|
React.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
|
|
59
|
-
React.createElement("div", { style: { position: "absolute", top: "-
|
|
60
|
-
React.createElement(comps_1.DisplayIcon, {
|
|
73
|
+
React.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
|
|
74
|
+
React.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
|
|
61
75
|
React.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
|
|
62
|
-
React.createElement(Typo_1.SANS_4_5, { capitalize: true }, title || "title"),
|
|
63
|
-
React.createElement(Typo_1.SANS_3_4, { capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle")
|
|
64
|
-
|
|
76
|
+
React.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
|
|
77
|
+
React.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
|
|
78
|
+
React.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
|
|
65
79
|
React.createElement(styled_1.StyledLightBoxContent, null,
|
|
66
80
|
React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
|
|
67
81
|
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(""); } },
|
|
@@ -10,26 +10,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.StyledTriangle = exports.StyledLightBoxList = exports.StyledLightBoxContent = exports.StyledLightBoxHeader = exports.StyledLightbox = exports.StyledHints = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
|
-
var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15;
|
|
13
|
+
var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100;
|
|
14
14
|
exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
15
|
-
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) {
|
|
15
|
+
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) {
|
|
16
16
|
var style = _a.style;
|
|
17
17
|
return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : "-1rem");
|
|
18
18
|
}, function (_a) {
|
|
19
19
|
var style = _a.style;
|
|
20
20
|
return ((style === null || style === void 0 ? void 0 : style.right) ? style.right : "-31.5rem");
|
|
21
|
+
}, function (_a) {
|
|
22
|
+
var top = _a.style.top;
|
|
23
|
+
return top;
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var left = _a.style.left;
|
|
26
|
+
return left;
|
|
27
|
+
}, function (_a) {
|
|
28
|
+
var bottom = _a.style.bottom;
|
|
29
|
+
return bottom;
|
|
30
|
+
}, function (_a) {
|
|
31
|
+
var right = _a.style.right;
|
|
32
|
+
return right;
|
|
21
33
|
});
|
|
22
34
|
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"])));
|
|
23
|
-
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"])));
|
|
24
|
-
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
|
|
25
|
-
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) {
|
|
26
|
-
var
|
|
27
|
-
return
|
|
35
|
+
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"])));
|
|
36
|
+
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);
|
|
37
|
+
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) {
|
|
38
|
+
var top = _a.style.top;
|
|
39
|
+
return top;
|
|
28
40
|
}, function (_a) {
|
|
29
|
-
var
|
|
30
|
-
return
|
|
41
|
+
var left = _a.style.left;
|
|
42
|
+
return left;
|
|
31
43
|
}, function (_a) {
|
|
32
|
-
var
|
|
33
|
-
return
|
|
44
|
+
var bottom = _a.style.bottom;
|
|
45
|
+
return bottom;
|
|
46
|
+
}, function (_a) {
|
|
47
|
+
var right = _a.style.right;
|
|
48
|
+
return right;
|
|
49
|
+
}, function (_a) {
|
|
50
|
+
var transform = _a.style.transform;
|
|
51
|
+
return transform;
|
|
34
52
|
});
|
|
35
53
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -127,12 +127,12 @@ var ModalLarge = function (_a) {
|
|
|
127
127
|
};
|
|
128
128
|
var ModalHeaderStyle2 = function () {
|
|
129
129
|
return (react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Container, null,
|
|
130
|
-
react_1.default.createElement("div", { style: { position: "absolute", top: "-
|
|
130
|
+
react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
|
|
131
131
|
react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
|
|
132
132
|
react_1.default.createElement(index_styled_1.StyledModalHeaderStyle2Title, null,
|
|
133
|
-
react_1.default.createElement(Typo_1.SANS_4_5, { capitalize: true }, title || "title"),
|
|
134
|
-
react_1.default.createElement(Typo_1.SANS_3_4, { capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle")
|
|
135
|
-
|
|
133
|
+
react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
|
|
134
|
+
react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle || "subtitle"),
|
|
135
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose, icon: "X" }))));
|
|
136
136
|
};
|
|
137
137
|
var genHeader = function () {
|
|
138
138
|
var headerStyles = {
|
|
@@ -23,5 +23,5 @@ exports.StyledModalLargeHeader = styled_components_1.default.header(templateObje
|
|
|
23
23
|
exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
24
24
|
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);
|
|
25
25
|
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);
|
|
26
|
-
exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\npadding-top:
|
|
26
|
+
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"])));
|
|
27
27
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -17,4 +17,4 @@ export function BadgeMod(props: any): any;
|
|
|
17
17
|
export function BadgeVetted(props: any): any;
|
|
18
18
|
export function IndiaFlag(props: any): any;
|
|
19
19
|
export function KenyaFlag(props: any): any;
|
|
20
|
-
export function ModalBulbIcon(
|
|
20
|
+
export function ModalBulbIcon(): any;
|
|
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.ModalBulbIcon = exports.KenyaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var themes_1 = require("../../themes");
|
|
20
|
+
var comps_1 = require("../../utils/comps");
|
|
20
21
|
var yellow = themes_1.colors.yellow, greyColor100 = themes_1.colors.greyColor100;
|
|
21
22
|
var IndexIcon = function (_a) {
|
|
22
23
|
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",
|
|
|
106
107
|
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" }),
|
|
107
108
|
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" })))); };
|
|
108
109
|
exports.KenyaFlag = KenyaFlag;
|
|
109
|
-
var ModalBulbIcon = function (
|
|
110
|
-
react_1.default.createElement("
|
|
111
|
-
|
|
112
|
-
|
|
110
|
+
var ModalBulbIcon = function () {
|
|
111
|
+
return (react_1.default.createElement("div", { style: {
|
|
112
|
+
width: "4.4rem",
|
|
113
|
+
height: "4.4rem",
|
|
114
|
+
borderRadius: "50%",
|
|
115
|
+
backgroundColor: "#33a4ff",
|
|
116
|
+
position: "relative",
|
|
117
|
+
display: "flex",
|
|
118
|
+
alignItems: "center",
|
|
119
|
+
justifyContent: "center",
|
|
120
|
+
} },
|
|
121
|
+
react_1.default.createElement("div", { style: { position: "absolute" } },
|
|
122
|
+
react_1.default.createElement(comps_1.DisplayIcon, { size: 28, color: "white", icon: "LightbulbFilament" }))));
|
|
123
|
+
};
|
|
113
124
|
exports.ModalBulbIcon = ModalBulbIcon;
|
|
125
|
+
// export const ModalBulbIcon = (props) => (
|
|
126
|
+
// <svg
|
|
127
|
+
// width={45}
|
|
128
|
+
// height={45}
|
|
129
|
+
// fill="none"
|
|
130
|
+
// xmlns="http://www.w3.org/2000/svg"
|
|
131
|
+
// {...props}
|
|
132
|
+
// >
|
|
133
|
+
// <rect width={45} height={45} rx={24} fill="#33A4FF" />
|
|
134
|
+
// <path
|
|
135
|
+
// d="M19 37h10M24 33v-7M20 22l4 4 4-4"
|
|
136
|
+
// stroke="#fff"
|
|
137
|
+
// strokeWidth={3.2}
|
|
138
|
+
// strokeLinecap="round"
|
|
139
|
+
// strokeLinejoin="round"
|
|
140
|
+
// />
|
|
141
|
+
// <path
|
|
142
|
+
// 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"
|
|
143
|
+
// stroke="#fff"
|
|
144
|
+
// strokeWidth={3.2}
|
|
145
|
+
// strokeLinecap="round"
|
|
146
|
+
// strokeLinejoin="round"
|
|
147
|
+
// />
|
|
148
|
+
// </svg>
|
|
149
|
+
// )
|
|
@@ -5,7 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
7
|
exports.innerShadow0 = exports.boxShadow1 = exports.boxShadow0 = void 0;
|
|
8
|
-
|
|
9
|
-
exports.
|
|
10
|
-
exports.
|
|
8
|
+
var styled_components_1 = require("styled-components");
|
|
9
|
+
exports.boxShadow0 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);\n"], ["\n box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);\n"])));
|
|
10
|
+
exports.boxShadow1 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n"], ["\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n"])));
|
|
11
|
+
exports.innerShadow0 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);\n"], ["\n box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);\n"])));
|
|
11
12
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.DisplayIcon = void 0;
|
|
4
4
|
var icons_1 = require("../../icons");
|
|
5
5
|
var DisplayIcon = function (_a) {
|
|
6
|
-
var icon = _a.icon, size = _a.size, color = _a.color;
|
|
6
|
+
var icon = _a.icon, size = _a.size, color = _a.color, _b = _a.weight, weight = _b === void 0 ? "bold" : _b;
|
|
7
7
|
var IconComp = icons_1.icons[icon];
|
|
8
|
-
return React.createElement(React.Fragment, null, IconComp && React.createElement(IconComp, { size: size, color: color, weight:
|
|
8
|
+
return React.createElement(React.Fragment, null, IconComp && React.createElement(IconComp, { size: size, color: color, weight: weight }));
|
|
9
9
|
};
|
|
10
10
|
exports.DisplayIcon = DisplayIcon;
|