linkedunion-design-kit 1.4.6 → 1.4.8

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

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

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

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

package/dist/components/Images/LuImage.js

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

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

@@ -19,23 +19,21 @@ export default {
 };
 var Template = function (args, _a) {
     var argTypes = _a.argTypes;
-    //Show aspectRatio options based on orientation(landscape) 
+    //Show aspectRatio options based on orientation(landscape)
     var isLandscape = args.orientation === orientationEnum.landscape;
-    argTypes.aspectRatio.options = isLandscape ? landscapeaspectRatioList.map(function (ratio) { return ratio.key; }) : portraitaspectRatioList.map(function (ratio) { return ratio.key; });
-    argTypes.aspectRatio.control.labels = Object.fromEntries((isLandscape ? landscapeaspectRatioList : portraitaspectRatioList).map(function (ratio) { return [
-        ratio.key,
-        ratio.label,
-    ]; }));
+    argTypes.aspectRatio.options = isLandscape
+        ? landscapeaspectRatioList.map(function (ratio) { return ratio.key; })
+        : portraitaspectRatioList.map(function (ratio) { return ratio.key; });
+    argTypes.aspectRatio.control.labels = Object.fromEntries((isLandscape ? landscapeaspectRatioList : portraitaspectRatioList).map(function (ratio) { return [ratio.key, ratio.label]; }));
     return _jsx(LuImage, __assign({}, args));
 };
 export var image = Template.bind({});
 image.args = {
-    image: '/images/demo-image.jpg',
-    orientation: orientationEnum.portrait,
+    image: "/images/demo-image.jpg",
     aspectRatio: portraitaspectRatioList[0].key,
     width: 240,
     height: 240,
-    className: ''
+    className: "",
 };
 image.argTypes = {
     orientation: {

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,36 @@ 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);
-    return (_jsxs(_Fragment, { children: [type === sectionType.postByCategoriesTheme && _jsx(PostByCategory, __assign({}, data)), type === sectionType.contactsProfileTheme && _jsx(ContactProfile, __assign({}, data))] }));
+    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,
@@ -21,15 +22,23 @@ var Template = function (args) { return _jsx(Card, __assign({}, args)); };
 export var card = Template.bind({});
 card.args = {
     type: sectionType.postByCategoriesTheme,
-    image: '/images/demo-image.jpg',
-    heading: 'Heading Text',
-    body: 'The quick brown fox jumps over the lazy dog.',
+    image: "/images/demo-image.jpg",
+    heading: "Heading Text",
+    body: "The quick brown fox jumps over the lazy dog.",
     mediaPosition: orientationEnum.landscape,
     layout: cardLayoutEnum.horizontal,
-    btnLabel: 'View More',
-    href: 'https://www.google.com/',
-    card_title_color: 'lu-text-default',
-    id: 1
+    btnLabel: "View More",
+    href: "https://www.google.com/",
+    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 = {
     mediaPosition: {
@@ -41,7 +50,10 @@ card.argTypes = {
         options: [cardLayoutEnum.horizontal, cardLayoutEnum.vertical],
     },
     type: {
-        control: { type: "select", labels: Object.fromEntries(sectionTypeList.map(function (type) { return [type.key, type.label]; })) },
+        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.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,9 @@
+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";
+import styles from "../card.module.css";
+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 ".concat(styles.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 ").concat(styles.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, " ").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_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 ".concat(styles.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,9 @@
+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";
+import styles from "../card.module.css";
+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 ").concat(styles.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, " ").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_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.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\n              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,9 @@
+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 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.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,9 @@
+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 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/card.module.css

@@ -0,0 +1,52 @@
+.vertical_card_heading {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-transform: capitalize;
+}
+.vertical_body_text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.horizontal_card_heading {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-transform: capitalize;
+}
+.horizontal_body_text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+@media (max-width: 440px) and (min-width: 398px) {
+  .horizontal_card_image {
+    max-width: 160px;
+  }
+}
+@media (max-width: 398px) {
+  .horizontal_card_image {
+    display: none;
+  }
+  .horizontal_body_text {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-top: 7px;
+  }
+
+  .card_button {
+    margin-top: 10px;
+  }
+}

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

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

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

@@ -16,19 +16,25 @@ export default {
     title: "Components/Size",
     component: MinWidthHeight,
 };
-var Template = function (args) { return _jsx(MinWidthHeight, __assign({}, args)); };
+var Template = function (args) { return (_jsx(MinWidthHeight, __assign({}, args))); };
 export var minWidthAndHeight = Template.bind({});
 minWidthAndHeight.args = {
-    minWidth: 'lu-min-width-100',
-    minHeight: 'lu-min-height-100',
+    minWidth: "lu-min-width-100",
+    minHeight: "lu-min-height-100",
 };
 minWidthAndHeight.argTypes = {
     minWidth: {
-        control: { type: "select", labels: Object.fromEntries(minWidths.map(function (size) { return [size.key, size.label]; })) },
+        control: {
+            type: "select",
+            labels: Object.fromEntries(minWidths.map(function (size) { return [size.key, size.label]; })),
+        },
         options: minWidths.map(function (size) { return size.key; }),
     },
     minHeight: {
-        control: { type: "select", labels: Object.fromEntries(minHeights.map(function (size) { return [size.key, size.label]; })) },
+        control: {
+            type: "select",
+            labels: Object.fromEntries(minHeights.map(function (size) { return [size.key, size.label]; })),
+        },
         options: minHeights.map(function (size) { return size.key; }),
     },
 };

package/dist/components/Size/Size.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,
@@ -19,16 +19,14 @@ export default {
 var Template = function (args) { return _jsx(Size, __assign({}, args)); };
 export var SizeStory = Template.bind({});
 SizeStory.args = {
-    size: 'lu-size-400',
-    color: 'bg-primary-500',
+    size: "lu-size-400",
 };
 SizeStory.argTypes = {
     size: {
-        control: { type: "select", labels: Object.fromEntries(sizes.map(function (size) { return [size.key, size.label]; })) },
+        control: {
+            type: "select",
+            labels: Object.fromEntries(sizes.map(function (size) { return [size.key, size.label]; })),
+        },
         options: sizes.map(function (size) { return size.key; }),
     },
-    color: {
-        control: { type: "select" },
-        options: colorGroups.primary,
-    },
 };

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

@@ -19,16 +19,22 @@ export default {
 var Template = function (args) { return _jsx(WidthHeight, __assign({}, args)); };
 export var widthAndHeight = Template.bind({});
 widthAndHeight.args = {
-    width: 'lu-width-50',
-    height: 'lu-height-50',
+    width: "lu-width-50",
+    height: "lu-height-50",
 };
 widthAndHeight.argTypes = {
     width: {
-        control: { type: "select", labels: Object.fromEntries(widths.map(function (size) { return [size.key, size.label]; })) },
+        control: {
+            type: "select",
+            labels: Object.fromEntries(widths.map(function (size) { return [size.key, size.label]; })),
+        },
         options: widths.map(function (size) { return size.key; }),
     },
     height: {
-        control: { type: "select", labels: Object.fromEntries(heights.map(function (size) { return [size.key, size.label]; })) },
+        control: {
+            type: "select",
+            labels: Object.fromEntries(heights.map(function (size) { return [size.key, size.label]; })),
+        },
         options: heights.map(function (size) { return size.key; }),
     },
 };

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

@@ -1,5 +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";
+import { table_data_className, table_row_className, table_sub_heading_className, } from "../../../utils";
 export var Margin = function () {
     return (_jsxs(_Fragment, { children: [_jsx("tr", { children: _jsx("td", { colSpan: 3, className: "".concat(table_sub_heading_className), children: "Margin" }) }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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-m-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/MarginBottom.js

@@ -1,5 +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";
+import { table_data_className, table_row_className, table_sub_heading_className, } from "../../../utils";
 export var MarginBottom = function () {
     return (_jsxs(_Fragment, { children: [_jsx("tr", { children: _jsx("td", { colSpan: 3, className: "".concat(table_sub_heading_className), children: "Margin Bottom" }) }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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-mb-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/MarginLeft.js

@@ -1,5 +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";
+import { table_data_className, table_row_className, table_sub_heading_className, } from "../../../utils";
 export var MarginLeft = function () {
     return (_jsxs(_Fragment, { children: [_jsx("tr", { children: _jsx("td", { colSpan: 3, className: "".concat(table_sub_heading_className), children: "Margin Left" }) }), _jsxs("tr", { children: [_jsx("td", { className: "".concat(table_row_className), children: _jsx("span", { className: "".concat(table_data_className), children: "lu-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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-ml-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" }) })] })] }));
 };