oolib 2.8.3 → 2.9.1

package/dist/components/BlockLabel/index.js

@@ -16,31 +16,30 @@ var BlockLabel = function (props) {
     /*
       missing parts of this component compared to kPlabel:
         - deployment._ShowOptionalTag configuration
-        - localization (translation)
+       
     */
     var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, error = props.error, //for storybook view purposes
     errorMsgs = props.errorMsgs;
-    var shouldCompRender = (label ||
-        !readOnly && (sublabel || inputOnlyLabel || isRequired === false || (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
+    var shouldCompRender = label ||
+        (!readOnly &&
+            (sublabel ||
+                inputOnlyLabel ||
+                isRequired === false ||
+                (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
     var optional = readOnly ? false : isRequired === false;
-    var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return typeof er === 'object' ? er.text : er; }).join(', ');
+    var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return (typeof er === "object" ? er.text : er); }).join(", ");
     //next 2 vars is for 'test link' usecase
     var errLink = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? undefined : errorMsgs[0].link;
-    var errType = ((errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1) ? 'danger' : (errorMsgs[0].type || 'danger');
-    return (shouldCompRender &&
-        react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
-            react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
-                react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel),
-                optional && react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)"),
-                !readOnly && (error ?
-                    react_1.default.createElement(Typo_1.SANS_3, { color: red },
-                        " ",
-                        error,
-                        " ")
-                    : (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ?
-                        react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })
-                        :
-                            null)),
-            !readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel))));
+    var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? "danger" : errorMsgs[0].type || "danger";
+    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
+            (label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel)),
+            optional && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, '(optional)')),
+            !readOnly &&
+                (error ? (react_1.default.createElement(Typo_1.SANS_3, { color: red },
+                    " ",
+                    error,
+                    " ")) : (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null)),
+        !readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel)))));
 };
 exports.BlockLabel = BlockLabel;

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) {

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

@@ -1,37 +1,37 @@
-export function TagDisplay({ display, style, invert, M, theme, variant }: {
+export function TagDisplay({ display, style, invert, M, XS, variant }: {
     display: any;
     style: any;
     invert: any;
     M: any;
-    theme: any;
+    XS: 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, style, onMouseDown }: {
     onClick: any;
     isSelected?: boolean;
     display: any;
     value: any;
     M: any;
-    theme: any;
+    XS: any;
     style: any;
     onMouseDown: any;
 }): JSX.Element;
-export function TagLink({ display, to, invert, M, theme, variant }: {
+export function TagLink({ display, to, invert, M, XS, variant }: {
     display: any;
     to: any;
     invert: any;
     M: any;
-    theme: any;
+    XS: 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';
-    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)));
+    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, _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, size: size, style: style },
+        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, 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';
-    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)));
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = getTypoComp(size);
+    return (react_1.default.createElement(index_styled_1.StyledTagSelect, { onClick: onMouseDown ? function () { return null; } : handleOnClick, selected: selected, size: size, style: style, onMouseDown: onMouseDown },
+        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, _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(index_styled_1.StyledTagLink, { variant: variant, invert: invert, size: size },
+            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,15 @@ 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 utilsOolib_1 = require("../../utilsOolib");
+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;
 var SIZES = {
+    XS: '2rem',
     S: "3rem",
     M: "4rem",
 };
@@ -36,53 +39,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
+        ? (0, utilsOolib_1.getPrimaryColor10)(colors)
+        : (0, utilsOolib_1.getPrimaryColor40)(colors), invert
+        ? greyColor100
+        : (0, utilsOolib_1.getPrimaryColorText)(colors));
+};
+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
+            ? (0, utilsOolib_1.getPrimaryColor100)(colors)
+            : (0, utilsOolib_1.getPrimaryColor40)(colors), !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 ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert
+            ? (0, utilsOolib_1.getPrimaryColorText)(colors)
+            : (0, utilsOolib_1.getPrimaryColor40)(colors));
     }
 }, 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", (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor100)(colors) : null, !selected ? (0, utilsOolib_1.getPrimaryColorText)(colors) : 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}"])), (0, utilsOolib_1.getPrimaryColor40)(colors), (0, utilsOolib_1.getPrimaryColorText)(colors)));
 });
 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
+            ? (0, utilsOolib_1.getPrimaryColor100)(colors)
+            : (0, utilsOolib_1.getPrimaryColor40)(colors), !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 ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), 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/components/Typo/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TypoClassesProvider = exports.BLOCKQUOTE = exports.SERIF_9_10 = exports.SERIF_7_8 = exports.SERIF_5_6 = exports.SERIF_4_5 = exports.SERIF_3_4 = exports.SERIF_3 = exports.SANS_7_8 = exports.SANS_5_6 = exports.SANS_4_5 = exports.SANS_4 = exports.SANS_3 = exports.SANS_2 = exports.SANS_0 = exports.LABEL = void 0;
 var react_1 = __importDefault(require("react"));
 var index_styled_1 = require("./index.styled");
-var styled_components_1 = require("styled-components");
+var utilsOolib_1 = require("../../utilsOolib");
 var genFontStylingProps = function (props) {
     var _a;
     var fontSetting = {
@@ -47,10 +47,10 @@ var genFontStylingProps = function (props) {
 };
 var GenComp = function (_a) {
     var props = _a.props, Comp = _a.Comp;
-    var currentTheme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
     var invert = props.invert, value = props.value, suffix = props.suffix, color = props.color, children = props.children, theme = props.theme, style = props.style, className = props.className;
     var displayText = children || value;
-    var localText = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.localize) ? currentTheme.localize(displayText) : displayText;
+    var localText = localize(displayText);
     return (react_1.default.createElement(Comp, __assign({}, genFontStylingProps(props), { color: color, theme: theme, className: className, style: style, invert: invert }),
         localText,
         suffix || ''));

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/dist/themes/mixins/index.d.ts

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

package/dist/themes/mixins/index.js

@@ -1,11 +1,6 @@
 "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.isElementInViewport = exports.multiTransition = exports.transitionWithDelay = exports.transitionWithDuration = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
-var styled_components_1 = require("styled-components");
 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; } });
@@ -31,7 +26,7 @@ var getBreakPoint = function (point) {
 };
 exports.getBreakPoint = getBreakPoint;
 var mediaQuery = function (point) {
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["@media only screen and (min-width: ", "px)"], ["@media only screen and (min-width: ", "px)"])), getBreakPoint(point));
+    return "@media only screen and (min-width: ".concat(getBreakPoint(point), "px)");
 };
 exports.mediaQuery = mediaQuery;
 var isElementInViewport = function (el) {
@@ -44,4 +39,3 @@ var isElementInViewport = function (el) {
         rect.right <= (window.innerWidth || document.documentElement.clientWidth));
 };
 exports.isElementInViewport = isElementInViewport;
-var templateObject_1;

package/dist/utilsOolib/index.d.ts

@@ -0,0 +1,5 @@
+export function useLocale(): (text: any) => any;
+export function getPrimaryColor10(colors: any): any;
+export function getPrimaryColor40(colors: any): any;
+export function getPrimaryColor100(colors: any): any;
+export function getPrimaryColorText(colors: any): any;

package/dist/utilsOolib/index.js

@@ -0,0 +1,38 @@
+"use strict";
+/**
+ * @note : THESE ARE NOT MEANT TO BE EXPORTED
+ *
+ * These are utility functions that make certain tasks
+ * within oolib easier
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPrimaryColorText = exports.getPrimaryColor100 = exports.getPrimaryColor40 = exports.getPrimaryColor10 = exports.useLocale = void 0;
+var styled_components_1 = require("styled-components");
+var colors_1 = require("../themes/colors");
+var primaryColor10 = colors_1.colors.primaryColor10, primaryColor40 = colors_1.colors.primaryColor40, primaryColor100 = colors_1.colors.primaryColor100, primaryColorText = colors_1.colors.primaryColorText;
+var useLocale = function () {
+    var currentTheme = (0, styled_components_1.useTheme)();
+    var localize = function (text) {
+        return (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.localize)
+            ? currentTheme.localize(text)
+            : text;
+    };
+    return localize;
+};
+exports.useLocale = useLocale;
+var getPrimaryColor10 = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10;
+};
+exports.getPrimaryColor10 = getPrimaryColor10;
+var getPrimaryColor40 = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40;
+};
+exports.getPrimaryColor40 = getPrimaryColor40;
+var getPrimaryColor100 = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100;
+};
+exports.getPrimaryColor100 = getPrimaryColor100;
+var getPrimaryColorText = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
+};
+exports.getPrimaryColorText = getPrimaryColorText;

package/package.json

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