linkedunion-design-kit 1.5.2 → 1.5.3

package/dist/src/components/Icons/IconView.jsx

@@ -0,0 +1,25 @@
+import { colors } from "../../utils/colors";
+import { iconList } from "../../utils/iconList";
+export var IconView = function () {
+    return (<>
+      <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6" data-testid="icons-list">
+        {iconList.map(function (icon, index) {
+            return (<div key={index} className="flex flex-col items-center justify-center bg-neutral-100 rounded-lg p-4 shadow-md hover:bg-neutral-200" data-testid="single-icon">
+              <svg width="25" height="25" viewBox="0 0 32 32" fill="none" className="mb-2" role="img">
+                <g clipPath="url(#clip0_9168_14965)">
+                  <path data-testid={"icon-path-".concat(index)} d={icon === null || icon === void 0 ? void 0 : icon.path} fill={colors["neutral-1000"]}/>
+                </g>
+                <defs>
+                  <clipPath id="clip0_9168_14965">
+                    <rect width="32" height="32" fill="black"/>
+                  </clipPath>
+                </defs>
+              </svg>
+              <p data-testid={"icon-label-".concat(index)} className={"text-xs font-normal ".concat(colors["neutral-600"], " text-center")}>
+                {icon === null || icon === void 0 ? void 0 : icon.label}
+              </p>
+            </div>);
+        })}
+      </div>
+    </>);
+};

package/dist/{components → src/components}/Icons/IconView.stories.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,14 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._IconView = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var IconView_1 = require("./IconView");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconView } from "./IconView";
+export default {
     title: "Components/Icon",
-    component: IconView_1.IconView,
+    component: IconView,
     tags: ["!autodocs"],
 };
-var Template = function (args) { return (0, jsx_runtime_1.jsx)(IconView_1.IconView, __assign({}, args)); };
-exports._IconView = Template.bind({});
+var Template = function (args) { return _jsx(IconView, __assign({}, args)); };
+export var _IconView = Template.bind({});

package/dist/src/components/Icons/IconView.stories.jsx

@@ -0,0 +1,8 @@
+import { IconView } from "./IconView";
+export default {
+    title: "Components/Icon",
+    component: IconView,
+    tags: ["!autodocs"],
+};
+var Template = function (args) { return <IconView {...args}/>; };
+export var _IconView = Template.bind({});

package/dist/src/components/Icons/LUIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./type";
+declare const LUIcon: ({ size, icon, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default LUIcon;

package/dist/src/components/Icons/LUIcon.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconList } from "../../utils/iconList";
+import { iconSize } from ".";
+var LUIcon = function (_a) {
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? "md" : _c, icon = _a.icon, className = _a.className, props = __rest(_a, ["size", "icon", "className"]);
+    var selectedIcon = iconList.find(function (item) { return item.key === icon; });
+    return (_jsx(_Fragment, { children: _jsxs("svg", __assign({ role: "img", "data-testid": "lu-icon", className: "".concat(iconSize[size], " ").concat(className), viewBox: "0 0 32 32", fill: "currentColor" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "lu-path", d: (_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : "", className: "icon" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] })) }));
+};
+export default LUIcon;

package/dist/src/components/Icons/LUIcon.jsx

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { iconList } from "../../utils/iconList";
+import { iconSize } from ".";
+var LUIcon = function (_a) {
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? "md" : _c, icon = _a.icon, className = _a.className, props = __rest(_a, ["size", "icon", "className"]);
+    var selectedIcon = iconList.find(function (item) { return item.key === icon; });
+    return (<>
+      <svg role="img" data-testid="lu-icon" className={"".concat(iconSize[size], " ").concat(className)} viewBox="0 0 32 32" fill="currentColor" {...props}>
+        <g clipPath="url(#clip0_9168_14965)">
+          <path data-testid="lu-path" d={(_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : ""} className={"icon"}/>
+        </g>
+        <defs>
+          <clipPath id="clip0_9168_14965">
+            <rect width="32" height="32" fill="black"/>
+          </clipPath>
+        </defs>
+      </svg>
+    </>);
+};
+export default LUIcon;

package/dist/src/components/Icons/LUIcon.stories.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { iconList } from "../../utils/iconList";
+import LUIcon from "./LUIcon";
+import { iconSize } from ".";
+export default {
+    title: "Components/Icon",
+    component: LUIcon,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(LUIcon, __assign({ size: "xxs", className: "text-primary-500" }, args))); };
+export var Icon = Template.bind({});
+Icon.args = {
+    size: "xxs",
+    icon: iconList[0].key,
+};
+Icon.argTypes = {
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(iconSize),
+        },
+        options: Object.keys(iconSize),
+        defaultValue: "xxs",
+    },
+    icon: {
+        control: {
+            type: "select",
+            labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })),
+        },
+        options: iconList.map(function (icon) { return icon.key; }),
+        defaultValue: iconList[0].key,
+    },
+};

package/dist/src/components/Icons/LUIcon.stories.jsx

@@ -0,0 +1,32 @@
+import { iconList } from "../../utils/iconList";
+import LUIcon from "./LUIcon";
+import { iconSize } from ".";
+export default {
+    title: "Components/Icon",
+    component: LUIcon,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (<LUIcon size="xxs" className="text-primary-500" {...args}/>); };
+export var Icon = Template.bind({});
+Icon.args = {
+    size: "xxs",
+    icon: iconList[0].key,
+};
+Icon.argTypes = {
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(iconSize),
+        },
+        options: Object.keys(iconSize),
+        defaultValue: "xxs",
+    },
+    icon: {
+        control: {
+            type: "select",
+            labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })),
+        },
+        options: iconList.map(function (icon) { return icon.key; }),
+        defaultValue: iconList[0].key,
+    },
+};

package/dist/src/components/Icons/SingleIcon.test.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import LUIcon from "./LUIcon";
+import { iconList } from "../../utils/iconList";
+import { iconSize } from ".";
+describe("LUIcon Component", function () {
+    it("renders correctly when a valid icon is provided", function () {
+        var props = {
+            size: "xs",
+            icon: iconList[0].key,
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        // Select the element
+        var singleIconElement = screen.getByTestId("lu-icon");
+        expect(singleIconElement).toHaveClass(iconSize[props.size]);
+        // Assert that the fill class is applied correctly on the <path>
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        var selectedIcon = iconList.find(function (icon) { return icon.key === props.icon; });
+        expect(pathElement).toHaveAttribute("d", (selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) || "");
+    });
+    it("renders correctly when an invalid icon is provided", function () {
+        var props = {
+            size: "md",
+            icon: "non-existent-icon", // Invalid icon
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        var svgElement = screen.getByTestId("lu-icon");
+        expect(svgElement).toBeInTheDocument();
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        // Since the icon does not exist, path should be an empty string
+        expect(pathElement).toHaveAttribute("d", "");
+    });
+    it("applies additional className correctly", function () {
+        var props = {
+            size: "lg",
+            icon: iconList[0].key,
+            className: "custom-class",
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        var singleIconElement = screen.getByTestId("lu-icon");
+        expect(singleIconElement).toHaveClass(iconSize[props.size]);
+        expect(singleIconElement).toHaveClass("custom-class");
+    });
+    it("renders correctly when selectedIcon is undefined", function () {
+        var props = {
+            size: "md",
+            icon: "", // Pass an empty string to ensure find() returns undefined
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        expect(pathElement).toHaveAttribute("d", ""); // Expect empty path when selectedIcon is undefined
+    });
+});

package/dist/src/components/Icons/SingleIcon.test.jsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import LUIcon from "./LUIcon";
+import { iconList } from "../../utils/iconList";
+import { iconSize } from ".";
+describe("LUIcon Component", function () {
+    it("renders correctly when a valid icon is provided", function () {
+        var props = {
+            size: "xs",
+            icon: iconList[0].key,
+        };
+        render(<LUIcon {...props}/>);
+        // Select the element
+        var singleIconElement = screen.getByTestId("lu-icon");
+        expect(singleIconElement).toHaveClass(iconSize[props.size]);
+        // Assert that the fill class is applied correctly on the <path>
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        var selectedIcon = iconList.find(function (icon) { return icon.key === props.icon; });
+        expect(pathElement).toHaveAttribute("d", (selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) || "");
+    });
+    it("renders correctly when an invalid icon is provided", function () {
+        var props = {
+            size: "md",
+            icon: "non-existent-icon", // Invalid icon
+        };
+        render(<LUIcon {...props}/>);
+        var svgElement = screen.getByTestId("lu-icon");
+        expect(svgElement).toBeInTheDocument();
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        // Since the icon does not exist, path should be an empty string
+        expect(pathElement).toHaveAttribute("d", "");
+    });
+    it("applies additional className correctly", function () {
+        var props = {
+            size: "lg",
+            icon: iconList[0].key,
+            className: "custom-class",
+        };
+        render(<LUIcon {...props}/>);
+        var singleIconElement = screen.getByTestId("lu-icon");
+        expect(singleIconElement).toHaveClass(iconSize[props.size]);
+        expect(singleIconElement).toHaveClass("custom-class");
+    });
+    it("renders correctly when selectedIcon is undefined", function () {
+        var props = {
+            size: "md",
+            icon: "", // Pass an empty string to ensure find() returns undefined
+        };
+        render(<LUIcon {...props}/>);
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        expect(pathElement).toHaveAttribute("d", ""); // Expect empty path when selectedIcon is undefined
+    });
+});

package/dist/src/components/Icons/index.d.ts

@@ -0,0 +1,16 @@
+export declare const iconSize: {
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    huge: string;
+    massive: string;
+};

package/dist/src/components/Icons/index.js

@@ -0,0 +1,16 @@
+export var iconSize = {
+    xxs: "w-2 h-2",
+    xs: "w-3 h-3",
+    sm: "w-3.5 h-3.5",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+    xl: "w-6 h-6",
+    "2xl": "w-6 h-6",
+    "3xl": "w-7 h-7",
+    "4xl": "w-8 h-8",
+    "5xl": "w-9 h-9",
+    "6xl": "w-10 h-10",
+    "7xl": "w-12 h-12",
+    huge: "w-16 h-16",
+    massive: "w-20 h-20",
+};

package/dist/src/components/Icons/type.d.ts

@@ -0,0 +1,8 @@
+import { iconSize } from ".";
+type iconSize = keyof typeof iconSize;
+export interface IconProps extends React.HTMLAttributes<HTMLOrSVGElement> {
+    size: iconSize;
+    icon?: string;
+    className?: string;
+}
+export {};

package/dist/src/components/Icons/type.js

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

package/dist/src/components/ImageUploader/ImageUploader.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ImageUploader from "../ui/imageUploader";
+declare const meta: Meta<typeof ImageUploader>;
+export default meta;
+type Story = StoryObj<typeof ImageUploader>;
+export declare const Default: Story;

package/dist/src/components/ImageUploader/ImageUploader.stories.js

@@ -0,0 +1,18 @@
+import ImageUploader from "../ui/imageUploader";
+var meta = {
+    title: "Components/ImageUploader",
+    component: ImageUploader,
+    tags: ["autodocs"],
+    argTypes: {
+        onChange: { action: "changed" }, // For logging in the Storybook actions panel
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        value: null,
+        onChange: function (previewUrl, file) {
+            console.log("Selected file:", file);
+        },
+    },
+};

package/dist/src/components/ImageUploader/type.d.ts

@@ -0,0 +1,8 @@
+export interface ImageUploaderProps {
+    value: string | File | null;
+    onChange: (previewUrl: string | null, file: File | null) => void;
+    required?: boolean;
+    className?: string;
+    maxFileSizeMB?: number;
+    acceptedTypes?: string[];
+}

package/dist/src/components/ImageUploader/type.js

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

package/dist/src/components/Images/LuImage.d.ts

@@ -0,0 +1,3 @@
+import { AspectRatioProps } from "./type";
+declare const LuImage: ({ ratio, ...props }: AspectRatioProps) => import("react/jsx-runtime").JSX.Element;
+export default LuImage;

package/dist/{components/Typography/Body/Body.js → src/components/Images/LuImage.js}

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,12 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var constants_1 = require("../../../utils/constants");
-var _1 = require("./");
-var Body = function (_a) {
-    var _b = _a.body, body = _b === void 0 ? _1.BODY_CLASSES[0] : _b, _c = _a.label, label = _c === void 0 ? constants_1.Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["body", "label", "className"]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(body, " ").concat(className).trim() }, props, { children: label })));
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from "next/image";
+import { aspectRatio } from ".";
+var LuImage = function (_a) {
+    var _b = _a.ratio, ratio = _b === void 0 ? "square" : _b, props = __rest(_a, ["ratio"]);
+    // eslint-disable-next-line jsx-a11y/alt-text
+    return _jsx(Image, __assign({ className: "".concat(aspectRatio[ratio]) }, props));
 };
-exports.default = Body;
+export default LuImage;

package/dist/src/components/Images/LuImage.jsx

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Image from "next/image";
+import { aspectRatio } from ".";
+var LuImage = function (_a) {
+    var _b = _a.ratio, ratio = _b === void 0 ? "square" : _b, props = __rest(_a, ["ratio"]);
+    // eslint-disable-next-line jsx-a11y/alt-text
+    return <Image className={"".concat(aspectRatio[ratio])} {...props}/>;
+};
+export default LuImage;

package/dist/src/components/Images/LuImage.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+import LuImage from "./LuImage";
+import { AspectRatioProps } from "./type";
+declare const _default: Meta<typeof LuImage>;
+export default _default;
+export declare const _Image: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, AspectRatioProps>;

package/dist/src/components/Images/LuImage.stories.js

@@ -0,0 +1,166 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import LuImage from "./LuImage";
+import { aspectRatio } from ".";
+export default {
+    title: "Components/Image",
+    component: LuImage,
+    argTypes: {
+        src: {
+            control: "text",
+            description: "Image source URL",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        width: {
+            control: "number",
+            description: "Image width",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "240" },
+            },
+        },
+        height: {
+            control: "number",
+            description: "Image width",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "240" },
+            },
+        },
+        alt: {
+            control: "text",
+            description: "Image alt text",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Demo Image" },
+            },
+        },
+        loader: {
+            control: false,
+            description: "loader={imageLoader}",
+            table: {
+                type: { summary: "function" },
+            },
+        },
+        fill: {
+            control: "boolean",
+            description: "fill={false}",
+            table: {
+                type: { summary: "boolean" },
+            },
+        },
+        sizes: {
+            control: "text",
+            description: "sizes=(max-width: 768px) 100vw, 33vw",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        quality: {
+            control: "number",
+            description: "Image quality",
+            table: {
+                type: { summary: "Integer (1-100)" },
+            },
+        },
+        priority: {
+            control: "boolean",
+            description: "priority={false}",
+            table: {
+                type: { summary: "boolean" },
+            },
+        },
+        placeholder: {
+            control: "select",
+            options: ["blur", "empty"],
+            description: "placeholder={blur}",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        style: {
+            control: "object",
+            description: "stye={{ objectFit: contain }}",
+            table: {
+                type: { summary: "object" },
+            },
+        },
+        className: { control: "text" },
+        onLoad: {
+            control: false,
+            description: "onLoad={event => done())}",
+            table: {
+                type: { summary: "function" },
+            },
+        },
+        onError: {
+            description: "onError={event => fail()}",
+            table: {
+                type: { summary: "function" },
+            },
+            control: false,
+        },
+        loading: {
+            control: "select",
+            options: ["lazy", "eager"],
+            description: "Image loading",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        blurDataURL: {
+            control: "text",
+            description: "blurDataURL=data:image/jpeg...",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        overrideSrc: {
+            control: "text",
+            description: "overrideSrc=/seo.png",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        ratio: {
+            control: "select",
+            options: Object.keys(aspectRatio),
+            description: "Aspect ratio of the image",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "square" },
+            },
+        },
+    },
+};
+var Template = function (args) { return _jsx(LuImage, __assign({}, args)); };
+export var _Image = Template.bind({});
+_Image.args = {
+    src: "/images/demo-image.jpg",
+    ratio: "square",
+    width: 240,
+    height: 240,
+    alt: "Demo Image",
+};
+_Image.argTypes = {
+    ratio: {
+        control: {
+            type: "select",
+            labels: Object.keys(aspectRatio),
+        },
+        options: Object.keys(aspectRatio),
+        defaultValue: "square",
+    },
+};