oolib 2.9.0 → 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/Tags/index.d.ts

@@ -1,10 +1,9 @@
-export function TagDisplay({ display, style, invert, M, XS, theme, variant }: {
+export function TagDisplay({ display, style, invert, M, XS, variant }: {
     display: any;
     style: any;
     invert: any;
     M: any;
     XS: any;
-    theme: any;
     variant?: string;
 }): JSX.Element;
 export function TagClear({ id, display, value, M, XS, invert, onClick, variant, grey, }: {
@@ -18,23 +17,21 @@ export function TagClear({ id, display, value, M, XS, invert, onClick, variant,
     variant?: string;
     grey: any;
 }): JSX.Element;
-export function TagSelect({ onClick, isSelected, display, value, M, XS, theme, style, onMouseDown }: {
+export function TagSelect({ onClick, isSelected, display, value, M, XS, 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, XS, theme, variant }: {
+export function TagLink({ display, to, invert, M, XS, variant }: {
     display: any;
     to: any;
     invert: any;
     M: any;
     XS: any;
-    theme: any;
     variant?: string;
 }): JSX.Element;

package/dist/components/Tags/index.js

@@ -34,10 +34,10 @@ var getTypoComp = function (size) { return size === 'XS'
         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, XS = _a.XS, theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    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, theme: theme, size: size, style: style },
+    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;
@@ -53,7 +53,7 @@ function TagClear(_a) {
 }
 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, XS = _a.XS, 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);
@@ -66,16 +66,16 @@ function TagSelect(_a) {
     }, [isSelected]);
     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 },
+    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, XS = _a.XS, theme = _a.theme, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    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(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.js

@@ -28,7 +28,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var react_router_dom_1 = require("react-router-dom");
 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 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",
@@ -41,10 +42,10 @@ var commonStyle = 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
+        ? (0, utilsOolib_1.getPrimaryColor10)(colors)
+        : (0, utilsOolib_1.getPrimaryColor40)(colors), invert
         ? greyColor100
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText);
+        : (0, utilsOolib_1.getPrimaryColorText)(colors));
 };
 var greyHover = function (_a) {
     var invert = _a.invert;
@@ -70,15 +71,15 @@ var StyledTagClear = styled_components_1.default.div(templateObject_11 || (templ
     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);
+            ? (0, utilsOolib_1.getPrimaryColor100)(colors)
+            : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100);
     }
     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);
+            ? (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;
@@ -97,7 +98,7 @@ var StyledTagSelect = styled_components_1.default.div(templateObject_15 || (temp
     return commonStyle({ size: size });
 }, (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));
+    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_18 || (templateObject_18 = __makeTemplateObject(["\n  \t", "\n\t", ";\n    ", "\n"], ["\n  \t", "\n\t", ";\n    ", "\n"])), function (_a) {
@@ -107,9 +108,9 @@ var StyledTagLink = styled_components_1.default.div(templateObject_18 || (templa
     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 }));
+            ? (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 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"])));

package/dist/components/TextInputs/index.js

@@ -74,7 +74,7 @@ var Loader_1 = require("../Loader");
 var BlockLabel_1 = require("../BlockLabel");
 var Typo_1 = require("../Typo");
 var Buttons_1 = require("../Buttons");
-var utils_1 = require("../utils");
+var utils_1 = require("../../utils");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, onClick = _a.onClick, size = _a.size;
     var IconComp = icons_1.icons[icon];

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/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.9.0",
+  "version": "2.9.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",