linkedunion-design-kit 1.2.4 → 1.2.6

package/dist/components/Icons/IconView.d.ts

@@ -1 +1 @@
-export declare const IconView: () => import("react/jsx-runtime").JSX.Element;
+export declare const IconView: () => import("react").JSX.Element;

package/dist/components/Icons/IconView.jsx

@@ -0,0 +1,23 @@
+import { iconList } from "../../utils/iconList";
+export var IconView = function () {
+    return (<>
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6" data-testid="icons-list">
+            {iconList.map(function (icon, index) {
+            return (<div key={index} 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">
+                        <svg width="25" height="25" viewBox="0 0 32 32" fill="none" className="mb-2" role="img">
+                            <g clipPath="url(#clip0_9168_14965)">
+                                <path d={icon === null || icon === void 0 ? void 0 : icon.path} fill="#070808"/>
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_9168_14965">
+                                    <rect width="32" height="32" fill="black"/>
+                                </clipPath>
+                            </defs>
+                        </svg>
+                        <p className="lu-font-size-x-small lu-font-weight-regular lu-text-gray text-center">{icon === null || icon === void 0 ? void 0 : icon.label}</p>
+                    </div>);
+        })}
+        </div>
+
+    </>);
+};

package/dist/components/Icons/IconView.stories.jsx

@@ -0,0 +1,8 @@
+import { IconView } from "./IconView";
+export default {
+    title: "Components/Icon",
+    component: IconView,
+    tags: ['!autodocs'],
+};
+var Template = function (args) { return <IconView {...args}/>; };
+export var iconView = Template.bind({});

package/dist/components/Icons/LUIcon.d.ts

@@ -1,2 +1,2 @@
 import { IconProps } from "@/types/interface";
-export declare const LUIcon: ({ size, fill, icon, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LUIcon: ({ size, fill, icon, className }: IconProps) => import("react").JSX.Element;

package/dist/components/Icons/LUIcon.jsx

@@ -0,0 +1,20 @@
+import { iconList } from "../../utils/iconList";
+export var LUIcon = function (_a) {
+    var _b;
+    var size = _a.size, fill = _a.fill, icon = _a.icon, className = _a.className;
+    var selectedIcon = iconList.find(function (item) { return item.key === icon; });
+    return (<>
+        {/* <div data-testid="single-icon"> */}
+            <svg className={"".concat(size, " ").concat(className)} viewBox="0 0 32 32" fill="none">
+                <g clip-path="url(#clip0_9168_14965)">
+                    <path d={(_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : ''} className={"".concat(fill, " icon")}/>
+                </g>
+                <defs>
+                    <clipPath id="clip0_9168_14965">
+                        <rect width="32" height="32" fill="black"/>
+                    </clipPath>
+                </defs>
+            </svg>
+        {/* </div> */}
+    </>);
+};

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

@@ -0,0 +1,29 @@
+import { LUIcon } from "./LUIcon";
+import { iconColorList, iconSizeList } from "../../utils";
+import { iconList } from "../../utils/iconList";
+export default {
+    title: "Components/Icon",
+    component: LUIcon,
+    tags: ['autodocs'],
+};
+var Template = function (args) { return <LUIcon {...args}/>; };
+export var icon = Template.bind({});
+icon.args = {
+    size: 'lu-icon-x-small',
+    fill: 'lu-primary-icon-default',
+    icon: iconList[0].key,
+};
+icon.argTypes = {
+    size: {
+        control: { type: "select", labels: Object.fromEntries(iconSizeList.map(function (size) { return [size.key, size.label]; })) },
+        options: iconSizeList.map(function (size) { return size.key; }),
+    },
+    fill: {
+        control: { type: "select", labels: Object.fromEntries(iconColorList.map(function (color) { return [color.key, color.label]; })) },
+        options: iconColorList.map(function (color) { return color.key; }),
+    },
+    icon: {
+        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
+        options: iconList.map(function (icon) { return icon.key; }),
+    }
+};

package/dist/components/Images/LuImage.d.ts

@@ -1,2 +1,2 @@
 import { AspectRatioProps } from "@/types/interface";
-export declare const LuImage: ({ image, aspectRatio, width, height, className }: AspectRatioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LuImage: ({ image, aspectRatio, width, height, className }: AspectRatioProps) => import("react").JSX.Element;

package/dist/components/Images/LuImage.jsx

@@ -0,0 +1,7 @@
+import Image from "next/image";
+export var LuImage = function (_a) {
+    var image = _a.image, aspectRatio = _a.aspectRatio, _b = _a.width, width = _b === void 0 ? 240 : _b, _c = _a.height, height = _c === void 0 ? 240 : _c, className = _a.className;
+    return (<Image src={image || ''} alt="Image" width={width} height={height} // Specify the height to maintain aspect ratio
+     className={"".concat(aspectRatio, " ").concat(className)} // Apply aspect ratio and additional classes
+    />);
+};

package/dist/components/Images/LuImage.stories.jsx

@@ -0,0 +1,39 @@
+import { LuImage } from "./LuImage";
+import { landscapeaspectRatioList, portraitaspectRatioList } from "../../utils";
+import { orientationEnum } from "../../utils/enum";
+export default {
+    title: "Components/Image",
+    component: LuImage,
+};
+var Template = function (args, _a) {
+    var argTypes = _a.argTypes;
+    //Show aspectRatio options based on orientation(landscape) 
+    var isLandscape = args.orientation === orientationEnum.landscape;
+    argTypes.aspectRatio.options = isLandscape ? landscapeaspectRatioList.map(function (ratio) { return ratio.key; }) : portraitaspectRatioList.map(function (ratio) { return ratio.key; });
+    argTypes.aspectRatio.control.labels = Object.fromEntries((isLandscape ? landscapeaspectRatioList : portraitaspectRatioList).map(function (ratio) { return [
+        ratio.key,
+        ratio.label,
+    ]; }));
+    return <LuImage {...args}/>;
+};
+export var image = Template.bind({});
+image.args = {
+    image: '/images/demo-image.jpg',
+    orientation: orientationEnum.portrait,
+    aspectRatio: portraitaspectRatioList[0].key,
+    width: 240,
+    height: 240,
+    className: ''
+};
+image.argTypes = {
+    orientation: {
+        control: { type: "select" },
+        options: [orientationEnum.portrait, orientationEnum.landscape],
+    },
+    //Show Default aspectRatio options for portrait orientation
+    aspectRatio: {
+        control: { type: "select" },
+        options: portraitaspectRatioList.map(function (ratio) { return ratio.key; }),
+        labels: Object.fromEntries(portraitaspectRatioList.map(function (ratio) { return [ratio.key, ratio.label]; })),
+    },
+};

package/dist/components/MediaCard/Card.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "@/types/interface";
-export declare const Card: ({ type, ...defaultCardProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ type, ...defaultCardProps }: CardProps) => import("react").JSX.Element;

package/dist/components/MediaCard/Card.jsx

@@ -0,0 +1,33 @@
+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 { sectionType } from "../../utils/enum";
+import { PostByCategory } from "./PostByCategory";
+import { ContactProfile } from "./ContactProfile";
+export var Card = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? sectionType.postByCategoriesTheme : _b, defaultCardProps = __rest(_a, ["type"]);
+    var data = __assign({ type: type }, defaultCardProps);
+    return (<>
+        {type === sectionType.postByCategoriesTheme && <PostByCategory {...data}/>}
+        {type === sectionType.contactsProfileTheme && <ContactProfile {...data}/>}
+    </>);
+};

package/dist/components/MediaCard/Card.stories.js

@@ -28,6 +28,7 @@ card.args = {
     layout: cardLayoutEnum.horizontal,
     btnLabel: 'View More',
     href: 'https://www.google.com/',
+    card_title_color: 'lu-text-default'
 };
 card.argTypes = {
     mediaPosition: {

package/dist/components/MediaCard/Card.stories.jsx

@@ -0,0 +1,34 @@
+import { Card } from "./Card";
+import { cardLayoutEnum, orientationEnum, sectionType } from "../../utils/enum";
+import { sectionTypeList } from "../../utils";
+export default {
+    title: "Components/Card",
+    component: Card,
+};
+var Template = function (args) { return <Card {...args}/>; };
+export var card = Template.bind({});
+card.args = {
+    type: sectionType.postByCategoriesTheme,
+    image: '/images/demo-image.jpg',
+    heading: 'Heading Text',
+    body: 'The quick brown fox jumps over the lazy dog.',
+    mediaPosition: orientationEnum.landscape,
+    layout: cardLayoutEnum.horizontal,
+    btnLabel: 'View More',
+    href: 'https://www.google.com/',
+    card_title_color: 'lu-text-default'
+};
+card.argTypes = {
+    mediaPosition: {
+        control: { type: "select" },
+        options: [orientationEnum.portrait, orientationEnum.landscape],
+    },
+    layout: {
+        control: { type: "select" },
+        options: [cardLayoutEnum.horizontal, cardLayoutEnum.vertical],
+    },
+    type: {
+        control: { type: "select", labels: Object.fromEntries(sectionTypeList.map(function (type) { return [type.key, type.label]; })) },
+        options: sectionTypeList.map(function (type) { return type.key; }),
+    }
+};

package/dist/components/MediaCard/ContactProfile.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "@/types/interface";
-export declare const ContactProfile: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContactProfile: (props: CardProps) => import("react").JSX.Element;

package/dist/components/MediaCard/ContactProfile.jsx

@@ -0,0 +1,39 @@
+import { cardLayoutEnum, contentTypeEnum } from "../../utils/enum";
+import { LuImage } from "../Images/LuImage";
+import { Button } from "../Button/Button";
+import Link from "next/link";
+export var ContactProfile = function (props) {
+    return (<>
+        {props.layout === cardLayoutEnum.horizontal ?
+            <div className="lu-pd-250 bg-white lu-border-rounded-xl ${props.className} lu-shadow-md">
+            <div className={"flex gap-x-5"}>
+                <div className="max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image">
+                    <LuImage image={props.image} aspectRatio="" width={160} height={160} className="lu-border-rounded-full lu-height-100 object-cover" orientation={props.mediaPosition}/>
+                </div>
+                <div className="flex flex-1 flex-col">
+                    <div className={"flex flex-col justify-center flex-1 h-full"}>
+                        <div className={"lu-text-default lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading"}>{props.heading}</div>
+                        <p className={"lu-base-font-size lu-font-weight-extra-light lu-text-caption horizontal_body_text"}>{props.body}</p>
+                    </div>
+                </div>
+            </div>
+                <Link href={props.href || ''} className="lu-width-100">
+                    <Button contentType={contentTypeEnum.text_with_icon} label={props.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 lu-mt-200 card_button"/>
+                </Link>
+                </div>
+            : (<>
+                <div className={"lu-pd-400 bg-white lu-border-rounded-xl ".concat(props.className, " lu-shadow-md flex flex-col items-center")}>
+                    <div className="max-w-[160px] overflow-hidden lu-aspect-square">
+                        <LuImage image={props.image} width={160} height={160} className="lu-height-100 object-cover lu-border-rounded-full" orientation={props.mediaPosition}/>
+                    </div>
+                    <div className={"flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]"}>
+                        <div className={"lu-text-default lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading"}>{props.heading}</div>
+                        <p className="lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text">{props.body}</p>
+                    </div>
+                    <Link href={props.href || ''} className="lu-width-100">
+                        <Button contentType={contentTypeEnum.text_with_icon} label={props.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"/>
+                    </Link>
+                </div>
+            </>)}
+    </>);
+};

package/dist/components/MediaCard/PostByCategory.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "@/types/interface";
-export declare const PostByCategory: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PostByCategory: (props: CardProps) => import("react").JSX.Element;

package/dist/components/MediaCard/PostByCategory.js

@@ -5,6 +5,6 @@ import { Button } from "../Button/Button";
 import Link from "next/link";
 export var PostByCategory = function (props) {
     return (_jsx(_Fragment, { children: (props === null || props === void 0 ? void 0 : props.layout) === cardLayoutEnum.horizontal ?
-            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(props === null || props === void 0 ? void 0 : props.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: props === null || props === void 0 ? void 0 : props.image, aspectRatio: "", width: 240, height: 240, className: "lu-border-rounded-lg lu-width-100 lu-height-100 object-cover", orientation: props === null || props === void 0 ? void 0 : props.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: props === null || props === void 0 ? void 0 : props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text lu-text-caption", children: props === null || props === void 0 ? void 0 : props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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(props.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: props.image, width: 240, height: 240, className: "lu-width-100 lu-height-100 object-cover", orientation: props.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: props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text", children: props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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(props === null || props === void 0 ? void 0 : props.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: props === null || props === void 0 ? void 0 : props.image, aspectRatio: "", width: 240, height: 240, className: "lu-border-rounded-lg lu-width-100 lu-height-100 object-cover", orientation: props === null || props === void 0 ? void 0 : props.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: "".concat(props.card_title_color, " lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading"), children: props === null || props === void 0 ? void 0 : props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text lu-text-caption", children: props === null || props === void 0 ? void 0 : props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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(props.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: props.image, width: 240, height: 240, className: "lu-width-100 lu-height-100 object-cover", orientation: props.mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "".concat(props.card_title_color, " lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading"), children: props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text", children: props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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.jsx

@@ -0,0 +1,38 @@
+import { cardLayoutEnum, contentTypeEnum } from "../../utils/enum";
+import { LuImage } from "../Images/LuImage";
+import { Button } from "../Button/Button";
+import Link from "next/link";
+export var PostByCategory = function (props) {
+    var _a;
+    return (<>
+        {(props === null || props === void 0 ? void 0 : props.layout) === cardLayoutEnum.horizontal ?
+            <div className={"lu-pd-250 bg-white lu-border-rounded-xl ".concat(props === null || props === void 0 ? void 0 : props.className, " lu-shadow-md flex gap-x-[20px] lu-width-100")}>
+                <div className="lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image">
+                    <LuImage image={props === null || props === void 0 ? void 0 : props.image} aspectRatio="" width={240} height={240} className="lu-border-rounded-lg lu-width-100 lu-height-100 object-cover" orientation={props === null || props === void 0 ? void 0 : props.mediaPosition}/>
+                </div>
+                <div className="flex flex-1 flex-col">
+                    <div className={"flex flex-col justify-center flex-1 h-full"}>
+                        <div className={"".concat((_a = props.card_title_color) !== null && _a !== void 0 ? _a : "text-[".concat(props.card_title_color, "]"), " lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading")}>{props === null || props === void 0 ? void 0 : props.heading}</div>
+                        <p className={"lu-base-font-size lu-font-weight-extra-light horizontal_body_text lu-text-caption"}>{props === null || props === void 0 ? void 0 : props.body}</p>
+                    </div>
+                    <Link href={props.href || ''} className="lu-width-100">
+                        <Button contentType={contentTypeEnum.text_with_icon} label={props.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"/>
+                    </Link>
+                </div>
+            </div>
+            : (<>
+                <div className={"lu-pd-400 bg-white lu-border-rounded-xl ".concat(props.className, " lu-shadow-md flex flex-col items-center lu-width-100")}>
+                    <div className="lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square">
+                        <LuImage image={props.image} width={240} height={240} className="lu-width-100 lu-height-100 object-cover" orientation={props.mediaPosition}/>
+                    </div>
+                    <div className={"flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]"}>
+                        <div className={"".concat(props.card_title_color, " lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading")}>{props.heading}</div>
+                        <p className="lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text">{props.body}</p>
+                    </div>
+                    <Link href={props.href || ''} className="lu-width-100">
+                        <Button contentType={contentTypeEnum.text_with_icon} label={props.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"/>
+                    </Link>
+                </div>
+            </>)}
+    </>);
+};

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

@@ -1,2 +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;
+export declare const TopNavigation: ({ phoneNumber, phoneNumber2, bannerText, facebookUrl, linkedinUrl, twitterUrl, instagramUrl, onClickPhoneNumber }: TopNavigationProps) => import("react").JSX.Element;

package/dist/components/Navigation/TopNavigation/TopNavigation.jsx

@@ -0,0 +1,45 @@
+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 (<>
+        {(phoneNumber || phoneNumber2 || bannerText || facebookUrl || linkedinUrl || twitterUrl || instagramUrl) &&
+            <div className="lu-pr-050 lu-pl-050 bg-primary-600 lu-text-base">
+                {/* Contact number1 */}
+                <div className="flex justify-between items-center">
+                    <div className="flex lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 gap-3">
+                        {phoneNumber && <div className="flex items-center gap-2 cursor-pointer" onClick={onClickPhoneNumber}>
+                            <LUIcon fill="lu-neutral-icon-light" icon="phone" size="lu-icon-medium"/>
+                            <div className="lu-font-size-small">{phoneNumber}</div>
+                        </div>}
+                        {phoneNumber && phoneNumber2 && <div className={"lu-border-width-0125 contact-border"}></div>}
+                        
+                         {/* Contact number2 */}
+                        {phoneNumber2 && <div className="flex items-center gap-2 main-navbar-contact cursor-pointer" onClick={onClickPhoneNumber}>
+                            <LUIcon fill="lu-neutral-icon-light" icon="phone" size="lu-icon-medium"/>
+                            <div className="lu-font-size-small">{phoneNumber2}</div>
+                        </div>}
+                    </div>
+
+                    {/* banner text */}
+                    {bannerText && <div className="lu-text-center lu-text-decoration-underline lu-font-weight-semibold lu-font-size-small promotional-banner-text">{bannerText}</div>}
+                    
+                    {/* Social media links */}
+                    <div className="flex gap-2">
+                        {facebookUrl && <Link href={facebookUrl} target="_blank" aria-label="Facebook">
+                            <LUIcon fill="lu-info-icon-light" icon={'facebook-f'} size="lu-icon-x-small" className="cursor-pointer"/>
+                        </Link>}
+                        {twitterUrl && <Link href={twitterUrl} target="_blank" aria-label="Twitter">
+                            <LUIcon fill="lu-info-icon-light" icon={'x-twitter'} size="lu-icon-x-small" className="cursor-pointer"/>
+                        </Link>}
+                        {instagramUrl && <Link href={instagramUrl} target="_blank" aria-label="Instagram">
+                            <LUIcon fill="lu-info-icon-light" icon={'instagram'} size="lu-icon-x-small" className="cursor-pointer"/>
+                        </Link>}
+                        {linkedinUrl && <Link href={linkedinUrl} target="_blank" aria-label="Linkedin">
+                            <LUIcon fill="lu-info-icon-light" icon={'linkedin-in'} size="lu-icon-x-small" className="cursor-pointer"/>
+                        </Link>}
+                    </div>
+                </div>
+            </div>}
+    </>);
+};

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

@@ -0,0 +1,40 @@
+import { TopNavigation } from "./TopNavigation";
+export default {
+    title: "Components/Navigation/TopNavigation",
+    component: TopNavigation,
+};
+var Template = function (args) { return <TopNavigation {...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/Size/MinWidthHeight.d.ts

@@ -1,2 +1,2 @@
 import { MinWidthHeightProps } from "@/types/interface";
-export declare const MinWidthHeight: ({ minWidth, minHeight }: MinWidthHeightProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinWidthHeight: ({ minWidth, minHeight }: MinWidthHeightProps) => import("react").JSX.Element;

package/dist/components/Size/MinWidthHeight.jsx

@@ -0,0 +1,8 @@
+export var MinWidthHeight = function (_a) {
+    var minWidth = _a.minWidth, minHeight = _a.minHeight;
+    return (<>
+        <div className="w-fit">
+            <div className={"bg-blue-500 ".concat(minWidth, " ").concat(minHeight, " rounded")} data-testid="minWidthHeight-box"></div>
+        </div>
+    </>);
+};

package/dist/components/Size/MinWidthHeight.stories.jsx

@@ -0,0 +1,22 @@
+import { MinWidthHeight } from "../../components/Size/MinWidthHeight";
+import { minHeights, minWidths } from "../../utils";
+export default {
+    title: "Components/Size",
+    component: MinWidthHeight,
+};
+var Template = function (args) { return <MinWidthHeight {...args}/>; };
+export var minWidthAndHeight = Template.bind({});
+minWidthAndHeight.args = {
+    minWidth: 'lu-min-width-100',
+    minHeight: 'lu-min-height-100',
+};
+minWidthAndHeight.argTypes = {
+    minWidth: {
+        control: { type: "select", labels: Object.fromEntries(minWidths.map(function (size) { return [size.key, size.label]; })) },
+        options: minWidths.map(function (size) { return size.key; }),
+    },
+    minHeight: {
+        control: { type: "select", labels: Object.fromEntries(minHeights.map(function (size) { return [size.key, size.label]; })) },
+        options: minHeights.map(function (size) { return size.key; }),
+    },
+};

package/dist/components/Size/Size.d.ts

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

package/dist/components/Size/Size.jsx

@@ -0,0 +1,6 @@
+export var Size = function (_a) {
+    var size = _a.size, color = _a.color;
+    return (<>
+        <div className={"".concat(size, " rounded ").concat(color)} data-testid="size-box"/>
+    </>);
+};

package/dist/components/Size/Size.stories.jsx

@@ -0,0 +1,22 @@
+import { Size } from "../../components/Size/Size";
+import { colorGroups, sizes } from "../../utils";
+export default {
+    title: "Components/Size",
+    component: Size,
+};
+var Template = function (args) { return <Size {...args}/>; };
+export var SizeStory = Template.bind({});
+SizeStory.args = {
+    size: 'lu-size-400',
+    color: 'bg-primary-500',
+};
+SizeStory.argTypes = {
+    size: {
+        control: { type: "select", labels: Object.fromEntries(sizes.map(function (size) { return [size.key, size.label]; })) },
+        options: sizes.map(function (size) { return size.key; }),
+    },
+    color: {
+        control: { type: "select" },
+        options: colorGroups.primary,
+    },
+};

package/dist/components/Size/WidthHeight.d.ts

@@ -1,2 +1,2 @@
 import { WidthHeightProps } from "@/types/interface";
-export declare const WidthHeight: ({ width, height }: WidthHeightProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WidthHeight: ({ width, height }: WidthHeightProps) => import("react").JSX.Element;

package/dist/components/Size/WidthHeight.jsx

@@ -0,0 +1,8 @@
+export var WidthHeight = function (_a) {
+    var width = _a.width, height = _a.height;
+    return (<>
+    <div className="bg-gray-200 lu-width-50 lu-height-25 relative rounded lu-pd-200">
+      <div className={"absolute right-0 top-0 bg-blue-500 ".concat(width, " ").concat(height, " rounded")} data-testid="resizable-box"></div>
+    </div>
+  </>);
+};

package/dist/components/Size/WidthHeight.stories.jsx

@@ -0,0 +1,22 @@
+import { WidthHeight } from "../../components/Size/WidthHeight";
+import { heights, widths } from "../../utils";
+export default {
+    title: "Components/Size",
+    component: WidthHeight,
+};
+var Template = function (args) { return <WidthHeight {...args}/>; };
+export var widthAndHeight = Template.bind({});
+widthAndHeight.args = {
+    width: 'lu-width-50',
+    height: 'lu-height-50',
+};
+widthAndHeight.argTypes = {
+    width: {
+        control: { type: "select", labels: Object.fromEntries(widths.map(function (size) { return [size.key, size.label]; })) },
+        options: widths.map(function (size) { return size.key; }),
+    },
+    height: {
+        control: { type: "select", labels: Object.fromEntries(heights.map(function (size) { return [size.key, size.label]; })) },
+        options: heights.map(function (size) { return size.key; }),
+    },
+};

package/dist/components/Spacing/Margin/Margin.d.ts

@@ -1 +1 @@
-export declare const Margin: () => import("react/jsx-runtime").JSX.Element;
+export declare const Margin: () => import("react").JSX.Element;