linkedunion-design-kit 1.9.8 → 1.10.1

package/dist/src/components/Alerts/AlertDialog/index.d.ts

@@ -6,7 +6,7 @@ export declare const sizeOptions: Array<keyof typeof alertDialogVariants.size>;
 export declare const shadowOptions: Array<keyof typeof alertDialogVariants.shadow>;
 export declare const variantOptions: Array<keyof typeof alertDialogVariants.variant>;
 export declare const getButtonColor: (color: string) => string;
-export declare const getIconForColor: (color: string) => "info" | "check" | "circle-exclamation" | "star";
+export declare const getIconForColor: (color: string) => "check" | "info" | "circle-exclamation" | "star";
 export declare const getContentForColor: (color: string) => {
     title: string;
     description: string;

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

@@ -130,7 +130,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -422,7 +422,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

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

@@ -118,7 +118,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -418,7 +418,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

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

@@ -129,7 +129,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -428,7 +428,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

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

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

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

@@ -9,47 +9,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LuImage from "../../Images/LuImage";
-import Link from "next/link";
 import { Button } from "../../Button/Button/Button";
 import { Body } from "../../Typography/Body/body";
 import { Heading } from "../../Typography/Heading/heading";
-export var MultiNews = function (_a) {
-    var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "right" : _d, orientation = _a.orientation;
-    // Use destructuring to create cleaner code
-    var modifiedItem = item;
-    var modifiedEditor = editor;
-    // Only swap for middle position
-    if (mediaPosition === "middle") {
-        // Swap for item
-        modifiedItem = __assign(__assign({}, item), { description: item === null || item === void 0 ? void 0 : item.short_description, short_description: item === null || item === void 0 ? void 0 : item.description });
-        // Swap for editor
-        modifiedEditor = __assign(__assign({}, editor), { cardText: editor === null || editor === void 0 ? void 0 : editor.shortDescription, shortDescription: editor === null || editor === void 0 ? void 0 : editor.cardText });
-    }
+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 (_jsx(LuImage, { src: image, width: 240, height: 240, className: " object-cover w-full ".concat(className, " ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardImage), alt: "Image" }));
+        return (_jsx(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 (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h4-600", className: "line-clamp-1 capitalize ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardTitle), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.title }), _jsx(Body, { variant: "body-xl", className: "".concat(mediaPosition === "middle" ? "line-clamp-1" : "line-clamp-2 h-16", " ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardText), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.description })] }));
+        return (_jsxs("div", { className: "flex flex-col !gap-2 ".concat(className), children: [_jsx(Heading, { variant: "h4-600", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.short_description) && (_jsx(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), children: item === null || item === void 0 ? void 0 : item.short_description })), _jsx(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 || "",
+                    } })] }));
     };
     // Common button component with conditional shape
     var ActionButton = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (_jsx(Link, { href: href, passHref: true, className: className, children: _jsx(Button, __assign({ endIcon: "angle-right", size: mediaPosition === "middle" ? "xl" : "sm" }, (mediaPosition === "middle" && { shape: "rounded-full" }), { className: "".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardBtn), children: btnLabel })) }));
+        return (_jsx("div", { children: btnLabel && (_jsx(Button, __assign({ 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, children: btnLabel }))) }));
     };
-    // Optional subtitle component
-    var Subtitle = function () { return (_jsx(_Fragment, { children: mediaPosition === "middle" && (_jsx(Body, { variant: "body-xl", className: "line-clamp-4 h-32 ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.shortDescription), dangerouslySetInnerHTML: {
-                __html: modifiedItem.short_description || "",
-            } })) })); };
     // Horizontal layout
     if (orientation === "horizontal") {
-        return (_jsxs("div", { className: "!p-5 bg-white rounded-2xl flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.card), children: [_jsx(CardMedia, { className: "max-w-48 aspect-square rounded-lg" }), _jsxs("div", { className: "flex flex-col !gap-5 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, {})] })] }));
+        return (_jsxs("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), children: [_jsx(CardMedia, { className: "w-full sm:max-w-48 aspect-square rounded-lg" }), _jsxs("div", { className: "flex flex-col !gap-5 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, {})] })] }));
     }
     // Vertical layout
-    return (_jsxs("div", { className: "p-8 bg-white rounded-2xl flex flex-col !gap-5 max-w-md shadow-lg ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.card), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-4"), children: [_jsx(Subtitle, {}), _jsx(CardMedia, { className: "aspect-16/10" }), _jsx(CardContent, {})] }), _jsx(ActionButton, {})] }));
+    return (_jsxs("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), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-4"), children: [mediaPosition === "middle" && (_jsx(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 || "",
+                        } })), _jsx(CardMedia, { className: "aspect-16/10" }), _jsxs("div", { className: "flex flex-col !gap-1", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(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), children: item === null || item === void 0 ? void 0 : item.short_description }), mediaPosition !== "middle" && (_jsx(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 || "",
+                                } }))] })] }), _jsx(ActionButton, {})] }));
 };

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

@@ -1,8 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import Card from "../card";
-declare const meta: Meta<typeof Card>;
+import { CardProps } from "../card";
+type MultiNewsCardProps = Extract<CardProps, {
+    type: "multipleNews";
+}>;
+declare const meta: Meta<MultiNewsCardProps>;
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<MultiNewsCardProps>;
 export declare const CardHorizontalLeft: Story;
 export declare const CardHorizontalRight: Story;
 export declare const CardVerticalTop: Story;

package/dist/src/components/Card/MultipleNews/MultiNews.stories.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, } from "../../../utils/constants";
 import { OrientationEnum } from "../../../utils/enums";
 import Card from "../card";
 var meta = {
@@ -20,6 +20,12 @@ var meta = {
         layout: "centered",
     },
     argTypes: {
+        type: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
         orientation: {
             control: "select",
             options: [OrientationEnum.horizontal, OrientationEnum.vertical],
@@ -29,29 +35,20 @@ var meta = {
             options: ["left", "right", "top", "middle", "bottom"],
             description: "For horizontal: use left/right. For vertical: use top/middle/bottom",
         },
-        theme: {
-            table: {
-                disable: true,
-            },
-        },
-        altText: {
-            table: {
-                disable: true,
-            },
-        },
     },
     decorators: [
         function (Story, context) {
             // Dynamically update mediaPosition options based on orientation
-            var orientation = context.args.orientation;
+            var args = context.args;
+            var orientation = args.orientation;
             if (orientation === OrientationEnum.horizontal) {
                 if (context.argTypes.mediaPosition) {
                     context.argTypes.mediaPosition.options = ["left", "right"];
                 }
                 // Reset mediaPosition if it's not valid for horizontal
-                if (context.args.mediaPosition &&
-                    !["left", "right"].includes(context.args.mediaPosition)) {
-                    context.args.mediaPosition = "left";
+                if (args.mediaPosition &&
+                    !["left", "right"].includes(args.mediaPosition)) {
+                    args.mediaPosition = "left";
                 }
             }
             else if (orientation === OrientationEnum.vertical) {
@@ -59,18 +56,17 @@ var meta = {
                     context.argTypes.mediaPosition.options = ["top", "middle", "bottom"];
                 }
                 // Reset mediaPosition if it's not valid for vertical
-                if (context.args.mediaPosition &&
-                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
-                    context.args.mediaPosition = "top";
+                if (args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(args.mediaPosition)) {
+                    args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, __assign({}, context.args));
+            return _jsx(Story, {});
         },
     ],
 };
 export default meta;
 var baseCardArgs = {
-    type: "multipleNews",
     item: {
         image: Dummy_Image,
         title: Dummy_Title,
@@ -78,7 +74,7 @@ var baseCardArgs = {
         short_description: Dummy_Subtitle,
     },
     image: Dummy_Image,
-    href: Dummy_Url,
+    onButtonClick: function () { return alert("Button clicked"); },
     btnLabel: "View More",
     editor: {
         card: "",
@@ -86,20 +82,21 @@ var baseCardArgs = {
         cardTitle: "",
         cardText: "",
         cardBtn: "",
+        shortDescription: "",
     },
 };
 export var CardHorizontalLeft = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
 };
 export var CardHorizontalRight = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
 };
 export var CardVerticalTop = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
 };
 export var CardVerticalBottom = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
 };
 export var CardVerticalMiddle = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
 };

package/dist/src/components/Card/PostByCategory/PostByCategory.d.ts

@@ -1,2 +1,5 @@
 import { CardInterface } from "../type";
-export declare const PostByCategory: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
+export interface PostByCategoryProps extends Omit<CardInterface, "href" | "type"> {
+    onButtonClick?: () => void;
+}
+export declare const PostByCategory: ({ item, image, btnLabel, onButtonClick, editor, mediaPosition, orientation, }: PostByCategoryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/PostByCategory/PostByCategory.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LuImage from "../../Images/LuImage";
-import Link from "next/link";
 import { Heading } from "../../Typography/Heading/heading";
 import { Body } from "../../Typography/Body/body";
 import { Button } from "../../Button/Button/Button";
 export var PostByCategory = function (_a) {
-    var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
+    var item = _a.item, image = _a.image, btnLabel = _a.btnLabel, onButtonClick = _a.onButtonClick, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
     // Normalize mediaPosition based on orientation
     var safeMediaPosition = orientation === "horizontal"
         ? mediaPosition === "left" || mediaPosition === "right"
@@ -27,7 +26,7 @@ export var PostByCategory = function (_a) {
     // Common button component
     var CardButton = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (_jsx(Link, { href: href || "#", passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "sm", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " ").concat(className), children: btnLabel }) }));
+        return (_jsx(Button, { endIcon: "angle-right", size: "sm", className: "w-fit ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), onClick: onButtonClick, children: btnLabel }));
     };
     // Horizontal layout
     if (orientation === "horizontal") {

package/dist/src/components/Card/PostByCategory/PostByCategory.stories.d.ts

@@ -1,8 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import Card from "../card";
-declare const meta: Meta<typeof Card>;
+import { CardProps } from "../card";
+type PostByCategoryCardProps = Extract<CardProps, {
+    type: "postByCategory";
+}>;
+declare const meta: Meta<PostByCategoryCardProps>;
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<PostByCategoryCardProps>;
 export declare const PostByCategoryHorizontalLeft: Story;
 export declare const PostByCategoryHorizontalRight: Story;
 export declare const PostByCategoryVerticalTop: Story;

package/dist/src/components/Card/PostByCategory/PostByCategory.stories.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, } from "../../../utils/constants";
 import { OrientationEnum } from "../../../utils/enums";
 import Card from "../card";
 var meta = {
@@ -20,6 +20,12 @@ var meta = {
         layout: "centered",
     },
     argTypes: {
+        type: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
         orientation: {
             control: "select",
             options: [OrientationEnum.horizontal, OrientationEnum.vertical],
@@ -29,29 +35,20 @@ var meta = {
             options: ["left", "right", "top", "middle", "bottom"],
             description: "For horizontal: use left/right. For vertical: use top/middle/bottom",
         },
-        theme: {
-            table: {
-                disable: true,
-            },
-        },
-        altText: {
-            table: {
-                disable: true,
-            },
-        },
     },
     decorators: [
         function (Story, context) {
             // Dynamically update mediaPosition options based on orientation
-            var orientation = context.args.orientation;
+            var args = context.args;
+            var orientation = args.orientation;
             if (orientation === OrientationEnum.horizontal) {
                 if (context.argTypes.mediaPosition) {
                     context.argTypes.mediaPosition.options = ["left", "right"];
                 }
                 // Reset mediaPosition if it's not valid for horizontal
-                if (context.args.mediaPosition &&
-                    !["left", "right"].includes(context.args.mediaPosition)) {
-                    context.args.mediaPosition = "left";
+                if (args.mediaPosition &&
+                    !["left", "right"].includes(args.mediaPosition)) {
+                    args.mediaPosition = "left";
                 }
             }
             else if (orientation === OrientationEnum.vertical) {
@@ -59,19 +56,18 @@ var meta = {
                     context.argTypes.mediaPosition.options = ["top", "bottom"];
                 }
                 // Reset mediaPosition if it's not valid for vertical
-                if (context.args.mediaPosition &&
-                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
-                    context.args.mediaPosition = "top";
+                if (args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(args.mediaPosition)) {
+                    args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, __assign({}, context.args));
+            return _jsx(Story, {});
         },
     ],
 };
 export default meta;
 // Base card args
 var baseCardArgs = {
-    type: "postByCategory",
     item: {
         image: Dummy_Image,
         title: Dummy_Title,
@@ -79,7 +75,7 @@ var baseCardArgs = {
         short_description: Dummy_Subtitle,
     },
     image: Dummy_Image,
-    href: Dummy_Url,
+    onButtonClick: function () { return alert("Button clicked"); },
     btnLabel: "View More",
     editor: {
         card: "",
@@ -91,17 +87,17 @@ var baseCardArgs = {
 };
 // PostByCategory Card Stories
 export var PostByCategoryHorizontalLeft = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
 };
 export var PostByCategoryHorizontalRight = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
 };
 export var PostByCategoryVerticalTop = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
 };
 export var PostByCategoryVerticalMiddle = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
 };
 export var PostByCategoryVerticalBottom = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
 };

package/dist/src/components/Card/SinglePost/SinglePost.stories.d.ts

@@ -1,7 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { SinglePost } from "./SinglePost";
-declare const meta: Meta<typeof SinglePost>;
+import { CardProps } from "../card";
+type SinglePostCardProps = Extract<CardProps, {
+    type: "singlePost";
+}>;
+declare const meta: Meta<SinglePostCardProps>;
 export default meta;
-type Story = StoryObj<typeof SinglePost>;
+type Story = StoryObj<SinglePostCardProps>;
 export declare const SinglePostHorizontalLeft: Story;
 export declare const SinglePostHorizontalRight: Story;

package/dist/src/components/Card/SinglePost/SinglePost.stories.js

@@ -9,15 +9,21 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { SinglePost } from "./SinglePost";
+import Card from "../card";
 import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 var meta = {
     title: "Components/Cards/SinglePost",
-    component: SinglePost,
+    component: Card,
     parameters: {
         layout: "centered",
     },
     argTypes: {
+        type: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
         orientation: {
             table: {
                 disable: true,
@@ -28,21 +34,10 @@ var meta = {
             options: ["left", "right"],
             description: "Position of media in horizontal layout",
         },
-        theme: {
-            table: {
-                disable: true,
-            },
-        },
-        altText: {
-            table: {
-                disable: true,
-            },
-        },
     },
 };
 export default meta;
 var baseCardArgs = {
-    type: "singlePost",
     item: {
         image: Dummy_Image,
         title: Dummy_Title,
@@ -61,8 +56,8 @@ var baseCardArgs = {
     },
 };
 export var SinglePostHorizontalLeft = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+    args: __assign(__assign({ type: "singlePost" }, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
 };
 export var SinglePostHorizontalRight = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+    args: __assign(__assign({ type: "singlePost" }, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
 };

package/dist/src/components/Card/card.d.ts

@@ -1,3 +1,21 @@
-import { CardInterface } from "./type";
-declare const Card: ({ item, image, href, btnLabel, editor, mediaPosition, type, orientation, theme, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
+import type { MultiNewsProps } from "./MultipleNews/MultiNews";
+import type { CardInterface } from "./type";
+import { PostByCategoryProps } from "./PostByCategory/PostByCategory";
+import { PhotoGalleryProps } from "./photoGallery/PhotoGallery";
+import { PhotoAlbumProps } from "./photoAlbum/PhotoAlbum";
+type CardTypesWithCardInterface = "contactProfile" | "singlePost";
+export type CardProps = ({
+    type: "multipleNews";
+} & MultiNewsProps) | ({
+    type: "photoGallery";
+} & PhotoGalleryProps) | ({
+    type: "photoAlbum";
+} & PhotoAlbumProps) | ({
+    type: "postByCategory";
+} & PostByCategoryProps) | {
+    [K in CardTypesWithCardInterface]: {
+        type: K;
+    } & CardInterface;
+}[CardTypesWithCardInterface];
+declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Card;

package/dist/src/components/Card/card.js

@@ -1,35 +1,31 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { PostByCategory } from "./PostByCategory/PostByCategory";
-import { MultiNews } from "./MultipleNews/MultiNews";
+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 { PostByCategory, } from "./PostByCategory/PostByCategory";
+import { MultipleNewsCard } from "./MultipleNews/MultiNews";
 import { SinglePost } from "./SinglePost/SinglePost";
-import { Dummy_Url } from "../../utils/constants";
 import { ContactProfile } from "./contactProfile/ContactProfile";
 import { PhotoGallery } from "./photoGallery/PhotoGallery";
 import { PhotoAlbum } from "./photoAlbum/PhotoAlbum";
-var Card = function (_a) {
-    var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? Dummy_Url : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "left" : _d, _e = _a.type, type = _e === void 0 ? "postByCategory" : _e, _f = _a.orientation, orientation = _f === void 0 ? "horizontal" : _f, _g = _a.theme, theme = _g === void 0 ? "theme1" : _g;
-    var cardProps = {
-        item: item,
-        href: href,
-        image: image,
-        btnLabel: btnLabel,
-        editor: editor,
-        mediaPosition: mediaPosition,
-        orientation: orientation,
-        theme: theme,
-    };
-    // Using object approach for better performance and cleaner code
-    var cardComponents = {
-        postByCategory: PostByCategory,
-        contactProfile: ContactProfile,
-        multipleNews: MultiNews,
-        singlePost: SinglePost,
-        photoGallery: PhotoGallery,
-        photoAlbum: PhotoAlbum,
-    };
-    return (_jsx(_Fragment, { children: type && cardComponents[type]
-            ? React.createElement(cardComponents[type], cardProps)
-            : null }));
+var cardComponents = {
+    postByCategory: PostByCategory,
+    contactProfile: ContactProfile,
+    multipleNews: MultipleNewsCard,
+    singlePost: SinglePost,
+    photoGallery: PhotoGallery,
+    photoAlbum: PhotoAlbum,
+};
+var Card = function (props) {
+    var Component = cardComponents[props.type];
+    return Component ? _jsx(Component, __assign({}, props)) : null;
 };
 export default Card;

package/dist/src/components/Card/contactProfile/ContactProfile.stories.d.ts

@@ -1,8 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { ContactProfile } from "./ContactProfile";
-declare const meta: Meta<typeof ContactProfile>;
+import { CardProps } from "../card";
+type ContactProfileCardProps = Extract<CardProps, {
+    type: "contactProfile";
+}>;
+declare const meta: Meta<ContactProfileCardProps>;
 export default meta;
-type Story = StoryObj<typeof ContactProfile>;
+type Story = StoryObj<ContactProfileCardProps>;
 export declare const ContactProfileHorizontalLeft: Story;
 export declare const ContactProfileHorizontalRight: Story;
 export declare const ContactProfileVerticalTop: Story;

package/dist/src/components/Card/contactProfile/ContactProfile.stories.js

@@ -12,14 +12,20 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Image, Dummy_Para, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 import { OrientationEnum } from "../../../utils/enums";
-import { ContactProfile } from "./ContactProfile";
+import Card from "../card";
 var meta = {
     title: "Components/Cards/ContactProfile",
-    component: ContactProfile,
+    component: Card,
     parameters: {
         layout: "centered",
     },
     argTypes: {
+        type: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
         orientation: {
             control: "select",
             options: [OrientationEnum.horizontal, OrientationEnum.vertical],
@@ -29,29 +35,20 @@ var meta = {
             options: ["left", "right", "top", "middle", "bottom"],
             description: "For horizontal: use left/right. For vertical: use top/middle/bottom",
         },
-        theme: {
-            table: {
-                disable: true,
-            },
-        },
-        altText: {
-            table: {
-                disable: true,
-            },
-        },
     },
     decorators: [
         function (Story, context) {
             // Dynamically update mediaPosition options based on orientation
-            var orientation = context.args.orientation;
+            var args = context.args;
+            var orientation = args.orientation;
             if (orientation === OrientationEnum.horizontal) {
                 if (context.argTypes.mediaPosition) {
                     context.argTypes.mediaPosition.options = ["left", "right"];
                 }
                 // Reset mediaPosition if it's not valid for horizontal
-                if (context.args.mediaPosition &&
-                    !["left", "right"].includes(context.args.mediaPosition)) {
-                    context.args.mediaPosition = "left";
+                if (args.mediaPosition &&
+                    !["left", "right"].includes(args.mediaPosition)) {
+                    args.mediaPosition = "left";
                 }
             }
             else if (orientation === OrientationEnum.vertical) {
@@ -59,18 +56,17 @@ var meta = {
                     context.argTypes.mediaPosition.options = ["top", "middle", "bottom"];
                 }
                 // Reset mediaPosition if it's not valid for vertical
-                if (context.args.mediaPosition &&
-                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
-                    context.args.mediaPosition = "top";
+                if (args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(args.mediaPosition)) {
+                    args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, __assign({}, context.args));
+            return _jsx(Story, {});
         },
     ],
 };
 export default meta;
 var baseCardArgs = {
-    type: "contactProfile",
     item: {
         image: Dummy_Image,
         title: Dummy_Title,
@@ -88,17 +84,17 @@ var baseCardArgs = {
     },
 };
 export var ContactProfileHorizontalLeft = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
 };
 export var ContactProfileHorizontalRight = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
 };
 export var ContactProfileVerticalTop = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
 };
 export var ContactProfileVerticalMiddle = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
 };
 export var ContactProfileVerticalBottom = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
 };

package/dist/src/components/Card/photoAlbum/PhotoAlbum.d.ts

@@ -1,2 +1,7 @@
 import { CardInterface } from "../type";
-export declare const PhotoAlbum: ({ image, item, altText, editor, theme, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
+import { Themes } from "./PhotoAlbum.stories";
+export interface PhotoAlbumProps extends Omit<CardInterface, "href" | "orientation" | "mediaPosition" | "btnLabel"> {
+    altText?: string;
+    theme?: (typeof Themes)[number];
+}
+export declare const PhotoAlbum: ({ image, item, altText, editor, theme, }: PhotoAlbumProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/photoAlbum/PhotoAlbum.js

@@ -4,7 +4,7 @@ import { Heading } from "../../../components/Typography/Heading/heading";
 import LUIcon from "../../../components/Icons/LUIcon";
 import { AvatarGroup } from "../../Avatar/AvatarGroup/AvatarGroup";
 export var PhotoAlbum = function (_a) {
-    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Album" : _b, editor = _a.editor, theme = _a.theme;
+    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Album" : _b, editor = _a.editor, _c = _a.theme, theme = _c === void 0 ? "theme1" : _c;
     var hasImages = Array.isArray(item === null || item === void 0 ? void 0 : item.images) && item.images.length > 0;
     return (_jsxs("div", { className: "group relative max-w-md cursor-pointer ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute inset-0 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " bg-linear-to-t from-black to-transparent") }), theme === "theme2" ? (_jsxs("div", { className: "absolute bottom-0 right-0 w-full bg-black/75 !px-5 !py-3 flex items-center justify-between duration-300\n    group-hover:bg-transparent", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), hasImages && (_jsx("div", { children: _jsx(AvatarGroup, { images: ((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
                                 id: img.gallery_id,

package/dist/src/components/Card/photoAlbum/PhotoAlbum.stories.d.ts

@@ -1,5 +1,6 @@
 import { Meta } from "@storybook/react";
-import { CardInterface } from "../type";
+import type { CardProps } from "../card";
+export declare const Themes: readonly ["theme1", "theme2"];
 declare const _default: Meta;
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardProps>;

package/dist/src/components/Card/photoAlbum/PhotoAlbum.stories.js

@@ -12,17 +12,25 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
 import Card from "../card";
-import { PhotoAlbum } from "./PhotoAlbum";
+export var Themes = ["theme1", "theme2"];
 export default {
     title: "Components/Cards/PhotoAlbum",
-    component: PhotoAlbum,
+    component: Card,
     tags: ["autodocs"],
+    argTypes: {
+        theme: {
+            control: "select",
+            options: Themes,
+            description: "Select the card theme",
+        },
+    },
 };
 var Template = function (args) { return _jsx(Card, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
     type: "photoAlbum",
     theme: "theme1",
+    altText: "Photo Album",
     item: {
         title: Dummy_Title,
         images: [
@@ -39,10 +47,10 @@ Default.args = {
                 description: "This is another sample image description.",
             },
             {
-                gallery_name: "Another Gallery",
+                gallery_name: "Third Gallery",
                 gallery_image: Dummy_Image,
-                gallery_id: 2,
-                description: "https://randomuser.me/api/portraits/men/45.jpg",
+                gallery_id: 3,
+                description: "This is a third sample image description.",
             },
         ],
     },
@@ -54,28 +62,3 @@ Default.args = {
         cardText: "",
     },
 };
-Default.argTypes = {
-    type: {
-        control: false,
-        table: {
-            type: { summary: "string" },
-            defaultValue: {
-                summary: "photoAlbum",
-            },
-        },
-    },
-    theme: {
-        control: {
-            type: "select",
-            labels: ["theme1", "theme2"],
-        },
-        options: ["theme1", "theme2"],
-        defaultValue: {
-            summary: "theme1",
-        },
-    },
-    href: { control: false },
-    btnLabel: { control: false },
-    mediaPosition: { control: false },
-    orientation: { control: false },
-};

package/dist/src/components/Card/photoGallery/PhotoGallery.d.ts

@@ -1,2 +1,5 @@
 import { CardInterface } from "../type";
-export declare const PhotoGallery: ({ image, item, altText, editor, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
+export interface PhotoGalleryProps extends Omit<CardInterface, "href" | "orientation" | "mediaPosition" | "btnLabel"> {
+    altText?: string;
+}
+export declare const PhotoGallery: ({ image, item, altText, editor, }: PhotoGalleryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/photoGallery/PhotoGallery.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import { CardInterface } from "../type";
+import { CardProps } from "../card";
 declare const _default: Meta;
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardProps>;

package/dist/src/components/Card/photoGallery/PhotoGallery.stories.js

@@ -10,13 +10,23 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+// import { CardInterface } from "../type";
 import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
 import Card from "../card";
-import { PhotoGallery } from "./PhotoGallery";
 export default {
     title: "Components/Cards/PhotoGallery",
-    component: PhotoGallery,
+    component: Card,
     tags: ["autodocs"],
+    argTypes: {
+        altText: {
+            control: { type: "text", disabled: true },
+            description: 'Alternative text for the image (default: "Photo Gallery")',
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Photo Gallery" },
+            },
+        },
+    },
 };
 var Template = function (args) { return _jsx(Card, __assign({}, args)); };
 export var Default = Template.bind({});
@@ -26,6 +36,7 @@ Default.args = {
         title: Dummy_Title,
     },
     image: Dummy_Image,
+    altText: "Photo Gallery",
     editor: {
         card: "",
         cardImage: "",
@@ -33,19 +44,3 @@ Default.args = {
         cardText: "",
     },
 };
-Default.argTypes = {
-    type: {
-        control: false,
-        table: {
-            type: { summary: "string" },
-            defaultValue: {
-                summary: "photoGallery",
-            },
-        },
-    },
-    href: { control: false },
-    btnLabel: { control: false },
-    mediaPosition: { control: false },
-    orientation: { control: false },
-    theme: { control: false },
-};

package/dist/src/components/Card/type.d.ts

@@ -29,6 +29,4 @@ export interface CardInterface {
     editor?: EditorInterface;
     type?: "postByCategory" | "contactProfile" | "multipleNews" | "singlePost" | "photoGallery" | "photoAlbum";
     orientation?: "horizontal" | "vertical";
-    altText?: string;
-    theme?: "theme1" | "theme2";
 }

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

@@ -3,7 +3,7 @@ import { sweetAlertVariants } from "./SweetAlert";
 export declare const colorOptions: Array<keyof typeof sweetAlertVariants.color>;
 export declare const shadowOptions: Array<keyof typeof sweetAlertVariants.shadow>;
 export declare const variantOptions: Array<keyof typeof sweetAlertVariants.variant>;
-export declare const getIconForColor: (color: string) => "info" | "check" | "circle-exclamation" | "star" | "question";
+export declare const getIconForColor: (color: string) => "check" | "info" | "circle-exclamation" | "star" | "question";
 export declare const getContentForColor: (color: string) => {
     title: string;
     description: string;

package/dist/styles/global.css

@@ -444,12 +444,6 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
-  .line-clamp-4 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 4;
-  }
   .block {
     display: block;
   }
@@ -674,9 +668,6 @@
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
-  .h-32 {
-    height: calc(var(--spacing) * 32);
-  }
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -851,9 +842,6 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
-  .max-w-48 {
-    max-width: calc(var(--spacing) * 48);
-  }
   .max-w-\[17ch\] {
     max-width: 17ch;
   }
@@ -1891,6 +1879,10 @@
     --tw-font-weight: var(--font-weight-normal) !important;
     font-weight: var(--font-weight-normal) !important;
   }
+  .\!font-semibold {
+    --tw-font-weight: var(--font-weight-semibold) !important;
+    font-weight: var(--font-weight-semibold) !important;
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -2199,6 +2191,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4140,6 +4136,11 @@
       width: 100%;
     }
   }
+  .max-sm\:flex-col {
+    @media (width < 40rem) {
+      flex-direction: column;
+    }
+  }
   .sm\:col-span-2 {
     @media (width >= 40rem) {
       grid-column: span 2 / span 2;
@@ -4155,6 +4156,11 @@
       max-height: 320px;
     }
   }
+  .sm\:max-w-48 {
+    @media (width >= 40rem) {
+      max-width: calc(var(--spacing) * 48);
+    }
+  }
   .sm\:max-w-lg {
     @media (width >= 40rem) {
       max-width: var(--container-lg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.9.8",
+  "version": "1.10.1",
   "private": false,
   "files": [
     "dist",