linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Badge/Badge.stories.jsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { Badge } from "./Badge";
+import { badgeStyles } from ".";
+import { iconList } from "../../utils/iconList";
+var meta = {
+    title: "Components/Badge",
+    component: Badge,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            control: {
+                type: "select",
+                options: Object.keys(badgeStyles.type),
+            },
+            description: "The type of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "fill" },
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(badgeStyles.fillColor),
+            description: "The color of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "blue" },
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+                options: Object.keys(badgeStyles.size),
+            },
+            description: "The size of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(badgeStyles.shape),
+            description: "The shape of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "rounded" },
+            },
+        },
+        startIcon: {
+            control: {
+                type: "select",
+                options: Object.keys(iconList),
+            },
+            description: "The icon to display at the start of the badge.",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        endIcon: {
+            control: {
+                type: "select",
+                options: Object.keys(iconList),
+            },
+            description: "The icon to display at the end of the badge.",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        disabled: {
+            control: {
+                type: "boolean",
+            },
+            description: "Whether the badge is disabled.",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        onRemove: {
+            description: "When provided, displays a close icon that calls this function when clicked. The close icon is only shown when this prop is present.",
+            table: {
+                type: { summary: "() => void" },
+                defaultValue: { summary: "undefined" },
+            },
+            control: false,
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            // Use type, not color, to determine color options
+            var currentType = context.args.type;
+            if (context.argTypes && context.argTypes.color) {
+                context.argTypes.color.options =
+                    currentType === "fill"
+                        ? Object.keys(badgeStyles.fillColor)
+                        : Object.keys(badgeStyles.outlineColor);
+            }
+            return <Story {...context}/>;
+        },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        children: "Default Badge",
+        onRemove: undefined,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Default badge without a close icon. The close icon is only shown when the onRemove prop is provided.",
+            },
+        },
+    },
+};
+export var BadgeSize = function () { return (<div className="flex flex-col space-y-2">
+    <Badge size="sm">Small Badge</Badge>
+    <Badge size="md">Medium Badge</Badge>
+    <Badge size="lg">Large Badge</Badge>
+  </div>); };
+export var WithIcons = function () { return (<div className="flex flex-col space-y-2">
+    <Badge startIcon="check">Left Icon Only</Badge>
+    <Badge endIcon="check">Right Icon Only</Badge>
+    <Badge startIcon="check" endIcon="star">
+      Both Icons
+    </Badge>
+    <p className="text-sm mt-2 text-gray-500">
+      Note: None of these have an onRemove handler, so no close icon is shown
+    </p>
+  </div>); };
+export var BadgeType = function () { return (<div className="flex flex-col space-y-2">
+    <Badge type="fill">Fill Badge</Badge>
+    <Badge type="outline">Outline Badge</Badge>
+  </div>); };
+export var BadgeShape = function () { return (<div className="flex flex-col space-y-2">
+    <Badge shape="rounded">Rounded Badge</Badge>
+    <Badge shape="square">Square Badge</Badge>
+  </div>); };
+export var BadgeFillColors = function () { return (<div className="flex flex-row space-x-2">
+    <Badge color="blue">Blue</Badge>
+    <Badge color="light-blue">Light Blue</Badge>
+    <Badge color="red">Red</Badge>
+    <Badge color="light-red">Light Red</Badge>
+    <Badge color="indigo">Indigo</Badge>
+    <Badge color="light-indigo">Light Indigo</Badge>
+    <Badge color="green">Green</Badge>
+    <Badge color="light-green">Light Green</Badge>
+    <Badge color="yellow">Yellow</Badge>
+    <Badge color="light-yellow">Light Yellow</Badge>
+    <Badge color="gray">Gray</Badge>
+    <Badge color="light-gray">Light Gray</Badge>
+  </div>); };
+export var BadgeOutlineColors = function () { return (<div className="flex flex-row space-x-2">
+    <Badge color="blue" type="outline">
+      Blue
+    </Badge>
+    <Badge color="red" type="outline">
+      Red
+    </Badge>
+    <Badge color="indigo" type="outline">
+      Indigo
+    </Badge>
+    <Badge color="green" type="outline">
+      Green
+    </Badge>
+    <Badge color="yellow" type="outline">
+      Yellow
+    </Badge>
+    <Badge color="gray" type="outline">
+      Gray
+    </Badge>
+  </div>); };
+export var DisabledBadge = function () { return (<div className="flex flex-col space-y-2">
+    <Badge disabled>Disabled Badge</Badge>
+  </div>); };
+export var BadgeWithCounter = function () { return (<div className="flex flex-col space-y-2">
+    <Badge>3</Badge>
+    <Badge color="red">+3</Badge>
+  </div>); };
+export var BadgeWithRemoveHandler = function () {
+    var handleRemove = function () {
+        alert("Badge removed!");
+    };
+    return (<div className="flex flex-col space-y-2">
+      <Badge startIcon="plus" onRemove={handleRemove} color="green">
+        Badge with Close Icon
+      </Badge>
+      <Badge onRemove={handleRemove}>Removable Badge</Badge>
+      <Badge startIcon="check" onRemove={handleRemove}>
+        Check with Remove
+      </Badge>
+      <Badge type="outline" onRemove={handleRemove}>
+        Outline Removable
+      </Badge>
+    </div>);
+};

package/dist/src/components/Button/Button/Button.d.ts

@@ -15,9 +15,10 @@ export declare const variant: {
 };
 declare const buttonVariants: (props?: ({
     color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
     shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
     variant?: "link" | "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button({ className, color, size, shape, variant, asChild, startIcon, endIcon, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ className, color, size, shape, variant, asChild, startIcon, endIcon, ...props }: ButtonProps): React.JSX.Element;
 export { Button, buttonVariants };

package/dist/src/components/Button/Button/{Button.js → Button.jsx}

@@ -29,7 +29,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
@@ -37,30 +37,39 @@ import LUIcon from "../../Icons/LUIcon";
 import { buttonStyles } from "..";
 export var variant = {
     fill: "",
-    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none",
-    outline: "border lu-bg-transparent",
+    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none font-normal leading-normal",
+    outline: "lu-border lu-bg-transparent",
     ghost: "lu-bg-transparent border-none",
 };
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
     variants: {
         color: buttonStyles.fillColor,
-        size: buttonStyles.size,
+        size: __assign(__assign({}, buttonStyles.size), { none: "" }),
+        linkSize: __assign(__assign({}, buttonStyles.linkSize), { none: "" }),
         shape: buttonStyles.shape,
         variant: variant,
     },
     defaultVariants: {
         color: "blue",
         size: "md",
+        linkSize: "none",
         shape: "rounded-sm",
         variant: "fill",
     },
-    compoundVariants: __spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
+    compoundVariants: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
             color: color,
             variant: "link",
             class: className,
         });
+    }), true), Object.entries(buttonStyles.linkSize).map(function (_a) {
+        var sizeKey = _a[0], className = _a[1];
+        return ({
+            linkSize: sizeKey,
+            variant: "link",
+            class: className,
+        });
     }), true), Object.entries(buttonStyles.outlineColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
@@ -78,7 +87,7 @@ var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespa
     }), true),
 });
 function Button(_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, size = _a.size, shape = _a.shape, _c = _a.variant, variant = _c === void 0 ? "fill" : _c, _d = _a.asChild, asChild = _d === void 0 ? false : _d, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, shape = _a.shape, _d = _a.variant, variant = _d === void 0 ? "fill" : _d, _e = _a.asChild, asChild = _e === void 0 ? false : _e, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
     var Comp = asChild ? Slot : "button";
     // Map button size to appropriate icon sizes for start and end icons
     var getIconSizes = function () {
@@ -98,6 +107,13 @@ function Button(_a) {
     // Use the calculated sizes based on button size
     var startIconSizeValue = iconSizes.startIcon;
     var endIconSizeValue = iconSizes.endIcon;
-    return (_jsxs(Comp, __assign({ "data-slot": "button", "data-size": size, "data-variant": variant, "data-color": color, className: cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className })) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
+    var sizeProps = variant === "link"
+        ? { linkSize: size === "xl" ? "lg" : size, size: "none" }
+        : { size: size !== null && size !== void 0 ? size : "md", linkSize: "none" };
+    return (<Comp data-slot="button" data-size={size} data-variant={variant} data-color={color} className={cn(buttonVariants(__assign(__assign({ variant: variant, color: color }, sizeProps), { shape: shape })), className)} {...props}>
+      {startIcon && (<LUIcon size={startIconSizeValue} data-testid="start-icon" icon={startIcon}/>)}
+      {props.children}
+      {endIcon && (<LUIcon size={endIconSizeValue} data-testid="end-icon" icon={endIcon}/>)}
+    </Comp>);
 }
 export { Button, buttonVariants };

package/dist/src/components/Button/Button/Button.stories.d.ts

@@ -391,9 +391,10 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
         shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
@@ -691,13 +692,14 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
         shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
-    }>) => import("react/jsx-runtime").JSX.Element)[];
+    }>) => import("react").JSX.Element)[];
 };
 export default meta;
 type Story = StoryObj<typeof Button>;

package/dist/src/components/Button/Button/{Button.stories.js → Button.stories.jsx}

@@ -1,15 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, variant } from "./Button";
 import { buttonStyles } from "..";
 var meta = {
@@ -133,7 +121,7 @@ var meta = {
                     context.argTypes.shape.table.disable = isLink;
                 }
             }
-            return _jsx(Story, __assign({}, context));
+            return <Story {...context}/>;
         },
     ],
 };

package/dist/src/components/Button/Button/Button.test.jsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import { Dummy_label } from "../../../utils/constants";
+import { Button } from "./Button";
+describe("Button Component", function () {
+    it("renders default button component", function () {
+        render(<Button>{Dummy_label}</Button>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+});
+//   it("renders button with a custom label", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(
+//       screen.getByRole("button", { name: Dummy_label }),
+//     ).toBeInTheDocument();
+//   });
+//   it("calls onClick handler when clicked", () => {
+//     const handleClick = jest.fn();
+//     render(<Button onClick={handleClick}>Click</Button>);
+//     fireEvent.click(screen.getByRole("button"));
+//     expect(handleClick).toHaveBeenCalledTimes(1);
+//   });
+//   it("renders startIcon when provided", () => {
+//     render(<Button startIcon={<span>*</span>}>{Dummy_label}</Button>);
+//     expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+//   });
+//   it("renders endIcon when provided", () => {
+//     render(<Button endIcon={<span>*</span>}>{Dummy_label}</Button>);
+//     expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+//   });
+//   it("applies correct color, shape, and size classes", () => {
+//     render(
+//       <Button color="primary" shape="rounded-full" size="lg">
+//         {Dummy_label}
+//       </Button>,
+//     );
+//     const buttonElement = screen.getByRole("button");
+//     expect(buttonElement).toHaveClass(
+//       buttonColors["primary"],
+//       buttonShapes["rounded-full"],
+//       buttonSizes["lg"],
+//     );
+//   });
+//   it("applies additional className when provided", () => {
+//     render(<Button className="custom-class">{Dummy_label}</Button>);
+//     expect(screen.getByRole("button")).toHaveClass("custom-class");
+//   });
+//   it("renders without crashing when no props are provided", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(screen.getByRole("button")).toBeInTheDocument();
+//   });
+//   it("renders button with both startIcon and endIcon", () => {
+//     render(
+//       <Button startIcon={<span>*</span>} endIcon={<span>*</span>}>
+//         {Dummy_label}
+//       </Button>,
+//     );
+//     expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+//     expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+//   });
+//   it("does not render startIcon when not provided", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(screen.queryByTestId("start-icon")).not.toBeInTheDocument();
+//   });
+//   it("does not render endIcon when not provided", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(screen.queryByTestId("end-icon")).not.toBeInTheDocument();
+//   });
+//   it("renders correctly without a className prop", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     const buttonElement = screen.getByRole("button");
+//     expect(buttonElement).not.toHaveClass("custom-class");
+//   });
+// });

package/dist/src/components/Button/IconButton/IconButton.d.ts

@@ -16,5 +16,5 @@ declare function IconButton({ className, color, size, shape, variant, asChild, i
     asChild?: boolean;
     icon?: keyof typeof iconList;
     variant?: "fill" | "outline" | "ghost";
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export { IconButton, buttonVariants };

package/dist/src/components/Button/IconButton/{IconButton.js → IconButton.jsx}

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
@@ -67,6 +56,8 @@ function IconButton(_a) {
             ? buttonStyles.ghostColor[color]
             : buttonStyles.fillColor[color];
     var iconSize = getIconSize();
-    return (_jsx(Comp, __assign({ "data-slot": "button", className: cn(buttonVariants({ color: color, size: size, shape: shape, variant: variant, className: className }), extraClasses) }, props, { children: _jsx(LUIcon, { size: iconSize, "data-testid": "icon", icon: icon !== null && icon !== void 0 ? icon : "info" }) })));
+    return (<Comp data-slot="button" className={cn(buttonVariants({ color: color, size: size, shape: shape, variant: variant, className: className }), extraClasses)} {...props}>
+      <LUIcon size={iconSize} data-testid="icon" icon={icon !== null && icon !== void 0 ? icon : "info"}/>
+    </Comp>);
 }
 export { IconButton, buttonVariants };

package/dist/src/components/Button/IconButton/IconButton.stories.d.ts

@@ -706,7 +706,7 @@ declare const meta: {
         shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
         asChild?: boolean | undefined;
         icon?: keyof typeof iconList | undefined;
-    }>) => import("react/jsx-runtime").JSX.Element)[];
+    }>) => import("react").JSX.Element)[];
 };
 export default meta;
 type Story = StoryObj<typeof IconButton>;

package/dist/src/components/Button/IconButton/{IconButton.stories.js → IconButton.stories.jsx}

@@ -1,15 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { iconList } from "../../../utils/iconList";
 import { IconButton, variant } from "./IconButton";
 import { buttonStyles } from "..";
@@ -121,7 +109,7 @@ var meta = {
                                 : Object.keys(buttonStyles.fillColor);
                 }
             }
-            return _jsx(Story, __assign({}, context));
+            return <Story {...context}/>;
         },
     ],
 };

package/dist/src/components/Button/IconButton/{IconButton.test.js → IconButton.test.jsx}

@@ -1,29 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { IconButton } from "./IconButton";
 import { buttonStyles } from "..";
 describe("Icon Button Component", function () {
     it("renders icon button with required icon prop", function () {
-        render(_jsx(IconButton, { icon: "chart-simple" }));
+        render(<IconButton icon="chart-simple"/>);
         expect(screen.getByRole("button")).toBeInTheDocument();
     });
     it("calls onClick handler when clicked", function () {
         var handleClick = jest.fn();
-        render(_jsx(IconButton, { onClick: handleClick, icon: "chart-simple" }));
+        render(<IconButton onClick={handleClick} icon="chart-simple"/>);
         fireEvent.click(screen.getByRole("button"));
         expect(handleClick).toHaveBeenCalledTimes(1);
     });
     it("applies correct color, shape, and size classes", function () {
-        render(_jsx(IconButton, { color: "blue", shape: "rounded-full", size: "lg", icon: "chart-simple" }));
+        render(<IconButton color="blue" shape="rounded-full" size="lg" icon="chart-simple"/>);
         var buttonElement = screen.getByRole("button");
         expect(buttonElement).toHaveClass(buttonStyles.fillColor["blue"], buttonStyles.shape["rounded-full"], buttonStyles.iconButtonSize["lg"]);
     });
     it("applies additional className when provided", function () {
-        render(_jsx(IconButton, { className: "custom-class", icon: "chart-simple" }));
+        render(<IconButton className="custom-class" icon="chart-simple"/>);
         expect(screen.getByRole("button")).toHaveClass("custom-class");
     });
     it("renders without crashing when all required props are provided", function () {
-        render(_jsx(IconButton, { icon: "chart-simple" }));
+        render(<IconButton icon="chart-simple"/>);
         expect(screen.getByRole("button")).toBeInTheDocument();
     });
 });

package/dist/src/components/Button/index.d.ts

@@ -43,6 +43,7 @@ export declare const buttonStyles: {
     linkSize: {
         lg: string;
         md: string;
+        sm: string;
     };
     outlineColor: {
         blue: string;

package/dist/src/components/Button/index.js

@@ -43,8 +43,9 @@ export var buttonStyles = {
         disabled: "text-gray-300 hover:no-underline",
     },
     linkSize: {
-        lg: "!text-base !font-normal !leading-normal",
-        md: "!text-sm !font-normal !leading-5",
+        lg: "!text-lg",
+        md: "!text-base",
+        sm: "!text-sm",
     },
     outlineColor: {
         blue: "text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",

package/dist/src/components/Card/MultipleNews/MultiNews.d.ts

@@ -2,4 +2,4 @@ import { CardInterface } from "../type";
 export interface MultiNewsProps extends Omit<CardInterface, "href" | "type"> {
     onButtonClick?: () => void;
 }
-export declare const MultipleNewsCard: (props: MultiNewsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleNewsCard: (props: MultiNewsProps) => import("react").JSX.Element;

package/dist/src/components/Card/MultipleNews/MultiNews.jsx

@@ -0,0 +1,71 @@
+import LuImage from "../../Images/LuImage";
+import { Button } from "../../Button/Button/Button";
+import { Body } from "../../Typography/Body/body";
+import { Heading } from "../../Typography/Heading/heading";
+export var MultipleNewsCard = function (props) {
+    var item = props.item, image = props.image, btnLabel = props.btnLabel, editor = props.editor, _a = props.mediaPosition, mediaPosition = _a === void 0 ? "right" : _a, orientation = props.orientation, onButtonClick = props.onButtonClick;
+    // Common card media component
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<LuImage src={image} width={240} height={240} className={"object-cover w-full ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
+    };
+    // Common content section
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<div className={"flex flex-col !gap-2 ".concat(className)}>
+      <Heading variant="h4-600" className={"line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle)}>
+        {item === null || item === void 0 ? void 0 : item.title}
+      </Heading>
+
+      {(item === null || item === void 0 ? void 0 : item.short_description) && (<Body variant="body-xl" className={"".concat(item.description ? "line-clamp-1 text-gray-900" : "line-clamp-2 text-gray-600", "   ").concat(editor === null || editor === void 0 ? void 0 : editor.shortDescription)}>
+          {item === null || item === void 0 ? void 0 : item.short_description}
+        </Body>)}
+      <Body variant="body-lg" className={"text-gray-600 line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)} dangerouslySetInnerHTML={{
+                __html: item.description || "",
+            }}/>
+    </div>);
+    };
+    // Common button component with conditional shape
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<div>
+      {btnLabel && (<Button endIcon={"angle-right"} size={"sm"} {...(mediaPosition === "middle" && { shape: "rounded-full" })} className={"".concat(mediaPosition === "middle" && "shadow-md !font-semibold", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " ").concat(className)} onClick={onButtonClick}>
+          {btnLabel}
+        </Button>)}
+    </div>);
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"!p-5 bg-white rounded-2xl flex max-sm:flex-col ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <CardMedia className="w-full sm:max-w-48 aspect-square rounded-lg"/>
+        <div className="flex flex-col !gap-5 w-full">
+          <CardContent />
+
+          <ActionButton />
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"!p-4 bg-white rounded-2xl flex flex-col !gap-5 max-w-md shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-4")}>
+        {mediaPosition === "middle" && (<Body variant="body-lg" className={"text-gray-600 line-clamp-2  h-14 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)} dangerouslySetInnerHTML={{
+                __html: item.description || "",
+            }}/>)}
+        <CardMedia className="aspect-16/10"/>
+        <div className={"flex flex-col !gap-1"}>
+          <Heading variant="h4-700" className={"line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle)}>
+            {item === null || item === void 0 ? void 0 : item.title}
+          </Heading>
+
+          <Body aria-description="short-Description" variant={mediaPosition === "middle" ? "body-lg-500" : "body-xl"} className={"".concat(item.description || mediaPosition === "middle" ? "line-clamp-1 text-gray-600" : "line-clamp-2 h-14 text-gray-600", "   ").concat(editor === null || editor === void 0 ? void 0 : editor.shortDescription)}>
+            {item === null || item === void 0 ? void 0 : item.short_description}
+          </Body>
+
+          {mediaPosition !== "middle" && (<Body variant="body-lg" className={"text-gray-600 line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)} dangerouslySetInnerHTML={{
+                __html: item.description || "",
+            }}/>)}
+        </div>
+      </div>
+      <ActionButton />
+    </div>);
+};