oolib 2.8.2 → 2.9.0

package/dist/components/Breadcrumbs/index.js

@@ -26,7 +26,7 @@ var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
-var ArrowLeft = icons_1.phosphorIcons.ArrowLeft;
+var ArrowLeft = icons_1.icons.ArrowLeft;
 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) {

package/dist/components/Buttons/index.js

@@ -37,7 +37,7 @@ var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, size = _a.size;
-    var IconComp = icons_1.phosphorIcons[icon];
+    var IconComp = icons_1.icons[icon];
     return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" }));
 };
 var ButtonStyledWrapper = function (_a) {
@@ -79,10 +79,10 @@ 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 theme = props.theme, S = props.S, disabled = props.disabled, width = props.width, className = props.className, style = props.style, value = props.value, children = props.children, onClick = props.onClick;
     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 },
+    return (react_1.default.createElement(index_styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: onClick, variant: "googleAuth", theme: theme, style: style, className: className },
         react_1.default.createElement(DisplayIcon, { icon: 'OkeGoogleIcon', size: 24 }),
         displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
 };

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

@@ -1,37 +1,40 @@
-export function TagDisplay({ display, style, invert, M, theme, variant }: {
+export function TagDisplay({ display, style, invert, M, XS, theme, variant }: {
     display: any;
     style: any;
     invert: any;
     M: any;
+    XS: any;
     theme: any;
     variant?: string;
 }): JSX.Element;
-export function TagClear({ id, display, value, M, invert, onClick, theme, variant, grey, }: {
+export function TagClear({ id, display, value, M, XS, invert, onClick, variant, grey, }: {
     id: any;
     display: any;
     value: any;
     M: any;
+    XS: any;
     invert: any;
     onClick?: () => void;
-    theme: any;
     variant?: string;
     grey: any;
 }): JSX.Element;
-export function TagSelect({ onClick, isSelected, display, value, M, theme, style, onMouseDown }: {
+export function TagSelect({ onClick, isSelected, display, value, M, XS, theme, style, onMouseDown }: {
     onClick: any;
     isSelected?: boolean;
     display: any;
     value: any;
     M: any;
+    XS: any;
     theme: any;
     style: any;
     onMouseDown: any;
 }): JSX.Element;
-export function TagLink({ display, to, invert, M, theme, variant }: {
+export function TagLink({ display, to, invert, M, XS, theme, variant }: {
     display: any;
     to: any;
     invert: any;
     M: any;
+    XS: any;
     theme: any;
     variant?: string;
 }): JSX.Element;

package/dist/components/Tags/index.js

@@ -24,25 +24,36 @@ var react_1 = __importStar(require("react"));
 var index_styled_1 = require("./index.styled");
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
+var getTypoComp = function (size) { return size === 'XS'
+    ? function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement(Typo_1.SANS_2, null, children);
+    }
+    : function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement(Typo_1.SANS_3, null, children);
+    }; };
 function TagDisplay(_a) {
-    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
-    var size = M ? 'M' : 'S';
+    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = getTypoComp(size);
     return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, theme: theme, size: size, style: style },
-        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display)));
+        react_1.default.createElement(TYPO_COMP, null, 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, _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 },
-        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 onClick(id, { display: display, value: value }); } },
-            react_1.default.createElement(XIconCom, { size: '15', weight: 'bold' }))));
+    var id = _a.id, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, grey = _a.grey;
+    var XIconCom = icons_1.icons['X'];
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = getTypoComp(size);
+    return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, size: size, grey: grey, variant: variant },
+        react_1.default.createElement(TYPO_COMP, null, display),
+        react_1.default.createElement(index_styled_1.StyledTagClearIconWrapper, { invert: invert, grey: grey, variant: variant, onClick: function () { return onClick(id, { display: display, value: value }); } },
+            react_1.default.createElement(XIconCom, { size: size === 'XS' ? '12' : '15', weight: 'bold' }))));
 }
 exports.TagClear = TagClear;
 function TagSelect(_a) {
-    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, theme = _a.theme, style = _a.style, onMouseDown = _a.onMouseDown;
+    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, theme = _a.theme, style = _a.style, onMouseDown = _a.onMouseDown;
     var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
     var handleOnClick = function () {
         setSelected(!selected);
@@ -53,16 +64,18 @@ function TagSelect(_a) {
             setSelected(isSelected);
         }
     }, [isSelected]);
-    var size = M ? 'M' : 'S';
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = getTypoComp(size);
     return (react_1.default.createElement(index_styled_1.StyledTagSelect, { theme: theme, onClick: onMouseDown ? function () { return null; } : handleOnClick, selected: selected, size: size, style: style, onMouseDown: onMouseDown },
-        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display)));
+        react_1.default.createElement(TYPO_COMP, null, display)));
 }
 exports.TagSelect = TagSelect;
 function TagLink(_a) {
-    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';
+    var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, XS = _a.XS, theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = getTypoComp(size);
     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 },
-            react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display))));
+            react_1.default.createElement(TYPO_COMP, null, display))));
 }
 exports.TagLink = TagLink;

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

@@ -1,4 +1,4 @@
-export const StyledIconWrapper: any;
+export const StyledTagClearIconWrapper: any;
 export const StyledLink: any;
 export const StyledTagDisplay: any;
 export const StyledTagClear: any;

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

@@ -23,12 +23,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.StyledIconWrapper = void 0;
+exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.StyledTagClearIconWrapper = void 0;
 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, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
+var mixins_1 = require("../../themes/mixins");
+var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, primaryColor10 = colors_1.colors.primaryColor10, primaryColor40 = colors_1.colors.primaryColor40, primaryColor100 = colors_1.colors.primaryColor100, primaryColorText = colors_1.colors.primaryColorText;
 var SIZES = {
+    XS: '2rem',
     S: "3rem",
     M: "4rem",
 };
@@ -36,53 +38,80 @@ 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"], ["\n  ", "\n  ", "\n"])), function (_a) {
+var blueHover = function (_a) {
+    var invert = _a.invert, colors = _a.colors;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\t\t\n\t}\n"], ["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\t\t\n\t}\n"])), invert
+        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10
+        : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40, invert
+        ? greyColor100
+        : (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText);
+};
+var greyHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t}\n"], ["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t}\n"])), invert
+        ? greyColor80
+        : greyColor10);
+};
+var StyledTagDisplay = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
 }, function (_a) {
-    var variant = _a.variant, invert = _a.invert;
-    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);
+    var variant = _a.variant, invert = _a.invert, size = _a.size;
+    return variant === "primary"
+        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40) : //secondary
+     (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n        "], ["\n          background: none;\n          border: ", " solid\n            ", ";\n          color: ", ";\n        "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15);
 });
 exports.StyledTagDisplay = StyledTagDisplay;
-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 StyledTagClear = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\n  \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n  \n\t\n\t", "\n"], ["\n\n  \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\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;
-    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);
+    var variant = _a.variant, size = _a.size, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
+    if (variant === "primary") {
+        return grey
+            ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            background-color: ", ";\n            color: ", ";\n          "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            background-color: ", ";\n            color: ", ";\n          "])), !invert
+            ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100
+            : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || 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);
+    else {
+        // secondry
+        return grey
+            ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            background: none;\n            border: ", " solid ", ";\n            color: ", ";\n          "], ["\n            background: none;\n            border: ", " solid ", ";\n            color: ", ";\n          "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n            background: none;\n            border: ", " solid\n              ", ";\n            color: ", ";\n          "], ["\n            background: none;\n            border: ", " solid\n              ", ";\n            color: ", ";\n          "])), size === "XS" ? "1px" : "2px", !invert ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100 : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40, !invert
+            ? (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText
+            : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40);
     }
 }, function (_a) {
     var variant = _a.variant;
-    return variant === "ghost" && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["background: none;"], ["background: none;"])));
+    return variant === "ghost" && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: none;\n\t  border: none;\n    "], ["\n      background: none;\n\t  border: none;\n    "])));
 });
 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) {
+var StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"], ["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"])), (0, mixins_1.multiTransition)('color', 'background-color'), function (_a) {
+    var invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
+    return grey
+        ? greyHover({ invert: invert, colors: colors })
+        : blueHover({ invert: invert, colors: colors });
+});
+exports.StyledTagClearIconWrapper = StyledTagClearIconWrapper;
+var StyledTagSelect = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n\n\t", "\n  \n"], ["\n  ", "\n  ", "\n\n\t", "\n  \n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
-}, function (_a) {
-    var selected = _a.selected, colors = _a.theme.colors;
-    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  ");
+}, (0, mixins_1.multiTransition)("background-color"), function (_a) {
+    var selected = _a.selected, size = _a.size, colors = _a.theme.colors;
+    return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    border: ", " solid ", ";\n    cursor: pointer;\n    background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n  "], ["\n    border: ", " solid ", ";\n    cursor: pointer;\n    background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n  "])), size === "XS" ? "1px" : "2px", (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100, selected ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100 : null, !selected ? (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText : white, !selected && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"], ["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"])), (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40, (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText));
 });
 exports.StyledTagSelect = StyledTagSelect;
-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 StyledTagLink = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  \t", "\n\t", ";\n    ", "\n"], ["\n  \t", "\n\t", ";\n    ", "\n"])), function (_a) {
     var size = _a.size;
     return commonStyle({ size: size });
-}, function (_a) {
-    var variant = _a.variant, invert = _a.invert, colors = _a.theme.colors;
-    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);
+}, (0, mixins_1.multiTransition)("background-color", "color"), function (_a) {
+    var variant = _a.variant, invert = _a.invert, size = _a.size, colors = _a.theme.colors;
+    return variant === "primary"
+        ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          \t\tbackground-color: ", ";\n          \t\tcolor: ", ";\n\t\t\t\t", ";\n        \t"], ["\n          \t\tbackground-color: ", ";\n          \t\tcolor: ", ";\n\t\t\t\t", ";\n        \t"])), !invert
+            ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100
+            : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40, !invert ? white : greyColor100, blueHover({ invert: invert, colors: colors })) : // secondary
+     (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          \t\tbackground: none;\n          \t\tborder: ", " solid ", ";\n          \t\tcolor: ", ";\n\t\t\t\t", "\n        \t"], ["\n          \t\tbackground: none;\n          \t\tborder: ", " solid ", ";\n          \t\tcolor: ", ";\n\t\t\t\t", "\n        \t"])), size === "XS" ? "1px" : "2px", !invert ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100 : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40, !invert ? (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40, blueHover({ invert: invert, colors: colors }));
 });
 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(["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"])));
+var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
 exports.StyledLink = StyledLink;
-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, templateObject_15, templateObject_16;
+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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/components/TextInputs/index.js

@@ -74,10 +74,10 @@ var Loader_1 = require("../Loader");
 var BlockLabel_1 = require("../BlockLabel");
 var Typo_1 = require("../Typo");
 var Buttons_1 = require("../Buttons");
-var uitls_1 = require("../uitls");
+var utils_1 = require("../utils");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, onClick = _a.onClick, size = _a.size;
-    var IconComp = icons_1.phosphorIcons[icon];
+    var IconComp = icons_1.icons[icon];
     return (react_1.default.createElement("div", { style: { cursor: onClick ? 'pointer' : '' }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
 };
 var TextInput = function (props) {
@@ -116,7 +116,7 @@ var TextInput = function (props) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: className },
-            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, uitls_1.getBlockLabelProps)(props))),
+            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, utils_1.getBlockLabelProps)(props))),
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition },
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),

package/dist/icons/index.d.ts

@@ -1,4 +1,4 @@
-export namespace phosphorIcons {
+export namespace icons {
     export { PencilSimple };
     export { PencilLine };
     export { Plus };
@@ -72,6 +72,7 @@ export namespace phosphorIcons {
     export { ArrowRight };
     export { Sliders };
     export { Faders };
+    export { Code };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -146,3 +147,4 @@ import LanguageIcon from "./LangIcon";
 import { ArrowRight } from "phosphor-react";
 import { Sliders } from "phosphor-react";
 import { Faders } from "phosphor-react";
+import { Code } from "phosphor-react";

package/dist/icons/index.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.phosphorIcons = void 0;
+exports.icons = void 0;
 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 = {
+exports.icons = {
     PencilSimple: phosphor_react_1.PencilSimple,
     PencilLine: phosphor_react_1.PencilLine,
     Plus: phosphor_react_1.Plus,
@@ -83,5 +83,6 @@ exports.phosphorIcons = {
     LanguageIcon: LangIcon_1.default,
     ArrowRight: phosphor_react_1.ArrowRight,
     Sliders: phosphor_react_1.Sliders,
-    Faders: phosphor_react_1.Faders
+    Faders: phosphor_react_1.Faders,
+    Code: phosphor_react_1.Code
 };

package/dist/index.d.ts

@@ -11,5 +11,5 @@ export * from "./components/Container";
 export * from "./components/Wrappers";
 export * from "./themes/mixins";
 export { colors } from "./themes";
-export { phosphorIcons } from "./icons";
+export { icons } from "./icons";
 export { Section } from "./components/Section";

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.Section = exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
+exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
 __exportStar(require("./components/Typo"), exports);
@@ -18,7 +18,7 @@ __exportStar(require("./components/Loader"), exports);
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return themes_1.colors; } });
 var icons_1 = require("./icons");
-Object.defineProperty(exports, "phosphorIcons", { enumerable: true, get: function () { return icons_1.phosphorIcons; } });
+Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return icons_1.icons; } });
 __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);

package/package.json

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