oolib 2.11.2 → 2.11.3

package/dist/components/Banners/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -35,29 +39,35 @@ var ICONS = {
 var DisplayIcon = function (_a) {
     var color = _a.color;
     var IconComp = icons_1.icons[ICONS[color]];
-    return (react_1.default.createElement("div", { style: { color: color } }, IconComp && react_1.default.createElement(IconComp, { size: 24, weight: "bold" })));
+    return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: 20, weight: "bold" }));
 };
 var Banner = function (_a) {
-    var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon;
-    var _b = (0, react_1.useState)(0), height = _b[0], setHeight = _b[1];
+    var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon, _b = _a.bottomStroke, bottomStroke = _b === void 0 ? true : _b;
+    var _c = (0, react_1.useState)(0), height = _c[0], setHeight = _c[1];
     var ContainerRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
         var timer;
         setHeight(ContainerRef.current.scrollHeight);
         if (timeOut)
             timer = setTimeout(function () {
-                setHeight("0px");
-                handleRemove(null, id);
+                setHeight(0);
+                remove(null, id);
             }, timeOut);
         return function () { return (timeOut ? clearTimeout(timer) : null); };
     }, [cta, id, msg]);
-    return (react_1.default.createElement(index_styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, maxHeight: height },
-        react_1.default.createElement(index_styled_1.BannerWrapperStyled, { color: color },
+    var remove = function (e, id) {
+        setHeight(0);
+        setTimeout(function () {
+            handleRemove(e, id);
+        }, 300);
+    };
+    return (react_1.default.createElement(index_styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, height: height },
+        react_1.default.createElement(index_styled_1.BannerWrapperStyled, { bottomStroke: bottomStroke, color: color },
             react_1.default.createElement(index_styled_1.BannerStyled, null,
                 showIcon && react_1.default.createElement(DisplayIcon, { color: color }),
                 react_1.default.createElement(Typo_1.SANS_2, null, msg),
                 cta && (react_1.default.createElement(Buttons_1.ButtonSecondary, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: cta.action, invert: color === "dark" ? true : false }, cta === null || cta === void 0 ? void 0 : cta.text))),
-            react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return handleRemove(e, id); } }))));
+            react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return remove(e, id); } }))));
 };
 var BannerAlert = function (_a) {
     var _b;
@@ -68,6 +78,6 @@ exports.BannerAlert = BannerAlert;
 var BannerInfo = function (_a) {
     var _b;
     var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER;
-    return (react_1.default.createElement(index_styled_1.BannerInfoStyled, null, (_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 })); })));
+    return (react_1.default.createElement(index_styled_1.BannerInfoStyled, null, (_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 })); })));
 };
 exports.BannerInfo = BannerInfo;

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

@@ -3,12 +3,32 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.BannerInfoStyled = exports.BannerAlertStyled = exports.BannerStyled = exports.BannerWrapperStyled = exports.BannerAnimateStyled = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var transitions_1 = require("../../themes/mixins/transitions");
@@ -20,26 +40,29 @@ var colorConfig = {
     grey: { bgColor: greyColor5 },
     dark: { bgColor: greyColor100 },
 };
-exports.BannerAnimateStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  transition: inherit;\n  max-height: ", "px;\n"], ["\n  overflow: hidden;\n  transition: inherit;\n  max-height: ", "px;\n"])), function (_a) {
-    var maxHeight = _a.maxHeight;
-    return maxHeight;
+exports.BannerAnimateStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  ", "\n  height: ", "px;\n"], ["\n  overflow: hidden;\n  ", "\n  height: ", "px;\n"])), (0, transitions_1.transition)("height"), function (_a) {
+    var height = _a.height;
+    return height;
 });
-exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  box-shadow: inset 00px -2px 0px ", ";\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  box-shadow: inset 00px -2px 0px ", ";\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"])), greyColor15, function (_a) {
+exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  ", "\n\n  /* box-shadow: ", "; */\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  ", "\n\n  /* box-shadow: ", "; */\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"])), greyColor15, function (_a) {
     var _b;
     var color = _a.color;
     return (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.bgColor;
 }, function (_a) {
-    var _b;
-    var color = _a.color;
-    return (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.color;
+    var bottomStroke = _a.bottomStroke;
+    return bottomStroke && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 00px -2px 0px ", ";\n    "], ["\n      box-shadow: inset 00px -2px 0px ", ";\n    "])), function (_a) {
+        var _b;
+        var color = _a.color;
+        return (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.color;
+    });
+}, function (_a) {
+    var bottomStroke = _a.bottomStroke;
+    return bottomStroke && "";
 }, function (_a) {
     var color = _a.color;
     return (color === "dark" ? white : "");
 }, (0, mixins_1.mediaQuery)("sm"));
-exports.BannerStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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"])));
-exports.BannerAlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n  height:", "px;\n  ", "\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n  height:", "px;\n  ", "\n"])), function (_a) {
-    var height = _a.height;
-    return height;
-}, (0, transitions_1.transition)("max-height"));
-exports.BannerInfoStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n  ", "\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n  ", "\n"])), (0, transitions_1.transition)("max-height"));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+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"])));
+exports.BannerAlertStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n\n  .item-enter{\n\n  }\n\n\n  .item-enter-active {\n}\n.item-exit {\n  /* height: 0; */\n}\n.item-exit-active {\n  height: 0;\n  ", "\n}\n\n\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n\n  .item-enter{\n\n  }\n\n\n  .item-enter-active {\n}\n.item-exit {\n  /* height: 0; */\n}\n.item-exit-active {\n  height: 0;\n  ", "\n}\n\n\n"])), (0, transitions_1.transition)("height"));
+exports.BannerInfoStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Breadcrumbs/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/Buttons/index.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

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

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/OKELink/comps/AvatarDisplay/index.d.ts

@@ -0,0 +1,7 @@
+export function AvatarDisplay({ value, title: titleProp, style, size, invert }: {
+    value: any;
+    title: any;
+    style: any;
+    size?: number;
+    invert: any;
+}): JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarDisplay = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_js_1 = require("./styled.js");
+var AvatarDisplay = function (_a) {
+    var value = _a.value, titleProp = _a.title, style = _a.style, _b = _a.size, size = _b === void 0 ? 2.5 : _b, invert = _a.invert;
+    var title = titleProp || value.title;
+    var titleInitial = title && title[0].toUpperCase();
+    var imageURL = (value === null || value === void 0 ? void 0 : value.userUploaded) && (value === null || value === void 0 ? void 0 : value.userUploaded[0].publicUrl);
+    return (imageURL ?
+        react_1.default.createElement(styled_js_1.StyledAvatarImg, { invert: invert, size: size, style: style, src: imageURL, alt: "profile picture" })
+        :
+            react_1.default.createElement(styled_js_1.StyledAvatarTXT, { invert: invert, size: size, style: style }, titleInitial));
+};
+exports.AvatarDisplay = AvatarDisplay;

package/dist/components/OKELink/comps/AvatarDisplay/styled.d.ts

@@ -0,0 +1,2 @@
+export const StyledAvatarImg: any;
+export const StyledAvatarTXT: any;

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

@@ -0,0 +1,48 @@
+"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.StyledAvatarTXT = exports.StyledAvatarImg = void 0;
+var macro_1 = __importStar(require("styled-components/macro"));
+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);
+};
+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) {
+    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) {
+    var theme = _a.theme, invert = _a.invert, size = _a.size;
+    return commonStyle({ theme: theme, invert: invert, size: size });
+});
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,16 +1,18 @@
-export function OKELink({ invert, disabled, theme, color, invertUnderline, linkType, link: linkProp, to, text, children, onClick, icon, iconAfter, iconSize }: {
+export function OKELink({ invert, disabled, color, invertUnderline, linkType, link: linkProp, to, storyBookTheme, text, children, onClick, icon, iconAfter, iconSize, avatar, avatarTitle }: {
     invert: any;
     disabled: any;
-    theme: any;
     color: any;
     invertUnderline: any;
     linkType: any;
     link: any;
     to: any;
+    storyBookTheme: any;
     text: any;
     children: any;
     onClick: any;
     icon: any;
     iconAfter: any;
     iconSize: any;
+    avatar: any;
+    avatarTitle: any;
 }): JSX.Element;

package/dist/components/OKELink/index.js

@@ -17,18 +17,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OKELink = void 0;
 var react_1 = __importDefault(require("react"));
 var react_router_dom_1 = require("react-router-dom");
+var styled_components_1 = require("styled-components");
 var utilsOolib_1 = require("../../utilsOolib");
 var utils_1 = require("../../utils");
 var icons_1 = require("../../icons");
 var styled_1 = require("./styled");
 var utils_2 = require("./utils");
+var AvatarDisplay_1 = require("./comps/AvatarDisplay");
 var OKELink = function (_a) {
-    var invert = _a.invert, disabled = _a.disabled, theme = _a.theme, color = _a.color, invertUnderline = _a.invertUnderline, linkType = _a.linkType, linkProp = _a.link, to = _a.to, text = _a.text, children = _a.children, onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, iconSize = _a.iconSize;
+    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, iconSize = _a.iconSize, avatar = _a.avatar, avatarTitle = _a.avatarTitle;
     var localize = (0, utilsOolib_1.useLocale)();
+    var theme = (0, styled_components_1.useTheme)();
     var link = linkProp || to;
     var PrefixIconComp = icons_1.icons[icon];
     var SuffixIconComp = icons_1.icons[iconAfter];
-    var iconColor = (0, utils_2.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme });
+    var iconColor = (0, utils_2.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme || storyBookTheme });
+    var AvatarComp = avatar && AvatarDisplay_1.AvatarDisplay;
     return (react_1.default.createElement(styled_1.StyledLink, __assign({ onClick: function (ev) {
             ev.stopPropagation();
             linkType === 'action' && !disabled && onClick(ev);
@@ -42,6 +46,7 @@ var OKELink = function (_a) {
             href: !disabled ? (0, utils_1.injectHttps)(link) : '#',
             target: "_blank"
         })),
+        AvatarComp && react_1.default.createElement(AvatarComp, { value: avatar, title: avatarTitle, invert: invert }),
         PrefixIconComp && react_1.default.createElement(PrefixIconComp, { color: iconColor, size: iconSize || 15 }),
         react_1.default.createElement("span", { className: "text" }, localize(text || children)),
         SuffixIconComp && react_1.default.createElement(SuffixIconComp, { color: iconColor, size: iconSize || 15 })));

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

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

package/dist/components/TabBar/index.js

@@ -8,8 +8,9 @@ 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;
+    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 history = (0, react_router_dom_1.useHistory)();
     var location = (0, react_router_dom_1.useLocation)();
     var handleClick = function (value) {
@@ -22,14 +23,15 @@ var TabBar = function (_a) {
         }
         onChange(null, value);
     };
-    return (react_1.default.createElement(index_styled_1.TabBarStyled, 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.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))));
+                }))))));
 };
 exports.TabBar = TabBar;

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

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -29,9 +33,9 @@ var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var utilsOolib_1 = require("../../utilsOolib");
 var greyColor100 = themes_1.colors.greyColor100, greyColor10 = themes_1.colors.greyColor10, red = themes_1.colors.red, lightRed = themes_1.colors.lightRed, greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, none = themes_1.colors.none;
-var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), (0, mixins_1.transition)("background-color"), greyColor5, function (_a) {
+var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), (0, mixins_1.transition)("background-color"), greyColor10, function (_a) {
     var active = _a.active;
-    return active && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "])), greyColor5, function (_a) {
+    return active && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      background-color: ", ";\n      border-radius: 0.2rem;\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      background-color: ", ";\n      border-radius: 0.2rem;\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "])), greyColor5, function (_a) {
         var colors = _a.theme.colors;
         return (0, utilsOolib_1.getPrimaryColor100)(colors);
     });
@@ -44,24 +48,30 @@ var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_5 || (temp
     return (active ? "" : greyColor10);
 }, function (_a) {
     var active = _a.active;
-    return active && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      background-color: ", ";\n    "], ["\n      position: relative;\n      background-color: ", ";\n    "])), greyColor100);
+    return active && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      border-radius: 0.2rem;\n      position: relative;\n      background-color: ", ";\n    "], ["\n      border-radius: 0.2rem;\n      position: relative;\n      background-color: ", ";\n    "])), greyColor100);
 });
-var tabBarTabStyle1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 0.8rem 2rem;\n  white-space: nowrap;\n  ", "\n"], ["\n  padding: 0.8rem 2rem;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
+var tabBarTabStyle1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  white-space: nowrap;\n  ", "\n"], ["\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
     var error = _a.error;
     return error && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), red);
 });
 var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"], ["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"])), (0, mixins_1.multiTransition)("color"), function (_a) {
     var active = _a.active;
-    return active && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), white);
+    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  height: 4rem;\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  height: 4rem;\n"])), white);
-exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 100%;\n  width: fit-content;\n"], ["\n  height: 100%;\n  width: fit-content;\n"])));
-exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n"], ["\n  height: 100%;\n  display: flex;\n"])));
-exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  ", "\n"], ["\n  height: 100%;\n  ", "\n"])), function (_a) {
+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) {
     var style1 = _a.style1;
     return (style1 ? tabBarWrapperStyle1 : tabBarWrapperStyle2);
 });
-exports.TabBarTabStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  padding: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  padding: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
+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) {
     var style1 = _a.style1;
     return (style1 ? tabBarTabStyle1 : tabBarTabStyle2);
 });

package/dist/components/Tags/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

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

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/TextInputs/index.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -206,7 +210,7 @@ var URLInput = function (props) {
                     return [2 /*return*/, { type: 'success', msg: 'valid url' }];
                 case 3:
                     err_1 = _a.sent();
-                    if (/\b(([\w-]+:\/\/?|www[.])[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|\/)))/.test(value)) {
+                    if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/ig.test(value)) {
                         return [2 /*return*/, { type: 'success', msg: 'valid url' }];
                     }
                     return [2 /*return*/, { type: 'error', msg: 'Enter a valid url...' }];

package/dist/components/ToggleButton/styled.js

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
 var utilsOolib_1 = require("../../utilsOolib");
 var themes_1 = require("../../themes");
-var white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10;
+var white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor40 = themes_1.colors.greyColor40;
 exports.StyledToggleWrraper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n"])));
 exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"], ["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"])), function (_a) {
     var square = _a.square;
@@ -21,29 +21,32 @@ exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 ||
     var disabled = _a.disabled;
     return disabled ? 'not-allowed' : 'pointer';
 }, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
+    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled, invert = _a.invert;
     if (disabled)
-        return greyColor10;
+        return invert ? greyColor80 : greyColor10;
     if (inactive)
-        return (0, utilsOolib_1.getPrimaryColor40)(colors);
-    return (0, utilsOolib_1.getPrimaryColor100)(colors);
+        return greyColor70;
+    return invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
 }, function (_a) {
-    var colors = _a.theme.colors, disabled = _a.disabled;
-    return disabled ? greyColor10 : (0, utilsOolib_1.getPrimaryColorText)(colors);
+    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
+    return !disabled && (inactive ? greyColor40 : (0, utilsOolib_1.getPrimaryColorText)(colors));
 }, (0, mixins_1.transition)('background-color'));
-exports.StyledToggleButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  border-radius: ", ";\n  cursor: ", ";\n  border: 2px solid ", ";\n\n  position: absolute;\n  top: 0;\n  left: ", ";\n  ", "\n"], ["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  border-radius: ", ";\n  cursor: ", ";\n  border: 2px solid ", ";\n\n  position: absolute;\n  top: 0;\n  left: ", ";\n  ", "\n"])), white, function (_a) {
+exports.StyledToggleButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  border-radius: ", ";\n  cursor: ", ";\n  border: 2px solid ", ";\n\n  position: absolute;\n  top: 0;\n  left: ", ";\n  ", "\n"], ["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  border-radius: ", ";\n  cursor: ", ";\n  border: 2px solid ", ";\n\n  position: absolute;\n  top: 0;\n  left: ", ";\n  ", "\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor100 : white;
+}, function (_a) {
     var square = _a.square;
     return square ? '0.3rem' : '50%';
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled ? 'not-allowed' : 'pointer';
 }, function (_a) {
-    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled;
+    var colors = _a.theme.colors, inactive = _a.inactive, disabled = _a.disabled, invert = _a.invert;
     if (disabled)
-        return greyColor10;
+        return invert ? greyColor80 : greyColor10;
     if (inactive)
-        return (0, utilsOolib_1.getPrimaryColor40)(colors);
-    return (0, utilsOolib_1.getPrimaryColor100)(colors);
+        return greyColor70;
+    return invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
 }, function (_a) {
     var direction = _a.direction;
     return direction === 'left' ? '0' : 'calc(100% - 2rem)';

package/dist/components/Tooltip/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/Tooltip/styled.js

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/globalStyles/index.js

@@ -9,6 +9,7 @@ var styled_components_1 = require("styled-components");
 var themes_1 = require("../themes");
 var normalize_1 = require("./normalize");
 require("../assets/fonts/style.css");
+var mixins_1 = require("../themes/mixins");
 var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
+exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { \n  width: 0.7rem;// for vertical bars;\n  height: 0.5rem; //for vertical bars \n}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.4rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n", "{\n  ::-webkit-scrollbar { \n  width: 1rem;\n  height: 0.7rem;\n  }\n  ::-webkit-scrollbar-thumb {\n  border-radius: 0.5rem;\n  }\n}\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { \n  width: 0.7rem;// for vertical bars;\n  height: 0.5rem; //for vertical bars \n}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.4rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n", "{\n  ::-webkit-scrollbar { \n  width: 1rem;\n  height: 0.7rem;\n  }\n  ::-webkit-scrollbar-thumb {\n  border-radius: 0.5rem;\n  }\n}\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md'), greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
 var templateObject_1;

package/dist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.11.2",
+  "version": "2.11.3",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,19 +41,18 @@
     "chromatic": "^6.1.0",
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
-    "mdx-embed": "0.0.22",
-    "postcss-flexbugs-fixes": "^5.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
+    "react-router-dom": "^5.1.2",
     "semantic-release": "^18.0.0",
     "styled-components": "^5.3.1",
-    "webpack": "^5.58.1",
-    "webpack-cli": "^4.8.0"
+    "mdx-embed": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.1.2"
   },
   "config": {
     "commitizen": {
@@ -69,7 +68,6 @@
     "draftjs-conductor": "^2.2.0",
     "immutable": "^3.7.6",
     "modularscale-js": "^3.0.1",
-    "phosphor-react": "^1.3.1",
-    "react-router-dom": "^5.1.2"
+    "phosphor-react": "^1.3.1"
   }
 }