oolib 2.2.2 → 2.3.0

package/dist/components/Breadcrumbs/index.js

@@ -48,15 +48,16 @@ var Breadcrumbs = function (_a) {
     if (containerWidth > (0, mixins_1.getBreakPoint)('md')) { // for large devices (not default since containerWidth is initialized to 0)
         var linksDisplayed_1 = beConcise && links.length > 3 ? [links[0], { to: "", display: "..." }, links[links.length - 2], links[links.length - 1]] : links;
         return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer }, linksDisplayed_1.map(function (link, ind) {
-            return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: beConcise && ind == linksDisplayed_1.length - 1 ?
-                    { width: (function () {
-                            var children = measuredContainer.current.children;
-                            var childrenCount = children.length;
-                            var correctionFactor = 88;
-                            return containerWidth - (children[0].scrollWidth + correctionFactor + (childrenCount > 2 &&
-                                children[childrenCount - 2].scrollWidth)) + 'px';
-                        })()
-                    } : {} },
+            return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: ind == linksDisplayed_1.length - 1 ? {
+                    pointerEvents: 'none',
+                    width: !beConcise ? 'auto' : (function () {
+                        var children = measuredContainer.current.children;
+                        var childrenCount = children.length;
+                        var correctionFactor = 88;
+                        return containerWidth - (children[0].scrollWidth + correctionFactor + (childrenCount > 2 &&
+                            children[childrenCount - 2].scrollWidth)) + 'px';
+                    })()
+                } : {} },
                 react_1.default.createElement(Typo_1.SANS_2, { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, link.display)));
         })));
     }

package/dist/components/Buttons/index.js

@@ -42,11 +42,11 @@ 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, 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, 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';
-    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, composition: composition, width: width, color: color },
+    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)));
 };
@@ -80,7 +80,7 @@ var UploadButton = function (props) {
 exports.UploadButton = UploadButton;
 var GoogleLogin = function (props) {
     var theme = props.theme, S = props.S, disabled = props.disabled, width = props.width, className = props.className, style = props.style, value = props.value, children = props.children;
-    var displayText = value || children || "Sign up with Google";
+    var displayText = value || children || 'Sign up with Google';
     var size = (S && "S") || 'M';
     return (react_1.default.createElement(index_styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: function () { return window.open('/api/OAuth/google', '_self'); }, variant: "googleAuth", theme: theme, style: style, className: className },
         react_1.default.createElement(DisplayIcon, { icon: 'OkeGoogleIcon', size: 24 }),

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

@@ -169,7 +169,7 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_18 || (
 }, function (_a) {
     var width = _a.width;
     return width && (0, styled_components_2.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
-}, (0, mixins_1.kpTransition)('background-color'), function (_a) {
+}, (0, mixins_1.transition)('background-color'), function (_a) {
     var variant = _a.variant;
     return buttonVariantSetting[variant];
 });

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

@@ -3,7 +3,7 @@ export function TagDisplay({ display, invert, M, theme, variant }: {
     invert: any;
     M: any;
     theme: any;
-    variant: any;
+    variant?: string;
 }): JSX.Element;
 export function TagClear({ id, display, value, M, invert, onClick, theme, variant, grey, }: {
     id: any;
@@ -13,7 +13,7 @@ export function TagClear({ id, display, value, M, invert, onClick, theme, varian
     invert: any;
     onClick?: () => void;
     theme: any;
-    variant: any;
+    variant?: string;
     grey: any;
 }): JSX.Element;
 export function TagSelect({ onClick, isSelected, display, value, M, theme, }: {
@@ -30,5 +30,5 @@ export function TagLink({ display, to, invert, M, theme, variant }: {
     invert: any;
     M: any;
     theme: any;
-    variant: any;
+    variant?: string;
 }): JSX.Element;

package/dist/components/Tags/index.js

@@ -25,19 +25,19 @@ var index_styled_1 = require("./index.styled");
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 function TagDisplay(_a) {
-    var display = _a.display, invert = _a.invert, M = _a.M, theme = _a.theme, variant = _a.variant;
+    var display = _a.display, invert = _a.invert, M = _a.M, theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
     var size = M ? 'M' : 'S';
     return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, theme: theme, size: size },
         react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display)));
 }
 exports.TagDisplay = TagDisplay;
 function TagClear(_a) {
-    var id = _a.id, display = _a.display, value = _a.value, M = _a.M, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, theme = _a.theme, variant = _a.variant, grey = _a.grey;
+    var id = _a.id, display = _a.display, value = _a.value, M = _a.M, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, theme = _a.theme, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, grey = _a.grey;
     var XIconCom = icons_1.phosphorIcons['X'];
     var size = M ? 'M' : 'S';
-    return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, theme: theme, size: size, grey: grey, variant: variant, onClick: function () { return !variant && onClick(id, { display: display, value: value }); } },
+    return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, theme: theme, size: size, grey: grey, variant: variant },
         react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display),
-        react_1.default.createElement(index_styled_1.StyledIconWrapper, { theme: theme, invert: invert, grey: grey, variant: variant, onClick: function () { return variant && onClick(id, { display: display, value: value }); } },
+        react_1.default.createElement(index_styled_1.StyledIconWrapper, { theme: theme, invert: invert, grey: grey, variant: variant, onClick: function () { return onClick(id, { display: display, value: value }); } },
             react_1.default.createElement(XIconCom, { size: '15', weight: 'bold' }))));
 }
 exports.TagClear = TagClear;
@@ -59,7 +59,7 @@ function TagSelect(_a) {
 }
 exports.TagSelect = TagSelect;
 function TagLink(_a) {
-    var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, theme = _a.theme, variant = _a.variant;
+    var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
     var size = M ? 'M' : 'S';
     return (react_1.default.createElement(index_styled_1.StyledLink, { to: to },
         react_1.default.createElement(index_styled_1.StyledTagLink, { theme: theme, variant: variant, invert: invert, size: size },

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

@@ -27,7 +27,7 @@ exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = expor
 var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var react_router_dom_1 = require("react-router-dom");
-var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, greyColor10 = colors_1.colors.greyColor10;
+var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
 var SIZES = {
     S: "3rem",
     M: "4rem",
@@ -36,35 +36,29 @@ var commonStyle = function (_a) {
     var size = _a.size;
     return "\n  padding: 0 1rem;\n  position: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: center;\n  border-radius:0.2rem;\n  white-space: nowrap;\n\theight: ".concat(SIZES[size], ";\n");
 };
-var StyledTagDisplay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  \n\t", "\n\t", "\n\n"], ["\n  ", "\n  \n\t", "\n\t", "\n\n"])), function (_a) {
+var StyledTagDisplay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
-}, function (_a) {
-    var invert = _a.invert;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t"], ["\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t"])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40);
 }, function (_a) {
     var variant = _a.variant, invert = _a.invert;
-    return variant === "secondry" && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15);
+    return variant === 'primary' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40) : //secondary
+     (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15);
 });
 exports.StyledTagDisplay = StyledTagDisplay;
-var StyledTagClear = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  \n\t", "\n\n\t", "\n\t", "\n"], ["\n  ", "\n  \n\t", "\n\n\t", "\n\t", "\n"])), function (_a) {
+var StyledTagClear = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\n  ", "\n\n\t", "\n  \n\t\n\t", "\n"], ["\n\n  ", "\n\n\t", "\n  \n\t\n\t", "\n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
 }, function (_a) {
     var variant = _a.variant, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
-    return !variant && // no variant passed, then primary (default)
-        (!grey
-            ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert
-                ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100
-                : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40));
-}, function (_a) {
-    var variant = _a.variant, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
-    return variant === "secondry" &&
-        (!grey
-            ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15));
+    if (variant === 'primary') {
+        return grey ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100);
+    }
+    else { // secondry
+        return grey ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t"], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t"])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t"], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t"])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40);
+    }
 }, function (_a) {
     var variant = _a.variant;
-    return variant === "ghost" && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t"])));
+    return variant === "ghost" && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["background: none;"], ["background: none;"])));
 });
 exports.StyledTagClear = StyledTagClear;
 var StyledTagSelect = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n\t", "\n"], ["\n  ", "\n\t", "\n"])), function (_a) {
@@ -75,22 +69,18 @@ var StyledTagSelect = styled_components_1.default.div(templateObject_10 || (temp
     return "\n    border: 2px solid ".concat(colors === null || colors === void 0 ? void 0 : colors.primaryColor100, ";\n    cursor: pointer;\n    background-color: ").concat(selected ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : null, ";\n\t\tcolor: ").concat(!selected ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : white, "\n  ");
 });
 exports.StyledTagSelect = StyledTagSelect;
-var StyledTagLink = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n\t", "\n\t\n"], ["\n  ", "\n\t", "\n\t\n"])), function (_a) {
+var StyledTagLink = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n\t", "\t\n"], ["\n  ", "\n\t", "\t\n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
 }, function (_a) {
     var variant = _a.variant, invert = _a.invert, colors = _a.theme.colors;
-    if (variant !== "secondry") {
-        return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert
-            ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100
-            : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100);
-    }
-    return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40);
+    return variant === 'primary' ? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100) : // secondary
+     (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40);
 });
 exports.StyledTagLink = StyledTagLink;
 var StyledIconWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t", "\n"], ["\n  display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t", "\n"])), function (_a) {
     var invert = _a.invert, grey = _a.grey;
-    return grey && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? greyColor100 : white);
+    return grey && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), !invert ? greyColor100 : white);
 });
 exports.StyledIconWrapper = StyledIconWrapper;
 var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));

package/dist/icons/IndexIcon.d.ts

@@ -0,0 +1 @@
+export default function index(): JSX.Element;

package/dist/icons/IndexIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function index() {
+    return (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M6 7H18", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M6 12H18", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M6 17L12 17", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+}
+exports.default = index;

package/dist/icons/index.d.ts

@@ -66,6 +66,7 @@ export namespace phosphorIcons {
     export { OkeGoogleIcon };
     export { LetterH };
     export { LetterP };
+    export { IndexIcon };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -134,3 +135,4 @@ import { TextUnderline } from "phosphor-react";
 import OkeGoogleIcon from "./OkeGoogleIcon";
 import LetterH from "./LetterH";
 import LetterP from "./LetterP";
+import IndexIcon from "./IndexIcon";

package/dist/icons/index.js

@@ -8,6 +8,7 @@ var phosphor_react_1 = require("phosphor-react");
 var OkeGoogleIcon_1 = __importDefault(require("./OkeGoogleIcon"));
 var LetterH_1 = __importDefault(require("./LetterH"));
 var LetterP_1 = __importDefault(require("./LetterP"));
+var IndexIcon_1 = __importDefault(require("./IndexIcon"));
 exports.phosphorIcons = {
     PencilSimple: phosphor_react_1.PencilSimple,
     PencilLine: phosphor_react_1.PencilLine,
@@ -75,5 +76,6 @@ exports.phosphorIcons = {
     TextUnderline: phosphor_react_1.TextUnderline,
     OkeGoogleIcon: OkeGoogleIcon_1.default,
     LetterH: LetterH_1.default,
-    LetterP: LetterP_1.default
+    LetterP: LetterP_1.default,
+    IndexIcon: IndexIcon_1.default
 };

package/dist/themes/colors.d.ts

@@ -35,6 +35,8 @@ export namespace colors {
     export { primaryColor100 };
     export { primaryColor40 };
     export { primaryColorText };
+    export { cyan };
+    export { lightPink };
 }
 declare const none: "rgba(0,0,0,0)";
 declare const white: "#fff";
@@ -72,4 +74,6 @@ declare const primaryColor10: "#ebf6ff";
 declare const primaryColor100: "#33A4FF";
 declare const primaryColor40: "#addbff";
 declare const primaryColorText: "#0071CC";
+declare const cyan: "#B5F2FA";
+declare const lightPink: "#FFE5F2";
 export {};

package/dist/themes/colors.js

@@ -17,6 +17,8 @@ var lightYellow = '#FFFAE6';
 var green = '#08A84B';
 var lightGreen = '#E6F6ED';
 var invertGreen = '#8AE5B0';
+var cyan = '#B5F2FA';
+var lightPink = '#FFE5F2';
 var blue = '#33A4FF';
 var lightBlue = '#EBF6FF';
 var black = '#000';
@@ -74,4 +76,6 @@ exports.colors = {
     primaryColor100: primaryColor100,
     primaryColor40: primaryColor40,
     primaryColorText: primaryColorText,
+    cyan: cyan,
+    lightPink: lightPink
 };

package/dist/themes/mixins/index.d.ts

@@ -1,4 +1,7 @@
 export function mediaQuery(point: any): any;
 export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 | "pass a valid breakpoint";
-import { kpTransition } from "./kp-transitions";
-export { kpTransition };
+import { transition } from "./transitions";
+import { transitionWithDuration } from "./transitions";
+import { transitionWithDelay } from "./transitions";
+import { multiTransition } from "./transitions";
+export { transition, transitionWithDuration, transitionWithDelay, multiTransition };

package/dist/themes/mixins/index.js

@@ -4,10 +4,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.kpTransition = exports.getBreakPoint = exports.mediaQuery = void 0;
+exports.multiTransition = exports.transitionWithDelay = exports.transitionWithDuration = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
 var styled_components_1 = require("styled-components");
-var kp_transitions_1 = require("./kp-transitions");
-Object.defineProperty(exports, "kpTransition", { enumerable: true, get: function () { return kp_transitions_1.kpTransition; } });
+var transitions_1 = require("./transitions");
+Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return transitions_1.transition; } });
+Object.defineProperty(exports, "transitionWithDuration", { enumerable: true, get: function () { return transitions_1.transitionWithDuration; } });
+Object.defineProperty(exports, "transitionWithDelay", { enumerable: true, get: function () { return transitions_1.transitionWithDelay; } });
+Object.defineProperty(exports, "multiTransition", { enumerable: true, get: function () { return transitions_1.multiTransition; } });
 var getBreakPoint = function (point) {
     switch (point) {
         case "xs":

package/dist/themes/mixins/transitions.d.ts

@@ -0,0 +1,4 @@
+export function transition(property: any): any;
+export function transitionWithDuration(property: any, duration: any): any;
+export function transitionWithDelay(property: any, delay: any): any;
+export function multiTransition(...properties: any[]): any;

package/dist/themes/mixins/transitions.js

@@ -0,0 +1,23 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiTransition = exports.transitionWithDelay = exports.transitionWithDuration = exports.transition = void 0;
+var styled_components_1 = require("styled-components");
+var transition = function (property) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: ", " 0.3s ease-out;\n"], ["\n  transition: ", " 0.3s ease-out;\n"])), property); };
+exports.transition = transition;
+var transitionWithDuration = function (property, duration) { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transition: ", " ", " ease-out;\n"], ["\n  transition: ", " ", " ease-out;\n"])), property, duration); };
+exports.transitionWithDuration = transitionWithDuration;
+var transitionWithDelay = function (property, delay) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transition: ", " 0.3s ease-out;\n  transition-delay: ", ";\n"], ["\n  transition: ", " 0.3s ease-out;\n  transition-delay: ", ";\n"])), property, delay); };
+exports.transitionWithDelay = transitionWithDelay;
+var multiTransition = function () {
+    var properties = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        properties[_i] = arguments[_i];
+    }
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transition: ", " 0.3s ease-out;\n"], ["\n  transition: ", " 0.3s ease-out;\n"])), properties.join(' 0.3s ease-out, '));
+};
+exports.multiTransition = multiTransition;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/package.json

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

package/dist/themes/mixins/kp-transitions.d.ts

@@ -1 +0,0 @@
-export function kpTransition(property: any): any;

package/dist/themes/mixins/kp-transitions.js

@@ -1,11 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.kpTransition = void 0;
-var styled_components_1 = require("styled-components");
-var kpTransition = function (property) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    transition: ", " 0.3s ease-out;\n  "], ["\n    transition: ", " 0.3s ease-out;\n  "])), property); };
-exports.kpTransition = kpTransition;
-var templateObject_1;