@agilant/toga-blox 1.0.236 → 1.0.238

package/README.md

@@ -16,25 +16,6 @@ npm install @your-company/toga-blox
 🔧 Customization
 Our components are engineered for extensive customization via props. For comprehensive guidance on customizing each component, consult the specific component documentation.
 
-🐳 Docker Integration
-Toga-Blox requires Docker to run certain services like Storybook and CSS watcher. Please ensure Docker is installed on your system. Follow these steps to set up and run the services:
-
-Install Docker from Docker's official website.
-
-Once Docker is installed, use the following commands to manage the Docker containers:
-
-build the Docker images: docker-compose build --no-cache
-
-install the required packages using the docker: docker-compose run --rm ui npm install
-
-To start the services: docker-compose up
-
-To stop the services: docker-compose down
-
-To run tests: docker-compose run --rm test
-
-Running App outside of Docker
-
 To run test coverage report: npx vitest run src/components/{COMPONENT NAME HERE} --coverage
 
 📚 Dependencies
@@ -43,7 +24,7 @@ Toga-Blox is built using:
 React
 TypeScript
 Tailwind CSS
-DaisyUI
+
 
 🤝 Contributing
 We value contributions to Toga-Blox, whether they involve documentation enhancements, feature developments, or bug rectifications. Please follow our contribution guidelines.
@@ -54,15 +35,28 @@ Though toga-blox is developed and optimized using Vite, it's designed to be univ
 📚 Storybook
 For an interactive exploration of toga-blox components, check out our Storybook. It provides live examples, usage scenarios, and customizable props for each component.
 
-## Peer Dependencies
 
-This library requires `react-router-dom` to be installed in your project. Please ensure that you have `react-router-dom` installed to avoid any issues with missing modules.
+## To Deploy Changes In Blox
 
-To install `react-router-dom`, run:
+1) up the version number in package.json
+2) in terminal, execute 'npm run build'
+3) in terminal, execute 'npm publish'
+4) login to registry.npmjs.org to check that new version number reflects on profile (credentials in One Password)
+
+
+## To Check Changes Before Deploying New Version
+*Note: you may need to run separate VS code windows/instances (one for both blox and the consuming app)
+
+To Link:
+1) in blox: execute 'npm link' in terminal
+2) in consuming application: execute 'npm link @agilant/toga-blox' in terminal
+3) to check that applications are link, execute: 'ls -l node_modules/@agilant' in either repo terminals
+
+To Unlink:
+1) in blox: execute 'npm unlink @agilant/toga-blox' in terminal
+2) in consuming application: execute 'npm unlink @agilant/toga-blox' in terminal
+3) to check that applications are link, execute: 'ls -l node_modules/@agilant' (should return empty list) in terminal
 
-```bash
-npm install react-router-dom
-```
 
 ## FontAwesome Icons
 
@@ -73,3 +67,13 @@ For users without a Pro subscription, the free icons will be used. Make sure to
 ```bash
 npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
 ```
+
+## Peer Dependencies (DEPRECATED)
+
+This library requires `react-router-dom` to be installed in your project. Please ensure that you have `react-router-dom` installed to avoid any issues with missing modules.
+
+To install `react-router-dom`, run:
+
+```bash
+npm install react-router-dom
+```

package/dist/api/apiFunctions.d.ts

@@ -1,5 +1,6 @@
-import { Options } from "../utils/queryHelpers";
-export declare const apiGet: <TData = unknown>(route: string, options?: Options, params?: Record<string, any>) => Promise<TData>;
-export declare const apiPost: <TData = unknown>(route: string, data: Record<string, any>, options?: Options, params?: Record<string, any>) => Promise<TData>;
-export declare const apiPut: <TData = unknown>(route: string, data?: Record<string, any>, options?: Options, params?: Record<string, any>) => Promise<TData>;
-export declare const apiDelete: <TData = unknown>(route: string, data?: Record<string, any>, options?: Options, params?: Record<string, any>) => Promise<TData>;
+export declare const apiGet: <TData = unknown>(route: string, options?: Record<string, any>, params?: {}) => Promise<TData>;
+export declare const apiPost: <TData = unknown>(route: string, data: {
+    [key: string]: any;
+}, options?: Record<string, any>, params?: {}) => Promise<TData>;
+export declare const apiPut: <TData = unknown>(route: string, data?: {}, options?: Record<string, any>, params?: {}) => Promise<TData>;
+export declare const apiDelete: <TData = unknown>(route: string, data?: {}, options?: Record<string, any>, params?: {}) => Promise<TData>;

package/dist/api/apiFunctions.js

@@ -1,6 +1,6 @@
-// src/api/apiFunctions.ts
-import { assembleOptions } from "../utils/queryHelpers";
+import { assembleOptions } from "../reactQuery/queryHelpers";
 import axiosInstance from "./axiosInstance";
+// Note: The transactionId is now added automatically via the axios interceptor.
 export const apiGet = async (route, options = {}, params = {}) => {
     let url = route;
     const optionsString = assembleOptions(options);
@@ -41,6 +41,7 @@ export const apiDelete = async (route, data = {}, options = {}, params = {}) =>
     const response = await axiosInstance.delete(url, {
         data,
         params,
+        validateStatus: (status) => status < 500,
     });
     return response.data;
 };

package/dist/api/auth.d.ts

@@ -0,0 +1,3 @@
+export declare const performLogout: () => void;
+export declare const fetchPublicToken: (baseURL: string) => Promise<string | null>;
+export declare const refreshAccessToken: (baseURL: string) => Promise<string | null>;

package/dist/api/auth.js

@@ -0,0 +1,42 @@
+import axios from "axios";
+export const performLogout = () => {
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("user");
+    localStorage.removeItem("refreshToken");
+    window.location.href = "/";
+};
+export const fetchPublicToken = async (baseURL) => {
+    try {
+        const response = await axios.post(`${baseURL}/auth/public`, null, {
+            headers: { "Content-Type": "application/json" },
+        });
+        localStorage.setItem("accessToken", response.data.data.tokens.access);
+        localStorage.setItem("refreshToken", response.data.data.tokens.refresh);
+        return response.data.data.tokens.access;
+    }
+    catch (error) {
+        console.error("Failed to fetch public token:", error);
+        return null;
+    }
+};
+export const refreshAccessToken = async (baseURL) => {
+    const refreshToken = localStorage.getItem("refreshToken");
+    if (!refreshToken)
+        return null;
+    try {
+        const response = await axios.post(`${baseURL}/auth/refresh`, null, {
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${refreshToken}`,
+            },
+        });
+        if (response.data?.data?.tokens?.access) {
+            localStorage.setItem("accessToken", response.data.data.tokens.access);
+            return response.data.data.tokens.access;
+        }
+    }
+    catch (error) {
+        console.error("Failed to refresh token:", error);
+    }
+    return null;
+};

package/dist/api/axiosInstance.d.ts

@@ -1,3 +1,2 @@
-export declare const UserLoginRequiredEvent: Event;
 declare const axiosInstance: import("axios").AxiosInstance;
 export default axiosInstance;

package/dist/api/axiosInstance.js

@@ -1,139 +1,58 @@
 import axios from "axios";
-import * as Sentry from "@sentry/react";
-// Event to indicate when user login is required
-export const UserLoginRequiredEvent = new Event("UserLoginRequired");
-// Assemble the base URL based on environment variables
+import { v4 as uuidv4 } from "uuid";
+import { performLogout, fetchPublicToken, refreshAccessToken } from "./auth";
+// Build base URL from environment
 const fullHostName = window.location.hostname.toUpperCase();
 const hostName = fullHostName.split(".");
 const host = "VITE_API_" + hostName[0];
 const baseURL = import.meta.env[host] || import.meta.env.VITE_API;
-// Initialize axios instance with base configurations
 const axiosInstance = axios.create({
     baseURL,
-    headers: {
-        "Content-Type": "application/json",
-    },
-    timeout: 10000, // Optional: Set a timeout for requests
+    headers: { "Content-Type": "application/json" },
+    timeout: 180000,
 });
-// Function to fetch a public access token for unauthenticated requests
-const fetchPublicToken = async () => {
-    try {
-        const response = await axios.post(`${baseURL}/auth/public`, null, {
-            headers: { "Content-Type": "application/json" },
-        });
-        localStorage.setItem("accessToken", response.data.data.tokens.access);
-        localStorage.setItem("refreshToken", response.data.data.tokens.refresh);
-        return response.data.data.tokens.access;
-    }
-    catch (error) {
-        console.error("Failed to fetch public token:", error);
-        Sentry.captureMessage("Failed to fetch public token Error", {
-            level: "error",
-            tags: {
-                errorType: "API",
-                authentication: "failed",
-            },
-            extra: {
-                message: "Failed to fetch public token",
-                details: error instanceof Error ? error.message : error,
-            },
-        });
-    }
-    return null;
-};
-// Function to refresh the access token using the refresh token
-const refreshAccessToken = async () => {
-    const refreshToken = localStorage.getItem("refreshToken");
-    if (refreshToken) {
-        try {
-            const response = await axios.post(`${baseURL}/auth/refresh`, null, {
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${refreshToken}`,
-                },
-            });
-            if (response.data?.data?.tokens?.access) {
-                localStorage.setItem("accessToken", response.data.data.tokens.access);
-                return response.data.data.tokens.access;
-            }
-        }
-        catch (error) {
-            console.error("Failed to refresh token:", error);
-            Sentry.captureMessage("Failed to fetch refresh token Error", {
-                level: "error",
-                tags: {
-                    errorType: "API",
-                    authentication: "failed",
-                },
-                extra: {
-                    message: "Failed to fetch refresh token",
-                    details: error instanceof Error ? error.message : error,
-                },
-            });
-        }
-    }
-    return null;
-};
-// Request interceptor to add Authorization header
+// Add transactionId to requests
+axiosInstance.interceptors.request.use((config) => {
+    config.params = config.params || {};
+    config.params.transactionId = uuidv4();
+    return config;
+});
+// Add Authorization header
 axiosInstance.interceptors.request.use(async (config) => {
     let token;
     const userString = localStorage.getItem("user");
     if (userString) {
-        // If 'user' exists in localStorage, use the 'accessToken'
         token = localStorage.getItem("accessToken");
     }
     else {
-        // If no 'user' exists, fetch the public token
-        token = await fetchPublicToken();
+        token = await fetchPublicToken(baseURL);
     }
     if (token) {
         config.headers["Authorization"] = `Bearer ${token}`;
     }
     return config;
-}, (error) => {
-    Sentry.captureMessage("Axios Instance request error", {
-        level: "error",
-        tags: {
-            errorType: "API",
-            authentication: "failed",
-        },
-        extra: {
-            message: "Axios Instance request error",
-            details: error instanceof Error ? error.message : error,
-        },
-    });
-    return Promise.reject(error);
 });
-// Response interceptor to handle 401 errors
+// Delay (optional)
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+axiosInstance.interceptors.request.use(async (config) => {
+    await delay(1);
+    return config;
+});
+// Handle 401
 axiosInstance.interceptors.response.use((response) => response, async (error) => {
     const originalRequest = error.config;
-    // Handle 401 Unauthorized errors
     if (error.response?.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
-        // Attempt to refresh the access token
-        const newToken = await refreshAccessToken();
+        const newToken = await refreshAccessToken(baseURL);
         if (newToken) {
-            // Set the new token in the headers and retry the request
             originalRequest.headers["Authorization"] = `Bearer ${newToken}`;
             return axiosInstance(originalRequest);
         }
         else {
-            // If refresh fails, trigger login required event
-            window.dispatchEvent(UserLoginRequiredEvent);
+            if (localStorage.getItem("user"))
+                performLogout();
         }
     }
-    Sentry.captureMessage("Axios Instance response error", {
-        level: "error",
-        tags: {
-            errorType: "API",
-            authentication: "failed",
-        },
-        extra: {
-            message: "Axios Instance response error",
-            status: error.response?.status,
-            details: error instanceof Error ? error.message : error,
-        },
-    });
     return Promise.reject(error);
 });
 export default axiosInstance;

package/dist/api/checkSsoAuth.d.ts

@@ -0,0 +1,6 @@
+declare const useCheckSsoAuth: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
+    protocol: string;
+    hostname: string;
+    environment: string;
+}, unknown>;
+export default useCheckSsoAuth;

package/dist/api/checkSsoAuth.js

@@ -0,0 +1,64 @@
+import { useMutation } from "@tanstack/react-query";
+import { apiGet } from "./apiFunctions";
+const useCheckSsoAuth = () => useMutation({
+    mutationFn: async ({ protocol, hostname, environment, }) => {
+        const domainName = `${protocol}//${hostname}`;
+        environment =
+            environment === "development"
+                ? "DEV"
+                : environment.toUpperCase();
+        const response = (await apiGet("/domains", {
+            fields: [
+                "ClientAuthentications.uuid",
+                "ClientAuthentications.type",
+                "Apps.uuid",
+                "uuid",
+            ],
+            join: [
+                {
+                    Environments: {
+                        "Environments.id": "Domains.environmentId",
+                    },
+                },
+                {
+                    ClientAuthentications: {
+                        "ClientAuthentications.clientId": "Domains.clientId",
+                        "ClientAuthentications.environmentId": "Domains.environmentId",
+                    },
+                },
+                {
+                    Apps: {
+                        "Apps.id": "Domains.appId",
+                    },
+                },
+            ],
+            where: {
+                and: [
+                    {
+                        "Domains.domain": {
+                            like: domainName,
+                        },
+                    },
+                    {
+                        "Environments.slug": {
+                            like: environment,
+                        },
+                    },
+                ],
+            },
+        }));
+        if (response?.data?.domains?.length > 0) {
+            const clientConfig = response.data.domains[0];
+            if (clientConfig.ClientAuthentications?.type === "SSO") {
+                // Get SSO URL
+                const ssoResponse = (await apiGet("/client-authentications/singleSignOnServiceUrl", {
+                    uuid: clientConfig.ClientAuthentications.uuid,
+                    domainUuid: clientConfig.uuid,
+                }));
+                return ssoResponse;
+            }
+        }
+        return null;
+    },
+});
+export default useCheckSsoAuth;

package/dist/api/events.d.ts

@@ -0,0 +1 @@
+export declare const UserLoginRequiredEvent: Event;

package/dist/api/events.js

@@ -0,0 +1 @@
+export const UserLoginRequiredEvent = new Event("UserLoginRequired");

package/dist/api/genericApi.d.ts

@@ -0,0 +1,6 @@
+export declare function getData(slug: string, fields?: string[]): Promise<any[]>;
+export declare function saveData(slug: string, payload: Record<string, any>, returnPayloadDepth?: boolean): Promise<unknown>;
+export declare function updateData(slug: string, uuid: string, payload: Record<string, any>, returnPayloadDepth?: boolean): Promise<unknown>;
+export declare function deleteData(slug: string, uuid: string): Promise<unknown>;
+export declare function deleteAddress(uuid: string): Promise<unknown>;
+export declare function fetchCoreParameters(): Promise<any>;

package/dist/api/genericApi.js

@@ -0,0 +1,72 @@
+import { apiGet, apiPost, apiPut, apiDelete } from "./apiFunctions";
+import { toCamelCase } from "../reactQuery/queryHelpers";
+import * as Sentry from "@sentry/react";
+//Generic component to get all the data from Api based on slug and fields requested for
+export async function getData(slug, fields) {
+    const output = [];
+    const recordsPerPage = 1000;
+    let page = 0;
+    let hasNextPage = true;
+    const camelCaseSlug = toCamelCase(slug);
+    const fieldsOptions = typeof fields !== "undefined" && fields.length > 0
+        ? fields
+        : ["uuid", "name"];
+    try {
+        while (hasNextPage) {
+            page++;
+            const options = {
+                fields: fieldsOptions,
+                recordsPerPage: recordsPerPage,
+                page: page,
+            };
+            const response = await apiGet(`/${slug}`, options);
+            const { data, meta } = response;
+            if (data && data[camelCaseSlug]) {
+                output.push(...data[camelCaseSlug]);
+            }
+            hasNextPage = meta.nextPage;
+        }
+        return output;
+    }
+    catch (error) {
+        Sentry.captureMessage("Error with getData api call", {
+            level: "error",
+            tags: {
+                errorType: "API",
+            },
+            extra: {
+                details: error,
+            },
+        });
+        console.error("Error fetching data:", error);
+        return [];
+    }
+}
+//The global function to save all the data based on the payload , slug
+export async function saveData(slug, payload, returnPayloadDepth) {
+    const response = await apiPost(`/${slug}${returnPayloadDepth ? "?depth=-1" : ""}`, payload);
+    return response;
+}
+//The global function to update all the data based on the payload , slug and uuid
+export async function updateData(slug, uuid, payload, returnPayloadDepth) {
+    const response = await apiPut(`/${slug}/${uuid}` + (returnPayloadDepth ? "?depth=-1" : ""), payload);
+    return response;
+}
+//The global function to delete all the data based on the payload , slug and uuid
+export async function deleteData(slug, uuid) {
+    const response = await apiDelete(`/${slug}/${uuid}`);
+    return response;
+}
+export async function deleteAddress(uuid) {
+    const response = await apiDelete("/addresses/" + uuid);
+    return response;
+}
+//Api call to fetch the core parameters to look for database changes for all Assortments/Bundles
+export async function fetchCoreParameters() {
+    const options = {
+        fields: ["value"],
+        key: "META_LAST_REFRESH_DATETIME",
+    };
+    const response = (await apiGet("/core-parameters", options));
+    return response?.data?.coreParameters;
+}

package/dist/api/handleSamlAuth.d.ts

@@ -0,0 +1,7 @@
+import { Options } from "./types";
+declare const useHandleSamlAuth: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
+    samlEncoded: string;
+    extraParams?: Record<string, any>;
+    options?: Options;
+}, unknown>;
+export default useHandleSamlAuth;

package/dist/api/handleSamlAuth.js

@@ -0,0 +1,26 @@
+import { useMutation } from "@tanstack/react-query";
+import { apiPost } from "../api/apiFunctions";
+function decodeBase64ToUtf8(b64) {
+    // Browser path
+    if (typeof globalThis.atob === "function") {
+        const binary = globalThis.atob(b64);
+        const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+        return new TextDecoder().decode(bytes);
+    }
+    // Node/SSR fallback
+    if (typeof Buffer !== "undefined") {
+        return Buffer.from(b64, "base64").toString();
+    }
+    throw new Error("Base64 decoding not supported in this environment");
+}
+const useHandleSamlAuth = () => {
+    return useMutation({
+        mutationFn: async ({ samlEncoded, extraParams, options, }) => {
+            const decodedSaml = decodeBase64ToUtf8(samlEncoded);
+            const saml = JSON.parse(decodedSaml);
+            const response = (await apiPost(`/auth/${saml.auth}`, { ...saml.payload, ...extraParams }, options ?? {}));
+            return response;
+        },
+    });
+};
+export default useHandleSamlAuth;

package/dist/api/types.d.ts

@@ -0,0 +1,13 @@
+export interface Options {
+    fields?: any;
+    where?: any;
+    join?: any;
+    ojoin?: any;
+    sort?: any;
+    [key: string]: any;
+}
+export interface SamlData {
+    auth: string;
+    payload: any;
+    options?: Options;
+}

package/dist/api/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/BaseButton/BaseButton.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { BaseButtonProps } from "./BaseButton.types";
-declare const BaseButton: React.FC<BaseButtonProps>;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default BaseButton;

package/dist/components/BaseButton/BaseButton.js

@@ -1,27 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BaseButton = ({ onClick, text, fontFamily, backgroundColor, customWidth, customHeight, shape, borderColor, icon, additionalClasses, type = "button", to, href, isDisabled = false, hasShadow, as: Element = "button", hoverBackground, hoverFontColor, hoverUnderline = false, hoverBorderColor, iconClasses, ...props }) => {
-    const baseBaseButtonClasses = "flex items-center justify-center";
-    const hoverClasses = !isDisabled
-        ? `${hoverBackground} ${hoverFontColor} ${hoverUnderline ? "underline underline-offset-4" : ""} ${hoverBorderColor}`
-        : "";
-    const buttonColorClasses = `${backgroundColor} ${borderColor}`;
-    const cursorClasses = isDisabled
-        ? "cursor-not-allowed opacity-50"
-        : "cursor-pointer";
-    const textStyleClasses = `${fontFamily}`;
-    const buttonShapeClasses = shape;
-    const buttonClasses = `
-    ${baseBaseButtonClasses}
-    ${buttonColorClasses}
-    ${buttonShapeClasses}
-    ${textStyleClasses}
-    ${hoverClasses}
-    ${cursorClasses}
-    ${hasShadow ? "shadow-md" : ""}
-    ${customWidth}
-    ${customHeight}
-    ${additionalClasses}
-  `.trim();
+import React from "react";
+const BaseButton = React.forwardRef(({ onClick, text, fontFamily, fontColor, fontSize, shape, buttonSize, backgroundColor, borderColor, iconOrder, icon, iconBreakpoint, textBreakpoint, textAdditionalClasses, disabledButtonClasses, additionalClasses = "justify-center", type = "button", href, to, isDisabled = false, as: asProp = "a", hoverBackground, hoverBorderColor, hoverFontColor, iconAriaLabel, iconClasses, ariaSelected, ariaRole, ariaControls, tabIndex, onKeyDown, dataTestId, linkComponent: LinkComponent, ...rest }, ref) => {
+    const textClasses = `${fontFamily ?? ""} ${fontSize ?? ""} ${textBreakpoint ?? ""} ${textAdditionalClasses ?? ""}`;
+    const buttonClasses = `flex ${textClasses} ${iconOrder === "last" ? "flex-row-reverse" : ""} items-center ${shape ?? ""} ${buttonSize ?? ""} ${additionalClasses} ${isDisabled
+        ? `cursor-not-allowed ${disabledButtonClasses ?? ""}`
+        : `cursor-pointer ${borderColor ?? ""} ${backgroundColor ?? ""} ${hoverBackground ?? ""} ${hoverBorderColor ?? ""} ${fontColor ?? ""} ${hoverFontColor ?? ""}`}`;
+    const iconClassNames = `${iconClasses ?? ""} ${iconBreakpoint ?? ""}`;
     const handleClick = (e) => {
         if (isDisabled) {
             e.preventDefault();
@@ -32,18 +16,29 @@ const BaseButton = ({ onClick, text, fontFamily, backgroundColor, customWidth, c
     const baseProps = {
         className: buttonClasses,
         onClick: handleClick,
-        "aria-disabled": isDisabled ? "true" : "false",
+        "aria-disabled": isDisabled ? "true" : undefined,
+        role: ariaRole,
+        "aria-selected": ariaSelected,
+        "aria-controls": ariaControls,
+        tabIndex,
+        onKeyDown,
+        "aria-label": iconAriaLabel ? `${iconAriaLabel}` : undefined,
+        "data-testid": dataTestId,
+        ref,
+        ...rest,
     };
-    let ElementProps = { ...baseProps };
-    if (Element === "a" && href) {
-        ElementProps = { ...baseProps, href };
+    let ComponentToRender = asProp;
+    let elementProps = { ...baseProps };
+    if (asProp === "a" && href) {
+        elementProps.href = href;
     }
-    else if (Element === "button") {
-        ElementProps = { ...baseProps, type };
+    else if (asProp === "button") {
+        elementProps.type = type;
     }
-    else {
-        ElementProps = { ...baseProps };
+    else if (asProp === "link" && LinkComponent && to) {
+        ComponentToRender = LinkComponent;
+        elementProps.to = to;
     }
-    return (_jsxs(Element, { ...ElementProps, ...props, children: [icon && _jsx("span", { className: iconClasses, children: icon }), text] }));
-};
+    return (_jsxs(ComponentToRender, { ...elementProps, children: [icon && _jsx("span", { className: iconClassNames, children: icon }), text] }));
+});
 export default BaseButton;