oolib 2.10.2 → 2.11.0

package/dist/components/TabBar/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../Typo");
+var styled_1 = require("./styled");
+var react_router_dom_1 = require("react-router-dom");
+function TabBar(_a) {
+    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, className = _a.className, updateUrl = _a.updateUrl, style = _a.style, emptyTabs = _a.emptyTabs;
+    var history = (0, react_router_dom_1.useHistory)();
+    var location = (0, react_router_dom_1.useLocation)();
+    var handleClick = function (value) {
+        if (updateUrl) {
+            var params = new URLSearchParams(location.search);
+            params.set("activeTab", JSON.stringify(value));
+            history.push({
+                search: params.toString(),
+            });
+        }
+        onChange(null, value);
+    };
+    return (react_1.default.createElement(styled_1.TabBarStyled, null,
+        react_1.default.createElement(styled_1.TabBarContainerStyled, { id: id },
+            react_1.default.createElement(styled_1.TabBarRowStyled, { id: id }, options.map(function (op) {
+                var tabHasError = emptyTabs && emptyTabs.includes(op.value);
+                var tabIsActive = value && op.value === value.value;
+                return (react_1.default.createElement(styled_1.TabBarTabWrapper, { style1: style === "1", key: op.value, active: tabIsActive, error: tabHasError },
+                    react_1.default.createElement(styled_1.TabBarTabStyled, { active: tabIsActive, error: tabHasError, style1: style === "1", onClick: function () { return handleClick(op); } },
+                        react_1.default.createElement(Typo_1.SANS_2, { semibold: style === "1" }, op.display))));
+            })))));
+}
+exports.default = TabBar;

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

@@ -0,0 +1,5 @@
+export const TabBarStyled: any;
+export const TabBarContainerStyled: any;
+export const TabBarRowStyled: any;
+export const TabBarTabWrapper: any;
+export const TabBarTabStyled: any;

package/dist/components/TabBar/styled.js

@@ -0,0 +1,68 @@
+"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 __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.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../themes");
+var mixins_1 = require("../../themes/mixins");
+var utilsOolib_1 = require("../../utilsOolib");
+var greyColor100 = themes_1.colors.greyColor100, greyColor10 = themes_1.colors.greyColor10, red = themes_1.colors.red, lightRed = themes_1.colors.lightRed, greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, none = themes_1.colors.none;
+var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), (0, mixins_1.transition)("background-color"), greyColor5, function (_a) {
+    var active = _a.active;
+    return active && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "])), greyColor5, function (_a) {
+        var _colors = _a.theme._colors;
+        return (0, utilsOolib_1.getPrimaryColor100)(_colors);
+    });
+}, function (_a) {
+    var error = _a.error;
+    return error && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      background-color: ", ";\n      ::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 3px;\n        background-color: ", ";\n      }\n    "])), lightRed, red);
+});
+var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  background-color: ", ";\n  :first-of-type {\n    border-radius: 2px 0 0 2px;\n  }\n  :last-of-type {\n    border-radius: 0 2px 2px 0;\n  }\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  ", "\n  background-color: ", ";\n  :first-of-type {\n    border-radius: 2px 0 0 2px;\n  }\n  :last-of-type {\n    border-radius: 0 2px 2px 0;\n  }\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), (0, mixins_1.multiTransition)("background-color"), greyColor5, function (_a) {
+    var active = _a.active;
+    return (active ? "" : greyColor10);
+}, function (_a) {
+    var active = _a.active;
+    return active && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      background-color: ", ";\n    "], ["\n      position: relative;\n      background-color: ", ";\n    "])), greyColor100);
+});
+var tabBarTabStyle1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 0.8rem 2rem;\n  white-space: nowrap;\n  ", "\n"], ["\n  padding: 0.8rem 2rem;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
+    var error = _a.error;
+    return error && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), red);
+});
+var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"], ["\n  padding-left: 2rem;\n  padding-right: 2rem;\n  ", "\n  ", "\n"])), (0, mixins_1.multiTransition)("color"), function (_a) {
+    var active = _a.active;
+    return active && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), white);
+});
+exports.TabBarStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  z-index: 1000;\n  height: 4rem;\n"], ["\n  background-color: ", ";\n  z-index: 1000;\n  height: 4rem;\n"])), white);
+exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 100%;\n  width: fit-content;\n"], ["\n  height: 100%;\n  width: fit-content;\n"])));
+exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  height: 100%;\n  display: flex;\n"], ["\n  height: 100%;\n  display: flex;\n"])));
+exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  ", "\n"], ["\n  height: 100%;\n  ", "\n"])), function (_a) {
+    var style1 = _a.style1;
+    return (style1 ? tabBarWrapperStyle1 : tabBarWrapperStyle2);
+});
+exports.TabBarTabStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  padding: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  height: 100%;\n  cursor: pointer;\n  color: ", ";\n  background-color: ", ";\n\n  border: 0;\n  padding: 0;\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), greyColor100, none, none, function (_a) {
+    var style1 = _a.style1;
+    return (style1 ? tabBarTabStyle1 : tabBarTabStyle2);
+});
+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;

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

@@ -67,19 +67,19 @@ var StyledTagClear = styled_components_1.default.div(templateObject_11 || (templ
     var size = _a.size;
     return commonStyle({ size: size });
 }, function (_a) {
-    var variant = _a.variant, size = _a.size, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
+    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);
+            ? (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 ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert
-            ? (0, utilsOolib_1.getPrimaryColorText)(colors)
-            : (0, utilsOolib_1.getPrimaryColor40)(colors));
+            ? (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;
@@ -87,30 +87,30 @@ var StyledTagClear = styled_components_1.default.div(templateObject_11 || (templ
 });
 exports.StyledTagClear = StyledTagClear;
 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;
+    var invert = _a.invert, grey = _a.grey, _colors = _a.theme._colors;
     return grey
-        ? greyHover({ invert: invert, colors: colors })
-        : blueHover({ invert: invert, colors: colors });
+        ? 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 });
 }, (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)));
+    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_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 });
 }, (0, mixins_1.multiTransition)("background-color", "color"), function (_a) {
-    var variant = _a.variant, invert = _a.invert, size = _a.size, colors = _a.theme.colors;
+    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 }));
+            ? (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/ToggleButton/index.d.ts

@@ -0,0 +1,2 @@
+export function ToggleButton(props: any): JSX.Element;
+export function SingleToggleButton(props: any): JSX.Element;

package/dist/components/ToggleButton/index.js

@@ -0,0 +1,59 @@
+"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.SingleToggleButton = exports.ToggleButton = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../Typo");
+var BlockLabel_1 = require("../BlockLabel");
+var utils_1 = require("../../utils");
+var themes_1 = require("../../themes");
+var styled_1 = require("./styled");
+var greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
+var ToggleButton = function (props) {
+    var value = props.value, options = props.options, onChange = props.onChange, invert = props.invert, square = props.square;
+    var isLeftOptionActive = options[0].value === value.value;
+    var leftOptionColor, rightOptionColor;
+    if (invert) {
+        leftOptionColor = isLeftOptionActive ? white : greyColor40;
+        rightOptionColor = isLeftOptionActive ? greyColor40 : white;
+    }
+    else {
+        leftOptionColor = isLeftOptionActive ? greyColor100 : greyColor40;
+        rightOptionColor = isLeftOptionActive ? greyColor40 : greyColor100;
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, utils_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(styled_1.StyledToggleWrraper, null,
+            react_1.default.createElement(Typo_1.LABEL, { invert: invert, style: { color: leftOptionColor } }, options[0].display),
+            react_1.default.createElement(styled_1.StyledButtonSlider, { invert: invert, square: square, onClick: function () { return onChange('', options.find(function (op) { return op.value !== value.value; })); } },
+                react_1.default.createElement(styled_1.StyledToggleButton, { invert: invert, square: square, direction: isLeftOptionActive ? 'left' : 'right' })),
+            react_1.default.createElement(Typo_1.LABEL, { invert: invert, style: { color: rightOptionColor } }, options[1].display))));
+};
+exports.ToggleButton = ToggleButton;
+var SingleToggleButton = function (props) {
+    var value = props.value, option = props.option, onChange = props.onChange, disabled = props.disabled, invert = props.invert, display = props.display, square = props.square;
+    var isInactive = value === undefined;
+    var labelColor = isInactive ? greyColor40 : greyColor100;
+    if (invert)
+        labelColor = isInactive ? greyColor40 : white;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, utils_1.getBlockLabelProps)(props))),
+        react_1.default.createElement(styled_1.StyledToggleWrraper, null,
+            react_1.default.createElement(styled_1.StyledButtonSlider, { inactive: isInactive, disabled: disabled, invert: invert, square: square, onClick: function () { return !disabled && onChange('', isInactive ? option : undefined); } },
+                react_1.default.createElement(styled_1.StyledToggleButton, { direction: isInactive ? 'left' : 'right', inactive: isInactive, disabled: disabled, square: square, invert: invert })),
+            react_1.default.createElement(Typo_1.LABEL, { invert: invert, style: { color: labelColor } }, (option === null || option === void 0 ? void 0 : option.display) || display || value))));
+};
+exports.SingleToggleButton = SingleToggleButton;

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

@@ -0,0 +1,3 @@
+export const StyledToggleWrraper: any;
+export const StyledButtonSlider: any;
+export const StyledToggleButton: any;

package/dist/components/ToggleButton/styled.js

@@ -0,0 +1,51 @@
+"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.StyledToggleButton = exports.StyledButtonSlider = exports.StyledToggleWrraper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../themes/mixins");
+var utilsOolib_1 = require("../../utilsOolib");
+var themes_1 = require("../../themes");
+var white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10;
+exports.StyledToggleWrraper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n"])));
+exports.StyledButtonSlider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"], ["\n  width: 4rem;\n  height: 2rem;\n  user-select: none;\n  position: relative;\n  \n  border-radius: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", "\n"])), function (_a) {
+    var square = _a.square;
+    return square ? '0.3rem' : '1rem';
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, function (_a) {
+    var _colors = _a.theme._colors, inactive = _a.inactive, disabled = _a.disabled;
+    if (disabled)
+        return greyColor10;
+    if (inactive)
+        return (0, utilsOolib_1.getPrimaryColor40)(_colors);
+    return (0, utilsOolib_1.getPrimaryColor100)(_colors);
+}, function (_a) {
+    var _colors = _a.theme._colors, disabled = _a.disabled;
+    return disabled ? greyColor10 : (0, utilsOolib_1.getPrimaryColorText)(_colors);
+}, (0, mixins_1.transition)('background-color'));
+exports.StyledToggleButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  border-radius: ", ";\n  cursor: ", ";\n  border: 2px solid ", ";\n\n  position: absolute;\n  top: 0;\n  left: ", ";\n  ", "\n"], ["\n  width: 2rem;\n  height: 2rem;\n  background-color: ", ";\n  outline: none;\n  border-radius: ", ";\n  cursor: ", ";\n  border: 2px solid ", ";\n\n  position: absolute;\n  top: 0;\n  left: ", ";\n  ", "\n"])), white, function (_a) {
+    var square = _a.square;
+    return square ? '0.3rem' : '50%';
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled ? 'not-allowed' : 'pointer';
+}, function (_a) {
+    var _colors = _a.theme._colors, inactive = _a.inactive, disabled = _a.disabled;
+    if (disabled)
+        return greyColor10;
+    if (inactive)
+        return (0, utilsOolib_1.getPrimaryColor40)(_colors);
+    return (0, utilsOolib_1.getPrimaryColor100)(_colors);
+}, function (_a) {
+    var direction = _a.direction;
+    return direction === 'left' ? '0' : 'calc(100% - 2rem)';
+}, (0, mixins_1.transition)('left', 0.2));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,6 @@
+export function Tooltip({ text, position, style, children }: {
+    text: any;
+    position?: string;
+    style: any;
+    children: any;
+}): JSX.Element;

package/dist/components/Tooltip/index.js

@@ -0,0 +1,36 @@
+"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.Tooltip = void 0;
+var react_1 = __importStar(require("react"));
+var Typo_1 = require("../Typo");
+var styled_1 = require("./styled");
+var Tooltip = function (_a) {
+    var text = _a.text, _b = _a.position, position = _b === void 0 ? 'top' : _b, style = _a.style, children = _a.children;
+    var _c = (0, react_1.useState)(false), showTooltip = _c[0], setShowTooltip = _c[1];
+    return (react_1.default.createElement(styled_1.StyledWrapper, { onMouseEnter: function () { return setShowTooltip(true); }, onMouseLeave: function () { return setShowTooltip(false); } },
+        children,
+        react_1.default.createElement(styled_1.StyledTooltip, { position: position, show: showTooltip, style: style },
+            react_1.default.createElement(Typo_1.SANS_2, null, text),
+            react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },
+                react_1.default.createElement(styled_1.StyledArrow, { position: position })))));
+};
+exports.Tooltip = Tooltip;

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

@@ -0,0 +1,4 @@
+export const StyledWrapper: any;
+export const StyledTooltip: any;
+export const StyledArrowOutline: any;
+export const StyledArrow: any;

package/dist/components/Tooltip/styled.js

@@ -0,0 +1,60 @@
+"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 __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.StyledArrow = exports.StyledArrowOutline = exports.StyledTooltip = exports.StyledWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../themes");
+var mixins_1 = require("../../themes/mixins");
+var util_1 = require("./util");
+exports.StyledWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n"], ["\n  position: relative; // made this wrapper with styled.component to ensure its\n  width: fit-content; // engine will make this 'fit-content' compatible with firefox/safari\n"])));
+var greyColor15 = themes_1.colors.greyColor15, white = themes_1.colors.white;
+var clipPaths = {
+    top: "0% 0%, 50% 65.4%, 100% 0%",
+    bottom: '50% 34.6%, 100% 100%, 0% 100%',
+    right: '100% 0%, 50% 50%, 100% 100%',
+    left: '0% 0%, 50% 50%, 0% 100%',
+};
+exports.StyledTooltip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  padding: 0.4rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"], ["\n  ", ";\n  ", "\n\n  padding: 0.4rem 1rem;\n  white-space: nowrap;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: absolute;\n  ", "\n\n  \n"])), function (_a) {
+    var show = _a.show;
+    return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["opacity:1; z-index: 5;"], ["opacity:1; z-index: 5;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["opacity:0; z-index: -5;"], ["opacity:0; z-index: -5;"])));
+}, (0, mixins_1.transition)('opacity', 0.1), white, greyColor15, function (_a) {
+    var position = _a.position;
+    return (0, util_1.positionTooltip)(position);
+});
+exports.StyledArrowOutline = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 1.3rem;\n  height: 1.3rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"], ["\n  background-color: ", ";\n  width: 1.3rem;\n  height: 1.3rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"])), greyColor15, function (_a) {
+    var position = _a.position;
+    return clipPaths[position];
+}, function (_a) {
+    var position = _a.position;
+    return (0, util_1.positionArrowBorder)(position);
+});
+exports.StyledArrow = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject([" // the the white part\n  background-color: ", ";\n  display:inline-block;\n  width: 0.9rem;\n  height: 0.9rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"], [" // the the white part\n  background-color: ", ";\n  display:inline-block;\n  width: 0.9rem;\n  height: 0.9rem;\n  position: absolute;\n  clip-path: polygon(", ");\n  ", "\n"])), white, function (_a) {
+    var position = _a.position;
+    return clipPaths[position];
+}, function (_a) {
+    var position = _a.position;
+    return (0, util_1.positionArrow)(position);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Tooltip/util/index.d.ts

@@ -0,0 +1,3 @@
+export function positionTooltip(position: any): any;
+export function positionArrowBorder(position: any): any;
+export function positionArrow(position: any): any;

package/dist/components/Tooltip/util/index.js

@@ -0,0 +1,42 @@
+"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.positionArrow = exports.positionArrowBorder = exports.positionTooltip = void 0;
+var styled_components_1 = require("styled-components");
+var positionTooltip = function (position) {
+    switch (position) {
+        case 'top':
+        case 'bottom':
+            return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", ";//8.5 space for the arrow\n      "], ["\n        ", ";//8.5 space for the arrow\n      "])), (position === 'top' ? 'bottom' : 'top') + ': calc(100% + 8.5px)');
+        case 'left':
+        case 'right':
+            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", ";//8.5 space for the arrow;\n        top: 0%;\n      "], ["\n        ", ";//8.5 space for the arrow;\n        top: 0%;\n      "])), (position === 'left' ? 'right' : 'left') + ': calc(100% + 8.5px)');
+    }
+};
+exports.positionTooltip = positionTooltip;
+var positionArrowBorder = function (position) {
+    switch (position) {
+        case 'top':
+        case 'bottom':
+            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", ";\n        left: 50%;\n        transform: translateX(-6.5px); // 13/2     \n      "], ["\n        ", ";\n        left: 50%;\n        transform: translateX(-6.5px); // 13/2     \n      "])), position + ': 100.5%');
+        case 'left':
+        case 'right':
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", ";\n        top: 50%;\n        transform: translateY(-6.5px); // 13/2\n      "], ["\n        ", ";\n        top: 50%;\n        transform: translateY(-6.5px); // 13/2\n      "])), position + ': 100.5%');
+    }
+};
+exports.positionArrowBorder = positionArrowBorder;
+var positionArrow = function (position) {
+    switch (position) {
+        case 'top':
+        case 'bottom':
+            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", ";\n        left: 14%;\n      "], ["\n        ", ";\n        left: 14%;\n      "])), position + ': 9%');
+        case 'left':
+        case 'right':
+            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        ", ";\n        top: 14%;\n      "], ["\n        ", ";\n        top: 14%;\n      "])), position + ': 7%');
+    }
+};
+exports.positionArrow = positionArrow;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,8 @@
+export function UserRoleBadge({ role, value, className, theme: { _Roles } }: {
+    role: any;
+    value: any;
+    className: any;
+    theme: {
+        _Roles: any;
+    };
+}): JSX.Element;

package/dist/components/UserRoleBadge/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserRoleBadge = void 0;
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("../../icons");
+var BadgeAdmin = icons_1.icons.BadgeAdmin, BadgeSuperAdmin = icons_1.icons.BadgeSuperAdmin, BadgeMod = icons_1.icons.BadgeMod, BadgeVetted = icons_1.icons.BadgeVetted;
+var UserRoleBadge = function (_a) {
+    var _b;
+    var role = _a.role, value = _a.value, className = _a.className, _Roles = _a.theme._Roles;
+    var badges = {
+        BadgeSuperAdmin: BadgeSuperAdmin,
+        BadgeAdmin: BadgeAdmin,
+        BadgeMod: BadgeMod,
+        BadgeVetted: BadgeVetted
+    };
+    var iconName = (_b = _Roles[value || role]) === null || _b === void 0 ? void 0 : _b.badgeIcon;
+    var Icon = iconName && badges[iconName];
+    return (Icon ?
+        react_1.default.createElement("div", { className: className },
+            react_1.default.createElement(Icon, null))
+        :
+            null);
+};
+exports.UserRoleBadge = UserRoleBadge;

package/dist/globalStyles/index.js

@@ -10,5 +10,5 @@ var themes_1 = require("../themes");
 var normalize_1 = require("./normalize");
 require("../assets/fonts/style.css");
 var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
+exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-size:10px;\n  color: ", ";\n  scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n  background-color: ", ";\n  border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\nhr {\n  border: none;\n  border-bottom: 0.1rem solid ", ";\n}\n\nbutton:focus, input:focus, textarea:focus{\n  outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  ", "\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n  ", "\n}\n\n.serif{\n  ", "\n}\n\n.medium {\n  font-weight: 500;\n}\n\n.semibold {\n  font-weight: 600;\n}\n\n.bold{\n  font-weight:bold;\n}\n\n.italic{\n  font-style: italic;\n}\n\nb, strong {\n  font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
 var templateObject_1;

package/dist/icons/custom/index.d.ts

@@ -0,0 +1,17 @@
+export function IndexIcon({ color, size }: {
+    color?: string;
+    size?: number;
+}): JSX.Element;
+export function LanguageIcon({ color, size }: {
+    color?: string;
+    size?: number;
+}): JSX.Element;
+export function LetterH({ role, size }: {
+    role: any;
+    size: any;
+}): JSX.Element;
+export function OkeGoogleIcon(props: any): JSX.Element;
+export function BadgeAdmin(props: any): JSX.Element;
+export function BadgeSuperAdmin(props: any): JSX.Element;
+export function BadgeMod(props: any): JSX.Element;
+export function BadgeVetted(props: any): JSX.Element;