@agilant/toga-blox 1.0.26 → 1.0.28

package/dist/components/Card/DUMMYPRODUCTDATA.json

@@ -387,8 +387,7 @@
     ],
     "DUMMYCOMPASSPRODUCTDATA": [
         {
-            "id": "1",
-            "title": " Environmental Services - Lenovo ThinkPad Universal USB-C Dock",
+            "id": "1 - 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 BaseButton from "../../BaseButton";
+import FormButton from "../../FormButton";
 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(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 })) })] })] }));
+    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 })) })] })] }));
 };
 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 BaseButton from "../../BaseButton/BaseButton";
+import FormButton from "../../FormButton/FormButton";
 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`, "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
+    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
                                             ? 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(BaseButton, { 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(FormButton, { 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 BaseButton from "../../BaseButton/BaseButton";
+import FormButton from "../../FormButton/FormButton";
 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(BaseButton, { 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(FormButton, { 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 BaseButton from "../../BaseButton/BaseButton";
+import FormButton from "../../FormButton/FormButton";
 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(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 })] })] }));
+    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 })] })] }));
 };
 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 BaseButton from "../../BaseButton/BaseButton";
+import FormButton from "../../FormButton/FormButton";
 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(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]" })] })] })] }));
+    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]" })] })] })] }));
 };
 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 BaseButton from "../../BaseButton/BaseButton";
+import FormButton from "../../FormButton/FormButton";
 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(BaseButton, { 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(FormButton, { 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 BaseButton from "../BaseButton/BaseButton";
+import FormButton from "../FormButton/FormButton";
 import Text from "../Text/Text";
 const CounterButton = ({ count, containerClassName, inputClassName, buttonClassName, iconClasses, onIncrementClick, onDecrementClick, onInputChange, }) => {
-    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 })] }));
+    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 })] }));
 };
 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 BaseButton from "../BaseButton/BaseButton";
+import FormButton from "../FormButton/FormButton";
 import Text from "../Text/Text";
 const GetSupport = ({ as, to, icon, iconClasses, title, titleClasses, subTitle, subTitleClasses, 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 }));
+    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 }));
 };
 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 BaseButton from "../BaseButton/BaseButton";
+import FormButton from "../FormButton/FormButton";
 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(BaseButton, { 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(FormButton, { 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(BaseButton, { 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(FormButton, { 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/Input/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import BaseButton from "../BaseButton/BaseButton";
+import FormButton from "../FormButton/FormButton";
 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(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" })), }) => {
+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" })), }) => {
     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 BaseButton from "../BaseButton/BaseButton";
+import FormButton from "../FormButton/FormButton";
 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(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!") })),
+    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!") })),
     inputTextSize: "text-md",
     inputWidth: "w-96",
     inputShape: "rounded",
@@ -275,7 +275,7 @@ ButtonWithValidation.args = {
     hasRightIcon: false,
     hasLeftIcon: false,
     hasButton: true,
-    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!") })),
+    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!") })),
 };
 export const ButtonWithLeftIcon = Template.bind({});
 ButtonWithLeftIcon.args = {
@@ -294,7 +294,7 @@ ButtonWithLeftIcon.args = {
     leftIcon: getFontAwesomeIcon("search"),
     iconBackgroundColor: "none",
     hasButton: true,
-    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!") })),
+    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!") })),
 };
 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 BaseButton from "../BaseButton/BaseButton";
+import FormButton from "../FormButton/FormButton";
 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(BaseButton, { 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(FormButton, { 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 BaseButton from "../BaseButton";
+import FormButton from "../FormButton";
 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(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("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(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(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"),
+        _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"),
     ],
 };

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 BaseButton from "../BaseButton";
+import FormButton from "../FormButton";
 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(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" }), ", ]"] }));
+        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" }), ", ]"] }));
     });
     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 "./PageSection.types";
+import { PageSectionTypes } from ".";
 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-6  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-6",
+    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" })] })),
 };
 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 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)) })] })),
+    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)) })] })),
 };
 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 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)) })] })),
+    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)) })] })),
 };

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

@@ -6,9 +6,8 @@ import Text from "../Text/Text";
 import Card from "../Card/Card";
 import GenericList from "../GenericList/GenericList";
 import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
-import { DUMMYPRODUCTDATA, DUMMYCOMPASSPRODUCTDATA, } from "../../components/Card/DUMMYPRODUCTDATA.json";
-import HorizontalCardTemplate from "../Card/templates/HorizontalCardTemplate";
-describe("Section Component(<Section />)", () => {
+import { DUMMYCOMPASSPRODUCTDATA } from "../../components/Card/DUMMYPRODUCTDATA.json";
+describe("<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" })] }) }));
     });
@@ -21,21 +20,12 @@ describe("Section Component(<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("Environmental Services - Lenovo ThinkPad Universal USB-C Dock");
+        expect(cards[0]).toHaveTextContent("Compass Sales Lenovo TP X13 Yoga G3 Laptop");
         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 BaseButton from "../BaseButton/BaseButton";
+import FormButton from "../FormButton/FormButton";
 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(BaseButton, { 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(FormButton, { text: buttonText, icon: buttonIcon, iconClasses: buttonIconClasses, as: "button", additionalClasses: buttonClasses, onClick: handleButtonClick }) })] }) })] }) }));
 };
 export default SearchInput;