linkedunion-design-kit 1.1.2 → 1.1.3

package/dist/components/MediaCard/Card.js

@@ -2,10 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Image } from "../Images/LuImage";
 import { Button } from "../Button/Button";
 import { cardLayoutEnum, contentTypeEnum, orientationEnum } from "../../utils/enum";
-import styles from "./Card.module.css";
 export var Card = function (_a) {
     var _b = _a.image, image = _b === void 0 ? '/images/demo-image.jpg' : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? orientationEnum.landscape : _d, _e = _a.heading, heading = _e === void 0 ? 'Heading Text' : _e, _f = _a.body, body = _f === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.btnLabel, btnLabel = _h === void 0 ? 'View More' : _h;
     return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
-            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] w-fit"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light ".concat(styles.body_text), children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] })] })
-            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center w-fit"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "".concat(styles.card, " flex flex-col items-center lu-m-250"), children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
+            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] w-fit"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] })] })
+            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center w-fit"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "flex flex-col items-center lu-m-250", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
 };

package/dist/index.d.ts

@@ -5,4 +5,3 @@ export { MinWidthHeight } from './components/Size/MinWidthHeight';
 export { LUIcon } from './components/Icons/LUIcon';
 export { Card } from './components/MediaCard/Card';
 import './styles/global.css';
-import './components/MediaCard/Card.module.css';

package/dist/index.js

@@ -5,4 +5,3 @@ export { MinWidthHeight } from './components/Size/MinWidthHeight';
 export { LUIcon } from './components/Icons/LUIcon';
 export { Card } from './components/MediaCard/Card';
 import './styles/global.css';
-import './components/MediaCard/Card.module.css';

package/dist/styles/global.css

@@ -10611,129 +10611,170 @@ table, th, td {
 .lu-ml-3000 {
   margin-left: var(--lu-spacing-3000);
 }
+
+@media (max-width: 430px) {
+  .horizontal_body_text {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    /* Limits text to 2 lines */
+    line-clamp: 2;
+    /* Limits text to 2 lines */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .before\:absolute::before {
   content: var(--tw-content);
   position: absolute;
 }
+
 .before\:h-\[300px\]::before {
   content: var(--tw-content);
   height: 300px;
 }
+
 .before\:w-\[480px\]::before {
   content: var(--tw-content);
   width: 480px;
 }
+
 .before\:-translate-x-1\/2::before {
   content: var(--tw-content);
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .before\:rounded-full::before {
   content: var(--tw-content);
   border-radius: 9999px;
 }
+
 .before\:bg-gradient-radial::before {
   content: var(--tw-content);
   background-image: radial-gradient(var(--tw-gradient-stops));
 }
+
 .before\:from-white::before {
   content: var(--tw-content);
   --tw-gradient-from: #FEFEFE var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(254 254 254 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .before\:to-transparent::before {
   content: var(--tw-content);
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
+
 .before\:blur-2xl::before {
   content: var(--tw-content);
   --tw-blur: blur(40px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+
 .before\:content-\[\'\'\]::before {
   --tw-content: '';
   content: var(--tw-content);
 }
+
 .after\:absolute::after {
   content: var(--tw-content);
   position: absolute;
 }
+
 .after\:-z-20::after {
   content: var(--tw-content);
   z-index: -20;
 }
+
 .after\:h-\[180px\]::after {
   content: var(--tw-content);
   height: 180px;
 }
+
 .after\:w-\[240px\]::after {
   content: var(--tw-content);
   width: 240px;
 }
+
 .after\:translate-x-1\/3::after {
   content: var(--tw-content);
   --tw-translate-x: 33.333333%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .after\:bg-gradient-conic::after {
   content: var(--tw-content);
   background-image: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
 }
+
 .after\:from-sky-200::after {
   content: var(--tw-content);
   --tw-gradient-from: #bae6fd var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(186 230 253 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+
 .after\:via-blue-200::after {
   content: var(--tw-content);
   --tw-gradient-to: rgb(191 219 254 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #bfdbfe var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
+
 .after\:blur-2xl::after {
   content: var(--tw-content);
   --tw-blur: blur(40px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+
 .after\:content-\[\'\'\]::after {
   --tw-content: '';
   content: var(--tw-content);
 }
+
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(183 186 189 / var(--tw-border-opacity, 1));
 }
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 237 238 / var(--tw-bg-opacity, 1));
 }
+
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(210 212 213 / var(--tw-bg-opacity, 1));
 }
+
 .group:hover .group-hover\:translate-x-1 {
   --tw-translate-x: 0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 @media (prefers-reduced-motion: reduce) {
 
   .motion-reduce\:transform-none {
     transform: none;
   }
 }
+
 @media (min-width: 640px) {
 
   .sm\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+
 @media (min-width: 768px) {
 
   .md\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
+
 @media (min-width: 1024px) {
 
   .lg\:pointer-events-auto {
@@ -10810,6 +10851,7 @@ table, th, td {
     height: 360px;
   }
 }
+
 @media (prefers-color-scheme: dark) {
 
   .dark\:border-neutral-800 {
@@ -10897,6 +10939,7 @@ table, th, td {
     background-color: rgb(38 38 38 / 0.3);
   }
 }
+
 @media (min-width: 1024px) {
 
   @media (prefers-color-scheme: dark) {

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": false,
   "files": [
     "dist",
-    "styles/global.css",
-    "dist/components/MediaCard/Card.module.css"
+    "styles/global.css"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/app/layout.jsx

@@ -1,13 +0,0 @@
-import { Inter } from 'next/font/google';
-import '../styles/globals.css';
-var inter = Inter({ subsets: ['latin'] });
-export var metadata = {
-    title: 'Create Next App',
-    description: 'Generated by create next app',
-};
-export default function RootLayout(_a) {
-    var children = _a.children;
-    return (<html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>);
-}

package/dist/app/page.jsx

@@ -1,71 +0,0 @@
-import Image from 'next/image';
-export default function Home() {
-    return (<main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0" href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer">
-            By{' '}
-            <Image src="/vercel.svg" alt="Vercel Logo" className="dark:invert" width={100} height={24} priority/>
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" src="/next.svg" alt="Next.js Logo" width={180} height={37} priority/>
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>);
-}

package/dist/components/Border/BorderRadius/BorderRadius.jsx

@@ -1,12 +0,0 @@
-import { BorderRadiusTable } from "./BorderRadiusTable";
-import { BorderRadiusView } from "./BorderRadiusView";
-export var BorderRadius = function (_a) {
-    var borderRadius = _a.borderRadius;
-    return (<>
-        <div className="lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100">Border Radius</div>
-        <BorderRadiusTable />
-        <div className="lu-mt-150">
-            <BorderRadiusView borderRadius={borderRadius}/>
-        </div>
-    </>);
-};

package/dist/components/Border/BorderRadius/BorderRadius.stories.jsx

@@ -1,17 +0,0 @@
-import { BorderRadius } from "./BorderRadius";
-import { borderRadiusList } from "../../../utils";
-export default {
-    title: "Components/Border",
-    component: BorderRadius,
-};
-var Template = function (args) { return <BorderRadius {...args}/>; };
-export var borderRadius = Template.bind({});
-borderRadius.args = {
-    borderRadius: 'lu-border-rounded-xs',
-};
-borderRadius.argTypes = {
-    borderRadius: {
-        control: { type: "select", labels: Object.fromEntries(borderRadiusList.map(function (borderRadius) { return [borderRadius.key, borderRadius.label]; })) },
-        options: borderRadiusList.map(function (borderRadius) { return borderRadius.key; }),
-    },
-};

package/dist/components/Border/BorderRadius/BorderRadiusTable.jsx

@@ -1,61 +0,0 @@
-import { table_data_className, table_header_className, table_row_className } from "../../../utils";
-export var BorderRadiusTable = function () {
-    return (<>
-        <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>
-                <tr>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-none</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-border-rounded-xs</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.25x</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2px = 0.125rem</span></td>
-                </tr>
-                <tr>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-sm</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-border-rounded-md</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.75x</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>6px = 0.375rem</span></td>
-                </tr>
-                <tr>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-lg</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-border-rounded-xl</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-border-rounded-2xl</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-border-rounded-3xl</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-border-rounded-full</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>100x</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>9999px</span></td>
-                </tr>
-            </tbody>
-        </table>
-    </>);
-};

package/dist/components/Border/BorderRadius/BorderRadiusView.jsx

@@ -1,8 +0,0 @@
-export var BorderRadiusView = function (_a) {
-    var borderRadius = _a.borderRadius;
-    return (<>
-        <div className={"border-primary-600 lu-pd-200 lu-size-2500 lu-border-width-125 ".concat(borderRadius)} data-testid="border-radius">
-           <p className="bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded lu-font-size-x-small">{borderRadius}</p>
-        </div>
-    </>);
-};

package/dist/components/Border/BorderWidth/BorderWidth.jsx

@@ -1,12 +0,0 @@
-import { BorderWidthTable } from "./BorderWidthTable";
-import { ViewBorderWidth } from "./ViewBorderWidth";
-export var BorderWidth = function (_a) {
-    var border = _a.border;
-    return (<>
-        <div className="lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100">Border Width</div>
-        <BorderWidthTable />
-        <div className="lu-mt-150">
-            <ViewBorderWidth border={border}/>
-        </div>
-    </>);
-};

package/dist/components/Border/BorderWidth/BorderWidth.stories.jsx

@@ -1,17 +0,0 @@
-import { BorderWidth } from "./BorderWidth";
-import { borderWidthList } from "../../../utils";
-export default {
-    title: "Components/Border",
-    component: BorderWidth,
-};
-var Template = function (args) { return <BorderWidth {...args}/>; };
-export var borderWidth = Template.bind({});
-borderWidth.args = {
-    border: 'lu-border-width-125',
-};
-borderWidth.argTypes = {
-    border: {
-        control: { type: "select", labels: Object.fromEntries(borderWidthList.map(function (borderWidth) { return [borderWidth.key, borderWidth.label]; })) },
-        options: borderWidthList.map(function (borderWidth) { return borderWidth.key; }),
-    },
-};

package/dist/components/Border/BorderWidth/BorderWidthTable.jsx

@@ -1,36 +0,0 @@
-import { table_data_className, table_header_className, table_row_className } from "../../../utils";
-export var BorderWidthTable = function () {
-    return (<>
-        <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>
-                <tr>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-width-125</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.125x</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1px = 0.063rem</span></td>
-                </tr>
-                <tr>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-width-025</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.25x</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2px = 0.125rem</span></td>
-                </tr>
-                <tr>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-width-050</span></td>
-                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.50x</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-border-width-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>
-            </tbody>
-        </table>
-    </>);
-};

package/dist/components/Border/BorderWidth/ViewBorderWidth.jsx

@@ -1,8 +0,0 @@
-export var ViewBorderWidth = function (_a) {
-    var border = _a.border;
-    return (<>
-        <div className={"border-primary-600 lu-border-rounded-2xl lu-pd-200 lu-size-2500 ".concat(border)} data-testid="border-width">
-            <p className="bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded lu-font-size-x-small lu-text-center">{border}</p>
-        </div>
-    </>);
-};

package/dist/components/Button/Button.jsx

@@ -1,16 +0,0 @@
-import { LUIcon } from "../Icons/LUIcon";
-import { buttonTypeEnum, contentTypeEnum } from "../../utils/enum";
-export var Button = function (_a) {
-    var contentType = _a.contentType, variant = _a.variant, label = _a.label, iconLeft = _a.iconLeft, iconRight = _a.iconRight, onClick = _a.onClick, shape = _a.shape, size = _a.size, leftIconSize = _a.leftIconSize, rightIconSize = _a.rightIconSize, className = _a.className, icon = _a.icon, iconSize = _a.iconSize, type = _a.type;
-    return (<>
-        <button className={"flex items-center ".concat(shape, " ").concat(type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant, "  ").concat(className, " ").concat(contentType === contentTypeEnum.icon_only ? "icon-only ".concat(size) : size)} onClick={onClick}>
-            {contentType === contentTypeEnum.none && label}
-            {contentType === contentTypeEnum.icon_only && icon && (<LUIcon size={iconSize} icon={icon} fill={type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant}/>)}
-            {contentType === contentTypeEnum.text_with_icon && (<>
-                    {iconLeft && iconLeft !== 'none' && (<LUIcon size={leftIconSize} icon={iconLeft} fill={type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant} className="lu-mr-100"/>)}
-                    {label}
-                    {iconRight && iconRight !== 'none' && (<LUIcon size={rightIconSize} icon={iconRight} fill={type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant} className="lu-ml-100"/>)}
-                </>)}
-        </button>
-    </>);
-};

package/dist/components/Button/Button.stories.jsx

@@ -1,109 +0,0 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { Button } from "./Button";
-import { borderRadiusList, buttonColorsList, buttonIconSizeList, buttonWithIconList, butttonSizeList } from "../../utils";
-import { iconList } from "../../utils/iconList";
-import { buttonTypeEnum, contentTypeEnum } from "../../utils/enum";
-export default {
-    title: "Components/Button",
-    component: Button,
-    tags: ['autodocs'],
-};
-var Template = function (args) { return <Button {...args}/>; };
-export var button = Template.bind({});
-button.args = {
-    contentType: contentTypeEnum.none,
-    variant: 'lu-btn-primary',
-    label: 'Button Text',
-    onClick: function () { return alert('Button Clicked'); },
-    shape: 'lu-border-rounded-sm',
-    size: 'lu-btn-md',
-    iconLeft: 'chart-simple',
-    leftIconSize: 'lu-icon-small',
-    icon: 'chart-simple',
-    iconSize: 'lu-icon-small',
-    type: buttonTypeEnum.fill,
-};
-button.argTypes = {
-    contentType: {
-        control: { type: "select" },
-        options: [contentTypeEnum.none, contentTypeEnum.text_with_icon, contentTypeEnum.icon_only],
-        description: "Determines the content of the button",
-    },
-    label: {
-        control: { type: "text" },
-        description: "Button label text",
-        if: { arg: "contentType", neq: contentTypeEnum.icon_only },
-    },
-    variant: {
-        control: { type: "select", labels: Object.fromEntries(buttonColorsList.map(function (btnColor) { return [btnColor.key, btnColor.label]; })) },
-        options: buttonColorsList.map(function (btnColor) { return btnColor.key; }),
-    },
-    iconLeft: {
-        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
-        options: __spreadArray(["none"], iconList.map(function (icon) { return icon.key; }), true),
-        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
-    },
-    iconRight: {
-        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
-        options: __spreadArray(["none"], iconList.map(function (icon) { return icon.key; }), true),
-        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
-    },
-    shape: {
-        control: { type: "select", labels: Object.fromEntries(borderRadiusList.map(function (borderRadius) { return [borderRadius.key, borderRadius.label]; })) },
-        options: borderRadiusList.map(function (borderRadius) { return borderRadius.key; }),
-    },
-    size: {
-        control: { type: "select", labels: Object.fromEntries(butttonSizeList.map(function (size) { return [size.key, size.label]; })) },
-        options: butttonSizeList.map(function (size) { return size.key; }),
-        description: "Select the size of the button",
-        update: function (args) {
-            var isIconOnly = args.contentType === contentTypeEnum.icon_only;
-            // Dynamically update options and labels based on contentType
-            return {
-                options: isIconOnly
-                    ? buttonWithIconList.map(function (size) { return size.key; })
-                    : butttonSizeList.map(function (size) { return size.key; }),
-                control: {
-                    type: "select",
-                    labels: Object.fromEntries((isIconOnly ? buttonWithIconList : butttonSizeList).map(function (size) { return [
-                        size.key,
-                        size.label,
-                    ]; })),
-                },
-            };
-        },
-    },
-    leftIconSize: {
-        control: { type: "select", labels: Object.fromEntries(buttonIconSizeList.map(function (size) { return [size.key, size.label]; })) },
-        options: buttonIconSizeList.map(function (size) { return size.key; }),
-        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
-    },
-    rightIconSize: {
-        control: { type: "select", labels: Object.fromEntries(buttonIconSizeList.map(function (size) { return [size.key, size.label]; })) },
-        options: buttonIconSizeList.map(function (size) { return size.key; }),
-        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
-    },
-    icon: {
-        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
-        options: iconList.map(function (icon) { return icon.key; }),
-        if: { arg: "contentType", eq: contentTypeEnum.icon_only },
-    },
-    iconSize: {
-        control: { type: "select", labels: Object.fromEntries(buttonIconSizeList.map(function (size) { return [size.key, size.label]; })) },
-        options: buttonIconSizeList.map(function (size) { return size.key; }),
-        if: { arg: "contentType", eq: contentTypeEnum.icon_only },
-    },
-    type: {
-        control: { type: "select" },
-        options: [buttonTypeEnum.fill, buttonTypeEnum.outline],
-        description: "Determines the type of the button",
-    },
-};