oolib 2.11.3 → 2.12.0

package/dist/components/ActionMenu/index.d.ts

@@ -0,0 +1,8 @@
+export function ActionMenu({ icon, invert, actions, align, buttonText, sideEffect }: {
+    icon: any;
+    invert: any;
+    actions: any;
+    align?: string;
+    buttonText: any;
+    sideEffect: any;
+}): JSX.Element;

package/dist/components/ActionMenu/index.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionMenu = void 0;
+var react_1 = __importStar(require("react"));
+var Buttons_1 = require("../Buttons");
+var Typo_1 = require("../Typo");
+var styled_1 = require("./styled");
+var ActionMenu = function (_a) {
+    var icon = _a.icon, invert = _a.invert, actions = _a.actions, _b = _a.align, align = _b === void 0 ? 'left' : _b, buttonText = _a.buttonText, sideEffect = _a.sideEffect;
+    var actionMenuRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(false), showActions = _c[0], setShowActions = _c[1];
+    (0, react_1.useEffect)(function () {
+        // 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
+        sideEffect && sideEffect(showActions);
+    }, [showActions]);
+    if (!actions || actions.length === 0)
+        return null;
+    return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
+        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon || 'DotsThree', children: buttonText, invert: invert, onClick: function (e) {
+                e.stopPropagation();
+                setShowActions(!showActions);
+            } }),
+        react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfolded: showActions }, { align: align, invert: invert }), actions.map(function (action) {
+            react_1.default.createElement(styled_1.StyledActionBtn, __assign({}, action.props, { onClick: function (ev) {
+                    action.onClick && action.onClick;
+                }, key: action.display, invert: invert }),
+                react_1.default.createElement(Typo_1.SANS_2, null, action.display));
+        }))));
+};
+exports.ActionMenu = ActionMenu;

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

@@ -0,0 +1,3 @@
+export const StyledActionMenu: any;
+export const StyledActionsDropMenu: any;
+export const StyledActionBtn: any;

package/dist/components/ActionMenu/styled.js

@@ -0,0 +1,57 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledActionBtn = exports.StyledActionsDropMenu = exports.StyledActionMenu = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../themes");
+var mixins_1 = require("../../themes/mixins");
+var Buttons_1 = require("../Buttons");
+var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80;
+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"])));
+exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  ", "\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 10000;\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  overflow: hidden; // for clipping animation\n  clip: rect( auto, auto, ", ", auto);\n  ", "\n\n  &::after{\n      content: '';\n      width: 1rem;\n      height: 1rem;\n      \n      position: absolute;\n      top: 0;\n\n      transform: translate(0, -100%);\n      ", "\n      border-style: solid;\n      border-color: transparent transparent ", " transparent;\n      border-width: 0px 8px 8px 8px\n  }\n"], ["\n  position: absolute;\n  bottom: 0;\n  transform: translateY(100%);\n  ", "\n  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 10000;\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  overflow: hidden; // for clipping animation\n  clip: rect( auto, auto, ", ", auto);\n  ", "\n\n  &::after{\n      content: '';\n      width: 1rem;\n      height: 1rem;\n      \n      position: absolute;\n      top: 0;\n\n      transform: translate(0, -100%);\n      ", "\n      border-style: solid;\n      border-color: transparent transparent ", " transparent;\n      border-width: 0px 8px 8px 8px\n  }\n"])), function (_a) {
+    var align = _a.align;
+    return align == 'center' ? (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(["", ": 0;"], ["", ": 0;"])), align);
+}, greyColor5, function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor80 : white;
+}, function (_a) {
+    var unfolded = _a.unfolded;
+    return unfolded ? '20rem' : 0;
+}, (0, mixins_1.transition)('clip', 0.5), function (_a) {
+    var align = _a.align;
+    return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 50%;\n          transform: translate(-50%, 100%);\n        "], ["\n          left: 50%;\n          transform: translate(-50%, 100%);\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ": 1rem;"], ["", ": 1rem;"])), align);
+}, greyColor10);
+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  }\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  }\n"])), function (_a) {
+    var align = _a.align;
+    return align === 'center' ? 'center' : 'left';
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? white : greyColor80;
+}, (0, mixins_1.transition)('background-color'), greyColor10);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/OKELink/comps/AvatarDisplay/styled.js

@@ -28,20 +28,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledAvatarTXT = exports.StyledAvatarImg = void 0;
-var macro_1 = __importStar(require("styled-components/macro"));
+var styled_components_1 = __importStar(require("styled-components"));
 var utilsOolib_1 = require("../../../../utilsOolib");
 var themes_1 = require("../../../../themes");
 var index_styled_1 = require("../../../Typo/index.styled");
 var greyColor80 = themes_1.colors.greyColor80, white = themes_1.colors.white;
 var commonStyle = function (_a) {
     var size = _a.size, invert = _a.invert, theme = _a.theme;
-    return (0, macro_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"], ["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"])), isNaN(size) ? size : size + 'rem', isNaN(size) ? size : size + 'rem', invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors), white);
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"], ["\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background-color:  ", ";\n  color: ", ";\n  \n"])), isNaN(size) ? size : size + 'rem', isNaN(size) ? size : size + 'rem', invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor10)(theme.colors), white);
 };
-exports.StyledAvatarImg = macro_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 8px;\n"], ["\n  ", "\n  font-size: 8px;\n"])), function (_a) {
+exports.StyledAvatarImg = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 8px;\n"], ["\n  ", "\n  font-size: 8px;\n"])), function (_a) {
     var theme = _a.theme, invert = _a.invert, size = _a.size;
     return commonStyle({ theme: theme, invert: invert, size: size });
 });
-exports.StyledAvatarTXT = (0, macro_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: grid;\n  place-items: center;\n"], ["\n  ", "\n  display: grid;\n  place-items: center;\n"])), function (_a) {
+exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: grid;\n  place-items: center;\n"], ["\n  ", "\n  display: grid;\n  place-items: center;\n"])), function (_a) {
     var theme = _a.theme, invert = _a.invert, size = _a.size;
     return commonStyle({ theme: theme, invert: invert, size: size });
 });

package/dist/components/TabBar/index.d.ts

@@ -1,4 +1,4 @@
-export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTabs, borderTop, borderBottom, }: {
+export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTabs, queryParamKey }: {
     id: any;
     options: any;
     value: any;
@@ -6,6 +6,5 @@ export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTa
     updateUrl: any;
     style: any;
     emptyTabs: any;
-    borderTop?: boolean;
-    borderBottom?: boolean;
+    queryParamKey?: string;
 }): JSX.Element;

package/dist/components/TabBar/index.js

@@ -8,30 +8,27 @@ var react_1 = __importDefault(require("react"));
 var Typo_1 = require("../Typo");
 var index_styled_1 = require("./index.styled");
 var react_router_dom_1 = require("react-router-dom");
-var Container_1 = require("../Container");
 var TabBar = function (_a) {
-    var id = _a.id, options = _a.options, value = _a.value, onChange = _a.onChange, updateUrl = _a.updateUrl, style = _a.style, emptyTabs = _a.emptyTabs, _b = _a.borderTop, borderTop = _b === void 0 ? true : _b, _c = _a.borderBottom, borderBottom = _c === void 0 ? true : _c;
+    var id = _a.id, options = _a.options, value = _a.value, onChange = _a.onChange, updateUrl = _a.updateUrl, style = _a.style, emptyTabs = _a.emptyTabs, _b = _a.queryParamKey, queryParamKey = _b === void 0 ? 'activeTab' : _b;
     var history = (0, react_router_dom_1.useHistory)();
     var location = (0, react_router_dom_1.useLocation)();
     var handleClick = function (value) {
         if (updateUrl) {
             var params = new URLSearchParams(location.search);
-            params.set("activeTab", JSON.stringify(value));
+            params.set(queryParamKey, JSON.stringify(value));
             history.push({
                 search: params.toString(),
             });
         }
-        onChange(null, value);
+        onChange && onChange(null, value);
     };
-    return (react_1.default.createElement(index_styled_1.TabBarStyled, { top: borderTop, bottom: borderBottom },
-        react_1.default.createElement(Container_1.Container, null,
-            react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
-                react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id }, options.map(function (op) {
-                    var tabHasError = emptyTabs && emptyTabs.includes(op.value);
-                    var tabIsActive = value && op.value === value.value;
-                    return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { style1: style === "1", key: op.value, active: tabIsActive, error: tabHasError },
-                        react_1.default.createElement(index_styled_1.TabBarTabStyled, { active: tabIsActive, error: tabHasError, style1: style === "1", onClick: function () { return handleClick(op); } },
-                            react_1.default.createElement(Typo_1.SANS_2, { semibold: style === "1" }, op.display))));
-                }))))));
+    return (react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
+        react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id }, options.map(function (op) {
+            var tabHasError = emptyTabs && emptyTabs.includes(op.value);
+            var tabIsActive = value && op.value === value.value;
+            return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { style1: style === "1", key: op.value, active: tabIsActive, error: tabHasError },
+                react_1.default.createElement(index_styled_1.TabBarTabStyled, { active: tabIsActive, error: tabHasError, style1: style === "1", onClick: function () { return handleClick(op); } },
+                    react_1.default.createElement(Typo_1.SANS_2, { semibold: style === "1" }, op.display))));
+        }))));
 };
 exports.TabBar = TabBar;

package/dist/components/TabBar/index.styled.d.ts

@@ -1,4 +1,3 @@
-export const TabBarStyled: any;
 export const TabBarContainerStyled: any;
 export const TabBarRowStyled: any;
 export const TabBarTabWrapper: any;

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

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = void 0;
+exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
@@ -58,21 +58,20 @@ var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (template
     var active = _a.active;
     return active && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      border-radius: 0.2rem;\n      color: ", ";\n    "], ["\n      border-radius: 0.2rem;\n      color: ", ";\n    "])), white);
 });
-exports.TabBarStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n  border-top: ", ";\n  border-bottom: ", ";\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  border-top: ", ";\n  border-bottom: ", ";\n"])), white, function (_a) {
-    var top = _a.top;
-    return top && "0.1rem solid ".concat(greyColor5);
-}, function (_a) {
-    var bottom = _a.bottom;
-    return bottom && "0.1rem solid ".concat(greyColor5);
-});
-exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
-exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+// export const TabBarStyled = styled.div`
+//   background-color: ${white};
+//   z-index: 1000;
+//   border-top: ${({ top }) => top && `0.1rem solid ${greyColor5}`};
+//   border-bottom: ${({ bottom }) => bottom && `0.1rem solid ${greyColor5}`};
+// `;
+exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+exports.TabBarRowStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var style1 = _a.style1;
     return (style1 ? tabBarWrapperStyle1 : tabBarWrapperStyle2);
 });
-exports.TabBarTabStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
+exports.TabBarTabStyled = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 0.8rem 2rem;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
     var style1 = _a.style1;
     return (style1 ? tabBarTabStyle1 : tabBarTabStyle2);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/components/Tooltip/index.js

@@ -33,7 +33,7 @@ var Tooltip = function (_a) {
     return (react_1.default.createElement(styled_1.StyledWrapper, { onMouseEnter: function () { return setShowTooltip(true); }, onMouseLeave: function () { return setShowTooltip(false); } },
         children,
         react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: showTooltip, style: style },
-            react_1.default.createElement(Typo_1.SANS_2, null, text),
+            react_1.default.createElement(Typo_1.SANS_2, { light: true, style: { lineHeight: '0.2em' } }, text),
             react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
                 react_1.default.createElement(styled_1.StyledArrow, { position: position })))));
 };

package/dist/components/Tooltip/styled.js

@@ -35,26 +35,26 @@ var util_1 = require("./util");
 exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n"], ["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n"])));
 var greyColor15 = themes_1.colors.greyColor15, white = themes_1.colors.white;
 var clipPaths = {
-    top: "0% 0%, 50% 65.4%, 100% 0%",
-    bottom: '50% 34.6%, 100% 100%, 0% 100%',
-    right: '100% 0%, 50% 50%, 100% 100%',
-    left: '0% 0%, 50% 50%, 0% 100%',
+    top: "0% 0%, 47% 65.4%, 52% 65.4%, 100% 0",
+    bottom: '47% 34.6%, 50% 34.6%, 100% 100%, 0% 100%',
+    right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
+    left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
 };
-exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  padding: 0.4rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"], ["\n  ", ";\n  ", "\n\n  padding: 0.4rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"])), function (_a) {
+exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  padding: 0rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"], ["\n  ", ";\n  ", "\n\n  padding: 0rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"])), function (_a) {
     var show = _a.show;
     return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["opacity:1; z-index: 5;"], ["opacity:1; z-index: 5;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["opacity:0; z-index: -5;"], ["opacity:0; z-index: -5;"])));
 }, (0, mixins_1.transition)('opacity', 0.1), white, greyColor15, function (_a) {
     var position = _a.position;
     return (0, util_1.positionTooltip)(position);
 });
-exports.StyledArrowOutline = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 1.3rem;\n  height: 1.3rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"], ["\n  background-color: ", ";\n  width: 1.3rem;\n  height: 1.3rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"])), greyColor15, function (_a) {
+exports.StyledArrowOutline = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"], ["\n  background-color: ", ";\n  width: 1rem;\n  height: 1rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"])), greyColor15, function (_a) {
     var position = _a.position;
     return clipPaths[position];
 }, function (_a) {
     var position = _a.position;
     return (0, util_1.positionArrowBorder)(position);
 });
-exports.StyledArrow = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject([" // the the white part\n  background-color: ", ";\n  display:inline-block;\n  width: 0.9rem;\n  height: 0.9rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"], [" // the the white part\n  background-color: ", ";\n  display:inline-block;\n  width: 0.9rem;\n  height: 0.9rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"])), white, function (_a) {
+exports.StyledArrow = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject([" // the the white part\n  background-color: ", ";\n  display:inline-block;\n  width: 0.85rem;\n  height: 0.85rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"], [" // the the white part\n  background-color: ", ";\n  display:inline-block;\n  width: 0.85rem;\n  height: 0.85rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"])), white, function (_a) {
     var position = _a.position;
     return clipPaths[position];
 }, function (_a) {

package/dist/components/Tooltip/util/index.js

@@ -21,10 +21,10 @@ var positionArrowBorder = function (position) {
     switch (position) {
         case 'top':
         case 'bottom':
-            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", ";\n        left: 50%;\n        transform: translateX(-6.5px); // 13/2     \n      "], ["\n        ", ";\n        left: 50%;\n        transform: translateX(-6.5px); // 13/2     \n      "])), position + ': 100.5%');
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", ";\n        left: 50%;\n        transform: translateX(-5px); // 13/2 - 1.5 of the arrow itself    \n      "], ["\n        ", ";\n        left: 50%;\n        transform: translateX(-5px); // 13/2 - 1.5 of the arrow itself    \n      "])), position + ': 100%');
         case 'left':
         case 'right':
-            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", ";\n        top: 50%;\n        transform: translateY(-6.5px); // 13/2\n      "], ["\n        ", ";\n        top: 50%;\n        transform: translateY(-6.5px); // 13/2\n      "])), position + ': 100.5%');
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", ";\n        top: 50%;\n        transform: translateY(-5px); // 13/2\n      "], ["\n        ", ";\n        top: 50%;\n        transform: translateY(-5px); // 13/2\n      "])), position + ': 100%');
     }
 };
 exports.positionArrowBorder = positionArrowBorder;
@@ -32,10 +32,10 @@ var positionArrow = function (position) {
     switch (position) {
         case 'top':
         case 'bottom':
-            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", ";\n        left: 14%;\n      "], ["\n        ", ";\n        left: 14%;\n      "])), position + ': 9%');
+            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", ";\n        left: 8%;\n      "], ["\n        ", ";\n        left: 8%;\n      "])), position + ': -2%');
         case 'left':
         case 'right':
-            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        ", ";\n        top: 14%;\n      "], ["\n        ", ";\n        top: 14%;\n      "])), position + ': 7%');
+            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        ", ";\n        top: 8%;\n      "], ["\n        ", ";\n        top: 8%;\n      "])), position + ': -2%');
     }
 };
 exports.positionArrow = positionArrow;

package/dist/icons/index.d.ts

@@ -45,6 +45,7 @@ export namespace icons {
     export { Cards };
     export { SignOut };
     export { CheckCircle };
+    export { Circle };
     export { ImageSquare };
     export { ListDashes };
     export { ListNumbers };
@@ -123,6 +124,7 @@ import { CheckSquareOffset } from "phosphor-react";
 import { Cards } from "phosphor-react";
 import { SignOut } from "phosphor-react";
 import { CheckCircle } from "phosphor-react";
+import { Circle } from "phosphor-react";
 import { ImageSquare } from "phosphor-react";
 import { ListDashes } from "phosphor-react";
 import { ListNumbers } from "phosphor-react";

package/dist/icons/index.js

@@ -50,6 +50,7 @@ exports.icons = {
     Cards: phosphor_react_1.Cards,
     SignOut: phosphor_react_1.SignOut,
     CheckCircle: phosphor_react_1.CheckCircle,
+    Circle: phosphor_react_1.Circle,
     ImageSquare: phosphor_react_1.ImageSquare,
     ListDashes: phosphor_react_1.ListDashes,
     ListNumbers: phosphor_react_1.ListNumbers,

package/dist/index.d.ts

@@ -19,3 +19,4 @@ export { Section } from "./components/Section";
 export { UserRoleBadge } from "./components/UserRoleBadge";
 export { OKELink } from "./components/OKELink";
 export { Tooltip } from "./components/Tooltip";
+export { ActionMenu } from "./components/ActionMenu";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
 __exportStar(require("./components/Typo"), exports);
@@ -40,6 +40,8 @@ var OKELink_1 = require("./components/OKELink");
 Object.defineProperty(exports, "OKELink", { enumerable: true, get: function () { return OKELink_1.OKELink; } });
 var Tooltip_1 = require("./components/Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+var ActionMenu_1 = require("./components/ActionMenu");
+Object.defineProperty(exports, "ActionMenu", { enumerable: true, get: function () { return ActionMenu_1.ActionMenu; } });
 __exportStar(require("./components/TabBar"), exports);
 __exportStar(require("./components/Banners"), exports);
 __exportStar(require("./themes/mixins"), exports);

package/package.json

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