@agilant/toga-blox 1.0.35 → 1.0.37

package/dist/components/Badge/Badge.stories.js

@@ -156,8 +156,8 @@ BadgeWithLeftIcon.args = {
     badgeContainerClasses: "px-3 py-1",
     hasMobileStyle: true,
     mobileIconLabel: "Complete",
-    mobileIcon: getFontAwesomeIcon("check"),
-    icon: getFontAwesomeIcon("check"),
+    mobileIcon: getFontAwesomeIcon("check", "regular"),
+    icon: getFontAwesomeIcon("check", "regular"),
     hasLeftIcon: true,
     iconSize: "text-sm",
     text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Complete", tag: "span", size: "text-sm" })),
@@ -176,8 +176,8 @@ BadgeWithRightIcon.args = {
     badgeContainerClasses: "px-3 py-1",
     hasMobileStyle: true,
     mobileIconLabel: "Incomplete",
-    mobileIcon: getFontAwesomeIcon("xmark"),
-    icon: getFontAwesomeIcon("xmark"),
+    mobileIcon: getFontAwesomeIcon("xmark", "regular"),
+    icon: getFontAwesomeIcon("xmark", "regular"),
     hasRightIcon: true,
     iconSize: "text-sm",
     text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Incomplete", tag: "span", size: "text-sm" })),
@@ -222,8 +222,8 @@ SupplyBadge.args = {
     backgroundColor: "bg-gray-300",
     borderRadius: "rounded-full",
     badgeContainerClasses: "px-3 py-1",
-    mobileIcon: getFontAwesomeIcon("calculator"),
-    icon: getFontAwesomeIcon("calculator"),
+    mobileIcon: getFontAwesomeIcon("calculator", "regular"),
+    icon: getFontAwesomeIcon("calculator", "regular"),
     hasLeftIcon: true,
     text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Closed", tag: "span", size: "text-sm" })),
 };
@@ -239,8 +239,8 @@ StylesBadgeWithClick.args = {
     backgroundColor: "bg-gray-300",
     borderRadius: "rounded-full",
     badgeContainerClasses: "px-3 py-1",
-    mobileIcon: getFontAwesomeIcon("calculator"),
-    icon: getFontAwesomeIcon("calculator"),
+    mobileIcon: getFontAwesomeIcon("calculator", "regular"),
+    icon: getFontAwesomeIcon("calculator", "regular"),
     hasLeftIcon: true,
     styles: { background: "#F8F8F9", padding: "1.5rem" },
     onClick: () => alert("Clicked!"),

package/dist/components/Badge/Badge.test.js

@@ -6,7 +6,7 @@ import Text from "../Text/Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 describe("<Badge />", () => {
     beforeEach(() => {
-        render(_jsx(Badge, { type: "span", borderColor: "border-red-500", hoverColor: "hover:bg-none", testId: "priority-badge", mobileIcon: getFontAwesomeIcon("exclamationCircle"), mobileIconLabel: "Priority", text: _jsx(Text, { size: "text-md", color: "text-black", text: "Priority", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
+        render(_jsx(Badge, { type: "span", borderColor: "border-red-500", hoverColor: "hover:bg-none", testId: "priority-badge", mobileIcon: getFontAwesomeIcon("exclamationCircle", "regular"), mobileIconLabel: "Priority", text: _jsx(Text, { size: "text-md", color: "text-black", text: "Priority", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
     });
     test("renders badge", () => {
         const badge = screen.getByTestId("badge-test-id");
@@ -22,7 +22,7 @@ describe("<Badge />", () => {
 });
 describe("<Badge /> with icon", () => {
     beforeEach(() => {
-        render(_jsx(Badge, { type: "span", borderColor: "border-green-500", hoverColor: "hover:bg-none", testId: "icon-badge", cursorPointer: false, icon: getFontAwesomeIcon("xmark"), mobileIcon: getFontAwesomeIcon("xmark"), mobileIconLabel: "Complete", hasLeftIcon: true, text: _jsx(Text, { size: "text-md", color: "text-black", text: "Complete", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
+        render(_jsx(Badge, { type: "span", borderColor: "border-green-500", hoverColor: "hover:bg-none", testId: "icon-badge", cursorPointer: false, icon: getFontAwesomeIcon("xmark", "regular"), mobileIcon: getFontAwesomeIcon("xmark", "regular"), mobileIconLabel: "Complete", hasLeftIcon: true, text: _jsx(Text, { size: "text-md", color: "text-black", text: "Complete", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
     });
     test("renders badge with icon", () => {
         const badge = screen.getByTestId("badge-test-id");
@@ -38,7 +38,7 @@ describe("<Badge /> with icon", () => {
 });
 describe("<Badge /> with Image", () => {
     beforeEach(() => {
-        render(_jsx(Badge, { type: "href", href: "#", borderColor: "border-none", hoverColor: "hover:bg-blue-500", cursorPointer: false, icon: getFontAwesomeIcon("check"), mobileIcon: getFontAwesomeIcon("check"), mobileIconLabel: "Complete", text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }), image: _jsx("img", { src: "../../../assets/contact-image.png", alt: "test alt text", className: "flex justify-center w-12 h-12 max-md:hidden" }) }));
+        render(_jsx(Badge, { type: "href", href: "#", borderColor: "border-none", hoverColor: "hover:bg-blue-500", cursorPointer: false, icon: getFontAwesomeIcon("check", "regular"), mobileIcon: getFontAwesomeIcon("check", "regular"), mobileIconLabel: "Complete", text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }), image: _jsx("img", { src: "../../../assets/contact-image.png", alt: "test alt text", className: "flex justify-center w-12 h-12 max-md:hidden" }) }));
     });
     test("has correct text", () => {
         expect(screen.getByTestId("badge-test-id")).toHaveTextContent("Contact Us");
@@ -55,7 +55,7 @@ describe("<Badge /> with Image", () => {
 });
 describe("<Badge /> Tests for icons and images", () => {
     test("renders with left icon only", () => {
-        render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark"), hasLeftIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
+        render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark", "regular"), hasLeftIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
         const badge = screen.getByTestId("badge-test-id");
         expect(badge).toBeInTheDocument();
         const icon = badge.querySelector('svg[data-icon="xmark"]');
@@ -71,7 +71,7 @@ describe("<Badge /> Tests for icons and images", () => {
 });
 describe("<Badge /> tests for right badges", () => {
     test("renders with left icon only", () => {
-        render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark"), hasRightIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
+        render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark", "regular"), hasRightIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
         const badge = screen.getByTestId("badge-test-id");
         expect(badge).toBeInTheDocument();
         const icon = badge.querySelector('svg[data-icon="xmark"]');
@@ -80,7 +80,7 @@ describe("<Badge /> tests for right badges", () => {
 });
 describe("<Badge /> - Mobile Icon Tests", () => {
     test("renders mobile icon when hasMobileStyle is true", () => {
-        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Label", text: "Mobile Icon Badge", type: "span" }));
+        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check", "regular"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Label", text: "Mobile Icon Badge", type: "span" }));
         const badge = screen.getByTestId("badge-test-id");
         expect(badge).toBeInTheDocument();
         const mobileIcon = screen.getByLabelText("Mobile Icon Label");
@@ -88,14 +88,14 @@ describe("<Badge /> - Mobile Icon Tests", () => {
         expect(mobileIcon).toHaveClass("hidden max-md:flex max-md:p-0 mr-2");
     });
     test("does not render mobile icon when hasMobileStyle is false", () => {
-        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: false, mobileIconLabel: "Mobile Icon Label", text: "No Mobile Style", type: "to" }));
+        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check", "regular"), hasMobileStyle: false, mobileIconLabel: "Mobile Icon Label", text: "No Mobile Style", type: "to" }));
         const badge = screen.getByTestId("badge-test-id");
         expect(badge).toBeInTheDocument();
         const mobileIcon = screen.queryByLabelText("Mobile Icon Label");
         expect(mobileIcon).not.toBeInTheDocument();
     });
     test("mobile icon has correct aria attributes", () => {
-        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Accessibility Label", text: "Accessible Mobile Icon Badge", type: "to" }));
+        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check", "regular"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Accessibility Label", text: "Accessible Mobile Icon Badge", type: "to" }));
         const mobileIcon = screen.getByLabelText("Mobile Icon Accessibility Label");
         expect(mobileIcon).toBeInTheDocument();
         expect(mobileIcon).toHaveAttribute("aria-hidden", "false");

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

@@ -138,7 +138,7 @@ 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"),
+    icon: getFontAwesomeIcon("coffee", "regular"),
     shape: "rounded-none",
     hoverUnderline: false,
     onClick: () => alert("Button clicked!"),
@@ -150,7 +150,7 @@ IconOnly.args = {
     shape: "rounded",
     hoverBackground: "hover:bg-gray-100",
     hoverUnderline: false,
-    icon: getFontAwesomeIcon("trash"),
+    icon: getFontAwesomeIcon("trash", "regular"),
     additionalClasses: "flex justify-center items-center px-4 py-3 bg-gray-50",
     onClick: () => alert("Icon button clicked!"),
 };
@@ -163,7 +163,7 @@ ClearCartButton.args = {
     hoverFontColor: "hover:text-black",
     hoverBorderColor: "hover:border-red-700",
     hoverUnderline: false,
-    icon: getFontAwesomeIcon("trash"),
+    icon: getFontAwesomeIcon("trash", "regular"),
     iconClasses: "order-first",
     additionalClasses: "px-5 py-6 bg-gray-50 border-red-500 gap-2",
     onClick: () => alert("Cart Cleared!"),
@@ -177,7 +177,7 @@ RightIconButton.args = {
     hoverFontColor: "hover:text-white",
     hoverBorderColor: "hover:border-blue-700",
     hoverUnderline: false,
-    icon: getFontAwesomeIcon("arrowRight"),
+    icon: getFontAwesomeIcon("arrowRight", "regular"),
     additionalClasses: "px-6 py-3 flex-row-reverse",
     iconClasses: "ml-2 text-white",
     onClick: () => alert("Next clicked!"),
@@ -196,5 +196,5 @@ ConfirmRequestButton.args = {
 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!") })] })),
+    (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", "regular"), "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", "regular"), "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", "regular"), "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/Card/templates/CounterContentCardTemplate.js

@@ -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(BaseButton, { additionalClasses: "w-6 sm:w-8 h-6 sm:h-8 flex items-center justify-center text-red-600", icon: getFontAwesomeIcon("trash", "solid"), 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

@@ -5,8 +5,8 @@ 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
-                                            ? getFontAwesomeIcon(data.inStockProps.inStockIcon)
-                                            : getFontAwesomeIcon(data.inStockProps.outOfStockIcon) }), _jsx(Text, { tag: data.inStockProps.tag, size: data.inStockProps.size, text: data.inStock === true
+                                            ? getFontAwesomeIcon(data.inStockProps.inStockIcon, "regular")
+                                            : getFontAwesomeIcon(data.inStockProps.outOfStockIcon, "regular") }), _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" })] })] })] }));
 };

package/dist/components/Dropdown/Dropdown.js

@@ -9,7 +9,7 @@ const Dropdown = ({ options, selectedOption, onOptionSelect, optionClasses = "fl
 }, selectedOptionBgColor = "bg-gray-50", optionHoverBgColor = "hover:bg-gray-50", }) => {
     const [showMenu, setShowMenu] = useState(false);
     const toggleMenu = () => setShowMenu(!showMenu);
-    return (_jsxs("div", { className: `flex items-center justify-between relative min-w-32 border-2 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full `, children: [_jsx("div", { className: `font-bold ${optionClasses}`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, children: _jsx("span", { children: getFontAwesomeIcon(icon.name, icon.weight) }) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((action) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b ${action === selectedOption
+    return (_jsxs("div", { className: `flex items-center justify-between relative min-w-32 border-2 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full `, children: [_jsx("div", { className: `font-bold ${optionClasses}`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, children: _jsx("span", { children: getFontAwesomeIcon(icon.name) }) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((action) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b ${action === selectedOption
                                 ? `{${selectedOptionBgColor} font-semibold}`
                                 : `${optionHoverBgColor} text-black`}`, onClick: () => {
                                 onOptionSelect(action);

package/dist/components/InputAndCheck/InputAndCheck.js

@@ -69,6 +69,6 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
             handleSubmit();
         }
     };
-    return (_jsxs("div", { ref: containerRef, className: "relative", "data-testid": "icon-search-regular", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon, initialIcon.weight) })) : undefined, iconPosition: "both", secondIcon: localSearchText !== "" && (_jsx("div", { className: secondIconClasses, onClick: handleClearSearch, children: getFontAwesomeIcon(cancelIcon.icon, cancelIcon.weight) })) }) }), localSearchText && (_jsx("div", { className: "bg-white flex flex-start px-2", children: _jsx(Badge, { text: localSearchText, type: "span", cursorPointer: true, onClick: handleClearSearch, hasRightIcon: true, backgroundColor: badgeColor, badgeContainerClasses: iconBadgeContainerClasses, icon: getFontAwesomeIcon(badgeIcon.icon, badgeIcon.weight) }) }))] }), localSearchText && (_jsx("div", { onClick: handleSubmit, className: searchIconClasses, children: getFontAwesomeIcon(searchIcon.icon, searchIcon.weight) }))] }));
+    return (_jsxs("div", { ref: containerRef, className: "relative", "data-testid": "icon-search-regular", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon) })) : undefined, iconPosition: "both", secondIcon: localSearchText !== "" && (_jsx("div", { className: secondIconClasses, onClick: handleClearSearch, children: getFontAwesomeIcon(cancelIcon.icon) })) }) }), localSearchText && (_jsx("div", { className: "bg-white flex flex-start px-2", children: _jsx(Badge, { text: localSearchText, type: "span", cursorPointer: true, onClick: handleClearSearch, hasRightIcon: true, backgroundColor: badgeColor, badgeContainerClasses: iconBadgeContainerClasses, icon: getFontAwesomeIcon(badgeIcon.icon) }) }))] }), localSearchText && (_jsx("div", { onClick: handleSubmit, className: searchIconClasses, children: getFontAwesomeIcon(searchIcon.icon) }))] }));
 }
 export default InputAndCheck;

package/dist/components/Nav/Nav.js

@@ -3,7 +3,6 @@ import { useState } from "react";
 import data from "./DUMMYNAVDATA.json";
 import Image from "../Image/Image";
 import { Accordion } from "../../utils/generateAccordionItem";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const DUMMYNAVDATA = data.DUMMYNAVDATA;
 const Nav = ({ navData = DUMMYNAVDATA, navBackgroundColor = "bg-white", parentBackground = "bg-white", parentBorderColor = "border-gray-200", parentShape = "rounded-md", parentTextColor = "text-gray-800", parentTextSize = "text-base", parentHoverBackground = "hover:bg-gray-200", parentHoverFontColor = "hover:text-black", parentHoverUnderline = "hover:underline", parentHoverBorderColor = "hover:border-gray-400", submenuBackgroundColor = "bg-white", submenuTextColor = "text-gray-800", submenuTextSize = "text-sm", includeSubmenuImages = false, submenuHoverBackground = "hover:bg-gray-200", submenuHoverTextColor = "hover:text-black", submenuHoverBorderStyle = "hover:border-gray-400", submenuHoverBorderColor = "hover:border-gray-400", mobileBreakpoint = "max-xl", accordionParentStyle = "border-b border-black p-2 w-full", accordionExpandedStyle = "w-full py-3", }) => {
     const [navExpanded, setNavExpanded] = useState(navData.reduce((acc, _, index) => ({
@@ -26,6 +25,10 @@ const Nav = ({ navData = DUMMYNAVDATA, navBackgroundColor = "bg-white", parentBa
             toggleNav(index);
         }
     };
-    return (_jsxs("nav", { className: `flex justify-around ${navBackgroundColor}`, "data-testid": "nav", children: [_jsx("ul", { className: `flex w-full items-center ${mobileBreakpoint}:hidden`, "aria-label": "Main Menu", "data-testid": "main-menu", children: navData.map((item, index) => (_jsx("div", { className: `flex w-full justify-center`, children: item.to === "" ? (_jsxs("li", { className: `flex w-auto cursor-pointer relative`, role: "button", onClick: () => handleParentClick(index), "aria-expanded": navExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: [_jsx("div", { className: `flex w-full items-center border-2 h-10 ${parentHoverBackground} ${parentHoverBorderColor} ${parentShape} ${parentBackground}`, "data-testid": `parent-button-${item.title}`, children: _jsxs("div", { className: `flex w-full p-4 justify-between items-center ${parentTextSize} ${parentTextColor} ${parentHoverFontColor} ${parentHoverUnderline}`, children: [_jsx("div", { className: "px-2", children: item.title }), getFontAwesomeIcon("chevron-down", `text-xs transition-transform duration-300 transform ${navExpanded[index] ? "rotate-180" : ""}`)] }) }), _jsx("div", { className: `absolute min-w-navDropDown top-16 overflow-x-scroll transition-[max-height] duration-500 ease-in-out ${submenuBackgroundColor} ${navExpanded[index] ? "max-h-60" : "max-h-0"}`, "aria-hidden": !navExpanded[index], tabIndex: -1, children: _jsx("ul", { className: "w-full", children: item.links.map((link) => (_jsx("li", { className: `flex py-2 border-4 border-transparent w-auto align-center ${submenuBackgroundColor} ${submenuHoverBackground} ${submenuHoverBorderStyle} ${submenuHoverBorderColor} ${submenuTextSize} ${submenuTextColor}`, children: _jsxs("a", { href: link.link, className: "flex hover:underline w-full justify-start items-center pl-1", "data-testid": link.menuItem, tabIndex: navExpanded[index] ? 0 : -1, children: [includeSubmenuImages && (_jsx(Image, { src: link.src, alt: link.alt, background: false, additionalClasses: "w-12 h-12 mr-2", "data-testid": `submenu-image-${link.menuItem}` })), link.menuItem] }) }, link.menuItem))) }) })] })) : (_jsx("li", { className: "w-auto", onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: _jsx("a", { href: item.to, className: `flex flex-col p-4 w-full border-2 relative items-center h-10 justify-center ${parentHoverBackground} ${parentHoverFontColor} ${parentHoverUnderline} ${parentBackground} ${parentBorderColor} ${parentShape} ${parentTextSize} ${parentTextColor}`, tabIndex: 0, "data-testid": `parent-link-${item.title}`, children: _jsx("div", { className: "px-2", children: item.title }) }) })) }, item.title))) }), _jsx("div", { className: `hidden w-full items-center ${mobileBreakpoint}:flex`, "data-testid": "accordion-nav", children: _jsx(Accordion, { navData: navData, accordionParentStyle: accordionParentStyle, accordionExpandedStyle: accordionExpandedStyle }) })] }));
+    return (_jsxs("nav", { className: `flex justify-around ${navBackgroundColor}`, "data-testid": "nav", children: [_jsx("ul", { className: `flex w-full items-center ${mobileBreakpoint}:hidden`, "aria-label": "Main Menu", "data-testid": "main-menu", children: navData.map((item, index) => (_jsx("div", { className: `flex w-full justify-center`, children: item.to === "" ? (_jsxs("li", { className: `flex w-auto cursor-pointer relative`, role: "button", onClick: () => handleParentClick(index), "aria-expanded": navExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: [_jsx("div", { className: `flex w-full items-center border-2 h-10 ${parentHoverBackground} ${parentHoverBorderColor} ${parentShape} ${parentBackground}`, "data-testid": `parent-button-${item.title}`, children: _jsx("div", { className: `flex w-full p-4 justify-between items-center ${parentTextSize} ${parentTextColor} ${parentHoverFontColor} ${parentHoverUnderline}`, children: _jsx("div", { className: "px-2", children: item.title }) }) }), _jsx("div", { className: `absolute min-w-navDropDown top-16 overflow-x-scroll transition-[max-height] duration-500 ease-in-out ${submenuBackgroundColor} ${navExpanded[index]
+                                    ? "max-h-60"
+                                    : "max-h-0"}`, "aria-hidden": !navExpanded[index], tabIndex: -1, children: _jsx("ul", { className: "w-full", children: item.links.map((link) => (_jsx("li", { className: `flex py-2 border-4 border-transparent w-auto align-center ${submenuBackgroundColor} ${submenuHoverBackground} ${submenuHoverBorderStyle} ${submenuHoverBorderColor} ${submenuTextSize} ${submenuTextColor}`, children: _jsxs("a", { href: link.link, className: "flex hover:underline w-full justify-start items-center pl-1", "data-testid": link.menuItem, tabIndex: navExpanded[index]
+                                                ? 0
+                                                : -1, children: [includeSubmenuImages && (_jsx(Image, { src: link.src, alt: link.alt, background: false, additionalClasses: "w-12 h-12 mr-2", "data-testid": `submenu-image-${link.menuItem}` })), link.menuItem] }) }, link.menuItem))) }) })] })) : (_jsx("li", { className: "w-auto", onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: _jsx("a", { href: item.to, className: `flex flex-col p-4 w-full border-2 relative items-center h-10 justify-center ${parentHoverBackground} ${parentHoverFontColor} ${parentHoverUnderline} ${parentBackground} ${parentBorderColor} ${parentShape} ${parentTextSize} ${parentTextColor}`, tabIndex: 0, "data-testid": `parent-link-${item.title}`, children: _jsx("div", { className: "px-2", children: item.title }) }) })) }, item.title))) }), _jsx("div", { className: `hidden w-full items-center ${mobileBreakpoint}:flex`, "data-testid": "accordion-nav", children: _jsx(Accordion, { navData: navData, accordionParentStyle: accordionParentStyle, accordionExpandedStyle: accordionExpandedStyle }) })] }));
 };
 export default Nav;

package/dist/components/SortArrows/SortArrows.d.ts

@@ -1,5 +1,5 @@
 import { SortArrowsProps } from "./types";
-declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, getFontAwesomeIconFn, }: SortArrowsProps<T> & {
+declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, }: SortArrowsProps<T> & {
     getFontAwesomeIconFn?: (iconName: string, iconStyle: string) => React.ReactElement | null;
 }) => JSX.Element | null;
 export default SortArrows;

package/dist/components/SortArrows/SortArrows.js

@@ -2,17 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef } from "react";
 import { motion } from "framer-motion";
 import { useSortArrowsViewModel } from "./useSortArrowsViewModel";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import SortArrowIcon from "../SortArrowIcon";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon = {
-    icon: "circle",
+    icon: "triangle",
     weight: "solid",
     numberClassNames: "absolute text-xs top-1.5 right-0 left-0",
     iconClassNames: "text-lg text-blue-400 relative hover:text-red-400",
     numberSize: "text-xl",
-}, 
-// New optional prop for icon rendering; defaults to the local getFontAwesomeIcon.
-getFontAwesomeIconFn = getFontAwesomeIcon, }) => {
+}, }) => {
     const containerRef = useRef(null);
     const { showArrowContainer, handleParentClick, handleResetSort, handleClick, isActive, activeDirection, sortOrderNumber, setShowArrowContainer, } = useSortArrowsViewModel({
         columnId: String(column.accessor),
@@ -28,7 +26,7 @@ getFontAwesomeIconFn = getFontAwesomeIcon, }) => {
         setShowArrowContainer(false);
         onRequestClose?.();
     };
-    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: [_jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIconFn(counterIcon.icon, counterIcon.weight) }), _jsx("div", { className: `${activeDirection === "desc" ? "rotate-180" : ""} ${counterIcon.numberClassNames} `, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `z-[9989] bg-white rounded flex flex-col border-1 absolute top-6 w-32 ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIconFn("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIconFn("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIconFn("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
+    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: [_jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }), _jsx("div", { className: `${activeDirection === "desc" ? "rotate-180" : ""} ${counterIcon.numberClassNames} `, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `z-[9989] bg-white rounded flex flex-col border-1 absolute top-6 w-32 ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
                 renderPortalOverlay &&
                 renderPortalOverlay(handleClose)] }));
 };

package/dist/components/SortArrows/SortArrows.stories.js

@@ -31,7 +31,7 @@ export const WithOverlayAndIndexCount = {
         const [_, setSortColumn] = useState({});
         const column = mockColumn("category", "Category");
         return (_jsx("div", { className: "size-96", children: _jsx(SortArrows, { counterIcon: {
-                    icon: "arrowUp",
+                    icon: "triangle",
                     weight: "solid",
                     numberClassNames: "text-white text-[20px] text-red-400 rounded-full top-1.5 right-0 left-0",
                     iconClassNames: "text-blue-400 hover:text-red-400 p-4",

package/dist/components/Toaster/Toaster.js

@@ -14,7 +14,7 @@ const Toaster = ({ message, additionalClasses, clearMessage, hasClearButton, clo
     const shadowClasses = `shadow-lg shadow-boxShadow`;
     const closeButtonClasses = `cursor-pointer text-xs  ${closeIconColor}`;
     return (_jsx("div", { "data-testid": "toaster-test-id", role: "alert", "aria-live": "polite", className: `${shadowClasses} ${containerClasses} ${additionalClasses}`, children: message.map((msg, index) => (_jsxs("div", { className: "flex items-center p-2", children: [_jsx("div", { className: `w-6 flex-none mr-2 ${iconColor} `, children: index === 0 && maybeIcon
-                        ? getFontAwesomeIcon(maybeIcon.icon, maybeIcon.type)
+                        ? getFontAwesomeIcon(maybeIcon.icon)
                         : null }), _jsx("div", { className: "flex-grow", children: _jsx("p", { className: index === 0 && "font-semibold", children: msg }) }), _jsx("div", { className: "w-6 flex justify-end", children: index === 0 && hasClearButton && (_jsx("div", { "data-testid": "clear-button", className: closeButtonClasses, onClick: handleClearMessage, children: getFontAwesomeIcon("x", "solid") })) })] }, index))) }));
 };
 export default Toaster;

package/dist/utils/generateAccordionItem.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useState } from "react";
-import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
 export const Accordion = ({ navData, accordionParentStyle, accordionExpandedStyle, }) => {
     // setting state to be an object, with each key being the index of the accordion item ->
     //  allows for multiple accordions to be open at once
@@ -18,5 +17,5 @@ export const Accordion = ({ navData, accordionParentStyle, accordionExpandedStyl
             toggleAccordion(index);
         }
     };
-    return (_jsx(_Fragment, { children: navData.map((item, index) => (_jsxs(Fragment, { children: [_jsx("div", { className: `cursor-pointer ${accordionParentStyle}`, role: "button", onClick: () => toggleAccordion(index), "aria-expanded": accordionExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), children: _jsxs("div", { className: "px-6 text-left items-center h-10 select-none flex justify-between flex-row", children: [_jsx("div", { className: "flex w-3/4", children: item.title }), _jsx("div", { className: "flex w-1/2 justify-end", children: getFontAwesomeIcon("chevronDown", `text-xs transition-transform duration-300 transform ${accordionExpanded[index] ? "rotate-180" : ""}`) })] }) }), _jsx("div", { className: `px-6 w-full overflow-hidden transition-[max-height] duration-500 ease-in-out  ${accordionExpanded[index] ? "max-h-96" : "max-h-0"}`, "aria-hidden": !accordionExpanded[index], tabIndex: accordionExpanded[index] ? 0 : -1, children: _jsx("ul", { className: `${accordionExpandedStyle}`, children: item.links.map((link) => (_jsx("li", { className: "py-1", children: _jsx("a", { href: link.link, className: "hover:underline", "data-testid": link.menuItem, children: link.menuItem }) }, link.menuItem))) }) })] }, item.title))) }));
+    return (_jsx(_Fragment, { children: navData.map((item, index) => (_jsxs(Fragment, { children: [_jsx("div", { className: `cursor-pointer ${accordionParentStyle}`, role: "button", onClick: () => toggleAccordion(index), "aria-expanded": accordionExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), children: _jsxs("div", { className: "px-6 text-left items-center h-10 select-none flex justify-between flex-row", children: [_jsx("div", { className: "flex w-3/4", children: item.title }), _jsx("div", { className: "flex w-1/2 justify-end" })] }) }), _jsx("div", { className: `px-6 w-full overflow-hidden transition-[max-height] duration-500 ease-in-out  ${accordionExpanded[index] ? "max-h-96" : "max-h-0"}`, "aria-hidden": !accordionExpanded[index], tabIndex: accordionExpanded[index] ? 0 : -1, children: _jsx("ul", { className: `${accordionExpandedStyle}`, children: item.links.map((link) => (_jsx("li", { className: "py-1", children: _jsx("a", { href: link.link, className: "hover:underline", "data-testid": link.menuItem, children: link.menuItem }) }, link.menuItem))) }) })] }, item.title))) }));
 };

package/dist/utils/getFontAwesomeIcon.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const getFontAwesomeIcon: (iconName: string, className?: string) => React.ReactElement | null;
+export declare const getFontAwesomeIcon: (iconName: string, iconStyle?: "solid" | "regular" | "light" | undefined) => React.ReactElement | null;

package/dist/utils/getFontAwesomeIcon.js

@@ -1,16 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Icons from "@fortawesome/free-solid-svg-icons";
-export const getFontAwesomeIcon = (iconName, className = "") => {
+import * as SolidIcons from "@fortawesome/pro-solid-svg-icons";
+import * as RegularIcons from "@fortawesome/pro-regular-svg-icons";
+import * as LightIcons from "@fortawesome/pro-light-svg-icons";
+export const getFontAwesomeIcon = (iconName, iconStyle = "solid") => {
     try {
         const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`;
-        const icon = Icons[iconKey];
-        if (icon) {
-            return _jsx(FontAwesomeIcon, { icon: icon, className: className });
+        let icon;
+        switch (iconStyle) {
+            case "solid":
+                icon = SolidIcons[iconKey];
+                break;
+            case "regular":
+                icon = RegularIcons[iconKey];
+                break;
+            case "light":
+                icon = LightIcons[iconKey];
+                break;
+            default:
+                throw new Error(`Unknown icon style: ${iconStyle}`);
         }
-        else {
-            throw new Error(`Icon not found or invalid type: ${iconName}`);
+        if (!icon) {
+            throw new Error(`Icon not found: ${iconKey}`);
         }
+        return _jsx(FontAwesomeIcon, { icon: icon });
     }
     catch (error) {
         console.error(`Error loading Font Awesome icon: ${iconName}`, error);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.35",
+	"version": "1.0.37",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -23,6 +23,9 @@
 	],
 	"dependencies": {
 		"@emotion/is-prop-valid": "^1.1.3",
+		"@fortawesome/pro-light-svg-icons": "^6.7.2",
+		"@fortawesome/pro-regular-svg-icons": "^6.7.2",
+		"@fortawesome/pro-solid-svg-icons": "^6.7.2",
 		"@storybook/addon-docs": "^7.6.6",
 		"@storybook/addon-viewport": "^7.6.10",
 		"@tanstack/react-virtual": "^3.1.3",