@agilant/toga-blox 1.0.36 → 1.0.38

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/Dropdown/Dropdown.types.d.ts

@@ -5,11 +5,12 @@ export type DropdownProps = {
     optionClasses?: string;
     menuClasses?: string;
     dropdownClasses?: string;
-    icon?: {
-        name: string;
-        weight: "solid" | "regular" | "light" | "duotone" | "brands";
-        iconClasses?: string;
-    };
+    icon?: DropdownIconProps;
     selectedOptionBgColor?: string;
     optionHoverBgColor?: string;
 };
+export type DropdownIconProps = {
+    name: string;
+    weight: "solid" | "regular" | "light" | "duotone" | "brands";
+    iconClasses?: string;
+};

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/MultiSelect/MultiSelect.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { MultiSelect } from "react-multi-select-component";
-const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange, placeholder = "Select...", isSearchable = true, isOpen, hasSelectAll = false, disabled = false, isLoading = false, onMenuToggle, overrideStrings, className, width = "w-72", otherProps, }) => {
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange, placeholder = {
+    text: "Select...",
+    icon: "",
+    iconStyle: "regular",
+}, isSearchable = true, isOpen, hasSelectAll = false, disabled = false, isLoading = false, onMenuToggle, overrideStrings, className, width = "w-72", otherProps, }) => {
     // Convert your OptionType to the shape expected by react-multi-select-component.
     const multiSelectOptions = options.map((option) => ({
         label: option.name,
@@ -11,6 +16,19 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
         label: item.name,
         value: item.value,
     }));
+    const valueRenderer = (selected, _options) => {
+        if (!selected || selected.length === 0) {
+            return (_jsxs("span", { className: "flex items-center gap-2 text-gray-500", children: [placeholder?.icon
+                        ? getFontAwesomeIcon(placeholder.icon)
+                        : null, placeholder?.text] }));
+        }
+        // If user selected ALL possible options, show "All items selected"
+        if (selected.length === multiSelectOptions.length) {
+            return "All items selected";
+        }
+        // Default behavior: comma-separated labels
+        return selected.map((s) => s.label).join(", ");
+    };
     return (_jsx("div", { className: `${width}`, children: _jsx(MultiSelect, { id: id, name: name, className: className, options: multiSelectOptions, value: multiSelectValue, onChange: (selectedOptions) => {
                 // Convert back to OptionType when passing to onChange
                 const mapped = selectedOptions.map((opt) => ({
@@ -23,8 +41,8 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
             disableSearch: !isSearchable, 
             // Additional props from react-multi-select-component
             isOpen: isOpen, hasSelectAll: hasSelectAll, disabled: disabled, isLoading: isLoading, onMenuToggle: onMenuToggle, overrideStrings: {
-                selectSomeItems: placeholder,
+                // selectSomeItems: placeholder,
                 ...overrideStrings,
-            }, labelledBy: "Select", ...otherProps }) }));
+            }, labelledBy: "Select", valueRenderer: valueRenderer, ...otherProps }) }));
 };
 export default MultiSelectInput;

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -85,7 +85,7 @@ Default.args = {
         { name: "Option 3", value: "option3" },
     ],
     selectedValue: [],
-    placeholder: "Select options...",
+    placeholder: { text: "Select options..." },
     isSearchable: true,
     hasSelectAll: false,
     disabled: false,
@@ -102,7 +102,7 @@ WithSelectAll.args = {
         { name: "Grape", value: "grape" },
     ],
     selectedValue: [],
-    placeholder: "Select fruits...",
+    placeholder: { text: "Select fruits..." },
     hasSelectAll: true,
     isSearchable: true,
 };
@@ -116,7 +116,7 @@ OpenByDefault.args = {
         { name: "Angular", value: "angular" },
     ],
     selectedValue: [],
-    placeholder: "Pick your JS framework...",
+    placeholder: { text: "Pick your JS framework..." },
     isOpen: true,
     hasSelectAll: false,
 };
@@ -130,7 +130,7 @@ Disabled.args = {
         { name: "Blue", value: "blue" },
     ],
     selectedValue: [],
-    placeholder: "Disabled...",
+    placeholder: { text: "Disabled...", icon: "magnifyingGlass" },
     disabled: true,
 };
 export const LoadingState = Template.bind({});
@@ -143,7 +143,7 @@ LoadingState.args = {
         { name: "Option C", value: "c" },
     ],
     selectedValue: [],
-    placeholder: "Loading...",
+    placeholder: { text: "Loading..." },
     isLoading: true,
 };
 export const CustomStrings = Template.bind({});

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

@@ -9,7 +9,11 @@ export interface MultiSelectInputProps {
     options?: OptionType[];
     selectedValue?: OptionType[];
     onChange: (selected: OptionType[]) => void;
-    placeholder?: string;
+    placeholder?: {
+        text?: string;
+        icon?: string;
+        iconStyle?: string;
+    };
     isSearchable?: boolean;
     isOpen?: boolean;
     hasSelectAll?: boolean;

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/SearchInput/SearchDropdownInput.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { OptionType } from "../MultiSelect/MultiSelect.types";
+import "./SearchDrowpdown.scss";
+interface SearchDropdownInputProps {
+    options?: OptionType[];
+    selectedValue?: OptionType[];
+    onChange: (selected: OptionType[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    hasSelectAll?: boolean;
+    bgColor?: string;
+    textHighlight?: string;
+    [key: string]: any;
+}
+/**
+ * A wrapper around MultiSelectInput that appends a special "__footer__" option
+ * and uses a custom item renderer to display "Clear" and "Filter" buttons.
+ */
+declare const SearchDropdownInput: React.FC<SearchDropdownInputProps>;
+export default SearchDropdownInput;

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MultiSelectInput from "../MultiSelect/MultiSelect";
+import "./SearchDrowpdown.scss";
+/**
+ * A wrapper around MultiSelectInput that appends a special "__footer__" option
+ * and uses a custom item renderer to display "Clear" and "Filter" buttons.
+ */
+const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select...", disabled = false, hasSelectAll = true, bgColor, textHighlight, ...rest }) => {
+    const footerOption = [{ name: "", value: "__footer__" }];
+    const extendedOptions = [...options, ...footerOption];
+    const itemRenderer = ({ option, checked, disabled, onClick }) => {
+        // If it's our footer option, display the custom footer row
+        if (option.value === "__footer__") {
+            return (_jsxs("div", { className: "footer px-4 py-2 flex justify-between", children: [_jsx("button", { type: "button", className: `${textHighlight}`, onClick: (e) => {
+                            e.stopPropagation();
+                            onChange([]); // Clear all selections
+                        }, children: "Clear" }), _jsx("button", { type: "button", className: `${bgColor} text-white px-3 py-1 rounded`, onClick: (e) => {
+                            e.stopPropagation();
+                            console.log("Filter clicked!", selectedValue);
+                            // ...your custom filter logic
+                        }, children: "Filter" })] }));
+        }
+        else if (option.label === "Select All") {
+            return (_jsxs("label", { className: "select-all-item", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "0.5rem 1rem",
+                    position: "sticky",
+                    top: 0,
+                    borderBottom: "1px solid #ccc",
+                    zIndex: 10,
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    onClick(e); // Let the library handle toggling
+                }, children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }));
+        }
+        else {
+            return (_jsxs("div", { className: "item px-4 py-1 cursor-pointer flex items-center", onClick: (e) => onClick(option, e), children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { className: "ml-2", children: option.label })] }));
+        }
+    };
+    return (_jsx(MultiSelectInput, { options: extendedOptions, selectedValue: selectedValue, onChange: onChange, placeholder: {
+            text: placeholder,
+            icon: "magnifyingGlass",
+            iconStyle: "regular",
+        }, disabled: disabled, hasSelectAll: hasSelectAll, 
+        /** Provide the custom item renderer and any additional props via otherProps */
+        otherProps: {
+            ItemRenderer: itemRenderer,
+            ...rest.otherProps,
+        }, ...rest }));
+};
+export default SearchDropdownInput;

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, pillColor, textHighlight, column, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, bgColor, textHighlight, column, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, onChange, selectedValue, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import SearchTextInput from "./SearchTextInput";
 import SearchNumberInput from "./SearchNumberInput";
 import { Controller } from "react-hook-form";
+import SearchDropdownInput from "./SearchDropdownInput";
 // A simple helper function for default values
 function getDefaultValue(dynamicDefaultValue, valueKey) {
     if (typeof dynamicDefaultValue !== "undefined") {
@@ -10,11 +11,11 @@ function getDefaultValue(dynamicDefaultValue, valueKey) {
     }
     return "";
 }
-const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pillColor = "bg-sky-500", textHighlight = "text-sky-500", column, inputType = "text", dropdownIconProp = {
+const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, bgColor = "bg-sky-500", textHighlight = "text-sky-500", column, inputType = "text", dropdownIconProp = {
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, onChange, selectedValue, }) => {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
@@ -48,6 +49,10 @@ const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pillCol
                 case "number":
                     return (_jsx(SearchNumberInput, { closeOutSearch: () => { }, setResetSearch: () => { }, setEditingHeader: () => { }, column: undefined, dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue }));
                 case "multiSelect":
+                    {
+                        console.log(dropdownOptions, "dropdownOptions");
+                    }
+                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, isSearchable: true, placeholder: "Search", isMulti: true, hideSelectedOptions: true, closeMenuOnSelect: false, inputWidth: "w-full", inputTextSize: "text-sm", additionalClasses: "", customClassNames: {}, onChange: onChange, value: [], selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight }));
                 case "boolean":
                 case "date":
                     // Make sure control & valueKey exist before using them

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

@@ -4,4 +4,6 @@ export default _default;
 export declare const Default: any;
 export declare const TextInput: any;
 export declare const NumberInput: any;
+export declare const DropdownInput: any;
+export declare const BooleanInput: any;
 export declare const DisabledInput: any;

package/dist/components/SearchInput/SearchInput.stories.js

@@ -33,6 +33,14 @@ export default {
             action: "selected",
             description: "Callback when dropdown option is selected",
         },
+        searchItems: {
+            control: "array",
+            description: "Array of search items",
+        },
+        selectedValue: {
+            control: "array",
+            description: "Array of selected values",
+        },
     },
     parameters: { layout: "centered" },
 };
@@ -47,7 +55,15 @@ const Template = (args) => {
     const [toggleStatus, setToggleStatus] = useState(false);
     const [minValue, setMinValue] = useState();
     const [maxValue, setMaxValue] = useState();
-    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue }));
+    const [selectedValue, setSelectedValue] = useState(args.selectedValue || []);
+    // Handle onChange from the multi-select
+    const handleOnChange = (newSelected) => {
+        setSelectedValue(newSelected);
+        // Call the original onChange if provided in the story args
+        args.onChange?.(newSelected);
+        console.log("Selected items:", newSelected);
+    };
+    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue }));
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -95,6 +111,55 @@ NumberInput.args = {
     dropdownOptions: ["Exactly", "Less Than", "Greater Than"],
     selectedDropdownOption: "Exactly",
 };
+export const DropdownInput = Template.bind({});
+DropdownInput.args = {
+    inputType: "multiSelect",
+    column: mockColumn,
+    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
+    setResetSearch: () => console.log("Reset search triggered"),
+    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    placeholder: "Search",
+    dropdownOptions: [
+        { uuid: "1", name: "Option 1", value: "option1" },
+        { uuid: "2", name: "Option 2", value: "option2" },
+        { uuid: "3", name: "Option 3", value: "option3" },
+    ],
+    /** For multi-select, `value` is typically an array */
+    selectedValue: [],
+    // onChange: (selected: OptionType[]) => {
+    // 	console.log("Selected items:", selected);
+    // },
+    /** Additional props you might want to set */
+    isSearchable: true,
+    hasSelectAll: true,
+    disabled: false,
+    isLoading: false,
+    type: "multiSelect",
+    // etc...
+};
+export const BooleanInput = Template.bind({});
+BooleanInput.args = {
+    inputType: "multiSelect",
+    column: mockColumn,
+    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
+    setResetSearch: () => console.log("Reset search triggered"),
+    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    placeholder: "Search",
+    dropdownOptions: [
+        { uuid: "1", name: "True", value: "true" },
+        { uuid: "2", name: "False", value: "false" },
+    ],
+    selectedValue: [],
+    // onChange: (selected: OptionType[]) => {
+    // 	console.log("Selected items:", selected);
+    // },
+    isSearchable: true,
+    hasSelectAll: true,
+    disabled: false,
+    isLoading: false,
+    type: "multiSelect",
+    // etc...
+};
 export const DisabledInput = Template.bind({});
 DisabledInput.args = {
     inputType: "text",

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

@@ -5,17 +5,20 @@ type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
     accessor?: string | number | symbol | Accessor<T>;
 };
 export type SearchInputProps<T extends object> = {
+    onChange(newSelected: OptionType[]): unknown;
+    selectedValue: any[];
+    value: any[];
     closeOutSearch: (value: number | null) => void;
     setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
     columHeader?: any;
     column: ColumnWithAccessor<T>;
     parentIndex?: number;
     setEditingHeader: (value: number | null) => void;
-    pillColor?: string;
+    bgColor?: string;
     textHighlight?: string;
     inputType?: string;
-    dropdownOptions?: string[];
-    selectedDropdownOption?: string;
+    dropdownOptions?: string[] | OptionType[] | number[];
+    selectedDropdownOption?: string | OptionType | number;
     onDropdownOptionSelect?: (option: string) => void;
     dropdownIconProp?: searchDropdownIconProps;
     searchItems?: string[] | number[];
@@ -30,6 +33,12 @@ export type SearchInputProps<T extends object> = {
     valueKey?: string;
     dynamicDefaultValue?: any;
 };
+export interface OptionType {
+    uuid: string;
+    name: string;
+    value: string;
+    label: string;
+}
 export type searchDropdownIconProps = {
     name: string;
     weight: string;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -53,7 +53,7 @@ const SearchNumberInput = ({ closeOutSearch, setResetSearch, setEditingHeader, t
             handleSubmitClick();
         }
     };
-    return (_jsx("div", { ref: containerRef, className: "", children: _jsxs("div", { className: `flex flex-col p-4 w-[425px] h-[130px] border-2 border-navy-200 rounded-md`, children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white min-w-32 top-[-8px] left-[-2px]", dropdownClasses: "border-0 border-r-2", icon: dropdownIconProp }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[250px] max-w-[250px] h-10 text-gray flex ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2 rounded-md ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: `flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md`, children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 border-r-2 w-auto", icon: dropdownIconProp }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[200px] h-10 text-gray flex ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2 rounded-md ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
                                 setToggleStatus(!toggleStatus);
                             }, activeColorBackground: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: "Filter", backgroundColor: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleSubmitClick, shape: "rounded-full" })] })] }) }));
 };

package/dist/components/SearchInput/SearchTextInput.js

@@ -54,7 +54,7 @@ const SearchTextInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pil
         }
     };
     const pillClassnames = `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4`;
-    return (_jsx("div", { ref: containerRef, className: "", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: "min-w-[250px] max-w-[250px] min-h-full text-gray flex ", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => {
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: " min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => {
                                                     setLocalSearchText("");
                                                 }, children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => {
                                 setLocalSearchText("");

package/dist/components/SortArrows/SortArrows.js

@@ -26,7 +26,7 @@ const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSort
         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: 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 &&
+    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${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

@@ -33,9 +33,9 @@ export const WithOverlayAndIndexCount = {
         return (_jsx("div", { className: "size-96", children: _jsx(SortArrows, { counterIcon: {
                     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",
-                    numberSize: "text-[50px]",
+                    numberClassNames: " absolute bottom-1.5 left-[10px] text-xs",
+                    iconClassNames: "text-green-500 hover:text-red-400 text-2xl",
+                    numberSize: "  text-red-500 top-0",
                 }, column: column, setSortColumn: setSortColumn, slug: "products", renderPortalOverlay: (onClose) => (_jsx("div", { className: "absolute top-0 left-0 w-[300px] h-[300px] bg-black bg-opacity-50 flex items-center justify-center", onClick: onClose })) }) }));
     },
 };

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, iconStyle: "solid" | "regular" | "light" | undefined) => React.ReactElement | null;
+export declare const getFontAwesomeIcon: (iconName: string, iconStyle?: "solid" | "regular" | "light" | undefined) => React.ReactElement | null;

package/dist/utils/getFontAwesomeIcon.js

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 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) => {
+export const getFontAwesomeIcon = (iconName, iconStyle = "solid") => {
     try {
         const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`;
         let icon;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.36",
+	"version": "1.0.38",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -40,6 +40,7 @@
 		"react-select": "^5.10.0",
 		"react-table": "^7.8.0",
 		"react-table-sticky": "^1.1.3",
+		"sass": "^1.83.4",
 		"storybook-addon-react-router-v6": "^2.0.15",
 		"tslib": "^2.3.0"
 	},