oolib 2.215.4 → 2.217.0

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { BannerCTA, BannerProps } from "../types";
+export declare const CTA: ({ cta }: {
+    cta: BannerCTA;
+}) => React.JSX.Element;
+/**
+ * @component Renders a banner component with customizable text, color and styling.
+ *
+ * - The object containing the following properties:
+ * @prop {IconColor} color: The color of the banner.
+ * @prop {BannerCTA} cta: The object containing the info about the cta button.
+ * @prop {string} msg: The text to be displayed in the banner.
+ * @prop {(e: React.MouseEvent | null, id: string) => void} handleRemove: The callback function to be called when the banner is removed.
+ * @prop {string} id: The id of the banner.
+ * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @prop {boolean} bottomStroke: A boolean indicating whether to show the bottom stroke in the banner. Defaults to true.
+ * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ * @return {ReactElement} The rendered banner component.
+ */
+export declare const Banner: React.FunctionComponent<BannerProps>;

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

@@ -0,0 +1,111 @@
+"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 __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Banner = exports.CTA = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("../styled");
+var react_router_dom_1 = require("react-router-dom");
+var Buttons_1 = require("../../../v2/components/Buttons");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var __1 = require("..");
+var CTA = function (_a) {
+    var cta = _a.cta;
+    var LinkWrapper = cta.to ? react_router_dom_1.Link : react_1.Fragment;
+    return (react_1.default.createElement(LinkWrapper, __assign({}, (cta.to ? { to: cta.to } : {})),
+        react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: !cta.to && cta.action }, cta === null || cta === void 0 ? void 0 : cta.text)));
+};
+exports.CTA = CTA;
+/**
+ * @component Renders a banner component with customizable text, color and styling.
+ *
+ * - The object containing the following properties:
+ * @prop {IconColor} color: The color of the banner.
+ * @prop {BannerCTA} cta: The object containing the info about the cta button.
+ * @prop {string} msg: The text to be displayed in the banner.
+ * @prop {(e: React.MouseEvent | null, id: string) => void} handleRemove: The callback function to be called when the banner is removed.
+ * @prop {string} id: The id of the banner.
+ * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @prop {boolean} bottomStroke: A boolean indicating whether to show the bottom stroke in the banner. Defaults to true.
+ * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ * @return {ReactElement} The rendered banner component.
+ */
+var Banner = function (_a) {
+    var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.bottomStroke, bottomStroke = _c === void 0 ? true : _c, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d;
+    var _e = (0, react_1.useState)(0), height = _e[0], setHeight = _e[1];
+    var ContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var timer;
+        if (ContainerRef.current) {
+            setHeight(ContainerRef.current.scrollHeight);
+        }
+        if (timeOut) {
+            timer = setTimeout(function () {
+                setHeight(0);
+                remove(null, id);
+            }, timeOut);
+        }
+        return function () {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [cta, id, msg, timeOut]);
+    var remove = function (e, id) {
+        setHeight(0);
+        setTimeout(function () {
+            handleRemove(e, id);
+        }, 300);
+    };
+    return (react_1.default.createElement(styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, height: height },
+        react_1.default.createElement(styled_1.BannerWrapperStyled, { bottomStroke: bottomStroke, color: color },
+            react_1.default.createElement(styled_1.BannerStyled, null,
+                showIcon && react_1.default.createElement(__1.DisplayIcon, { color: color }),
+                react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, null, msg),
+                cta && react_1.default.createElement(exports.CTA, { cta: cta })),
+            hideCloseButton !== true &&
+                react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", onClick: function (e) { return remove(e, id); } }))));
+};
+exports.Banner = Banner;

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

@@ -0,0 +1,19 @@
+import { FunctionComponent } from "react";
+import { BannerProps } from "../types";
+export declare const StyledToastWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * A toast component that displays a message and an optional close button and/or CTA button.
+ *
+ * @param {BannerProps} props - The props object containing the following properties
+ * @param {IconColor} color - The color of the banner.
+ * @param {BannerCTA} cta - An object containing the info about the cta button.
+ * @param {string} msg - The text to be displayed in the banner.
+ * @param {(e: React.MouseEvent | null, id: string) => void} handleRemove - A callback function to be called when a banner is removed. The function takes the mouse event and the id of the banner as arguments.
+ * @param {string} id - The id of the banner.
+ * @param {boolean} showIcon - A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @param {boolean} hideCloseButton - A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ * @param {string} actionText - The text to be displayed on the close button in the banner.
+ * @param {boolean} bottomStroke - A boolean indicating whether to add a bottom stroke to the banner. Defaults to true.
+ * @param {number} timeOut - The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ */
+export declare const Toast: FunctionComponent<BannerProps>;

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

@@ -0,0 +1,63 @@
+"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.Toast = exports.StyledToastWrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+var mixins_1 = require("../../../themes/mixins");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var Buttons_1 = require("../../../v2/components/Buttons");
+var __1 = require("..");
+var Banner_1 = require("../Banner");
+var StyledToast = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0.8rem 1.2rem;\n  border-radius: 1.2rem;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 40rem;\n  min-height: 5rem;\n\n  ", " {\n    width: 45rem;\n  };\n\n  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);\n\n"], ["\n  padding: 0.8rem 1.2rem;\n  border-radius: 1.2rem;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 40rem;\n  min-height: 5rem;\n\n  ", " {\n    width: 45rem;\n  };\n\n  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);\n\n"])), (0, mixins_1.mediaQuery)("md"));
+exports.StyledToastWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 2.5rem;\n  right: 2.5rem;\n  width: max-content;\n  z-index: 1000000000;\n  overflow: hidden;\n  padding: 2rem;\n  background: transparent;\n"], ["\n  position: fixed;\n  bottom: 2.5rem;\n  right: 2.5rem;\n  width: max-content;\n  z-index: 1000000000;\n  overflow: hidden;\n  padding: 2rem;\n  background: transparent;\n"
+    /**
+     * A toast component that displays a message and an optional close button and/or CTA button.
+     *
+     * @param {BannerProps} props - The props object containing the following properties
+     * @param {IconColor} color - The color of the banner.
+     * @param {BannerCTA} cta - An object containing the info about the cta button.
+     * @param {string} msg - The text to be displayed in the banner.
+     * @param {(e: React.MouseEvent | null, id: string) => void} handleRemove - A callback function to be called when a banner is removed. The function takes the mouse event and the id of the banner as arguments.
+     * @param {string} id - The id of the banner.
+     * @param {boolean} showIcon - A boolean indicating whether to show the icon in the banner. Defaults to true.
+     * @param {boolean} hideCloseButton - A boolean indicating whether to hide the close button in the banner. Defaults to false.
+     * @param {string} actionText - The text to be displayed on the close button in the banner.
+     * @param {boolean} bottomStroke - A boolean indicating whether to add a bottom stroke to the banner. Defaults to true.
+     * @param {number} timeOut - The time in milliseconds to wait before removing the banner. Defaults to 3000.
+     */
+])));
+/**
+ * A toast component that displays a message and an optional close button and/or CTA button.
+ *
+ * @param {BannerProps} props - The props object containing the following properties
+ * @param {IconColor} color - The color of the banner.
+ * @param {BannerCTA} cta - An object containing the info about the cta button.
+ * @param {string} msg - The text to be displayed in the banner.
+ * @param {(e: React.MouseEvent | null, id: string) => void} handleRemove - A callback function to be called when a banner is removed. The function takes the mouse event and the id of the banner as arguments.
+ * @param {string} id - The id of the banner.
+ * @param {boolean} showIcon - A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @param {boolean} hideCloseButton - A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ * @param {string} actionText - The text to be displayed on the close button in the banner.
+ * @param {boolean} bottomStroke - A boolean indicating whether to add a bottom stroke to the banner. Defaults to true.
+ * @param {number} timeOut - The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ */
+var Toast = function (_a) {
+    var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c, actionText = _a.actionText, actionIcon = _a.actionIcon, _d = _a.bottomStroke, bottomStroke = _d === void 0 ? true : _d, timeOut = _a.timeOut;
+    return (react_1.default.createElement(StyledToast, { initial: { x: "100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "100%", opacity: 0 }, transition: { type: "spring", damping: 25, stiffness: 300 } },
+        react_1.default.createElement("div", { style: { display: "flex" } },
+            showIcon && react_1.default.createElement(__1.DisplayIcon, { color: color }),
+            react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, null, msg),
+            cta && react_1.default.createElement(Banner_1.CTA, { cta: cta })),
+        hideCloseButton !== true &&
+            react_1.default.createElement(Buttons_1.ButtonSecondary, { S: true, style: { maxWidth: "10rem" }, icon: actionIcon, onClick: function (e) { return handleRemove(e, id); }, children: actionText })));
+};
+exports.Toast = Toast;
+var templateObject_1, templateObject_2;

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

@@ -5,9 +5,11 @@ export interface BannerEntry {
     color?: string;
     timeOut?: number;
 }
+export type Variant = "toast" | "default";
 export interface BannerState {
     alertState: BannerEntry[];
     infoState: BannerEntry[];
+    variant?: Variant;
 }
 export type BannerAction = {
     type: "ADD_ALERT";
@@ -25,6 +27,9 @@ export type BannerAction = {
     type: "REMOVE_ALL_INFO";
 } | {
     type: "REMOVE_ALL_ALERT";
+} | {
+    type: "SET_VARIANT";
+    variant: Variant;
 };
 export interface BannerContextType {
     BANNER_STATE: BannerState;
@@ -34,6 +39,7 @@ export interface BannerContextType {
     REMOVE_INFO_BANNER: (e: React.MouseEvent, id: string) => void;
     REMOVE_ALL_INFO_BANNERS: (e: React.MouseEvent) => void;
     REMOVE_ALL_ALERT_BANNERS: (e: React.MouseEvent) => void;
+    SET_VARIANT: (variant: Variant) => void;
 }
 export declare const BannerContext: React.Context<BannerContextType>;
 export interface BannerProviderProps {

package/dist/components/Banners/bannerContext.js

@@ -110,6 +110,8 @@ var bannerReducer = function (state, action) {
             return __assign(__assign({}, state), { infoState: [] });
         case "REMOVE_ALL_ALERT":
             return __assign(__assign({}, state), { alertState: [] });
+        case "SET_VARIANT":
+            return __assign(__assign({}, state), { variant: action.variant });
         default:
             return state;
     }
@@ -129,7 +131,7 @@ var bannerReducer = function (state, action) {
  */
 var BannerProvider = function (_a) {
     var children = _a.children;
-    var initialState = { alertState: [], infoState: [] };
+    var initialState = { alertState: [], infoState: [], variant: "default" };
     var _b = (0, react_1.useReducer)(bannerReducer, initialState), BANNER_STATE = _b[0], BANNER_DISPATCH = _b[1];
     var REMOVE_ALERT_BANNER = function (e, id) {
         BANNER_DISPATCH({ type: "REMOVE_ALERT", id: id });
@@ -143,6 +145,9 @@ var BannerProvider = function (_a) {
     var REMOVE_ALL_ALERT_BANNERS = function (e) {
         BANNER_DISPATCH({ type: "REMOVE_ALL_ALERT" });
     };
+    var SET_VARIANT = function (variant) {
+        BANNER_DISPATCH({ type: "SET_VARIANT", variant: variant });
+    };
     // the config of bannner can either be passed as a object, or plain arguments.
     var SET_INFO_BANNER = function (options_msg, color, timeOut) {
         var options;
@@ -181,7 +186,8 @@ var BannerProvider = function (_a) {
         REMOVE_ALERT_BANNER: REMOVE_ALERT_BANNER,
         REMOVE_INFO_BANNER: REMOVE_INFO_BANNER,
         REMOVE_ALL_INFO_BANNERS: REMOVE_ALL_INFO_BANNERS,
-        REMOVE_ALL_ALERT_BANNERS: REMOVE_ALL_ALERT_BANNERS
+        REMOVE_ALL_ALERT_BANNERS: REMOVE_ALL_ALERT_BANNERS,
+        SET_VARIANT: SET_VARIANT
     };
     return react_1.default.createElement(exports.BannerContext.Provider, { value: contextValue }, children);
 };

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

@@ -1,40 +1,6 @@
 import React from "react";
-import { To } from 'react-router-dom';
-export type IconColor = 'red' | 'green' | 'yellow' | 'dark' | 'grey';
-export interface DisplayIconProps {
-    color: IconColor;
-}
-export interface BannerCTA {
-    to?: To;
-    action?: () => void;
-    text: string;
-}
-export interface BannerProps {
-    color: IconColor;
-    cta?: BannerCTA;
-    msg: string;
-    handleRemove: (e: React.MouseEvent | null, id: string) => void;
-    id: string;
-    timeOut?: number;
-    showIcon?: boolean;
-    bottomStroke?: boolean;
-    hideCloseButton?: boolean;
-}
-export interface BannerState {
-    id: string;
-    color: IconColor;
-    msg: string;
-    cta?: BannerCTA;
-    timeOut?: number;
-    showIcon?: boolean;
-    hideCloseButton?: boolean;
-}
-export interface BannerAlertProps {
-    BANNER_STATE: {
-        alertState: BannerState[];
-    };
-    REMOVE_ALERT_BANNER: (e: React.MouseEvent | null, id: string) => void;
-}
+import { BannerAlertProps, BannerInfoProps, DisplayIconProps } from "./types";
+export declare const DisplayIcon: React.FunctionComponent<DisplayIconProps>;
 /**
  * @component Renders a list of alert banners with customizable text, color and styling.
  *
@@ -53,12 +19,6 @@ export interface BannerAlertProps {
  * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
  */
 export declare const BannerAlert: React.FunctionComponent<BannerAlertProps>;
-export interface BannerInfoProps {
-    BANNER_STATE: {
-        infoState: BannerState[];
-    };
-    REMOVE_INFO_BANNER: (e: React.MouseEvent | null, id: string) => void;
-}
 /**
  * @component Renders a list of info banners with customizable text, color and styling.
  *

package/dist/components/Banners/index.js

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -44,79 +33,19 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerInfo = exports.BannerAlert = void 0;
+exports.BannerInfo = exports.BannerAlert = exports.DisplayIcon = void 0;
 var react_1 = __importStar(require("react"));
 var styled_1 = require("./styled");
-var react_router_dom_1 = require("react-router-dom");
 var icons_1 = require("../../icons");
-var Buttons_1 = require("../../v2/components/Buttons");
-var Typo2_1 = require("../../v2/components/Typo2");
-var ICONS = {
-    red: "XCircle",
-    green: "CheckCircle",
-    yellow: "WarningCircle",
-    dark: "WarningCircle",
-    grey: "WarningCircle",
-};
+var Toast_1 = require("./Toast");
+var types_1 = require("./types");
+var Banner_1 = require("./Banner");
 var DisplayIcon = function (_a) {
     var color = _a.color;
-    var IconComp = icons_1.icons[ICONS[color]];
+    var IconComp = icons_1.icons[types_1.ICONS[color]];
     return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: 20, weight: "bold" }));
 };
-/**
- * @component Renders a banner component with customizable text, color and styling.
- *
- * - The object containing the following properties:
- * @prop {IconColor} color: The color of the banner.
- * @prop {BannerCTA} cta: The object containing the info about the cta button.
- * @prop {string} msg: The text to be displayed in the banner.
- * @prop {(e: React.MouseEvent | null, id: string) => void} handleRemove: The callback function to be called when the banner is removed.
- * @prop {string} id: The id of the banner.
- * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
- * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
- * @prop {boolean} bottomStroke: A boolean indicating whether to show the bottom stroke in the banner. Defaults to true.
- * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
- * @return {ReactElement} The rendered banner component.
- */
-var Banner = function (_a) {
-    var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.bottomStroke, bottomStroke = _c === void 0 ? true : _c, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d;
-    var _e = (0, react_1.useState)(0), height = _e[0], setHeight = _e[1];
-    var ContainerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        var timer;
-        if (ContainerRef.current) {
-            setHeight(ContainerRef.current.scrollHeight);
-        }
-        if (timeOut) {
-            timer = setTimeout(function () {
-                setHeight(0);
-                remove(null, id);
-            }, timeOut);
-        }
-        return function () {
-            if (timer)
-                clearTimeout(timer);
-        };
-    }, [cta, id, msg, timeOut]);
-    var remove = function (e, id) {
-        setHeight(0);
-        setTimeout(function () {
-            handleRemove(e, id);
-        }, 300);
-    };
-    var genCTA = function (cta) {
-        var LinkWrapper = cta.to ? react_router_dom_1.Link : react_1.Fragment;
-        return (react_1.default.createElement(LinkWrapper, __assign({}, (cta.to ? { to: cta.to } : {})),
-            react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: !cta.to && cta.action }, cta === null || cta === void 0 ? void 0 : cta.text)));
-    };
-    return (react_1.default.createElement(styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, height: height },
-        react_1.default.createElement(styled_1.BannerWrapperStyled, { bottomStroke: bottomStroke, color: color },
-            react_1.default.createElement(styled_1.BannerStyled, null,
-                showIcon && react_1.default.createElement(DisplayIcon, { color: color }),
-                react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, null, msg),
-                cta && genCTA(cta)),
-            hideCloseButton !== true && react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", onClick: function (e) { return remove(e, id); } }))));
-};
+exports.DisplayIcon = DisplayIcon;
 /**
  * @component Renders a list of alert banners with customizable text, color and styling.
  *
@@ -135,9 +64,9 @@ var Banner = function (_a) {
  * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
  */
 var BannerAlert = function (_a) {
-    var _b;
-    var BANNER_STATE = _a.BANNER_STATE, REMOVE_ALERT_BANNER = _a.REMOVE_ALERT_BANNER;
-    var _c = (0, react_1.useState)(0), top = _c[0], setTop = _c[1];
+    var _b, _c;
+    var BANNER_STATE = _a.BANNER_STATE, REMOVE_ALERT_BANNER = _a.REMOVE_ALERT_BANNER, variant = _a.variant;
+    var _d = (0, react_1.useState)(0), top = _d[0], setTop = _d[1];
     (0, react_1.useEffect)(function () {
         var timerId = setTimeout(function () {
             var ele = document.getElementById("bannerInfo");
@@ -149,7 +78,11 @@ var BannerAlert = function (_a) {
             clearTimeout(timerId);
         };
     }, []);
-    return (react_1.default.createElement(styled_1.BannerAlertStyled, { top: top }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, hideCloseButton: e.hideCloseButton })); })));
+    return variant === "toast"
+        ?
+            react_1.default.createElement(Toast_1.StyledToastWrapper, null, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Toast_1.Toast, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, hideCloseButton: e.hideCloseButton, actionText: e.actionText, actionIcon: e.actionIcon })); }))
+        :
+            react_1.default.createElement(styled_1.BannerAlertStyled, { top: top }, (_c = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _c === void 0 ? void 0 : _c.map(function (e) { return (react_1.default.createElement(Banner_1.Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, hideCloseButton: e.hideCloseButton })); }));
 };
 exports.BannerAlert = BannerAlert;
 /**
@@ -170,8 +103,12 @@ exports.BannerAlert = BannerAlert;
  * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
  */
 var BannerInfo = function (_a) {
-    var _b;
-    var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER;
-    return (react_1.default.createElement(styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, bottomStroke: false, hideCloseButton: e.hideCloseButton })); })));
+    var _b, _c;
+    var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER, variant = _a.variant;
+    return variant === "toast"
+        ?
+            react_1.default.createElement(Toast_1.StyledToastWrapper, null, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Toast_1.Toast, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, hideCloseButton: e.hideCloseButton, actionText: e.actionText, actionIcon: e.actionIcon })); }))
+        :
+            react_1.default.createElement(styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_c = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _c === void 0 ? void 0 : _c.map(function (e) { return (react_1.default.createElement(Banner_1.Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, bottomStroke: false, hideCloseButton: e.hideCloseButton, variant: variant })); }));
 };
 exports.BannerInfo = BannerInfo;

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

@@ -0,0 +1,50 @@
+import { To } from "react-router-dom";
+export type IconColor = 'red' | 'green' | 'yellow' | 'dark' | 'grey';
+export declare const ICONS: Record<IconColor, string>;
+export interface BannerProps {
+    color: IconColor;
+    cta?: BannerCTA;
+    msg: string;
+    handleRemove: (e: React.MouseEvent | null, id: string) => void;
+    id: string;
+    timeOut?: number;
+    showIcon?: boolean;
+    bottomStroke?: boolean;
+    hideCloseButton?: boolean;
+    variant?: "toast" | "default";
+    actionText?: string;
+    actionIcon?: string;
+}
+export interface DisplayIconProps {
+    color: IconColor;
+}
+export interface BannerCTA {
+    to?: To;
+    action?: () => void;
+    text: string;
+}
+export interface BannerState {
+    id: string;
+    color: IconColor;
+    msg: string;
+    cta?: BannerCTA;
+    timeOut?: number;
+    showIcon?: boolean;
+    hideCloseButton?: boolean;
+    actionText?: string;
+    actionIcon?: string;
+}
+export interface BannerAlertProps {
+    BANNER_STATE: {
+        alertState: BannerState[];
+    };
+    REMOVE_ALERT_BANNER: (e: React.MouseEvent | null, id: string) => void;
+    variant?: "toast" | "default";
+}
+export interface BannerInfoProps {
+    BANNER_STATE: {
+        infoState: BannerState[];
+    };
+    REMOVE_INFO_BANNER: (e: React.MouseEvent | null, id: string) => void;
+    variant?: "toast" | "default";
+}

package/dist/components/Banners/types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICONS = void 0;
+exports.ICONS = {
+    red: "XCircle",
+    green: "CheckCircle",
+    yellow: "WarningCircle",
+    dark: "WarningCircle",
+    grey: "WarningCircle",
+};

package/dist/stories/Oolib/components/Banner.stories.d.ts

@@ -25,6 +25,22 @@ declare namespace _default {
             let name_4: string;
             export { name_4 as name };
         }
+        namespace variant {
+            let name_5: string;
+            export { name_5 as name };
+            export let options: string[];
+            export namespace mapping {
+                let Default: string;
+                let Toast: string;
+            }
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
     }
     namespace args {
         export let color: string;
@@ -38,6 +54,9 @@ declare namespace _default {
         export { autoHide_1 as autoHide };
         let timeOut_1: number;
         export { timeOut_1 as timeOut };
+        let variant_1: string;
+        export { variant_1 as variant };
+        export let actionText: string;
     }
 }
 export default _default;
@@ -45,26 +64,28 @@ export function Banner_Alert(args: any): import("react").JSX.Element;
 export namespace Banner_Alert {
     export namespace argTypes_1 {
         export namespace color_1 {
-            let name_5: string;
-            export { name_5 as name };
-            export let options: string[];
-            export namespace mapping {
+            let name_6: string;
+            export { name_6 as name };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace mapping_1 {
                 let Success: string;
                 let Alert: string;
                 let Wanring: string;
             }
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
+            export { mapping_1 as mapping };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
             }
-            export { control_1 as control };
-            let defaultValue_1: string;
-            export { defaultValue_1 as defaultValue };
+            export { control_2 as control };
+            let defaultValue_2: string;
+            export { defaultValue_2 as defaultValue };
         }
         export { color_1 as color };
         export namespace buttonText {
-            let name_6: string;
-            export { name_6 as name };
+            let name_7: string;
+            export { name_7 as name };
         }
     }
     export { argTypes_1 as argTypes };
@@ -78,20 +99,21 @@ export function Banner_Info(args: any): import("react").JSX.Element;
 export namespace Banner_Info {
     export namespace argTypes_2 {
         export namespace color_2 {
-            let name_7: string;
-            export { name_7 as name };
-            let options_1: string[];
-            export { options_1 as options };
-            export namespace control_2 {
-                let type_2: string;
-                export { type_2 as type };
+            let name_8: string;
+            export { name_8 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
             }
-            export { control_2 as control };
-            let defaultValue_2: string;
-            export { defaultValue_2 as defaultValue };
+            export { control_3 as control };
+            let defaultValue_3: string;
+            export { defaultValue_3 as defaultValue };
         }
         export { color_2 as color };
     }
     export { argTypes_2 as argTypes };
 }
+export function Toast(args: any): import("react").JSX.Element;
 declare const availableIcons: string[];

package/dist/stories/Oolib/components/Banner.stories.js

@@ -9,10 +9,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Banner_Info = exports.Banner_Alert = void 0;
+exports.Toast = exports.Banner_Info = exports.Banner_Alert = void 0;
 var react_1 = require("react");
 var Banners_1 = require("../../../components/Banners");
 var icons_1 = require("../../../icons");
+var bannerContext_1 = require("../../../components/Banners/bannerContext");
 var availableIcons = Object.keys(icons_1.icons).sort();
 exports.default = {
     title: "Components/Banners",
@@ -35,6 +36,16 @@ exports.default = {
         timeOut: {
             name: "Time Out",
         },
+        variant: {
+            name: "Variant",
+            options: ["Default", "Toast"],
+            mapping: {
+                Default: "default",
+                Toast: "toast",
+            },
+            control: { type: "select" },
+            defaultValue: "Default",
+        },
     },
     args: {
         color: "Success",
@@ -42,7 +53,9 @@ exports.default = {
         showIcon: "X",
         hideCloseButton: false,
         autoHide: false,
-        timeOut: 5000,
+        timeOut: 50000000,
+        variant: "default",
+        actionText: ""
     },
 };
 var uid = 0;
@@ -72,7 +85,7 @@ var Banner_Alert = function (args) {
             alignItems: "center",
             gap: "1rem",
         } },
-        React.createElement(Banners_1.BannerAlert, { BANNER_STATE: { alertState: state }, REMOVE_ALERT_BANNER: function (e, id) { return handleRemoveBanner({ id: id, setState: setState }); } }),
+        React.createElement(Banners_1.BannerAlert, { BANNER_STATE: { alertState: state }, REMOVE_ALERT_BANNER: function (e, id) { return handleRemoveBanner({ id: id, setState: setState }); }, variant: args.variant }),
         React.createElement("button", { onClick: function () { return handleAddMore({ args: args, state: state, setState: setState }); }, style: { padding: ".5rem", width: "fit-content" } }, "Add more"),
         React.createElement("h3", null,
             React.createElement("i", null, "Note: change props and click on add more button"))));
@@ -109,8 +122,10 @@ var Banner_Info = function (args) {
             flexDirection: "column",
             alignItems: "center",
             gap: "1rem",
+            // background:"skyblue",
+            height: "100svh"
         } },
-        React.createElement(Banners_1.BannerInfo, { BANNER_STATE: { infoState: state }, REMOVE_INFO_BANNER: function (e, id) { return handleRemoveBanner({ id: id, setState: setState }); } }),
+        React.createElement(Banners_1.BannerInfo, { BANNER_STATE: { infoState: state }, variant: args.variant, REMOVE_INFO_BANNER: function (e, id) { return handleRemoveBanner({ id: id, setState: setState }); } }),
         React.createElement("button", { onClick: function () { return handleAddMore({ args: args, state: state, setState: setState }); }, style: { padding: ".5rem", width: "fit-content" } }, "Add More"),
         React.createElement("h3", null,
             React.createElement("i", null, "Note: change props and click on add more button"))));
@@ -124,3 +139,37 @@ exports.Banner_Info.argTypes = {
         defaultValue: "grey",
     },
 };
+var Toast = function (args) {
+    var _a = (0, react_1.useState)([]), state = _a[0], setState = _a[1];
+    args.id = uid;
+    if (!args.autoHide) {
+        delete args.timeOut;
+    }
+    return (React.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "1rem",
+            // background:"skyblue",
+            height: "100svh"
+        } },
+        React.createElement(Banners_1.BannerInfo, { BANNER_STATE: { infoState: state }, variant: "toast", REMOVE_INFO_BANNER: function (e, id) { return handleRemoveBanner({ id: id, setState: setState }); } }),
+        React.createElement("button", { onClick: function () { return handleAddMore({ args: args, state: state, setState: setState }); }, style: { padding: ".5rem", width: "fit-content" } }, "Add More"),
+        React.createElement("h3", null,
+            React.createElement("i", null, "Note: change props and click on add more button"))));
+};
+exports.Toast = Toast;
+// const TestBannerVariant = () => {
+//   const { SET_VARIANT, BANNER_STATE } = useBannerContext();
+//   return (
+//     <div>
+//       <p>Current variant: {BANNER_STATE.variant}</p>
+//       <button onClick={() => SET_VARIANT("toast")}>
+//         Set Toast
+//       </button>
+//       <button onClick={() => SET_VARIANT("default")}>
+//         Set Default
+//       </button>
+//     </div>
+//   );
+// };

package/package.json

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