linkedunion-design-kit 0.1.3 → 0.1.5

package/dist/components/Size/{Resizable.jsx → WidthHeight.jsx}

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

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

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { WidthHeightProps } from "@/types/interface";
+declare const _default: Meta;
+export default _default;
+export declare const widthAndHeight: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, WidthHeightProps>;

package/dist/components/Size/{Resizable.stories.jsx → WidthHeight.stories.jsx}

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

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

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

package/dist/components/Spacing/Margin/Margin.jsx

@@ -0,0 +1,86 @@
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var Margin = function () {
+    return (<>
+        <tr><td colSpan={3} className={"".concat(table_sub_heading_className)}>Margin</td></tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-0</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0px = 0rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-050</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4px = 0.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-100</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8px = 0.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-150</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>12px = 0.75rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-200</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>16px = 1rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-250</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20px = 1.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-300</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>3x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>24px = 1.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-400</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>32px = 2rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>40px = 2.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-600</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>6x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>48px = 3rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-800</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>64px = 4rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-1000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>10x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>80px = 5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-1500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>15x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>120px = 7.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-2000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>160px = 10rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-2500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>25x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>200px = 12.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-m-3000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>30x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>240px = 15rem</span></td>
+        </tr>
+    </>);
+};

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

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

package/dist/components/Spacing/Margin/MarginBottom.jsx

@@ -0,0 +1,86 @@
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var MarginBottom = function () {
+    return (<>
+     <tr><td colSpan={3} className={"".concat(table_sub_heading_className)}>Margin Bottom</td></tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-0</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0px = 0rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-050</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.5x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4px = 0.25rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-100</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8px = 0.5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-150</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1.5x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>12px = 0.75rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-200</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>16px = 1rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-250</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2.5x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20px = 1.25rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-300</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>3x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>24px = 1.5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-400</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>32px = 2rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-500</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>5x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>40px = 2.5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-600</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>6x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>48px = 3rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-800</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>64px = 4rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-1000</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>10x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>80px = 5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-1500</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>15x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>120px = 7.5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-2000</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>160px = 10rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-2500</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>25x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>200px = 12.5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mb-3000</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>30x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>240px = 15rem</span></td>
+                </tr>
+    </>);
+};

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

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

package/dist/components/Spacing/Margin/MarginLeft.jsx

@@ -0,0 +1,86 @@
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var MarginLeft = function () {
+    return (<>
+        <tr><td colSpan={3} className={"".concat(table_sub_heading_className)}>Margin Left</td></tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-0</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0px = 0rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-050</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4px = 0.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-100</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8px = 0.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-150</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>12px = 0.75rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-200</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>16px = 1rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-250</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20px = 1.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-300</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>3x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>24px = 1.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-400</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>32px = 2rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>40px = 2.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-600</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>6x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>48px = 3rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-800</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>64px = 4rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-1000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>10x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>80px = 5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-1500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>15x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>120px = 7.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-2000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>160px = 10rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-2500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>25x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>200px = 12.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-ml-3000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>30x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>240px = 15rem</span></td>
+        </tr>
+    </>);
+};

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

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

package/dist/components/Spacing/Margin/MarginRight.jsx

@@ -0,0 +1,86 @@
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var MarginRight = function () {
+    return (<>
+        <tr><td colSpan={3} className={"".concat(table_sub_heading_className)}>Margin Right</td></tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-0</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0px = 0rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-050</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4px = 0.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-100</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8px = 0.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-150</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>12px = 0.75rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-200</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>16px = 1rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-250</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20px = 1.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-300</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>3x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>24px = 1.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-400</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>32px = 2rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>40px = 2.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-600</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>6x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>48px = 3rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-800</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>64px = 4rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-1000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>10x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>80px = 5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-1500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>15x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>120px = 7.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-2000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>160px = 10rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-2500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>25x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>200px = 12.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mr-3000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>30x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>240px = 15rem</span></td>
+        </tr>
+    </>);
+};

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

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

package/dist/components/Spacing/Margin/MarginToken.jsx

@@ -0,0 +1,27 @@
+import { table_header_className } from "../../../utils";
+import { Margin } from "./Margin";
+import { MarginLeft } from "./MarginLeft";
+import { MarginRight } from "./MarginRight";
+import { MarginTop } from "./MarginTop";
+import { MarginBottom } from "./MarginBottom";
+export var MarginToken = function () {
+    return (<>
+        <div className="lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100">Spacing Token</div>
+        <table className="lu-width-100 lu-font-size-x-small lu-font-weight-medium">
+            <thead className="bg-primary-100">
+                <tr>
+                    <th className={"".concat(table_header_className)}>Alias Token Name</th>
+                    <th className={"".concat(table_header_className)}>Base unit Multiplier of 8</th>
+                    <th className={"".concat(table_header_className)}>Value(PX)(REM)</th>
+                </tr>
+            </thead>
+            <tbody>
+                <Margin />
+                <MarginLeft />
+                <MarginRight />
+                <MarginTop />
+                <MarginBottom />
+            </tbody>
+        </table>
+    </>);
+};

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

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

package/dist/components/Spacing/Margin/MarginToken.stories.jsx

@@ -0,0 +1,7 @@
+import { MarginToken } from "../../../components/Spacing/Margin/MarginToken";
+export default {
+    title: "Components/Spacing",
+    component: MarginToken,
+};
+var Template = function (args) { return <MarginToken {...args}/>; };
+export var margin = Template.bind({});

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

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

package/dist/components/Spacing/Margin/MarginTop.jsx

@@ -0,0 +1,87 @@
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var MarginTop = function () {
+    return (<>
+        <tr><td colSpan={3} className={"".concat(table_sub_heading_className)}>Margin Top</td></tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-0</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0px = 0rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-050</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4px = 0.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-100</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8px = 0.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-150</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>12px = 0.75rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-200</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>16px = 1rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-250</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2.5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20px = 1.25rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-300</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>3x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>24px = 1.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-400</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>32px = 2rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>5x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>40px = 2.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-600</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>6x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>48px = 3rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-800</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>64px = 4rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-1000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>10x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>80px = 5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-1500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>15x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>120px = 7.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-2000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>20x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>160px = 10rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-2500</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>25x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>200px = 12.5rem</span></td>
+        </tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-mt-3000</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>30x</span></td>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>240px = 15rem</span></td>
+        </tr>
+
+    </>);
+};

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

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