@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10

package/dist/components/ImageReplacementAnchor/ImageReplacementAnchor.test.js

@@ -0,0 +1,379 @@
+import { jsx as a } from "react/jsx-runtime";
+import { v as m, d as u, b as d, a as h, i as s, r, g as o, s as i } from "../../react.esm-DLSrfVwM.mjs";
+import { ImageReplacementAnchor as l } from "./ImageReplacementAnchor.js";
+m.mock("../../utils/helpers", () => ({
+  classes: (n) => n.filter(Boolean).join(" ")
+}));
+m.mock("./ImageReplacementAnchor.module.scss", () => ({
+  default: {
+    "image-replacement-anchor": "ira-module",
+    "image-replacement-anchor__image": "ira-image-module",
+    "image-replacement-anchor__text": "ira-text-module"
+  }
+}));
+u("ImageReplacementAnchor", () => {
+  const n = (e) => ({
+    url: "https://example.com/logo.png",
+    altText: "Company Logo",
+    aspectRatio: 2,
+    width: 200,
+    height: 100,
+    ...e
+  });
+  d(() => {
+    m.clearAllMocks();
+  }), h(() => {
+    m.restoreAllMocks();
+  }), u("Basic Rendering", () => {
+    s("should render anchor element", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = document.querySelector("a");
+      o(e).toBeInTheDocument();
+    }), s("should render image element", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toBeInTheDocument();
+    }), s("should apply anchor classes", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = document.querySelector("a");
+      o(e).toHaveClass("ira-module"), o(e).toHaveClass("image-replacement-anchor");
+    }), s("should apply image classes", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveClass("ira-image-module"), o(e).toHaveClass("image-replacement-anchor__image");
+    });
+  }), u("Link Attributes", () => {
+    s("should set href attribute", () => {
+      r(/* @__PURE__ */ a(l, { href: "https://example.com" }));
+      const e = i.getByRole("link");
+      o(e).toHaveAttribute("href", "https://example.com");
+    }), s("should use empty href by default", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = document.querySelector("a");
+      o(e).toHaveAttribute("href", "");
+    }), s("should set target to _self by default", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = document.querySelector("a");
+      o(e).toHaveAttribute("target", "_self");
+    }), s("should set target to _blank", () => {
+      r(/* @__PURE__ */ a(l, { target: "_blank" }));
+      const e = document.querySelector("a");
+      o(e).toHaveAttribute("target", "_blank");
+    }), s("should set target to _parent", () => {
+      r(/* @__PURE__ */ a(l, { target: "_parent" }));
+      const e = document.querySelector("a");
+      o(e).toHaveAttribute("target", "_parent");
+    }), s("should set target to _top", () => {
+      r(/* @__PURE__ */ a(l, { target: "_top" }));
+      const e = document.querySelector("a");
+      o(e).toHaveAttribute("target", "_top");
+    }), s('should add rel="noreferrer" when target is _blank', () => {
+      r(/* @__PURE__ */ a(l, { target: "_blank" }));
+      const e = document.querySelector("a");
+      o(e).toHaveAttribute("rel", "noreferrer");
+    }), s("should not add rel attribute when target is not _blank", () => {
+      r(/* @__PURE__ */ a(l, { target: "_self" }));
+      const e = document.querySelector("a");
+      o(e).not.toHaveAttribute("rel");
+    }), s("should not add rel attribute when target is _parent", () => {
+      r(/* @__PURE__ */ a(l, { target: "_parent" }));
+      const e = document.querySelector("a");
+      o(e).not.toHaveAttribute("rel");
+    });
+  }), u("Image Properties", () => {
+    s("should set image src from image prop", () => {
+      const e = n({ url: "https://example.com/custom-logo.png" });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = i.getByRole("presentation");
+      o(t).toHaveAttribute("src", "https://example.com/custom-logo.png");
+    }), s("should set image alt text from image prop", () => {
+      const e = n({ altText: "Custom Logo" });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = i.getByRole("presentation");
+      o(t).toHaveAttribute("alt", "Custom Logo");
+    }), s("should use empty src by default", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveAttribute("src", "");
+    }), s("should use empty alt text by default", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveAttribute("alt", "");
+    }), s("should set loading to lazy", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveAttribute("loading", "lazy");
+    }), s("should set role to presentation", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveAttribute("role", "presentation");
+    });
+  }), u("Aspect Ratio Calculation", () => {
+    s("should calculate aspect ratio from width and height", () => {
+      const e = n({ width: 400, height: 100 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("4");
+    }), s("should use 1 as default aspect ratio when width/height not provided", () => {
+      const e = n({ width: void 0, height: void 0 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("1");
+    }), s("should handle decimal aspect ratios", () => {
+      const e = n({ width: 300, height: 200 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("1.5");
+    }), s("should use 1 when only width is provided", () => {
+      const e = n({ width: 200, height: void 0 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("1");
+    }), s("should use 1 when only height is provided", () => {
+      const e = n({ width: void 0, height: 100 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("1");
+    }), s("should handle square images", () => {
+      const e = n({ width: 100, height: 100 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("1");
+    }), s("should handle very wide aspect ratios", () => {
+      const e = n({ width: 1e3, height: 50 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("20");
+    }), s("should handle very tall aspect ratios", () => {
+      const e = n({ width: 50, height: 200 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("0.25");
+    });
+  }), u("CSS Custom Properties", () => {
+    s("should set height CSS variable with default 4rem", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-height")).toBe("4rem");
+    }), s("should set height CSS variable with custom value", () => {
+      r(/* @__PURE__ */ a(l, { height: 6 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-height")).toBe("6rem");
+    }), s("should set baseline adjustment CSS variable with default 0rem", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-baseline-adjustment")).toBe("0rem");
+    }), s("should set baseline adjustment CSS variable with custom value", () => {
+      r(/* @__PURE__ */ a(l, { baselineAdjustment: 0.5 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-baseline-adjustment")).toBe("0.5rem");
+    }), s("should set negative baseline adjustment", () => {
+      r(/* @__PURE__ */ a(l, { baselineAdjustment: -0.25 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-baseline-adjustment")).toBe("-0.25rem");
+    }), s("should set all three CSS custom properties", () => {
+      const e = n({ width: 200, height: 100 });
+      r(/* @__PURE__ */ a(l, { baselineAdjustment: 1, height: 5, image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("2"), o(t == null ? void 0 : t.style.getPropertyValue("--ira-height")).toBe("5rem"), o(t == null ? void 0 : t.style.getPropertyValue("--ira-baseline-adjustment")).toBe("1rem");
+    }), s("should handle zero height", () => {
+      r(/* @__PURE__ */ a(l, { height: 0 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-height")).toBe("0rem");
+    }), s("should handle large height values", () => {
+      r(/* @__PURE__ */ a(l, { height: 100 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-height")).toBe("100rem");
+    }), s("should handle decimal height values", () => {
+      r(/* @__PURE__ */ a(l, { height: 2.5 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-height")).toBe("2.5rem");
+    });
+  }), u("Text Span Rendering", () => {
+    s("should render text span when altText is empty", () => {
+      const e = n({ altText: "" });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Company Name" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).toBeInTheDocument(), o(t).toHaveTextContent("Company Name");
+    }), s("should render text span when altText is undefined", () => {
+      const e = n({ altText: void 0 });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Company Name" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).toBeInTheDocument();
+    }), s("should not render text span when altText is provided", () => {
+      const e = n({ altText: "Logo" });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Company Name" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).not.toBeInTheDocument();
+    }), s("should use empty text by default", () => {
+      const e = n({ altText: "" });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).toHaveTextContent("");
+    }), s("should apply text span class", () => {
+      const e = n({ altText: "" });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Test" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).toHaveClass("ira-text-module");
+    }), s("should render text even when image has no alt but text is provided", () => {
+      r(/* @__PURE__ */ a(l, { text: "Fallback Text" }));
+      const e = document.querySelector(".ira-text-module");
+      o(e).toBeInTheDocument(), o(e).toHaveTextContent("Fallback Text");
+    });
+  }), u("Custom Classname", () => {
+    s("should apply custom classname", () => {
+      r(/* @__PURE__ */ a(l, { classname: "custom-class" }));
+      const e = document.querySelector("a");
+      o(e).toHaveClass("custom-class");
+    }), s("should apply multiple custom classes", () => {
+      r(/* @__PURE__ */ a(l, { classname: "class-one class-two" }));
+      const e = document.querySelector("a");
+      o(e).toHaveClass("class-one"), o(e).toHaveClass("class-two");
+    }), s("should apply custom class along with default classes", () => {
+      r(/* @__PURE__ */ a(l, { classname: "my-custom-class" }));
+      const e = document.querySelector("a");
+      o(e).toHaveClass("ira-module"), o(e).toHaveClass("image-replacement-anchor"), o(e).toHaveClass("my-custom-class");
+    }), s("should handle empty classname", () => {
+      r(/* @__PURE__ */ a(l, { classname: "" }));
+      const e = document.querySelector("a");
+      o(e).toHaveClass("ira-module"), o(e).toHaveClass("image-replacement-anchor");
+    });
+  }), u("Default Props", () => {
+    s("should use all default values", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = document.querySelector("a"), t = i.getByRole("presentation");
+      o(e).toHaveAttribute("href", ""), o(e).toHaveAttribute("target", "_self"), o(t).toHaveAttribute("src", ""), o(t).toHaveAttribute("alt", ""), o(e == null ? void 0 : e.style.getPropertyValue("--ira-height")).toBe("4rem"), o(e == null ? void 0 : e.style.getPropertyValue("--ira-baseline-adjustment")).toBe("0rem");
+    }), s("should use default image values", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveAttribute("src", ""), o(e).toHaveAttribute("alt", "");
+    }), s("should render text span with default image", () => {
+      r(/* @__PURE__ */ a(l, { text: "Default Text" }));
+      const e = document.querySelector(".ira-text-module");
+      o(e).toBeInTheDocument();
+    });
+  }), u("Edge Cases", () => {
+    s("should handle zero aspect ratio (zero width)", () => {
+      const e = n({ width: 0, height: 100 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("1");
+    }), s("should handle division by zero (zero height)", () => {
+      const e = n({ width: 100, height: 0 });
+      r(/* @__PURE__ */ a(l, { image: e }));
+      const t = document.querySelector("a");
+      o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("1");
+    }), s("should handle very long URLs", () => {
+      const e = "https://example.com/" + "a".repeat(1e3) + ".png";
+      r(/* @__PURE__ */ a(l, { href: e }));
+      const t = i.getByRole("link");
+      o(t).toHaveAttribute("href", e);
+    }), s("should handle special characters in text", () => {
+      const e = n({ altText: "" }), t = `<>&"'Company`;
+      r(/* @__PURE__ */ a(l, { image: e, text: t }));
+      const c = document.querySelector(".ira-text-module");
+      o(c).toHaveTextContent(t);
+    }), s("should handle empty string altText (not just undefined)", () => {
+      const e = n({ altText: "" });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Text" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).toBeInTheDocument();
+    }), s("should handle whitespace-only altText as truthy", () => {
+      const e = n({ altText: "   " });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Text" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).not.toBeInTheDocument();
+    }), s("should handle negative height", () => {
+      r(/* @__PURE__ */ a(l, { height: -5 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-height")).toBe("-5rem");
+    }), s("should handle very large baseline adjustment", () => {
+      r(/* @__PURE__ */ a(l, { baselineAdjustment: 999 }));
+      const e = document.querySelector("a");
+      o(e == null ? void 0 : e.style.getPropertyValue("--ira-baseline-adjustment")).toBe("999rem");
+    });
+  }), u("Integration", () => {
+    s("should render complete component with all props", () => {
+      const e = n({
+        url: "https://example.com/logo.png",
+        altText: "Company Logo",
+        width: 300,
+        height: 150
+      });
+      r(
+        /* @__PURE__ */ a(
+          l,
+          {
+            baselineAdjustment: 0.5,
+            classname: "custom-logo",
+            height: 5,
+            href: "https://example.com",
+            image: e,
+            target: "_blank",
+            text: "Company Name"
+          }
+        )
+      );
+      const t = i.getByRole("link"), c = i.getByRole("presentation");
+      o(t).toHaveAttribute("href", "https://example.com"), o(t).toHaveAttribute("target", "_blank"), o(t).toHaveAttribute("rel", "noreferrer"), o(t).toHaveClass("custom-logo"), o(c).toHaveAttribute("src", "https://example.com/logo.png"), o(c).toHaveAttribute("alt", "Company Logo"), o(t == null ? void 0 : t.style.getPropertyValue("--ira-aspect-ratio")).toBe("2"), o(t == null ? void 0 : t.style.getPropertyValue("--ira-height")).toBe("5rem"), o(t == null ? void 0 : t.style.getPropertyValue("--ira-baseline-adjustment")).toBe("0.5rem"), o(document.querySelector(".ira-text-module")).not.toBeInTheDocument();
+    }), s("should render minimal component for logo replacement", () => {
+      const e = n({ altText: "" });
+      r(
+        /* @__PURE__ */ a(
+          l,
+          {
+            href: "/",
+            image: e,
+            text: "Home"
+          }
+        )
+      );
+      const t = i.getByRole("link"), c = document.querySelector(".ira-text-module");
+      o(t).toHaveAttribute("href", "/"), o(c).toHaveTextContent("Home");
+    }), s("should handle external link with security attributes", () => {
+      r(
+        /* @__PURE__ */ a(
+          l,
+          {
+            href: "https://external-site.com",
+            target: "_blank"
+          }
+        )
+      );
+      const e = i.getByRole("link");
+      o(e).toHaveAttribute("target", "_blank"), o(e).toHaveAttribute("rel", "noreferrer");
+    }), s("should handle internal link without security attributes", () => {
+      r(
+        /* @__PURE__ */ a(
+          l,
+          {
+            href: "/about",
+            target: "_self"
+          }
+        )
+      );
+      const e = document.querySelector("a");
+      o(e).toHaveAttribute("target", "_self"), o(e).not.toHaveAttribute("rel");
+    });
+  }), u("Accessibility", () => {
+    s("should set role presentation on image", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveAttribute("role", "presentation");
+    }), s("should provide text fallback when image alt is empty", () => {
+      const e = n({ altText: "" });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Accessible Text" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).toHaveTextContent("Accessible Text");
+    }), s("should not duplicate text when alt text exists", () => {
+      const e = n({ altText: "Logo Alt Text" });
+      r(/* @__PURE__ */ a(l, { image: e, text: "Logo Text" }));
+      const t = document.querySelector(".ira-text-module");
+      o(t).not.toBeInTheDocument();
+    }), s("should have lazy loading for performance", () => {
+      r(/* @__PURE__ */ a(l, {}));
+      const e = i.getByRole("presentation");
+      o(e).toHaveAttribute("loading", "lazy");
+    });
+  });
+});

package/dist/components/InfoPanel/InfoPanel.js

@@ -2,7 +2,7 @@ import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import { useState as b, useRef as d, useEffect as m } from "react";
 import { classes as i } from "../../utils/helpers.js";
 import { blockLayoutsMap as h } from "../../settings.js";
-import { C as k } from "../../chevron-left-DRvpaLmK.mjs";
+import { C as k } from "../../chevron-left-D0UjbrKw.mjs";
 import '../../assets/InfoPanel.css';const l = {
   "info-panel": "_info-panel_1j4w6_1",
   "info-panel__back-btn": "_info-panel__back-btn_1j4w6_19"

package/dist/components/InlineNavigation/InlineNavigation.test.js

@@ -0,0 +1,149 @@
+import { jsx as a } from "react/jsx-runtime";
+import { v as u, d, b as r, i as s, r as o, s as n, g as e } from "../../react.esm-DLSrfVwM.mjs";
+import { InlineNavigation as i } from "./InlineNavigation.js";
+u.mock("../NavList", () => ({
+  default: ({ classname: c, links: t }) => /* @__PURE__ */ a("ul", { "data-classname": c, "data-links-count": t.length, "data-testid": "nav-list", children: t.map(
+    (l, v) => /* @__PURE__ */ a("li", { children: l.label || l.href }, v)
+  ) })
+}));
+u.mock("./InlineNavigation.module.scss", () => ({
+  default: {
+    "inline-navigation": "inline-navigation-module"
+  }
+}));
+d("InlineNavigation", () => {
+  const c = (t) => ({
+    href: "/test",
+    label: "Test Link",
+    ...t
+  });
+  r(() => {
+    u.clearAllMocks();
+  }), d("Basic Rendering", () => {
+    s("should render nav element", () => {
+      o(/* @__PURE__ */ a(i, {}));
+      const t = n.getByRole("navigation");
+      e(t).toBeInTheDocument();
+    }), s("should apply module class", () => {
+      o(/* @__PURE__ */ a(i, {}));
+      const t = n.getByRole("navigation");
+      e(t).toHaveClass("inline-navigation-module");
+    }), s("should render NavList component", () => {
+      o(/* @__PURE__ */ a(i, {}));
+      const t = n.getByTestId("nav-list");
+      e(t).toBeInTheDocument();
+    });
+  }), d("Links Prop", () => {
+    s("should pass empty array by default", () => {
+      o(/* @__PURE__ */ a(i, {}));
+      const t = n.getByTestId("nav-list");
+      e(t).toHaveAttribute("data-links-count", "0");
+    }), s("should pass single link to NavList", () => {
+      const t = [c()];
+      o(/* @__PURE__ */ a(i, { links: t }));
+      const l = n.getByTestId("nav-list");
+      e(l).toHaveAttribute("data-links-count", "1"), e(n.getByText("Test Link")).toBeInTheDocument();
+    }), s("should pass multiple links to NavList", () => {
+      const t = [
+        c({ label: "Link 1" }),
+        c({ label: "Link 2" }),
+        c({ label: "Link 3" })
+      ];
+      o(/* @__PURE__ */ a(i, { links: t }));
+      const l = n.getByTestId("nav-list");
+      e(l).toHaveAttribute("data-links-count", "3"), e(n.getByText("Link 1")).toBeInTheDocument(), e(n.getByText("Link 2")).toBeInTheDocument(), e(n.getByText("Link 3")).toBeInTheDocument();
+    });
+  }), d("Classname Prop", () => {
+    s("should pass empty string by default", () => {
+      o(/* @__PURE__ */ a(i, {}));
+      const t = n.getByTestId("nav-list");
+      e(t).toHaveAttribute("data-classname", "");
+    }), s("should pass custom classname to NavList", () => {
+      o(/* @__PURE__ */ a(i, { classname: "custom-nav" }));
+      const t = n.getByTestId("nav-list");
+      e(t).toHaveAttribute("data-classname", "custom-nav");
+    }), s("should pass multiple classes to NavList", () => {
+      o(/* @__PURE__ */ a(i, { classname: "class-one class-two" }));
+      const t = n.getByTestId("nav-list");
+      e(t).toHaveAttribute("data-classname", "class-one class-two");
+    });
+  }), d("Position Prop - CSS Custom Property", () => {
+    s("should default to left position", () => {
+      o(/* @__PURE__ */ a(i, {}));
+      const t = n.getByRole("navigation");
+      e(t).toHaveStyle({
+        "--inline-nav-justify-content": "flex-start"
+      });
+    }), s("should apply left position", () => {
+      o(/* @__PURE__ */ a(i, { position: "left" }));
+      const t = n.getByRole("navigation");
+      e(t).toHaveStyle({
+        "--inline-nav-justify-content": "flex-start"
+      });
+    }), s("should apply right position", () => {
+      o(/* @__PURE__ */ a(i, { position: "right" }));
+      const t = n.getByRole("navigation");
+      e(t).toHaveStyle({
+        "--inline-nav-justify-content": "flex-end"
+      });
+    }), s("should apply center position", () => {
+      o(/* @__PURE__ */ a(i, { position: "center" }));
+      const t = n.getByRole("navigation");
+      e(t).toHaveStyle({
+        "--inline-nav-justify-content": "center"
+      });
+    });
+  }), d("Integration", () => {
+    s("should render with all props combined", () => {
+      const t = [
+        c({ label: "Home", href: "/" }),
+        c({ label: "About", href: "/about" })
+      ];
+      o(
+        /* @__PURE__ */ a(
+          i,
+          {
+            classname: "my-nav",
+            links: t,
+            position: "center"
+          }
+        )
+      );
+      const l = n.getByRole("navigation");
+      e(l).toHaveClass("inline-navigation-module"), e(l).toHaveStyle({
+        "--inline-nav-justify-content": "center"
+      });
+      const v = n.getByTestId("nav-list");
+      e(v).toHaveAttribute("data-classname", "my-nav"), e(v).toHaveAttribute("data-links-count", "2"), e(n.getByText("Home")).toBeInTheDocument(), e(n.getByText("About")).toBeInTheDocument();
+    }), s("should render with only links prop", () => {
+      const t = [c()];
+      o(/* @__PURE__ */ a(i, { links: t }));
+      const l = n.getByRole("navigation");
+      e(l).toHaveStyle({
+        "--inline-nav-justify-content": "flex-start"
+      });
+      const v = n.getByTestId("nav-list");
+      e(v).toHaveAttribute("data-classname", ""), e(v).toHaveAttribute("data-links-count", "1");
+    }), s("should render with all defaults", () => {
+      o(/* @__PURE__ */ a(i, {}));
+      const t = n.getByRole("navigation");
+      e(t).toHaveClass("inline-navigation-module"), e(t).toHaveStyle({
+        "--inline-nav-justify-content": "flex-start"
+      });
+      const l = n.getByTestId("nav-list");
+      e(l).toHaveAttribute("data-classname", ""), e(l).toHaveAttribute("data-links-count", "0");
+    });
+  }), d("Edge Cases", () => {
+    s("should handle links with only URL", () => {
+      o(/* @__PURE__ */ a(i, { links: [{ href: "/test" }] })), e(n.getByText("/test")).toBeInTheDocument();
+    }), s("should handle empty classname string", () => {
+      o(/* @__PURE__ */ a(i, { classname: "" }));
+      const t = n.getByTestId("nav-list");
+      e(t).toHaveAttribute("data-classname", "");
+    }), s("should handle whitespace in classname", () => {
+      o(/* @__PURE__ */ a(i, { classname: "  spaced  " }));
+      const t = n.getByTestId("nav-list");
+      e(t).toHaveAttribute("data-classname", "  spaced  ");
+    });
+  });
+});

package/dist/components/Input/Input.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as l } from "react/jsx-runtime";
 import { useState as s, useRef as b } from "react";
 import { classes as m, areaCodePhoneNumberMask as M } from "../../utils/helpers.js";
-import { s as t, C as V, A as $ } from "../../Form.module-Cd8qH2rj.mjs";
+import { s as t, C as V, A as $ } from "../../Form.module-CarfWK5T.mjs";
 function B({
   name: a,
   label: h = "",