@agilant/toga-blox 1.0.28 → 1.0.30

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,57 @@
+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 { 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", () => {
+        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,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageContainer = (props) => {
+    const { imageUrl, backgroundColor, borderRadius, size, alternativeText, userInitials, additionalClasses, style, imageClasses, } = props;
+    return (_jsx("div", { style: style, className: `${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: alternativeText, className: `${imageClasses}` })) : (_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,7 @@
+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;
+export declare const WithInlineBackgroundColor: any;