linkedunion-design-kit 1.4.6 → 1.4.7

package/dist/app/scripts.js

@@ -1,5 +1,5 @@
 export var ensureValue = function (value, fallbackValue) {
-    if (value === null || value === undefined || value === '') {
+    if (!value) {
         return fallbackValue;
     }
     else {

package/dist/components/Avatar/Avatar.js

@@ -5,7 +5,7 @@ import { avtarBackgroundSize } from "../../utils";
 export 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 ? 'bg-primary-200' : 'bg-gray-100', " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: avtarBackgroundSize(size), "data-testid": "lu-avatar", children: image ?
+    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: "" }) }) }));

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

@@ -1,5 +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 })] })] })] }));
+    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/Color.stories.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Color } from "../../../components/Color/BackgroundColor/Color";
-import { colorGroups } from "../../../utils";
+import { customBackgroundColor } from ".";
 export default {
     title: "Components/Color/BackgroundColor",
     component: Color,
@@ -23,66 +23,66 @@ var Template = function (args) { return _jsx(Color, __assign({}, args)); };
 export var Primary = Template.bind({});
 Primary.args = {
     label: "Primary",
-    color: "bg-primary-500", // Default color
+    color: "lu-bg-primary-500", // Default color
 };
 Primary.argTypes = {
     color: {
         control: { type: "select" },
-        options: colorGroups.primary,
+        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: colorGroups.gray,
+        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: "bg-gray-500",
+    color: "lu-bg-neutral-500",
 };
 export var Success = Template.bind({});
 Success.argTypes = {
     color: {
         control: { type: "select" },
-        options: colorGroups.success,
+        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: "bg-success-500",
+    color: "lu-bg-success-500",
 };
 export var Warning = Template.bind({});
 Warning.argTypes = {
     color: {
         control: { type: "select" },
-        options: colorGroups.warning,
+        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: "bg-warning-500",
+    color: "lu-bg-warning-500",
 };
 export var Danger = Template.bind({});
 Danger.argTypes = {
     color: {
         control: { type: "select" },
-        options: colorGroups.danger,
+        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: "bg-danger-500",
+    color: "lu-bg-danger-500",
 };
 export var Info = Template.bind({});
 Info.argTypes = {
     color: {
         control: { type: "select" },
-        options: colorGroups.info,
+        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: "bg-info-500",
+    color: "lu-bg-info-500",
 };

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

@@ -0,0 +1,7 @@
+export declare const colorNames: string[];
+export declare const shades: number[];
+export declare const customBackgroundColor: {
+    [k: string]: {
+        backgroundColor: string;
+    };
+};

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

@@ -0,0 +1,8 @@
+export var colorNames = ["primary", "neutral", "success", "warning", "danger", "info"];
+export var shades = Array.from({ length: 11 }, function (_, i) { return i * 100; }); // Generates [0, 100, 200, ..., 1000]
+export var customBackgroundColor = Object.fromEntries(colorNames.flatMap(function (color) {
+    return shades.map(function (shade) { return [
+        ".lu-bg-".concat(color, "-").concat(shade),
+        { backgroundColor: "var(--".concat(color, "-").concat(shade, ")") }, // Generates { ".lu-bg-primary-100": { backgroundColor: "var(--primary-100)" }, ... }
+    ]; });
+}));

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, layout, id, className, image, mediaPosition, heading, body, href, btnLabel, cardStyle }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaCard/Card.js

@@ -9,23 +9,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { sectionType } from "../../utils/enum";
-import { PostByCategory } from "./PostByCategory";
-import { ContactProfile } from "./ContactProfile";
+import { sectionType, cardLayoutEnum } from "../../utils/enum";
+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 _b = _a.type, type = _b === void 0 ? sectionType.postByCategoriesTheme : _b, defaultCardProps = __rest(_a, ["type"]);
-    var data = __assign({ type: type }, defaultCardProps);
+    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,
+        card_shadow_toggle: 1,
+        card_shadow_color: 'rgba(52, 52, 52, 0.15)',
+        card_background_color: colors.white,
+        card_button_background_color: colors.gray,
+        card_button_text_color: colors.default,
+        card_image_border_color: colors === null || colors === void 0 ? void 0 : colors.default,
+        card_image_border_radius: '0',
+        card_image_border: '0'
+    } : _m;
+    var data = { id: id, image: image, layout: layout, mediaPosition: mediaPosition, heading: heading, body: body, className: className, btnLabel: btnLabel, href: href, cardStyle: cardStyle };
     return (_jsxs(_Fragment, { children: [type === sectionType.postByCategoriesTheme && _jsx(PostByCategory, __assign({}, data)), type === sectionType.contactsProfileTheme && _jsx(ContactProfile, __assign({}, data))] }));
 };

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

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from "./Card";
 import { cardLayoutEnum, orientationEnum, sectionType } from "../../utils/enum";
 import { sectionTypeList } from "../../utils";
+import { colors } from "../../utils/colors";
 export default {
     title: "Components/Card",
     component: Card,
@@ -28,7 +29,15 @@ card.args = {
     layout: cardLayoutEnum.horizontal,
     btnLabel: 'View More',
     href: 'https://www.google.com/',
-    card_title_color: 'lu-text-default',
+    cardStyle: {
+        card_title_color: colors.default,
+        card_description_color: colors.caption_color,
+        card_shadow_toggle: 1,
+        card_shadow_color: 'rgba(52, 52, 52, 0.15)',
+        card_background_color: colors.white,
+        card_button_background_color: colors.gray,
+        card_button_text_color: colors.default,
+    },
     id: 1
 };
 card.argTypes = {
@@ -43,5 +52,5 @@ card.argTypes = {
     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/ContactProfile.d.ts

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

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

@@ -0,0 +1,23 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardLayoutEnum } from "../../../utils/enum";
+import { ContactProfileTheme1 } from "./ContactProfileTheme1";
+import { ContactProfileTheme2 } from "./ContactProfileTheme2";
+import { getColor } from "../../../app/scripts";
+import { colors } from "../../../utils/colors";
+export var ContactProfile = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return (_jsxs("div", { children: [props.layout === cardLayoutEnum.horizontal ?
+                _jsx(ContactProfileTheme1, __assign({}, props))
+                : (_jsx(_Fragment, { children: _jsx(ContactProfileTheme2, __assign({}, props)) })), _jsx("style", { jsx: true, global: true, children: "\n                .card_ContactProfile_title_color_".concat(props.id, " {\n                    color: ").concat(getColor((_a = props.cardStyle) === null || _a === void 0 ? void 0 : _a.card_title_color, colors === null || colors === void 0 ? void 0 : colors.default), ";\n                }\n                .card_ContactProfile_designation_color_").concat(props.id, " {\n                    color: ").concat(getColor((_b = props.cardStyle) === null || _b === void 0 ? void 0 : _b.card_description_color, colors.caption_color), ";\n                }\n                .card_shadow_ContactProfile_").concat(props.id, " {\n                    box-shadow: ").concat(((_c = props.cardStyle) === null || _c === void 0 ? void 0 : _c.card_shadow_toggle) === 1 ? "0px 4px 12px 0px ".concat(getColor((_d = props.cardStyle) === null || _d === void 0 ? void 0 : _d.card_shadow_color, 'rgba(52, 52, 52, 0.15)')) : '0px 4px 12px 0px rgba(52, 52, 52, 0.15)', ";\n                }\n                .card_bg_ContactProfile_").concat(props.id, " {\n                    background-color: ").concat(getColor((_e = props.cardStyle) === null || _e === void 0 ? void 0 : _e.card_background_color, colors.white), " !important;\n                }\n                .card_ContactProfile_btn_").concat(props.id, " {\n                    background-color: ").concat(getColor((_f = props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color, colors.gray), " !important;\n                    color: ").concat(getColor((_g = props.cardStyle) === null || _g === void 0 ? void 0 : _g.card_button_text_color, colors.neutral), " !important;\n                    fill: ").concat(getColor((_h = props.cardStyle) === null || _h === void 0 ? void 0 : _h.card_button_text_color, colors.neutral), " !important;\n                }\n                .card_ContactProfile_btn_").concat(props.id, ":hover {\n                    background-color: ").concat(getColor((_j = props.cardStyle) === null || _j === void 0 ? void 0 : _j.card_button_background_color, colors.gray), " !important;\n                    color: ").concat(getColor((_k = props.cardStyle) === null || _k === void 0 ? void 0 : _k.card_button_text_color, colors.neutral), " !important;\n                    fill: ").concat(getColor((_l = props.cardStyle) === null || _l === void 0 ? void 0 : _l.card_button_text_color, colors.neutral), " !important;\n                }\n            ") })] }));
+};

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

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

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

@@ -0,0 +1,8 @@
+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 Link from "next/link";
+export var ContactProfileTheme1 = function (props) {
+    return (_jsxs("div", { className: "lu-pd-250 card_bg_ContactProfile_".concat(props.id, " lu-border-rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id), children: [_jsxs("div", { className: "flex gap-x-5", children: [_jsx("div", { className: "max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image", children: _jsx(LuImage, { image: props.image, aspectRatio: "", width: 160, height: 160, className: "lu-border-rounded-full lu-height-100 object-cover", orientation: props.mediaPosition }) }), _jsx("div", { className: "flex flex-1 flex-col", children: _jsxs("div", { className: "flex flex-col justify-center flex-1 lu-height-100", children: [_jsx("div", { className: "card_ContactProfile_title_color_".concat(props.id, " lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading"), children: props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light card_ContactProfile_designation_color_".concat(props.id, " 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_ContactProfile_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 lu-mt-200 card_button card_ContactProfile_btn_".concat(props.id) }) })] }));
+};

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

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

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

@@ -0,0 +1,8 @@
+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 Link from "next/link";
+export var ContactProfileTheme2 = function (props) {
+    return (_jsxs("div", { className: "lu-pd-400 card_bg_ContactProfile_".concat(props.id, " lu-border-rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id, " flex flex-col items-center"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: props.image, width: 160, height: 160, className: "lu-height-100 object-cover lu-border-rounded-full", 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_ContactProfile_title_color_".concat(props.id, " 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 card_ContactProfile_designation_color_".concat(props.id, " 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_ContactProfile_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_ContactProfile_btn_".concat(props.id) }) })] }));
+};

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

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

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

@@ -0,0 +1,23 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardLayoutEnum } from "../../../utils/enum";
+import { colors } from "../../../utils/colors";
+import { ensureValue, getColor } from "../../../app/scripts";
+import { PostByCategoryTheme1 } from "./PostByCategoryTheme1";
+import { PostByCategoryTheme2 } from "./PostByCategoryTheme2";
+export var PostByCategory = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    return (_jsxs("div", { children: [props.layout === cardLayoutEnum.horizontal ?
+                _jsx(PostByCategoryTheme1, __assign({}, props))
+                : (_jsx(_Fragment, { children: _jsx(PostByCategoryTheme2, __assign({}, props)) })), _jsx("style", { jsx: true, global: true, children: "\n                .card_PostByCategory_title_color_".concat(props.id, " {\n                    color: ").concat(getColor((_a = props.cardStyle) === null || _a === void 0 ? void 0 : _a.card_title_color, colors === null || colors === void 0 ? void 0 : colors.default), ";\n                }\n                .card_PostByCategory_description_color_").concat(props.id, " {\n                    color: ").concat(getColor((_b = props.cardStyle) === null || _b === void 0 ? void 0 : _b.card_description_color, colors.caption_color), ";\n                }\n                .card_shadow_PostByCategory_").concat(props.id, " {\n                    box-shadow: ").concat(((_c = props.cardStyle) === null || _c === void 0 ? void 0 : _c.card_shadow_toggle) === 1 ? "0px 4px 12px 0px ".concat(getColor((_d = props.cardStyle) === null || _d === void 0 ? void 0 : _d.card_shadow_color, 'rgba(52, 52, 52, 0.15)')) : '0px 4px 12px 0px rgba(52, 52, 52, 0.15)', ";\n                }\n                .card_bg_PostByCategory_").concat(props.id, " {\n                    background-color: ").concat(getColor((_e = props.cardStyle) === null || _e === void 0 ? void 0 : _e.card_background_color, colors.white), " !important;\n                }\n                .card_PostByCategory_btn_").concat(props.id, " {\n                    background-color: ").concat(getColor((_f = props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color, colors.gray), " !important;\n                    color: ").concat(getColor((_g = props.cardStyle) === null || _g === void 0 ? void 0 : _g.card_button_text_color, colors.neutral), " !important;\n                    fill: ").concat(getColor((_h = props.cardStyle) === null || _h === void 0 ? void 0 : _h.card_button_text_color, colors.neutral), " !important;\n                }\n                .card_PostByCategory_btn_").concat(props.id, ":hover {\n                    background-color: ").concat(getColor((_j = props.cardStyle) === null || _j === void 0 ? void 0 : _j.card_button_background_color, colors.gray), " !important;\n                    color: ").concat(getColor((_k = props.cardStyle) === null || _k === void 0 ? void 0 : _k.card_button_text_color, colors.neutral), " !important;\n                    fill: ").concat(getColor((_l = props.cardStyle) === null || _l === void 0 ? void 0 : _l.card_button_text_color, colors.neutral), " !important;\n                }\n                .card_PostByCategory_theme2_image_").concat(props === null || props === void 0 ? void 0 : props.id, " {\n                    border-color:").concat(getColor((_m = props.cardStyle) === null || _m === void 0 ? void 0 : _m.card_image_border_color, colors === null || colors === void 0 ? void 0 : colors.default), " !important;\n                    border-radius: ").concat(ensureValue((_o = props.cardStyle) === null || _o === void 0 ? void 0 : _o.card_image_border_radius, '0'), "%;\n                    border: ").concat(ensureValue((_p = props.cardStyle) === null || _p === void 0 ? void 0 : _p.card_image_border, '0'), "px solid\n                }\n            ") })] }));
+};

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

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

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

@@ -0,0 +1,8 @@
+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";
+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 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 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 card_button card_PostByCategory_btn_".concat(props.id) }) })] })] }));
+};

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

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

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

@@ -0,0 +1,8 @@
+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";
+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 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 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/PostByCategory.js

@@ -1,11 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cardLayoutEnum, contentTypeEnum } from "../../utils/enum";
-import { LuImage } from "../Images/LuImage";
-import { Button } from "../Button/Button";
-import Link from "next/link";
-import { colors } from "../../utils";
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardLayoutEnum } from "../../utils/enum";
+import { colors } from "../../utils/colors";
+import { ensureValue, getColor } from "../../app/scripts";
+import { PostByCategoryTheme1 } from "./PostByCategoryTheme1";
+import { PostByCategoryTheme2 } from "./PostByCategoryTheme2";
 export var PostByCategory = function (props) {
-    return (_jsxs(_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: "card_PostByCategory_theme1 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" }) })] }) })), _jsx("style", { jsx: true, global: true, children: "\n                .card_PostByCategory_theme1{\n                    color: ".concat((props === null || props === void 0 ? void 0 : props.card_title_color) ? props.card_title_color : colors.default, ";\n                }\n            ") })] }));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    return (_jsxs("div", { children: [props.layout === cardLayoutEnum.horizontal ?
+                _jsx(PostByCategoryTheme1, __assign({}, props))
+                : (_jsx(_Fragment, { children: _jsx(PostByCategoryTheme2, __assign({}, props)) })), _jsx("style", { jsx: true, global: true, children: "\n                .card_PostByCategory_title_color_".concat(props.id, " {\n                    color: ").concat(getColor((_a = props.cardStyle) === null || _a === void 0 ? void 0 : _a.card_title_color, colors === null || colors === void 0 ? void 0 : colors.default), ";\n                }\n                .card_PostByCategory_description_color_").concat(props.id, " {\n                    color: ").concat(getColor((_b = props.cardStyle) === null || _b === void 0 ? void 0 : _b.card_description_color, colors.caption_color), ";\n                }\n                .card_shadow_PostByCategory_").concat(props.id, " {\n                    box-shadow: ").concat(((_c = props.cardStyle) === null || _c === void 0 ? void 0 : _c.card_shadow_toggle) === 1 ? "0px 4px 12px 0px ".concat(getColor((_d = props.cardStyle) === null || _d === void 0 ? void 0 : _d.card_shadow_color, 'rgba(52, 52, 52, 0.15)')) : '0px 4px 12px 0px rgba(52, 52, 52, 0.15)', ";\n                }\n                .card_bg_PostByCategory_").concat(props.id, " {\n                    background-color: ").concat(getColor((_e = props.cardStyle) === null || _e === void 0 ? void 0 : _e.card_background_color, colors.white), " !important;\n                }\n                .card_PostByCategory_btn_").concat(props.id, " {\n                    background-color: ").concat(getColor((_f = props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color, colors.gray), " !important;\n                    color: ").concat(getColor((_g = props.cardStyle) === null || _g === void 0 ? void 0 : _g.card_button_text_color, colors.neutral), " !important;\n                    fill: ").concat(getColor((_h = props.cardStyle) === null || _h === void 0 ? void 0 : _h.card_button_text_color, colors.neutral), " !important;\n                }\n                .card_PostByCategory_btn_").concat(props.id, ":hover {\n                    background-color: ").concat(getColor((_j = props.cardStyle) === null || _j === void 0 ? void 0 : _j.card_button_background_color, colors.gray), " !important;\n                    color: ").concat(getColor((_k = props.cardStyle) === null || _k === void 0 ? void 0 : _k.card_button_text_color, colors.neutral), " !important;\n                    fill: ").concat(getColor((_l = props.cardStyle) === null || _l === void 0 ? void 0 : _l.card_button_text_color, colors.neutral), " !important;\n                }\n                .card_PostByCategory_theme2_image_").concat(props === null || props === void 0 ? void 0 : props.id, " {\n                    border-color:").concat(getColor((_m = props.cardStyle) === null || _m === void 0 ? void 0 : _m.card_image_border_color, colors === null || colors === void 0 ? void 0 : colors.default), " !important;\n                    border-radius: ").concat(ensureValue((_o = props.cardStyle) === null || _o === void 0 ? void 0 : _o.card_image_border_radius, '0'), "%;\n                    border: ").concat(ensureValue((_p = props.cardStyle) === null || _p === void 0 ? void 0 : _p.card_image_border, '0'), "px solid\n                }\n            ") })] }));
 };

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

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

package/dist/components/MediaCard/PostByCategoryTheme1.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LuImage } from "../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../Button/Button";
+import { contentTypeEnum } from "../../utils/enum";
+export var PostByCategoryTheme1 = function (props) {
+    return (_jsx(_Fragment, { children: _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 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 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 card_button card_PostByCategory_btn_".concat(props.id) }) })] })] }) }));
+};

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

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

package/dist/components/MediaCard/PostByCategoryTheme2.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LuImage } from "../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../Button/Button";
+import { contentTypeEnum } from "../../utils/enum";
+export var PostByCategoryTheme2 = function (props) {
+    return (_jsx(_Fragment, { children: _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 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 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/Size/Size.js

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

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

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Size } from "../../components/Size/Size";
-import { colorGroups, sizes } from "../../utils";
+import { sizes } from "../../utils";
 export default {
     title: "Components/Size",
     component: Size,
@@ -20,15 +20,10 @@ var Template = function (args) { return _jsx(Size, __assign({}, 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/Spacing/Margin/MarginToken.js

@@ -5,6 +5,8 @@ import { MarginLeft } from "./MarginLeft";
 import { MarginRight } from "./MarginRight";
 import { MarginTop } from "./MarginTop";
 import { MarginBottom } from "./MarginBottom";
+import { MarginX } from "./MarginX";
+import { MarginY } from "./MarginY";
 export var MarginToken = function () {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Spacing Token" }), _jsxs("table", { className: "lu-width-100 lu-font-size-x-small lu-font-weight-medium", children: [_jsx("thead", { className: "bg-primary-100", children: _jsxs("tr", { children: [_jsx("th", { className: "".concat(table_header_className), children: "Alias Token Name" }), _jsx("th", { className: "".concat(table_header_className), children: "Base unit Multiplier of 8" }), _jsx("th", { className: "".concat(table_header_className), children: "Value(PX)(REM)" })] }) }), _jsxs("tbody", { children: [_jsx(Margin, {}), _jsx(MarginLeft, {}), _jsx(MarginRight, {}), _jsx(MarginTop, {}), _jsx(MarginBottom, {})] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Spacing Token" }), _jsxs("table", { className: "lu-width-100 lu-font-size-x-small lu-font-weight-medium", children: [_jsx("thead", { className: "lu-bg-primary-100", children: _jsxs("tr", { children: [_jsx("th", { className: "".concat(table_header_className), children: "Alias Token Name" }), _jsx("th", { className: "".concat(table_header_className), children: "Base unit Multiplier of 8" }), _jsx("th", { className: "".concat(table_header_className), children: "Value(PX)(REM)" })] }) }), _jsxs("tbody", { children: [_jsx(Margin, {}), _jsx(MarginLeft, {}), _jsx(MarginRight, {}), _jsx(MarginTop, {}), _jsx(MarginBottom, {}), _jsx(MarginX, {}), _jsx(MarginY, {})] })] })] }));
 };

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

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

package/dist/components/Spacing/Margin/MarginX.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var MarginX = function () {
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { children: _jsx("td", { colSpan: 3, className: "".concat(table_sub_heading_className), children: "Margin X axis" }) }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-auto" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "auto" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "auto" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-0" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "0x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "0px = 0rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-050" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "0.5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "4px = 0.25rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-100" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "1x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "8px = 0.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-150" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "1.5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "12px = 0.75rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-200" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "2x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "16px = 1rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-250" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "2.5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "20px = 1.25rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-300" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "3x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "24px = 1.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-400" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "4x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "32px = 2rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-500" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "40px = 2.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-600" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "6x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "48px = 3rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-800" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "8x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "64px = 4rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-1000" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "10x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "80px = 5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-1500" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "15x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "120px = 7.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-2000" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "20x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "160px = 10rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-2500" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "25x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "200px = 12.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mx-3000" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "30x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "240px = 15rem" }) })] })] }));
+};

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

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

package/dist/components/Spacing/Margin/MarginY.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var MarginY = function () {
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { children: _jsx("td", { colSpan: 3, className: "".concat(table_sub_heading_className), children: "Margin Y axis" }) }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-auto" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "auto" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "auto" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-0" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "0x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "0px = 0rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-050" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "0.5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "4px = 0.25rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-100" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "1x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "8px = 0.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-150" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "1.5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "12px = 0.75rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-200" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "2x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "16px = 1rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-250" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "2.5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "20px = 1.25rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-300" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "3x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "24px = 1.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-400" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "4x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "32px = 2rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-500" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "5x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "40px = 2.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-600" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "6x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "48px = 3rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-800" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "8x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "64px = 4rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-1000" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "10x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "80px = 5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-1500" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "15x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "120px = 7.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-2000" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "20x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "160px = 10rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-2500" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "25x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "200px = 12.5rem" }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-my-3000" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "30x" }) }), _jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "240px = 15rem" }) })] })] }));
+};

package/dist/components/Spacing/Padding/PaddingToken.js

@@ -5,6 +5,8 @@ import { PaddingLeft } from "./PaddingLeft";
 import { PaddingRight } from "./PaddingRight";
 import { PaddingTop } from "./PaddingTop";
 import { PaddingBottom } from "./PaddingBottom";
+import { PaddingX } from "./PaddingX";
+import { PaddingY } from "./PaddingY";
 export var PaddingToken = function () {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Spacing Token" }), _jsxs("table", { className: "lu-width-100 lu-font-size-x-small lu-font-weight-medium", children: [_jsx("thead", { className: "bg-primary-100", children: _jsxs("tr", { children: [_jsx("th", { className: "".concat(table_header_className), children: "Alias Token Name" }), _jsx("th", { className: "".concat(table_header_className), children: "Base unit Multiplier of 8" }), _jsx("th", { className: "".concat(table_header_className), children: "Value(PX)(REM)" })] }) }), _jsxs("tbody", { children: [_jsx(Padding, {}), _jsx(PaddingLeft, {}), _jsx(PaddingRight, {}), _jsx(PaddingTop, {}), _jsx(PaddingBottom, {})] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Spacing Token" }), _jsxs("table", { className: "lu-width-100 lu-font-size-x-small lu-font-weight-medium", children: [_jsx("thead", { className: "bg-primary-100", children: _jsxs("tr", { children: [_jsx("th", { className: "".concat(table_header_className), children: "Alias Token Name" }), _jsx("th", { className: "".concat(table_header_className), children: "Base unit Multiplier of 8" }), _jsx("th", { className: "".concat(table_header_className), children: "Value(PX)(REM)" })] }) }), _jsxs("tbody", { children: [_jsx(Padding, {}), _jsx(PaddingLeft, {}), _jsx(PaddingRight, {}), _jsx(PaddingTop, {}), _jsx(PaddingBottom, {}), _jsx(PaddingX, {}), _jsx(PaddingY, {})] })] })] }));
 };

package/dist/components/Spacing/Padding/PaddingX.d.ts

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