linkedunion-design-kit 1.7.3 → 1.7.5

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/MultipleNews/MultiNews.stories.d.ts

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { MultiNews } from "./MultiNews";
-declare const meta: Meta<typeof MultiNews>;
+import Card from "../card";
+declare const meta: Meta<typeof Card>;
 export default meta;
-type Story = StoryObj<typeof MultiNews>;
-export declare const MultiNewsHorizontalLeft: Story;
-export declare const MultiNewsHorizontalRight: Story;
-export declare const MultiNewsVerticalTop: Story;
-export declare const MultiNewsVerticalBottom: Story;
+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/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 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/PhotoGallery.css

@@ -0,0 +1,11 @@
+.photo-gallery-img {
+  position: relative;
+}
+.photo-gallery-img::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, black, transparent);
+  z-index: 1;
+  pointer-events: none;
+}

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

@@ -1,2 +1,2 @@
-import { CardInterface } from "./type";
+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.stories.js → SinglePost/SinglePost.stories.js}

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { SinglePost } from "./SinglePost";
-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/SinglePost",
     component: SinglePost,

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

@@ -2,7 +2,7 @@ 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";
-import { SinglePost } from "./SinglePost";
+import { SinglePost } from "./SinglePost/SinglePost";
 import { Dummy_Url } from "../../utils/constants";
 import { PhotoGallery } from "./PhotoGallery";
 import { ContactProfile } from "./contactProfile/ContactProfile";

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

@@ -25,12 +25,12 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 export var variant = {
-    "label-xl": "!text-xl",
-    "label-lg": "!text-lg",
-    "label-md": "!text-base",
-    "label-sm": "!text-sm !font-normal",
+    "label-xl": "!text-xl !leading-normal",
+    "label-lg": "!text-lg !leading-normal",
+    "label-md": "!text-base !leading-normal",
+    "label-sm": "!text-sm !leading-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", {
+var labelVariants = cva("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-normal m-0", {
     variants: { variant: variant },
     defaultVariants: {
         variant: "label-sm",

package/dist/src/components/Typography/Heading/heading.js

@@ -24,23 +24,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
 export var variant = {
-    h1: "text-5xl font-normal",
+    h1: "!text-5xl !font-normal",
     "h1-500": "!text-5xl !font-medium",
     "h1-600": "!text-5xl !font-semibold",
     "h1-700": "!text-5xl !font-bold",
-    h2: "text-4xl font-normal",
+    h2: "!text-4xl !font-normal",
     "h2-500": "!text-4xl !font-medium",
     "h2-600": "!text-4xl !font-semibold",
     "h2-700": "!text-4xl !font-bold",
-    h3: "text-3xl font-normal",
+    h3: "!text-3xl !font-normal",
     "h3-500": "!text-3xl !font-medium",
     "h3-600": "!text-3xl !font-semibold",
     "h3-700": "!text-3xl !font-bold",
-    h4: "text-2xl font-normal",
+    h4: "!text-2xl !font-normal",
     "h4-500": "!text-2xl !font-medium",
     "h4-600": "!text-2xl !font-semibold",
     "h4-700": "!text-2xl !font-bold",
-    h5: "text-xl font-normal",
+    h5: "!text-xl !font-normal",
     "h5-500": "!text-xl !font-medium",
     "h5-600": "!text-xl !font-semibold",
     "h5-700": "!text-xl !font-bold",
@@ -64,6 +64,6 @@ function Heading(_a) {
     if (variant === null || variant === void 0 ? void 0 : variant.startsWith("h")) {
         Tag = variant.split("-")[0];
     }
-    return (_jsx(Tag, __assign({ className: cn(headingVariants({ variant: variant, className: className }), "m-0") }, props, { children: children })));
+    return (_jsx(Tag, __assign({ className: cn(headingVariants({ variant: variant, className: className }), "m-0 !leading-normal") }, props, { children: children })));
 }
 export { Heading, headingVariants };

package/dist/src/components/ui/accordion.js

@@ -38,6 +38,6 @@ function AccordionTrigger(_a) {
 }
 function AccordionContent(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsx(AccordionPrimitive.Content, __assign({ "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" }, props, { children: _jsx("div", { className: cn("!pt-0 !pb-4", className), children: children }) })));
+    return (_jsx(AccordionPrimitive.Content, __assign({ "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down !overflow-visible text-sm" }, props, { children: _jsx("div", { className: cn("!pt-0 !pb-4", className), children: children }) })));
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/src/components/ui/caption.js

@@ -29,6 +29,6 @@ export var variantClasses = {
 };
 function Caption(_a) {
     var className = _a.className, children = _a.children, _b = _a.variant, variant = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "variant"]);
-    return (_jsx("p", __assign({ className: cn("font-normal leading-normal inline", variantClasses[variant], className) }, props, { children: children })));
+    return (_jsx("p", __assign({ className: cn("!font-normal !leading-normal inline", variantClasses[variant], className) }, props, { children: children })));
 }
 export { Caption };

package/dist/src/components/ui/switch.js

@@ -59,12 +59,12 @@ var thumbVariants = cva("pointer-events-none block !rounded-full ring-0 transiti
 });
 // Define translate distance for each size
 var thumbTranslateVariants = {
-    sm: "data-[state=checked]:translate-x-3",
-    md: "data-[state=checked]:translate-x-7",
-    lg: "data-[state=checked]:translate-x-9",
+    sm: "data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-2",
+    md: "data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-7",
+    lg: "data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-8",
 };
 function Switch(_a) {
     var className = _a.className, size = _a.size, variant = _a.variant, props = __rest(_a, ["className", "size", "variant"]);
-    return (_jsx(SwitchPrimitive.Root, __assign({ "data-slot": "switch", className: cn(switchVariants({ size: size, variant: variant }), className) }, props, { children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn(thumbVariants({ size: size }), size ? thumbTranslateVariants[size] : "", "data-[state=unchecked]:translate-x-0 bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground") }) })));
+    return (_jsx(SwitchPrimitive.Root, __assign({ "data-slot": "switch", className: cn(switchVariants({ size: size, variant: variant }), className) }, props, { children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn(thumbVariants({ size: size }), size ? thumbTranslateVariants[size] : "", "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground") }) })));
 }
 export { Switch };

package/dist/src/components/ui/tabs.js

@@ -30,11 +30,11 @@ function Tabs(_a) {
 }
 function TabsList(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(TabsPrimitive.List, __assign({ "data-slot": "tabs-list", className: cn("bg-blue-100 !p-1 inline-flex items-center justify-center rounded-lg", className) }, props)));
+    return (_jsx(TabsPrimitive.List, __assign({ "data-slot": "tabs-list", className: cn("bg-blue-100 !p-1 sm:!p-2 rounded-lg", className) }, props)));
 }
 function TabsTrigger(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(TabsPrimitive.Trigger, __assign({ "data-slot": "tabs-trigger", className: cn("!py-2.5 !px-5 transition-all !rounded-sm text-sm font-normal w-full", "data-[state=active]:bg-blue-600 data-[state=active]:text-white", "data-[state=inactive]:bg-blue-100 data-[state=inactive]:text-blue-600", className) }, props)));
+    return (_jsx(TabsPrimitive.Trigger, __assign({ "data-slot": "tabs-trigger", className: cn("!py-2.5 !px-5 transition-all !rounded-sm text-sm font-normal w-1/2 max-sm:w-full", "data-[state=active]:bg-blue-600 data-[state=active]:text-white", "data-[state=inactive]:bg-blue-100 data-[state=inactive]:text-blue-600", className) }, props)));
 }
 function TabsContent(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);

package/dist/src/utils/iconList.js

@@ -541,7 +541,7 @@ export var iconList = [
     },
     {
         key: "xMark",
-        path: "M31.0529 5.46494C32.3024 4.21552 32.3024 2.18647 31.0529 0.937061C29.8035 -0.312354 27.7745 -0.312354 26.5251 0.937061L16 11.4721L5.46494 0.947056C4.21552 -0.302358 2.18647 -0.302358 0.937061 0.947056C-0.312354 2.19647 -0.312354 4.22552 0.937061 5.47493L11.4721 16L0.947056 26.5351C-0.302358 27.7845 -0.302358 29.8135 0.947056 31.0629C2.19647 32.3124 4.22552 32.3124 5.47493 31.0629L16 20.5279L26.5351 31.0529C27.7845 32.3024 29.8135 32.3024 31.0629 31.0529C32.3124 29.8035 32.3124 27.7745 31.0629 26.5251L20.5279 16L31.0529 5.46494Z",
+        path: "M28.0991 0.66939C28.9917 -0.223089 30.4379 -0.223155 31.3305 0.66939C32.2231 1.56199 32.223 3.00817 31.3305 3.90084L19.2309 15.9995L31.3305 28.0981L31.4877 28.271C32.2202 29.1687 32.1675 30.4936 31.3305 31.3305C30.4936 32.1675 29.1687 32.2202 28.271 31.4877L28.0981 31.3305L15.9995 19.2309L3.90084 31.3305C3.00817 32.223 1.56199 32.2231 0.66939 31.3305C-0.223155 30.4379 -0.223089 28.9917 0.66939 28.0991L12.768 15.9995L0.66939 3.90084C-0.223069 3.00818 -0.223191 1.56197 0.66939 0.66939C1.56197 -0.223191 3.00818 -0.223069 3.90084 0.66939L15.9995 12.768L28.0991 0.66939Z",
         label: "xMark",
     },
     {

package/dist/styles/global.css

@@ -500,6 +500,9 @@
   .\!w-fit {
     width: fit-content !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -613,9 +616,6 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -652,6 +652,9 @@
   .\!gap-2 {
     gap: calc(var(--spacing) * 2) !important;
   }
+  .\!gap-3 {
+    gap: calc(var(--spacing) * 3) !important;
+  }
   .\!gap-5 {
     gap: calc(var(--spacing) * 5) !important;
   }
@@ -664,9 +667,6 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
   .gap-5 {
     gap: calc(var(--spacing) * 5);
   }
@@ -700,6 +700,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .\!overflow-visible {
+    overflow: visible !important;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -751,18 +754,6 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-tl-3xl {
-    border-top-left-radius: var(--radius-3xl);
-  }
-  .rounded-tr-3xl {
-    border-top-right-radius: var(--radius-3xl);
-  }
-  .rounded-br-3xl {
-    border-bottom-right-radius: var(--radius-3xl);
-  }
-  .rounded-bl-3xl {
-    border-bottom-left-radius: var(--radius-3xl);
-  }
   .\!border {
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
@@ -1218,22 +1209,18 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .\!leading-5 {
+    --tw-leading: calc(var(--spacing) * 5) !important;
+    line-height: calc(var(--spacing) * 5) !important;
+  }
   .\!leading-normal {
     --tw-leading: var(--leading-normal) !important;
     line-height: var(--leading-normal) !important;
   }
-  .leading-5 {
-    --tw-leading: calc(var(--spacing) * 5);
-    line-height: calc(var(--spacing) * 5);
-  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
-  .leading-normal {
-    --tw-leading: var(--leading-normal);
-    line-height: var(--leading-normal);
-  }
   .\!font-bold {
     --tw-font-weight: var(--font-weight-bold) !important;
     font-weight: var(--font-weight-bold) !important;
@@ -2941,9 +2928,9 @@
       color: #fefefe;
     }
   }
-  .data-\[state\=checked\]\:translate-x-3 {
+  .data-\[state\=checked\]\:translate-x-2 {
     &[data-state="checked"] {
-      --tw-translate-x: calc(var(--spacing) * 3);
+      --tw-translate-x: calc(var(--spacing) * 2);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -2953,9 +2940,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .data-\[state\=checked\]\:translate-x-9 {
+  .data-\[state\=checked\]\:translate-x-8 {
     &[data-state="checked"] {
-      --tw-translate-x: calc(var(--spacing) * 9);
+      --tw-translate-x: calc(var(--spacing) * 8);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -3027,6 +3014,12 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=unchecked\]\:translate-x-0\.5 {
+    &[data-state="unchecked"] {
+      --tw-translate-x: calc(var(--spacing) * 0.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=unchecked\]\:bg-input {
     &[data-state="unchecked"] {
       background-color: var(--input);
@@ -3060,6 +3053,11 @@
       margin-top: 7px;
     }
   }
+  .max-sm\:w-full {
+    @media (width < 40rem) {
+      width: 100%;
+    }
+  }
   .sm\:col-span-2 {
     @media (width >= 40rem) {
       grid-column: span 2 / span 2;
@@ -3070,6 +3068,11 @@
       aspect-ratio: 1 / 1;
     }
   }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .sm\:grid-cols-3 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -3090,11 +3093,24 @@
       grid-template-columns: auto 1fr;
     }
   }
+  .sm\:\!p-2 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 2) !important;
+    }
+  }
   .sm\:\!text-left {
     @media (width >= 40rem) {
       text-align: left !important;
     }
   }
+  .md\:line-clamp-2 {
+    @media (width >= 48rem) {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+  }
   .md\:grid-cols-6 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(6, minmax(0, 1fr));

package/package.json

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

package/dist/app/layout.jsx

@@ -1,13 +0,0 @@
-import { Inter } from "next/font/google";
-import "@/styles/globals.css";
-var inter = Inter({ subsets: ["latin"] });
-export var metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
-};
-export default function RootLayout(_a) {
-    var children = _a.children;
-    return (<html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>);
-}

package/dist/app/page.jsx

@@ -1,5 +0,0 @@
-export default function Home() {
-    return (<div className="text-center flex flex-col items-center justify-center min-h-screen p-24 gap-5">
-      <h1> Welcome to Linkedunion Design kit</h1>
-    </div>);
-}

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

@@ -1,25 +0,0 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "../ui/accordion";
-import ColorPicker from "../ColorPicker/ColorPicker";
-export default {
-    title: "Components/Accordion",
-    component: Accordion,
-    tags: ["autodocs"],
-};
-var Template = function (args) { return (<Accordion type="single" collapsible defaultValue="menus" {...args}></Accordion>); };
-export var _Accordion = Template.bind({});
-_Accordion.args = {
-    children: (<AccordionItem value="menus">
-      <AccordionTrigger>Menus</AccordionTrigger>
-      <AccordionContent>
-        <ColorPicker value="#000000" onChange={function () { return console.log("color"); }}/>
-      </AccordionContent>
-    </AccordionItem>),
-};
-_Accordion.argTypes = {
-    children: {
-        description: "Pass `AccordionItem` components as children. Each item includes an `AccordionTrigger` (the clickable label) and `AccordionContent` (collapsible body). You can customize both with any valid React nodes \n\nFor more details and usage examples, refer to the [ShadCN Accordion documentation](https://ui.shadcn.com/docs/components/accordion).",
-        table: {
-            type: { summary: "React.ReactNode" },
-        },
-    },
-};

package/dist/src/components/Avatar/Avatar.jsx

@@ -1,17 +0,0 @@
-import LUIcon from "../Icons/LUIcon";
-import Image from "next/image";
-import { avatarPadding, avatarShape, avatarSize } from ".";
-var Avatar = function (_a) {
-    var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, _c = _a.shape, shape = _c === void 0 ? "square" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className;
-    var sizeClasses = avatarSize[size];
-    var paddingClass = avatarPadding[size];
-    return (<>
-      {image ? (<div className={"relative overflow-hidden bg-blue-200 ".concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses)} data-testid="lu-avatar">
-          <Image src={image} alt="avatar" className={"object-cover w-full h-full"} width={0} height={0} sizes="100%" //Image takes 100% of the parent container
-        />
-        </div>) : (<div className={"bg-gray-100 ".concat(paddingClass, " ").concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses)} data-testid="lu-icon">
-          <LUIcon data-testid="lu-icon" size={size} icon={icon} className={"text-gray-950 w-full h-full"}/>
-        </div>)}
-    </>);
-};
-export default Avatar;

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

@@ -1,31 +0,0 @@
-import Avatar from "./Avatar";
-import { avatarShape, avatarSize } from ".";
-export default {
-    title: "Components/Avatar",
-    component: Avatar,
-};
-var Template = function (args) { return <Avatar {...args}/>; };
-export var _Avatar = Template.bind({});
-_Avatar.args = {
-    image: "/images/avatar.png",
-    shape: "square",
-    size: "md",
-    className: "",
-    icon: "user",
-};
-_Avatar.argTypes = {
-    shape: {
-        control: {
-            type: "select",
-            labels: Object.keys(avatarShape),
-        },
-        options: Object.keys(avatarShape),
-    },
-    size: {
-        control: {
-            type: "select",
-            labels: Object.keys(avatarSize),
-        },
-        options: Object.keys(avatarSize),
-    },
-};

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

@@ -1,51 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import Avatar from "./Avatar";
-jest.mock("../Icons/LUIcon", function () { return ({
-    __esModule: true,
-    default: jest.fn(function (_a) {
-        var icon = _a.icon, className = _a.className;
-        return (<div data-testid="mock-luIcon" className={className}>
-      {icon || "user"}
-    </div>);
-    }),
-}); });
-// Mock Next.js Image component
-jest.mock("next/image", function () { return ({
-    __esModule: true,
-    default: function (_a) {
-        var src = _a.src, alt = _a.alt;
-        return (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img src={src} alt={alt}/>);
-    },
-}); });
-describe("Avatar Component", function () {
-    it("renders image when image prop is provided", function () {
-        render(<Avatar image="/images/avatar.png"/>);
-        var avatarImage = screen.getByRole("img", { name: /avatar/i });
-        expect(avatarImage).toBeInTheDocument();
-        expect(avatarImage).toHaveAttribute("src", "/images/avatar.png");
-    });
-});
-it("renders icon when no image is provided", function () {
-    render(<Avatar />);
-    var icon = screen.getByTestId("lu-icon");
-    expect(icon).toBeInTheDocument();
-});
-it("applies shape and size class names correctly", function () {
-    render(<Avatar image="/images/avatar.png" shape="square" size="lg"/>);
-    var avatarWrapper = screen.getByTestId("lu-avatar");
-    expect(avatarWrapper).toHaveClass("rounded-none");
-    expect(avatarWrapper).toHaveClass("w-[42px]");
-    expect(avatarWrapper).toHaveClass("h-[42px]");
-});
-it("applies additional class names", function () {
-    render(<Avatar image="/images/avatar.png" className="custom-class"/>);
-    var avatarWrapper = screen.getByTestId("lu-avatar");
-    expect(avatarWrapper).toHaveClass("custom-class");
-});
-it("renders the correct icon when image is not provided", function () {
-    render(<Avatar icon="user"/>);
-    var icon = screen.getByTestId("lu-icon");
-    expect(icon).toBeInTheDocument();
-});