@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Hero/Hero.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../dist/main.css";
+import { render, screen } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+import Hero from "./Hero";
+import Text from "../Text/Text";
+describe("<Hero /> with color background", () => {
+    beforeEach(() => {
+        render(_jsx(Hero, { textAlignment: "center", background: "color", text: _jsx(Text, { size: "xl", color: "primary", fontFamily: "serif", text: "This is a test heading!", tag: "h2" }) }));
+    });
+    test("renders Text component", () => {
+        expect(screen.getByTestId("hero")).toBeInTheDocument();
+    });
+    test("contains correct text from Text component", () => {
+        expect(screen.getByTestId("hero")).toHaveTextContent("This is a test heading!");
+    });
+    test("renders correct background color class", () => {
+        const heroElement = screen.getByTestId("hero");
+        expect(heroElement).toHaveClass("bg-blue-800");
+    });
+    test("renders correct position of Text component", () => {
+        const heroElement = screen.getByTestId("hero");
+        expect(heroElement).toHaveClass("justify-center");
+    });
+    test("renders Text component as correct heading type", () => {
+        const textComponent = screen.getByRole("heading", {
+            name: "This is a test heading!",
+            level: 2,
+        });
+        expect(textComponent).toBeInTheDocument();
+        expect(textComponent.tagName).toBe("H2");
+    });
+});
+describe("<Hero /> with Image background", () => {
+    beforeEach(() => {
+        render(_jsx(Hero, { textAlignment: "center", background: "image", text: _jsx(Text, { size: "xl", color: "primary", fontFamily: "serif", text: "This is a test heading!", tag: "h1" }) }));
+    });
+    test("renders hero image component", () => {
+        expect(screen.getByTestId("image-background-hero")).toBeInTheDocument();
+    });
+    test("contains correct text from Text component", () => {
+        expect(screen.getByTestId("image-background-hero")).toHaveTextContent("This is a test heading!");
+    });
+    test("renders correct background image", () => {
+        const heroImageElement = screen.getByTestId("image-background-hero");
+        expect(heroImageElement.style.backgroundImage).toContain("heroImage.png");
+    });
+    // FIXME:
+    // test("renders correct background image alt text", () => {
+    // 	expect(screen.getByTestId("image-background-hero")).toHaveAttribute(
+    // 		"aria-label",
+    // 		""
+    // 	);
+    // });
+    test("renders correct position of Text component", () => {
+        const heroElement = screen.getByTestId("image-background-hero");
+        expect(heroElement).toHaveClass("justify-center");
+    });
+    test("renders correct element type of Text component", () => {
+        expect(screen.getByRole("heading", { name: "This is a test heading!" })).toBeInTheDocument();
+    });
+});

package/dist/components/Hero/Hero.types.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface HeroTypes {
+    src?: string;
+    background?: string;
+    text?: React.ReactNode;
+    textAlignment: "left" | "right" | "center";
+    textVerticalAxis?: "items-start" | "items-end" | "items-center";
+}

package/dist/components/Hero/Hero.types.js

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

package/dist/components/Hero/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Hero";
+export * from "./Hero.types";

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IconButtonTypes } from "./IconButton.types";
+declare const Icon: React.FC<IconButtonTypes>;
+export default Icon;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from "../Text/Text";
+const Icon = ({ onClick = () => { }, role, icon, iconSize, iconColor, hasNotification, notificationTextClasses, notificationBgColor, notificationCount, text, textSize, textColor, textFontFamily, textClasses, textContainerClasses, hoverBorderColor, hoverBackgroundColor, backgroundColor, borderColor, additionalContainerClasses, }) => {
+    const displayNotificationCount = notificationCount && notificationCount > 99 ? "99+" : notificationCount;
+    const notificationClasses = `absolute -top-1 h-18px rounded-full text-11px font-semibold leading-[18px] flex items-center justify-center ${notificationTextClasses} ${notificationBgColor} ${notificationCount && notificationCount > 99
+        ? "w-26px -right-4 "
+        : "w-18px -right-2 "}`;
+    const iconClasses = `flex items-center justify-center ${iconSize} ${iconColor}`;
+    const iconContainerClasses = `relative flex items-center justify-center h-42px w-42px rounded-full border-1 ${borderColor} ${backgroundColor} group-hover:${hoverBorderColor} group-hover:${hoverBackgroundColor}`;
+    const ariaLabel = `${text} ${hasNotification ? `with ${notificationCount} notifications` : ""}`;
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            onClick(e);
+        }
+    };
+    return (_jsxs("div", { className: `flex flex-col items-center justify-center group ${additionalContainerClasses}`, onClick: (e) => onClick(e), role: role, tabIndex: 0, onKeyDown: (e) => handleKeyDown(e), "aria-label": ariaLabel, children: [_jsxs("div", { className: iconContainerClasses, children: [_jsx("div", { className: iconClasses, children: icon }), hasNotification && notificationCount && (_jsx("span", { className: notificationClasses, children: displayNotificationCount }))] }), _jsx("div", { "aria-hidden": true, className: textContainerClasses, children: _jsx(Text, { size: textSize, color: textColor, fontFamily: textFontFamily, text: text, tag: "p", additionalClasses: textClasses }) })] }));
+};
+export default Icon;

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

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const AdminButton: any;
+export declare const AccountButton: any;
+export declare const AlertsButton: any;
+export declare const CartButton: any;

package/dist/components/IconButton/IconButton.stories.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import IconButton from "./IconButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+export default {
+    title: "Components/IconButton",
+    component: IconButton,
+    argTypes: {
+        iconSize: {
+            control: "none",
+            description: "Tailwind classes for the icon size. Example: `h-6 w-6`",
+        },
+        iconColor: {
+            control: "none",
+            description: "Tailwind classes for the icon color. Example: `text-blue-500`",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "Tailwind classes for the background color. Example: `bg-gray-200`",
+        },
+        borderColor: {
+            control: "none",
+            description: "Tailwind classes for the border color. Example: `border-gray-300`",
+        },
+        iconLabel: {
+            control: "none",
+            description: "The label for the icon. Example: `Profile`",
+        },
+        icon: {
+            control: "none",
+            description: "The icon to be displayed. Example: `user-cog`",
+        },
+        size: {
+            control: "none",
+            description: "The size of the icon. Example: `xl`",
+        },
+        iconBorder: {
+            control: "none",
+            description: "Tailwind classes for the icon border. Example: `border-2`",
+        },
+        to: {
+            control: "none",
+            description: "The URL to redirect to when the icon is clicked. Example: `/admin`",
+        },
+        href: {
+            control: "none",
+            description: "The URL to redirect to when the icon is clicked. Example: `/admin`",
+        },
+        hoverBorderColor: {
+            control: "none",
+            description: "Tailwind classes for the border color on hover. Example: `hover:border-blue-500`",
+        },
+        hoverColor: {
+            control: "none",
+            description: "Tailwind classes for the color on hover. Example: `hover:text-blue-500`",
+        },
+        indicatorSize: {
+            control: "none",
+            description: "Tailwind classes for the indicator size. Example: `h-4 w-4`",
+        },
+        indicatorNumber: {
+            control: "none",
+            description: "The number to be displayed inside the indicator. Example: `12`",
+        },
+        hoverBorder: {
+            control: "none",
+            description: "Tailwind classes for the border on hover. Example: `hover:border-2`",
+        },
+        limitCharacters: {
+            control: "none",
+            description: "Flag to indicate if the text should be limited to 2 characters. If set to true and the text is greater than 99, the text will display '99+'.",
+        },
+        hoverBackgroundColor: {
+            control: "none",
+            description: "Tailwind classes for the background on hover. Example: `hover:bg-gray-300`",
+        },
+        hoverBackground: {
+            control: "none",
+            description: "Tailwind classes for the background color on hover. Example: `hover:bg-gray-300`",
+        },
+        hasNotification: {
+            control: "none",
+            description: "Flag to indicate if the button has a notification badge.",
+        },
+        notificationTextColor: {
+            control: "none",
+            description: "Tailwind classes for the notification text color. Example: `text-white`",
+        },
+        notificationBgColor: {
+            control: "none",
+            description: "Tailwind classes for the notification background color. Example: `bg-red-500`",
+        },
+        notificationCount: {
+            control: "none",
+            description: "The number to be displayed inside the notification badge. Example: `12`",
+        },
+        text: {
+            control: "none",
+            description: "The text to be displayed below the button. Example: `Profile`",
+        },
+        textClasses: {
+            control: "none",
+            description: "Tailwind classes to style the text. Example: `text-sm text-black`",
+        },
+        onClick: {
+            table: {
+                disable: true,
+            },
+            control: "none",
+            description: "Callback function to handle click events. Example: `() => alert('Clicked!')`",
+        },
+        role: {
+            control: "none",
+            description: "ARIA role for accessibility. Example: `button`",
+        },
+        additionalContainerClasses: {
+            control: "none",
+            description: "Additional Tailwind classes for the container. Example: `p-4`",
+        },
+        limitIndicator: {
+            control: "none",
+            description: "Whether the indicator number should be limited to 2 characters. If set to true and the number is greater than 99, the indicator will display '99+'.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(IconButton, { ...args });
+export const AdminButton = Template.bind({});
+AdminButton.args = {
+    iconColor: "text-black",
+    text: "Admin",
+    backgroundColor: "bg-gray-200",
+    iconSize: "h-8 w-8",
+    icon: getFontAwesomeIcon("cog"),
+    hoverBackgroundColor: "hover:bg-gray-300",
+    hoverBorderColor: "hover:border-black",
+    notificationCount: 0,
+    textClasses: "text-black font-serif text-md",
+    onClick: () => alert("Redirect to admin"),
+};
+export const AccountButton = Template.bind({});
+AccountButton.args = {
+    iconColor: "text-black",
+    text: "Account",
+    backgroundColor: "bg-gray-200",
+    iconSize: "h-8 w-8",
+    icon: getFontAwesomeIcon("user"),
+    hoverBackgroundColor: "hover:bg-gray-300",
+    hoverBorderColor: "hover:border-black",
+    notificationCount: 0,
+    textClasses: "text-black font-serif text-md",
+    onClick: () => alert("Redirect to account"),
+};
+export const AlertsButton = Template.bind({});
+AlertsButton.args = {
+    iconColor: "text-black",
+    text: "Alerts",
+    backgroundColor: "bg-gray-200",
+    iconSize: "h-8 w-8",
+    icon: getFontAwesomeIcon("bell"),
+    hoverBackgroundColor: "hover:bg-gray-300",
+    hoverBorderColor: "hover:border-black",
+    hasNotification: true,
+    notificationTextClasses: "text-white",
+    notificationBgColor: "bg-green-600",
+    notificationCount: 123,
+    textClasses: "text-black font-serif text-md",
+    onClick: () => alert("Redirect to alerts"),
+};
+export const CartButton = Template.bind({});
+CartButton.args = {
+    iconColor: "text-black",
+    text: "Cart",
+    backgroundColor: "bg-gray-200",
+    iconSize: "h-8 w-8",
+    icon: getFontAwesomeIcon("shop"),
+    hoverBackgroundColor: "hover:bg-gray-300",
+    hoverBorderColor: "hover:border-black",
+    hasNotification: true,
+    notificationTextClasses: "text-white",
+    notificationBgColor: "bg-green-600",
+    notificationCount: 3,
+    textClasses: "text-black font-serif text-md",
+    onClick: () => alert("Redirect to cart"),
+};

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

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

package/dist/components/IconButton/IconButton.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Icon from "./IconButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+describe("<Icon /> Profile", () => {
+    beforeEach(() => {
+        render(_jsx(Icon, { iconLabel: "Profile", iconColor: "green", icon: getFontAwesomeIcon("user"), text: "" }));
+    });
+    test("renders correctly", () => {
+        expect(screen.getByTestId("icon")).toBeInTheDocument();
+    });
+    test("has correct text", () => {
+        expect(screen.getByTestId("text")).toHaveTextContent("Profile");
+    });
+    test("has correct icon", () => {
+        expect(screen.getByTestId("user")).toBeInTheDocument();
+    });
+    // The following style-based tests may need to be adapted depending on how styles are applied in your test environment
+    test("has correct color", () => {
+        const iconElement = screen.getByTestId("icon");
+        expect(iconElement).toHaveClass("text-teal-800");
+    });
+    test("has correct icon size", () => {
+        const iconElement = screen.getByTestId("user");
+        expect(iconElement).toHaveClass("text-md");
+    });
+});

package/dist/components/IconButton/IconButton.types.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+export interface IconButtonTypes {
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    role?: string;
+    icon: ReactNode;
+    iconSize?: string;
+    iconColor?: string;
+    hasNotification?: boolean;
+    notificationTextClasses?: string;
+    notificationBgColor?: string;
+    notificationCount?: number;
+    text?: string;
+    textSize?: string;
+    textColor?: string;
+    textFontFamily?: string;
+    textClasses?: string;
+    hoverBorderColor?: string;
+    hoverBackgroundColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    additionalContainerClasses?: string;
+    textContainerClasses?: string;
+    iconLabel?: string;
+    iconBorder?: string;
+    indicatorNumber?: string;
+    indicatorSize?: string;
+}

package/dist/components/IconButton/IconButton.types.js

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

package/dist/components/IconButton/index.js

@@ -0,0 +1,2 @@
+export { default } from "./IconButton";
+export * from "./IconButton.types";

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ImageTypes } from "./Image.types";
+declare const Image: React.FC<ImageTypes>;
+export default Image;

package/dist/components/Image/Image.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import heroImage from "../../../assets/heroImage.png";
+import imageNotFound from "../../../assets/placeholder-no-image-available.png";
+const Image = ({ src = heroImage, alt = "", background = true, additionalClasses = "", children, textAlignment = "text-left", }) => {
+    const effectiveSrc = typeof src === "string" ? src : imageNotFound;
+    const effectiveAlt = effectiveSrc === imageNotFound ? "Image not found." : alt;
+    let heroImg = {
+        backgroundImage: `url(${effectiveSrc})`,
+    };
+    const defaultBgClasses = `bg-no-repeat bg-cover w-full min-h-72 p-4 flex ${textAlignment}`;
+    if (background) {
+        return (_jsx("div", { role: effectiveAlt ? "img" : undefined, "data-testid": "image-background-hero", "aria-label": effectiveAlt || undefined, className: `${defaultBgClasses} ${additionalClasses}`, style: heroImg, children: Children.map(children, (child) => child) }));
+    }
+    else {
+        return (_jsx("img", { src: effectiveSrc, alt: effectiveAlt, className: additionalClasses, "data-testid": "image" }));
+    }
+};
+export default Image;

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

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/react";
+import { ImageTypes } from ".";
+interface ImageStoryProps extends ImageTypes {
+    src: string | null;
+    alt: string;
+    background?: boolean;
+    additionalClasses?: string;
+}
+declare const _default: Meta<ImageStoryProps>;
+export default _default;
+export declare const DefaultImage: any;
+export declare const BackgroundDecorativeImage: any;
+export declare const BackgroundImage: any;
+export declare const ImageNotFound: any;

package/dist/components/Image/Image.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from ".";
+export default {
+    title: "Components/Image",
+    argTypes: {
+        src: {
+            control: {
+                disable: true,
+            },
+            description: "Image source path. If no image is found, a placeholder image will be displayed.",
+        },
+        alt: {
+            control: {
+                type: "text",
+            },
+            description: "Image description provided to screen reader users or label for decorative images (indicated by empty alt text).",
+        },
+        background: {
+            control: {
+                disable: true,
+            },
+            description: "Whether the image is displayed as a background image or not.",
+        },
+        additionalClasses: {
+            control: {
+                type: "text",
+            },
+            table: {
+                disable: true,
+            },
+        },
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ["autodocs"],
+};
+const Template = (args) => _jsx(Image, { ...args });
+export const DefaultImage = Template.bind({});
+DefaultImage.args = {
+    src: "../../../assets/green-laptop.png",
+    alt: "Image of grey laptop open with a green decorative image displayed on screen.",
+    background: false,
+    additionalClasses: "",
+};
+export const BackgroundDecorativeImage = Template.bind({});
+BackgroundDecorativeImage.args = {
+    src: "../../../assets/heroImage.png",
+    alt: "",
+    background: true,
+    additionalClasses: "min-w-full",
+};
+export const BackgroundImage = Template.bind({});
+BackgroundImage.args = {
+    src: "../../../assets/team.png",
+    alt: "Image of five people working in office setting.",
+    background: true,
+    additionalClasses: "min-w-full",
+};
+export const ImageNotFound = Template.bind({});
+ImageNotFound.args = {
+    src: null,
+    alt: "",
+    background: false,
+};

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

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

package/dist/components/Image/Image.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Image from "./Image";
+describe("<Image /> display image", () => {
+    beforeEach(() => {
+        render(_jsx(Image, { src: "../../../assets/green-laptop.png", alt: "Image of grey laptop open with a green decorative image displayed on screen.", background: false, additionalClasses: "" }));
+    });
+    test("renders Image component", () => {
+        expect(screen.getByTestId("image")).toBeInTheDocument();
+    });
+    test("contain correct alt text for image", () => {
+        expect(screen.getByTestId("image")).toHaveAttribute("alt", "Image of grey laptop open with a green decorative image displayed on screen.");
+    });
+});
+describe("<Image /> display decorative background image", () => {
+    beforeEach(() => {
+        render(_jsx(Image, { src: "../../../assets/heroImage.png", alt: "", background: true, additionalClasses: "" }));
+    });
+    test("renders Image component", () => {
+        expect(screen.getByTestId("image-background-hero")).toBeInTheDocument();
+    });
+    test("renders correct background image", () => {
+        // This test might need to be adjusted based on how the background image is applied
+        const backgroundImageElement = screen.getByTestId("image-background-hero");
+        expect(backgroundImageElement).toHaveStyle(`background-image: url(../../../assets/heroImage.png)`);
+    });
+    // FIXME:
+    // test("contain correct aria label for decorative background image", () => {
+    // 	expect(screen.getByTestId("image-background-hero")).toHaveAttribute(
+    // 		"aria-label",
+    // 		""
+    // 	);
+    // });
+});
+describe("<Image /> display background image", () => {
+    beforeEach(() => {
+        render(_jsx(Image, { src: "../../../assets/team.png", alt: "Image of five people working in office setting.", background: true, additionalClasses: "" }));
+    });
+    test("renders Image component", () => {
+        expect(screen.getByTestId("image-background-hero")).toBeInTheDocument();
+    });
+    test("renders correct background image", () => {
+        const backgroundImageElement = screen.getByTestId("image-background-hero");
+        expect(backgroundImageElement).toHaveStyle(`background-image: url(../../../assets/team.png)`);
+    });
+});

package/dist/components/Image/Image.types.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+export interface ImageTypes {
+    src: string | null;
+    alt: string;
+    background?: boolean;
+    additionalClasses?: string;
+    children?: ReactNode;
+    textAlignment?: "justify-start" | "justify-end" | "justify-center";
+    renderChildren?: (props: {
+        textPosition: string;
+    }) => React.ReactNode;
+}

package/dist/components/Image/Image.types.js

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

package/dist/components/Image/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Image";
+export * from "./Image.types";

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { InputTypes } from ".";
+declare const Input: React.FC<InputTypes>;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import FormButton from "../FormButton/FormButton";
+import { validateInput } from "../../utils/inputValidation";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const Input = ({ 
+// FUNCTIONALITY
+hasValidation = false, errorMessage, regex, setControlledState, controlledState, 
+// LABEL
+label, labelVisible = true, labelPlacement = "block", 
+// INPUT DETAILS
+inputName, inputType, 
+// PLACEHOLDER
+hasPlaceholder = true, placeholder, 
+// ICONS
+hasLeftIcon, hasRightIcon, leftIcon, rightIcon, iconColor = "text-gray-500", iconBackgroundColor = "bg-transparent", 
+// INPUT STYLES
+inputTextSize = "text-base", inputShape = "rounded-md", borderColor = "border-gray-300", backgroundColor = "bg-white", inputWidth = "w-full", errorBorder = "border-red-500", successBorder = "border-green-500", 
+// BUTTON
+hasButton, button = (_jsx(FormButton, { text: "Submit", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-red-500", icon: getFontAwesomeIcon("arrow-right"), borderColor: "border-green-500", hoverFontColor: "hover:text-black", shape: "rounded-none", additionalClasses: "h-full" })), }) => {
+    const [isValid, setIsValid] = useState("");
+    const [termInternal, setTermInternal] = useState("");
+    const [inputBorderClasses, setInputBorderClasses] = useState(borderColor);
+    const inputValue = termInternal || controlledState || "";
+    const setTerm = setControlledState || setTermInternal;
+    const handleBorderStyles = () => {
+        if (isValid !== "Success" && isValid !== "") {
+            setInputBorderClasses(errorBorder);
+        }
+        else if (isValid === "Success") {
+            setInputBorderClasses(successBorder);
+        }
+        else if (isValid === "") {
+            setInputBorderClasses(borderColor);
+        }
+    };
+    const handleChange = (e) => {
+        setTerm(e.target.value);
+        if (hasValidation) {
+            let validation = validateInput &&
+                regex &&
+                errorMessage &&
+                validateInput(inputValue, regex, errorMessage);
+            setIsValid(validation || "");
+            handleBorderStyles();
+        }
+    };
+    return (_jsxs("div", { className: `${labelPlacement} w-full`, "data-testid": "input-container", children: [_jsx("label", { htmlFor: inputName, className: `${labelVisible ? "block" : "hidden"} pb-1 pl-1`, "data-testid": "input-label", children: label }), hasButton ? (_jsxs("div", { className: `relative ${inputWidth} flex`, children: [_jsxs("div", { className: "flex-1 relative", children: [hasLeftIcon && (_jsx("div", { className: `absolute bottom-1 left-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`, children: leftIcon })), _jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, onChange: handleChange, value: inputValue, "data-testid": "input-element", className: `block w-full border-2 p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputBorderClasses} ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}` })] }), hasButton && (_jsx("div", { className: `flex items-center justify-center ${inputShape} h-full`, "data-testid": "submit-button", children: button }))] })) : (_jsxs("div", { className: `relative ${inputWidth} flex`, children: [hasLeftIcon && (_jsx("div", { className: `absolute top-1 left-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`, children: leftIcon })), _jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, onChange: handleChange, value: inputValue, "data-testid": "input-element", className: `block w-full border-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputBorderClasses} ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}` }), hasRightIcon && (_jsx("div", { className: `absolute top-1 right-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`, children: rightIcon }))] }))] }));
+};
+Input.displayName = "Memo(Input)";
+export default Input;

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

@@ -0,0 +1,13 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const NoIcons: any;
+export declare const LeftIcon: any;
+export declare const RightIcon: any;
+export declare const DualIcons: any;
+export declare const ButtonWithValidation: any;
+export declare const ButtonWithLeftIcon: any;
+export declare const DateInput: any;
+export declare const EmailInput: any;
+export declare const NumberInput: any;
+export declare const RangeInput: any;