oolib 2.2.4 → 2.4.0

package/dist/components/Breadcrumbs/index.js

@@ -27,7 +27,7 @@ var icons_1 = require("../../icons");
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var ArrowLeft = icons_1.phosphorIcons.ArrowLeft;
-var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50;
+var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100, greyColor50 = themes_1.colors.greyColor50;
 // links array will be taken from params in the future (react router)
 var Breadcrumbs = function (_a) {
     var links = _a.links, invert = _a.invert;
@@ -50,6 +50,7 @@ var Breadcrumbs = function (_a) {
         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: ind == linksDisplayed_1.length - 1 ? {
                     pointerEvents: 'none',
+                    color: greyColor50,
                     width: !beConcise ? 'auto' : (function () {
                         var children = measuredContainer.current.children;
                         var childrenCount = children.length;
@@ -63,7 +64,7 @@ var Breadcrumbs = function (_a) {
     }
     return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
         react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: links[links.length - 2].to, invert: invert },
-            react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor50 }),
+            react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor100 }),
             react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "Back"))));
 };
 exports.Breadcrumbs = Breadcrumbs;

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

@@ -14,12 +14,12 @@ var themes_1 = require("../../themes");
 var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50, greyColor100 = themes_1.colors.greyColor100;
 var StyledBreadcrumbs = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  gap: 15px;\n  overflow: hidden;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  gap: 15px;\n  overflow: hidden;\n"])));
 exports.StyledBreadcrumbs = StyledBreadcrumbs;
-var StyledLinkCrumb = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child {color: ", "}\n  &:last-child::after {content: none;}\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child {color: ", "}\n  &:last-child::after {content: none;}\n"])), function (_a) {
+var StyledLinkCrumb = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child::after {content: none;}\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child::after {content: none;}\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? white : greyColor100;
 }, function (_a) {
     var invert = _a.invert;
     return invert ? white : greyColor100;
-}, greyColor50);
+});
 exports.StyledLinkCrumb = StyledLinkCrumb;
 var templateObject_1, templateObject_2;

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/LangIcon.d.ts

@@ -0,0 +1,5 @@
+export default LanguageIcon;
+declare function LanguageIcon({ color, size }: {
+    color?: string;
+    size?: number;
+}): JSX.Element;

package/dist/icons/LangIcon.js

@@ -0,0 +1,18 @@
+"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"));
+var themes_1 = require("../themes");
+var LanguageIcon = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? themes_1.colors.greyColor100 : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M7.96924 10.0556C9.06013 10.0556 9.94447 9.25962 9.94447 8.27778C9.94447 7.29594 9.06013 6.5 7.96924 6.5C7.32302 6.5 6.74928 6.77931 6.38892 7.21111", stroke: color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M7.82804 10.0557C8.9969 10.0557 9.94444 10.8516 9.94444 11.8334C9.94444 12.8153 8.9969 13.6112 7.82804 13.6112C6.64286 13.6112 5.78219 12.426 5.5 11.8334", stroke: color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M8.16666 9.05566C7.61438 9.05566 7.16666 9.50338 7.16666 10.0557C7.16666 10.6079 7.61438 11.0557 8.16666 11.0557V9.05566ZM11.7222 11.0557C12.2745 11.0557 12.7222 10.6079 12.7222 10.0557C12.7222 9.50338 12.2745 9.05566 11.7222 9.05566V11.0557ZM8.16666 11.0557H11.7222V9.05566H8.16666V11.0557Z", fill: color }),
+        react_1.default.createElement("path", { d: "M11.5 5.5C10.9477 5.5 10.5 5.94772 10.5 6.5C10.5 7.05228 10.9477 7.5 11.5 7.5V5.5ZM14.1667 7.5C14.719 7.5 15.1667 7.05228 15.1667 6.5C15.1667 5.94772 14.719 5.5 14.1667 5.5V7.5ZM11.5 7.5H14.1667V5.5H11.5V7.5Z", fill: color }),
+        react_1.default.createElement("path", { d: "M14 6.5C14 5.94772 13.5523 5.5 13 5.5C12.4477 5.5 12 5.94772 12 6.5L14 6.5ZM12 13.6111C12 14.1634 12.4477 14.6111 13 14.6111C13.5523 14.6111 14 14.1634 14 13.6111L12 13.6111ZM12 6.5L12 13.6111L14 13.6111L14 6.5L12 6.5Z", fill: color }),
+        react_1.default.createElement("circle", { cx: "10", cy: "10", r: "9", stroke: color, "stroke-width": "2" })));
+};
+exports.default = LanguageIcon;

package/dist/icons/index.d.ts

@@ -66,6 +66,10 @@ export namespace phosphorIcons {
     export { OkeGoogleIcon };
     export { LetterH };
     export { LetterP };
+    export { IndexIcon };
+    export { LanguageIcon };
+    export { ArrowRight };
+    export { Sliders };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -134,3 +138,7 @@ import { TextUnderline } from "phosphor-react";
 import OkeGoogleIcon from "./OkeGoogleIcon";
 import LetterH from "./LetterH";
 import LetterP from "./LetterP";
+import IndexIcon from "./IndexIcon";
+import LanguageIcon from "./LangIcon";
+import { ArrowRight } from "phosphor-react";
+import { Sliders } from "phosphor-react";

package/dist/icons/index.js

@@ -8,6 +8,8 @@ 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"));
+var LangIcon_1 = __importDefault(require("./LangIcon"));
 exports.phosphorIcons = {
     PencilSimple: phosphor_react_1.PencilSimple,
     PencilLine: phosphor_react_1.PencilLine,
@@ -75,5 +77,9 @@ 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,
+    LanguageIcon: LangIcon_1.default,
+    ArrowRight: phosphor_react_1.ArrowRight,
+    Sliders: phosphor_react_1.Sliders
 };

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from "./components/Breadcrumbs";
 export * from "./components/BlockLabel";
 export { colors } from "./themes";
 export { phosphorIcons } from "./icons";
+export { mediaQuery, getBreakPoint, transition, transitionWithDuration, transitionWithDelay, multiTransition } from "./themes/mixins";

package/dist/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
+exports.multiTransition = exports.transitionWithDelay = exports.transitionWithDuration = exports.transition = exports.getBreakPoint = exports.mediaQuery = exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
 __exportStar(require("./components/Typo"), exports);
@@ -23,3 +23,10 @@ __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);
 __exportStar(require("./components/BlockLabel"), exports);
+var mixins_1 = require("./themes/mixins");
+Object.defineProperty(exports, "mediaQuery", { enumerable: true, get: function () { return mixins_1.mediaQuery; } });
+Object.defineProperty(exports, "getBreakPoint", { enumerable: true, get: function () { return mixins_1.getBreakPoint; } });
+Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return mixins_1.transition; } });
+Object.defineProperty(exports, "transitionWithDuration", { enumerable: true, get: function () { return mixins_1.transitionWithDuration; } });
+Object.defineProperty(exports, "transitionWithDelay", { enumerable: true, get: function () { return mixins_1.transitionWithDelay; } });
+Object.defineProperty(exports, "multiTransition", { enumerable: true, get: function () { return mixins_1.multiTransition; } });

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.4",
+  "version": "2.4.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;