linkedunion-design-kit 0.1.2 → 0.1.4

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;

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

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

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

package/dist/components/Spacing/Padding/PaddingBottom.jsx

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

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

package/dist/components/Spacing/Padding/PaddingLeft.jsx

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

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