npm - linkedunion-design-kit - Versions diffs - 1.2.5 → 1.2.6 - Mend

linkedunion-design-kit 1.2.5 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

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

@@ -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.jsx ADDED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

package/dist/components/Spacing/Padding/Padding.jsx ADDED Viewed

@@ -0,0 +1,87 @@
+import { table_data_className, table_row_className, table_sub_heading_className } from "../../../utils";
+export var Padding = function () {
+    return (<>
+        <tr><td colSpan={3} className={"".concat(table_sub_heading_className)}>Padding</td></tr>
+        <tr>
+            <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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-pd-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/PaddingBottom.d.ts CHANGED Viewed

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