oolib 2.17.5 → 2.17.8
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.d.ts +1 -2
- package/dist/components/ActionMenu/index.js +23 -13
- package/dist/components/ActionMenu/styled.d.ts +2 -1
- package/dist/components/ActionMenu/styled.js +42 -25
- package/dist/components/Buttons/index.js +15 -4
- package/dist/components/OKELink/index.d.ts +1 -1
- package/dist/components/OKELink/index.js +9 -8
- package/dist/icons/custom/index.js +15 -20
- package/package.json +1 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
export function ActionMenu({ icon, invert, actions, align,
|
|
1
|
+
export function ActionMenu({ icon, invert, actions, align, sideEffect }: {
|
|
2
2
|
icon?: string;
|
|
3
3
|
invert: any;
|
|
4
4
|
actions: any;
|
|
5
5
|
align?: string;
|
|
6
|
-
buttonText: any;
|
|
7
6
|
sideEffect: any;
|
|
8
7
|
}): JSX.Element;
|
|
@@ -41,29 +41,39 @@ 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, //most likely will never change
|
|
46
|
+
invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, sideEffect = _a.sideEffect // if you want this click to trigger a sideeffect in parent. e.g in table elem we set table overflow to unset when action menu is open
|
|
47
|
+
;
|
|
45
48
|
var actionMenuRef = (0, react_1.useRef)(null);
|
|
46
|
-
var
|
|
49
|
+
var optionsWrapperRef = (0, react_1.useRef)(null);
|
|
50
|
+
var _f = (0, react_1.useState)(false), showActions = _f[0], setShowActions = _f[1];
|
|
47
51
|
(0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
|
|
48
52
|
(0, react_1.useEffect)(function () {
|
|
49
|
-
// if you want this click to trigger a sideeffect in parent.
|
|
50
|
-
//e.g in table elem we set table overflow to unset when action menu is open
|
|
51
53
|
sideEffect && sideEffect(showActions);
|
|
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,
|
|
59
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, iconSize: 'M', 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({}, 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,58 @@ 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
|
-
|
|
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;
|
|
36
|
+
/**
|
|
37
|
+
* we add bottom, left and right margin on the StyledOptionsWrapper
|
|
38
|
+
* & increase the width by 20 and height by 10 of StyledActionsDropMenu
|
|
39
|
+
* so that the dropshadow shows (since StyledActionsDropMenu has overflow hidden)
|
|
40
|
+
*
|
|
41
|
+
* this offset needs to be cancelled by the absolute positioning of StyledActionsDropMenu
|
|
42
|
+
*/
|
|
43
|
+
var offset = 10;
|
|
37
44
|
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
|
-
},
|
|
45
|
+
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"], ["\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"])), (0, mixins_1.transition)("height"), function (_a) {
|
|
46
|
+
var optionsWidth = _a.optionsWidth;
|
|
47
|
+
return (optionsWidth + (offset * 2)) + "px";
|
|
48
|
+
}, function (_a) {
|
|
49
|
+
var showActions = _a.showActions, optionsHeight = _a.optionsHeight;
|
|
50
|
+
return showActions ? (optionsHeight + pointerHeight + offset) + "px" || "auto" : 0;
|
|
51
|
+
}, function (_a) {
|
|
42
52
|
var align = _a.align;
|
|
43
|
-
return align ==
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}, greyColor5, function (_a) {
|
|
53
|
+
return align == "center"
|
|
54
|
+
? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n left: 1.5rem;\n transform: translate(-50%, 100%);\n "], ["\n left: 1.5rem;\n transform: translate(-50%, 100%);\n "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ": ", "px;\n "], ["\n ", ": ", "px;\n "])), align, 0 - offset);
|
|
55
|
+
});
|
|
56
|
+
exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n border: 1px solid ", ";\n background-color: ", ";\n border-radius: 2px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n margin: 0 ", "px;\n \n //pointer outline\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 //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid \n ", ";\n z-index: 1;\n }\n"], ["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n border: 1px solid ", ";\n background-color: ", ";\n border-radius: 2px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n margin: 0 ", "px;\n \n //pointer outline\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 //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid \n ", ";\n z-index: 1;\n }\n"])), function (_a) {
|
|
48
57
|
var invert = _a.invert;
|
|
49
|
-
return invert ? greyColor70 :
|
|
58
|
+
return (invert ? greyColor70 : greyColor5);
|
|
50
59
|
}, function (_a) {
|
|
60
|
+
var invert = _a.invert;
|
|
61
|
+
return (invert ? greyColor80 : white);
|
|
62
|
+
}, offset, function (_a) {
|
|
51
63
|
var align = _a.align;
|
|
52
|
-
return align
|
|
64
|
+
return align === "center"
|
|
65
|
+
? (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 ", ": 0.5rem;\n "], ["\n ", ": 0.5rem;\n "])), align);
|
|
53
66
|
}, function (_a) {
|
|
54
67
|
var invert = _a.invert;
|
|
55
|
-
return invert ? greyColor70 :
|
|
56
|
-
})
|
|
57
|
-
exports.StyledActionBtn = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover{\n background-color: ", ";\n color: ", ";\n }\n"], ["\n white-space: nowrap;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover{\n background-color: ", ";\n color: ", ";\n }\n"])), function (_a) {
|
|
68
|
+
return (invert ? greyColor70 : greyColor5);
|
|
69
|
+
}, function (_a) {
|
|
58
70
|
var align = _a.align;
|
|
59
|
-
return align ===
|
|
71
|
+
return align === "center"
|
|
72
|
+
? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ": 0.65rem;\n "], ["\n ", ": 0.65rem;\n "])), align);
|
|
60
73
|
}, function (_a) {
|
|
61
74
|
var invert = _a.invert;
|
|
62
|
-
return invert ?
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
75
|
+
return (invert ? greyColor80 : white);
|
|
76
|
+
});
|
|
77
|
+
exports.StyledOption = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n text-align: left;\n padding: 0.25rem 1.2rem;\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: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
78
|
+
var invert = _a.invert;
|
|
79
|
+
return (invert ? white : greyColor100);
|
|
80
|
+
}, (0, mixins_1.transition)("background-color"), function (_a) {
|
|
81
|
+
var invert = _a.invert;
|
|
82
|
+
return invert ? greyColor70 : greyColor10;
|
|
83
|
+
});
|
|
84
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -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;
|
|
@@ -39,16 +39,17 @@ var OKELink = function (_a) {
|
|
|
39
39
|
}, invertUnderline: invertUnderline, invert: invert, disabled: disabled, color: color }, (linkType === 'action' ?
|
|
40
40
|
{ as: 'span' }
|
|
41
41
|
: linkType === 'external' ?
|
|
42
|
+
{
|
|
43
|
+
href: !disabled ? (0, utils_1.injectHttps)(link) : '#',
|
|
44
|
+
target: "_blank"
|
|
45
|
+
} :
|
|
42
46
|
{
|
|
43
47
|
as: react_router_dom_1.Link,
|
|
44
48
|
to: !disabled ? link : '#'
|
|
45
|
-
}
|
|
46
|
-
href: !disabled ? (0, utils_1.injectHttps)(link) : '#',
|
|
47
|
-
target: "_blank"
|
|
48
|
-
})),
|
|
49
|
+
})),
|
|
49
50
|
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
|
|
51
|
+
PrefixIconComp && react_1.default.createElement(PrefixIconComp, { color: iconColor, size: iconSize }),
|
|
52
|
+
react_1.default.createElement("span", { className: "text", style: !PrefixIconComp && !SuffixIconComp ? { verticalAlign: 'initial' } : {} }, localize(text || children)),
|
|
53
|
+
SuffixIconComp && react_1.default.createElement(SuffixIconComp, { color: iconColor, size: iconSize })));
|
|
53
54
|
};
|
|
54
55
|
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;
|