linkedunion-design-kit 1.7.2 → 1.7.4

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

@@ -34,10 +34,10 @@ export var color = {
     gray: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-300 active:bg-gray-800 disabled:bg-gray-100 disabled:text-gray-400",
 };
 export var size = {
-    xl: "!py-3.5 !px-6 text-base font-normal leading-normal",
-    lg: "!py-3 !px-5 text-base font-normal leading-normal",
-    md: "!py-2.5 !px-5 text-sm font-normal leading-5",
-    sm: "!py-2 !px-3 text-sm font-normal leading-5",
+    xl: "!py-3.5 !px-6 !text-base !font-normal !leading-normal",
+    lg: "!py-3 !px-5 !text-base !font-normal !leading-normal",
+    md: "!py-2.5 !px-5 !text-sm !font-normal !leading-5",
+    sm: "!py-2 !px-3 !text-sm !font-normal !leading-5",
 };
 export var shape = {
     "rounded-sm": "!rounded-sm",

package/dist/src/components/Card/{MultiNews.d.ts → MultipleNews/MultiNews.d.ts}

@@ -1,2 +1,2 @@
-import { CardInterface } from "./type";
+import { CardInterface } from "../type";
 export declare const MultiNews: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import LuImage from "../../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../../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;
+    // Create modified item with shuffled subtitle and description when mediaPosition is middle
+    var modifiedItem = mediaPosition === "middle"
+        ? __assign(__assign({}, item), { description: item.subtitle, subtitle: item.description }) : item;
+    // 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(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: "h5-700", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.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(editor === null || editor === void 0 ? void 0 : editor.cardText), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.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" : "lg" }, (mediaPosition === "middle" && { shape: "rounded-full" }), { className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), 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(editor === null || editor === void 0 ? void 0 : editor.cardSubtitle), dangerouslySetInnerHTML: {
+                __html: modifiedItem.subtitle || "",
+            } })) })); };
+    // 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(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "max-w-40 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(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-5"), children: [_jsx(Subtitle, {}), _jsx(CardMedia, { className: "aspect-16/10" }), _jsx(CardContent, {})] }), _jsx(ActionButton, {})] }));
+};

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

@@ -0,0 +1,73 @@
+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 LuImage from "../../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../../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;
+    // Create modified item with shuffled subtitle and description when mediaPosition is middle
+    var modifiedItem = mediaPosition === "middle"
+        ? __assign(__assign({}, item), { description: item.subtitle, subtitle: item.description }) : item;
+    // 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-1 ".concat(className)}>
+      <Heading variant="h5-700" className={"line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle)}>
+        {modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.title}
+      </Heading>
+      <Body variant="body-xl" className={"".concat(mediaPosition === "middle" ? "line-clamp-1" : "line-clamp-2 h-16", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+        {modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.description}
+      </Body>
+    </div>);
+    };
+    // Common button component with conditional shape
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<Link href={href} passHref className={className}>
+      <Button endIcon={"angle-right"} size={mediaPosition === "middle" ? "xl" : "lg"} {...(mediaPosition === "middle" && { shape: "rounded-full" })} className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn)}>
+        {btnLabel}
+      </Button>
+    </Link>);
+    };
+    // Optional subtitle component
+    var Subtitle = function () { return (<>
+      {mediaPosition === "middle" && (<Body variant="body-xl" className={"line-clamp-4 h-32 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardSubtitle)} dangerouslySetInnerHTML={{
+                __html: modifiedItem.subtitle || "",
+            }}/>)}
+    </>); };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"!p-5 bg-white rounded-2xl flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <CardMedia className="max-w-40 aspect-square rounded-lg"/>
+        <div className="flex flex-col !gap-5 w-full">
+          <CardContent />
+          <ActionButton />
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"p-8 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-5")}>
+        <Subtitle />
+        <CardMedia className="aspect-16/10"/>
+        <CardContent />
+      </div>
+      <ActionButton />
+    </div>);
+};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Card from "../card";
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const CardHorizontalLeft: Story;
+export declare const CardHorizontalRight: Story;
+export declare const CardVerticalTop: Story;
+export declare const CardVerticalBottom: Story;

package/dist/src/components/Card/{MultiNews.stories.js → MultipleNews/MultiNews.stories.js}

@@ -9,11 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { MultiNews } from "./MultiNews";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import Card from "../card";
 var meta = {
     title: "Components/NewCard/MultiNews",
-    component: MultiNews,
+    component: Card,
     parameters: {
         layout: "centered",
     },
@@ -38,15 +38,15 @@ var baseCardArgs = {
         cardBtn: "",
     },
 };
-export var MultiNewsHorizontalLeft = {
+export var CardHorizontalLeft = {
     args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
 };
-export var MultiNewsHorizontalRight = {
+export var CardHorizontalRight = {
     args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
 };
-export var MultiNewsVerticalTop = {
+export var CardVerticalTop = {
     args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
 };
-export var MultiNewsVerticalBottom = {
+export var CardVerticalBottom = {
     args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
 };

package/dist/src/components/Card/{MultiNews.stories.jsx → MultipleNews/MultiNews.stories.jsx}

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { MultiNews } from "./MultiNews";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 var meta = {
     title: "Components/NewCard/MultiNews",
     component: MultiNews,

package/dist/src/components/Card/PhotoGallery.jsx

@@ -0,0 +1,17 @@
+import LUIcon from "../Icons/LUIcon";
+import LuImage from "../Images/LuImage";
+import { Heading } from "../Typography/Heading/heading";
+export var PhotoGallery = function (_a) {
+    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Gallery" : _b, editor = _a.editor;
+    return (<div className={"group relative max-w-md max-h-md ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)}>
+      <LuImage src={image} width={448} height={448} alt={altText} className={"aspect-square object-cover transition-transform"}/>
+      <div className={"absolute ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " inset-0 bg-linear-to-t from-black to-transparent")}></div>
+      <Heading variant="h4-700" className={"absolute line-clamp-1 text-white bottom-4 uppercase !px-5 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+        {item === null || item === void 0 ? void 0 : item.title}
+      </Heading>
+      {/* Search icon - appears on hover */}
+      <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:!opacity-100 transition-opacity duration-300 ease-out">
+        <LUIcon icon="magnifying-glass" size="4xl" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100")}/>
+      </div>
+    </div>);
+};

package/dist/src/components/Card/PhotoGallery.stories.jsx

@@ -0,0 +1,34 @@
+import { PhotoGallery } from "./PhotoGallery";
+import { Dummy_Image, Dummy_Title } from "../../utils/constants";
+import Card from "./card";
+export default {
+    title: "Components/NewCard/PhotoGallery",
+    component: PhotoGallery,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return <Card {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    type: "photoGallery",
+    item: {
+        title: Dummy_Title,
+    },
+    image: Dummy_Image,
+    editor: {
+        card: "",
+        cardImage: "",
+        cardOverlay: "",
+        cardText: "",
+    },
+};
+Default.argTypes = {
+    type: {
+        control: false,
+        table: {
+            type: { summary: "string" },
+            defaultValue: {
+                summary: "photoGallery",
+            },
+        },
+    },
+};

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

@@ -16,13 +16,13 @@ export var PostByCategory = function (_a) {
     // Common card media component to avoid duplication
     var CardMedia = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (<LuImage src={image} width={240} height={240} className={"".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
+        return (<LuImage src={image} width={240} height={240} className={"!rounded-lg ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
     };
     // Common content section component
     var CardContent = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
         return (<div className={"flex flex-col !gap-1 ".concat(className, " ")}>
-      <Heading variant="h5-700" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " line-clamp-1")}>
+      <Heading variant="h5-700" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0")}>
         {item === null || item === void 0 ? void 0 : item.title}
       </Heading>
       <Body variant="body-md" className={" ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
@@ -34,26 +34,26 @@ export var PostByCategory = function (_a) {
     var CardButton = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
         return (<Link href={href || "#"} passHref>
-      <Button endIcon={"angle-right"} size="lg" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " max-sm:w-full ").concat(className)}>
+      <Button endIcon={"angle-right"} size="lg" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " ").concat(className)}>
         {btnLabel}
       </Button>
     </Link>);
     };
     // Horizontal layout
     if (orientation === "horizontal") {
-        return (<div className={"!p-5 rounded-xl grid grid-cols-1 sm:grid-cols-3 max-w-5xl !gap-5 items-center drop-shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
-        <CardMedia className={"".concat(safeMediaPosition === "right" && " order-last", " w-full aspect-5/4 sm:aspect-square !rounded-lg object-cover")}/>
-        <div className="flex flex-col !gap-3 md:!gap-5 col-span-2 text-center sm:!text-left h-full justify-center">
+        return (<div className={"!p-5 rounded-xl grid grid-cols-1 sm:grid-cols-3 max-w-5xl !gap-5 items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <CardMedia className={"".concat(safeMediaPosition === "right" && " order-last", " w-full aspect-5/4 sm:aspect-square  object-cover")}/>
+        <div className="flex flex-col !gap-1 md:!gap-5 sm:col-span-2 text-center sm:!text-left h-full justify-center">
           <CardContent />
-          <CardButton className="max-lg!py-2 max-lg!px-3"/>
+          <CardButton />
         </div>
       </div>);
     }
     // Vertical layout
-    return (<div className={"p-8 rounded-xl inline-flex flex-col !gap-5 max-w-[480px] items-center drop-shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
-      <div className={"flex ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center")}>
+    return (<div className={"p-8 rounded-xl flex flex-col !gap-5 max-w-[480px] items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center")}>
         <CardMedia className="w-full h-full aspect-5/4 object-cover"/>
-        <CardContent />
+        <CardContent className="h-20"/>
       </div>
       <CardButton />
     </div>);

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

@@ -0,0 +1,2 @@
+import { CardInterface } from "../type";
+export declare const SinglePost: ({ item, image, href, btnLabel, editor, mediaPosition, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +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";
+export var SinglePost = 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;
+    return (_jsxs("div", { className: " bg-white rounded-3xl grid grid-cols-1 sm:grid-cols-2 overflow-hidden  items-stretch shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(LuImage, { src: image, width: 240, height: 240, className: "w-full h-full ".concat(mediaPosition === "right" ? "order-1" : "", "  aspect-5/4  object-cover ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" }), _jsxs("div", { className: "p-9 grid grid-rows-[1fr] items-center !gap-2 ", children: [_jsxs("div", { className: "flex flex-col !gap-3 ", children: [_jsx(Heading, { variant: "h2", className: "line-clamp-1 md:line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-xl", className: "line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " "), children: item === null || item === void 0 ? void 0 : item.description })] }), _jsx(Link, { href: href, passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel }) })] })] }));
+};

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

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

package/dist/src/components/Card/{ContactProfile.stories.js → SinglePost/SinglePost.stories.js}

@@ -9,18 +9,18 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { ContactProfile } from "./ContactProfile";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+import { SinglePost } from "./SinglePost";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 var meta = {
-    title: "Components/NewCard/ContactProfile",
-    component: ContactProfile,
+    title: "Components/NewCard/SinglePost",
+    component: SinglePost,
     parameters: {
         layout: "centered",
     },
 };
 export default meta;
 var baseCardArgs = {
-    type: "contactProfile",
+    type: "singlePost",
     item: {
         image: Dummy_Image,
         title: Dummy_Title,
@@ -38,15 +38,9 @@ var baseCardArgs = {
         cardBtn: "",
     },
 };
-export var ContactProfileHorizontalLeft = {
+export var SinglePostHorizontalLeft = {
     args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
 };
-export var ContactProfileHorizontalRight = {
+export var SinglePostHorizontalRight = {
     args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
 };
-export var ContactProfileVerticalTop = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
-};
-export var ContactProfileVerticalBottom = {
-    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
-};

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

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { PostByCategory } from "./PostByCategory/PostByCategory";
-import { MultiNews } from "./MultiNews";
-import { SinglePost } from "./SinglePost";
+import { MultiNews } from "./MultipleNews/MultiNews";
+import { SinglePost } from "./SinglePost/SinglePost";
 import { Dummy_Url } from "../../utils/constants";
 import { PhotoGallery } from "./PhotoGallery";
 import { ContactProfile } from "./contactProfile/ContactProfile";

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

@@ -1,9 +1,10 @@
 import React from "react";
 import { PostByCategory } from "./PostByCategory/PostByCategory";
-import { ContactProfile } from "./ContactProfile";
-import { MultiNews } from "./MultiNews";
+import { MultiNews } from "./MultipleNews/MultiNews";
 import { SinglePost } from "./SinglePost";
 import { Dummy_Url } from "../../utils/constants";
+import { PhotoGallery } from "./PhotoGallery";
+import { ContactProfile } from "./contactProfile/ContactProfile";
 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;
     var cardProps = {
@@ -21,6 +22,7 @@ var Card = function (_a) {
         contactProfile: ContactProfile,
         multipleNews: MultiNews,
         singlePost: SinglePost,
+        photoGallery: PhotoGallery,
     };
     return (<>
       {type && cardComponents[type]

package/dist/src/components/Card/contactProfile/ContactProfile.jsx

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import LuImage from "../../Images/LuImage";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { Button } from "../../Button/Button";
+export var ContactProfile = function (_a) {
+    var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
+    // Normalize mediaPosition based on orientation
+    var safeMediaPosition = orientation === "horizontal"
+        ? mediaPosition === "left" || mediaPosition === "right"
+            ? mediaPosition
+            : "right"
+        : mediaPosition === "top" || mediaPosition === "bottom"
+            ? mediaPosition
+            : "top";
+    // Common card media component to avoid duplication
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<LuImage src={image} width={240} height={240} className={"w-full h-full rounded-full max-w-40 mx-auto aspect-square object-cover ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
+    };
+    // Common content section component
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<div className={"flex flex-col !gap-1 ".concat(className, " ")}>
+      <Heading variant="h5-700" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0")}>
+        {item === null || item === void 0 ? void 0 : item.title}
+      </Heading>
+      <Body variant="body-md" className={" ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+        {item === null || item === void 0 ? void 0 : item.description}
+      </Body>
+    </div>);
+    };
+    // Common button component
+    var CardButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<Link href={href || "#"} passHref>
+      <Button endIcon={"angle-right"} size="sm" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, "  ").concat(className)}>
+        {btnLabel}
+      </Button>
+    </Link>);
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"!p-5 bg-white rounded-xl grid ".concat(safeMediaPosition === "left" ? "sm:grid-cols-[auto_1fr]" : "sm:grid-cols-[1fr_auto]", " max-w-5xl !gap-10 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <CardMedia className={"".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover")}/>
+        <div className={"flex flex-col !gap-1 md:!gap-5 text-center sm:!text-left h-full justify-center ".concat(safeMediaPosition === "right" ? "order-1" : "order-2")}>
+          <CardContent />
+          <CardButton />
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"p-8 bg-white rounded-xl flex flex-col !gap-5 max-w-md items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center")}>
+        <CardMedia className="w-full h-full aspect-5/4 object-cover"/>
+        <CardContent className="h-20"/>
+      </div>
+      <CardButton />
+    </div>);
+};

package/dist/src/components/Card/{ContactProfile.stories.jsx → contactProfile/ContactProfile.stories.jsx}

@@ -9,8 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 import { ContactProfile } from "./ContactProfile";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
 var meta = {
     title: "Components/NewCard/ContactProfile",
     component: ContactProfile,

package/dist/src/components/Icons/LUIcon.jsx

@@ -28,7 +28,7 @@ var LUIcon = function (_a) {
       </defs>
     </svg>);
     if (variant === "padded") {
-        return (<div className={"inline-flex items-center justify-center ".concat(paddingIcon, " ").concat(shape === "rounded" ? IconShape.rounded : IconShape.square[size], " ").concat(className, " ").concat(getAppliedColor(variant, color))}>
+        return (<div className={"luIcon-wrapper inline-flex items-center justify-center ".concat(paddingIcon, " ").concat(shape === "rounded" ? IconShape.rounded : IconShape.square[size], " ").concat(className, " ").concat(getAppliedColor(variant, color))}>
         {svg}
       </div>);
     }

package/dist/src/components/ImageUploader/imageUploader.js

@@ -63,6 +63,6 @@ var ImageUploader = function (_a) {
             "image/*": acceptedTypes,
         },
     }), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
-    return (_jsxs("div", { className: cn("flex flex-col items-center", className), children: [_jsx("div", __assign({}, getRootProps(), { className: cn("!border !border-dashed !border-gray-300 !rounded-lg cursor-pointer w-64 !p-2"), children: _jsxs("div", { className: "min-h-40 flex items-center justify-center bg-gray-100 !rounded-lg", children: [_jsx("input", __assign({}, getInputProps())), preview ? (_jsx("div", { className: "relative w-full h-40 !mx-auto overflow-hidden", children: _jsx(LuImage, { src: preview, alt: "Uploaded", className: "aspect-square object-contain", fill: true }) })) : (_jsxs("div", { className: "text-center text-sm text-muted-foreground", children: [_jsx(LUIcon, { icon: "upload", size: "lg", className: "!mx-auto !mb-4" }), _jsx(Body, { variant: "body-xs-600", className: "!px-1", children: "Choose a file or drag & drop it here" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "JPEG, PNG, and SVG formats" })] }))] }) })), fileError && (_jsx("p", { className: "text-sm text-red-500 text-center mt-2", children: fileError })), required && !preview && !fileError && (_jsx("p", { className: "text-sm text-red-500 text-center", children: "Image is required." })), preview && (_jsx(Button, { variant: "link", color: "gray", onClick: removeFile, className: "!mt-2 text-sm text-gray-700", children: "Remove Image" }))] }));
+    return (_jsxs("div", { className: cn("flex flex-col items-center", className), children: [_jsx("div", __assign({}, getRootProps(), { className: cn("!border !border-dashed !border-gray-300 !rounded-lg cursor-pointer w-64 !p-2"), children: _jsxs("div", { className: "min-h-40 flex items-center justify-center bg-gray-100 !rounded-lg", children: [_jsx("input", __assign({}, getInputProps())), preview ? (_jsx("div", { className: "relative w-full h-40 !mx-auto overflow-hidden", children: _jsx(LuImage, { src: preview, alt: "Uploaded", className: "aspect-square object-contain", fill: true }) })) : (_jsxs("div", { className: "text-center text-sm text-muted-foreground", children: [_jsx(LUIcon, { icon: "upload", size: "lg", className: "!mx-auto !mb-4" }), _jsx(Body, { variant: "body-xs-600", className: "!px-1", children: "Choose a file or drag & drop it here" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "JPEG, PNG, and SVG formats" })] }))] }) })), fileError && (_jsx("p", { className: "text-sm text-red-500 text-center mt-2", children: fileError })), required && !preview && !fileError && (_jsx("p", { className: "text-sm text-red-500 text-center !mt-2", children: "Image is required." })), preview && (_jsx(Button, { variant: "link", color: "red", onClick: removeFile, className: "!mt-2", children: "Remove Image" }))] }));
 };
 export default ImageUploader;

package/dist/src/components/ImageUploader/imageUploader.jsx

@@ -71,9 +71,11 @@ var ImageUploader = function (_a) {
       </div>
       {fileError && (<p className="text-sm text-red-500 text-center mt-2">{fileError}</p>)}
 
-      {required && !preview && !fileError && (<p className="text-sm text-red-500 text-center">Image is required.</p>)}
+      {required && !preview && !fileError && (<p className="text-sm text-red-500 text-center !mt-2">
+          Image is required.
+        </p>)}
 
-      {preview && (<Button variant="link" color="gray" onClick={removeFile} className="!mt-2 text-sm text-gray-700">
+      {preview && (<Button variant="link" color="red" onClick={removeFile} className="!mt-2">
           Remove Image
         </Button>)}
     </div>);

package/dist/src/components/Label/Label.js

@@ -28,7 +28,7 @@ export var variant = {
     "label-xl": "!text-xl",
     "label-lg": "!text-lg",
     "label-md": "!text-base",
-    "label-sm": "!text-sm",
+    "label-sm": "!text-sm !font-normal",
 };
 var labelVariants = cva("flex items-center !gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 !font-medium !leading-normal m-0", {
     variants: { variant: variant },

package/dist/src/components/Label/Label.jsx

@@ -17,7 +17,7 @@ export var variant = {
     "label-xl": "!text-xl",
     "label-lg": "!text-lg",
     "label-md": "!text-base",
-    "label-sm": "!text-sm",
+    "label-sm": "!text-sm !font-normal",
 };
 var labelVariants = cva("flex items-center !gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 !font-medium !leading-normal m-0", {
     variants: { variant: variant },

package/dist/src/components/RadioButton/radio-button.jsx

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// components/ui/radio-button.tsx
 import * as React from "react";
 import { cn } from "../../lib/utils";
 var RadioButton = React.forwardRef(function (_a, ref) {