linkedunion-design-kit 1.5.0 → 1.5.2

package/dist/.next/types/app/page.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 // File: /Users/avialdosolutions/linkedunion-design-kit/linkedunion-design-kit/app/page.tsx
 var entry = __importStar(require("../../../app/page.js"));

package/dist/components/Avatar/Avatar.js

@@ -10,6 +10,6 @@ var utils_1 = require("../../utils");
 var Avatar = function (_a) {
     var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, shape = _a.shape, size = _a.size, className = _a.className;
     var defaultIcon = iconList_1.iconList.find(function (item) { return item.key === (icon || "user"); });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "".concat(image ? "lu-bg-primary-200" : "lu-bg-gray-100", " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: (0, utils_1.avtarBackgroundSize)(size), "data-testid": "lu-avatar", children: image ? ((0, jsx_runtime_1.jsx)("img", { src: image, alt: "image", className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: size, icon: defaultIcon === null || defaultIcon === void 0 ? void 0 : defaultIcon.key, fill: "lu-neutral-icon-dark", className: "" })) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "".concat(image ? "lu-bg-primary-200" : "lu-bg-gray-100", " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: (0, utils_1.avatarBackgroundSize)(size), "data-testid": "lu-avatar", children: image ? ((0, jsx_runtime_1.jsx)("img", { src: image, alt: "image", className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: size, icon: defaultIcon === null || defaultIcon === void 0 ? void 0 : defaultIcon.key, fill: "lu-neutral-icon-dark", className: "" })) }) }));
 };
 exports.default = Avatar;

package/dist/components/Avatar/Avatar.stories.d.ts

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

package/dist/components/Avatar/Avatar.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.avatar = void 0;
+exports._Avatar = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var utils_1 = require("../../utils");
 var Avatar_1 = __importDefault(require("./Avatar"));
@@ -23,15 +23,15 @@ exports.default = {
     component: Avatar_1.default,
 };
 var Template = function (args) { return (0, jsx_runtime_1.jsx)(Avatar_1.default, __assign({}, args)); };
-exports.avatar = Template.bind({});
-exports.avatar.args = {
+exports._Avatar = Template.bind({});
+exports._Avatar.args = {
     image: "/images/avatar.png",
     shape: "square",
     size: "lu-avatar-massive",
     className: "",
     icon: "user",
 };
-exports.avatar.argTypes = {
+exports._Avatar.argTypes = {
     shape: {
         control: {
             type: "select",

package/dist/components/Avatar/Avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/Avatar.test.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var Avatar_1 = __importDefault(require("./Avatar"));
+jest.mock("../Icons/LUIcon", function () { return ({
+    __esModule: true,
+    default: jest.fn(function () { return (0, jsx_runtime_1.jsx)("div", { "data-testid": "mock-luIcon", children: "user" }); }),
+}); });
+describe("Avatar Component", function () {
+    it("renders an image when image prop is provided", function () {
+        var testImage = "/images/avatar.png";
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, { image: testImage }));
+        var img = react_1.screen.getByRole("img");
+        expect(img).toHaveAttribute("src", testImage);
+        expect(img).toHaveAttribute("alt", "image");
+    });
+    it("renders default icon when no image is provided", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, {}));
+        var iconDiv = react_1.screen.getByTestId("mock-luIcon");
+        expect(iconDiv.textContent).toBe("user");
+    });
+    it("renders with default icon when no icon prop is provided and no image is present", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, {}));
+        var icon = react_1.screen.getByTestId("mock-luIcon");
+        expect(icon.textContent).toBe("user");
+    });
+    it("renders default icon when provided icon does not exist in the list", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, { icon: "" }));
+        var icon = react_1.screen.getByTestId("mock-luIcon");
+        expect(icon.textContent).toBe("user"); // Assuming 'user' is the fallback when the icon is not found
+    });
+    it("renders default icon when no icon and no image are provided", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, {}));
+        var icon = react_1.screen.getByTestId("mock-luIcon");
+        expect(icon).toBeInTheDocument(); // Ensure the icon is in the document
+        expect(icon.textContent).toBe("user"); // Check that the default icon is 'user'
+    });
+    it("applies both shape and size props to class when provided", function () {
+        var shape = "square";
+        var size = "lu-avatar-massive";
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, { shape: shape, size: size }));
+        var avatarDiv = react_1.screen.getByTestId("lu-avatar");
+        // Check if the shape is part of the class
+        expect(avatarDiv.className).toContain(shape);
+        // Check for the correct style application
+        var styles = window.getComputedStyle(avatarDiv);
+        expect(styles.width).toBe("200px");
+        expect(styles.height).toBe("200px");
+    });
+});

package/dist/components/Border/BorderRadius/BorderRadius.stories.d.ts

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

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

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.borderRadius = void 0;
+exports._BorderRadius = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var BorderRadius_1 = require("./BorderRadius");
 var utils_1 = require("../../../utils");
@@ -20,11 +20,11 @@ exports.default = {
     component: BorderRadius_1.BorderRadius,
 };
 var Template = function (args) { return (0, jsx_runtime_1.jsx)(BorderRadius_1.BorderRadius, __assign({}, args)); };
-exports.borderRadius = Template.bind({});
-exports.borderRadius.args = {
+exports._BorderRadius = Template.bind({});
+exports._BorderRadius.args = {
     borderRadius: "lu-border-rounded-xs",
 };
-exports.borderRadius.argTypes = {
+exports._BorderRadius.argTypes = {
     borderRadius: {
         control: {
             type: "select",

package/dist/components/Border/BorderRadius/BorderRadius.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Border/BorderRadius/BorderRadius.test.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var BorderRadius_1 = require("./BorderRadius");
+describe("BorderRadius Component", function () {
+    it("renders BorderRadius component with table and border radius view", function () {
+        var borderRadius = "lu-border-rounded-xs"; // Example border radius token
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BorderRadius_1.BorderRadius, { borderRadius: borderRadius }));
+        // Check if the main title 'Border Radius' is displayed
+        expect(react_1.screen.getByText("Border Radius")).toBeInTheDocument();
+        // Verify the BorderRadiusTable renders correctly
+        expect(react_1.screen.getByText("Alias Token Name")).toBeInTheDocument();
+        expect(react_1.screen.getByText("Base unit Multiplier of 8")).toBeInTheDocument();
+        expect(react_1.screen.getByText("Value(PX)(REM)")).toBeInTheDocument();
+        // Verify the 'lu-border-rounded-md' row data is in the table
+        expect(react_1.screen.getByText("lu-border-rounded-md")).toBeInTheDocument();
+        expect(react_1.screen.getByText("0.75x")).toBeInTheDocument();
+        expect(react_1.screen.getByText("6px = 0.375rem")).toBeInTheDocument();
+        // Check if BorderRadiusView is rendered with the correct border radius class
+        var borderRadiusElement = react_1.screen.getByTestId("border-radius");
+        expect(borderRadiusElement).toHaveClass("lu-border-rounded-xs");
+        expect(borderRadiusElement).toHaveClass("border-primary-600");
+    });
+});

package/dist/components/Border/BorderWidth/BorderWidth.stories.d.ts

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

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

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.borderWidth = void 0;
+exports._BorderWidth = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var BorderWidth_1 = require("./BorderWidth");
 var utils_1 = require("../../../utils");
@@ -20,11 +20,11 @@ exports.default = {
     component: BorderWidth_1.BorderWidth,
 };
 var Template = function (args) { return (0, jsx_runtime_1.jsx)(BorderWidth_1.BorderWidth, __assign({}, args)); };
-exports.borderWidth = Template.bind({});
-exports.borderWidth.args = {
+exports._BorderWidth = Template.bind({});
+exports._BorderWidth.args = {
     border: "lu-border-width-125",
 };
-exports.borderWidth.argTypes = {
+exports._BorderWidth.argTypes = {
     border: {
         control: {
             type: "select",

package/dist/components/Border/BorderWidth/BorderWidth.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Border/BorderWidth/BorderWidth.test.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var BorderWidth_1 = require("./BorderWidth");
+describe("BorderWidth Component", function () {
+    it("renders BorderWidth component with table and border width view", function () {
+        var border = "lu-border-width-125";
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BorderWidth_1.BorderWidth, { border: border }));
+        // Check if the main title 'Border Width' is displayed
+        expect(react_1.screen.getByText("Border Width")).toBeInTheDocument();
+        // Verify the Border Radius Table renders correctly
+        expect(react_1.screen.getByText("Alias Token Name")).toBeInTheDocument();
+        expect(react_1.screen.getByText("Base unit Multiplier of 8")).toBeInTheDocument();
+        expect(react_1.screen.getByText("Value(PX)(REM)")).toBeInTheDocument();
+        // Verify the 'lu-border-width-125' row data is in the table
+        expect(react_1.screen.getByText("lu-border-width-100")).toBeInTheDocument();
+        expect(react_1.screen.getByText("1x")).toBeInTheDocument();
+        expect(react_1.screen.getByText("8px = 0.5rem")).toBeInTheDocument();
+        // Check if BorderRadiusView is rendered with the correct border width class
+        var borderRadiusElement = react_1.screen.getByTestId("border-width");
+        expect(borderRadiusElement).toHaveClass("lu-border-width-125");
+        expect(borderRadiusElement).toHaveClass("border-primary-600");
+    });
+});

package/dist/components/Button/Button.js

@@ -7,14 +7,14 @@ exports.Button = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var LUIcon_1 = __importDefault(require("../Icons/LUIcon"));
 var enums_1 = require("../../utils/enums");
-var _1 = require(".");
+var index_1 = require("./index");
 var Button = function (_a) {
-    var _b = _a.contentType, contentType = _b === void 0 ? enums_1.ContentType.text_with_icon : _b, _c = _a.variant, variant = _c === void 0 ? "lu-btn-primary" : _c, _d = _a.label, label = _d === void 0 ? "Button Text" : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, onClick = _a.onClick, shape = _a.shape, _e = _a.size, size = _e === void 0 ? "lu-btn-md" : _e, leftIconSize = _a.leftIconSize, rightIconSize = _a.rightIconSize, className = _a.className, icon = _a.icon, iconSize = _a.iconSize, type = _a.type;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("button", { className: "flex items-center ".concat(shape, " ").concat(type === _1.ButtonType.outline ? "outline-button ".concat(variant) : variant, "  ").concat(className, " ").concat(contentType === enums_1.ContentType.icon_only ? "icon-only ".concat(size) : size), onClick: onClick, children: [contentType === enums_1.ContentType.none && label, contentType === enums_1.ContentType.icon_only && icon && ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: iconSize, icon: icon, fill: type === _1.ButtonType.outline
+    var _b = _a.contentType, contentType = _b === void 0 ? enums_1.ContentType.text_with_icon : _b, _c = _a.variant, variant = _c === void 0 ? "lu-btn-primary" : _c, _d = _a.label, label = _d === void 0 ? "Button Text" : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, onClick = _a.onClick, shape = _a.shape, _e = _a.size, size = _e === void 0 ? "lu-btn-md" : _e, leftIconSize = _a.leftIconSize, rightIconSize = _a.rightIconSize, className = _a.className, icon = _a.icon, iconSize = _a.iconSize, _f = _a.type, type = _f === void 0 ? index_1.ButtonType === null || index_1.ButtonType === void 0 ? void 0 : index_1.ButtonType.fill : _f;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("button", { className: "flex items-center ".concat(shape, " ").concat(type === index_1.ButtonType.outline ? "outline-button ".concat(variant) : variant, "  ").concat(className, " ").concat(contentType === enums_1.ContentType.icon_only ? "icon-only ".concat(size) : size), onClick: onClick, children: [contentType === enums_1.ContentType.none && label, contentType === enums_1.ContentType.icon_only && icon && ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: iconSize, icon: icon, fill: type === index_1.ButtonType.outline
                         ? "outline-button ".concat(variant)
-                        : variant })), contentType === enums_1.ContentType.text_with_icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconLeft && iconLeft !== "none" && ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: leftIconSize, icon: iconLeft, fill: type === _1.ButtonType.outline
+                        : variant })), contentType === enums_1.ContentType.text_with_icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconLeft && iconLeft !== "none" && ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: leftIconSize, icon: iconLeft, fill: type === index_1.ButtonType.outline
                                 ? "outline-button ".concat(variant)
-                                : variant, className: "lu-mr-100" })), label, iconRight && iconRight !== "none" && ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: rightIconSize, icon: iconRight, fill: type === _1.ButtonType.outline
+                                : variant, className: "lu-mr-100" })), label, iconRight && iconRight !== "none" && ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: rightIconSize, icon: iconRight, fill: type === index_1.ButtonType.outline
                                 ? "outline-button ".concat(variant)
                                 : variant, className: "lu-ml-100" }))] }))] }) }));
 };

package/dist/components/Button/Button.stories.d.ts

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

package/dist/components/Button/Button.stories.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.button = void 0;
+exports._Button = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Button_1 = require("./Button");
 var utils_1 = require("../../utils");
@@ -33,8 +33,8 @@ exports.default = {
     tags: ["autodocs"],
 };
 var Template = function (args) { return (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, args)); };
-exports.button = Template.bind({});
-exports.button.args = {
+exports._Button = Template.bind({});
+exports._Button.args = {
     contentType: enums_1.ContentType.none,
     variant: "lu-btn-primary",
     label: "Button Text",
@@ -48,7 +48,7 @@ exports.button.args = {
     type: _1.ButtonType.fill,
     className: "",
 };
-exports.button.argTypes = {
+exports._Button.argTypes = {
     contentType: {
         control: { type: "select" },
         options: [
@@ -99,9 +99,9 @@ exports.button.argTypes = {
     size: {
         control: {
             type: "select",
-            labels: Object.fromEntries(utils_1.butttonSizeList.map(function (size) { return [size.key, size.label]; })),
+            labels: Object.fromEntries(utils_1.buttonSizeList.map(function (size) { return [size.key, size.label]; })),
         },
-        options: utils_1.butttonSizeList.map(function (size) { return size.key; }),
+        options: utils_1.buttonSizeList.map(function (size) { return size.key; }),
         description: "Select the size of the button",
         update: function (args) {
             var isIconOnly = args.contentType === enums_1.ContentType.icon_only;
@@ -109,10 +109,10 @@ exports.button.argTypes = {
             return {
                 options: isIconOnly
                     ? utils_1.buttonWithIconList.map(function (size) { return size.key; })
-                    : utils_1.butttonSizeList.map(function (size) { return size.key; }),
+                    : utils_1.buttonSizeList.map(function (size) { return size.key; }),
                 control: {
                     type: "select",
-                    labels: Object.fromEntries((isIconOnly ? utils_1.buttonWithIconList : utils_1.butttonSizeList).map(function (size) { return [
+                    labels: Object.fromEntries((isIconOnly ? utils_1.buttonWithIconList : utils_1.buttonSizeList).map(function (size) { return [
                         size.key,
                         size.label,
                     ]; })),

package/dist/components/Button/Button.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/Button/Button.test.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Button_1 = require("./Button");
+var react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var enums_1 = require("../../utils/enums");
+var index_1 = require("./index");
+describe("Button Component", function () {
+    it("renders with default props", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.Button, {}));
+        var buttonElement = react_1.screen.getByRole("button", { name: "Button Text" });
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).toHaveClass("lu-btn-primary");
+        expect(buttonElement).toHaveClass("lu-btn-md");
+    });
+    it("renders with a custom label", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Custom Button" }));
+        var buttonElement = react_1.screen.getByRole("button", { name: "Custom Button" });
+        expect(buttonElement).toBeInTheDocument();
+    });
+    it("applies additional class names", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "custom-class another-class" }));
+        var buttonElement = react_1.screen.getByRole("button", { name: "Button Text" });
+        expect(buttonElement).toHaveClass("custom-class");
+        expect(buttonElement).toHaveClass("another-class");
+    });
+    it("triggers the onClick function when clicked", function () {
+        var handleClick = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleClick }));
+        var buttonElement = react_1.screen.getByRole("button", { name: "Button Text" });
+        react_1.fireEvent.click(buttonElement);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it("renders an icon-only button", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.Button, { contentType: enums_1.ContentType.icon_only, icon: "star-icon" }));
+        var buttonElement = react_1.screen.getByRole("button");
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).toHaveTextContent(""); // Ensure it's icon-only
+    });
+    it("renders a button with left and right icons", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.Button, { contentType: enums_1.ContentType.text_with_icon, label: "Button", iconLeft: "left-icon", iconRight: "right-icon" }));
+        var buttonElement = react_1.screen.getByRole("button", { name: "Button" });
+        expect(buttonElement).toBeInTheDocument();
+        // Using test ID instead of role="img"
+        var icons = react_1.screen.getAllByTestId("lu-icon");
+        expect(icons.length).toBeGreaterThanOrEqual(2);
+    });
+    it("renders an outlined button", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Button_1.Button, { type: index_1.ButtonType.outline }));
+        var buttonElement = react_1.screen.getByRole("button", { name: "Button Text" });
+        expect(buttonElement).toHaveClass("outline-button");
+    });
+});

package/dist/components/Button/index.js

@@ -6,4 +6,3 @@ var ButtonType;
     ButtonType["fill"] = "fill";
     ButtonType["outline"] = "outline";
 })(ButtonType || (exports.ButtonType = ButtonType = {}));
-;

package/dist/components/Color/BackgroundColor/BackgroundColor.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var BackgroundColor = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundColor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var BackgroundColor = function (_a) {
     var label = _a.label, color = _a.color;
-    return (_jsxs("div", { children: [_jsx("h2", { className: "lu-font-size-large lu-font-weight-bold lu-mb-200", children: label }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded ".concat(color), "data-testid": "color-box" }), _jsxs("div", { children: [_jsx("p", { className: "lu-font-weight-semibold", children: color === null || color === void 0 ? void 0 : color.replace("bg-", "") }), _jsx("code", { className: "lu-font-size-small", children: color })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "lu-font-size-large lu-font-weight-bold lu-mb-200", children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded ".concat(color), "data-testid": "color-box" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "lu-font-weight-semibold", children: color === null || color === void 0 ? void 0 : color.replace("bg-", "") }), (0, jsx_runtime_1.jsx)("code", { className: "lu-font-size-small", children: color })] })] })] }));
 };
+exports.BackgroundColor = BackgroundColor;

package/dist/components/Color/BackgroundColor/BackgroundColor.stories.d.ts

@@ -2,9 +2,9 @@ import { Meta } from "@storybook/react";
 import { ColorProps } from "@/types/interface";
 declare const _default: Meta;
 export default _default;
-export declare const Primary: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Gray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Success: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Warning: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Danger: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Info: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Primary: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Gray: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Success: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Warning: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Danger: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
+export declare const Info: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;

package/dist/components/Color/BackgroundColor/BackgroundColor.stories.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,92 +10,94 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BackgroundColor } from "../../../components/Color/BackgroundColor/BackgroundColor";
-import { customBackgroundColor } from ".";
-export default {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Info = exports.Danger = exports.Warning = exports.Success = exports.Gray = exports.Primary = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var BackgroundColor_1 = require("../../../components/Color/BackgroundColor/BackgroundColor");
+var index_1 = require("./index");
+exports.default = {
     title: "Components/Color/BackgroundColor",
-    component: BackgroundColor,
+    component: BackgroundColor_1.BackgroundColor,
     argTypes: {
         label: { control: "text" },
     },
 };
-var Template = function (args) { return _jsx(BackgroundColor, __assign({}, args)); };
-export var Primary = Template.bind({});
-Primary.args = {
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(BackgroundColor_1.BackgroundColor, __assign({}, args)); };
+exports.Primary = Template.bind({});
+exports.Primary.args = {
     label: "Primary",
     color: "lu-bg-primary-500", // Default color
 };
-Primary.argTypes = {
+exports.Primary.argTypes = {
     color: {
         control: { type: "select" },
-        options: Object.keys(customBackgroundColor)
+        options: Object.keys(index_1.customBackgroundColor)
             .filter(function (key) { return key.startsWith(".lu-bg-primary-"); })
             .map(function (key) { return key.slice(1); }),
     },
 };
-export var Gray = Template.bind({});
-Gray.argTypes = {
+exports.Gray = Template.bind({});
+exports.Gray.argTypes = {
     color: {
         control: { type: "select" },
-        options: Object.keys(customBackgroundColor)
+        options: Object.keys(index_1.customBackgroundColor)
             .filter(function (key) { return key.startsWith(".lu-bg-neutral-"); })
             .map(function (key) { return key.slice(1); }),
     },
 };
-Gray.args = {
+exports.Gray.args = {
     label: "Gray",
     color: "lu-bg-neutral-500",
 };
-export var Success = Template.bind({});
-Success.argTypes = {
+exports.Success = Template.bind({});
+exports.Success.argTypes = {
     color: {
         control: { type: "select" },
-        options: Object.keys(customBackgroundColor)
+        options: Object.keys(index_1.customBackgroundColor)
             .filter(function (key) { return key.startsWith(".lu-bg-success-"); })
             .map(function (key) { return key.slice(1); }),
     },
 };
-Success.args = {
+exports.Success.args = {
     label: "Success",
     color: "lu-bg-success-500",
 };
-export var Warning = Template.bind({});
-Warning.argTypes = {
+exports.Warning = Template.bind({});
+exports.Warning.argTypes = {
     color: {
         control: { type: "select" },
-        options: Object.keys(customBackgroundColor)
+        options: Object.keys(index_1.customBackgroundColor)
             .filter(function (key) { return key.startsWith(".lu-bg-warning-"); })
             .map(function (key) { return key.slice(1); }),
     },
 };
-Warning.args = {
+exports.Warning.args = {
     label: "Warning",
     color: "lu-bg-warning-500",
 };
-export var Danger = Template.bind({});
-Danger.argTypes = {
+exports.Danger = Template.bind({});
+exports.Danger.argTypes = {
     color: {
         control: { type: "select" },
-        options: Object.keys(customBackgroundColor)
+        options: Object.keys(index_1.customBackgroundColor)
             .filter(function (key) { return key.startsWith(".lu-bg-danger-"); })
             .map(function (key) { return key.slice(1); }),
     },
 };
-Danger.args = {
+exports.Danger.args = {
     label: "Danger",
     color: "lu-bg-danger-500",
 };
-export var Info = Template.bind({});
-Info.argTypes = {
+exports.Info = Template.bind({});
+exports.Info.argTypes = {
     color: {
         control: { type: "select" },
-        options: Object.keys(customBackgroundColor)
+        options: Object.keys(index_1.customBackgroundColor)
             .filter(function (key) { return key.startsWith(".lu-bg-info-"); })
             .map(function (key) { return key.slice(1); }),
     },
 };
-Info.args = {
+exports.Info.args = {
     label: "Info",
     color: "lu-bg-info-500",
 };

package/dist/components/Color/BackgroundColor/BackgroundColor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Color/BackgroundColor/BackgroundColor.test.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var BackgroundColor_1 = require("./BackgroundColor");
+describe("Color Component", function () {
+    it("renders the color component with a label", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BackgroundColor_1.BackgroundColor, { label: "Primary", color: "lu-bg-primary-500" }));
+        var labelElement = react_1.screen.getByText("Primary");
+        expect(labelElement).toBeInTheDocument();
+    });
+    it("applies the correct background color", function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BackgroundColor_1.BackgroundColor, { label: "Success", color: "lu-bg-success-500" }));
+        var colorBox = react_1.screen.getByTestId("color-box");
+        expect(colorBox).toHaveClass("lu-bg-success-500");
+    });
+});

package/dist/components/Color/Color.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";