linkedunion-design-kit 1.6.2 → 1.6.3

package/dist/index.d.ts

@@ -11,6 +11,11 @@ export { Input } from "./src/components/ui/input";
 export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorTooltip";
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
 export { default as ImageUploader } from "./src/components/ui/imageUploader";
-export { Typography } from "./src/components/ui/typography";
 export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";
+export { Typography } from "./src/components/ui/typography";
+export { Heading } from "./src/components/Typography/Heading/heading";
+export { Body } from "./src/components/Typography/Body/body";
+export { Display } from "./src/components/Typography/Display/display";
+export { Caption } from "./src/components/ui/caption";
+export { default as Tooltip } from "./src/components/ToolTip/Tooltip";

package/dist/index.js

@@ -11,6 +11,11 @@ export { Input } from "./src/components/ui/input";
 export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorTooltip";
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
 export { default as ImageUploader } from "./src/components/ui/imageUploader";
-export { Typography } from "./src/components/ui/typography";
 export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";
+export { Typography } from "./src/components/ui/typography";
+export { Heading } from "./src/components/Typography/Heading/heading";
+export { Body } from "./src/components/Typography/Body/body";
+export { Display } from "./src/components/Typography/Display/display";
+export { Caption } from "./src/components/ui/caption";
+export { default as Tooltip } from "./src/components/ToolTip/Tooltip";

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

@@ -32,8 +32,8 @@ export var buttonSizes = {
 };
 export var iconButtonSize = {
     xs: "!p-1",
-    sm: "p-2",
-    md: "p-2",
+    sm: "!p-2",
+    md: "!p-2",
     lg: "!p-3",
-    xl: "p-5",
+    xl: "!p-5",
 };

package/dist/src/components/ToolTip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { ToolTipInterface } from "./type";
+declare const Tooltip: ({ title, className, children }: ToolTipInterface) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as ShadTooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
+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 }) })] }) }));
+};
+export default Tooltip;

package/dist/src/components/ToolTip/Tooltip.stories.d.ts

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

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

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tooltip from "./Tooltip";
+import IconButton from "../Button/IconButton";
+import LUIcon from "../Icons/LUIcon";
+export default {
+    title: "Components/Tooltip",
+    component: Tooltip,
+    tags: ["autodocs"],
+};
+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" })),
+    title: "Tooltip",
+};
+_ToolTip.argTypes = {
+    children: {
+        description: "React component to be wrapped",
+        control: false,
+        table: {
+            type: { summary: "string" },
+            defaultValue: {
+                summary: '<IconButton icon={<LUIcon icon="volume-high" size="sm"/>} shape="rounded-full"/>',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,5 @@
+export interface ToolTipInterface {
+    title: string;
+    className?: string;
+    children: React.ReactNode;
+}

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dummy_Para } from "../../../utils/constants";
+import { Body, variant } from "../../../components/Typography/Body/body";
+export default {
+    title: "Components/Typography/Body",
+    component: Body,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Body, __assign({}, args)); };
+export var _Body = Template.bind({});
+_Body.args = {
+    children: Dummy_Para,
+    variant: "body-base",
+    as: "p",
+};
+_Body.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Body Variant",
+        table: {
+            defaultValue: { summary: "body-base" },
+            type: { summary: "string" },
+        },
+    },
+    as: {
+        control: { type: "select" },
+        options: ["p", "span"],
+        description: "HTML tag to render",
+        table: {
+            defaultValue: { summary: "p" },
+            type: { summary: '"p" | "span"' },
+        },
+    },
+};

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

@@ -0,0 +1,35 @@
+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/Typography/Body/body.js

@@ -0,0 +1,61 @@
+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 };

package/dist/src/components/Typography/Caption/Caption.stories.d.ts

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

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

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dummy_Para } from "../../../utils/constants";
+import { Caption } from "../../../components/ui/caption";
+export default {
+    title: "Components/Typography/Caption",
+    component: Caption,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Caption, __assign({}, args)); };
+export var _Caption = Template.bind({});
+_Caption.args = {
+    children: Dummy_Para,
+};

package/dist/src/components/Typography/Display/Display.stories.d.ts

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

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

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dummy_Para } from "../../../utils/constants";
+import { Display, variant } from "../../../components/Typography/Display/display";
+export default {
+    title: "Components/Typography/Display",
+    component: Display,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Display, __assign({}, args)); };
+export var _Display = Template.bind({});
+_Display.args = {
+    children: Dummy_Para,
+    variant: "display-md",
+};
+_Display.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Display Variant",
+        table: {
+            defaultValue: { summary: "display-md" },
+            type: { summary: "string" },
+        },
+    },
+};

package/dist/src/components/Typography/Display/display.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const variant: {
+    "display-lg": string;
+    "display-md": string;
+    "display-sm": string;
+};
+declare const displayVariants: (props?: ({
+    variant?: "display-md" | "display-lg" | "display-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type DisplayProps = React.HTMLProps<HTMLDivElement> & VariantProps<typeof displayVariants> & {
+    variant?: keyof typeof variant;
+};
+declare function Display({ className, variant, children, ...props }: DisplayProps): import("react/jsx-runtime").JSX.Element;
+export { Display, displayVariants };

package/dist/src/components/Typography/Display/display.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);
+};
+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 = {
+    "display-lg": "text-7xl font-bold",
+    "display-md": "text-6xl font-bold",
+    "display-sm": "text-5xl font-bold",
+};
+var displayVariants = cva("!leading-normal", // Default base class
+{
+    variants: {
+        variant: variant,
+    },
+    defaultVariants: {
+        variant: "display-md",
+    },
+});
+function Display(_a) {
+    var className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["className", "variant", "children"]);
+    var Tag = "div";
+    if (variant === null || variant === void 0 ? void 0 : variant.startsWith("display")) {
+        Tag = "div";
+    }
+    return (_jsx(Tag, __assign({ className: cn(displayVariants({ variant: variant, className: className })) }, props, { children: children })));
+}
+export { Display, displayVariants };

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

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

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

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dummy_Para } from "../../../utils/constants";
+import { Heading, variant } from "./heading";
+export default {
+    title: "Components/Typography/Heading",
+    component: Heading,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Heading, __assign({}, args)); };
+export var _Heading = Template.bind({});
+_Heading.args = {
+    children: Dummy_Para,
+    variant: "h2",
+};
+_Heading.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Heading Variant",
+        table: {
+            defaultValue: { summary: "h2" },
+            type: { summary: "string" },
+        },
+    },
+};

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const variant: {
+    h1: string;
+    "h1-500": string;
+    "h1-600": string;
+    "h1-700": string;
+    h2: string;
+    "h2-500": string;
+    "h2-600": string;
+    "h2-700": string;
+    h3: string;
+    "h3-500": string;
+    "h3-600": string;
+    "h3-700": string;
+    h4: string;
+    "h4-500": string;
+    "h4-600": string;
+    "h4-700": string;
+    h5: string;
+    "h5-500": string;
+    "h5-600": string;
+    "h5-700": string;
+    h6: string;
+    "h6-500": string;
+    "h6-600": string;
+    "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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type HeadingProps = React.HTMLProps<HTMLElement> & VariantProps<typeof headingVariants> & {
+    variant?: keyof typeof variant;
+};
+declare function Heading({ className, variant, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export { Heading, headingVariants };

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

@@ -0,0 +1,69 @@
+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 = {
+    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-500": "text-4xl font-medium",
+    "h2-600": "text-4xl font-semibold",
+    "h2-700": "text-4xl font-bold",
+    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-500": "text-2xl font-medium",
+    "h4-600": "text-2xl font-semibold",
+    "h4-700": "text-2xl font-bold",
+    h5: "text-xl font-normal",
+    "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",
+};
+var headingVariants = cva("!leading-normal", // Default base class
+{
+    variants: {
+        variant: variant,
+    },
+    defaultVariants: {
+        variant: "h2",
+    },
+});
+function Heading(_a) {
+    var className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["className", "variant", "children"]);
+    var Tag = "span";
+    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 })) }, props, { children: children })));
+}
+export { Heading, headingVariants };

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

@@ -0,0 +1,3 @@
+import { HeadingInterface } from "./type";
+declare const Heading: ({ children, className, ...props }: HeadingInterface) => import("react/jsx-runtime").JSX.Element;
+export default Heading;

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

@@ -0,0 +1,29 @@
+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 { Heading as ShadHeading } from "../ui/heading";
+var Heading = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (_jsx(ShadHeading, __assign({ className: className }, props, { children: children })));
+};
+export default Heading;

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

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

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

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dummy_Para } from "../../utils/constants";
+import Heading from "./Heading";
+import { variant } from "../ui/heading";
+export default {
+    title: "Components/Typography/Heading",
+    component: Heading,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(Heading, __assign({}, args))); };
+export var _Heading = Template.bind({});
+_Heading.args = {
+    children: Dummy_Para,
+    variant: "h6-700",
+};
+_Heading.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Heading Variant",
+        table: {
+            defaultValue: { summary: "h6-700" },
+            type: { summary: "string" },
+        },
+    },
+};

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

@@ -1,7 +1,7 @@
 import { VariantProps } from "class-variance-authority";
-import { typographyVariants } from "../ui/typography";
-export interface TypographyInterface {
+import { headingVariants } from "../ui/heading";
+export interface HeadingInterface {
     children: React.ReactNode;
     className?: string;
-    variant?: Exclude<VariantProps<typeof typographyVariants>["variant"], null>;
+    variant?: Exclude<VariantProps<typeof headingVariants>["variant"], null>;
 }

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,61 @@
+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 };

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+type CaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
+declare function Caption({ className, children, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+export { Caption };

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

@@ -0,0 +1,29 @@
+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 { cn } from "../../lib/utils";
+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 })));
+}
+export { Caption };

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const variant: {
+    "display-lg": string;
+    "display-md": string;
+    "display-sm": string;
+};
+declare const displayVariants: (props?: ({
+    variant?: "display-md" | "display-lg" | "display-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type DisplayProps = React.HTMLProps<HTMLDivElement> & VariantProps<typeof displayVariants> & {
+    variant?: keyof typeof variant;
+};
+declare function Display({ className, variant, children, ...props }: DisplayProps): import("react/jsx-runtime").JSX.Element;
+export { Display, displayVariants };

package/dist/src/components/ui/display.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);
+};
+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 = {
+    "display-lg": "text-7xl font-bold",
+    "display-md": "text-6xl font-bold",
+    "display-sm": "text-5xl font-bold",
+};
+var displayVariants = cva("!leading-normal", // Default base class
+{
+    variants: {
+        variant: variant,
+    },
+    defaultVariants: {
+        variant: "display-md",
+    },
+});
+function Display(_a) {
+    var className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["className", "variant", "children"]);
+    var Tag = "div";
+    if (variant === null || variant === void 0 ? void 0 : variant.startsWith("display")) {
+        Tag = "div";
+    }
+    return (_jsx(Tag, __assign({ className: cn(displayVariants({ variant: variant, className: className })) }, props, { children: children })));
+}
+export { Display, displayVariants };

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const variant: {
+    h1: string;
+    "h1-500": string;
+    "h1-600": string;
+    "h1-700": string;
+    h2: string;
+    "h2-500": string;
+    "h2-600": string;
+    "h2-700": string;
+    h3: string;
+    "h3-500": string;
+    "h3-600": string;
+    "h3-700": string;
+    h4: string;
+    "h4-500": string;
+    "h4-600": string;
+    "h4-700": string;
+    h5: string;
+    "h5-500": string;
+    "h5-600": string;
+    "h5-700": string;
+    h6: string;
+    "h6-500": string;
+    "h6-600": string;
+    "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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type HeadingProps = React.HTMLProps<HTMLElement> & VariantProps<typeof headingVariants> & {
+    variant?: keyof typeof variant;
+};
+declare function Heading({ className, variant, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export { Heading, headingVariants };

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

@@ -0,0 +1,69 @@
+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 = {
+    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-500": "text-4xl font-medium",
+    "h2-600": "text-4xl font-semibold",
+    "h2-700": "text-4xl font-bold",
+    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-500": "text-2xl font-medium",
+    "h4-600": "text-2xl font-semibold",
+    "h4-700": "text-2xl font-bold",
+    h5: "text-xl font-normal",
+    "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",
+};
+var headingVariants = cva("!leading-normal", // Default base class
+{
+    variants: {
+        variant: variant,
+    },
+    defaultVariants: {
+        variant: "h2",
+    },
+});
+function Heading(_a) {
+    var className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["className", "variant", "children"]);
+    var Tag = "span";
+    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 })) }, props, { children: children })));
+}
+export { Heading, headingVariants };

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

@@ -16,8 +16,8 @@ import { useDropzone } from "react-dropzone";
 import { Button } from "../../components/ui/button";
 import { cn } from "../../lib/utils";
 import LUIcon from "../Icons/LUIcon";
-import Typography from "../Typography/Typography";
 import LuImage from "../Images/LuImage";
+import { Body } from "../Typography/Body/body";
 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];
@@ -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(Typography, { variant: "b4", 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", 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", children: "Image is required." })), preview && (_jsx(Button, { variant: "link", onClick: removeFile, className: "!mt-2 text-sm text-gray-700", children: "Remove Image" }))] }));
 };
 export default ImageUploader;

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

@@ -30,8 +30,8 @@ export var size = {
     lg: "h-6 w-14",
 };
 export var variant = {
-    default: "data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
-    primary: "data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
+    default: "data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
+    primary: "data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
     success: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-input focus-visible:ring-green-500",
     danger: "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-input focus-visible:ring-red-500",
 };

package/dist/styles/global.css

@@ -311,6 +311,9 @@
   .grid {
     display: grid;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -1059,9 +1062,6 @@
   .\!p-5 {
     padding: calc(var(--spacing) * 5) !important;
   }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1222,6 +1222,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
   .\!font-medium {
     --tw-font-weight: var(--font-weight-medium) !important;
     font-weight: var(--font-weight-medium) !important;
@@ -3135,11 +3139,6 @@
       border-color: #276ab3;
     }
   }
-  .data-\[state\=checked\]\:bg-blue-500 {
-    &[data-state="checked"] {
-      background-color: #3a84d4;
-    }
-  }
   .data-\[state\=checked\]\:bg-blue-600 {
     &[data-state="checked"] {
       background-color: #276ab3;

package/package.json

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