oolib 2.12.0 → 2.12.3

package/dist/components/ActionMenu/index.js

@@ -38,11 +38,13 @@ exports.ActionMenu = void 0;
 var react_1 = __importStar(require("react"));
 var Buttons_1 = require("../Buttons");
 var Typo_1 = require("../Typo");
+var utils_1 = require("./utils");
 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, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
     (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
@@ -55,11 +57,14 @@ var ActionMenu = function (_a) {
                 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;
+        react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfold: showActions }, { align: align, invert: invert }), actions.map(function (action) {
+            console.log(action);
+            var ActionButton = action.buttonComp || styled_1.StyledActionBtn;
+            return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
+                    action.onClick && action.onClick(ev);
+                    setShowActions(false);
                 }, key: action.display, invert: invert }),
-                react_1.default.createElement(Typo_1.SANS_2, null, action.display));
+                react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
         }))));
 };
 exports.ActionMenu = ActionMenu;

package/dist/components/ActionMenu/styled.js

@@ -34,18 +34,21 @@ 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) {
+exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: -5px;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px  rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"], ["\n  position: absolute;\n  bottom: -5px;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px  rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"])), function (_a) {
+    var unfold = _a.unfold;
+    return "scaleY(".concat(Number(unfold), ")");
+}, (0, mixins_1.transition)('transform'), 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);
+    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  "])), function (_a) {
+        var unfold = _a.unfold;
+        return "scaleY(".concat(Number(unfold), ")");
+    }) : (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);
+    return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 50%;\n          transform: translateX(-50%);\n        "], ["\n          left: 50%;\n          transform: translateX(-50%);\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;

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

@@ -0,0 +1 @@
+export function useTrackFocus(ref: any, setShowOptions: any, options?: {}): void;

package/dist/components/ActionMenu/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackFocus = void 0;
+var react_1 = require("react");
+var useTrackFocus = function (ref, setShowOptions, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.enabled, enabled = _a === void 0 ? true : _a;
+    var handleClickOutside = function (event) {
+        if (!enabled)
+            return;
+        if (ref.current && !ref.current.contains(event.target)) {
+            //clicked outside editor
+            setShowOptions(false);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        document.addEventListener('mousedown', handleClickOutside); //its very important for this to be mousedown. 'click' acts unpredictable
+        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+    }, [enabled]);
+};
+exports.useTrackFocus = useTrackFocus;

package/dist/components/Buttons/index.js

@@ -46,13 +46,14 @@ var DisplayIcon = function (_a) {
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, S = props.S, 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;
+    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, S = props.S, 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;
     var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
     var size = (S && "S") || 'M';
-    var composition = icon && displayText ? 'icon+text' : !displayText && 'iconOnly';
+    var composition = (icon || iconAfter) && displayText ? 'icon+text' : !displayText && 'iconOnly';
     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 },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20 }),
-        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
+        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
+        iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, size: S ? 15 : 20 })));
 };
 var Button = function (_a) {
     var props = _a.props, variant = _a.variant;

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

@@ -1,10 +1,2 @@
-export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTabs, queryParamKey }: {
-    id: any;
-    options: any;
-    value: any;
-    onChange: any;
-    updateUrl: any;
-    style: any;
-    emptyTabs: any;
-    queryParamKey?: string;
-}): JSX.Element;
+export function TabBarStyle1(props: any): JSX.Element;
+export function TabBarStyle2(props: any): JSX.Element;

package/dist/components/TabBar/index.js

@@ -1,34 +1,40 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabBar = void 0;
+exports.TabBarStyle2 = exports.TabBarStyle1 = void 0;
 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 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.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(queryParamKey, JSON.stringify(value));
-            history.push({
-                search: params.toString(),
-            });
-        }
-        onChange && onChange(null, value);
+var Base = function (_a) {
+    var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, emptyTabs = _a.emptyTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString;
+    var value = saveValueAsString ? options.find(function (d) { return d.value === valueProp; }) : valueProp;
+    var handleClick = function (v) {
+        onChange && onChange(id, saveValueAsString ? v.value : v);
     };
-    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))));
-        }))));
+    return (react_1.default.createElement(index_styled_1.TabBarStyled, { style: style },
+        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, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError },
+                    react_1.default.createElement(index_styled_1.TabBarTabStyled, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); } },
+                        react_1.default.createElement(Typo_1.SANS_2, { semibold: tabBarStyle === "1" }, op.display))));
+            })))));
 };
-exports.TabBar = TabBar;
+var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
+exports.TabBarStyle1 = TabBarStyle1;
+var TabBarStyle2 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "2" })); };
+exports.TabBarStyle2 = TabBarStyle2;

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

@@ -1,3 +1,4 @@
+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 = void 0;
+exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
@@ -64,14 +64,21 @@ var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (template
 //   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.TabBarStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n"])), white);
+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 tabBarStyle = _a.tabBarStyle;
+    return (tabBarStyle === '1'
+        ? tabBarWrapperStyle1
+        : tabBarStyle === '2'
+            && tabBarWrapperStyle2);
 });
-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);
+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 tabBarStyle = _a.tabBarStyle;
+    return (tabBarStyle === '1'
+        ? tabBarTabStyle1
+        : tabBarStyle === '2'
+            && 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;
+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;

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, { light: true, style: { lineHeight: '0.2em' } }, text),
+            react_1.default.createElement(Typo_1.SANS_2, null, 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

@@ -40,7 +40,7 @@ var clipPaths = {
     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: 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) {
+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) {
     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) {

package/dist/globalStyles/index.js

@@ -8,8 +8,8 @@ exports.GlobalStyles = void 0;
 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");
+require("../assets/fonts/style.css");
 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 { \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);
+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\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\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/*::-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 \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\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\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/*::-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 \n"])), normalize_1.normalize, greyColor100, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif, greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md'));
 var templateObject_1;

package/package.json

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