linkedunion-design-kit 1.4.8 → 1.4.9

package/dist/components/Avatar/Avatar.d.ts

@@ -1,2 +1,3 @@
 import { AvatarProps } from "@/types/interface";
-export declare const Avatar: ({ image, icon, shape, size, className, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: ({ image, icon, shape, size, className, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { LUIcon } from "../Icons/LUIcon";
+import LUIcon from "../Icons/LUIcon";
 import { iconList } from "../../utils/iconList";
 import { avtarBackgroundSize } from "../../utils";
-export var Avatar = function (_a) {
+var Avatar = function (_a) {
     var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, shape = _a.shape, size = _a.size, className = _a.className;
     var defaultIcon = iconList.find(function (item) { return item.key === (icon || "user"); });
     return (_jsx(_Fragment, { children: _jsx("div", { className: "".concat(image ? "lu-bg-primary-200" : "lu-bg-gray-100", " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: avtarBackgroundSize(size), "data-testid": "lu-avatar", children: image ? (_jsx("img", { src: image, alt: "image", className: "w-full h-full object-cover" })) : (_jsx(LUIcon, { size: size, icon: defaultIcon === null || defaultIcon === void 0 ? void 0 : defaultIcon.key, fill: "lu-neutral-icon-dark", className: "" })) }) }));
 };
+export default Avatar;

package/dist/components/Avatar/Avatar.stories.js

@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar } from "./Avatar";
 import { avatarShapeList, avatarSizesList } from "../../utils";
+import Avatar from "./Avatar";
 export default {
     title: "Components/Avatar",
     component: Avatar,

package/dist/components/Button/Button.d.ts

@@ -1,2 +1,3 @@
 import { ButtonProps } from "@/types/interface";
 export declare const Button: ({ contentType, variant, label, iconLeft, iconRight, onClick, shape, size, leftIconSize, rightIconSize, className, icon, iconSize, type, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LUIcon } from "../Icons/LUIcon";
-import { buttonTypeEnum, contentTypeEnum } from "../../utils/enum";
+import LUIcon from "../Icons/LUIcon";
+import { buttonTypeEnum, contentTypeEnum } from "../../utils/enums";
 export var Button = function (_a) {
     var _b = _a.contentType, contentType = _b === void 0 ? contentTypeEnum.text_with_icon : _b, _c = _a.variant, variant = _c === void 0 ? "lu-btn-primary" : _c, _d = _a.label, label = _d === void 0 ? "Button Text" : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, onClick = _a.onClick, shape = _a.shape, _e = _a.size, size = _e === void 0 ? "lu-btn-md" : _e, leftIconSize = _a.leftIconSize, rightIconSize = _a.rightIconSize, className = _a.className, icon = _a.icon, iconSize = _a.iconSize, type = _a.type;
     return (_jsx(_Fragment, { children: _jsxs("button", { className: "flex items-center ".concat(shape, " ").concat(type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant, "  ").concat(className, " ").concat(contentType === contentTypeEnum.icon_only ? "icon-only ".concat(size) : size), onClick: onClick, children: [contentType === contentTypeEnum.none && label, contentType === contentTypeEnum.icon_only && icon && (_jsx(LUIcon, { size: iconSize, icon: icon, fill: type === buttonTypeEnum.outline
@@ -11,3 +11,4 @@ export var Button = function (_a) {
                                 ? "outline-button ".concat(variant)
                                 : variant, className: "lu-ml-100" }))] }))] }) }));
 };
+export default Button;

package/dist/components/Button/Button.stories.js

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "./Button";
 import { borderRadiusList, buttonColorsList, buttonIconSizeList, buttonWithIconList, butttonSizeList, } from "../../utils";
 import { iconList } from "../../utils/iconList";
-import { buttonTypeEnum, contentTypeEnum } from "../../utils/enum";
+import { buttonTypeEnum, contentTypeEnum } from "../../utils/enums";
 export default {
     title: "Components/Button",
     component: Button,

package/dist/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+export declare enum ButtonType {
+    fill = "Fill",
+    outline = "Outline"
+}

package/dist/components/Button/index.js

@@ -0,0 +1,6 @@
+export var ButtonType;
+(function (ButtonType) {
+    ButtonType["fill"] = "Fill";
+    ButtonType["outline"] = "Outline";
+})(ButtonType || (ButtonType = {}));
+;

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var BackgroundColor = function (_a) {
+    var label = _a.label, color = _a.color;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "lu-font-size-large lu-font-weight-bold lu-mb-200", 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: "lu-font-weight-semibold", children: color === null || color === void 0 ? void 0 : color.replace("bg-", "") }), _jsx("code", { className: "lu-font-size-small", children: color })] })] })] }));
+};

package/dist/components/Color/BackgroundColor/BackgroundColor.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/BackgroundColor.stories.js

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

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

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

package/dist/components/Icons/LUIcon.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { iconList } from "../../utils/iconList";
-export var LUIcon = function (_a) {
+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 (_jsx(_Fragment, { children: _jsxs("svg", { className: "".concat(size, " ").concat(className), viewBox: "0 0 32 32", fill: "none", children: [_jsx("g", { "clip-path": "url(#clip0_9168_14965)", children: _jsx("path", { d: (_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : "", className: "".concat(fill, " icon") }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }) }));
 };
+export default LUIcon;

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

@@ -10,9 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LUIcon } from "./LUIcon";
 import { iconColorList, iconSizeList } from "../../utils";
 import { iconList } from "../../utils/iconList";
+import LUIcon from "./LUIcon";
 export default {
     title: "Components/Icon",
     component: LUIcon,

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

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

package/dist/components/Images/LuImage.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Image from "next/image";
 export var LuImage = function (_a) {
-    var image = _a.image, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? '' : _b, _c = _a.width, width = _c === void 0 ? 240 : _c, _d = _a.height, height = _d === void 0 ? 240 : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var image = _a.image, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? "" : _b, _c = _a.width, width = _c === void 0 ? 240 : _c, _d = _a.height, height = _d === void 0 ? 240 : _d, _e = _a.className, className = _e === void 0 ? "" : _e;
     return (_jsx(Image, { src: image || "", alt: "Image", width: width, height: height, className: "".concat(aspectRatio, " ").concat(className) }));
 };
+export default LuImage;

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

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LuImage } from "./LuImage";
 import { landscapeaspectRatioList, portraitaspectRatioList } from "../../utils";
-import { orientationEnum } from "../../utils/enum";
+import { orientationEnum } from "../../utils/enums";
 export default {
     title: "Components/Image",
     component: LuImage,

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

@@ -0,0 +1,4 @@
+export declare enum OrientationEnum {
+    portrait = "Portrait",
+    landscape = "Landscape"
+}

package/dist/components/Images/index.js

@@ -0,0 +1,6 @@
+export var OrientationEnum;
+(function (OrientationEnum) {
+    OrientationEnum["portrait"] = "Portrait";
+    OrientationEnum["landscape"] = "Landscape";
+})(OrientationEnum || (OrientationEnum = {}));
+;

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

@@ -1,2 +1,3 @@
 import { CardProps } from "@/types/interface";
-export declare const Card: ({ type, layout, id, className, image, mediaPosition, heading, body, href, btnLabel, cardStyle, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ type, layout, id, className, image, mediaPosition, heading, body, href, btnLabel, cardStyle, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/components/MediaCard/Card.js

@@ -10,12 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { sectionType, cardLayoutEnum } from "../../utils/enum";
+import { sectionType, cardLayoutEnum } from "../../utils/enums";
 import { PostByCategory } from "./PostByCategory/PostByCategory";
 import { colors } from "../../utils/colors";
 import { defaultCardProps } from "../../utils";
 import { ContactProfile } from "./ContactProfile/ContactProfile";
-export var Card = function (_a) {
+var Card = function (_a) {
     var _b = _a.type, type = _b === void 0 ? sectionType.postByCategoriesTheme : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.id, id = _d === void 0 ? 1 : _d, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.image, image = _f === void 0 ? defaultCardProps.image : _f, _g = _a.mediaPosition, mediaPosition = _g === void 0 ? "" : _g, _h = _a.heading, heading = _h === void 0 ? defaultCardProps.heading : _h, _j = _a.body, body = _j === void 0 ? defaultCardProps.body : _j, _k = _a.href, href = _k === void 0 ? defaultCardProps.href : _k, _l = _a.btnLabel, btnLabel = _l === void 0 ? defaultCardProps.btnLabel : _l, _m = _a.cardStyle, cardStyle = _m === void 0 ? {
         card_title_color: colors.default,
         card_description_color: colors.caption_color,
@@ -42,3 +42,4 @@ export var Card = function (_a) {
     };
     return (_jsxs(_Fragment, { children: [type === sectionType.postByCategoriesTheme && (_jsx(PostByCategory, __assign({}, data))), type === sectionType.contactsProfileTheme && (_jsx(ContactProfile, __assign({}, data)))] }));
 };
+export default Card;

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

@@ -10,10 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from "./Card";
-import { cardLayoutEnum, orientationEnum, sectionType } from "../../utils/enum";
+import { cardLayoutEnum, orientationEnum, sectionType } from "../../utils/enums";
 import { sectionTypeList } from "../../utils";
 import { colors } from "../../utils/colors";
+import Card from "./Card";
 export default {
     title: "Components/Card",
     component: Card,

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cardLayoutEnum } from "../../../utils/enum";
+import { cardLayoutEnum } from "../../../utils/enums";
 import { ContactProfileTheme1 } from "./ContactProfileTheme1";
 import { ContactProfileTheme2 } from "./ContactProfileTheme2";
 import { getColor } from "../../../app/scripts";

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../../../components/Button/Button";
 import { LuImage } from "../../../components/Images/LuImage";
-import { contentTypeEnum } from "../../../utils/enum";
+import { contentTypeEnum } from "../../../utils/enums";
 import Link from "next/link";
 import styles from "../card.module.css";
 export var ContactProfileTheme1 = function (props) {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../../../components/Button/Button";
 import { LuImage } from "../../../components/Images/LuImage";
-import { contentTypeEnum } from "../../../utils/enum";
+import { contentTypeEnum } from "../../../utils/enums";
 import Link from "next/link";
 import styles from "../card.module.css";
 export var ContactProfileTheme2 = function (props) {

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cardLayoutEnum } from "../../../utils/enum";
+import { cardLayoutEnum } from "../../../utils/enums";
 import { colors } from "../../../utils/colors";
 import { ensureValue, getColor } from "../../../app/scripts";
 import { PostByCategoryTheme1 } from "./PostByCategoryTheme1";

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LuImage } from "../../../components/Images/LuImage";
 import Link from "next/link";
 import { Button } from "../../../components/Button/Button";
-import { contentTypeEnum } from "../../../utils/enum";
+import { contentTypeEnum } from "../../../utils/enums";
 import styles from "../card.module.css";
 export var PostByCategoryTheme1 = function (props) {
     return (_jsxs("div", { className: "lu-pd-250 card_bg_PostByCategory_".concat(props.id, " lu-border-rounded-xl ").concat(props.className, " card_shadow_PostByCategory_").concat(props.id, " 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.image, width: 240, height: 240, className: "lu-border-rounded-lg lu-width-100 lu-height-100 object-cover", orientation: 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: "card_PostByCategory_title_color_".concat(props.id, " lu-font-size-2x-large lu-font-weight-semibold ").concat(styles.horizontal_card_heading), children: props.heading }), _jsx("p", { className: "card_PostByCategory_description_color_".concat(props.id, " lu-base-font-size lu-font-weight-extra-light ").concat(styles.horizontal_body_text), children: props.body })] }), _jsx(Link, { href: props.href || "", className: "lu-width-100 lu-text-decoration-none", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.btnLabel, variant: "card_PostByCategory_btn_".concat(props.id), iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100 ".concat(styles.card_button, " card_PostByCategory_btn_").concat(props.id) }) })] })] }));

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LuImage } from "../../../components/Images/LuImage";
 import Link from "next/link";
 import { Button } from "../../../components/Button/Button";
-import { contentTypeEnum } from "../../../utils/enum";
+import { contentTypeEnum } from "../../../utils/enums";
 import styles from "../card.module.css";
 export var PostByCategoryTheme2 = function (props) {
     return (_jsxs("div", { className: "lu-pd-400 card_bg_PostByCategory_".concat(props.id, " lu-border-rounded-xl ").concat(props.className, " card_shadow_PostByCategory_").concat(props.id, " 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 card_PostByCategory_theme2_image_".concat(props === null || props === void 0 ? void 0 : props.id), orientation: props.mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "card_PostByCategory_title_color_".concat(props.id, " lu-font-size-2x-large lu-font-weight-semibold ").concat(styles.vertical_card_heading), children: props.heading }), _jsx("p", { className: "card_PostByCategory_description_color_".concat(props.id, " lu-base-font-size lu-font-weight-extra-light ").concat(styles.vertical_body_text), children: props.body })] }), _jsx(Link, { href: props.href || "", className: "lu-width-100 lu-text-decoration-none", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.btnLabel, variant: "card_PostByCategory_btn_".concat(props.id), iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100 card_PostByCategory_btn_".concat(props.id) }) })] }));

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

@@ -0,0 +1,12 @@
+export declare enum cardLayoutEnum {
+    horizontal = "Horizontal",
+    vertical = "Vertical"
+}
+export declare enum SectionTypeEnum {
+    multiplePostsTheme = "Multiple Posts",
+    singlePostTheme = "Single Post",
+    postByCategoriesTheme = "Post By Categories",
+    contactsProfileTheme = "Contacts Profile",
+    galleryTheme = "Gallery",
+    albumTheme = "Album"
+}

package/dist/components/MediaCard/index.js

@@ -0,0 +1,16 @@
+export var cardLayoutEnum;
+(function (cardLayoutEnum) {
+    cardLayoutEnum["horizontal"] = "Horizontal";
+    cardLayoutEnum["vertical"] = "Vertical";
+})(cardLayoutEnum || (cardLayoutEnum = {}));
+;
+export var SectionTypeEnum;
+(function (SectionTypeEnum) {
+    SectionTypeEnum["multiplePostsTheme"] = "Multiple Posts";
+    SectionTypeEnum["singlePostTheme"] = "Single Post";
+    SectionTypeEnum["postByCategoriesTheme"] = "Post By Categories";
+    SectionTypeEnum["contactsProfileTheme"] = "Contacts Profile";
+    SectionTypeEnum["galleryTheme"] = "Gallery";
+    SectionTypeEnum["albumTheme"] = "Album";
+})(SectionTypeEnum || (SectionTypeEnum = {}));
+;

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

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

package/dist/components/Size/MinWidthHeight.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export var MinWidthHeight = function (_a) {
+var MinWidthHeight = function (_a) {
     var minWidth = _a.minWidth, minHeight = _a.minHeight;
     return (_jsx(_Fragment, { children: _jsx("div", { className: "w-fit", children: _jsx("div", { className: "bg-blue-500 ".concat(minWidth, " ").concat(minHeight, " rounded"), "data-testid": "minWidthHeight-box" }) }) }));
 };
+export default MinWidthHeight;

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

@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MinWidthHeight } from "../../components/Size/MinWidthHeight";
 import { minHeights, minWidths } from "../../utils";
+import MinWidthHeight from "./MinWidthHeight";
 export default {
     title: "Components/Size",
     component: MinWidthHeight,

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

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

package/dist/components/Size/Size.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export var Size = function (_a) {
+var Size = function (_a) {
     var size = _a.size, color = _a.color;
     return (_jsx(_Fragment, { children: _jsx("div", { className: "".concat(size, " rounded lu-bg-primary-600"), "data-testid": "size-box" }) }));
 };
+export default Size;

package/dist/components/Size/Size.stories.js

@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Size } from "../../components/Size/Size";
 import { sizes } from "../../utils";
+import Size from "./Size";
 export default {
     title: "Components/Size",
     component: Size,

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

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

package/dist/components/Size/WidthHeight.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export var WidthHeight = function (_a) {
+var WidthHeight = function (_a) {
     var width = _a.width, height = _a.height;
     return (_jsx(_Fragment, { children: _jsx("div", { className: "bg-gray-200 lu-width-50 lu-height-25 relative rounded lu-pd-200", children: _jsx("div", { className: "absolute right-0 top-0 bg-blue-500 ".concat(width, " ").concat(height, " rounded"), "data-testid": "resizable-box" }) }) }));
 };
+export default WidthHeight;

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

@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { WidthHeight } from "../../components/Size/WidthHeight";
 import { heights, widths } from "../../utils";
+import WidthHeight from "./WidthHeight";
 export default {
     title: "Components/Size",
     component: WidthHeight,

package/dist/components/Title/Title.d.ts

@@ -3,4 +3,5 @@ export interface TitleProps {
     className?: string;
     children?: React.ReactNode;
 }
-export declare const Title: ({ className, children, }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+declare const Title: ({ className, children, }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export default Title;

package/dist/components/Title/Title.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Title } from "../../utils/constants";
 import TitleStyles from "./Title.module.css";
-export var Title = function (_a) {
+var Title = function (_a) {
     var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.children, children = _c === void 0 ? Dummy_Title : _c;
     return (_jsx("h2", { className: "".concat(TitleStyles["main-title"], " ").concat(className), children: children }));
 };
+export default Title;

package/dist/components/Title/Title.stories.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Title } from "../../utils/constants";
-import { Title } from "./Title";
+import Title from "./Title";
 export default {
     title: "Components/Title",
     component: Title,

package/dist/components/Title/Title.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
-import { Title } from "./Title";
 import { Dummy_Title } from "../../utils/constants";
+import Title from "./Title";
 describe("Title Component", function () {
     it("renders with default props", function () {
         var getByText = render(_jsx(Title, {})).getByText;

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

@@ -1,2 +1,3 @@
 import { BodyProps } from "./type";
-export declare const Body: React.FC<BodyProps>;
+declare const Body: React.FC<BodyProps>;
+export default Body;

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

@@ -23,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Para } from "../../../utils/constants";
 import { BODY_CLASSES } from "./";
-export var Body = function (_a) {
+var Body = function (_a) {
     var _b = _a.body, body = _b === void 0 ? BODY_CLASSES[0] : _b, _c = _a.label, label = _c === void 0 ? Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["body", "label", "className"]);
     return (_jsx("div", __assign({ className: "".concat(body, " ").concat(className).trim() }, props, { children: label })));
 };
+export default Body;

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

@@ -10,10 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Body } from "./Body";
 import Table from "../../../global/components/Table/Table";
 import { BODY_CLASSES, bodyTableHeaders, bodyTableRows } from ".";
 import { Dummy_Para } from "../../../utils/constants";
+import Body from "./Body";
 export default {
     title: "Components/Typography/Body",
     component: Body,

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

@@ -1,2 +1,3 @@
 import { DisplayProps } from "./type";
-export declare const Display: ({ display, label, className, ...props }: DisplayProps) => import("react/jsx-runtime").JSX.Element;
+declare const Display: ({ display, label, className, ...props }: DisplayProps) => import("react/jsx-runtime").JSX.Element;
+export default Display;

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

@@ -23,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Para } from "../../../utils/constants";
 import { Display_Classes } from "./";
-export var Display = function (_a) {
+var Display = function (_a) {
     var _b = _a.display, display = _b === void 0 ? Display_Classes["lu-display-1"] : _b, _c = _a.label, label = _c === void 0 ? Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["display", "label", "className"]);
     return (_jsx("div", __assign({}, props, { className: "".concat(display, " ").concat(className, " "), children: label })));
 };
+export default Display;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Display } from "./Display";
+import Display from "./Display";
 import { Display_Classes, displayTableHeaders, displayTableRows } from ".";
 import Table from "../../../global/components/Table/Table";
 import { Dummy_Para } from "../../../utils/constants";

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { Dummy_Para } from "../../../utils/constants";
-import { Heading } from "./Headings";
+import Heading from "./Headings";
 import { Heading_Classes } from "./";
 describe("Heading Component", function () {
     it("renders with default props", function () {

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

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

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

@@ -23,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Para } from "../../../utils/constants";
 import { Heading_Classes } from "./";
-export var Heading = function (_a) {
+var Heading = function (_a) {
     var _b = _a.heading, heading = _b === void 0 ? Heading_Classes["lu-heading-h1"] : _b, _c = _a.label, label = _c === void 0 ? Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["heading", "label", "className"]);
     return (_jsx("h1", __assign({}, props, { className: "".concat(heading, " ").concat(className), children: label })));
 };
+export default Heading;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Heading } from "./Headings";
+import Heading from "./Headings";
 import { headingsList } from "../../../utils";
 import Table from "../../../global/components/Table/Table";
 import { Heading_Classes, headingTableHeaders, headingTableRows } from "./";

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-export { Heading } from "./components/Typography/Headings/Headings";
-export { Display } from "./components/Typography/Display/Display";
-export { Body } from "./components/Typography/Body/Body";
-export { Size } from "./components/Size/Size";
-export { WidthHeight } from "./components/Size/WidthHeight";
-export { MinWidthHeight } from "./components/Size/MinWidthHeight";
-export { LUIcon } from "./components/Icons/LUIcon";
-export { Card } from "./components/MediaCard/Card";
-export { Button } from "./components/Button/Button";
-export { LuImage } from "./components/Images/LuImage";
-export { Avatar } from "./components/Avatar/Avatar";
-export { Title } from "./components/Title/Title";
+export { default as Heading } from "./components/Typography/Headings/Headings";
+export { default as Display } from "./components/Typography/Display/Display";
+export { default as Body } from "./components/Typography/Body/Body";
+export { default as Size } from "./components/Size/Size";
+export { default as WidthHeight } from "./components/Size/WidthHeight";
+export { default as MinWidthHeight } from "./components/Size/MinWidthHeight";
+export { default as LUIcon } from "./components/Icons/LUIcon";
+export { default as Card } from "./components/MediaCard/Card";
+export { default as Button } from "./components/Button/Button";
+export { default as LuImage } from "./components/Images/LuImage";
+export { default as Avatar } from "./components/Avatar/Avatar";
+export { default as Title } from "./components/Title/Title";
 import "./styles/global.css";

package/dist/index.js

@@ -1,13 +1,13 @@
-export { Heading } from "./components/Typography/Headings/Headings";
-export { Display } from "./components/Typography/Display/Display";
-export { Body } from "./components/Typography/Body/Body";
-export { Size } from "./components/Size/Size";
-export { WidthHeight } from "./components/Size/WidthHeight";
-export { MinWidthHeight } from "./components/Size/MinWidthHeight";
-export { LUIcon } from "./components/Icons/LUIcon";
-export { Card } from "./components/MediaCard/Card";
-export { Button } from "./components/Button/Button";
-export { LuImage } from "./components/Images/LuImage";
-export { Avatar } from "./components/Avatar/Avatar";
-export { Title } from "./components/Title/Title";
+export { default as Heading } from "./components/Typography/Headings/Headings";
+export { default as Display } from "./components/Typography/Display/Display";
+export { default as Body } from "./components/Typography/Body/Body";
+export { default as Size } from "./components/Size/Size";
+export { default as WidthHeight } from "./components/Size/WidthHeight";
+export { default as MinWidthHeight } from "./components/Size/MinWidthHeight";
+export { default as LUIcon } from "./components/Icons/LUIcon";
+export { default as Card } from "./components/MediaCard/Card";
+export { default as Button } from "./components/Button/Button";
+export { default as LuImage } from "./components/Images/LuImage";
+export { default as Avatar } from "./components/Avatar/Avatar";
+export { default as Title } from "./components/Title/Title";
 import "./styles/global.css";

package/dist/utils/enums.d.ts

@@ -1,3 +1,28 @@
+export declare const contentTypeEnum: {
+    none: string;
+    text_with_icon: string;
+    icon_only: string;
+};
+export declare const buttonTypeEnum: {
+    fill: string;
+    outline: string;
+};
+export declare const orientationEnum: {
+    portrait: string;
+    landscape: string;
+};
+export declare const cardLayoutEnum: {
+    horizontal: string;
+    vertical: string;
+};
+export declare const sectionType: {
+    multiplePostsTheme: string;
+    singlePostTheme: string;
+    postByCategoriesTheme: string;
+    contactsProfileTheme: string;
+    galleryTheme: string;
+    albumTheme: string;
+};
 export declare enum FontSize {
     Base = "lu-base-font-size",
     XSmall = "lu-font-size-x-small",

package/dist/utils/enums.js

@@ -1,3 +1,28 @@
+export var contentTypeEnum = {
+    none: "None",
+    text_with_icon: "Text with Icon",
+    icon_only: "Icon Only",
+};
+export var buttonTypeEnum = {
+    fill: "Fill",
+    outline: "Outline",
+};
+export var orientationEnum = {
+    portrait: "Portrait",
+    landscape: "Landscape",
+};
+export var cardLayoutEnum = {
+    horizontal: "Horizontal",
+    vertical: "Vertical",
+};
+export var sectionType = {
+    multiplePostsTheme: "Multiple Posts",
+    singlePostTheme: "Single Post",
+    postByCategoriesTheme: "Post By Categories",
+    contactsProfileTheme: "Contacts Profile",
+    galleryTheme: "Gallery",
+    albumTheme: "Album",
+};
 export var FontSize;
 (function (FontSize) {
     FontSize["Base"] = "lu-base-font-size";

package/dist/utils/index.js

@@ -1,4 +1,4 @@
-import { cardLayoutEnum, orientationEnum, sectionType } from "./enum";
+import { cardLayoutEnum, orientationEnum, sectionType } from "./enums";
 //************Used for typography and color utilities Storybook************
 export var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
 export var defaultCardProps = {

package/package.json

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