oolib 2.10.1 → 2.11.1

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

@@ -0,0 +1,8 @@
+export function BannerAlert({ BANNER_STATE, REMOVE_ALERT_BANNER }: {
+    BANNER_STATE: any;
+    REMOVE_ALERT_BANNER: any;
+}): JSX.Element;
+export function BannerInfo({ BANNER_STATE, REMOVE_INFO_BANNER }: {
+    BANNER_STATE: any;
+    REMOVE_INFO_BANNER: any;
+}): JSX.Element;

package/dist/components/Banners/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerInfo = exports.BannerAlert = void 0;
+var react_1 = __importStar(require("react"));
+var index_styled_1 = require("./index.styled");
+var Buttons_1 = require("../Buttons");
+var icons_1 = require("../../icons");
+var Typo_1 = require("../Typo");
+var ICONS = {
+    red: "XCircle",
+    green: "CheckCircle",
+    yellow: "WarningCircle",
+    dark: "WarningCircle",
+    grey: "WarningCircle",
+};
+var DisplayIcon = function (_a) {
+    var color = _a.color;
+    var IconComp = icons_1.icons[ICONS[color]];
+    return (react_1.default.createElement("div", { style: { color: color } }, IconComp && react_1.default.createElement(IconComp, { size: 24, weight: "bold" })));
+};
+var Banner = function (_a) {
+    var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon;
+    var _b = (0, react_1.useState)(0), height = _b[0], setHeight = _b[1];
+    var ContainerRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        var timer;
+        setHeight(ContainerRef.current.scrollHeight);
+        if (timeOut)
+            timer = setTimeout(function () {
+                setHeight("0px");
+                handleRemove(null, id);
+            }, timeOut);
+        return function () { return (timeOut ? clearTimeout(timer) : null); };
+    }, [cta, id, msg]);
+    return (react_1.default.createElement(index_styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, maxHeight: height },
+        react_1.default.createElement(index_styled_1.BannerWrapperStyled, { color: color },
+            react_1.default.createElement(index_styled_1.BannerStyled, null,
+                showIcon && react_1.default.createElement(DisplayIcon, { color: color }),
+                react_1.default.createElement(Typo_1.SANS_2, null, msg),
+                cta && (react_1.default.createElement(Buttons_1.ButtonSecondary, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: cta.action, invert: color === "dark" ? true : false }, cta === null || cta === void 0 ? void 0 : cta.text))),
+            react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return handleRemove(e, id); } }))));
+};
+var BannerAlert = function (_a) {
+    var _b;
+    var BANNER_STATE = _a.BANNER_STATE, REMOVE_ALERT_BANNER = _a.REMOVE_ALERT_BANNER;
+    return (react_1.default.createElement(index_styled_1.BannerAlertStyled, null, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, showIcon: e.showIcon })); })));
+};
+exports.BannerAlert = BannerAlert;
+var BannerInfo = function (_a) {
+    var _b;
+    var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER;
+    return (react_1.default.createElement(index_styled_1.BannerInfoStyled, null, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon })); })));
+};
+exports.BannerInfo = BannerInfo;

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

@@ -0,0 +1,5 @@
+export const BannerAnimateStyled: any;
+export const BannerWrapperStyled: any;
+export const BannerStyled: any;
+export const BannerAlertStyled: any;
+export const BannerInfoStyled: any;

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

@@ -0,0 +1,45 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerInfoStyled = exports.BannerAlertStyled = exports.BannerStyled = exports.BannerWrapperStyled = exports.BannerAnimateStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
+var mixins_1 = require("../../themes/mixins");
+var transitions_1 = require("../../themes/mixins/transitions");
+var greyColor15 = themes_1.colors.greyColor15, lightRed = themes_1.colors.lightRed, lightGreen = themes_1.colors.lightGreen, lightYellow = themes_1.colors.lightYellow, red = themes_1.colors.red, green = themes_1.colors.green, yellow = themes_1.colors.yellow, greyColor5 = themes_1.colors.greyColor5, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
+var colorConfig = {
+    red: { bgColor: lightRed, color: red },
+    green: { bgColor: lightGreen, color: green },
+    yellow: { bgColor: lightYellow, color: yellow },
+    grey: { bgColor: greyColor5 },
+    dark: { bgColor: greyColor100 },
+};
+exports.BannerAnimateStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  transition: inherit;\n  max-height: ", "px;\n"], ["\n  overflow: hidden;\n  transition: inherit;\n  max-height: ", "px;\n"])), function (_a) {
+    var maxHeight = _a.maxHeight;
+    return maxHeight;
+});
+exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  box-shadow: inset 00px -2px 0px ", ";\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  box-shadow: inset 00px -2px 0px ", ";\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"])), greyColor15, function (_a) {
+    var _b;
+    var color = _a.color;
+    return (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.bgColor;
+}, function (_a) {
+    var _b;
+    var color = _a.color;
+    return (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.color;
+}, function (_a) {
+    var color = _a.color;
+    return (color === "dark" ? white : "");
+}, (0, mixins_1.mediaQuery)("sm"));
+exports.BannerStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  width: 100%;\n"])));
+exports.BannerAlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n  height:", "px;\n  ", "\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n  height:", "px;\n  ", "\n"])), function (_a) {
+    var height = _a.height;
+    return height;
+}, (0, transitions_1.transition)("max-height"));
+exports.BannerInfoStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n  ", "\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n  ", "\n"])), (0, transitions_1.transition)("max-height"));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/BlockLabel/index.js

@@ -9,9 +9,7 @@ var Typo_1 = require("../Typo");
 var InlineAlert_1 = require("../InlineAlert");
 var index_styled_1 = require("./index.styled");
 var colors_1 = require("../../themes/colors");
-var red = colors_1.colors.red, greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80, 
-//InlineAlert colors below
-white = colors_1.colors.white, green = colors_1.colors.green, black = colors_1.colors.black, darkGrey = colors_1.colors.darkGrey, greyColor100 = colors_1.colors.greyColor100;
+var red = colors_1.colors.red, greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
 var BlockLabel = function (props) {
     /*
       missing parts of this component compared to kPlabel:

package/dist/components/Breadcrumbs/index.js

@@ -41,7 +41,7 @@ var Breadcrumbs = function (_a) {
         if (containerWidth === 0)
             return; // when the measuredRef isn't updated yet
         var children = measuredContainer.current.children;
-        var isOverflowing = children[children.length - 1].getBoundingClientRect().right > containerWidth * 0.95; // if exceeds 87% of the parent
+        var isOverflowing = children[children.length - 1].getBoundingClientRect().right > containerWidth * 0.95; // if exceeds 95% of the parent
         if (isOverflowing)
             setBeConcise(true);
     }, [containerWidth]);
@@ -63,7 +63,7 @@ var Breadcrumbs = function (_a) {
         })));
     }
     return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
-        react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: links[links.length - 2].to, invert: invert },
+        react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: (links[links.length - 2] || links[0]).to, invert: invert },
             react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor100 }),
             react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "Back"))));
 };

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

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

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

@@ -12,17 +12,18 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var styled_components_2 = require("styled-components");
 var mixins_1 = require("../../themes/mixins");
 var colors_1 = require("../../themes/colors");
-var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, 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, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
 //sizes
 var SIZES = {
     S: "3rem",
     M: "4rem",
 };
-var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", "; // greyColor100: white\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", "; // greyColor100: white\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
-        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100;
+        ? (0, utilsOolib_1.getPrimaryColor40)(_colors)
+        : (0, utilsOolib_1.getPrimaryColor100)(_colors);
 }, function (_a) {
     var invert = _a.invert;
     return invert ? greyColor100 : white;
@@ -31,48 +32,48 @@ var ButtonPrimary = (0, styled_components_2.css)(templateObject_3 || (templateOb
     return color && (0, styled_components_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", "; //greyColor70 : $greyColor15;\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "], ["\n      background-color: ", "; //greyColor70 : $greyColor15;\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "])), function (_a) {
+    return disabled && (0, styled_components_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "])), function (_a) {
         var invert = _a.invert;
         return invert ? greyColor70 : greyColor15;
     }, greyColor40);
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
-        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40;
+        ? (0, utilsOolib_1.getPrimaryColor10)(_colors)
+        : (0, utilsOolib_1.getPrimaryColor40)(_colors);
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
         ? greyColor100
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
+        : (0, utilsOolib_1.getPrimaryColorText)(_colors);
 });
 var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    &:hover {\n    background-color: ", ";\n    color: ", "; \n  }\n"], ["\n  border: 2px solid\n    ", ";\n  background-color: ", ";\n\n  color: ", "; \n  ", "\n  ", "\n  ", "\n    &:hover {\n    background-color: ", ";\n    color: ", "; \n  }\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
-        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100;
+        ? (0, utilsOolib_1.getPrimaryColor40)(_colors)
+        : (0, utilsOolib_1.getPrimaryColor100)(_colors);
 }, function (_a) {
     var invert = _a.invert;
     return invert ? greyColor100 : white;
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
-        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
+        ? (0, utilsOolib_1.getPrimaryColor40)(_colors)
+        : (0, utilsOolib_1.getPrimaryColorText)(_colors);
 }, function (_a) {
     var color = _a.color;
     return color && (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
 }, function (_a) {
     var active = _a.active;
     return active && (0, styled_components_2.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
+        var invert = _a.invert, _colors = _a.theme._colors;
         return invert ?
-            ((colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40)
+            (0, utilsOolib_1.getPrimaryColor40)(_colors)
             :
-                ((colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10);
+                (0, utilsOolib_1.getPrimaryColor10)(_colors);
     }, function (_a) {
-        var colors = _a.theme.colors;
-        return (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
+        var _colors = _a.theme._colors;
+        return (0, utilsOolib_1.getPrimaryColorText)(_colors);
     });
 }, function (_a) {
     var disabled = _a.disabled;
@@ -81,40 +82,40 @@ var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (template
         return invert ? greyColor80 : white;
     }, greyColor15, greyColor40);
 }, function (_a) {
-    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
+    var invert = _a.invert, active = _a.active, _colors = _a.theme._colors;
     return active
         ? ""
         : invert
-            ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10
-            : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40;
+            ? (0, utilsOolib_1.getPrimaryColor10)(_colors)
+            : (0, utilsOolib_1.getPrimaryColor40)(_colors);
 }, function (_a) {
-    var colors = _a.theme.colors;
-    return (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
+    var _colors = _a.theme._colors;
+    return (0, utilsOolib_1.getPrimaryColorText)(_colors);
 });
-var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", ";\n  background-color: ", ";\n  color: ", ";\n  ", "\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", "\n    };\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  border: 2px solid\n    ", ";\n  box-shadow: -4px 4px 1px\n    ", "\n    };\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
-        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100;
+        ? (0, utilsOolib_1.getPrimaryColor40)(_colors)
+        : (0, utilsOolib_1.getPrimaryColor100)(_colors);
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
-        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100;
+        ? (0, utilsOolib_1.getPrimaryColor40)(_colors)
+        : (0, utilsOolib_1.getPrimaryColor100)(_colors);
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert;
     return invert ? greyColor100 : white;
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
-        ? (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
+        ? (0, utilsOolib_1.getPrimaryColor40)(_colors)
+        : (0, utilsOolib_1.getPrimaryColorText)(_colors);
 }, function (_a) {
     var color = _a.color;
-    return color && (0, styled_components_2.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+    return color && (0, styled_components_2.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color);
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_2.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: ", "; //$greyColor40;\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", "; // $darkShadowColor;\n      pointer-events: none;\n      background-color: ", "; //greyColor80 : white\n    "], ["\n      color: ", "; //$greyColor40;\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", "; // $darkShadowColor;\n      pointer-events: none;\n      background-color: ", "; //greyColor80 : white\n    "])), greyColor40, function (_a) {
+    return disabled && (0, styled_components_2.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: ", ";\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", ";\n      pointer-events: none;\n      background-color: ", "; \n    "], ["\n      color: ", ";\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", ";\n      pointer-events: none;\n      background-color: ", "; \n    "])), greyColor40, function (_a) {
         var invert = _a.invert;
         return (invert ? greyColor40 : greyColor15);
     }, greyColor40, function (_a) {
@@ -122,21 +123,21 @@ var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateOb
         return invert ? greyColor80 : white;
     });
 }, function (_a) {
-    var invert = _a.invert, colors = _a.theme.colors;
+    var invert = _a.invert, _colors = _a.theme._colors;
     return invert
         ? greyColor80
-        : (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40;
+        : (0, utilsOolib_1.getPrimaryColor40)(_colors);
 });
 var ButtonGhost = (0, styled_components_2.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", "; //$white;\n  color: ", ";\n  ", "\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var active = _a.active, colors = _a.theme.colors;
-    return active ? ((colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40) : "inherit";
+    var active = _a.active, _colors = _a.theme._colors;
+    return active ? (0, utilsOolib_1.getPrimaryColor40)(_colors) : "inherit";
 }, function (_a) {
-    var invert = _a.invert, composition = _a.composition, colors = _a.theme.colors;
+    var invert = _a.invert, composition = _a.composition, _colors = _a.theme._colors;
     return invert
-        ? ((colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40)
+        ? (0, utilsOolib_1.getPrimaryColor40)(_colors)
         : composition === "iconOnly"
             ? greyColor100
-            : ((colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColor40);
+            : (0, utilsOolib_1.getPrimaryColorText)(_colors);
 }, function (_a) {
     var color = _a.color;
     return color && (0, styled_components_2.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
@@ -150,12 +151,12 @@ var ButtonGhost = (0, styled_components_2.css)(templateObject_14 || (templateObj
     var disabled = _a.disabled;
     return disabled && (0, styled_components_2.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "], ["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "])), greyColor40);
 }, function (_a) {
-    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
+    var invert = _a.invert, active = _a.active, _colors = _a.theme._colors;
     return active
         ? ""
         : invert
             ? greyColor70
-            : (colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10;
+            : (0, utilsOolib_1.getPrimaryColor10)(_colors);
 });
 var GoogleButton = (0, styled_components_2.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"], ["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"])), white, function (_a) {
     var disabled = _a.disabled;

package/dist/components/InlineAlert/index.js

@@ -17,9 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineAlert = void 0;
 var react_1 = __importDefault(require("react"));
 var colors_1 = require("../../themes/colors");
+var utilsOolib_1 = require("../../utilsOolib");
 var red = colors_1.colors.red, white = colors_1.colors.white, green = colors_1.colors.green, black = colors_1.colors.black, darkGrey = colors_1.colors.darkGrey, greyColor100 = colors_1.colors.greyColor100;
 var InlineAlert = function (props) {
     var text = props.text, link = props.link, type = props.type, style = props.style, invert = props.invert;
+    var localize = (0, utilsOolib_1.useLocale)();
     var typeColor = {
         success: green,
         danger: red,
@@ -27,7 +29,7 @@ var InlineAlert = function (props) {
         neutralInactive: darkGrey,
     };
     return (react_1.default.createElement("h5", { style: __assign({ display: 'flex', alignItems: 'center', gap: '0.5rem' }, style) },
-        react_1.default.createElement("span", { className: 'SANS_2', style: { color: typeColor[type] } }, text),
-        link && (react_1.default.createElement("a", { style: { paddingLeft: '1rem', textDecoration: 'underline', color: invert ? white : greyColor100 }, href: link.url, target: "_blank" }, link.text))));
+        react_1.default.createElement("span", { className: 'SANS_2', style: { color: typeColor[type] } }, localize(text)),
+        link && (react_1.default.createElement("a", { style: { paddingLeft: '1rem', textDecoration: 'underline', color: invert ? white : greyColor100 }, href: link.url, target: "_blank" }, localize(link.text)))));
 };
 exports.InlineAlert = InlineAlert;

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

@@ -26,13 +26,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLoader = exports.StyledLoaderWrapper = exports.StyledLoaderOverlay = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../themes/colors");
-var greyColor10 = colors_1.colors.greyColor10, greyColor70 = colors_1.colors.greyColor70, greyColor100 = colors_1.colors.greyColor100, lightShadowColor = colors_1.colors.lightShadowColor, white = colors_1.colors.white;
+var utilsOolib_1 = require("../../utilsOolib");
+var greyColor10 = colors_1.colors.greyColor10, greyColor70 = colors_1.colors.greyColor70, greyColor100 = colors_1.colors.greyColor100, white = colors_1.colors.white;
 var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"], ["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
 var StyledLoader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"], ["\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"])), spin, function (_a) {
-    var M = _a.M, L = _a.L, invert = _a.invert, colors = _a.theme.colors;
+    var M = _a.M, L = _a.L, invert = _a.invert, _colors = _a.theme._colors;
     var size = M ? 10 : L ? 15 : 3;
     var trackSize = size === 30 ? size / 5 : size / 7;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", "rem;\n      height: ", "rem;\n      border-style: solid;\n      border-width: ", "rem;\n      border-color: ", ";\n      border-top-color: ", "; //props.theme.color\n      //border-left-color: ", ";\n    "], ["\n      width: ", "rem;\n      height: ", "rem;\n      border-style: solid;\n      border-width: ", "rem;\n      border-color: ", ";\n      border-top-color: ", "; //props.theme.color\n      //border-left-color: ", ";\n    "])), size, size, trackSize, invert ? greyColor70 : greyColor10, invert ? white : ((colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || lightShadowColor), invert ? white : ((colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || lightShadowColor));
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", "rem;\n      height: ", "rem;\n      border-style: solid;\n      border-width: ", "rem;\n      border-color: ", ";\n      border-top-color: ", ";\n    "], ["\n      width: ", "rem;\n      height: ", "rem;\n      border-style: solid;\n      border-width: ", "rem;\n      border-color: ", ";\n      border-top-color: ", ";\n    "])), size, size, trackSize, invert ? greyColor70 : greyColor10, invert ? white : (0, utilsOolib_1.getPrimaryColor100)(_colors));
 });
 exports.StyledLoader = StyledLoader;
 var StyledLoaderWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"], ["\n  text-align: center;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"])), function (_a) {

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

@@ -0,0 +1,16 @@
+export function OKELink({ invert, disabled, theme, color, invertUnderline, linkType, link: linkProp, to, text, children, onClick, icon, iconAfter, iconSize }: {
+    invert: any;
+    disabled: any;
+    theme: any;
+    color: any;
+    invertUnderline: any;
+    linkType: any;
+    link: any;
+    to: any;
+    text: any;
+    children: any;
+    onClick: any;
+    icon: any;
+    iconAfter: any;
+    iconSize: any;
+}): JSX.Element;

package/dist/components/OKELink/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OKELink = void 0;
+var react_1 = __importDefault(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var utilsOolib_1 = require("../../utilsOolib");
+var utils_1 = require("../../utils");
+var icons_1 = require("../../icons");
+var styled_1 = require("./styled");
+var utils_2 = require("./utils");
+var OKELink = function (_a) {
+    var invert = _a.invert, disabled = _a.disabled, theme = _a.theme, color = _a.color, invertUnderline = _a.invertUnderline, linkType = _a.linkType, linkProp = _a.link, to = _a.to, text = _a.text, children = _a.children, onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, iconSize = _a.iconSize;
+    var localize = (0, utilsOolib_1.useLocale)();
+    var link = linkProp || to;
+    var PrefixIconComp = icons_1.icons[icon];
+    var SuffixIconComp = icons_1.icons[iconAfter];
+    var iconColor = (0, utils_2.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme });
+    return (react_1.default.createElement(styled_1.StyledLink, __assign({ onClick: function (ev) {
+            ev.stopPropagation();
+            linkType === 'action' && !disabled && onClick(ev);
+        }, invertUnderline: invertUnderline, invert: invert, disabled: disabled, color: color }, (linkType === 'action' ?
+        { as: 'span' }
+        : linkType === 'external' ?
+            {
+                as: react_router_dom_1.Link,
+                to: !disabled ? link : '#'
+            } : {
+            href: !disabled ? (0, utils_1.injectHttps)(link) : '#',
+            target: "_blank"
+        })),
+        PrefixIconComp && react_1.default.createElement(PrefixIconComp, { color: iconColor, size: iconSize || 15 }),
+        react_1.default.createElement("span", { className: "text" }, localize(text || children)),
+        SuffixIconComp && react_1.default.createElement(SuffixIconComp, { color: iconColor, size: iconSize || 15 })));
+};
+exports.OKELink = OKELink;

package/dist/components/OKELink/styled.d.ts

@@ -0,0 +1 @@
+export const StyledLink: any;

package/dist/components/OKELink/styled.js

@@ -0,0 +1,33 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLink = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../themes/mixins");
+var utils_1 = require("./utils");
+exports.StyledLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  pointer-events: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: 0.7rem;\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n\n  &:hover{\n      .text::after{\n        width: ", ";\n      }\n  }\n\n  & > .text {\n    position: relative;\n    color: ", ";\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    &::after{\n        content: '';\n        background-color: ", ";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: ", ";\n        height: ", ";\n        ", ";\n    }\n  }\n"], ["\n  cursor: pointer;\n  pointer-events: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: 0.7rem;\n  max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n  text-decoration: none;\n\n  &:hover{\n      .text::after{\n        width: ", ";\n      }\n  }\n\n  & > .text {\n    position: relative;\n    color: ", ";\n\n    & > *:first-child{ // kishan addition\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    &::after{\n        content: '';\n        background-color: ", ";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: ", ";\n        height: ", ";\n        ", ";\n    }\n  }\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 'none' : 'auto';
+}, function (_a) {
+    var invertUnderline = _a.invertUnderline;
+    return invertUnderline ? '100%' : 0;
+}, function (_a) {
+    var theme = _a.theme, invert = _a.invert, disabled = _a.disabled, color = _a.color;
+    return (0, utils_1.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme });
+}, function (_a) {
+    var theme = _a.theme, invert = _a.invert, color = _a.color;
+    return (0, utils_1.setLinkColor)({ theme: theme, invert: invert, color: color });
+}, function (_a) {
+    var invertUnderline = _a.invertUnderline;
+    return invertUnderline ? 0 : '100%';
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 0 : '1px';
+}, (0, mixins_1.transition)('width'));
+var templateObject_1;

package/dist/components/OKELink/utils/index.d.ts

@@ -0,0 +1,6 @@
+export function setLinkColor({ disabled, color, invert, theme }: {
+    disabled: any;
+    color: any;
+    invert: any;
+    theme: any;
+}): any;

package/dist/components/OKELink/utils/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setLinkColor = void 0;
+var themes_1 = require("../../../themes");
+var utilsOolib_1 = require("../../../utilsOolib");
+var greyColor40 = themes_1.colors.greyColor40;
+var setLinkColor = function (_a) {
+    var disabled = _a.disabled, color = _a.color, invert = _a.invert, theme = _a.theme;
+    switch (true) {
+        case disabled:
+            return greyColor40;
+        case !!color:
+            return color;
+        case invert:
+            return (0, utilsOolib_1.getPrimaryColor40)(theme._colors);
+        default:
+            return (0, utilsOolib_1.getPrimaryColorText)(theme._colors);
+    }
+};
+exports.setLinkColor = setLinkColor;

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

@@ -40,8 +40,8 @@ var setBorder = function (_a) {
 var setFill = function (_a) {
     var _b;
     var props = _a.props;
-    var colorsObj = ((_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors)
-        ? __assign(__assign({}, colors_1.colors), props.theme.colors) : colors_1.colors;
+    var colorsObj = ((_b = props.theme) === null || _b === void 0 ? void 0 : _b._colors)
+        ? __assign(__assign({}, colors_1.colors), props.theme._colors) : colors_1.colors;
     var colorKey = Object.keys(props).find(function (p) { return !!colorsObj[p]; });
     return colorKey ? "background-color: ".concat(colorsObj[colorKey], ";") : '';
 };

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

@@ -0,0 +1,9 @@
+export function TabBar({ id, options, value, onChange, updateUrl, style, emptyTabs, }: {
+    id: any;
+    options: any;
+    value: any;
+    onChange: any;
+    updateUrl: any;
+    style: any;
+    emptyTabs: any;
+}): JSX.Element;