@agilant/toga-blox 1.0.22 → 1.0.24

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

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

package/dist/components/BaseButton/BaseButton.js

@@ -0,0 +1,49 @@
+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();
+    const handleClick = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    const baseProps = {
+        className: buttonClasses,
+        onClick: handleClick,
+        "aria-disabled": isDisabled ? "true" : "false",
+    };
+    let ElementProps = { ...baseProps };
+    if (Element === "a" && href) {
+        ElementProps = { ...baseProps, href };
+    }
+    else if (Element === "button") {
+        ElementProps = { ...baseProps, type };
+    }
+    else {
+        ElementProps = { ...baseProps };
+    }
+    return (_jsxs(Element, { ...ElementProps, ...props, children: [icon && _jsx("span", { className: iconClasses, children: icon }), text] }));
+};
+export default BaseButton;

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

@@ -0,0 +1,12 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const Compass: any;
+export declare const Disabled: any;
+export declare const WithIcon: any;
+export declare const IconOnly: any;
+export declare const ClearCartButton: any;
+export declare const RightIconButton: any;
+export declare const ConfirmRequestButton: any;
+export declare const FourButtonsRow: any;

package/dist/components/BaseButton/BaseButton.stories.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import BaseButton from "./BaseButton";
+import Text from "../Text/Text";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+export default {
+    title: "Components/BaseButton",
+    component: BaseButton,
+    argTypes: {
+        onClick: {
+            table: {
+                disable: true,
+            },
+            control: "none",
+        },
+        text: {
+            control: "none",
+            description: "The main text displayed on the button.",
+        },
+        fontFamily: {
+            control: "none",
+            description: "The font family of the button text.",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "The background color of the button. Use Tailwind CSS color classes.",
+        },
+        borderColor: {
+            control: "none",
+            description: "The color of the border of the button. Use Tailwind CSS border color classes.",
+        },
+        shape: {
+            control: "none",
+            description: "The shape of the button. Use Tailwind CSS border radius classes.",
+        },
+        hoverBackground: {
+            control: "none",
+            description: "The background color of the button on hover. Use Tailwind CSS color classes.",
+        },
+        hoverFontColor: {
+            control: "none",
+            description: "The text color of the button on hover. Use Tailwind CSS color classes.",
+        },
+        hoverUnderline: {
+            control: "none",
+            description: "Whether the text is underlined on hover.",
+        },
+        hoverBorderColor: {
+            control: "none",
+            description: "The border color of the button on hover. Use Tailwind CSS border color classes.",
+        },
+        isDisabled: {
+            control: "none",
+            description: "Whether the button is disabled and cannot be clicked.",
+        },
+        hasShadow: {
+            control: "none",
+            description: "Tailwind CSS class to add a shadow to the button.",
+        },
+        customWidth: {
+            control: "none",
+            description: "Custom width for the button. Can be a Tailwind CSS class.",
+        },
+        customHeight: {
+            control: "none",
+            description: "Custom height for the button. Can be a Tailwind CSS class.",
+        },
+        additionalClasses: {
+            control: "none",
+            description: "Additional Tailwind CSS classes to apply to the button.",
+        },
+        icon: {
+            control: "none",
+            description: "An optional icon element to display inside the button.",
+        },
+        iconClasses: {
+            control: "none",
+            description: "Classes for styling the icon inside the button.",
+        },
+        as: {
+            control: "none",
+            description: "Defines the type of element to render, such as a 'button', 'a', or a React Router 'Link'.",
+        },
+        href: {
+            control: "none",
+            description: "If 'as' is 'a', this specifies the 'href' for an anchor element.",
+        },
+        to: {
+            control: "none",
+            description: "If 'as' is 'Link', this specifies the 'to' prop for React Router 'Link'.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "The `BaseButton` component is a versatile button component that supports different types of elements like `button`, `a`, and `Link` from React Router. It's highly customizable with Tailwind CSS classes.",
+            },
+        },
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(BaseButton, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    text: "Default Button",
+    backgroundColor: "bg-blue-600",
+    fontFamily: "font-sans",
+    borderColor: "border-none",
+    shape: "rounded-md",
+    hoverBackground: "hover:bg-blue-700",
+    hoverFontColor: "hover:text-black",
+    onClick: () => alert("Button clicked!"),
+    additionalClasses: "p-2",
+};
+export const Compass = Template.bind({});
+Compass.args = {
+    text: _jsx(Text, { size: "", color: "", text: "Compass Button", fontFamily: "" }),
+    backgroundColor: "bg-green-400",
+    fontFamily: "font-sans",
+    shape: "rounded-md",
+    borderColor: "border-none",
+    hoverBackground: "hover:bg-green-700",
+    hoverFontColor: "hover:text-white",
+    hoverBorderColor: "hover:border-green-900",
+    hoverUnderline: false,
+    onClick: () => alert("Button clicked!"),
+    as: "a",
+    href: "#",
+    additionalClasses: "p-2",
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Default.args,
+    text: _jsx(Text, { size: "", color: "", text: "Disabled Button", fontFamily: "" }),
+    isDisabled: true,
+};
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+    ...Default.args,
+    text: (_jsx(Text, { size: "", color: "", text: "Button with icon", fontFamily: "", additionalClasses: "pl-2" })),
+    icon: getFontAwesomeIcon("coffee"),
+    shape: "rounded-none",
+    hoverUnderline: false,
+    onClick: () => alert("Button clicked!"),
+    iconClasses: "pl-2",
+};
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+    fontFamily: "font-sans",
+    shape: "rounded",
+    hoverBackground: "hover:bg-gray-100",
+    hoverUnderline: false,
+    icon: getFontAwesomeIcon("trash"),
+    additionalClasses: "flex justify-center items-center px-4 py-3 bg-gray-50",
+    onClick: () => alert("Icon button clicked!"),
+};
+export const ClearCartButton = Template.bind({});
+ClearCartButton.args = {
+    text: _jsx(Text, { size: "", color: "", text: "Clear Cart", fontFamily: "" }),
+    fontFamily: "font-sans",
+    shape: "rounded-md",
+    hoverBackground: "hover:bg-gray-100",
+    hoverFontColor: "hover:text-black",
+    hoverBorderColor: "hover:border-red-700",
+    hoverUnderline: false,
+    icon: getFontAwesomeIcon("trash"),
+    iconClasses: "order-first",
+    additionalClasses: "px-5 py-6 bg-gray-50 border-red-500 gap-2",
+    onClick: () => alert("Cart Cleared!"),
+};
+export const RightIconButton = Template.bind({});
+RightIconButton.args = {
+    text: _jsx(Text, { size: "", color: "text-white", text: "Next", fontFamily: "" }),
+    backgroundColor: "bg-gray-500",
+    shape: "rounded-md",
+    hoverBackground: "hover:bg-gray-700",
+    hoverFontColor: "hover:text-white",
+    hoverBorderColor: "hover:border-blue-700",
+    hoverUnderline: false,
+    icon: getFontAwesomeIcon("arrowRight"),
+    additionalClasses: "px-6 py-3 flex-row-reverse",
+    iconClasses: "ml-2 text-white",
+    onClick: () => alert("Next clicked!"),
+};
+export const ConfirmRequestButton = Template.bind({});
+ConfirmRequestButton.args = {
+    text: _jsx(Text, { size: "", color: "", text: "CONFIRM REQUEST", fontFamily: "" }),
+    backgroundColor: "bg-[#9ca3af]",
+    fontFamily: "font-sans",
+    borderColor: "border-none",
+    shape: "rounded-md",
+    hoverUnderline: false,
+    isDisabled: true,
+    additionalClasses: "py-3 px-6",
+};
+export const FourButtonsRow = Template.bind({});
+FourButtonsRow.args = {};
+FourButtonsRow.decorators = [
+    (Story) => (_jsxs("div", { className: "flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200", children: [_jsx(BaseButton, { text: "All", backgroundColor: "bg-teal-600", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverUnderline: false, additionalClasses: "py-2 px-4 text-white", onClick: () => alert("All clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("boxes", "mr-2"), "Bundles"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Bundles clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("clipboard", "mr-2"), "Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Categories clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("plus", "mr-2"), "Custom Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Custom Categories clicked!") })] })),
+];

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

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

package/dist/components/BaseButton/BaseButton.test.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import Button from "./BaseButton";
+import { MemoryRouter } from "react-router-dom";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+describe("Button", () => {
+    test("renders correctly", () => {
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
+        expect(screen.getByText("Default Button")).toBeInTheDocument();
+    });
+    test("is clickable", () => {
+        const mockOnClick = vi.fn();
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Clickable Button", backgroundColor: "green", shape: "outline", onClick: mockOnClick }) }));
+        fireEvent.click(screen.getByText("Clickable Button"));
+        expect(mockOnClick).toHaveBeenCalled();
+    });
+    test("has correct text", () => {
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
+        expect(screen.getByText("Default Button")).toHaveTextContent("Default Button");
+    });
+    test("renders the button with an icon", () => {
+        const icon = getFontAwesomeIcon("check");
+        render(_jsx(Button, { text: "Search Button", icon: _jsx(FontAwesomeIcon, { icon: faCheck }) }));
+        const buttonElement = screen.getByText("Search Button");
+        expect(buttonElement).toHaveTextContent("Search Button");
+        const iconElement = screen.getByRole("img", { hidden: true }); // Search for <svg> with role="img"
+        expect(iconElement).toBeInTheDocument();
+    });
+});
+describe("Disabled Button", () => {
+    test("is disabled", () => {
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Disabled Button", backgroundColor: "green", shape: "outline", isDisabled: true }) }));
+        expect(screen.getByText("Disabled Button")).toHaveAttribute("aria-disabled", "true");
+    });
+    test("handleClick is not triggered when button is disabled", () => {
+        const mockOnClick = vi.fn();
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Disabled Button", backgroundColor: "blue", isDisabled: true, onClick: mockOnClick }) }));
+        const button = screen.getByText("Disabled Button");
+        fireEvent.click(button);
+        expect(mockOnClick).not.toHaveBeenCalled();
+    });
+});
+describe("Anchor Button", () => {
+    test("renders as an anchor tag with correct attributes when Element='a'", () => {
+        render(_jsx(Button, { text: "Anchor Button", as: "a", href: "/test-link" }));
+        const anchorElement = screen.getByText("Anchor Button");
+        expect(anchorElement.tagName).toBe("A");
+        expect(anchorElement).toHaveAttribute("href", "/test-link");
+    });
+    test("renders as an anchor tag without href attribute", () => {
+        render(_jsx(Button, { text: "Anchor Button", as: "a" }));
+        const anchorElement = screen.getByText("Anchor Button");
+        expect(anchorElement.tagName).toBe("A");
+        expect(anchorElement).not.toHaveAttribute("href", "/test-link");
+    });
+});

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

@@ -0,0 +1,24 @@
+import React, { ElementType } from "react";
+export interface BaseButtonProps {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    text?: string | JSX.Element;
+    fontFamily?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    customWidth?: string;
+    customHeight?: string;
+    shape?: string;
+    icon?: JSX.Element | null;
+    additionalClasses?: string;
+    type?: "button" | "submit" | "reset";
+    to?: string;
+    href?: string;
+    isDisabled?: boolean;
+    hasShadow?: string;
+    as?: ElementType | string;
+    hoverBackground?: string;
+    hoverFontColor?: string;
+    hoverUnderline?: boolean;
+    hoverBorderColor?: string;
+    iconClasses?: string;
+}

package/dist/components/BaseButton/BaseButton.types.js

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

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

@@ -0,0 +1,2 @@
+export { default } from "./BaseButton";
+export * from "./BaseButton.types";

package/dist/components/BaseButton/index.js

@@ -0,0 +1,2 @@
+export { default } from "./BaseButton";
+export * from "./BaseButton.types";

package/dist/components/Card/DUMMYPRODUCTDATA.json

@@ -387,7 +387,8 @@
     ],
     "DUMMYCOMPASSPRODUCTDATA": [
         {
-            "id": "1 - Environmental Services - Lenovo ThinkPad Universal USB-C Dock",
+            "id": "1",
+            "title": " Environmental Services - Lenovo ThinkPad Universal USB-C Dock",
             "rating": 5,
             "link": "#",
             "inStock": true,

package/dist/components/Card/templates/CounterContentCardTemplate.js

@@ -5,7 +5,7 @@ import Image from "../../Image/Image";
 import Badge from "../../Badge/Badge";
 import CounterButton from "../../CounterButton/CounterButton";
 import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
-import FormButton from "../../FormButton";
+import BaseButton from "../../BaseButton";
 const truncateDescription = (description, maxLength) => {
     if (description.length > maxLength) {
         return description.slice(0, maxLength) + "...";
@@ -41,6 +41,6 @@ const CounterContentCardTemplate = ({ data }) => {
         setInCart(false);
         setCount(0);
     };
-    return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[300px] h-auto sm:h-[350px] border border-[#DFE4EA] bg-white rounded-lg relative p-4 sm:p-4 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-3 left-3", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: "flex justify-center items-center mt-4 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[100px] sm:w-[120px] h-[100px] sm:h-[120px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-4", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-md", text: truncateDescription(data.title, 52), color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left font-bold` }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "text-left mt-1" }), _jsx(Text, { tag: "p", size: "text-xs sm:text-sm", text: truncateDescription(data.description, 52), color: "text-gray-700", fontFamily: "font-sans", additionalClasses: "text-left mt-2" })] }), _jsxs("div", { className: "flex justify-between items-center w-full mt-4 sm:mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx("div", { className: "flex items-center gap-2 min-w-[120px] sm:min-w-[150px] justify-end", children: inCart ? (_jsxs(_Fragment, { children: [_jsx(FormButton, { additionalClasses: "w-6 sm:w-8 h-6 sm:h-8 flex items-center justify-center text-red-600", icon: getFontAwesomeIcon("trash"), onClick: handleDeleteClick }), _jsx(CounterButton, { count: count, onIncrementClick: handleIncrementClick, onDecrementClick: handleDecrementClick, onInputChange: handleInputChange, containerClassName: "flex items-center border border-gray-300 rounded-md overflow-hidden", inputClassName: "w-8 h-8 text-center text-xs sm:text-sm border-none outline-none bg-white", buttonClassName: "w-8 h-8 flex items-center justify-center text-gray-600", iconClasses: "fill-current text-gray-600" })] })) : (_jsx(FormButton, { text: "Add to Cart", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] hover:bg-teal-800", onClick: handleAddToCartClick })) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[300px] h-auto sm:h-[350px] border border-[#DFE4EA] bg-white rounded-lg relative p-4 sm:p-4 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-3 left-3", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: "flex justify-center items-center mt-4 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[100px] sm:w-[120px] h-[100px] sm:h-[120px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-4", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-md", text: truncateDescription(data.title, 52), color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left font-bold` }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "text-left mt-1" }), _jsx(Text, { tag: "p", size: "text-xs sm:text-sm", text: truncateDescription(data.description, 52), color: "text-gray-700", fontFamily: "font-sans", additionalClasses: "text-left mt-2" })] }), _jsxs("div", { className: "flex justify-between items-center w-full mt-4 sm:mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx("div", { className: "flex items-center gap-2 min-w-[120px] sm:min-w-[150px] justify-end", children: inCart ? (_jsxs(_Fragment, { children: [_jsx(BaseButton, { additionalClasses: "w-6 sm:w-8 h-6 sm:h-8 flex items-center justify-center text-red-600", icon: getFontAwesomeIcon("trash"), onClick: handleDeleteClick }), _jsx(CounterButton, { count: count, onIncrementClick: handleIncrementClick, onDecrementClick: handleDecrementClick, onInputChange: handleInputChange, containerClassName: "flex items-center border border-gray-300 rounded-md overflow-hidden", inputClassName: "w-8 h-8 text-center text-xs sm:text-sm border-none outline-none bg-white", buttonClassName: "w-8 h-8 flex items-center justify-center text-gray-600", iconClasses: "fill-current text-gray-600" })] })) : (_jsx(BaseButton, { text: "Add to Cart", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] hover:bg-teal-800", onClick: handleAddToCartClick })) })] })] }));
 };
 export default CounterContentCardTemplate;

package/dist/components/Card/templates/HorizontalCardTemplate.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import FormButton from "../../FormButton/FormButton";
+import BaseButton from "../../BaseButton/BaseButton";
 import Text from "../../Text/Text";
 import Image from "../../Image/Image";
 import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
 const HorizontalCardTemplate = ({ data }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("a", { href: "#", className: `flex justify-center w-72  max-sm:w-full`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText }) }), _jsxs("div", { className: "flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full", children: [_jsx("div", { className: "flex h-full mb-12 max-sm:mb-2", children: _jsx("a", { href: data.link, children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: "black", fontFamily: "", additionalClasses: data.titleProps.additionalClasses }) }) }), _jsxs("div", { className: `flex justify-between mb-12  max-sm:flex-col max-sm:items-end max-sm:mb-2`, children: [_jsx("div", { className: "flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: _jsx(Text, { tag: data.identifierProps.tag, size: data.identifierProps.size, text: data.identifier, color: "", fontFamily: "", additionalClasses: data.identifierProps.additionalClasses }) }), _jsxs("div", { className: "flex items-center justify-center px-2 max-sm:mb-1", children: [_jsx("div", { className: "pr-2 text-xs", children: data.inStock === true
+    return (_jsxs(_Fragment, { children: [_jsx("a", { href: "#", className: `flex justify-center w-72  max-sm:w-full`, "data-testid": "card", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText }) }), _jsxs("div", { className: "flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full", children: [_jsx("div", { className: "flex h-full mb-12 max-sm:mb-2", children: _jsx("a", { href: data.link, children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: "black", fontFamily: "", additionalClasses: data.titleProps.additionalClasses }) }) }), _jsxs("div", { className: `flex justify-between mb-12  max-sm:flex-col max-sm:items-end max-sm:mb-2`, children: [_jsx("div", { className: "flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: _jsx(Text, { tag: data.identifierProps.tag, size: data.identifierProps.size, text: data.identifier, color: "", fontFamily: "", additionalClasses: data.identifierProps.additionalClasses }) }), _jsxs("div", { className: "flex items-center justify-center px-2 max-sm:mb-1", children: [_jsx("div", { className: "pr-2 text-xs", children: data.inStock === true
                                             ? getFontAwesomeIcon(data.inStockProps.inStockIcon)
                                             : getFontAwesomeIcon(data.inStockProps.outOfStockIcon) }), _jsx(Text, { tag: data.inStockProps.tag, size: data.inStockProps.size, text: data.inStock === true
                                             ? "In Stock"
-                                            : "Out of Stock", color: "black", fontFamily: "", additionalClasses: data.inStockProps.additionalClasses })] }), _jsxs("div", { className: "flex px-2 items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: [_jsx("svg", { className: "w-4 h-4 text-yellow-300", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 22 20", children: _jsx("path", { d: "M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" }) }), _jsx(Text, { tag: data.ratingProps.tag, size: data.ratingProps.size, text: data.rating, color: "", fontFamily: "", additionalClasses: data.ratingProps.additionalClasses })] })] }), _jsxs("div", { className: "flex items-end flex-col w-full max-sm:flex-row max-sm:justify-between", children: [_jsx("div", { className: "px-2", children: _jsx(Text, { tag: data.priceProps.tag, size: data.priceProps.size, text: data.price, color: "black", fontFamily: "", additionalClasses: data.priceProps.additionalClasses }) }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, hoverBackground: data.buttonProps.hoverBackground, additionalClasses: "w-24" })] })] })] }));
+                                            : "Out of Stock", color: "black", fontFamily: "", additionalClasses: data.inStockProps.additionalClasses })] }), _jsxs("div", { className: "flex px-2 items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: [_jsx("svg", { className: "w-4 h-4 text-yellow-300", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 22 20", children: _jsx("path", { d: "M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" }) }), _jsx(Text, { tag: data.ratingProps.tag, size: data.ratingProps.size, text: data.rating, color: "", fontFamily: "", additionalClasses: data.ratingProps.additionalClasses })] })] }), _jsxs("div", { className: "flex items-end flex-col w-full max-sm:flex-row max-sm:justify-between", children: [_jsx("div", { className: "px-2", children: _jsx(Text, { tag: data.priceProps.tag, size: data.priceProps.size, text: data.price, color: "black", fontFamily: "", additionalClasses: data.priceProps.additionalClasses }) }), _jsx(BaseButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, hoverBackground: data.buttonProps.hoverBackground, additionalClasses: "w-24" })] })] })] }));
 };
 export default HorizontalCardTemplate;

package/dist/components/Card/templates/ItemCardTemplate.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormButton from "../../FormButton/FormButton";
+import BaseButton from "../../BaseButton/BaseButton";
 import Text from "../../Text/Text";
 import Image from "../../Image/Image";
 import Badge from "../../Badge/Badge";
 const ItemCardTemplate = ({ data, containerClasses = "", imageContainerClasses = "", titleContainerClasses = "", descriptionContainerClasses = "", priceContainerClasses = "", buttonContainerClasses = "", badgeContainerClasses = "", }) => {
-    return (_jsxs("div", { className: `${containerClasses}`, children: [_jsx("div", { className: badgeContainerClasses, children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: `flex justify-center items-center ${imageContainerClasses}`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "object-contain max-h-full" }) }), _jsxs("div", { className: `${titleContainerClasses}`, children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-sm sm:text-md", text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: data.titleProps.additionalClasses }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "mb-1 sm:mb-2" }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.description, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "mb-2 sm:mb-4" }), _jsxs("div", { className: `${priceContainerClasses}`, children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: `${buttonContainerClasses} hover:bg-teal-800` })] })] })] }));
+    return (_jsxs("div", { className: `${containerClasses}`, children: [_jsx("div", { className: badgeContainerClasses, children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: `flex justify-center items-center ${imageContainerClasses}`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "object-contain max-h-full" }) }), _jsxs("div", { className: `${titleContainerClasses}`, children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-sm sm:text-md", text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: data.titleProps.additionalClasses }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "mb-1 sm:mb-2" }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.description, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "mb-2 sm:mb-4" }), _jsxs("div", { className: `${priceContainerClasses}`, children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(BaseButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: `${buttonContainerClasses} hover:bg-teal-800` })] })] })] }));
 };
 export default ItemCardTemplate;

package/dist/components/Card/templates/KitContentCardTemplate.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormButton from "../../FormButton/FormButton";
+import BaseButton from "../../BaseButton/BaseButton";
 import Text from "../../Text/Text";
 import Image from "../../Image/Image";
 import Badge from "../../Badge/Badge";
 const KitContentCardTemplate = ({ data }) => {
-    return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[244px] h-auto sm:h-[255px] border border-[#DFE4EA] bg-white rounded-lg relative p-3 hover:border-1 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-2 left-2", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-yellow-800" }) }), _jsx("div", { className: "flex flex-col items-center gap-2 mt-6 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[80px] h-[80px] sm:w-[100px] sm:h-[100px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-2", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-xs sm:text-sm", text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left` }), _jsx(Text, { tag: "span", size: "text-xs", text: data.identifier, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "text-left" })] }), _jsxs("div", { className: "flex items-end justify-between w-full mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-xs sm:text-sm", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: "bg-slate-200", shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: "px-2 py-1 cursor-not-allowed", isDisabled: true })] })] }));
+    return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[244px] h-auto sm:h-[255px] border border-[#DFE4EA] bg-white rounded-lg relative p-3 hover:border-1 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-2 left-2", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-yellow-800" }) }), _jsx("div", { className: "flex flex-col items-center gap-2 mt-6 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[80px] h-[80px] sm:w-[100px] sm:h-[100px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-2", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-xs sm:text-sm", text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left` }), _jsx(Text, { tag: "span", size: "text-xs", text: data.identifier, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "text-left" })] }), _jsxs("div", { className: "flex items-end justify-between w-full mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-xs sm:text-sm", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(BaseButton, { text: data.buttonProps.text, backgroundColor: "bg-slate-200", shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: "px-2 py-1 cursor-not-allowed", isDisabled: true })] })] }));
 };
 export default KitContentCardTemplate;

package/dist/components/Card/templates/ShippingAddressCardTemplate.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormButton from "../../FormButton/FormButton";
+import BaseButton from "../../BaseButton/BaseButton";
 import Text from "../../Text/Text";
 import Image from "../../Image/Image";
 import Badge from "../../Badge/Badge";
 const ShippingAddressCardTemplate = ({ data, }) => {
-    return (_jsxs("div", { className: "flex flex-col sm:flex-row p-4 sm:p-6 m-4 sm:m-20 border border-[#00B9A8] bg-white rounded-lg w-full relative hover:border-teal-500 hover:shadow-inner", children: [_jsx("div", { className: "flex-shrink-0 w-full sm:w-auto mb-4 sm:mb-0", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-full h-auto sm:h-auto object-contain" }) }), _jsxs("div", { className: "flex flex-col w-full h-full sm:ml-5", children: [_jsx(Badge, { text: _jsx(Text, { color: "text-green-800", fontFamily: "font-serif", tag: "span", text: data.badgeText, size: "text-xs" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "w-[fit-content] h-[fit-content]" }), _jsxs("div", { className: "mt-2 sm:mt-0", children: [_jsx(Text, { tag: "h2", size: "text-lg", text: data.title, color: "text-black", fontFamily: "font-serif", additionalClasses: "font-bold" }), _jsxs("div", { className: "mt-1", children: [_jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine1, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" }), _jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine2, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" }), _jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine3, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" })] })] }), _jsxs("div", { className: "flex flex-row sm:flex-row gap-2 mt-4 sm:mt-20 w-full sm:w-auto", children: [_jsx(FormButton, { text: "Edit", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "px-2 py-1 sm:px-4 sm:py-2 hover:bg-teal-800" }), _jsx(FormButton, { text: "Delete", backgroundColor: "bg-transparent", shape: "rounded-md", borderColor: "border border-red-600", additionalClasses: "px-2 py-1 sm:px-4 sm:py-2 hover:bg-[#FFEBEE]" })] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col sm:flex-row p-4 sm:p-6 m-4 sm:m-20 border border-[#00B9A8] bg-white rounded-lg w-full relative hover:border-teal-500 hover:shadow-inner", children: [_jsx("div", { className: "flex-shrink-0 w-full sm:w-auto mb-4 sm:mb-0", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-full h-auto sm:h-auto object-contain" }) }), _jsxs("div", { className: "flex flex-col w-full h-full sm:ml-5", children: [_jsx(Badge, { text: _jsx(Text, { color: "text-green-800", fontFamily: "font-serif", tag: "span", text: data.badgeText, size: "text-xs" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "w-[fit-content] h-[fit-content]" }), _jsxs("div", { className: "mt-2 sm:mt-0", children: [_jsx(Text, { tag: "h2", size: "text-lg", text: data.title, color: "text-black", fontFamily: "font-serif", additionalClasses: "font-bold" }), _jsxs("div", { className: "mt-1", children: [_jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine1, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" }), _jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine2, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" }), _jsx(Text, { tag: "span", size: "text-sm", text: data.addressLine3, color: "text-slate-400", fontFamily: "font-sans", additionalClasses: "block" })] })] }), _jsxs("div", { className: "flex flex-row sm:flex-row gap-2 mt-4 sm:mt-20 w-full sm:w-auto", children: [_jsx(BaseButton, { text: "Edit", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "px-2 py-1 sm:px-4 sm:py-2 hover:bg-teal-800" }), _jsx(BaseButton, { text: "Delete", backgroundColor: "bg-transparent", shape: "rounded-md", borderColor: "border border-red-600", additionalClasses: "px-2 py-1 sm:px-4 sm:py-2 hover:bg-[#FFEBEE]" })] })] })] }));
 };
 export default ShippingAddressCardTemplate;

package/dist/components/Card/templates/VerticalCardTemplate.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormButton from "../../FormButton/FormButton";
+import BaseButton from "../../BaseButton/BaseButton";
 import Text from "../../Text/Text";
 import Image from "../../Image/Image";
 import Badge from "../../Badge/Badge";
 const VerticalCardTemplate = ({ data, containerClasses = "", imageContainerClasses = "", titleContainerClasses = "", descriptionContainerClasses = "", priceContainerClasses = "", buttonContainerClasses = "", badgeContainerClasses = "", }) => {
-    return (_jsxs("div", { className: `${containerClasses} p-4`, children: [_jsx("div", { className: badgeContainerClasses, children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-md" }), type: "span", hoverColor: "", badgeContainerClasses: "text-slate-800", backgroundColor: "bg-slate-100" }) }), _jsx("div", { className: `relative ${imageContainerClasses}`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-full h-full object-contain" }) }), _jsxs("div", { className: titleContainerClasses, children: [_jsx("div", { className: "flex flex-col", children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: data.titleProps.additionalClasses }) }), _jsx("div", { className: descriptionContainerClasses, children: _jsxs("div", { className: "relative flex items-center gap-2", children: [_jsx("div", { className: "w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden z-10", children: _jsx(Image, { background: false, src: "../../../assets/compass-card-image-4.png", alt: "Icon 1", additionalClasses: "object-cover w-full h-full" }) }), _jsx("div", { className: "w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden -ml-[20px]", children: _jsx(Image, { background: false, src: "../../../assets/compass-card-image-2.png", alt: "Icon 2", additionalClasses: "object-cover w-full h-full" }) }), _jsx(Text, { tag: "span", size: "text-sm", text: data.description, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "ml-4" })] }) }), _jsxs("div", { className: priceContainerClasses, children: [_jsx(Text, { tag: data.priceProps.tag, size: data.priceProps.size, text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(FormButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: buttonContainerClasses })] })] })] }));
+    return (_jsxs("div", { className: `${containerClasses} p-4`, children: [_jsx("div", { className: badgeContainerClasses, children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-md" }), type: "span", hoverColor: "", badgeContainerClasses: "text-slate-800", backgroundColor: "bg-slate-100" }) }), _jsx("div", { className: `relative ${imageContainerClasses}`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-full h-full object-contain" }) }), _jsxs("div", { className: titleContainerClasses, children: [_jsx("div", { className: "flex flex-col", children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: data.titleProps.additionalClasses }) }), _jsx("div", { className: descriptionContainerClasses, children: _jsxs("div", { className: "relative flex items-center gap-2", children: [_jsx("div", { className: "w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden z-10", children: _jsx(Image, { background: false, src: "../../../assets/compass-card-image-4.png", alt: "Icon 1", additionalClasses: "object-cover w-full h-full" }) }), _jsx("div", { className: "w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden -ml-[20px]", children: _jsx(Image, { background: false, src: "../../../assets/compass-card-image-2.png", alt: "Icon 2", additionalClasses: "object-cover w-full h-full" }) }), _jsx(Text, { tag: "span", size: "text-sm", text: data.description, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "ml-4" })] }) }), _jsxs("div", { className: priceContainerClasses, children: [_jsx(Text, { tag: data.priceProps.tag, size: data.priceProps.size, text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx(BaseButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, additionalClasses: buttonContainerClasses })] })] })] }));
 };
 export default VerticalCardTemplate;

package/dist/components/CounterButton/CounterButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import Text from "../Text/Text";
 const CounterButton = ({ count, containerClassName, inputClassName, buttonClassName, iconClasses, onIncrementClick, onDecrementClick, onInputChange, }) => {
-    return (_jsxs("div", { className: containerClassName, children: [_jsx(FormButton, { icon: _jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: iconClasses, children: _jsx("path", { d: "M11.0626 6.43135H0.937598C0.712598 6.43135 0.506348 6.24385 0.506348 6.0001C0.506348 5.7751 0.693848 5.56885 0.937598 5.56885H11.0626C11.2876 5.56885 11.4938 5.75635 11.4938 6.0001C11.4938 6.2251 11.2876 6.43135 11.0626 6.43135Z" }) }), text: _jsx(Text, { size: "", color: "", text: "Decrement", fontFamily: "", additionalClasses: "sr-only" }), backgroundColor: "clear", borderColor: "none", shape: "cornered", additionalClasses: buttonClassName, onClick: onDecrementClick }), _jsx("div", { className: `flex justify-center items-center border-x border-gray-300`, children: _jsx("input", { type: "text", value: count, className: inputClassName, onChange: onInputChange, onFocus: (e) => e.target.select() }) }), _jsx(FormButton, { icon: _jsxs("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: iconClasses, children: [_jsx("g", { clipPath: "url(#clip0_1032_24236)", children: _jsx("path", { d: "M11.2501 5.5876H6.43135V0.750098C6.43135 0.525098 6.24385 0.318848 6.0001 0.318848C5.7751 0.318848 5.56885 0.506348 5.56885 0.750098V5.5876H0.750098C0.525098 5.5876 0.318848 5.7751 0.318848 6.01885C0.318848 6.24385 0.506348 6.4501 0.750098 6.4501H5.5876V11.2501C5.5876 11.4751 5.7751 11.6813 6.01885 11.6813C6.24385 11.6813 6.4501 11.4938 6.4501 11.2501V6.43135H11.2501C11.4751 6.43135 11.6813 6.24385 11.6813 6.0001C11.6813 5.7751 11.4751 5.5876 11.2501 5.5876Z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1032_24236", children: _jsx("rect", { width: 12, height: 12, fill: "white" }) }) })] }), text: _jsx(Text, { size: "", color: "", text: "Increment", fontFamily: "", additionalClasses: "sr-only" }), backgroundColor: "clear", borderColor: "none", shape: "cornered", additionalClasses: buttonClassName, onClick: onIncrementClick })] }));
+    return (_jsxs("div", { className: containerClassName, children: [_jsx(BaseButton, { icon: _jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: iconClasses, children: _jsx("path", { d: "M11.0626 6.43135H0.937598C0.712598 6.43135 0.506348 6.24385 0.506348 6.0001C0.506348 5.7751 0.693848 5.56885 0.937598 5.56885H11.0626C11.2876 5.56885 11.4938 5.75635 11.4938 6.0001C11.4938 6.2251 11.2876 6.43135 11.0626 6.43135Z" }) }), text: _jsx(Text, { size: "", color: "", text: "Decrement", fontFamily: "", additionalClasses: "sr-only" }), backgroundColor: "clear", borderColor: "none", shape: "cornered", additionalClasses: buttonClassName, onClick: onDecrementClick }), _jsx("div", { className: `flex justify-center items-center border-x border-gray-300`, children: _jsx("input", { type: "text", value: count, className: inputClassName, onChange: onInputChange, onFocus: (e) => e.target.select() }) }), _jsx(BaseButton, { icon: _jsxs("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: iconClasses, children: [_jsx("g", { clipPath: "url(#clip0_1032_24236)", children: _jsx("path", { d: "M11.2501 5.5876H6.43135V0.750098C6.43135 0.525098 6.24385 0.318848 6.0001 0.318848C5.7751 0.318848 5.56885 0.506348 5.56885 0.750098V5.5876H0.750098C0.525098 5.5876 0.318848 5.7751 0.318848 6.01885C0.318848 6.24385 0.506348 6.4501 0.750098 6.4501H5.5876V11.2501C5.5876 11.4751 5.7751 11.6813 6.01885 11.6813C6.24385 11.6813 6.4501 11.4938 6.4501 11.2501V6.43135H11.2501C11.4751 6.43135 11.6813 6.24385 11.6813 6.0001C11.6813 5.7751 11.4751 5.5876 11.2501 5.5876Z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1032_24236", children: _jsx("rect", { width: 12, height: 12, fill: "white" }) }) })] }), text: _jsx(Text, { size: "", color: "", text: "Increment", fontFamily: "", additionalClasses: "sr-only" }), backgroundColor: "clear", borderColor: "none", shape: "cornered", additionalClasses: buttonClassName, onClick: onIncrementClick })] }));
 };
 export default CounterButton;

package/dist/components/GetSupport/GetSupport.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import Text from "../Text/Text";
 const GetSupport = ({ as, to, icon, iconClasses, title, titleClasses, subTitle, subTitleClasses, containerClasses, }) => {
-    return (_jsx(FormButton, { as: as, to: to, text: _jsxs("div", { className: `flex  items-center gap-4 ${containerClasses}`, children: [_jsx("div", { className: `flex items-center justify-center ${iconClasses}`, children: icon }), _jsxs("div", { className: "flex flex-col", children: [_jsx(Text, { size: "text-md", color: "text-black", text: title, fontFamily: "font-serif", tag: "p", additionalClasses: titleClasses }), subTitle && (_jsx(Text, { size: "text-md", color: "text-black", text: subTitle, fontFamily: "font-serif", tag: "p", additionalClasses: subTitleClasses }))] })] }), backgroundColor: "bg-transparent", borderColor: "border-none", shape: "rounded-md", additionalClasses: containerClasses }));
+    return (_jsx(BaseButton, { as: as, to: to, text: _jsxs("div", { className: `flex  items-center gap-4 ${containerClasses}`, children: [_jsx("div", { className: `flex items-center justify-center ${iconClasses}`, children: icon }), _jsxs("div", { className: "flex flex-col", children: [_jsx(Text, { size: "text-md", color: "text-black", text: title, fontFamily: "font-serif", tag: "p", additionalClasses: titleClasses }), subTitle && (_jsx(Text, { size: "text-md", color: "text-black", text: subTitle, fontFamily: "font-serif", tag: "p", additionalClasses: subTitleClasses }))] })] }), backgroundColor: "bg-transparent", borderColor: "border-none", shape: "rounded-md", additionalClasses: containerClasses }));
 };
 export default GetSupport;

package/dist/components/Header/Header.stories.js

@@ -5,7 +5,7 @@ import Image from "../Image/Image";
 import Badge from "../Badge/Badge";
 import Text from "../Text/Text";
 import Input from "../Input/Input";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import { DUMMYCOMPASSNAVDATA, DUMMYNAVDATA } from "../Nav/DUMMYNAVDATA.json";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 export default {
@@ -131,7 +131,7 @@ Default.args = {
     ),
     badge: (_jsx(Badge, { type: "href", to: "#", hoverColor: "blue", borderColor: "none", mobileIcon: getFontAwesomeIcon("square-phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) })),
     nav: (_jsx(Nav, { navData: DUMMYNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "blue", parentHoverFontColor: "white", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "cornered", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "blue", submenuHoverBackground: "white", submenuHoverBorderStyle: "bottom", submenuHoverBorderColor: "black", mobileBreakpoint: "extraLarge", accordionParentStyle: "cornered p-2 w-full border-b-2 border-b-blue-700 text-black", accordionExpandedStyle: "pl-2 py-3" })),
-    input: (_jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", hasPlaceholder: true, placeholder: "Search", borderColor: "gray", hasButton: true, backgroundColor: "white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "blue", hoverBackground: "black", hoverFontColor: "white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" })),
+    input: (_jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", hasPlaceholder: true, placeholder: "Search", borderColor: "gray", hasButton: true, backgroundColor: "white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "blue", hoverBackground: "black", hoverFontColor: "white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" })),
     logoBorderRadius: true,
     logoHoverColor: "blue",
     hasIcons: false,
@@ -188,7 +188,7 @@ Compass.args = {
     badge: (_jsx(Badge, { type: "href", to: "#", hoverColor: "green", borderColor: "none", mobileIcon: getFontAwesomeIcon("square-phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-teal-700", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-teal-700", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) })),
     logo: (_jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" })),
     nav: (_jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "cornered", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "white", submenuHoverBackground: "green", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "green", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "cornered p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" })),
-    input: (_jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "gray", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "green", hoverBackground: "black", hoverFontColor: "white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" })),
+    input: (_jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "gray", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "green", hoverBackground: "black", hoverFontColor: "white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" })),
 };
 export const NoSearchOrBadge = Template.bind({});
 NoSearchOrBadge.args = {

package/dist/components/ImageContainer/ImageContainer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ImageContainerProps } from "./ImageContainer.types";
+declare const ImageContainer: React.FC<ImageContainerProps>;
+export default ImageContainer;

package/dist/components/ImageContainer/ImageContainer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageContainer = (props) => {
+    const { imageUrl, backgroundColor, borderRadius, size, alternativeText, userInitials, additionalClasses, } = props;
+    console.log(`${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, "in component ");
+    return (_jsx("div", { className: `${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: alternativeText, className: `${size}` })) : (_jsx("p", { className: `text-xs text-white w-full h-full flex justify-center items-center `, children: userInitials || "N/A" })) }));
+};
+export default ImageContainer;

package/dist/components/ImageContainer/ImageContainer.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const ProfileIcon: any;
+export declare const WithoutImage: any;

package/dist/components/ImageContainer/ImageContainer.stories.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ImageContainer from "./ImageContainer";
+export default {
+    title: "Components/ImageContainer",
+    component: ImageContainer,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        imageUrl: {
+            control: "none",
+            description: "Image url of the image.",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "Background color if the image is not present.",
+        },
+        borderRadius: {
+            control: "none",
+            description: "Styles for the content.",
+        },
+        size: {
+            control: "none",
+            description: "Size of the container.",
+        },
+        profileIcon: {
+            control: "none",
+            description: "Profile icon image.",
+        },
+        alternativeText: {
+            control: "none",
+            description: "Alternative text for the image.",
+        },
+        userInitials: {
+            control: "none",
+            description: "User initials if there is no image.",
+        },
+        additionalClasses: {
+            control: "none",
+            description: "Additional styling classes of the image container.",
+        },
+    },
+};
+const Template = (args) => (_jsx(ImageContainer, { ...args }));
+export const Default = Template.bind({});
+Default.args = {
+    imageUrl: "data:image/jpeg;base64,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",
+    borderRadius: "rounded-md",
+    size: "size-80",
+    alternativeText: "image",
+};
+export const ProfileIcon = Template.bind({});
+ProfileIcon.args = {
+    imageUrl: "https://img.freepik.com/premium-vector/avatar-profile-icon-flat-style-female-user-profile-vector-illustration-isolated-background-women-profile-sign-business-concept_157943-38866.jpg",
+    borderRadius: "rounded-full",
+    size: "h-[75px] w-[75px]",
+    alternativeText: "profile image",
+};
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+    imageUrl: "",
+    borderRadius: "rounded-full",
+    size: "h-14 w-14",
+    alternativeText: "",
+    userInitials: "AS",
+    backgroundColor: "bg-gray-500",
+};

package/dist/components/ImageContainer/ImageContainer.test.d.ts

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

package/dist/components/ImageContainer/ImageContainer.test.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import ImageContainer from "./ImageContainer";
+describe("ImageContainer Component", () => {
+    const testUrl = "https://via.placeholder.com/150";
+    it("renders an image when a valid imageUrl is provided", () => {
+        const { getByAltText } = render(_jsx(ImageContainer, { imageUrl: testUrl, borderRadius: "rounded-md", size: "size-80", alternativeText: "image" }));
+        const image = getByAltText("image");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("src", testUrl);
+    });
+    it("renders fallback text when no imageUrl is provided", () => {
+        const { getByText } = render(_jsx(ImageContainer, { imageUrl: "", userInitials: "AB" }));
+        const userInitials = getByText("AB");
+        expect(userInitials).toBeInTheDocument();
+    });
+    it("applies rounded-full class when borderRadius is rounded-full", () => {
+        const { container, getByAltText } = render(_jsx(ImageContainer, { imageUrl: testUrl, alternativeText: "Profile icon", borderRadius: "rounded-full" }));
+        const imageElement = container.querySelector("div");
+        expect(imageElement).toHaveClass("rounded-full");
+    });
+});

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

@@ -0,0 +1,9 @@
+export interface ImageContainerProps {
+    imageUrl?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    size?: string;
+    alternativeText?: string;
+    userInitials?: string;
+    additionalClasses?: string;
+}

package/dist/components/ImageContainer/ImageContainer.types.js

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

package/dist/components/Input/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import { validateInput } from "../../utils/inputValidation";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const Input = ({ 
@@ -17,7 +17,7 @@ hasLeftIcon, hasRightIcon, leftIcon, rightIcon, iconColor = "text-gray-500", ico
 // INPUT STYLES
 inputTextSize = "text-base", inputShape = "rounded-md", borderColor = "border-gray-300", backgroundColor = "bg-white", inputWidth = "w-full", errorBorder = "border-red-500", successBorder = "border-green-500", 
 // BUTTON
-hasButton, button = (_jsx(FormButton, { text: "Submit", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-red-500", icon: getFontAwesomeIcon("arrow-right"), borderColor: "border-green-500", hoverFontColor: "hover:text-black", shape: "rounded-none", additionalClasses: "h-full" })), }) => {
+hasButton, button = (_jsx(BaseButton, { text: "Submit", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-red-500", icon: getFontAwesomeIcon("arrow-right"), borderColor: "border-green-500", hoverFontColor: "hover:text-black", shape: "rounded-none", additionalClasses: "h-full" })), }) => {
     const [isValid, setIsValid] = useState("");
     const [termInternal, setTermInternal] = useState("");
     const [inputBorderClasses, setInputBorderClasses] = useState(borderColor);

package/dist/components/Input/Input.stories.js

@@ -4,7 +4,7 @@ import Text from "../Text/Text";
 import { minCharactersRegex } from "../../utils/inputValidation";
 import { withMemo } from "../../userHoc";
 import { arePropsEqual } from "./InputMemoTypes";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const MemoizedInput = withMemo(Input, arePropsEqual);
 export default {
@@ -191,7 +191,7 @@ NoIcons.args = {
     leftIcon: getFontAwesomeIcon("search"),
     rightIcon: getFontAwesomeIcon("arrow-right"),
     hasButton: true,
-    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+    button: (_jsx(BaseButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
     inputTextSize: "text-md",
     inputWidth: "w-96",
     inputShape: "rounded",
@@ -275,7 +275,7 @@ ButtonWithValidation.args = {
     hasRightIcon: false,
     hasLeftIcon: false,
     hasButton: true,
-    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+    button: (_jsx(BaseButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
 };
 export const ButtonWithLeftIcon = Template.bind({});
 ButtonWithLeftIcon.args = {
@@ -294,7 +294,7 @@ ButtonWithLeftIcon.args = {
     leftIcon: getFontAwesomeIcon("search"),
     iconBackgroundColor: "none",
     hasButton: true,
-    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+    button: (_jsx(BaseButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
 };
 export const DateInput = Template.bind({});
 DateInput.args = {

package/dist/components/Input/Input.test.js

@@ -4,7 +4,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, test, expect, beforeEach } from "vitest";
 import Input from "./Input";
 import Text from "../Text/Text";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 describe("<Input /> with all props", () => {
     beforeEach(() => {
@@ -20,7 +20,7 @@ describe("<Input /> with all props", () => {
             // INPUT STYLES
             inputTextSize: "medium", inputShape: "cornered", borderColor: "green", backgroundColor: "none", inputWidth: "w-96", 
             // BUTTON
-            hasButton: true, button: _jsx(FormButton, { text: "Submit", as: "button", hoverBackground: "green", backgroundColor: "green", icon: getFontAwesomeIcon("arrow-right"), additionalClasses: "items-center px-4", borderColor: "green", hoverFontColor: "black", shape: "cornered" }) }));
+            hasButton: true, button: _jsx(BaseButton, { text: "Submit", as: "button", hoverBackground: "green", backgroundColor: "green", icon: getFontAwesomeIcon("arrow-right"), additionalClasses: "items-center px-4", borderColor: "green", hoverFontColor: "black", shape: "cornered" }) }));
     });
     test("renders Input component", () => {
         expect(screen.getByTestId("input-container")).toBeInTheDocument();

package/dist/components/Page/ViewPageTemplate.stories.js

@@ -8,7 +8,7 @@ import Image from "../Image/Image";
 import Input from "../Input/Input";
 import Nav from "../Nav/Nav";
 import Card from "../Card/Card";
-import FormButton from "../FormButton";
+import BaseButton from "../BaseButton";
 import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
 import ViewTemplatePage from "./ViewPageTemplate";
 import Footer from "../Footer/Footer";
@@ -45,7 +45,7 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
     children: [
         //the div acts as a spacer for the header because the header is fixed
         _jsx("div", { className: "h-16" }, "spacer"),
-        _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, logoBorderRadius: true, logoHoverColor: "hover:bg-blue-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-black", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-blue-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, hasAnimatedHamburgerButton: true, icons: _jsx(_Fragment, {}), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-blue-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-blue-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-blue-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-blue-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-blue-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }, "header"),
+        _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, logoBorderRadius: true, logoHoverColor: "hover:bg-blue-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-black", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-blue-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, hasAnimatedHamburgerButton: true, icons: _jsx(_Fragment, {}), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-blue-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-blue-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-blue-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-blue-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-blue-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }, "header"),
         _jsx(Hero, { textAlignment: "center", background: "image" }, "hero"),
         _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "unordered", hasVirtualization: false, containerClasses: "w-full h-[100%] grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"),
     ],
@@ -68,6 +68,6 @@ ViewWithTableAndTitle.args = {
 export const CompassPageView = Template.bind({});
 CompassPageView.args = {
     children: [
-        _jsxs("div", { children: [_jsx("div", { className: "h-16" }), _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, icons: _jsx(_Fragment, {}), hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, hasAnimatedHamburgerButton: true, logoBorderRadius: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-green-500", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-green-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-green-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-green-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-green-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-green-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }), _jsx(Hero, { textAlignment: "left", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "text-2xl", color: "text-white", fontFamily: "font-serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "w-3/4 max-sm:text-xl max-sm:w-3/4" }) }, "hero"), _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n      justify-center items-center h-[100%]", children: _jsx(Text, { size: "text-2xl", color: "text-black", fontFamily: "font-serif", text: "Kits", tag: "h2", additionalClasses: "my-4  max-sm:text-xl" }) }, "pageSection"), _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, hasVirtualization: false, listType: "unordered", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"), _jsxs(PageSection, { sectionContainerClasses: "flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col", children: [_jsx(Text, { size: "text-xl", color: "text-black", fontFamily: "font-serif", text: "Help us improve your experience:", tag: "h2", additionalClasses: "p-6 max-sm:p-2 max-sm:text-lg" }), _jsx(FormButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), backgroundColor: "bg-green-500", shape: "rounded", borderColor: "border-none", hoverBackground: "hover:bg-green-500", hoverFontColor: "hover:text-green-500", hoverBorderColor: "hover:border-green-500", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }), _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "text-xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2" }), slogan: _jsx(Text, { size: "text-md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "text-black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "text-black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "text-black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-green-500", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" })] }, "randomNumberOne"),
+        _jsxs("div", { children: [_jsx("div", { className: "h-16" }), _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, icons: _jsx(_Fragment, {}), hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, hasAnimatedHamburgerButton: true, logoBorderRadius: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-green-500", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-green-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-green-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-green-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-green-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-green-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }), _jsx(Hero, { textAlignment: "left", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "text-2xl", color: "text-white", fontFamily: "font-serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "w-3/4 max-sm:text-xl max-sm:w-3/4" }) }, "hero"), _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n      justify-center items-center h-[100%]", children: _jsx(Text, { size: "text-2xl", color: "text-black", fontFamily: "font-serif", text: "Kits", tag: "h2", additionalClasses: "my-4  max-sm:text-xl" }) }, "pageSection"), _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, hasVirtualization: false, listType: "unordered", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"), _jsxs(PageSection, { sectionContainerClasses: "flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col", children: [_jsx(Text, { size: "text-xl", color: "text-black", fontFamily: "font-serif", text: "Help us improve your experience:", tag: "h2", additionalClasses: "p-6 max-sm:p-2 max-sm:text-lg" }), _jsx(BaseButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), backgroundColor: "bg-green-500", shape: "rounded", borderColor: "border-none", hoverBackground: "hover:bg-green-500", hoverFontColor: "hover:text-green-500", hoverBorderColor: "hover:border-green-500", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }), _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "text-xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2" }), slogan: _jsx(Text, { size: "text-md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "text-black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "text-black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "text-black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-green-500", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" })] }, "randomNumberOne"),
     ],
 };

package/dist/components/Page/ViewPageTemplate.test.js

@@ -9,7 +9,7 @@ import Text from "../Text/Text";
 import Image from "../Image/Image";
 import Nav from "../Nav/Nav";
 import Card from "../Card/Card";
-import FormButton from "../FormButton";
+import BaseButton from "../BaseButton";
 import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
 import Footer from "../Footer/Footer";
 import { DUMMYICONCOMPASSDATA } from "../Header/DUMMYICONDATA.json";
@@ -38,7 +38,7 @@ describe("<ViewTemplatePage />", () => {
 });
 describe("<ViewTemplatePage />", () => {
     beforeEach(() => {
-        render(_jsxs(ViewTemplatePage, { children: ["children: [ ", _jsx("div", { className: "h-16" }), ",", _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { hasIcons: true, iconsData: DUMMYICONCOMPASSDATA, logoBorderRadius: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, logoHoverColor: "green", backgroundColor: "gray", bottomBorderColor: "green", badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "green", borderColor: "none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", color: "primary", fontFamily: "serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "xs", color: "primary", fontFamily: "serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "cornered", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "white", submenuHoverBackground: "green", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "green", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "cornered p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }) }) }), ",", _jsx(Hero, { textAlignment: "right", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "xxxl", color: "white", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "text-left w-3/4 max-xl:text-xl max-lg:text-xl max-md:hidden" }) }, "hero"), ",", _jsx("div", { "data-testid": "kits-header-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\t\tjustify-center items-center h-[100%]", children: _jsx(Text, { size: "xxxl", color: "black", fontFamily: "serif", text: "Kits", tag: "h2", additionalClasses: "my-8" }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "kits-cards-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\tjustify-center items-center h-[100%]", children: _jsx(_Fragment, { children: _jsx("div", { className: "w-3/4 grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) }) }) }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "survey-section", children: _jsxs(PageSection, { sectionContainerClasses: "w-full bg-yellow-400 flex p-6\n\t\t\t\tjustify-center items-center h-[100%] mt-6", children: [_jsx(Text, { size: "xl", color: "black", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "mr-8" }), _jsx(FormButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), shape: "semiRounded", borderColor: "none", hoverBackground: "green", hoverFontColor: "green", hoverBorderColor: "green", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }) }), ",", _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2 max-md:text-sm" }), slogan: _jsx(Text, { size: "md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "green", backgroundColor: "green", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" }), ", ]"] }));
+        render(_jsxs(ViewTemplatePage, { children: ["children: [ ", _jsx("div", { className: "h-16" }), ",", _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { hasIcons: true, iconsData: DUMMYICONCOMPASSDATA, logoBorderRadius: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, logoHoverColor: "green", backgroundColor: "gray", bottomBorderColor: "green", badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "green", borderColor: "none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", color: "primary", fontFamily: "serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "xs", color: "primary", fontFamily: "serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "cornered", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "white", submenuHoverBackground: "green", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "green", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "cornered p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }) }) }), ",", _jsx(Hero, { textAlignment: "right", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "xxxl", color: "white", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "text-left w-3/4 max-xl:text-xl max-lg:text-xl max-md:hidden" }) }, "hero"), ",", _jsx("div", { "data-testid": "kits-header-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\t\tjustify-center items-center h-[100%]", children: _jsx(Text, { size: "xxxl", color: "black", fontFamily: "serif", text: "Kits", tag: "h2", additionalClasses: "my-8" }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "kits-cards-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\tjustify-center items-center h-[100%]", children: _jsx(_Fragment, { children: _jsx("div", { className: "w-3/4 grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) }) }) }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "survey-section", children: _jsxs(PageSection, { sectionContainerClasses: "w-full bg-yellow-400 flex p-6\n\t\t\t\tjustify-center items-center h-[100%] mt-6", children: [_jsx(Text, { size: "xl", color: "black", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "mr-8" }), _jsx(BaseButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), shape: "semiRounded", borderColor: "none", hoverBackground: "green", hoverFontColor: "green", hoverBorderColor: "green", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }) }), ",", _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2 max-md:text-sm" }), slogan: _jsx(Text, { size: "md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "green", backgroundColor: "green", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" }), ", ]"] }));
     });
     test("renders header on page", () => {
         const header = screen.getByTestId("header");

package/dist/components/PageSection/PageSection.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { PageSectionTypes } from ".";
+import { PageSectionTypes } from "./PageSection.types";
 declare const Section: React.FC<PageSectionTypes>;
 export default Section;

package/dist/components/PageSection/PageSection.stories.js

@@ -26,16 +26,16 @@ export default {
 const Template = (args) => _jsx(Section, { ...args });
 export const Default = Template.bind({});
 Default.args = {
-    sectionContainerClasses: " flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4",
+    sectionContainerClasses: " flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-6  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-6",
     children: (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] })),
 };
 export const HorizontalCardsSection = Template.bind({});
 HorizontalCardsSection.args = {
     sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center",
-    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] })),
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] })),
 };
 export const CompassCardsSection = Template.bind({});
 CompassCardsSection.args = {
     sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center h-[100%]",
-    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 h-full max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) })] })),
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with compass cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 h-full max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) })] })),
 };

package/dist/components/PageSection/PageSections.test.js

@@ -6,8 +6,9 @@ import Text from "../Text/Text";
 import Card from "../Card/Card";
 import GenericList from "../GenericList/GenericList";
 import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
-import { DUMMYCOMPASSPRODUCTDATA } from "../../components/Card/DUMMYPRODUCTDATA.json";
-describe("<Section />", () => {
+import { DUMMYPRODUCTDATA, DUMMYCOMPASSPRODUCTDATA, } from "../../components/Card/DUMMYPRODUCTDATA.json";
+import HorizontalCardTemplate from "../Card/templates/HorizontalCardTemplate";
+describe("Section Component(<Section />)", () => {
     beforeEach(() => {
         render(_jsx(Section, { sectionContainerClasses: "flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] }) }));
     });
@@ -20,12 +21,21 @@ describe("<Section />", () => {
         expect(section).toHaveClass("flex-row");
     });
 });
+describe("<Section /> with horizontal cards", () => {
+    it("displays correct cards", () => {
+        render(_jsx(Section, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center", children: _jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] }) }));
+        const cards = screen.queryAllByTestId("card");
+        expect(cards.length).toBe(6);
+        const cardTitles = screen.getAllByText("Crothall iPads - Environmental Services");
+        expect(cardTitles).toHaveLength(2);
+    });
+});
 describe("<Section /> with compass cards", () => {
     it("displays correct cards", () => {
         render(_jsx(Section, { sectionContainerClasses: "flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page max-h-fit  min-h-fit overflow-scroll px-4", children: _jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx("div", { className: "grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) })) }) })] }) }));
         const cards = screen.queryAllByTestId("card");
         expect(cards.length).toBe(16);
-        expect(cards[0]).toHaveTextContent("Compass Sales Lenovo TP X13 Yoga G3 Laptop");
+        expect(cards[0]).toHaveTextContent("Environmental Services - Lenovo ThinkPad Universal USB-C Dock");
         expect(cards[3]).toHaveTextContent("Exec RoadWarrior");
     });
 });

package/dist/components/SearchInput/SearchInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 const SearchInput = ({ label, inputName, inputType, hasPlaceholder, placeholder, inputTextSize, inputShape, backgroundColor, inputWidth, inputBorderClasses, buttonClasses, buttonText, buttonIcon, buttonIconClasses, containerClasses, onButtonClick, role, ariaLabel, }) => {
     const [inputValue, setInputValue] = useState("");
     const handleInputChange = (e) => {
@@ -12,6 +12,6 @@ const SearchInput = ({ label, inputName, inputType, hasPlaceholder, placeholder,
             onButtonClick(inputValue);
         }
     };
-    return (_jsx("div", { className: containerClasses, role: role, "aria-label": ariaLabel, children: _jsxs("form", { className: "w-full", children: [_jsx("label", { htmlFor: inputName, className: `sr-only`, children: label }), _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex w-full", children: [_jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, value: inputValue, onChange: handleInputChange, className: `flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}` }), _jsx("div", { className: `flex items-center justify-center h-full`, children: _jsx(FormButton, { text: buttonText, icon: buttonIcon, iconClasses: buttonIconClasses, as: "button", additionalClasses: buttonClasses, onClick: handleButtonClick }) })] }) })] }) }));
+    return (_jsx("div", { className: containerClasses, role: role, "aria-label": ariaLabel, children: _jsxs("form", { className: "w-full", children: [_jsx("label", { htmlFor: inputName, className: `sr-only`, children: label }), _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex w-full", children: [_jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, value: inputValue, onChange: handleInputChange, className: `flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}` }), _jsx("div", { className: `flex items-center justify-center h-full`, children: _jsx(BaseButton, { text: buttonText, icon: buttonIcon, iconClasses: buttonIconClasses, as: "button", additionalClasses: buttonClasses, onClick: handleButtonClick }) })] }) })] }) }));
 };
 export default SearchInput;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.22",
+	"version": "1.0.24",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",

package/dist/main.css

@@ -1 +0,0 @@
-/*! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-2{right:-.5rem}.-right-4{right:-1rem}.-top-1{top:-.25rem}.bottom-1{bottom:.25rem}.left-1{left:.25rem}.left-2{left:.5rem}.left-3{left:.75rem}.right-0{right:0}.right-1{right:.25rem}.top-0{top:0}.top-1{top:.25rem}.top-16{top:4rem}.top-2{top:.5rem}.top-3{top:.75rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[1000\]{z-index:1000}.order-first{order:-9999}.col-span-6{grid-column:span 6/span 6}.m-0{margin:0}.m-2{margin:.5rem}.m-4{margin:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-20{margin-top:5rem;margin-bottom:5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-auto{margin-top:auto;margin-bottom:auto}.-ml-\[20px\]{margin-left:-20px}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.mr-2{margin-right:.5rem}.mr-8{margin-right:2rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-18px{height:18px}.h-2{height:.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-36{height:9rem}.h-4{height:1rem}.h-42px{height:42px}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-\[100\%\]{height:100%}.h-\[100px\]{height:100px}.h-\[30px\]{height:30px}.h-\[32px\]{height:32px}.h-\[80px\]{height:80px}.h-\[fit-content\]{height:-moz-fit-content;height:fit-content}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-0{max-height:0}.max-h-60{max-height:15rem}.max-h-96{max-height:24rem}.max-h-\[300px\]{max-height:300px}.max-h-fit{max-height:-moz-fit-content;max-height:fit-content}.max-h-full{max-height:100%}.min-h-20{min-height:5rem}.min-h-72{min-height:18rem}.min-h-96{min-height:24rem}.min-h-fit{min-height:-moz-fit-content;min-height:fit-content}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-18px{width:18px}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-24{width:6rem}.w-26px{width:26px}.w-3{width:.75rem}.w-3\/4{width:75%}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-42px{width:42px}.w-48{width:12rem}.w-6{width:1.5rem}.w-60{width:15rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[10\%\]{width:10%}.w-\[100px\]{width:100px}.w-\[200px\]{width:200px}.w-\[30px\]{width:30px}.w-\[344px\]{width:344px}.w-\[40rem\]{width:40rem}.w-\[80px\]{width:80px}.w-\[fit-content\]{width:-moz-fit-content;width:fit-content}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\[120px\]{min-width:120px}.min-w-\[200px\]{min-width:200px}.min-w-full{min-width:100%}.min-w-navDropDown{min-width:25em}.max-w-72{max-width:18rem}.max-w-\[320px\]{max-width:320px}.max-w-\[408px\]{max-width:408px}.max-w-lg{max-width:32rem}.max-w-pageSectionMaxWidth{max-width:1500px}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-items-center{justify-items:center}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[4px\]{gap:4px}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-12{row-gap:3rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-scroll{overflow-x:scroll}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-x{border-left-width:1px;border-right-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-none{border-style:none}.border-\[\#00B9A8\]{--tw-border-opacity:1;border-color:rgb(0 185 168/var(--tw-border-opacity))}.border-\[\#DFE4EA\]{--tw-border-opacity:1;border-color:rgb(223 228 234/var(--tw-border-opacity))}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.border-orange-500{--tw-border-opacity:1;border-color:rgb(249 115 22/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-slate-50{--tw-border-opacity:1;border-color:rgb(248 250 252/var(--tw-border-opacity))}.border-teal-500{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-b-blue-700{--tw-border-opacity:1;border-bottom-color:rgb(29 78 216/var(--tw-border-opacity))}.border-b-teal-700{--tw-border-opacity:1;border-bottom-color:rgb(15 118 110/var(--tw-border-opacity))}.bg-\[\#9ca3af\]{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-\[\#DAF8E6\]{--tw-bg-opacity:1;background-color:rgb(218 248 230/var(--tw-bg-opacity))}.bg-\[\#DBEAFE\]{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-800{--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity))}.bg-teal-700{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-none{background-image:none}.from-cyan-700{--tw-gradient-from:#0e7490 var(--tw-gradient-from-position);--tw-gradient-to:#0e749000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-900{--tw-gradient-to:#1e3a8a var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentColor}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[8px\]{padding-left:8px;padding-right:8px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-\[4px\]{padding-top:4px;padding-bottom:4px}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace}.font-sans{font-family:ui-sans-serif}.font-serif{font-family:ui-serif}.text-11px{font-size:11px}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl,.text-4xl{font-size:2.25rem}.text-4xl{line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[18px\]{line-height:18px}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity))}.text-teal-700{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[max-height\]{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-150{transition-delay:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-2:hover{border-width:2px}.hover\:border-none:hover{border-style:none}.hover\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:border-blue-700:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.hover\:border-green-500:hover{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.hover\:border-green-900:hover{--tw-border-opacity:1;border-color:rgb(20 83 45/var(--tw-border-opacity))}.hover\:border-red-700:hover{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.hover\:border-teal-500:hover{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity))}.hover\:border-teal-600:hover{--tw-border-opacity:1;border-color:rgb(13 148 136/var(--tw-border-opacity))}.hover\:bg-\[\#FFEBEE\]:hover{--tw-bg-opacity:1;background-color:rgb(255 235 238/var(--tw-bg-opacity))}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity))}.hover\:bg-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity))}.hover\:bg-teal-800:hover{--tw-bg-opacity:1;background-color:rgb(17 94 89/var(--tw-bg-opacity))}.hover\:bg-none:hover{background-image:none}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-inner:hover{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.group:hover .group-hover\:bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.group:hover .group-hover\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.group:hover .group-hover\:text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}@media not all and (min-width:1280px){.max-xl\:flex{display:flex}.max-xl\:hidden{display:none}.max-xl\:justify-end{justify-content:flex-end}.max-xl\:gap-1{gap:.25rem}.max-xl\:gap-10{gap:2.5rem}.max-xl\:px-2{padding-left:.5rem;padding-right:.5rem}.max-xl\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media not all and (min-width:1024px){.max-lg\:flex{display:flex}.max-lg\:w-full{width:100%}.max-lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.max-lg\:flex-col{flex-direction:column}.max-lg\:justify-between{justify-content:space-between}.max-lg\:justify-items-center{justify-items:center}.max-lg\:gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.max-lg\:gap-y-12{row-gap:3rem}.max-lg\:gap-y-24{row-gap:6rem}.max-lg\:text-xl{font-size:1.25rem;line-height:1.75rem}.max-lg\:transition-none{transition-property:none}.max-lg\:hover\:transform-none:hover{transform:none}}@media not all and (min-width:768px){.max-md\:flex{display:flex}.max-md\:hidden{display:none}.max-md\:gap-12{gap:3rem}.max-md\:p-0{padding:0}.max-md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media not all and (min-width:640px){.max-sm\:mb-1{margin-bottom:.25rem}.max-sm\:mb-2{margin-bottom:.5rem}.max-sm\:flex{display:flex}.max-sm\:hidden{display:none}.max-sm\:w-1\/2{width:50%}.max-sm\:w-3\/4{width:75%}.max-sm\:w-\[90\%\]{width:90%}.max-sm\:w-full{width:100%}.max-sm\:flex-row{flex-direction:row}.max-sm\:flex-col{flex-direction:column}.max-sm\:items-end{align-items:flex-end}.max-sm\:justify-between{justify-content:space-between}.max-sm\:gap-8{gap:2rem}.max-sm\:p-2{padding:.5rem}.max-sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.max-sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.max-sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:640px){.sm\:static{position:static}.sm\:left-5{left:1.25rem}.sm\:top-5{top:1.25rem}.sm\:m-20{margin:5rem}.sm\:m-5{margin:1.25rem}.sm\:mb-0{margin-bottom:0}.sm\:mb-2{margin-bottom:.5rem}.sm\:mb-4{margin-bottom:1rem}.sm\:mb-5{margin-bottom:1.25rem}.sm\:ml-5{margin-left:1.25rem}.sm\:mt-0{margin-top:0}.sm\:mt-20{margin-top:5rem}.sm\:mt-4{margin-top:1rem}.sm\:mt-auto{margin-top:auto}.sm\:h-20{height:5rem}.sm\:h-64{height:16rem}.sm\:h-8{height:2rem}.sm\:h-\[100px\]{height:100px}.sm\:h-\[120px\]{height:120px}.sm\:h-\[255px\]{height:255px}.sm\:h-\[300px\]{height:300px}.sm\:h-\[350px\]{height:350px}.sm\:h-\[40px\]{height:40px}.sm\:h-\[500px\]{height:500px}.sm\:h-auto{height:auto}.sm\:w-24{width:6rem}.sm\:w-8{width:2rem}.sm\:w-\[100px\]{width:100px}.sm\:w-\[120px\]{width:120px}.sm\:w-\[244px\]{width:244px}.sm\:w-\[300px\]{width:300px}.sm\:w-auto{width:auto}.sm\:min-w-\[150px\]{min-width:150px}.sm\:max-w-\[408px\]{max-width:408px}.sm\:max-w-full{max-width:100%}.sm\:flex-row{flex-direction:row}.sm\:p-3{padding:.75rem}.sm\:p-4{padding:1rem}.sm\:p-6{padding:1.5rem}.sm\:px-3{padding-left:.75rem;padding-right:.75rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-\[14px\]{padding-left:14px;padding-right:14px}.sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}.sm\:py-\[8px\]{padding-top:8px;padding-bottom:8px}.sm\:pb-5{padding-bottom:1.25rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:p-8{padding:2rem}.md\:text-3xl{font-size:2.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:max-h-view-page{max-height:1000px}.lg\:gap-10{gap:2.5rem}.lg\:p-10{padding:2.5rem}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1536px){.\32xl\:flex{display:flex}}.rtl\:space-x-reverse:where([dir=rtl],[dir=rtl] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.\[\&\:has\(\:focus-visible\)\]\:ring-2:has(:focus-visible){--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}