oolib 2.138.0 → 2.139.1

package/dist/components/cards/CardContent/index.js

@@ -68,9 +68,9 @@ var CardContent = function (_a) {
             showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
                 !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
                     react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, null),
-                (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
+                (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))),
+                (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
                     react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
-                    react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))),
-                (0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))) : null)))));
+                    react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : null)))));
 };
 exports.CardContent = CardContent;

package/dist/components/cards/CardEmbed/index.js

@@ -80,7 +80,7 @@ var CardEmbed = function (_a) {
                             height: "100%",
                             width: "auto",
                         } }))),
-                (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
+                (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(styled_2.StyledMediaContainer, null,
                     react_1.default.createElement("div", { style: {
                             position: "relative",
                             height: "100%",
@@ -93,8 +93,8 @@ var CardEmbed = function (_a) {
                                 left: 0,
                                 width: "100%",
                                 height: "100%",
-                            } })))),
-                (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
+                            } })))) : null,
+                (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement(styled_2.StyledMediaContainer, null,
                     react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: imageAspectRatio, readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" }))))))));
 };
 exports.CardEmbed = CardEmbed;

package/dist/components/cards/ListContent/index.js

@@ -62,7 +62,7 @@ var ListContent = function (_a) {
                     mediaConfigExists && react_1.default.createElement(react_1.default.Fragment, null,
                         !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
                             react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
-                        (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
+                        (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
                             react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
                                 react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
                                 react_1.default.createElement("div", { style: {
@@ -71,8 +71,8 @@ var ListContent = function (_a) {
                                         left: 0,
                                         width: "100%",
                                         height: "100%",
-                                    } })))),
-                        (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
+                                    } })))) : null,
+                        (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null, 
                         // <div
                         //   // style={{
                         //   //   width: "14rem",

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { GlobalStyles } from "./globalStyles";
 export * from "./themes/mixins";
 export * from "./components/Typo";
-export * from "./v2/components/Typo2";
 export * from "./globalStyles/globalVariables";
 export * from "./components/Buttons";
 export * from "./components/Tags";
@@ -17,8 +16,9 @@ export * from "./components/RadioAndCheckbox";
 export * from "./components/Margins";
 export * from "./components/Paddings";
 export * from "./utils/_EXPORTS";
+export * from "./v2/components/Buttons";
+export * from "./v2/components/Typo2";
 export { colors } from "./themes";
-export { colors as colors2 } from "./v2/themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";
 export { UserRoleBadge } from "./components/UserRoleBadge";
@@ -70,6 +70,7 @@ export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfir
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";
 export { default as TableCellResizerPlugin } from "./components/Lexical/Plugins/TableCellResizer";
+export { colors as colors2 } from "./v2/themes";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors2 = exports.colors = exports.GlobalStyles = void 0;
-exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = void 0;
+exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -26,12 +26,9 @@ __exportStar(require("./themes/mixins"), exports);
 //base style guide : i.e colors, icons, typo
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return themes_1.colors; } });
-var themes_2 = require("./v2/themes");
-Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });
 var icons_1 = require("./icons");
 Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return icons_1.icons; } });
 __exportStar(require("./components/Typo"), exports);
-__exportStar(require("./v2/components/Typo2"), exports);
 __exportStar(require("./globalStyles/globalVariables"), exports);
 ////components
 var LoadersAndProgress_1 = require("./components/LoadersAndProgress");
@@ -176,3 +173,8 @@ Object.defineProperty(exports, "styledOKELinkCSS", { enumerable: true, get: func
 // lexical
 var TableCellResizer_1 = require("./components/Lexical/Plugins/TableCellResizer");
 Object.defineProperty(exports, "TableCellResizerPlugin", { enumerable: true, get: function () { return __importDefault(TableCellResizer_1).default; } });
+/////// V2 components /themes 
+__exportStar(require("./v2/components/Buttons"), exports);
+__exportStar(require("./v2/components/Typo2"), exports);
+var themes_2 = require("./v2/themes");
+Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });

package/dist/stories/v2/components/Button.stories.d.ts

@@ -0,0 +1,185 @@
+/// <reference types="mdx" />
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace size {
+            let name: string;
+            let options: string[];
+            namespace mapping {
+                let Small: string;
+                let Medium: string;
+            }
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace icon {
+            let name_1: string;
+            export { name_1 as name };
+            export { availableIcons as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            export let defaultValue: string;
+        }
+        namespace iconAfter {
+            let name_2: string;
+            export { name_2 as name };
+            export { availableIcons as options };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace iconSize {
+            let name_3: string;
+            export { name_3 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace mapping_1 {
+                let Small_1: string;
+                export { Small_1 as Small };
+                let Medium_1: string;
+                export { Medium_1 as Medium };
+            }
+            export { mapping_1 as mapping };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace iconColor {
+            let name_4: string;
+            export { name_4 as name };
+            export { availableColors as options };
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace composition {
+            let name_5: string;
+            export { name_5 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+        namespace width {
+            let name_6: string;
+            export { name_6 as name };
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
+        namespace variant {
+            let name_7: string;
+            export { name_7 as name };
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+            let options_3: string[];
+            export { options_3 as options };
+            let defaultValue_2: string;
+            export { defaultValue_2 as defaultValue };
+        }
+        namespace children {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        namespace invert {
+            let name_9: string;
+            export { name_9 as name };
+        }
+        namespace disabled {
+            let name_10: string;
+            export { name_10 as name };
+        }
+    }
+    namespace args {
+        let size_1: string;
+        export { size_1 as size };
+        let variant_1: string;
+        export { variant_1 as variant };
+        let composition_1: string;
+        export { composition_1 as composition };
+        let children_1: string;
+        export { children_1 as children };
+        let icon_1: string;
+        export { icon_1 as icon };
+        let iconAfter_1: any;
+        export { iconAfter_1 as iconAfter };
+        let iconSize_1: string;
+        export { iconSize_1 as iconSize };
+        let iconColor_1: any;
+        export { iconColor_1 as iconColor };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+    }
+    namespace parameters {
+        namespace docs {
+            export { ButtonDocs as page };
+        }
+    }
+}
+export default _default;
+export function Button_Primary(args: any): React.JSX.Element;
+export namespace Button_Primary {
+    export namespace parameters_1 {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+    export { parameters_1 as parameters };
+}
+export function Button_Secondary(args: any): React.JSX.Element;
+export namespace Button_Secondary {
+    export namespace parameters_2 {
+        export namespace controls_1 {
+            let exclude_1: string[];
+            export { exclude_1 as exclude };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_2 as parameters };
+    export namespace args_1 {
+        let active: boolean;
+    }
+    export { args_1 as args };
+}
+export function Button_Ghost(args: any): React.JSX.Element;
+export namespace Button_Ghost {
+    export namespace args_2 {
+        let active_1: boolean;
+        export { active_1 as active };
+    }
+    export { args_2 as args };
+    export namespace parameters_3 {
+        export namespace controls_2 {
+            let exclude_2: string[];
+            export { exclude_2 as exclude };
+        }
+        export { controls_2 as controls };
+    }
+    export { parameters_3 as parameters };
+}
+declare const availableIcons: string[];
+declare const availableColors: string[];
+import ButtonDocs from "../../Oolib/components/Buttons.mdx";
+import React from "react";

package/dist/stories/v2/components/Button.stories.js

@@ -0,0 +1,171 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button_Ghost = exports.Button_Secondary = exports.Button_Primary = void 0;
+var react_1 = __importDefault(require("react"));
+var Buttons_1 = require("../../../v2/components/Buttons");
+var Buttons_mdx_1 = __importDefault(require("../../Oolib/components/Buttons.mdx"));
+var icons_1 = require("../../../icons");
+var themes_1 = require("../../../themes");
+var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
+var availableColors = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
+exports.default = {
+    title: "Oolib V 2.0/components/Buttons",
+    argTypes: {
+        size: {
+            name: "Button Size",
+            options: ["Small", "Medium"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+            },
+            control: { type: "inline-radio" },
+        },
+        icon: {
+            name: "Icon Before",
+            options: availableIcons,
+            control: { type: "select" },
+            defaultValue: "PencilSimple",
+        },
+        iconAfter: {
+            name: "Icon After",
+            options: availableIcons,
+            control: { type: "select" },
+        },
+        iconSize: {
+            name: "Icon Size",
+            options: ["Small", "Medium"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+            },
+            control: { type: "inline-radio" },
+        },
+        iconColor: {
+            name: "Icon Color",
+            options: availableColors,
+            control: { type: "select" },
+        },
+        composition: {
+            name: "Button Compostion",
+            options: ["Default", "Text-only", "Icon-only"],
+            control: { type: "select" },
+            defaultValue: "Default",
+        },
+        width: {
+            name: "Width",
+            control: { type: "text" }
+        },
+        variant: {
+            name: "Button Type",
+            control: { type: "select" },
+            options: ["secondary", "primary", "ghost", "custom"],
+            defaultValue: "secondary",
+        },
+        children: {
+            name: "Text",
+        },
+        invert: {
+            name: "Invert",
+        },
+        disabled: {
+            name: "Disabled",
+        },
+    },
+    args: {
+        size: "Small",
+        variant: "secondary",
+        composition: "Default",
+        children: "Text",
+        icon: "PencilSimple",
+        iconAfter: undefined,
+        iconSize: "Small",
+        iconColor: undefined,
+        disabled: false,
+        invert: false,
+    },
+    parameters: {
+        docs: {
+            page: Buttons_mdx_1.default,
+        },
+    },
+};
+var GenButtonStory = function (_a) {
+    var args = _a.args, Comp = _a.Comp;
+    console.log(args.composition);
+    args[args["size"]] = true;
+    args[args["state"]] = true;
+    args.iconColor = themes_1.colors[args.iconColor];
+    args["onClick"] = function () { return console.log("clicked"); };
+    if (args.composition === "Text-only") {
+        delete args.icon;
+        delete args.iconAfter;
+    }
+    if (args.composition === "Icon-only") {
+        delete args["children"];
+    }
+    args["theme"] = {
+        colors: {
+            primaryColor40: "#addbff",
+            primaryColor100: "#33a4ff",
+            primaryColor10: "#EBF6FF",
+            primaryColorText: "#0071CC",
+        },
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: args.invert ? "#383838" : "",
+            padding: "20px",
+        } },
+        react_1.default.createElement(Comp, __assign({}, args))));
+};
+var Button_Primary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonPrimary })); };
+exports.Button_Primary = Button_Primary;
+exports.Button_Primary.parameters = { controls: { exclude: ["variant", "color"] } };
+var Button_Secondary = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonSecondary })); };
+exports.Button_Secondary = Button_Secondary;
+exports.Button_Secondary.parameters = { controls: { exclude: ["variant", "color"] } };
+exports.Button_Secondary.args = {
+    active: false,
+};
+var Button_Ghost = function (args) { return (react_1.default.createElement(GenButtonStory, { args: args, Comp: Buttons_1.ButtonGhost })); };
+exports.Button_Ghost = Button_Ghost;
+exports.Button_Ghost.args = {
+    active: false,
+};
+exports.Button_Ghost.parameters = { controls: { exclude: ["variant"] } };
+// export const Button_Custom = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonCustom} />
+// );
+// Button_Custom.parameters = { controls: { exclude: ["variant", "color"] } };
+// export const Google_Login = (args) => (
+//   <GenButtonStory args={args} Comp={GoogleLogin} />
+// );
+// Google_Login.parameters = {
+//   controls: { exclude: ["variant", "color", "iconOnly", "icon + text"] },
+// };
+// export const Upload_Button = (args) => (
+//   <GenButtonStory args={{ ...args, children: "Upload" }} Comp={UploadButton} />
+// );
+// Upload_Button.parameters = { controls: { exclude: ["color"] } };

package/dist/v2/components/Buttons/index.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+export interface DisplayIconProps {
+    icon: string;
+    size: number;
+    color?: string;
+    iconWeight?: string;
+}
+export interface ButtonProps {
+    id?: string;
+    link?: {
+        val: string;
+        displayText?: string;
+    };
+    children?: React.ReactNode;
+    value?: string;
+    submit?: boolean;
+    icon?: string;
+    iconAfter?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    active?: boolean;
+    disabled?: boolean;
+    theme?: string;
+    width?: string;
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    color?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    S?: boolean;
+    M?: boolean;
+    iconSize?: number | "S" | "M";
+    iconColor?: string;
+    iconWeight?: string;
+    stopPropagation?: boolean;
+    preventDefault?: boolean;
+    forceHover?: boolean;
+}
+export interface ButtonStyledWrapperProps {
+    props: ButtonProps;
+    variant?: string;
+}
+export declare const ButtonPrimary: React.FunctionComponent<ButtonProps>;
+export declare const ButtonSecondary: React.FunctionComponent<ButtonProps>;
+export declare const ButtonGhost: React.FunctionComponent<ButtonProps>;

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

@@ -0,0 +1,80 @@
+"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.ButtonGhost = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var react_router_dom_1 = require("react-router-dom");
+var lodash_1 = require("lodash");
+var icons_1 = require("../../../icons");
+var themes_1 = require("../../../themes");
+var DisplayIcon = function (_a) {
+    var icon = _a.icon, size = _a.size, color = _a.color, iconWeight = _a.iconWeight;
+    var IconComp = icons_1.icons[icon];
+    return react_1.default.createElement("div", { style: { minWidth: 'max-content', display: "flex", justifyContent: "center", alignItems: "center" } }, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: iconWeight || 'bold' }));
+};
+var ButtonStyledWrapper = function (_a) {
+    var props = _a.props, variant = _a.variant;
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, _iconColor = props.iconColor, iconWeight = props.iconWeight, stopPropagation = props.stopPropagation, preventDefault = props.preventDefault, forceHover = props.forceHover;
+    var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
+    var debouncedOnClick = onClick && (0, lodash_1.debounce)(onClick, 200);
+    var debouncedMouseDown = onMouseDown && (0, lodash_1.debounce)(onMouseDown, 150);
+    var composition = (icon || iconAfter) && displayText
+        ? "icon+text"
+        : !displayText
+            ? "iconOnly"
+            : "textOnly";
+    var size = ['icon+text', 'textOnly'].indexOf(composition) !== -1
+        ? (S && 'S') || 'M'
+        : (M && 'M') || 'S';
+    var calcIconSize = function () {
+        var thisSize = iconSize || size;
+        return thisSize === 'S' ? 14 : 20;
+    };
+    var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
+    return (react_1.default.createElement(styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
+            stopPropagation && e.stopPropagation();
+            preventDefault && e.preventDefault();
+            debouncedOnClick && debouncedOnClick(e);
+        }, onMouseDown: function (e) {
+            stopPropagation && e.stopPropagation();
+            preventDefault && e.preventDefault();
+            debouncedMouseDown && debouncedMouseDown(e);
+        }, composition: composition, width: width, color: color, forceHover: forceHover },
+        icon && react_1.default.createElement(DisplayIcon, { icon: icon, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' }),
+        displayText && react_1.default.createElement(styled_1.Styled_UI_BODY_BOLD_SM, { semibold: true }, displayText),
+        iconAfter && react_1.default.createElement(DisplayIcon, { icon: iconAfter, color: iconColor, size: calcIconSize(), iconWeight: iconWeight || '' })));
+};
+/**
+ * Generates a Button component based on the provided props and variant.
+ *
+ * @prop { ButtonProps } props - The properties for the Button component
+ * @prop { string } variant - The variant of the Button component
+ * @return { ReactNode } The Button component to be rendered
+ */
+var Button = function (_a) {
+    var props = _a.props, variant = _a.variant;
+    var link = props.link, onClick = props.onClick;
+    var buttonAction = link ? function () { return null; } : onClick;
+    return link ? (react_1.default.createElement(react_router_dom_1.Link, { to: link.val },
+        react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }))) : (react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }));
+};
+var ButtonPrimary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "primary" })); };
+exports.ButtonPrimary = ButtonPrimary;
+var ButtonSecondary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "secondary" })); };
+exports.ButtonSecondary = ButtonSecondary;
+var ButtonGhost = function (props) { return (react_1.default.createElement(Button, { props: props, variant: "ghost" })); };
+exports.ButtonGhost = ButtonGhost;

package/dist/v2/components/Buttons/styled.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export interface HoverStylingProps {
+    active?: boolean;
+    theme: {
+        colors: any;
+    };
+}
+export interface ButtonVariantProps {
+    disabled?: boolean;
+    color?: string;
+    forceHover?: boolean;
+    theme: {
+        colors: string[];
+    };
+    active?: boolean;
+}
+export interface ButtonGhostProps extends ButtonVariantProps {
+    composition?: string;
+}
+export interface ButtonStyledProps {
+    size: string;
+    width?: string;
+    variant: string;
+    active?: boolean;
+    composition?: string;
+    forceHover?: boolean;
+}
+export declare const ButtonStyled: import("styled-components").StyledComponent<"button", any, ButtonStyledProps, never>;
+export declare const Styled_UI_BODY_BOLD_SM: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo2").TypoCompProps>, any, {}, never>;

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

@@ -0,0 +1,104 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.Styled_UI_BODY_BOLD_SM = exports.ButtonStyled = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../../v2/themes/colors");
+var mixins_1 = require("../../../themes/mixins");
+var utils_1 = require("../../themes/utils");
+var Typo2_1 = require("../Typo2");
+var primaryContainer = colors_1.colors.primaryContainer, onPrimary = colors_1.colors.onPrimary, secondaryContainer = colors_1.colors.secondaryContainer, onSecondary = colors_1.colors.onSecondary, grey80 = colors_1.colors.grey80, grey40 = colors_1.colors.grey40, grey10 = colors_1.colors.grey10;
+//sizes
+var SIZES = {
+    S: "3rem",
+    M: "3.2rem",
+};
+var hoverBeforeElement = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"], ["\n  &::before {\n    content: '';\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1;\n    ", "\n  }\n\n  &:hover::before {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n"])), (0, mixins_1.transition)("background-color"));
+var hoverStylingPrimary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hoverBeforeElement);
+var hoverStylingSecondary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hoverBeforeElement);
+var hoverStylingGhost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hoverBeforeElement);
+var ButtonPrimary = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n\n\n"], ["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n\n\n"])), function (_a) {
+    var colors = _a.theme.colors;
+    return colors ? (0, utils_1.getPrimaryContainer)(colors) : primaryContainer;
+}, function (_a) {
+    var colors = _a.theme.colors;
+    return colors ? (0, utils_1.getOnPrimary)(colors) : onPrimary;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n    "])), grey10, grey40);
+}, function (_a) {
+    var forceHover = _a.forceHover;
+    return forceHover && hoverStylingPrimary;
+}, hoverStylingPrimary);
+var ButtonSecondary = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n\n   @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  ", "  \n\n   @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
+    var colors = _a.theme.colors;
+    return colors ? (0, utils_1.getSecondaryContainer)(colors) : secondaryContainer;
+}, function (_a) {
+    var colors = _a.theme.colors;
+    return colors ? (0, utils_1.getOnSecondary)(colors) : onSecondary;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background-color: ", ";\n\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      background-color: ", ";\n\n      color: ", ";\n      pointer-events: none;\n    "])), grey10, grey40);
+}, function (_a) {
+    var forceHover = _a.forceHover;
+    return forceHover && hoverStylingSecondary;
+}, hoverStylingSecondary);
+var ButtonGhost = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: transparent;\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n"], ["\n  background-color: transparent;\n  color: ", ";\n\n  ", "\n\n  ", "  \n \n  @media (hover: hover) {\n      &:hover {\n        ", "\n      }\n    }\n"])), grey80, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), grey80);
+}, function (_a) {
+    var forceHover = _a.forceHover;
+    return forceHover && hoverStylingGhost;
+}, hoverStylingGhost);
+var buttonVariantSetting = {
+    primary: ButtonPrimary,
+    secondary: ButtonSecondary,
+    ghost: ButtonGhost,
+    // custom: ButtonCustom,
+    // googleAuth: GoogleButton,
+};
+exports.ButtonStyled = styled_components_1.default.button(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n    \n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2; // important for text color to have same color when overlay hover is \n  }\n\n"], ["\n  ", "\n    \n  \n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 6px;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  ", "\n\n  > * {\n    position: relative;\n    z-index: 2; // important for text color to have same color when overlay hover is \n  }\n\n"])), function (_a) {
+    var composition = _a.composition, size = _a.size;
+    switch (composition) {
+        case "iconOnly":
+            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "], ["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n          flex-shrink: 0; // if button is a flex item then by default it's width shrinks when the viewport width shrinks\n        "])), SIZES[size], SIZES[size]);
+        case "icon+text":
+            return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          padding: 0 1.2rem 0 1rem; \n          height: ", ";\n        "], ["\n          padding: 0 1.2rem 0 1rem; \n          height: ", ";\n        "])), SIZES[size]);
+        default:
+            return (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          padding: 0 1.2rem;\n          height: ", ";\n        "], ["\n          padding: 0 1.2rem;\n          height: ", ";\n        "])), SIZES[size]);
+    }
+}, function (_a) {
+    var width = _a.width, composition = _a.composition, size = _a.size;
+    return width ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      min-width: ", ";\n      max-width: 400px;\n    "], ["\n      min-width: ", ";\n      max-width: 400px;\n    "])), composition === "iconOnly" ? SIZES[size] : "60px");
+}, (0, mixins_1.transition)("background-color"), function (_a) {
+    var variant = _a.variant;
+    return buttonVariantSetting[variant];
+});
+exports.Styled_UI_BODY_BOLD_SM = (0, styled_components_1.default)(Typo2_1.UI_BODY_BOLD_SM)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), mixins_1.ellipsis);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/dist/v2/themes/utils.d.ts

@@ -0,0 +1,43 @@
+import { Colors2Type } from "./colors";
+/**
+* Get the primary Container color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+export declare const getPrimaryContainer: (colors?: Colors2Type) => string;
+/**
+*  Get the secondary Container color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+export declare const getSecondaryContainer: (colors?: Colors2Type) => string;
+/**
+* get the tertiary Container color..
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+export declare const getTertiaryContainer: (colors?: Colors2Type) => string;
+/**
+* Get the onPrimary color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+export declare const getOnPrimary: (colors?: Colors2Type) => string;
+/**
+* Get the onSecondary color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+export declare const getOnSecondary: (colors?: Colors2Type) => string;
+/**
+* Get the onTertiary color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+export declare const getOnTertiary: (colors?: Colors2Type) => string;

package/dist/v2/themes/utils.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOnTertiary = exports.getOnSecondary = exports.getOnPrimary = exports.getTertiaryContainer = exports.getSecondaryContainer = exports.getPrimaryContainer = void 0;
+var colors_1 = require("./colors");
+var primaryContainer = colors_1.colors.primaryContainer, secondaryContainer = colors_1.colors.secondaryContainer, tertiaryContainer = colors_1.colors.tertiaryContainer, onPrimary = colors_1.colors.onPrimary, onSecondary = colors_1.colors.onSecondary, onTertiary = colors_1.colors.onTertiary;
+/**
+* Get the primary Container color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+var getPrimaryContainer = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.primaryContainer) || primaryContainer;
+};
+exports.getPrimaryContainer = getPrimaryContainer;
+/**
+*  Get the secondary Container color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+var getSecondaryContainer = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.secondaryContainer) || secondaryContainer;
+};
+exports.getSecondaryContainer = getSecondaryContainer;
+/**
+* get the tertiary Container color..
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+var getTertiaryContainer = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.tertiaryContainer) || tertiaryContainer;
+};
+exports.getTertiaryContainer = getTertiaryContainer;
+/**
+* Get the onPrimary color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+var getOnPrimary = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.onPrimary) || onPrimary;
+};
+exports.getOnPrimary = getOnPrimary;
+/**
+* Get the onSecondary color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+var getOnSecondary = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.onSecondary) || onSecondary;
+};
+exports.getOnSecondary = getOnSecondary;
+/**
+* Get the onTertiary color.
+*
+* @param {ColorsType} colors - Optional colors object
+* @return {string} The primary color text
+*/
+var getOnTertiary = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.onTertiary) || onTertiary;
+};
+exports.getOnTertiary = getOnTertiary;

package/package.json

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