linkedunion-design-kit 1.1.7 → 1.1.8

package/dist/components/Color/BackgroundColor/Color.d.ts

@@ -0,0 +1,2 @@
+import { ColorProps } from "@/types/interface";
+export declare const Color: ({ label, color }: ColorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Color/BackgroundColor/Color.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Color = function (_a) {
+    var label = _a.label, color = _a.color;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-bold mb-4", children: label }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded ".concat(color), "data-testid": "color-box" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: color === null || color === void 0 ? void 0 : color.replace('bg-', '') }), _jsx("code", { className: "text-sm", children: color })] })] })] }));
+};

package/dist/components/Color/BackgroundColor/Color.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import { ColorProps } from "@/types/interface";
+declare const _default: Meta;
+export default _default;
+export declare const Primary: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Gray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Success: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Warning: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Danger: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Info: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;

package/dist/components/Color/BackgroundColor/Color.stories.js

@@ -0,0 +1,88 @@
+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 { Color } from "../../../components/Color/BackgroundColor/Color";
+import { colorGroups } from "../../../utils";
+export default {
+    title: "Components/Color/BackgroundColor",
+    component: Color,
+    argTypes: {
+        label: { control: "text" },
+    },
+};
+var Template = function (args) { return _jsx(Color, __assign({}, args)); };
+export var Primary = Template.bind({});
+Primary.args = {
+    label: "Primary",
+    color: "bg-primary-500", // Default color
+};
+Primary.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.primary,
+    },
+};
+export var Gray = Template.bind({});
+Gray.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.gray,
+    },
+};
+Gray.args = {
+    label: "Gray",
+    color: "bg-gray-500",
+};
+export var Success = Template.bind({});
+Success.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.success,
+    },
+};
+Success.args = {
+    label: "Success",
+    color: "bg-success-500",
+};
+export var Warning = Template.bind({});
+Warning.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.warning,
+    },
+};
+Warning.args = {
+    label: "Warning",
+    color: "bg-warning-500",
+};
+export var Danger = Template.bind({});
+Danger.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.danger,
+    },
+};
+Danger.args = {
+    label: "Danger",
+    color: "bg-danger-500",
+};
+export var Info = Template.bind({});
+Info.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.info,
+    },
+};
+Info.args = {
+    label: "Info",
+    color: "bg-info-500",
+};

package/dist/components/Color/TextColor.d.ts

@@ -0,0 +1,3 @@
+export declare const TextColor: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Color/TextColor.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var TextColor = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'lu-text-default' : _b;
+    return (_jsxs("div", { className: "".concat(color), children: [".", color] }));
+};

package/dist/components/Color/TextColor.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const textColor: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    color: string;
+}>;

package/dist/components/Color/TextColor.stories.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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextColor } from "./TextColor";
+import { textColorList } from "../../utils";
+export default {
+    title: "Components/Color",
+    component: TextColor,
+};
+var Template = function (args) { return _jsx(TextColor, __assign({}, args)); };
+export var textColor = Template.bind({});
+textColor.args = {
+    color: "lu-text-default", // Default color
+};
+textColor.argTypes = {
+    color: {
+        control: { type: "select", labels: Object.fromEntries(textColorList.map(function (color) { return [color.key, color.label]; })) },
+        options: textColorList.map(function (color) { return color.key; }),
+    },
+};

package/dist/components/Icons/IconView.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { iconList } from "../../utils/iconList";
 export var IconView = function () {
     return (_jsx(_Fragment, { children: _jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6", "data-testid": "icons-list", children: iconList.map(function (icon, index) {
-                return (_jsxs("div", { className: "flex flex-col items-center justify-center bg-gray-100 lu-border-rounded-lg lu-pd-200 shadow-md hover:bg-gray-200", "data-testid": "single-icon", children: [_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 32 32", fill: "none", className: "mb-2", role: "img", children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { d: icon === null || icon === void 0 ? void 0 : icon.path, fill: "#070808" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }), _jsx("p", { className: "lu-font-size-x-small lu-font-weight-regular text-gray-700 text-center", children: icon === null || icon === void 0 ? void 0 : icon.label })] }, index));
+                return (_jsxs("div", { className: "flex flex-col items-center justify-center bg-gray-100 lu-border-rounded-lg lu-pd-200 shadow-md hover:bg-gray-200", "data-testid": "single-icon", children: [_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 32 32", fill: "none", className: "mb-2", role: "img", children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { d: icon === null || icon === void 0 ? void 0 : icon.path, fill: "#070808" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }), _jsx("p", { className: "lu-font-size-x-small lu-font-weight-regular lu-text-gray text-center", children: icon === null || icon === void 0 ? void 0 : icon.label })] }, index));
             }) }) }));
 };

package/dist/components/MediaCard/ContactProfile.js

@@ -5,6 +5,6 @@ import { Button } from "../Button/Button";
 export var ContactProfile = function (_a) {
     var _b = _a.image, image = _b === void 0 ? '/images/demo-image.jpg' : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? orientationEnum.landscape : _d, _e = _a.heading, heading = _e === void 0 ? 'Heading Text' : _e, _f = _a.body, body = _f === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.btnLabel, btnLabel = _h === void 0 ? 'View More' : _h;
     return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
-            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px]"), children: [_jsx("div", { className: "max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image", children: _jsx(LuImage, { image: image, aspectRatio: "", width: 160, height: 160, className: "lu-border-rounded-full lu-height-100 object-cover", orientation: mediaPosition }) }), _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: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100 card_button" })] })] })
-            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, width: 160, height: 160, className: "lu-height-100 object-cover lu-border-rounded-full", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light vertical_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
+            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px]"), children: [_jsx("div", { className: "max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image", children: _jsx(LuImage, { image: image, aspectRatio: "", width: 160, height: 160, className: "lu-border-rounded-full lu-height-100 object-cover", orientation: mediaPosition }) }), _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: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption horizontal_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100 card_button" })] })] })
+            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, width: 160, height: 160, className: "lu-height-100 object-cover lu-border-rounded-full", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
 };

package/dist/components/MediaCard/PostByCategory.js

@@ -5,6 +5,6 @@ import { Button } from "../Button/Button";
 export var PostByCategory = function (_a) {
     var _b = _a.image, image = _b === void 0 ? '/images/demo-image.jpg' : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? orientationEnum.landscape : _d, _e = _a.heading, heading = _e === void 0 ? 'Heading Text' : _e, _f = _a.body, body = _f === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.btnLabel, btnLabel = _h === void 0 ? 'View More' : _h;
     return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
-            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image", children: _jsx(LuImage, { image: image, aspectRatio: "", width: 240, height: 240, className: "lu-border-rounded-lg lu-width-100 lu-height-100 object-cover", orientation: mediaPosition }) }), _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: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100 card_button" })] })] })
-            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, width: 240, height: 240, className: "lu-width-100 lu-height-100 object-cover", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light vertical_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
+            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image", children: _jsx(LuImage, { image: image, aspectRatio: "", width: 240, height: 240, className: "lu-border-rounded-lg lu-width-100 lu-height-100 object-cover", orientation: mediaPosition }) }), _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: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text lu-text-caption", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100 card_button" })] })] })
+            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, width: 240, height: 240, className: "lu-width-100 lu-height-100 object-cover", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
 };

package/dist/components/Navigation/TopNavigation/TopNavigation.d.ts

@@ -0,0 +1,2 @@
+import { TopNavigationProps } from "@/types/interface";
+export declare const TopNavigation: ({ phoneNumber, phoneNumber2, bannerText, facebookUrl, linkedinUrl, twitterUrl, instagramUrl, onClickPhoneNumber }: TopNavigationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Navigation/TopNavigation/TopNavigation.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LUIcon } from "../../../components/Icons/LUIcon";
+import Link from "next/link";
+export var TopNavigation = function (_a) {
+    var phoneNumber = _a.phoneNumber, phoneNumber2 = _a.phoneNumber2, bannerText = _a.bannerText, facebookUrl = _a.facebookUrl, linkedinUrl = _a.linkedinUrl, twitterUrl = _a.twitterUrl, instagramUrl = _a.instagramUrl, onClickPhoneNumber = _a.onClickPhoneNumber;
+    return (_jsx(_Fragment, { children: (phoneNumber || phoneNumber2 || bannerText || facebookUrl || linkedinUrl || twitterUrl || instagramUrl) &&
+            _jsx("div", { className: "lu-pr-050 lu-pl-050 bg-primary-600 lu-text-base", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { className: "flex lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 gap-3", children: [phoneNumber && _jsxs("div", { className: "flex items-center gap-2 cursor-pointer", onClick: onClickPhoneNumber, children: [_jsx(LUIcon, { fill: "lu-neutral-icon-light", icon: "phone", size: "lu-icon-medium" }), _jsx("div", { className: "lu-font-size-small", children: phoneNumber })] }), phoneNumber && phoneNumber2 && _jsx("div", { className: "lu-border-width-0125 contact-border" }), phoneNumber2 && _jsxs("div", { className: "flex items-center gap-2 main-navbar-contact cursor-pointer", onClick: onClickPhoneNumber, children: [_jsx(LUIcon, { fill: "lu-neutral-icon-light", icon: "phone", size: "lu-icon-medium" }), _jsx("div", { className: "lu-font-size-small", children: phoneNumber2 })] })] }), bannerText && _jsx("div", { className: "lu-text-center lu-text-decoration-underline lu-font-weight-semibold lu-font-size-small promotional-banner-text", children: bannerText }), _jsxs("div", { className: "flex gap-2", children: [facebookUrl && _jsx(Link, { href: facebookUrl, target: "_blank", "aria-label": "Facebook", children: _jsx(LUIcon, { fill: "lu-info-icon-light", icon: 'facebook-f', size: "lu-icon-x-small", className: "cursor-pointer" }) }), twitterUrl && _jsx(Link, { href: twitterUrl, target: "_blank", "aria-label": "Twitter", children: _jsx(LUIcon, { fill: "lu-info-icon-light", icon: 'x-twitter', size: "lu-icon-x-small", className: "cursor-pointer" }) }), instagramUrl && _jsx(Link, { href: instagramUrl, target: "_blank", "aria-label": "Instagram", children: _jsx(LUIcon, { fill: "lu-info-icon-light", icon: 'instagram', size: "lu-icon-x-small", className: "cursor-pointer" }) }), linkedinUrl && _jsx(Link, { href: linkedinUrl, target: "_blank", "aria-label": "Linkedin", children: _jsx(LUIcon, { fill: "lu-info-icon-light", icon: 'linkedin-in', size: "lu-icon-x-small", className: "cursor-pointer" }) })] })] }) }) }));
+};

package/dist/components/Navigation/TopNavigation/TopNavigation.stories.d.ts

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

package/dist/components/Navigation/TopNavigation/TopNavigation.stories.js

@@ -0,0 +1,52 @@
+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 { TopNavigation } from "./TopNavigation";
+export default {
+    title: "Components/Navigation/TopNavigation",
+    component: TopNavigation,
+};
+var Template = function (args) { return _jsx(TopNavigation, __assign({}, args)); };
+export var topNavigation = Template.bind({});
+topNavigation.args = {
+    phoneNumber: '+1 (XXX) XXX-XXXX',
+    phoneNumber2: '+1 (XXX) XXX-XXXXX',
+    bannerText: 'Creative ideas often lead to innovative solutions in daily challenges.',
+    facebookUrl: 'https://www.facebook.com',
+    linkedinUrl: 'https://www.linkedin.com',
+    twitterUrl: 'https://www.twitter.com',
+    instagramUrl: 'https://www.instagram.com',
+    onClickPhoneNumber: function () { alert('clicked'); }
+};
+topNavigation.argTypes = {
+    phoneNumber: {
+        description: "Phone number 1",
+    },
+    phoneNumber2: {
+        description: "Phone number 2",
+    },
+    bannerText: {
+        description: "Promotional banner text",
+    },
+    facebookUrl: {
+        description: "Facebook URL",
+    },
+    linkedinUrl: {
+        description: "Instagram URL",
+    },
+    twitterUrl: {
+        description: "Twitter URL",
+    },
+    instagramUrl: {
+        description: "Instagram URL",
+    },
+};

package/dist/components/Typography/Headings/Headings.d.ts

@@ -0,0 +1,2 @@
+import { HeadingProps } from "@/types/interface";
+export declare const Heading: ({ heading, label, className }: HeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/Headings/Headings.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var Heading = function (_a) {
+    var _b = _a.heading, heading = _b === void 0 ? 'lu-heading-h1' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "".concat(heading, " ").concat(className), children: label }) }));
+};

package/dist/components/Typography/Headings/Headings.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/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/dist/components/Typography/Headings/Headings.stories.js

@@ -0,0 +1,31 @@
+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 { Heading } from "./Headings";
+import { headingsList } from "../../../utils";
+export default {
+    title: "Components/Typography/Headings",
+    component: Heading,
+};
+var Template = function (args) { return _jsx(Heading, __assign({}, args)); };
+export var heading = Template.bind({});
+heading.args = {
+    label: 'The quick brown fox  jumps over the dog.',
+    heading: 'lu-heading-h1',
+    className: ''
+};
+heading.argTypes = {
+    heading: {
+        control: { type: "select", labels: Object.fromEntries(headingsList.map(function (heading) { return [heading.key, heading.label]; })) },
+        options: headingsList.map(function (heading) { return heading.key; }),
+    },
+};

package/dist/styles/global.css

@@ -761,6 +761,9 @@ video {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.cursor-pointer {
+  cursor: pointer;
+}
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -785,6 +788,9 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
 .gap-4 {
   gap: 1rem;
 }
@@ -8565,14 +8571,6 @@ video {
 .leading-lu-line-height-xs {
   line-height: 1;
 }
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(81 84 88 / var(--tw-text-opacity, 1));
-}
-.text-gray-950 {
-  --tw-text-opacity: 1;
-  color: rgb(3 7 18 / var(--tw-text-opacity, 1));
-}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -8914,6 +8912,9 @@ video {
 .lu-border-rounded-full {
   border-radius: 9999px;
 }
+.lu-border-width-0125 {
+  border-width: var(--core-0125);
+}
 .lu-border-width-025 {
   border-width: var(--core-025);
 }
@@ -9956,6 +9957,84 @@ video {
 .lu-shadow-md {
   box-shadow: 0px 4px 12px 0 rgba(52, 52, 52, 0.15);
 }
+.lu-text-base {
+  color: var(--neutral-0);
+}
+.lu-text-default {
+  color: var(--black);
+}
+.lu-text-secondary {
+  color: var(--neutral-800);
+}
+.lu-text-caption {
+  color: var(--neutral-500);
+}
+.lu-text-placeholder {
+  color: var(--neutral-400);
+}
+.lu-text-disabled {
+  color: var(--neutral-400);
+}
+.lu-text-primary {
+  color: var(--primary-600);
+}
+.lu-text-success {
+  color: var(--success-600);
+}
+.lu-text-warning {
+  color: var(--warning-500);
+}
+.lu-text-danger {
+  color: var(--danger-600);
+}
+.lu-text-gray {
+  color: var(--neutral-600);
+}
+.lu-text-info {
+  color: var(--info-600);
+}
+.lu-text-link-default {
+  color: var(--primary-400);
+}
+.lu-text-link-pressed {
+  color: var(--primary-600);
+}
+.lu-heading-h1 {
+  font-size: var(--core-600);
+  font-weight: bold;
+  line-height: 1;
+  color: var(--black);
+}
+.lu-heading-h2 {
+  font-size: var(--core-450);
+  font-weight: bold;
+  line-height: 1;
+  color: var(--black);
+}
+.lu-heading-h3 {
+  font-size: var(--core-400);
+  font-weight: bold;
+  line-height: 1;
+  color: var(--black);
+}
+.lu-heading-h4 {
+  font-size: var(--core-350);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--black);
+}
+.lu-heading-h5 {
+  font-size: var(--core-300);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--black);
+}
+.lu-heading-h6 {
+  font-size: var(--core-250);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--black);
+}
 
 :root {
   /* --foreground-rgb: 0, 0, 0; */
@@ -10652,7 +10731,9 @@ table, th, td {
   overflow: hidden;
   text-transform: capitalize;
 }
-
+.contact-border {
+  border-color: var(--white);
+}
 @media (max-width: 440px) and (min-width: 398px) {
   .horizontal_card_image {
     max-width: 160px;
@@ -10674,6 +10755,20 @@ table, th, td {
     margin-top: 10px;
   }
 }
+
+@media(max-width: 1024px) {
+  .contact-border {
+    display: none;
+  }
+  .main-navbar-contact {
+    display: none;
+  }
+}
+@media(max-width: 744px) {
+  .promotional-banner-text {
+    display: none;
+  }
+}
 .before\:absolute::before {
   content: var(--tw-content);
   position: absolute;

package/dist/tailwind.config.js

@@ -7,7 +7,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { avatarShapeList, avatarSizesList, borderRadiusList, borderWidthList, buttonColorsList, buttonIconSizeList, buttonWithIconList, butttonSizeList, colorGroups, customAspectRatio, customAvatarSize, customBorderRadius, customBorderWidth, customBoxShadow, customButtonColors, customButtonIconSize, customButtonOutlineColors, customButtonSize, customColors, customFontSize, customFontWeight, customHeight, customIconButtonSize, customIconColors, customIconSize, customizeAvtarShape, customLineHeight, customLogoSize, customMinHeight, customMinWidth, customOpacity, customSize, customTextAlignment, customTextDecoration, customTextTransform, customTextWrap, customWidth, fontSizes, fontWeights, heights, iconColorList, iconSizeList, landscapeaspectRatioList, lineHeights, minHeights, minWidths, portraitaspectRatioList, sizes, textAlignment, textDecorations, textTransform, textWraps, widths } from './utils';
+import { avatarShapeList, avatarSizesList, borderRadiusList, borderWidthList, buttonColorsList, buttonIconSizeList, buttonWithIconList, butttonSizeList, colorGroups, customAspectRatio, customAvatarSize, customBorderRadius, customBorderWidth, customBoxShadow, customButtonColors, customButtonIconSize, customButtonOutlineColors, customButtonSize, customColors, customFontSize, customFontWeight, customHeadings, customHeight, customIconButtonSize, customIconColors, customIconSize, customizeAvtarShape, customizeTextColors, customLineHeight, customLogoSize, customMinHeight, customMinWidth, customOpacity, customSize, customTextAlignment, customTextDecoration, customTextTransform, customTextWrap, customWidth, fontSizes, fontWeights, headingsList, heights, iconColorList, iconSizeList, landscapeaspectRatioList, lineHeights, minHeights, minWidths, portraitaspectRatioList, sizes, textAlignment, textColorList, textDecorations, textTransform, textWraps, widths } from './utils';
 import generateUtilities from './utils';
 var plugin = require('tailwindcss/plugin');
 var config = {
@@ -17,7 +17,7 @@ var config = {
         './components/**/*.{js,ts,jsx,tsx,mdx}',
         './app/**/*.{js,ts,jsx,tsx,mdx}',
     ],
-    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], colorGroups.primary.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.gray.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.success.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.warning.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.danger.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.info.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), fontSizes.map(function (fontSize) { return ({ pattern: new RegExp(fontSize.key) }); }), true), fontWeights.map(function (fontWeight) { return ({ pattern: new RegExp(fontWeight.key) }); }), true), lineHeights.map(function (lineHeight) { return ({ pattern: new RegExp(lineHeight.key) }); }), true), textAlignment.map(function (textAlign) { return ({ pattern: new RegExp(textAlign.key) }); }), true), textTransform.map(function (textTrans) { return ({ pattern: new RegExp(textTrans.key) }); }), true), textDecorations.map(function (textDec) { return ({ pattern: new RegExp(textDec.key) }); }), true), textWraps.map(function (textWrap) { return ({ pattern: new RegExp(textWrap.key) }); }), true), sizes.map(function (size) { return ({ pattern: new RegExp(size.key) }); }), true), widths.map(function (width) { return ({ pattern: new RegExp(width.key) }); }), true), heights.map(function (height) { return ({ pattern: new RegExp(height.key) }); }), true), minWidths.map(function (minWidth) { return ({ pattern: new RegExp(minWidth.key) }); }), true), minHeights.map(function (minHeight) { return ({ pattern: new RegExp(minHeight.key) }); }), true), borderRadiusList.map(function (borderRadius) { return ({ pattern: new RegExp(borderRadius.key) }); }), true), borderWidthList.map(function (borderWidth) { return ({ pattern: new RegExp(borderWidth.key) }); }), true), iconSizeList.map(function (iconSize) { return ({ pattern: new RegExp(iconSize.key) }); }), true), iconColorList.map(function (iconColor) { return ({ pattern: new RegExp(iconColor.key) }); }), true), buttonColorsList.map(function (btnColor) { return ({ pattern: new RegExp(btnColor.key) }); }), true), butttonSizeList.map(function (btnSize) { return ({ pattern: new RegExp(btnSize.key) }); }), true), buttonIconSizeList.map(function (btnIconSize) { return ({ pattern: new RegExp(btnIconSize.key) }); }), true), buttonWithIconList.map(function (iconButton) { return ({ pattern: new RegExp(iconButton.key) }); }), true), portraitaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true), landscapeaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true), avatarSizesList.map(function (avatarSize) { return ({ pattern: new RegExp(avatarSize.key) }); }), true), avatarShapeList.map(function (avatarShape) { return ({ pattern: new RegExp(avatarShape.key) }); }), true),
+    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], colorGroups.primary.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.gray.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.success.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.warning.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.danger.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.info.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), fontSizes.map(function (fontSize) { return ({ pattern: new RegExp(fontSize.key) }); }), true), fontWeights.map(function (fontWeight) { return ({ pattern: new RegExp(fontWeight.key) }); }), true), lineHeights.map(function (lineHeight) { return ({ pattern: new RegExp(lineHeight.key) }); }), true), textAlignment.map(function (textAlign) { return ({ pattern: new RegExp(textAlign.key) }); }), true), textTransform.map(function (textTrans) { return ({ pattern: new RegExp(textTrans.key) }); }), true), textDecorations.map(function (textDec) { return ({ pattern: new RegExp(textDec.key) }); }), true), textWraps.map(function (textWrap) { return ({ pattern: new RegExp(textWrap.key) }); }), true), sizes.map(function (size) { return ({ pattern: new RegExp(size.key) }); }), true), widths.map(function (width) { return ({ pattern: new RegExp(width.key) }); }), true), heights.map(function (height) { return ({ pattern: new RegExp(height.key) }); }), true), minWidths.map(function (minWidth) { return ({ pattern: new RegExp(minWidth.key) }); }), true), minHeights.map(function (minHeight) { return ({ pattern: new RegExp(minHeight.key) }); }), true), borderRadiusList.map(function (borderRadius) { return ({ pattern: new RegExp(borderRadius.key) }); }), true), borderWidthList.map(function (borderWidth) { return ({ pattern: new RegExp(borderWidth.key) }); }), true), iconSizeList.map(function (iconSize) { return ({ pattern: new RegExp(iconSize.key) }); }), true), iconColorList.map(function (iconColor) { return ({ pattern: new RegExp(iconColor.key) }); }), true), buttonColorsList.map(function (btnColor) { return ({ pattern: new RegExp(btnColor.key) }); }), true), butttonSizeList.map(function (btnSize) { return ({ pattern: new RegExp(btnSize.key) }); }), true), buttonIconSizeList.map(function (btnIconSize) { return ({ pattern: new RegExp(btnIconSize.key) }); }), true), buttonWithIconList.map(function (iconButton) { return ({ pattern: new RegExp(iconButton.key) }); }), true), portraitaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true), landscapeaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true), avatarSizesList.map(function (avatarSize) { return ({ pattern: new RegExp(avatarSize.key) }); }), true), avatarShapeList.map(function (avatarShape) { return ({ pattern: new RegExp(avatarShape.key) }); }), true), textColorList.map(function (textColor) { return ({ pattern: new RegExp(textColor.key) }); }), true), headingsList.map(function (heading) { return ({ pattern: new RegExp(heading.key) }); }), true),
     theme: {
         extend: {
             backgroundImage: {
@@ -139,6 +139,10 @@ var config = {
             //plugin for box shadow
             var boxShadowUtilities = generateUtilities('boxShadow', theme);
             addUtilities(boxShadowUtilities, ['responsive']);
+            //plugin for custom text colors
+            addUtilities(customizeTextColors, ['responsive']);
+            //plugin for custom headings
+            addUtilities(customHeadings, ['responsive']);
         }),
     ],
 };

package/dist/utils/index.d.ts

@@ -103,10 +103,18 @@ export declare const avatarSizesList: {
     key: string;
     label: string;
 }[];
+export declare const textColorList: {
+    key: string;
+    label: string;
+}[];
 export declare const avatarShapeList: {
     key: string;
     label: string;
 }[];
+export declare const headingsList: {
+    key: string;
+    label: string;
+}[];
 export declare const avtarBackgroundSize: (size: string) => {
     width: string;
     height: string;
@@ -417,6 +425,9 @@ export declare const customOpacity: {
     'lu-opacity-100': string;
 };
 export declare const customBorderWidth: {
+    '.lu-border-width-0125': {
+        borderWidth: string;
+    };
     '.lu-border-width-025': {
         borderWidth: string;
     };
@@ -1426,6 +1437,88 @@ export declare const customizeAvtarShape: {
         borderRadius: string;
     };
 };
+export declare const customizeTextColors: {
+    '.lu-text-base': {
+        color: string;
+    };
+    '.lu-text-default': {
+        color: string;
+    };
+    '.lu-text-secondary': {
+        color: string;
+    };
+    '.lu-text-caption': {
+        color: string;
+    };
+    '.lu-text-placeholder': {
+        color: string;
+    };
+    '.lu-text-disabled': {
+        color: string;
+    };
+    '.lu-text-primary': {
+        color: string;
+    };
+    '.lu-text-success': {
+        color: string;
+    };
+    '.lu-text-warning': {
+        color: string;
+    };
+    '.lu-text-danger': {
+        color: string;
+    };
+    '.lu-text-gray': {
+        color: string;
+    };
+    '.lu-text-info': {
+        color: string;
+    };
+    '.lu-text-link-default': {
+        color: string;
+    };
+    '.lu-text-link-pressed': {
+        color: string;
+    };
+};
+export declare const customHeadings: {
+    '.lu-heading-h1': {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    '.lu-heading-h2': {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    '.lu-heading-h3': {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    '.lu-heading-h4': {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    '.lu-heading-h5': {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    '.lu-heading-h6': {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+};
 export declare const table_data_className = "bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5";
 export declare const table_header_className = "lu-pd-200";
 export declare const table_sub_heading_className = "lu-text-center lu-text-uppercase lu-font-weight-semibold lu-font-size-large lu-pd-200";

package/dist/utils/index.js

@@ -333,10 +333,34 @@ export var avatarSizesList = [
     { key: 'lu-avatar-medium', label: 'lu-avatar-medium' },
     { key: 'lu-avatar-small', label: 'lu-avatar-small' },
 ];
+export var textColorList = [
+    { key: 'lu-text-base', label: 'lu-text-base' },
+    { key: 'lu-text-default', label: 'lu-text-default' },
+    { key: 'lu-text-secondary', label: 'lu-text-secondary' },
+    { key: 'lu-text-caption', label: 'lu-text-caption' },
+    { key: 'lu-text-placeholder', label: 'lu-text-placeholder' },
+    { key: 'lu-text-disabled', label: 'lu-text-disabled' },
+    { key: 'lu-text-primary', label: 'lu-text-primary' },
+    { key: 'lu-text-success', label: 'lu-text-success' },
+    { key: 'lu-text-warning', label: 'lu-text-warning' },
+    { key: 'lu-text-danger', label: 'lu-text-danger' },
+    { key: 'lu-text-gray', label: 'lu-text-gray' },
+    { key: 'lu-text-info', label: 'lu-text-info' },
+    { key: 'lu-text-link-default', label: 'lu-text-link-default' },
+    { key: 'lu-text-link-pressed', label: 'lu-text-link-pressed' },
+];
 export var avatarShapeList = [
     { key: 'square', label: 'square' },
     { key: 'circle', label: 'circle' },
 ];
+export var headingsList = [
+    { key: 'lu-heading-h1', label: 'lu-heading-h1' },
+    { key: 'lu-heading-h2', label: 'lu-heading-h2' },
+    { key: 'lu-heading-h3', label: 'lu-heading-h3' },
+    { key: 'lu-heading-h4', label: 'lu-heading-h4' },
+    { key: 'lu-heading-h5', label: 'lu-heading-h5' },
+    { key: 'lu-heading-h6', label: 'lu-heading-h6' }
+];
 export var avtarBackgroundSize = function (size) {
     if (size === 'lu-avatar-massive') {
         return {
@@ -737,6 +761,7 @@ export var customOpacity = {
     'lu-opacity-100': '1',
 };
 export var customBorderWidth = {
+    '.lu-border-width-0125': { borderWidth: 'var(--core-0125)' },
     '.lu-border-width-025': { borderWidth: 'var(--core-025)' },
     '.lu-border-width-050': { borderWidth: 'var(--core-050)' },
     '.lu-border-width-100': { borderWidth: 'var(--core-100)' },
@@ -1650,6 +1675,60 @@ export var customizeAvtarShape = {
     '.square': { borderRadius: '0px' },
     '.circle': { borderRadius: '9999px' },
 };
+export var customizeTextColors = {
+    '.lu-text-base': { color: 'var(--neutral-0)' },
+    '.lu-text-default': { color: 'var(--black)' },
+    '.lu-text-secondary': { color: 'var(--neutral-800)' },
+    '.lu-text-caption': { color: 'var(--neutral-500)' },
+    '.lu-text-placeholder': { color: 'var(--neutral-400)' },
+    '.lu-text-disabled': { color: 'var(--neutral-400)' },
+    '.lu-text-primary': { color: 'var(--primary-600)' },
+    '.lu-text-success': { color: 'var(--success-600)' },
+    '.lu-text-warning': { color: 'var(--warning-500)' },
+    '.lu-text-danger': { color: 'var(--danger-600)' },
+    '.lu-text-gray': { color: 'var(--neutral-600)' },
+    '.lu-text-info': { color: 'var(--info-600)' },
+    '.lu-text-link-default': { color: 'var(--primary-400)' },
+    '.lu-text-link-pressed': { color: 'var(--primary-600)' },
+};
+export var customHeadings = {
+    '.lu-heading-h1': {
+        fontSize: 'var(--core-600)',
+        fontWeight: 'bold',
+        lineHeight: '1',
+        color: 'var(--black)'
+    },
+    '.lu-heading-h2': {
+        fontSize: 'var(--core-450)',
+        fontWeight: 'bold',
+        lineHeight: '1',
+        color: 'var(--black)'
+    },
+    '.lu-heading-h3': {
+        fontSize: 'var(--core-400)',
+        fontWeight: 'bold',
+        lineHeight: '1',
+        color: 'var(--black)'
+    },
+    '.lu-heading-h4': {
+        fontSize: 'var(--core-350)',
+        fontWeight: '600',
+        lineHeight: '1',
+        color: 'var(--black)'
+    },
+    '.lu-heading-h5': {
+        fontSize: 'var(--core-300)',
+        fontWeight: '600',
+        lineHeight: '1',
+        color: 'var(--black)'
+    },
+    '.lu-heading-h6': {
+        fontSize: 'var(--core-250)',
+        fontWeight: '600',
+        lineHeight: '1',
+        color: 'var(--black)'
+    }
+};
 // Components CSS Classes
 export var table_data_className = 'bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5';
 export var table_header_className = 'lu-pd-200';

package/package.json

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