@scrippsproduct/networks-ui-library 1.1.8 → 1.1.10-alpha.0

package/dist/components/PromotionBlock/PromotionBlock.test.js

@@ -0,0 +1,208 @@
+var x = Object.defineProperty;
+var f = (n, r, o) => r in n ? x(n, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : n[r] = o;
+var d = (n, r, o) => f(n, typeof r != "symbol" ? r + "" : r, o);
+import { jsx as m } from "react/jsx-runtime";
+import { v as g, d as u, b as q, a as v, i, r as a, g as t, s as y } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { PromotionBlock as l } from "./PromotionBlock.js";
+let p = null, s = null, _;
+class H {
+  constructor(r, o) {
+    d(this, "observe", g.fn());
+    d(this, "unobserve", g.fn());
+    d(this, "disconnect", g.fn());
+    d(this, "root", null);
+    d(this, "rootMargin", "");
+    d(this, "thresholds", []);
+    p = r, s = this, _ = o;
+  }
+  takeRecords() {
+    return [];
+  }
+}
+g.mock("./PromotionBlock.module.scss", () => ({
+  default: {
+    "promo-image": "promo-image-module",
+    "promo-image__text": "promo-image__text-module",
+    "promo-image--animate": "promo-image--animate-module",
+    "promo-copy": "promo-copy-module",
+    "promo-copy__header": "promo-copy__header-module",
+    "promo-copy__description": "promo-copy__description-module",
+    "promo-copy__link": "promo-copy__link-module",
+    "promo-copy--animate": "promo-copy--animate-module"
+  }
+}));
+u("PromotionBlock", () => {
+  const n = {
+    url: "https://example.com/promo.jpg",
+    altText: "Promotional Image",
+    text: "Special Offer",
+    aspectRatio: 1.7777777777777777
+  }, r = {
+    header: "Exclusive Deal",
+    description: "Get 50% off on all items this week only!",
+    linkText: "Shop Now",
+    href: "https://example.com/shop"
+  };
+  q(() => {
+    global.IntersectionObserver = H, p = null, s = null, _ = void 0;
+  }), v(() => {
+    g.clearAllMocks();
+  }), u("Basic Rendering", () => {
+    i("should render promotion-block container", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector("promotion-block");
+      t(e).toBeInTheDocument();
+    }), i("should render promo-image section", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image-module");
+      t(e).toBeInTheDocument();
+    }), i("should render promo-copy section", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy-module");
+      t(e).toBeInTheDocument();
+    }), i("should render promo-image custom element", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector("promo-image");
+      t(e).toBeInTheDocument();
+    });
+  }), u("Image Rendering", () => {
+    i("should render image with correct src", () => {
+      a(/* @__PURE__ */ m(l, { image: n, promo: r }));
+      const o = y.getByRole("img");
+      t(o).toHaveAttribute("src", "https://example.com/promo.jpg");
+    }), i("should render image with correct alt text", () => {
+      a(/* @__PURE__ */ m(l, { image: n, promo: r }));
+      const o = y.getByRole("img");
+      t(o).toHaveAttribute("alt", "Promotional Image");
+    }), i("should render image text overlay", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image__text-module");
+      t(e).toHaveTextContent("Special Offer");
+    }), i("should wrap image in link", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector("promo-image"), c = e == null ? void 0 : e.querySelector("a");
+      t(c).toBeInTheDocument(), t(c).toHaveAttribute("href", "https://example.com/shop");
+    }), i("should set image link to open in new tab", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector("promo-image"), c = e == null ? void 0 : e.querySelector("a");
+      t(c).toHaveAttribute("target", "_blank"), t(c).toHaveAttribute("rel", "noreferrer");
+    });
+  }), u("Promo Copy Content", () => {
+    i("should render header text", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy__header-module");
+      t(e).toHaveTextContent("Exclusive Deal");
+    }), i("should render header as h4 element", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy__header-module");
+      t(e == null ? void 0 : e.tagName).toBe("H4");
+    }), i("should render description text", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy__description-module");
+      t(e).toHaveTextContent("Get 50% off on all items this week only!");
+    }), i("should render description as paragraph element", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy__description-module");
+      t(e == null ? void 0 : e.tagName).toBe("P");
+    }), i("should render link text", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy__link-module");
+      t(e).toHaveTextContent("Shop Now");
+    }), i("should render link with correct href", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy__link-module");
+      t(e).toHaveAttribute("href", "https://example.com/shop");
+    }), i("should set link to open in new tab", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy__link-module");
+      t(e).toHaveAttribute("target", "_blank"), t(e).toHaveAttribute("rel", "noreferrer");
+    });
+  }), u("IntersectionObserver Setup", () => {
+    i("should create IntersectionObserver on mount", () => {
+      a(/* @__PURE__ */ m(l, { image: n, promo: r })), t(s).toBeTruthy();
+    }), i("should observe promo-image element", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image-module");
+      t(s == null ? void 0 : s.observe).toHaveBeenCalledWith(e);
+    }), i("should configure observer with correct options", () => {
+      a(/* @__PURE__ */ m(l, { image: n, promo: r })), t(_).toEqual({
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1
+      });
+    });
+  }), u("Animation Triggering", () => {
+    i("should add animation class to promo-copy when intersecting", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy-module"), c = o.querySelector(".promo-image-module");
+      p == null || p([
+        { isIntersecting: !0, target: c }
+      ], s), t(e.classList.contains("promo-copy--animate-module")).toBe(!0);
+    }), i("should add animation class to promo-image when intersecting", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image-module");
+      p == null || p([
+        { isIntersecting: !0, target: e }
+      ], s), t(e.classList.contains("promo-image--animate-module")).toBe(!0);
+    }), i("should not add animation classes when not intersecting", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-copy-module"), c = o.querySelector(".promo-image-module");
+      p == null || p([
+        { isIntersecting: !1, target: c }
+      ], s), t(e.classList.contains("promo-copy--animate-module")).toBe(!1), t(c.classList.contains("promo-image--animate-module")).toBe(!1);
+    }), i("should unobserve element after animation triggers", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image-module");
+      p == null || p([
+        { isIntersecting: !0, target: e }
+      ], s), t(s == null ? void 0 : s.unobserve).toHaveBeenCalledWith(e);
+    }), i("should handle multiple intersection entries", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image-module");
+      p == null || p([
+        { isIntersecting: !0, target: e },
+        { isIntersecting: !1, target: e }
+      ], s), t(e.classList.contains("promo-image--animate-module")).toBe(!0);
+    });
+  }), u("Cleanup", () => {
+    i("should disconnect observer on unmount", () => {
+      const { unmount: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r }));
+      o(), t(s == null ? void 0 : s.disconnect).toHaveBeenCalled();
+    }), i("should only disconnect once on unmount", () => {
+      const { unmount: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r }));
+      o(), t(s == null ? void 0 : s.disconnect).toHaveBeenCalledTimes(1);
+    });
+  }), u("Edge Cases", () => {
+    i("should handle empty image text", () => {
+      const o = {
+        ...n,
+        text: ""
+      }, { container: e } = a(/* @__PURE__ */ m(l, { image: o, promo: r })), c = e.querySelector(".promo-image__text-module");
+      t(c).toHaveTextContent("");
+    }), i("should handle long description text", () => {
+      var h;
+      const o = {
+        ...r,
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(10)
+      }, { container: e } = a(/* @__PURE__ */ m(l, { image: n, promo: o })), c = e.querySelector(".promo-copy__description-module");
+      t((h = c == null ? void 0 : c.textContent) == null ? void 0 : h.length).toBeGreaterThan(100);
+    }), i("should handle special characters in header", () => {
+      const o = {
+        ...r,
+        header: "Save 50% & Get Free Shipping!"
+      }, { container: e } = a(/* @__PURE__ */ m(l, { image: n, promo: o })), c = e.querySelector(".promo-copy__header-module");
+      t(c).toHaveTextContent("Save 50% & Get Free Shipping!");
+    }), i("should handle missing alt text gracefully", () => {
+      const o = {
+        url: "https://example.com/promo.jpg",
+        altText: "",
+        text: "Special Offer",
+        aspectRatio: 1.7777777777777777
+      }, { container: e } = a(/* @__PURE__ */ m(l, { image: o, promo: r })), c = e.querySelector("img");
+      t(c).toHaveAttribute("alt", "");
+    }), i("should not trigger animation if refs are null", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image-module"), c = o.querySelector(".promo-copy-module");
+      c == null || c.remove(), t(() => {
+        p == null || p([
+          { isIntersecting: !0, target: e }
+        ], s);
+      }).not.toThrow();
+    });
+  }), u("Integration", () => {
+    i("should render complete promotion block with all content", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = y.getByRole("img");
+      t(e).toHaveAttribute("src", n.url), t(e).toHaveAttribute("alt", n.altText);
+      const c = o.querySelector(".promo-copy__header-module"), h = o.querySelector(".promo-copy__description-module"), S = o.querySelector(".promo-copy__link-module");
+      t(c).toHaveTextContent(r.header), t(h).toHaveTextContent(r.description), t(S).toHaveTextContent(r.linkText), t(S).toHaveAttribute("href", r.href);
+    }), i("should set up observer and trigger animation workflow", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector(".promo-image-module"), c = o.querySelector(".promo-copy-module");
+      t(s == null ? void 0 : s.observe).toHaveBeenCalledWith(e), t(e.classList.contains("promo-image--animate-module")).toBe(!1), t(c.classList.contains("promo-copy--animate-module")).toBe(!1), p == null || p([
+        { isIntersecting: !0, target: e }
+      ], s), t(e.classList.contains("promo-image--animate-module")).toBe(!0), t(c.classList.contains("promo-copy--animate-module")).toBe(!0), t(s == null ? void 0 : s.unobserve).toHaveBeenCalledWith(e);
+    }), i("should maintain link consistency across image and copy", () => {
+      const { container: o } = a(/* @__PURE__ */ m(l, { image: n, promo: r })), e = o.querySelector("promo-image a"), c = o.querySelector(".promo-copy__link-module");
+      t(e).toHaveAttribute("href", r.href), t(c).toHaveAttribute("href", r.href), t(e).toHaveAttribute("target", "_blank"), t(c).toHaveAttribute("target", "_blank");
+    });
+  });
+});

package/dist/components/PromotionsRowBlock/PromotionsRowBlock.test.js

@@ -0,0 +1,221 @@
+import { jsx as e, jsxs as h, Fragment as g } from "react/jsx-runtime";
+import { v as m, d as s, a as w, i as n, r as d, g as o, s as i } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { PromotionsRowBlock as r } from "./PromotionsRowBlock.js";
+m.mock("../EqualSizeFlexRow", () => ({
+  default: ({ children: t, gap: l }) => /* @__PURE__ */ e("div", { "data-gap": l, "data-testid": "equal-size-flex-row", children: t })
+}));
+m.mock("./PromotionsRowBlock.module.scss", () => ({
+  default: {}
+}));
+s("PromotionsRowBlock", () => {
+  w(() => {
+    m.clearAllMocks();
+  }), s("Basic Rendering", () => {
+    n("should render promotions-row-block container", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { children: "Test Child" }) })
+      ), l = t.querySelector("promotions-row-block");
+      o(l).toBeInTheDocument();
+    }), n("should render EqualSizeFlexRow component", () => {
+      d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { children: "Test Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toBeInTheDocument();
+    }), n("should wrap children in EqualSizeFlexRow", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { children: "Test Child" }) })
+      ), l = t.querySelector("promotions-row-block"), c = i.getByTestId("equal-size-flex-row");
+      o(l).toContainElement(c);
+    });
+  }), s("Children Rendering", () => {
+    n("should render single child", () => {
+      d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { "data-testid": "child-1", children: "Child 1" }) })
+      ), o(i.getByTestId("child-1")).toBeInTheDocument(), o(i.getByText("Child 1")).toBeInTheDocument();
+    }), n("should render multiple children", () => {
+      d(
+        /* @__PURE__ */ h(r, { children: [
+          /* @__PURE__ */ e("div", { "data-testid": "child-1", children: "Child 1" }),
+          /* @__PURE__ */ e("div", { "data-testid": "child-2", children: "Child 2" }),
+          /* @__PURE__ */ e("div", { "data-testid": "child-3", children: "Child 3" })
+        ] })
+      ), o(i.getByTestId("child-1")).toBeInTheDocument(), o(i.getByTestId("child-2")).toBeInTheDocument(), o(i.getByTestId("child-3")).toBeInTheDocument();
+    }), n("should render text content", () => {
+      d(
+        /* @__PURE__ */ e(r, { children: "Simple text content" })
+      ), o(i.getByText("Simple text content")).toBeInTheDocument();
+    }), n("should render complex nested components", () => {
+      d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ h("div", { "data-testid": "complex-child", children: [
+          /* @__PURE__ */ e("h3", { children: "Title" }),
+          /* @__PURE__ */ e("p", { children: "Description" }),
+          /* @__PURE__ */ e("button", { children: "Action" })
+        ] }) })
+      ), o(i.getByRole("heading", { name: "Title" })).toBeInTheDocument(), o(i.getByText("Description")).toBeInTheDocument(), o(i.getByRole("button", { name: "Action" })).toBeInTheDocument();
+    }), n("should preserve children order", () => {
+      d(
+        /* @__PURE__ */ h(r, { children: [
+          /* @__PURE__ */ e("div", { "data-testid": "first", children: "First" }),
+          /* @__PURE__ */ e("div", { "data-testid": "second", children: "Second" }),
+          /* @__PURE__ */ e("div", { "data-testid": "third", children: "Third" })
+        ] })
+      );
+      const t = i.getByTestId("equal-size-flex-row"), l = Array.from(t.children);
+      o(l[0]).toHaveAttribute("data-testid", "first"), o(l[1]).toHaveAttribute("data-testid", "second"), o(l[2]).toHaveAttribute("data-testid", "third");
+    });
+  }), s("Gap Prop", () => {
+    n("should use default gap when not provided", () => {
+      d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "1.5rem");
+    }), n("should apply custom gap value", () => {
+      d(
+        /* @__PURE__ */ e(r, { gap: "2rem", children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "2rem");
+    }), n("should accept gap in pixels", () => {
+      d(
+        /* @__PURE__ */ e(r, { gap: "24px", children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "24px");
+    }), n("should accept gap in em units", () => {
+      d(
+        /* @__PURE__ */ e(r, { gap: "1.5em", children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "1.5em");
+    }), n("should accept gap as zero", () => {
+      d(
+        /* @__PURE__ */ e(r, { gap: "0", children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "0");
+    }), n("should pass gap prop to EqualSizeFlexRow", () => {
+      const t = "3rem";
+      d(
+        /* @__PURE__ */ e(r, { gap: t, children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const l = i.getByTestId("equal-size-flex-row");
+      o(l).toHaveAttribute("data-gap", t);
+    });
+  }), s("Component Structure", () => {
+    n("should have single promotions-row-block element", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      ), l = t.querySelectorAll("promotions-row-block");
+      o(l).toHaveLength(1);
+    }), n("should have single EqualSizeFlexRow inside promotions-row-block", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      ), l = t.querySelector("promotions-row-block"), c = l == null ? void 0 : l.querySelectorAll('[data-testid="equal-size-flex-row"]');
+      o(c).toHaveLength(1);
+    }), n("should maintain hierarchy: promotions-row-block > EqualSizeFlexRow > children", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { "data-testid": "test-child", children: "Child" }) })
+      ), l = t.querySelector("promotions-row-block"), c = i.getByTestId("equal-size-flex-row"), a = i.getByTestId("test-child");
+      o(l).toContainElement(c), o(c).toContainElement(a);
+    });
+  }), s("Edge Cases", () => {
+    n("should handle empty children", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { children: null })
+      ), l = t.querySelector("promotions-row-block");
+      o(l).toBeInTheDocument();
+    }), n("should handle undefined children", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { children: void 0 })
+      ), l = t.querySelector("promotions-row-block");
+      o(l).toBeInTheDocument();
+    }), n("should handle conditional children", () => {
+      d(
+        /* @__PURE__ */ h(r, { children: [
+          /* @__PURE__ */ e("div", { "data-testid": "conditional-child", children: "Visible" }),
+          !1
+        ] })
+      ), o(i.getByTestId("conditional-child")).toBeInTheDocument(), o(i.queryByTestId("hidden-child")).not.toBeInTheDocument();
+    }), n("should handle array of children", () => {
+      const t = ["Item 1", "Item 2", "Item 3"];
+      d(
+        /* @__PURE__ */ e(r, { children: t.map(
+          (l, c) => /* @__PURE__ */ e("div", { "data-testid": `item-${c}`, children: l }, c)
+        ) })
+      ), t.forEach((l, c) => {
+        o(i.getByTestId(`item-${c}`)).toHaveTextContent(l);
+      });
+    }), n("should handle fragments", () => {
+      d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ h(g, { children: [
+          /* @__PURE__ */ e("div", { "data-testid": "fragment-child-1", children: "Child 1" }),
+          /* @__PURE__ */ e("div", { "data-testid": "fragment-child-2", children: "Child 2" })
+        ] }) })
+      ), o(i.getByTestId("fragment-child-1")).toBeInTheDocument(), o(i.getByTestId("fragment-child-2")).toBeInTheDocument();
+    }), n("should handle very long gap value", () => {
+      d(
+        /* @__PURE__ */ e(r, { gap: "10rem", children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "10rem");
+    }), n("should handle gap with calc() function", () => {
+      d(
+        /* @__PURE__ */ e(r, { gap: "calc(1rem + 2px)", children: /* @__PURE__ */ e("div", { children: "Child" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "calc(1rem + 2px)");
+    });
+  }), s("Integration", () => {
+    n("should render complete promotions row with multiple children and custom gap", () => {
+      d(
+        /* @__PURE__ */ h(r, { gap: "2.5rem", children: [
+          /* @__PURE__ */ e("div", { "data-testid": "promo-1", children: "Promo 1" }),
+          /* @__PURE__ */ e("div", { "data-testid": "promo-2", children: "Promo 2" }),
+          /* @__PURE__ */ e("div", { "data-testid": "promo-3", children: "Promo 3" })
+        ] })
+      );
+      const t = document.querySelector("promotions-row-block"), l = i.getByTestId("equal-size-flex-row");
+      o(t).toBeInTheDocument(), o(l).toHaveAttribute("data-gap", "2.5rem"), o(i.getByTestId("promo-1")).toBeInTheDocument(), o(i.getByTestId("promo-2")).toBeInTheDocument(), o(i.getByTestId("promo-3")).toBeInTheDocument();
+    }), n("should work with default gap and single child", () => {
+      d(
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { "data-testid": "single-promo", children: "Single Promotion" }) })
+      );
+      const t = i.getByTestId("equal-size-flex-row");
+      o(t).toHaveAttribute("data-gap", "1.5rem"), o(i.getByTestId("single-promo")).toBeInTheDocument();
+    }), n("should properly nest all elements", () => {
+      const { container: t } = d(
+        /* @__PURE__ */ e(r, { gap: "1rem", children: /* @__PURE__ */ h("div", { "data-testid": "nested-child", children: [
+          /* @__PURE__ */ e("h4", { children: "Nested Title" }),
+          /* @__PURE__ */ e("p", { children: "Nested Content" })
+        ] }) })
+      ), l = t.querySelector("promotions-row-block"), c = i.getByTestId("equal-size-flex-row"), a = i.getByTestId("nested-child"), u = i.getByRole("heading", { name: "Nested Title" }), p = i.getByText("Nested Content");
+      o(l).toContainElement(c), o(c).toContainElement(a), o(a).toContainElement(u), o(a).toContainElement(p);
+    });
+  }), s("Type Safety", () => {
+    n("should accept valid gap string values", () => {
+      ["1rem", "2em", "16px", "0", "calc(1rem + 2px)"].forEach((l) => {
+        const { unmount: c } = d(
+          /* @__PURE__ */ e(r, { gap: l, children: /* @__PURE__ */ e("div", { children: "Child" }) })
+        ), a = i.getByTestId("equal-size-flex-row");
+        o(a).toHaveAttribute("data-gap", l), c();
+      });
+    }), n("should accept ReactNode children", () => {
+      [
+        "text string",
+        123,
+        /* @__PURE__ */ e("div", { children: "Element" }, "1"),
+        [/* @__PURE__ */ e("div", { children: "Array Item 1" }, "2"), /* @__PURE__ */ e("div", { children: "Array Item 2" }, "3")],
+        null,
+        void 0
+      ].forEach((l) => {
+        const { unmount: c, container: a } = d(
+          /* @__PURE__ */ e(r, { children: l })
+        ), u = a.querySelector("promotions-row-block");
+        o(u).toBeInTheDocument(), c();
+      });
+    });
+  });
+});