linkedunion-design-kit 1.6.3 → 1.6.4

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

@@ -1,16 +1,86 @@
 export var iconSize = {
-    xxs: "w-2 h-2",
-    xs: "w-3 h-3",
-    sm: "w-3.5 h-3.5",
-    md: "w-4 h-4",
-    lg: "w-5 h-5",
-    xl: "w-6 h-6",
-    "2xl": "w-6 h-6",
-    "3xl": "w-7 h-7",
-    "4xl": "w-8 h-8",
-    "5xl": "w-9 h-9",
-    "6xl": "w-10 h-10",
-    "7xl": "w-12 h-12",
-    huge: "w-16 h-16",
-    massive: "w-20 h-20",
+    xs: "size-3",
+    sm: "size-3.5",
+    md: "size-4",
+    lg: "size-5",
+    xl: "size-6",
+    "2xl": "size-7",
+    "3xl": "size-8",
+    "4xl": "size-9",
+    "5xl": "size-10",
+    "6xl": "size-11",
+    "7xl": "size-12",
+    huge: "size-14",
+    massive: "size-16",
+};
+//Icon with background
+export var iconBackground = {
+    xs: "!p-1",
+    sm: "!p-2",
+    md: "!p-2",
+    lg: "!p-2",
+    xl: "!p-2",
+    "2xl": "!p-3",
+    "3xl": "!p-3",
+    "4xl": "!p-4",
+    "5xl": "!p-5",
+    "6xl": "p-6",
+    "7xl": "p-6",
+    huge: "p-8",
+    massive: "p-8",
+};
+export var IconShape = {
+    square: {
+        xs: "rounded-xs",
+        sm: "rounded-xs",
+        md: "rounded-xs",
+        lg: "rounded-xs",
+        xl: "rounded-md",
+        "2xl": "rounded-lg",
+        "3xl": "rounded-lg",
+        "4xl": "rounded-xl",
+        "5xl": "rounded-xl",
+        "6xl": "rounded-2xl",
+        "7xl": "rounded-2xl",
+        huge: "rounded-2xl",
+        massive: "rounded-2xl",
+    },
+    rounded: "rounded-full",
+};
+//icon color for padded icons
+export var iconWithBgColor = {
+    blue: "bg-blue-600 text-blue-50",
+    "light-blue": "bg-blue-100 text-blue-600",
+    green: "bg-green-600 text-green-50",
+    "light-green": "bg-green-100 text-green-600",
+    yellow: "bg-yellow-500 text-yellow-950",
+    "light-yellow": "bg-yellow-100 text-yellow-900",
+    red: "bg-red-600 text-red-50",
+    "light-red": "bg-red-100 text-red-600",
+    indigo: "bg-indigo-600 text-indigo-50",
+    "light-indigo": "bg-indigo-100 text-indigo-600",
+    gray: "bg-gray-100 text-gray-950",
+    "dark-gray": "bg-gray-900 text-gray-50",
+    disabled: "bg-gray-100 text-gray-400",
+};
+//icon color for non-padded(default) icons
+export var iconColor = {
+    blue: "text-blue-600",
+    "light-blue": "text-blue-100",
+    green: "text-green-600",
+    "light-green": "text-green-100",
+    yellow: "text-yellow-500",
+    "light-yellow": "text-yellow-100",
+    red: "text-red-600",
+    "light-red": "text-red-100",
+    indigo: "text-indigo-600",
+    "light-indigo": "text-indigo-100",
+    gray: "text-gray-100",
+    "dark-gray": "text-gray-900",
+    disabled: "text-gray-100",
+};
+export var getAppliedColor = function (variant, color) {
+    if (!color)
+        return "";
+    return variant === "padded" ? iconWithBgColor[color] : iconColor[color];
 };

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

@@ -1,7 +1,11 @@
-import { iconSize } from ".";
+import { iconSize, iconWithBgColor, IconShape } from ".";
 export type iconSize = keyof typeof iconSize;
+export type shape = keyof typeof IconShape;
+export type color = keyof typeof iconWithBgColor;
 export interface IconProps extends React.HTMLAttributes<HTMLOrSVGElement> {
     size?: iconSize;
-    icon?: string;
-    className?: string;
+    icon: string;
+    variant?: "default" | "padded";
+    shape?: shape;
+    color?: color;
 }

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import ImageUploader from "../ui/imageUploader";
+import ImageUploader from "./imageUploader";
 declare const meta: Meta<typeof ImageUploader>;
 export default meta;
 type Story = StoryObj<typeof ImageUploader>;

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

@@ -1,4 +1,4 @@
-import ImageUploader from "../ui/imageUploader";
+import ImageUploader from "./imageUploader";
 var meta = {
     title: "Components/ImageUploader",
     component: ImageUploader,

package/dist/src/components/ImageUploader/imageUploader.d.ts

@@ -0,0 +1,3 @@
+import { ImageUploaderProps } from "../ImageUploader/type";
+declare const ImageUploader: ({ value, onChange, required, className, maxFileSizeMB, acceptedTypes, }: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageUploader;

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

@@ -0,0 +1,68 @@
+"use client";
+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 } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+import LuImage from "../Images/LuImage";
+import { Body } from "../Typography/Body/body";
+import { Button } from "../Button/Button";
+var ImageUploader = function (_a) {
+    var value = _a.value, onChange = _a.onChange, required = _a.required, className = _a.className, _b = _a.maxFileSizeMB, maxFileSizeMB = _b === void 0 ? 6 : _b, _c = _a.acceptedTypes, acceptedTypes = _c === void 0 ? ["image/png", "image/jpeg", "image/jpg", "image/svg+xml"] : _c;
+    var _d = useState(null), preview = _d[0], setPreview = _d[1];
+    var _e = useState(""), fileError = _e[0], setFileError = _e[1];
+    useEffect(function () {
+        if (value && typeof value === "string") {
+            setPreview(value);
+        }
+        else if (value instanceof File) {
+            setPreview(URL.createObjectURL(value));
+        }
+        else {
+            setPreview(null);
+        }
+    }, [value]);
+    var onDrop = function (acceptedFiles) {
+        var file = acceptedFiles[0];
+        if (!file)
+            return;
+        if (!acceptedTypes.includes(file.type)) {
+            setFileError("Only JPEG, PNG, JPG, and SVG files are supported.");
+            return;
+        }
+        var sizeMB = file.size / 1024 / 1024;
+        if (sizeMB > maxFileSizeMB) {
+            setFileError("File size exceeds ".concat(maxFileSizeMB, "MB."));
+            return;
+        }
+        var previewUrl = URL.createObjectURL(file);
+        setPreview(previewUrl);
+        setFileError("");
+        onChange(previewUrl, file);
+    };
+    var removeFile = function () {
+        setPreview(null);
+        setFileError("");
+        onChange(null, null);
+    };
+    var _f = useDropzone({
+        onDrop: onDrop,
+        multiple: false,
+        accept: {
+            "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" }))] }));
+};
+export default ImageUploader;

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

@@ -1,3 +1,14 @@
-import { LabelProps } from "./type";
-declare const Label: ({ htmlFor, children, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-export default Label;
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+export declare const variant: {
+    "label-xl": string;
+    "label-lg": string;
+    "label-md": string;
+    "label-sm": string;
+};
+declare const labelVariants: (props?: ({
+    variant?: "label-sm" | "label-xl" | "label-lg" | "label-md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Label({ className, variant, ...props }: React.ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>): import("react/jsx-runtime").JSX.Element;
+export { Label, labelVariants };

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

@@ -21,9 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Label as ShadLabel } from "../../components/ui/label";
-var Label = function (_a) {
-    var _b = _a.htmlFor, htmlFor = _b === void 0 ? "text" : _b, _c = _a.children, children = _c === void 0 ? "Label" : _c, props = __rest(_a, ["htmlFor", "children"]);
-    return (_jsx(ShadLabel, __assign({ htmlFor: htmlFor }, props, { children: children })));
+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",
 };
-export default Label;
+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", {
+    variants: { variant: variant },
+    defaultVariants: {
+        variant: "label-sm",
+    },
+});
+function Label(_a) {
+    var className = _a.className, variant = _a.variant, props = __rest(_a, ["className", "variant"]);
+    return (_jsx(LabelPrimitive.Root, __assign({ "data-slot": "label", className: cn(labelVariants({ variant: variant, className: className })) }, props)));
+}
+export { Label, labelVariants };

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

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

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

@@ -10,8 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Label from "./Label";
-import { variant } from "../ui/label";
+import { Label, variant } from "./Label";
 export default {
     title: "Components/Label",
     component: Label,
@@ -21,7 +20,7 @@ var Template = function (args) { return _jsx(Label, __assign({}, args)); };
 export var _Label = Template.bind({});
 _Label.args = {
     children: "Label",
-    variant: "default",
+    variant: "label-sm",
 };
 _Label.argTypes = {
     variant: {
@@ -29,7 +28,14 @@ _Label.argTypes = {
         options: Object.keys(variant),
         description: "Label variant",
         table: {
-            defaultValue: { summary: "default" },
+            defaultValue: { summary: "label-sm" },
+            type: { summary: "string" },
+        },
+    },
+    htmlFor: {
+        control: "text",
+        description: "ID of the input element this label is for",
+        table: {
             type: { summary: "string" },
         },
     },

package/dist/src/components/MediaCard/ContactProfile/ContactProfileTheme1.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import LuImage from "../../../components/Images/LuImage";
-import Button from "../../../components/Button/Button";
-import LUIcon from "../../../components/Icons/LUIcon";
+import { Button } from "../../../components/Button/Button";
 export var ContactProfileTheme1 = function (props) {
-    return (_jsxs("div", { "data-testid": "contact-profile-theme1", className: "p-5 card_bg_ContactProfile_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id), children: [_jsxs("div", { className: "flex gap-x-5", children: [_jsx("div", { className: "max-w-[240px] overflow-hidden aspect-square max-xs:hidden", children: _jsx(LuImage, { src: props.image, width: 160, height: 160, className: "rounded-full h-full object-cover", alt: "Contact Profile" }) }), _jsx("div", { className: "flex flex-1 flex-col", children: _jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "card_ContactProfile_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1"), children: props.heading }), _jsx("p", { className: "text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-xs:mt-[7px] card_ContactProfile_designation_color_".concat(props.id), children: props.body })] }) })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full mt-4 max-xs:mt-2.5 card_ContactProfile_btn_".concat(props.id), children: props.btnLabel }) })] }));
+    return (_jsxs("div", { "data-testid": "contact-profile-theme1", className: "p-5 card_bg_ContactProfile_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id), children: [_jsxs("div", { className: "flex gap-x-5", children: [_jsx("div", { className: "max-w-[240px] overflow-hidden aspect-square max-xs:hidden", children: _jsx(LuImage, { src: props.image, width: 160, height: 160, className: "rounded-full h-full object-cover", alt: "Contact Profile" }) }), _jsx("div", { className: "flex flex-1 flex-col", children: _jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "card_ContactProfile_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1"), children: props.heading }), _jsx("p", { className: "text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-xs:mt-[7px] card_ContactProfile_designation_color_".concat(props.id), children: props.body })] }) })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "rounded justify-between w-full mt-4 max-xs:mt-2.5 card_ContactProfile_btn_".concat(props.id), children: props.btnLabel }) })] }));
 };

package/dist/src/components/MediaCard/ContactProfile/ContactProfileTheme2.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import LuImage from "../../../components/Images/LuImage";
-import Button from "../../../components/Button/Button";
-import LUIcon from "../../../components/Icons/LUIcon";
+import { Button } from "../../../components/Button/Button";
 export var ContactProfileTheme2 = function (props) {
-    return (_jsxs("div", { "data-testid": "contact-profile-theme2", className: "p-8 card_bg_ContactProfile_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id, " flex flex-col items-center"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden aspect-square", children: _jsx(LuImage, { src: props.image, width: 160, height: 160, className: "h-full object-cover rounded-full", alt: "Contact Profile" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx("div", { className: "card_ContactProfile_title_color_".concat(props.id, " text-2xl font-semibold line-clamp-1 capitalize"), children: props.heading }), _jsx("p", { className: "text-base\tfont-extralight\tcard_ContactProfile_designation_color_".concat(props.id, " line-clamp-2"), children: props.body })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full card_ContactProfile_btn_".concat(props.id), children: props.btnLabel }) })] }));
+    return (_jsxs("div", { "data-testid": "contact-profile-theme2", className: "p-8 card_bg_ContactProfile_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id, " flex flex-col items-center"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden aspect-square", children: _jsx(LuImage, { src: props.image, width: 160, height: 160, className: "h-full object-cover rounded-full", alt: "Contact Profile" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx("div", { className: "card_ContactProfile_title_color_".concat(props.id, " text-2xl font-semibold line-clamp-1 capitalize"), children: props.heading }), _jsx("p", { className: "text-base\tfont-extralight\tcard_ContactProfile_designation_color_".concat(props.id, " line-clamp-2"), children: props.body })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "rounded justify-between w-full card_ContactProfile_btn_".concat(props.id), children: props.btnLabel }) })] }));
 };

package/dist/src/components/MediaCard/PostByCategory/PostByCategoryTheme1.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import LuImage from "../../../components/Images/LuImage";
-import Button from "../../../components/Button/Button";
-import LUIcon from "../../../components/Icons/LUIcon";
+import { Button } from "../../../components/Button/Button";
 export var PostByCategoryTheme1 = function (props) {
-    return (_jsxs("div", { "data-testid": "postByCategory-theme1", className: "p-5 card_bg_PostByCategory_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_PostByCategory_").concat(props.id, " flex gap-x-[20px] w-full"), children: [_jsx("div", { className: "max-w-[240px] overflow-hidden aspect-square max-xs:hidden", children: _jsx(LuImage, { src: props.image, width: 240, height: 240, className: "rounded-lg w-full h-full object-cover", alt: "Post By Category" }) }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "card_PostByCategory_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1"), children: props.heading }), _jsx("p", { className: "card_PostByCategory_description_color_".concat(props.id, " text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-xs:mt-[7px]"), children: props.body })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full max-xs:mt-2.5 card_PostByCategory_btn_".concat(props.id), children: props.btnLabel }) })] })] }));
+    return (_jsxs("div", { "data-testid": "postByCategory-theme1", className: "p-5 card_bg_PostByCategory_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_PostByCategory_").concat(props.id, " flex gap-x-[20px] w-full"), children: [_jsx("div", { className: "max-w-[240px] overflow-hidden aspect-square max-xs:hidden", children: _jsx(LuImage, { src: props.image, width: 240, height: 240, className: "rounded-lg w-full h-full object-cover", alt: "Post By Category" }) }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "card_PostByCategory_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1"), children: props.heading }), _jsx("p", { className: "card_PostByCategory_description_color_".concat(props.id, " text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-xs:mt-[7px]"), children: props.body })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "rounded justify-between w-full max-xs:mt-2.5 card_PostByCategory_btn_".concat(props.id), children: props.btnLabel }) })] })] }));
 };

package/dist/src/components/MediaCard/PostByCategory/PostByCategoryTheme2.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import LuImage from "../../../components/Images/LuImage";
-import Button from "../../../components/Button/Button";
-import LUIcon from "../../../components/Icons/LUIcon";
+import { Button } from "../../../components/Button/Button";
 export var PostByCategoryTheme2 = function (props) {
-    return (_jsxs("div", { "data-testid": "postByCategory-theme2", className: "p-8 card_bg_PostByCategory_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_PostByCategory_").concat(props.id, " flex flex-col items-center w-full"), children: [_jsx("div", { className: "w-full max-w-[240px] overflow-hidden aspect-square", children: _jsx(LuImage, { src: props.image, width: 240, height: 240, className: "w-full h-full object-cover card_PostByCategory_theme2_image_".concat(props === null || props === void 0 ? void 0 : props.id), alt: "Post By Category" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx("div", { className: "text-default card_PostByCategory_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1"), children: props.heading }), _jsx("p", { className: "card_PostByCategory_description_color_".concat(props.id, " text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-sm:mt-[7px]"), children: props.body })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full card_PostByCategory_btn_".concat(props.id), children: props.btnLabel }) })] }));
+    return (_jsxs("div", { "data-testid": "postByCategory-theme2", className: "p-8 card_bg_PostByCategory_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_PostByCategory_").concat(props.id, " flex flex-col items-center w-full"), children: [_jsx("div", { className: "w-full max-w-[240px] overflow-hidden aspect-square", children: _jsx(LuImage, { src: props.image, width: 240, height: 240, className: "w-full h-full object-cover card_PostByCategory_theme2_image_".concat(props === null || props === void 0 ? void 0 : props.id), alt: "Post By Category" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx("div", { className: "text-default card_PostByCategory_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1"), children: props.heading }), _jsx("p", { className: "card_PostByCategory_description_color_".concat(props.id, " text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-sm:mt-[7px]"), children: props.body })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "rounded justify-between w-full card_PostByCategory_btn_".concat(props.id), children: props.btnLabel }) })] }));
 };

package/dist/src/components/ToolTip/Tooltip.js

@@ -3,6 +3,6 @@ import { Tooltip as ShadTooltip, TooltipContent, TooltipProvider, TooltipTrigger
 import { Body } from "../Typography/Body/body";
 var Tooltip = function (_a) {
     var title = _a.title, className = _a.className, children = _a.children;
-    return (_jsx(TooltipProvider, { children: _jsxs(ShadTooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: className, children: children }), _jsx(TooltipContent, { children: _jsx(Body, { variant: "body-base", className: "text-center", children: title }) })] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(ShadTooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: className, children: children }), _jsx(TooltipContent, { children: _jsx(Body, { variant: "body-md", className: "text-center", children: title }) })] }) }));
 };
 export default Tooltip;

package/dist/src/components/ToolTip/Tooltip.stories.js

@@ -11,8 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from "./Tooltip";
-import IconButton from "../Button/IconButton";
-import LUIcon from "../Icons/LUIcon";
+import { IconButton } from "../Button/IconButton";
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
@@ -21,7 +20,7 @@ export default {
 var Template = function (args) { return (_jsx(Tooltip, __assign({}, args))); };
 export var _ToolTip = Template.bind({});
 _ToolTip.args = {
-    children: (_jsx(IconButton, { icon: _jsx(LUIcon, { icon: "volume-high", size: "sm" }), shape: "rounded-full" })),
+    children: _jsx(IconButton, { icon: "volume-high", shape: "rounded-full" }),
     title: "Tooltip",
 };
 _ToolTip.argTypes = {

package/dist/src/components/Typography/Body/body.d.ts

@@ -9,10 +9,10 @@ export declare const variant: {
     "body-lg-500": string;
     "body-lg-600": string;
     "body-lg-700": string;
-    "body-base": string;
-    "body-base-500": string;
-    "body-base-600": string;
-    "body-base-700": string;
+    "body-md": string;
+    "body-md-500": string;
+    "body-md-600": string;
+    "body-md-700": string;
     "body-sm": string;
     "body-sm-500": string;
     "body-sm-600": string;
@@ -23,7 +23,7 @@ export declare const variant: {
     "body-xs-700": string;
 };
 declare const bodyVariants: (props?: ({
-    variant?: "body-base" | "body-xl" | "body-xl-500" | "body-xl-600" | "body-xl-700" | "body-lg" | "body-lg-500" | "body-lg-600" | "body-lg-700" | "body-base-500" | "body-base-600" | "body-base-700" | "body-sm" | "body-sm-500" | "body-sm-600" | "body-sm-700" | "body-xs" | "body-xs-500" | "body-xs-600" | "body-xs-700" | null | undefined;
+    variant?: "body-md" | "body-xl" | "body-xl-500" | "body-xl-600" | "body-xl-700" | "body-lg" | "body-lg-500" | "body-lg-600" | "body-lg-700" | "body-md-500" | "body-md-600" | "body-md-700" | "body-sm" | "body-sm-500" | "body-sm-600" | "body-sm-700" | "body-xs" | "body-xs-500" | "body-xs-600" | "body-xs-700" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AllowedTags = "p" | "span";
 type BodyProps<T extends AllowedTags = "p"> = {

package/dist/src/components/Typography/Body/body.js

@@ -32,10 +32,10 @@ export var variant = {
     "body-lg-500": "text-lg font-medium",
     "body-lg-600": "text-lg font-semibold",
     "body-lg-700": "text-lg font-bold",
-    "body-base": "text-base font-normal",
-    "body-base-500": "text-base font-medium",
-    "body-base-600": "text-base font-semibold",
-    "body-base-700": "text-base font-bold",
+    "body-md": "text-base font-normal",
+    "body-md-500": "text-base font-medium",
+    "body-md-600": "text-base font-semibold",
+    "body-md-700": "text-base font-bold",
     "body-sm": "text-sm font-normal",
     "body-sm-500": "text-sm font-medium",
     "body-sm-600": "text-sm font-semibold",
@@ -50,7 +50,7 @@ var bodyVariants = cva("!leading-normal m-0", {
         variant: variant,
     },
     defaultVariants: {
-        variant: "body-base",
+        variant: "body-md",
     },
 });
 function Body(_a) {

package/dist/src/components/Typography/Caption/Caption.stories.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Para } from "../../../utils/constants";
-import { Caption } from "../../../components/ui/caption";
+import { Caption, variantClasses } from "../../../components/ui/caption";
 export default {
     title: "Components/Typography/Caption",
     component: Caption,
@@ -21,4 +21,16 @@ var Template = function (args) { return _jsx(Caption, __assign({}, args)); };
 export var _Caption = Template.bind({});
 _Caption.args = {
     children: Dummy_Para,
+    variant: "md",
+};
+_Caption.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variantClasses),
+        description: "Caption Variant",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "string" },
+        },
+    },
 };

package/dist/src/components/Typography/Heading/heading.d.ts

@@ -27,7 +27,7 @@ export declare const variant: {
     "h6-700": string;
 };
 declare const headingVariants: (props?: ({
-    variant?: "h2" | "h1" | "h3" | "h4" | "h5" | "h6" | "h1-500" | "h1-600" | "h1-700" | "h2-500" | "h2-600" | "h2-700" | "h3-500" | "h3-600" | "h3-700" | "h4-500" | "h4-600" | "h4-700" | "h5-500" | "h5-600" | "h5-700" | "h6-500" | "h6-600" | "h6-700" | null | undefined;
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h1-500" | "h1-600" | "h1-700" | "h2-500" | "h2-600" | "h2-700" | "h3-500" | "h3-600" | "h3-700" | "h4-500" | "h4-600" | "h4-700" | "h5-500" | "h5-600" | "h5-700" | "h6-500" | "h6-600" | "h6-700" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type HeadingProps = React.HTMLProps<HTMLElement> & VariantProps<typeof headingVariants> & {
     variant?: keyof typeof variant;

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

@@ -44,10 +44,10 @@ export var variant = {
     "h5-500": "text-xl font-medium",
     "h5-600": "text-xl font-semibold",
     "h5-700": "text-xl font-bold",
-    h6: "text-lg font-normal",
-    "h6-500": "text-lg font-medium",
-    "h6-600": "text-lg font-semibold",
-    "h6-700": "text-lg font-bold",
+    h6: "!text-lg !font-normal",
+    "h6-500": "!text-lg !font-medium",
+    "h6-600": "!text-lg !font-semibold",
+    "h6-700": "!text-lg !font-bold",
 };
 var headingVariants = cva("!leading-normal", // Default base class
 {

package/dist/src/components/ui/body.d.ts

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-export declare const variant: {
-    "body-xl": string;
-    "body-xl-500": string;
-    "body-xl-600": string;
-    "body-xl-700": string;
-    "body-lg": string;
-    "body-lg-500": string;
-    "body-lg-600": string;
-    "body-lg-700": string;
-    "body-base": string;
-    "body-base-500": string;
-    "body-base-600": string;
-    "body-base-700": string;
-    "body-sm": string;
-    "body-sm-500": string;
-    "body-sm-600": string;
-    "body-sm-700": string;
-    "body-xs": string;
-    "body-xs-500": string;
-    "body-xs-600": string;
-    "body-xs-700": string;
-};
-declare const bodyVariants: (props?: ({
-    variant?: "body-base" | "body-xl" | "body-xl-500" | "body-xl-600" | "body-xl-700" | "body-lg" | "body-lg-500" | "body-lg-600" | "body-lg-700" | "body-base-500" | "body-base-600" | "body-base-700" | "body-sm" | "body-sm-500" | "body-sm-600" | "body-sm-700" | "body-xs" | "body-xs-500" | "body-xs-600" | "body-xs-700" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type AllowedTags = "p" | "span";
-type BodyProps<T extends AllowedTags = "p"> = {
-    as?: T;
-    className?: string;
-    children?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className"> & VariantProps<typeof bodyVariants>;
-declare function Body<T extends AllowedTags = "p">({ as, className, variant, children, ...props }: BodyProps<T>): import("react/jsx-runtime").JSX.Element;
-export { Body, bodyVariants };

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

@@ -1,61 +1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-export var variant = {
-    "body-xl": "text-xl font-normal",
-    "body-xl-500": "text-xl font-medium",
-    "body-xl-600": "text-xl font-semibold",
-    "body-xl-700": "text-xl font-bold",
-    "body-lg": "text-lg font-normal",
-    "body-lg-500": "text-lg font-medium",
-    "body-lg-600": "text-lg font-semibold",
-    "body-lg-700": "text-lg font-bold",
-    "body-base": "text-base font-normal",
-    "body-base-500": "text-base font-medium",
-    "body-base-600": "text-base font-semibold",
-    "body-base-700": "text-base font-bold",
-    "body-sm": "text-sm font-normal",
-    "body-sm-500": "text-sm font-medium",
-    "body-sm-600": "text-sm font-semibold",
-    "body-sm-700": "text-sm font-bold",
-    "body-xs": "text-xs font-normal",
-    "body-xs-500": "text-xs font-medium",
-    "body-xs-600": "text-xs font-semibold",
-    "body-xs-700": "text-xs font-bold",
-};
-var bodyVariants = cva("!leading-normal m-0", {
-    variants: {
-        variant: variant,
-    },
-    defaultVariants: {
-        variant: "body-base",
-    },
-});
-function Body(_a) {
-    var as = _a.as, className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["as", "className", "variant", "children"]);
-    var Tag = as || "p";
-    return (_jsx(Tag, __assign({ className: cn(bodyVariants({ variant: variant }), className) }, props, { children: children })));
-}
-export { Body, bodyVariants };
+"use strict";

package/dist/src/components/ui/caption.d.ts

@@ -1,4 +1,8 @@
 import * as React from "react";
-type CaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
-declare function Caption({ className, children, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+type CaptionVariant = "sm" | "md" | "lg";
+type CaptionProps = React.HTMLAttributes<HTMLTableCaptionElement> & {
+    variant?: CaptionVariant;
+};
+export declare const variantClasses: Record<CaptionVariant, string>;
+declare function Caption({ className, children, variant, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
 export { Caption };

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

@@ -22,8 +22,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
+export var variantClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+};
 function Caption(_a) {
-    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsx("caption", __assign({ className: cn("text-xs font-normal leading-normal inline", className) }, props, { children: children })));
+    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 })));
 }
 export { Caption };