oolib 1.5.0 → 2.1.0

package/dist/components/{buttons → Buttons}/index.js

@@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GoogleLogin = exports.UploadButton = exports.ButtonGhost = exports.ButtonCustom = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
 var react_1 = __importStar(require("react"));
 var index_styled_1 = require("./index.styled");
-var typo_1 = require("../typo");
+var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, size = _a.size;
@@ -48,7 +48,7 @@ var ButtonStyledWrapper = function (_a) {
     var composition = icon && displayText ? 'icon+text' : !displayText && 'iconOnly';
     return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? 'submit' : 'button', onClick: onClick, composition: composition, width: width, color: color },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20 }),
-        displayText && react_1.default.createElement(typo_1.SANS_3, { semibold: true }, displayText)));
+        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
 };
 var Button = function (_a) {
     var props = _a.props, variant = _a.variant;
@@ -79,11 +79,11 @@ var UploadButton = function (props) {
 };
 exports.UploadButton = UploadButton;
 var GoogleLogin = function (props) {
-    var theme = props.theme, S = props.S, disabled = props.disabled, width = props.width;
-    var displayText = 'Sign up with Google';
+    var theme = props.theme, S = props.S, disabled = props.disabled, width = props.width, className = props.className, style = props.style, value = props.value, children = props.children;
+    var displayText = value || children || "Sign up with Google";
     var size = (S && "S") || 'M';
-    return (react_1.default.createElement(index_styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: function () { return window.open('/api/OAuth/google', '_self'); }, variant: "googleAuth", theme: theme },
+    return (react_1.default.createElement(index_styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: function () { return window.open('/api/OAuth/google', '_self'); }, variant: "googleAuth", theme: theme, style: style, className: className },
         react_1.default.createElement(DisplayIcon, { icon: 'OkeGoogleIcon', size: 24 }),
-        displayText && react_1.default.createElement(typo_1.SANS_3, { semibold: true }, displayText)));
+        displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText)));
 };
 exports.GoogleLogin = GoogleLogin;

package/dist/components/{loader → Loader}/index.js

@@ -16,12 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 var react_1 = __importDefault(require("react"));
-var typo_1 = require("../typo");
+var Typo_1 = require("../Typo");
 var colors_1 = require("../../themes/colors");
 var greyColor100 = colors_1.colors.greyColor100;
 var index_styled_1 = require("./index.styled");
 var LoaderDiv = function (props) {
-    var SuitableTypo = props.L ? typo_1.SANS_5_6 : props.M ? typo_1.SANS_4 : typo_1.SANS_3;
+    var SuitableTypo = props.L ? Typo_1.SANS_5_6 : props.M ? Typo_1.SANS_4 : Typo_1.SANS_3;
     return (!props.children ?
         react_1.default.createElement(index_styled_1.StyledLoader, __assign({}, props)) :
         react_1.default.createElement(index_styled_1.StyledLoaderWrapper, __assign({}, props),

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

@@ -0,0 +1,35 @@
+export function TagDisplay({ display, invert, M, theme, variantSecondary }: {
+    display: any;
+    invert: any;
+    M: any;
+    theme: any;
+    variantSecondary: any;
+}): JSX.Element;
+export function TagClear({ id, display, value, M, invert, onClick, theme, variantSecondary, variantGhost, grey, }: {
+    id: any;
+    display: any;
+    value: any;
+    M: any;
+    invert: any;
+    onClick?: () => void;
+    theme: any;
+    variantSecondary: any;
+    variantGhost: any;
+    grey: any;
+}): JSX.Element;
+export function TagSelect({ onClick, isSelected, display, value, M, theme, }: {
+    onClick: any;
+    isSelected?: boolean;
+    display: any;
+    value: any;
+    M: any;
+    theme: any;
+}): JSX.Element;
+export function TagLink({ display, to, invert, M, theme, variantSecondary }: {
+    display: any;
+    to: any;
+    invert: any;
+    M: any;
+    theme: any;
+    variantSecondary: any;
+}): JSX.Element;

package/dist/components/Tags/index.js

@@ -0,0 +1,72 @@
+"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.TagLink = exports.TagSelect = exports.TagClear = exports.TagDisplay = void 0;
+var react_1 = __importStar(require("react"));
+var index_styled_1 = require("./index.styled");
+var Typo_1 = require("../Typo");
+var icons_1 = require("../../icons");
+function TagDisplay(_a) {
+    var display = _a.display, invert = _a.invert, M = _a.M, theme = _a.theme, variantSecondary = _a.variantSecondary;
+    var size = M ? 'M' : 'S';
+    return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variantSecondary: variantSecondary, invert: invert, theme: theme, size: size },
+        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display)));
+}
+exports.TagDisplay = TagDisplay;
+function TagClear(_a) {
+    var id = _a.id, display = _a.display, value = _a.value, M = _a.M, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, theme = _a.theme, variantSecondary = _a.variantSecondary, variantGhost = _a.variantGhost, grey = _a.grey;
+    var XIconCom = icons_1.phosphorIcons['X'];
+    var size = M ? 'M' : 'S';
+    return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, theme: theme, size: size, grey: grey, variantGhost: variantGhost, variantSecondary: variantSecondary, onClick: function () {
+            return !variantSecondary && !variantGhost && onClick(id, { display: display, value: value });
+        } },
+        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display),
+        react_1.default.createElement(index_styled_1.StyledIconWrapper, { theme: theme, invert: invert, grey: grey, variantSecondary: variantSecondary, onClick: function () {
+                return (variantSecondary || variantGhost) && onClick(id, { display: display, value: value });
+            } },
+            react_1.default.createElement(XIconCom, { size: '15', weight: 'bold' }))));
+}
+exports.TagClear = TagClear;
+function TagSelect(_a) {
+    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, theme = _a.theme;
+    var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
+    var handleOnClick = function () {
+        setSelected(!selected);
+        onClick({ display: display, value: value });
+    };
+    (0, react_1.useLayoutEffect)(function () {
+        if (selected && !isSelected) {
+            setSelected(isSelected);
+        }
+    }, [isSelected]);
+    var size = M ? 'M' : 'S';
+    return (react_1.default.createElement(index_styled_1.StyledTagSelect, { theme: theme, onClick: handleOnClick, selected: selected, size: size },
+        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display)));
+}
+exports.TagSelect = TagSelect;
+function TagLink(_a) {
+    var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, theme = _a.theme, variantSecondary = _a.variantSecondary;
+    var size = M ? 'M' : 'S';
+    return (react_1.default.createElement(index_styled_1.StyledLink, { to: to },
+        react_1.default.createElement(index_styled_1.StyledTagLink, { theme: theme, variantSecondary: variantSecondary, invert: invert, size: size },
+            react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display))));
+}
+exports.TagLink = TagLink;

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

@@ -0,0 +1,6 @@
+export const StyledIconWrapper: any;
+export const StyledLink: any;
+export const StyledTagDisplay: any;
+export const StyledTagClear: any;
+export const StyledTagSelect: any;
+export const StyledTagLink: any;

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

@@ -0,0 +1,99 @@
+"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.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.StyledIconWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../themes/colors");
+var react_router_dom_1 = require("react-router-dom");
+var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, greyColor10 = colors_1.colors.greyColor10;
+var SIZES = {
+    S: "3rem",
+    M: "4rem",
+};
+var commonStyle = function (_a) {
+    var size = _a.size;
+    return "\n  padding: 0 1rem;\n  position: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: center;\n  border-radius:0.2rem;\n  white-space: nowrap;\n\theight: ".concat(SIZES[size], ";\n");
+};
+var StyledTagDisplay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  \n\t", "\n\t", "\n\n"], ["\n  ", "\n  \n\t", "\n\t", "\n\n"])), function (_a) {
+    var size = _a.size;
+    return commonStyle({ size: size });
+}, function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t"], ["\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t"])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40);
+}, function (_a) {
+    var variantSecondary = _a.variantSecondary, invert = _a.invert;
+    return variantSecondary && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15);
+});
+exports.StyledTagDisplay = StyledTagDisplay;
+var StyledTagClear = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  \n\t", "\n\n\t", "\n\t", "\n"], ["\n  ", "\n  \n\t", "\n\n\t", "\n\t", "\n"])), function (_a) {
+    var size = _a.size;
+    return commonStyle({ size: size });
+}, function (_a) {
+    var variantSecondary = _a.variantSecondary, variantGhost = _a.variantGhost, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
+    return !variantSecondary &&
+        !variantGhost &&
+        (!grey
+            ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert
+                ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100
+                : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40));
+}, function (_a) {
+    var variantSecondary = _a.variantSecondary, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
+    return variantSecondary &&
+        (!grey
+            ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "], ["\n\t\t\t\t\tbackground: none;\n\t\t\t\t\tborder: 2px solid ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t  "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15));
+}, function (_a) {
+    var variantGhost = _a.variantGhost;
+    return variantGhost && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t"])));
+});
+exports.StyledTagClear = StyledTagClear;
+var StyledTagSelect = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n\t", "\n"], ["\n  ", "\n\t", "\n"])), function (_a) {
+    var size = _a.size;
+    return commonStyle({ size: size });
+}, function (_a) {
+    var selected = _a.selected, colors = _a.theme.colors;
+    return "\n    border: 2px solid ".concat(colors === null || colors === void 0 ? void 0 : colors.primaryColor100, ";\n    cursor: pointer;\n    background-color: ").concat(selected ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : null, ";\n\t\tcolor: ").concat(!selected ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : white, "\n  ");
+});
+exports.StyledTagSelect = StyledTagSelect;
+var StyledTagLink = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n\t", "\n\n\t", "\n\t\n"], ["\n  ", "\n\t", "\n\n\t", "\n\t\n"])), function (_a) {
+    var size = _a.size;
+    return commonStyle({ size: size });
+}, function (_a) {
+    var variantSecondary = _a.variantSecondary, invert = _a.invert, colors = _a.theme.colors;
+    return !variantSecondary && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert
+        ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100
+        : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? white : greyColor100);
+}, function (_a) {
+    var variantSecondary = _a.variantSecondary, invert = _a.invert, colors = _a.theme.colors;
+    return variantSecondary && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tbackground: none;\n\t\t\tborder: 2px solid\n\t\t\t\t", ";\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColor100 : colors === null || colors === void 0 ? void 0 : colors.primaryColor40, !invert ? colors === null || colors === void 0 ? void 0 : colors.primaryColorText : colors === null || colors === void 0 ? void 0 : colors.primaryColor40);
+});
+exports.StyledTagLink = StyledTagLink;
+var StyledIconWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t", "\n"], ["\n  display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t", "\n"])), function (_a) {
+    var invert = _a.invert, grey = _a.grey;
+    return grey && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\t\tcolor: ", ";\n\t\t"], ["\n\t\t\tcolor: ", ";\n\t\t"])), !invert ? greyColor100 : white);
+});
+exports.StyledIconWrapper = StyledIconWrapper;
+var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
+exports.StyledLink = StyledLink;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

package/dist/components/{typo → Typo}/index.js

@@ -50,9 +50,9 @@ var GenComp = function (_a) {
     var currentTheme = (0, styled_components_1.useTheme)();
     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(displayText);
+    var localText = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.localize) ? currentTheme.localize(displayText) : displayText;
     return (react_1.default.createElement(Comp, __assign({}, genFontStylingProps(props), { color: color, theme: theme, className: className, style: style, invert: invert }),
-        localText || displayText,
+        localText,
         suffix || ''));
 };
 var LABEL = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.LABEL_STYLED }); };

package/dist/globalStyles/index.js

@@ -8,5 +8,5 @@ exports.GlobalStyles = void 0;
 var styled_components_1 = require("styled-components");
 var themes_1 = require("../themes");
 require("../assets/fonts/style.css");
-exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"], ["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"])), themes_1.colors.greyColor100);
+exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nul, ol { padding-left: 2rem;}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"], ["\n\n\nhtml{\n  font-size:10px;\n  color: ", ";\n}\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n  font-family: 'noto_sans', 'noto_sans_devanagari', 'noto_sans_gu', 'noto_sans_te', 'noto_sans_kn', 'noto_sans_or',  sans-serif ;\n  font-weight: normal;\n  font-style: normal;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nul, ol { padding-left: 2rem;}\n\n\n\n\n  .bold{\n    font-weight:bold;\n  }\n\n  .italic{\n    font-style: italic;\n  }\n\n \n"])), themes_1.colors.greyColor100);
 var templateObject_1;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { GlobalStyles } from "./globalStyles";
-export * from "./components/typo";
-export * from "./components/loader";
-export * from "./components/buttons";
-export * from "./components/tags";
+export * from "./components/Typo";
+export * from "./components/Loader";
+export * from "./components/Buttons";
+export * from "./components/Tags";
 export { colors } from "./themes";

package/dist/index.js

@@ -13,9 +13,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
-__exportStar(require("./components/typo"), exports);
-__exportStar(require("./components/loader"), exports);
+__exportStar(require("./components/Typo"), exports);
+__exportStar(require("./components/Loader"), exports);
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return themes_1.colors; } });
-__exportStar(require("./components/buttons"), exports);
-__exportStar(require("./components/tags"), exports);
+__exportStar(require("./components/Buttons"), exports);
+__exportStar(require("./components/Tags"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "1.5.0",
+  "version": "2.1.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -64,12 +64,12 @@
     "access": "public"
   },
   "dependencies": {
-    "modularscale-js": "^3.0.1",
-    "phosphor-react": "^1.3.1",
     "babel-polyfill": "^6.26.0",
     "draft-js": "^0.11.7",
     "draftjs-conductor": "^2.2.0",
     "immutable": "^3.7.6",
+    "modularscale-js": "^3.0.1",
+    "phosphor-react": "^1.3.1",
     "react-router-dom": "^6.1.1"
   }
 }

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

@@ -1,60 +0,0 @@
-export function TagPrimary({ data, invert, onRemove, id, small, readOnly, theme, }: {
-    data: any;
-    invert: any;
-    onRemove?: () => void;
-    id: any;
-    small: any;
-    readOnly: any;
-    theme: any;
-}): JSX.Element;
-export function TagSecondary({ data, invert, onRemove, id, small, readOnly, theme, }: {
-    data: any;
-    invert: any;
-    onRemove?: () => void;
-    id: any;
-    small: any;
-    readOnly: any;
-    theme: any;
-}): JSX.Element;
-export function TagOutlinePrimary({ data, invert, onRemove, id, small, readOnly, theme, }: {
-    data: any;
-    invert: any;
-    onRemove?: () => void;
-    id: any;
-    small: any;
-    readOnly: any;
-    theme: any;
-}): JSX.Element;
-export function TagOutlineSecondary({ data, invert, onRemove, id, small, readOnly, theme, }: {
-    data: any;
-    invert: any;
-    onRemove?: () => void;
-    id: any;
-    small: any;
-    readOnly: any;
-    theme: any;
-}): JSX.Element;
-export function TagClear({ onRemove, id, data, small, theme }: {
-    onRemove?: () => void;
-    id: any;
-    data: any;
-    small: any;
-    theme: any;
-}): JSX.Element;
-export function TagSelect({ id, data, onSelect, handleSelectedOptionTag, selectedOptionTags, paramId, small, theme, }: {
-    id: any;
-    data: any;
-    onSelect?: () => void;
-    handleSelectedOptionTag?: () => void;
-    selectedOptionTags?: any[];
-    paramId: any;
-    small: any;
-    theme: any;
-}): JSX.Element;
-export function TagLink({ data, to, invert, small, theme }: {
-    data: any;
-    to: any;
-    invert: any;
-    small: any;
-    theme: any;
-}): JSX.Element;

package/dist/components/tags/index.js

@@ -1,99 +0,0 @@
-"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.TagLink = exports.TagSelect = exports.TagClear = exports.TagOutlineSecondary = exports.TagOutlinePrimary = exports.TagSecondary = exports.TagPrimary = void 0;
-var react_1 = __importStar(require("react"));
-var colors_1 = require("../../themes/colors");
-var index_styled_1 = require("./index.styled");
-var typo_1 = require("../typo");
-var icons_1 = require("../../icons");
-var greyColor80 = colors_1.colors.greyColor80, greyColor100 = colors_1.colors.greyColor100, primaryColor40 = colors_1.colors.primaryColor40, greyColor15 = colors_1.colors.greyColor15, white = colors_1.colors.white, greyColor40 = colors_1.colors.greyColor40, primaryColor100 = colors_1.colors.primaryColor100;
-function TagPrimary(_a) {
-    var data = _a.data, invert = _a.invert, _b = _a.onRemove, onRemove = _b === void 0 ? function () { } : _b, id = _a.id, small = _a.small, readOnly = _a.readOnly, theme = _a.theme;
-    var IconComp = icons_1.phosphorIcons['X'];
-    return (react_1.default.createElement(index_styled_1.StyledTag, { theme: theme, variantPrimary: true, invert: invert, small: small, readOnly: readOnly, onClick: function () { return !readOnly && onRemove(id, data); } },
-        react_1.default.createElement(typo_1.SANS_3, { color: !invert ? white : greyColor100, semibold: true }, data.display),
-        !readOnly && (react_1.default.createElement(index_styled_1.StyledIconWrapper, null,
-            react_1.default.createElement(IconComp, { size: '15', weight: 'bold', color: !invert ? white : greyColor100 })))));
-}
-exports.TagPrimary = TagPrimary;
-function TagSecondary(_a) {
-    var data = _a.data, invert = _a.invert, _b = _a.onRemove, onRemove = _b === void 0 ? function () { } : _b, id = _a.id, small = _a.small, readOnly = _a.readOnly, theme = _a.theme;
-    var IconComp = icons_1.phosphorIcons['X'];
-    return (react_1.default.createElement(index_styled_1.StyledTag, { variantSecondary: true, invert: invert, small: small, theme: theme, readOnly: readOnly },
-        react_1.default.createElement(typo_1.SANS_3, { color: !invert ? greyColor80 : greyColor40, semibold: true }, data.display),
-        !readOnly && (react_1.default.createElement(index_styled_1.StyledIconWrapper, { onClick: function () { return onRemove(id, data); } },
-            react_1.default.createElement(IconComp, { size: '15', weight: 'bold', color: !invert ? greyColor100 : white })))));
-}
-exports.TagSecondary = TagSecondary;
-function TagOutlinePrimary(_a) {
-    var data = _a.data, invert = _a.invert, _b = _a.onRemove, onRemove = _b === void 0 ? function () { } : _b, id = _a.id, small = _a.small, readOnly = _a.readOnly, theme = _a.theme;
-    var IconComp = icons_1.phosphorIcons['X'];
-    return (react_1.default.createElement(index_styled_1.StyledTag, { theme: theme, variantOutinePrimary: true, invert: invert, small: small, readOnly: readOnly, onClick: function () { return !readOnly && onRemove(id, data); } },
-        react_1.default.createElement(typo_1.SANS_3, { color: !invert ? primaryColor100 : primaryColor40, semibold: true }, data.display),
-        !readOnly && (react_1.default.createElement(index_styled_1.StyledIconWrapper, null,
-            react_1.default.createElement(IconComp, { size: '15', weight: 'bold', color: !invert ? primaryColor100 : primaryColor40 })))));
-}
-exports.TagOutlinePrimary = TagOutlinePrimary;
-function TagOutlineSecondary(_a) {
-    var data = _a.data, invert = _a.invert, _b = _a.onRemove, onRemove = _b === void 0 ? function () { } : _b, id = _a.id, small = _a.small, readOnly = _a.readOnly, theme = _a.theme;
-    var IconComp = icons_1.phosphorIcons['X'];
-    return (react_1.default.createElement(index_styled_1.StyledTag, { theme: theme, variantOutineSecondary: true, invert: invert, small: small, readOnly: readOnly },
-        react_1.default.createElement(typo_1.SANS_3, { color: !invert ? greyColor80 : greyColor15, semibold: true }, data.display),
-        !readOnly && (react_1.default.createElement(index_styled_1.StyledIconWrapper, { onClick: function () { return onRemove(id, data); } },
-            react_1.default.createElement(IconComp, { size: '15', weight: 'bold', color: !invert ? greyColor100 : white })))));
-}
-exports.TagOutlineSecondary = TagOutlineSecondary;
-function TagClear(_a) {
-    var _b = _a.onRemove, onRemove = _b === void 0 ? function () { } : _b, id = _a.id, data = _a.data, small = _a.small, theme = _a.theme;
-    var IconComp = icons_1.phosphorIcons['X'];
-    return (react_1.default.createElement(index_styled_1.StyledTag, { small: small, theme: theme },
-        react_1.default.createElement(typo_1.SANS_3, null, data.display),
-        react_1.default.createElement(index_styled_1.StyledIconWrapper, { onClick: function () { return onRemove(id, data); } },
-            react_1.default.createElement(IconComp, { size: '15', weight: 'bold' }))));
-}
-exports.TagClear = TagClear;
-function TagSelect(_a) {
-    var id = _a.id, data = _a.data, _b = _a.onSelect, onSelect = _b === void 0 ? function () { } : _b, _c = _a.handleSelectedOptionTag, handleSelectedOptionTag = _c === void 0 ? function () { } : _c, _d = _a.selectedOptionTags, selectedOptionTags = _d === void 0 ? [] : _d, paramId = _a.paramId, small = _a.small, theme = _a.theme;
-    var _e = (0, react_1.useState)(selectedOptionTags.some(function (el) { return el === data.value; })), selected = _e[0], setSelected = _e[1];
-    var handleSelection = function () {
-        if (!selected) {
-            setSelected(true);
-            onSelect(id, [data]);
-            handleSelectedOptionTag({ paramId: paramId, value: data.value, add: true });
-        }
-        else {
-            setSelected(false);
-            onSelect(id, []);
-            handleSelectedOptionTag({ paramId: paramId, value: data.value, remove: true });
-        }
-    };
-    return (react_1.default.createElement(index_styled_1.StyledTag, { theme: theme, onClick: handleSelection, variantSelect: true, selected: selected, small: small },
-        react_1.default.createElement(typo_1.SANS_3, { semibold: true, color: selected ? greyColor100 : greyColor80 }, data.display)));
-}
-exports.TagSelect = TagSelect;
-function TagLink(_a) {
-    var data = _a.data, to = _a.to, invert = _a.invert, small = _a.small, theme = _a.theme;
-    return (react_1.default.createElement(index_styled_1.StyledLink, { to: to },
-        react_1.default.createElement(index_styled_1.StyledTag, { theme: theme, variantLink: true, invert: invert, small: small },
-            react_1.default.createElement(typo_1.SANS_3, { color: !invert ? white : greyColor40, semibold: true }, data.display))));
-}
-exports.TagLink = TagLink;

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

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

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

@@ -1,82 +0,0 @@
-"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 = exports.StyledIconWrapper = exports.StyledTag = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var colors_1 = require("../../themes/colors");
-var react_router_dom_1 = require("react-router-dom");
-var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, greyColor10 = colors_1.colors.greyColor10;
-var TagModifiers = {
-    small: function () { return "\n\t  height: 3rem;\n\t"; },
-    variantSelect: function (_a) {
-        var selected = _a.selected, colors = _a.theme.colors;
-        return "\n    border: 2px solid ".concat(!selected ? greyColor10 : colors.primaryColor40, ";\n    cursor: pointer;\n    background-color: ").concat(selected ? colors.primaryColor40 : null, "\n  ");
-    },
-    variantDisplay: function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
-        return "\n\t  border: 2px solid ".concat(!invert ? greyColor10 : greyColor80, ";\n\t\tbackground-color: inherit;\n\t");
-    },
-    variantLink: function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
-        return "\n\t background-color: ".concat(!invert ? colors.primaryColor100 : greyColor80, ";\n\t");
-    },
-    variantPrimary: function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
-        return "\n\t background-color: ".concat(!invert ? colors.primaryColor100 : colors.primaryColor40, ";\n\t cursor: pointer;\n\t");
-    },
-    variantSecondary: function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
-        return "\n\t background-color: ".concat(!invert ? greyColor15 : greyColor80, ";\n\t");
-    },
-    variantOutinePrimary: function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
-        return "\n\tborder: 2px solid ".concat(!invert ? colors.primaryColor100 : colors.primaryColor40, ";\n\tcursor: pointer;\n\t");
-    },
-    variantOutineSecondary: function (_a) {
-        var invert = _a.invert, colors = _a.theme.colors;
-        return "\n\tborder: 2px solid ".concat(!invert ? greyColor15 : greyColor80, ";\n\t");
-    },
-};
-var StyledTag = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tpadding: 0 1rem;\n\tposition: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: center;\n  border-radius:0.2rem;\n\twhite-space: nowrap;\n  height:4rem;\n  \n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"], ["\n\tpadding: 0 1rem;\n\tposition: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: center;\n  border-radius:0.2rem;\n\twhite-space: nowrap;\n  height:4rem;\n  \n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"])), function (_a) {
-    var small = _a.small;
-    return small && TagModifiers['small']();
-}, function (_a) {
-    var variantSelect = _a.variantSelect, selected = _a.selected, theme = _a.theme;
-    return variantSelect && TagModifiers['variantSelect']({ selected: selected, theme: theme });
-}, function (_a) {
-    var variantDisplay = _a.variantDisplay, invert = _a.invert, theme = _a.theme;
-    return variantDisplay && TagModifiers['variantDisplay']({ invert: invert, theme: theme });
-}, function (_a) {
-    var variantLink = _a.variantLink, invert = _a.invert, theme = _a.theme;
-    return variantLink && TagModifiers['variantLink']({ invert: invert, theme: theme });
-}, function (_a) {
-    var variantPrimary = _a.variantPrimary, invert = _a.invert, theme = _a.theme;
-    return variantPrimary && TagModifiers['variantPrimary']({ invert: invert, theme: theme });
-}, function (_a) {
-    var variantSecondary = _a.variantSecondary, invert = _a.invert, theme = _a.theme;
-    return variantSecondary && TagModifiers['variantSecondary']({ invert: invert, theme: theme });
-}, function (_a) {
-    var variantOutinePrimary = _a.variantOutinePrimary, invert = _a.invert, theme = _a.theme;
-    return variantOutinePrimary &&
-        TagModifiers['variantOutinePrimary']({ invert: invert, theme: theme });
-}, function (_a) {
-    var variantOutineSecondary = _a.variantOutineSecondary, invert = _a.invert, theme = _a.theme;
-    return variantOutineSecondary &&
-        TagModifiers['variantOutineSecondary']({ invert: invert, theme: theme });
-}, function (_a) {
-    var readOnly = _a.readOnly;
-    return readOnly &&
-        "\n\t   cursor: auto;\n\t";
-});
-exports.StyledTag = StyledTag;
-var StyledIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n"], ["\n  display: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n"])));
-exports.StyledIconWrapper = StyledIconWrapper;
-var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
-exports.StyledLink = StyledLink;
-var templateObject_1, templateObject_2, templateObject_3;