oolib 2.17.3 → 2.17.6
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/ActionMenu/index.js +21 -11
- package/dist/components/ActionMenu/styled.d.ts +2 -1
- package/dist/components/ActionMenu/styled.js +29 -24
- package/dist/components/Banners/index.js +3 -2
- package/dist/components/Banners/index.styled.js +2 -1
- package/dist/components/Buttons/index.js +15 -4
- package/dist/components/OKELink/index.d.ts +1 -1
- package/dist/components/OKELink/index.js +4 -4
- package/dist/icons/custom/index.js +15 -20
- package/package.json +1 -1
|
@@ -41,9 +41,11 @@ var Typo_1 = require("../Typo");
|
|
|
41
41
|
var utils_1 = require("./utils");
|
|
42
42
|
var styled_1 = require("./styled");
|
|
43
43
|
var ActionMenu = function (_a) {
|
|
44
|
-
var _b
|
|
44
|
+
var _b, _c;
|
|
45
|
+
var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, buttonText = _a.buttonText, sideEffect = _a.sideEffect;
|
|
45
46
|
var actionMenuRef = (0, react_1.useRef)(null);
|
|
46
|
-
var
|
|
47
|
+
var optionsWrapperRef = (0, react_1.useRef)(null);
|
|
48
|
+
var _f = (0, react_1.useState)(false), showActions = _f[0], setShowActions = _f[1];
|
|
47
49
|
(0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
|
|
48
50
|
(0, react_1.useEffect)(function () {
|
|
49
51
|
// if you want this click to trigger a sideeffect in parent.
|
|
@@ -52,18 +54,26 @@ var ActionMenu = function (_a) {
|
|
|
52
54
|
}, [showActions]);
|
|
53
55
|
if (!actions || actions.length === 0)
|
|
54
56
|
return null;
|
|
57
|
+
var getOpsRect = function () { var _a; return (_a = optionsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); };
|
|
55
58
|
return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
|
|
56
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, children: buttonText, invert: invert, onClick: function (e) {
|
|
59
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, iconSize: 'M', children: buttonText, invert: invert, onClick: function (e) {
|
|
57
60
|
e.stopPropagation();
|
|
58
61
|
setShowActions(!showActions);
|
|
59
62
|
}, active: showActions }),
|
|
60
|
-
react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {
|
|
64
|
+
align: align,
|
|
65
|
+
invert: invert,
|
|
66
|
+
optionsHeight: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.height,
|
|
67
|
+
optionsWidth: (_c = getOpsRect()) === null || _c === void 0 ? void 0 : _c.width,
|
|
68
|
+
showActions: showActions
|
|
69
|
+
}),
|
|
70
|
+
react_1.default.createElement(styled_1.StyledOptionsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
|
|
71
|
+
var ActionButton = action.buttonComp || styled_1.StyledOption;
|
|
72
|
+
return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
|
|
73
|
+
action.onClick && action.onClick(ev);
|
|
74
|
+
setShowActions(false);
|
|
75
|
+
}, key: action.display, invert: invert }),
|
|
76
|
+
react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
|
|
77
|
+
})))));
|
|
68
78
|
};
|
|
69
79
|
exports.ActionMenu = ActionMenu;
|
|
@@ -27,41 +27,46 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.
|
|
30
|
+
exports.StyledOption = exports.StyledOptionsWrapper = exports.StyledActionsDropMenu = exports.StyledActionMenu = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
33
|
var mixins_1 = require("../../themes/mixins");
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100;
|
|
34
|
+
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80;
|
|
35
|
+
var pointerHeight = 10;
|
|
37
36
|
exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: max-content;\n"], ["\n position: relative;\n width: max-content;\n"])));
|
|
38
|
-
exports.StyledActionsDropMenu = styled_components_1.default.div(
|
|
39
|
-
var
|
|
40
|
-
return
|
|
41
|
-
},
|
|
37
|
+
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n transform: translateY(100%);\n z-index: 1001;\n transform-origin: left top;\n ", ";\n overflow: hidden;\n width: ", ";\n height: ", ";\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n \n"], ["\n position: absolute;\n bottom: 0;\n transform: translateY(100%);\n z-index: 1001;\n transform-origin: left top;\n ", ";\n overflow: hidden;\n width: ", ";\n height: ", ";\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n \n"])), (0, mixins_1.transition)("height"), function (_a) {
|
|
38
|
+
var optionsWidth = _a.optionsWidth;
|
|
39
|
+
return optionsWidth + "px";
|
|
40
|
+
}, function (_a) {
|
|
41
|
+
var showActions = _a.showActions, optionsHeight = _a.optionsHeight;
|
|
42
|
+
return showActions ? (optionsHeight + pointerHeight) + "px" || "auto" : 0;
|
|
43
|
+
}, function (_a) {
|
|
42
44
|
var align = _a.align;
|
|
43
|
-
return align ==
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}, greyColor5, function (_a) {
|
|
45
|
+
return align == "center"
|
|
46
|
+
? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n left: 2rem;\n transform: translate(-50%, 100%);\n "], ["\n left: 2rem;\n transform: translate(-50%, 100%);\n "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ": 0;\n "], ["\n ", ": 0;\n "])), align);
|
|
47
|
+
});
|
|
48
|
+
exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n padding: 0.6rem 0;\n border: 1px solid ", ";\n background-color: ", ";\n border-radius: 2px;\n\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n"], ["\n position: absolute;\n bottom: 0;\n padding: 0.6rem 0;\n border: 1px solid ", ";\n background-color: ", ";\n border-radius: 2px;\n\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n"])), function (_a) {
|
|
48
49
|
var invert = _a.invert;
|
|
49
|
-
return invert ? greyColor70 :
|
|
50
|
+
return (invert ? greyColor70 : greyColor5);
|
|
51
|
+
}, function (_a) {
|
|
52
|
+
var invert = _a.invert;
|
|
53
|
+
return (invert ? greyColor80 : white);
|
|
50
54
|
}, function (_a) {
|
|
51
55
|
var align = _a.align;
|
|
52
|
-
return align
|
|
56
|
+
return align === "center"
|
|
57
|
+
? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ": 1rem;\n "], ["\n ", ": 1rem;\n "])), align);
|
|
53
58
|
}, function (_a) {
|
|
54
59
|
var invert = _a.invert;
|
|
55
|
-
return invert ?
|
|
60
|
+
return (invert ? greyColor80 : greyColor5);
|
|
56
61
|
});
|
|
57
|
-
exports.
|
|
62
|
+
exports.StyledOption = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover {\n background-color: ", ";\n }\n"], ["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
58
63
|
var align = _a.align;
|
|
59
|
-
return align ===
|
|
64
|
+
return (align === "center" ? "center" : "left");
|
|
60
65
|
}, function (_a) {
|
|
61
66
|
var invert = _a.invert;
|
|
62
|
-
return invert ? white : greyColor100;
|
|
63
|
-
}, (0, mixins_1.transition)(
|
|
64
|
-
var invert = _a.invert
|
|
65
|
-
return invert ?
|
|
66
|
-
}
|
|
67
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
67
|
+
return (invert ? white : greyColor100);
|
|
68
|
+
}, (0, mixins_1.transition)("background-color"), function (_a) {
|
|
69
|
+
var invert = _a.invert;
|
|
70
|
+
return invert ? greyColor70 : greyColor10;
|
|
71
|
+
});
|
|
72
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -75,7 +75,8 @@ var BannerAlert = function (_a) {
|
|
|
75
75
|
var _c = (0, react_1.useState)(0), top = _c[0], setTop = _c[1];
|
|
76
76
|
(0, react_1.useEffect)(function () {
|
|
77
77
|
setTimeout(function () {
|
|
78
|
-
var ele = document.
|
|
78
|
+
var ele = document.getElementById("bannerInfo");
|
|
79
|
+
console.log({ ele: ele, h: ele.offsetHeight });
|
|
79
80
|
setTop(ele.offsetHeight);
|
|
80
81
|
}, 100);
|
|
81
82
|
});
|
|
@@ -85,6 +86,6 @@ exports.BannerAlert = BannerAlert;
|
|
|
85
86
|
var BannerInfo = function (_a) {
|
|
86
87
|
var _b;
|
|
87
88
|
var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER;
|
|
88
|
-
return (react_1.default.createElement(index_styled_1.BannerInfoStyled,
|
|
89
|
+
return (react_1.default.createElement(index_styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, bottomStroke: false })); })));
|
|
89
90
|
};
|
|
90
91
|
exports.BannerInfo = BannerInfo;
|
|
@@ -63,7 +63,8 @@ exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 |
|
|
|
63
63
|
return (color === "dark" ? white : "");
|
|
64
64
|
}, (0, mixins_1.mediaQuery)("sm"));
|
|
65
65
|
exports.BannerStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"])));
|
|
66
|
-
exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: sticky;\n z-index: 10000000;\n width: 100%;\n ", ";\n\n ", "\n"], ["\n position: sticky;\n z-index: 10000000;\n width: 100%;\n ", ";\n\n ", "\n"])), function (
|
|
66
|
+
exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: sticky;\n z-index: 10000000;\n width: 100%;\n ", ";\n\n ", "\n"], ["\n position: sticky;\n z-index: 10000000;\n width: 100%;\n ", ";\n\n ", "\n"])), function (_a) {
|
|
67
|
+
var top = _a.top;
|
|
67
68
|
return top && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: ", "px;\n "], ["\n top: ", "px;\n "])), top);
|
|
68
69
|
}, (0, transitions_1.transition)("top"));
|
|
69
70
|
exports.BannerInfoStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: sticky;\n z-index: 10000000;\n top: 0;\n width: 100%;\n"], ["\n position: sticky;\n z-index: 10000000;\n top: 0;\n width: 100%;\n"])));
|
|
@@ -47,16 +47,27 @@ var DisplayIcon = function (_a) {
|
|
|
47
47
|
};
|
|
48
48
|
var ButtonStyledWrapper = function (_a) {
|
|
49
49
|
var props = _a.props, variant = _a.variant;
|
|
50
|
-
var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active,
|
|
50
|
+
var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize;
|
|
51
51
|
var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
|
|
52
52
|
var composition = (icon || iconAfter) && displayText
|
|
53
53
|
? "icon+text"
|
|
54
54
|
: !displayText && "iconOnly";
|
|
55
|
-
var size =
|
|
55
|
+
var size = composition === 'icon+text'
|
|
56
|
+
? (S && 'S') || 'M' //icon+text defaults to 'M'
|
|
57
|
+
: (M && 'M') || 'S'; //iconOnly defaults to 'S'
|
|
58
|
+
/**
|
|
59
|
+
* In rare cases, even if the button is 'S'
|
|
60
|
+
* we need the icon to be 'M'
|
|
61
|
+
* e.g. the DotsThree icon in ActionMenu
|
|
62
|
+
*/
|
|
63
|
+
var calcIconSize = function () {
|
|
64
|
+
var thisSize = iconSize || size;
|
|
65
|
+
return thisSize === 'S' ? 15 : 20;
|
|
66
|
+
};
|
|
56
67
|
return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: onClick, onMouseDown: onMouseDown, composition: composition, width: width, color: color },
|
|
57
|
-
icon && react_1.default.createElement(DisplayIcon, { icon: icon, size:
|
|
68
|
+
icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: calcIconSize() }),
|
|
58
69
|
displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
|
|
59
|
-
iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, size:
|
|
70
|
+
iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, size: calcIconSize() })));
|
|
60
71
|
};
|
|
61
72
|
var Button = function (_a) {
|
|
62
73
|
var props = _a.props, variant = _a.variant;
|
|
@@ -25,7 +25,7 @@ var styled_1 = require("./styled");
|
|
|
25
25
|
var utils_2 = require("./utils");
|
|
26
26
|
var AvatarDisplay_1 = require("./comps/AvatarDisplay");
|
|
27
27
|
var OKELink = function (_a) {
|
|
28
|
-
var invert = _a.invert, disabled = _a.disabled, color = _a.color, invertUnderline = _a.invertUnderline, linkType = _a.linkType, linkProp = _a.link, to = _a.to, storyBookTheme = _a.storyBookTheme, text = _a.text, children = _a.children, onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter,
|
|
28
|
+
var invert = _a.invert, disabled = _a.disabled, color = _a.color, invertUnderline = _a.invertUnderline, linkType = _a.linkType, linkProp = _a.link, to = _a.to, storyBookTheme = _a.storyBookTheme, text = _a.text, children = _a.children, onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, _b = _a.iconSize, iconSize = _b === void 0 ? 15 : _b, avatar = _a.avatar, avatarTitle = _a.avatarTitle;
|
|
29
29
|
var localize = (0, utilsOolib_1.useLocale)();
|
|
30
30
|
var theme = (0, styled_components_1.useTheme)();
|
|
31
31
|
var link = linkProp || to;
|
|
@@ -47,8 +47,8 @@ var OKELink = function (_a) {
|
|
|
47
47
|
target: "_blank"
|
|
48
48
|
})),
|
|
49
49
|
AvatarComp && react_1.default.createElement(AvatarComp, { value: avatar, title: avatarTitle, invert: invert }),
|
|
50
|
-
PrefixIconComp && react_1.default.createElement(PrefixIconComp, { color: iconColor, size: iconSize
|
|
51
|
-
react_1.default.createElement("span", { className: "text" }, localize(text || children)),
|
|
52
|
-
SuffixIconComp && react_1.default.createElement(SuffixIconComp, { color: iconColor, size: iconSize
|
|
50
|
+
PrefixIconComp && react_1.default.createElement(PrefixIconComp, { color: iconColor, size: iconSize }),
|
|
51
|
+
react_1.default.createElement("span", { className: "text", style: !PrefixIconComp && !SuffixIconComp ? { verticalAlign: 'initial' } : {} }, localize(text || children)),
|
|
52
|
+
SuffixIconComp && react_1.default.createElement(SuffixIconComp, { color: iconColor, size: iconSize })));
|
|
53
53
|
};
|
|
54
54
|
exports.OKELink = OKELink;
|
|
@@ -90,24 +90,19 @@ var IndiaFlag = function (props) { return (react_1.default.createElement("svg",
|
|
|
90
90
|
react_1.default.createElement("path", { fill: "#3D58DB", d: "M15 20a5 5 0 1010 0 5 5 0 00-10 0zm8.75 0a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }),
|
|
91
91
|
react_1.default.createElement("path", { fill: "#3D58DB", d: "M19.993 21.076l-.713 3.9.414-3.943-1.784 3.541 1.509-3.667-2.71 2.896 2.482-3.094-3.416 2.015 3.252-2.269-3.845.971 3.76-1.261-3.963-.151 3.963-.151-3.76-1.262 3.845.972-3.252-2.27 3.415 2.015-2.48-3.093 2.709 2.895-1.509-3.667 1.784 3.542-.414-3.944.713 3.9.714-3.9-.415 3.944 1.784-3.542-1.509 3.667 2.71-2.895-2.481 3.093 3.415-2.015-3.252 2.27 3.845-.972-3.76 1.262 3.963.15-3.963.152 3.76 1.261-3.845-.971 3.252 2.27-3.415-2.016 2.48 3.094-2.709-2.896 1.509 3.668-1.784-3.542.415 3.944-.714-3.901z" })))); };
|
|
92
92
|
exports.IndiaFlag = IndiaFlag;
|
|
93
|
-
var KenyaFlag = function (props) { return (react_1.default.createElement("svg", { width: props.size ||
|
|
94
|
-
react_1.default.createElement("mask", { id: "
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
react_1.default.createElement("path", { fill: "#
|
|
98
|
-
|
|
99
|
-
react_1.default.createElement("path", {
|
|
100
|
-
react_1.default.createElement("path", {
|
|
101
|
-
react_1.default.createElement("path", { d: "
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 29.333c1.246 0 6.25-4.178 6.25-9.333s-5.004-9.333-6.25-9.333c-1.246 0-6.25 4.178-6.25 9.333s5.004 9.333 6.25 9.333z", fill: "#fff" })),
|
|
109
|
-
react_1.default.createElement("g", { mask: "url(#b)" },
|
|
110
|
-
react_1.default.createElement("path", { d: "M8.125 28.167c4.832 0 8.75-3.657 8.75-8.167s-3.918-8.167-8.75-8.167S-.625 15.49-.625 20s3.918 8.167 8.75 8.167zM31.875 28.167c4.833 0 8.75-3.657 8.75-8.167s-3.917-8.167-8.75-8.167c-4.832 0-8.75 3.657-8.75 8.167s3.918 8.167 8.75 8.167z", fill: "#272727" }),
|
|
111
|
-
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.25 18.752c.57-.379 1-2.026 1-4.002s-.43-3.623-1-4.002v8.004zm-.625-.106c-.507-.52-.875-2.068-.875-3.896 0-1.828.368-3.376.875-3.896v7.792zm0 2.708v7.792c-.507-.52-.875-2.068-.875-3.896 0-1.828.368-3.376.875-3.896zm.625 7.898v-8.004c.57.379 1 2.026 1 4.002s-.43 3.623-1 4.002z", fill: "#F7FCFF" }),
|
|
112
|
-
react_1.default.createElement("path", { d: "M20 18.833c.69 0 1.25.523 1.25 1.167s-.56 1.167-1.25 1.167-1.25-.523-1.25-1.167.56-1.167 1.25-1.167z", fill: "#F7FCFF" })))); };
|
|
93
|
+
var KenyaFlag = function (props) { return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 40, height: props.size || 40, fill: "none", viewBox: "0 0 40 40" },
|
|
94
|
+
react_1.default.createElement("mask", { id: "mask0_4893_23143", style: { maskType: "alpha" }, width: "40", height: "28", x: "0", y: "6", maskUnits: "userSpaceOnUse" },
|
|
95
|
+
react_1.default.createElement("path", { fill: "#fff", d: "M40 6H0v28h40V6z" })),
|
|
96
|
+
react_1.default.createElement("g", { mask: "url(#mask0_4893_23143)" },
|
|
97
|
+
react_1.default.createElement("path", { fill: "#272727", fillRule: "evenodd", d: "M5 6c-2.761 0-5 1.919-5 4.286V14h40v-3.714C40 7.919 37.761 6 35 6H5z", clipRule: "evenodd" }),
|
|
98
|
+
react_1.default.createElement("path", { fill: "#4E8B1D", fillRule: "evenodd", d: "M0 26v3.714C0 32.081 2.239 34 5 34h30c2.761 0 5-1.919 5-4.286V26H0z", clipRule: "evenodd" }),
|
|
99
|
+
react_1.default.createElement("path", { fill: "#E31D1C", d: "M.976 16H0v8h41v-8H.976z" }),
|
|
100
|
+
react_1.default.createElement("path", { fill: "#fff", d: "M24.276 11.099c.238-.455.877-.953 1.919-1.492a.133.133 0 01.115-.002c.063.028.088.098.058.156l-10.79 20.646-.561-.256 9.51-18.199c-.43-.066-.514-.35-.251-.853z" }),
|
|
101
|
+
react_1.default.createElement("path", { fill: "#fff", d: "M16.716 11.099c.263.503.179.787-.252.853l9.51 18.2-.561.255-10.79-20.646c-.03-.058-.004-.128.058-.156a.133.133 0 01.116.002c1.041.54 1.68 1.037 1.919 1.492z" }),
|
|
102
|
+
react_1.default.createElement("path", { fill: "#E31D1C", fillRule: "evenodd", d: "M20.502 29.848c1.245 0 6.25-4.178 6.25-9.333s-5.005-9.333-6.25-9.333c-1.246 0-6.25 4.178-6.25 9.333s5.004 9.333 6.25 9.333z", clipRule: "evenodd" }),
|
|
103
|
+
react_1.default.createElement("path", { fill: "#E31D1C", fillRule: "evenodd", d: "M20.502 29.848c1.245 0 6.25-4.178 6.25-9.333s-5.005-9.333-6.25-9.333c-1.246 0-6.25 4.178-6.25 9.333s5.004 9.333 6.25 9.333z", clipRule: "evenodd" }),
|
|
104
|
+
react_1.default.createElement("path", { fill: "#F7FCFF", fillRule: "evenodd", d: "M20.758 19.268c.573-.38 1.004-2.035 1.004-4.02 0-1.983-.43-3.638-1.004-4.018v8.038zm0 10.545v-8.038c.573.38 1.004 2.035 1.004 4.02 0 1.983-.43 3.638-1.004 4.018z", clipRule: "evenodd" }),
|
|
105
|
+
react_1.default.createElement("path", { fill: "#F7FCFF", d: "M20.507 19.35c.693 0 1.255.524 1.255 1.172 0 .647-.562 1.171-1.255 1.171-.694 0-1.256-.524-1.256-1.171s.563-1.172 1.256-1.172z" }),
|
|
106
|
+
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
|
+
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" })))); };
|
|
113
108
|
exports.KenyaFlag = KenyaFlag;
|