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

package/dist/components/TabbedContent/TabbedContent.test.js

@@ -0,0 +1,654 @@
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { v as f, d, b as m, i, r as s, g as t, w as r } from "../../react.esm-DLSrfVwM.mjs";
+import { act as b } from "react";
+import { TabbedContent as c } from "./TabbedContent.js";
+import { TabNavigation as h } from "../TabNavigation/TabNavigation.js";
+import { TabContent as g } from "../TabContent/TabContent.js";
+f.mock("../TabNavigation", () => ({
+  default: f.fn(
+    ({ tabs: o, onTabChanged: n, rightSideContent: e }) => /* @__PURE__ */ v("div", { "data-testid": "tab-navigation", children: [
+      /* @__PURE__ */ a("div", { "data-testid": "right-side-content", children: e }),
+      o.map(
+        (l, C) => /* @__PURE__ */ a(
+          "button",
+          {
+            "data-testid": `nav-tab-${C}`,
+            onClick: () => n(l),
+            children: l.title
+          },
+          C
+        )
+      )
+    ] })
+  )
+}));
+f.mock("../TabContent", () => ({
+  default: f.fn(
+    ({ content: o, classname: n }) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: n,
+        "data-testid": "tab-content",
+        children: o
+      }
+    )
+  )
+}));
+d("TabbedContent Component", () => {
+  m(() => {
+    f.clearAllMocks();
+  });
+  const o = (n) => ({
+    title: "Test Tab",
+    content: "Test Content",
+    classname: "test-class",
+    button: {
+      label: "Test",
+      gradientStartColor: "#ff0000",
+      gradientEndColor: "#00ff00",
+      buttonBgColor: "#ffffff",
+      buttonHoverBgColor: "#000000",
+      buttonTextColor: "#000000",
+      buttonHoverTextColor: "#ffffff",
+      borderHoverColor: "#cccccc"
+    },
+    ...n
+  });
+  d("Basic Rendering", () => {
+    i("renders tabbed-content custom element", () => {
+      const n = [o()], { container: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e.querySelector("tabbed-content")).toBeInTheDocument();
+    }), i("renders TabNavigation component", () => {
+      const n = [o()], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-navigation")).toBeInTheDocument();
+    }), i("renders TabContent component", () => {
+      const n = [o()], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content")).toBeInTheDocument();
+    }), i("returns JSX.Element", () => {
+      const n = [o()], e = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e.container.firstChild).toBeInstanceOf(HTMLElement);
+    });
+  }), d("State Initialization", () => {
+    i("initializes with first tab as current tab", () => {
+      const n = [
+        o({ title: "First", content: "First Content" }),
+        o({ title: "Second", content: "Second Content" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n })), l = e("tab-content");
+      t(l.textContent).toBe("First Content");
+    }), i("initializes with tabs[0] content", () => {
+      const n = [
+        o({ content: "Expected Content" }),
+        o({ content: "Other Content" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("Expected Content");
+    }), i("initializes with tabs[0] classname", () => {
+      const n = [
+        o({ classname: "first-tab" }),
+        o({ classname: "second-tab" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content")).toHaveClass("first-tab");
+    }), i("handles single tab array", () => {
+      const n = [o({ title: "Only Tab" })], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content")).toBeInTheDocument();
+    });
+  }), d("TabNavigation Props", () => {
+    i("passes tabs array to TabNavigation", () => {
+      const n = [o(), o()];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({ tabs: n }),
+        t.anything()
+      );
+    }), i("passes onTabChanged callback to TabNavigation", () => {
+      const n = [o()];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({
+          onTabChanged: t.any(Function)
+        }),
+        t.anything()
+      );
+    }), i("passes rightSideContent to TabNavigation when provided", () => {
+      const n = [o()], e = /* @__PURE__ */ a("div", { children: "Right Side" });
+      s(/* @__PURE__ */ a(c, { navRightSideContent: e, tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({ rightSideContent: e }),
+        t.anything()
+      );
+    }), i("passes undefined rightSideContent when not provided", () => {
+      const n = [o()];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({ rightSideContent: void 0 }),
+        t.anything()
+      );
+    });
+  }), d("TabContent Props", () => {
+    i("passes current tab content to TabContent", () => {
+      const n = [o({ content: "Current Tab Content" })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ content: "Current Tab Content" }),
+        t.anything()
+      );
+    }), i("passes current tab classname to TabContent when provided", () => {
+      const n = [o({ classname: "custom-class" })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "custom-class" }),
+        t.anything()
+      );
+    }), i("passes empty string classname when currentTab.classname is undefined", () => {
+      const n = [o({ classname: void 0 })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "" }),
+        t.anything()
+      );
+    }), i("passes empty string classname when currentTab.classname is empty string", () => {
+      const n = [o({ classname: "" })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "" }),
+        t.anything()
+      );
+    });
+  }), d("Tab Switching", () => {
+    i("updates current tab when onTabChanged is called", async () => {
+      const n = [
+        o({ title: "Tab 1", content: "Content 1" }),
+        o({ title: "Tab 2", content: "Content 2" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("Content 1");
+      const l = e("nav-tab-1");
+      await b(async () => {
+        l.click();
+      }), await r(() => {
+        t(e("tab-content").textContent).toBe("Content 2");
+      });
+    }), i("updates TabContent classname when tab switches", async () => {
+      const n = [
+        o({ classname: "tab-1-class" }),
+        o({ classname: "tab-2-class" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content")).toHaveClass("tab-1-class"), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => {
+        t(e("tab-content")).toHaveClass("tab-2-class");
+      });
+    }), i("switches between multiple tabs", async () => {
+      const n = [
+        o({ title: "Tab 1", content: "Content 1" }),
+        o({ title: "Tab 2", content: "Content 2" }),
+        o({ title: "Tab 3", content: "Content 3" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("Content 1"), await b(async () => {
+        e("nav-tab-2").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Content 3")), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Content 2")), await b(async () => {
+        e("nav-tab-0").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Content 1"));
+    }), i("can switch back to first tab after changing", async () => {
+      const n = [
+        o({ content: "First" }),
+        o({ content: "Second" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Second")), await b(async () => {
+        e("nav-tab-0").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("First"));
+    });
+  }), d("Tab Type - Required Fields", () => {
+    i("handles tab with title and content only", () => {
+      const n = [{
+        title: "Simple Tab",
+        content: "Simple Content"
+      }], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("Simple Content");
+    }), i("handles string content", () => {
+      const n = [o({ content: "String content" })], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("String content");
+    }), i("handles JSX.Element content", () => {
+      const e = [o({ content: /* @__PURE__ */ a("div", { "data-testid": "jsx-content", children: "JSX Content" }) })], { getByTestId: l } = s(/* @__PURE__ */ a(c, { tabs: e }));
+      t(l("jsx-content")).toBeInTheDocument();
+    }), i("handles number content", () => {
+      const n = [o({ content: 42 })], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("42");
+    }), i("handles null content", () => {
+      const n = [o({ content: null })], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("");
+    }), i("handles undefined content", () => {
+      const n = [o({ content: void 0 })], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("");
+    });
+  }), d("Tab Type - Optional Fields", () => {
+    i("handles tab without classname", () => {
+      s(/* @__PURE__ */ a(c, { tabs: [{
+        title: "Tab",
+        content: "Content"
+      }] })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "" }),
+        t.anything()
+      );
+    }), i("handles tab without button config", () => {
+      const n = [{
+        title: "Tab",
+        content: "Content"
+      }], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-navigation")).toBeInTheDocument();
+    }), i("handles tab with partial button config", () => {
+      const n = [{
+        title: "Tab",
+        content: "Content",
+        button: {
+          label: "Label",
+          gradientStartColor: "#ff0000",
+          gradientEndColor: "#00ff00",
+          buttonBgColor: "#ffffff",
+          buttonHoverBgColor: "#000000",
+          buttonTextColor: "#000000",
+          buttonHoverTextColor: "#ffffff"
+          // borderHoverColor omitted (optional)
+        }
+      }];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("handles tab with full button config including borderHoverColor", () => {
+      const n = [o()];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    });
+  }), d("Multiple Tabs", () => {
+    i("handles two tabs", () => {
+      const n = [
+        o({ title: "Tab 1" }),
+        o({ title: "Tab 2" })
+      ], { getAllByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n })), l = e(/nav-tab-/);
+      t(l).toHaveLength(2);
+    }), i("handles many tabs", () => {
+      const n = Array.from(
+        { length: 10 },
+        (C, T) => o({ title: `Tab ${T}`, content: `Content ${T}` })
+      ), { getAllByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n })), l = e(/nav-tab-/);
+      t(l).toHaveLength(10);
+    }), i("handles tabs with different classnames", async () => {
+      const n = [
+        o({ classname: "class-a" }),
+        o({ classname: "class-b" }),
+        o({ classname: "class-c" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content")).toHaveClass("class-a"), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => t(e("tab-content")).toHaveClass("class-b")), await b(async () => {
+        e("nav-tab-2").click();
+      }), await r(() => t(e("tab-content")).toHaveClass("class-c"));
+    }), i("handles tabs with mixed classname presence", async () => {
+      const n = [
+        o({ classname: "has-class" }),
+        o({ classname: void 0 }),
+        o({ classname: "" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content")).toHaveClass("has-class"), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => t(e("tab-content").className).toBe("")), await b(async () => {
+        e("nav-tab-2").click();
+      }), await r(() => t(e("tab-content").className).toBe(""));
+    });
+  }), d("navRightSideContent Prop", () => {
+    i("renders navRightSideContent when provided", () => {
+      const n = [o()], e = /* @__PURE__ */ a("div", { "data-testid": "right-content", children: "Right" }), { getByTestId: l } = s(
+        /* @__PURE__ */ a(c, { navRightSideContent: e, tabs: n })
+      );
+      t(l("right-side-content").textContent).toBe("Right");
+    }), i("handles string navRightSideContent", () => {
+      const n = [o()], { getByTestId: e } = s(
+        /* @__PURE__ */ a(c, { navRightSideContent: "Right Side Text", tabs: n })
+      );
+      t(e("right-side-content").textContent).toBe("Right Side Text");
+    }), i("handles JSX navRightSideContent", () => {
+      const n = [o()], e = /* @__PURE__ */ a("button", { "data-testid": "right-button", children: "Click" }), { getByTestId: l } = s(
+        /* @__PURE__ */ a(c, { navRightSideContent: e, tabs: n })
+      );
+      t(l("right-button")).toBeInTheDocument();
+    }), i("handles complex navRightSideContent", () => {
+      const n = [o()], e = /* @__PURE__ */ v("div", { children: [
+        /* @__PURE__ */ a("span", { children: "Label" }),
+        /* @__PURE__ */ a("input", { "aria-label": "test input", "data-testid": "input", type: "text" })
+      ] }), { getByTestId: l } = s(
+        /* @__PURE__ */ a(c, { navRightSideContent: e, tabs: n })
+      );
+      t(l("input")).toBeInTheDocument();
+    }), i("renders without navRightSideContent when not provided", () => {
+      const n = [o()], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("right-side-content").textContent).toBe("");
+    });
+  }), d("Classname Logic", () => {
+    i("uses ternary operator for classname (truthy classname)", () => {
+      const n = [o({ classname: "my-class" })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "my-class" }),
+        t.anything()
+      );
+    }), i("uses ternary operator for classname (falsy classname)", () => {
+      const n = [o({ classname: void 0 })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "" }),
+        t.anything()
+      );
+    }), i("treats empty string classname as falsy in ternary", () => {
+      const n = [o({ classname: "" })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "" }),
+        t.anything()
+      );
+    }), i("preserves non-empty classname strings", () => {
+      const n = [o({ classname: "a b c" })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(g).toHaveBeenCalledWith(
+        t.objectContaining({ classname: "a b c" }),
+        t.anything()
+      );
+    });
+  }), d("onTabChanged Callback", () => {
+    i("calls setCurrentTab with new tab", async () => {
+      const n = [
+        o({ title: "First" }),
+        o({ title: "Second" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(g).toHaveBeenLastCalledWith(
+        t.objectContaining({ content: n[0].content }),
+        t.anything()
+      ), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => {
+        t(g).toHaveBeenLastCalledWith(
+          t.objectContaining({ content: n[1].content }),
+          t.anything()
+        );
+      });
+    }), i("accepts Tab type parameter", () => {
+      const n = [o(), o()];
+      s(/* @__PURE__ */ a(c, { tabs: n }));
+      const C = f.mocked(h).mock.calls[0][0].onTabChanged;
+      t(C).toBeDefined(), C && t(() => b(() => C(n[1]))).not.toThrow();
+    }), i("returns void", () => {
+      const n = [o(), o()];
+      s(/* @__PURE__ */ a(c, { tabs: n }));
+      const C = f.mocked(h).mock.calls[0][0].onTabChanged;
+      if (t(C).toBeDefined(), C) {
+        let T;
+        b(() => {
+          T = C(n[1]);
+        }), t(T).toBeUndefined();
+      }
+    });
+  }), d("Type Safety", () => {
+    i("accepts Tab array with required fields only", () => {
+      const n = [
+        { title: "Tab 1", content: "Content 1" },
+        { title: "Tab 2", content: "Content 2" }
+      ];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("accepts Tab array with all optional fields", () => {
+      const n = [o()];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("accepts string as React.ReactNode content", () => {
+      const n = [{ title: "Tab", content: "string" }];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("accepts JSX.Element as React.ReactNode content", () => {
+      const n = [{ title: "Tab", content: /* @__PURE__ */ a("div", { children: "JSX" }) }];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("accepts number as React.ReactNode content", () => {
+      const n = [{ title: "Tab", content: 42 }];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("accepts null as React.ReactNode content", () => {
+      const n = [{ title: "Tab", content: null }];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("accepts undefined as React.ReactNode content", () => {
+      const n = [{ title: "Tab", content: void 0 }];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("accepts optional navRightSideContent", () => {
+      const n = [o()];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow(), t(() => s(/* @__PURE__ */ a(c, { navRightSideContent: "text", tabs: n }))).not.toThrow();
+    }), i("throws error with empty tabs array", () => {
+      const n = [], e = f.spyOn(console, "error").mockImplementation(() => {
+      });
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).toThrow(), e.mockRestore();
+    });
+  }), d("Button Configuration", () => {
+    i("passes tab with gradient colors", () => {
+      const n = [o({
+        button: {
+          label: "Gradient Button",
+          gradientStartColor: "#ff0000",
+          gradientEndColor: "#0000ff",
+          buttonBgColor: "#ffffff",
+          buttonHoverBgColor: "#000000",
+          buttonTextColor: "#333333",
+          buttonHoverTextColor: "#ffffff"
+        }
+      })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({
+          tabs: t.arrayContaining([
+            t.objectContaining({
+              button: t.objectContaining({
+                gradientStartColor: "#ff0000",
+                gradientEndColor: "#0000ff"
+              })
+            })
+          ])
+        }),
+        t.anything()
+      );
+    }), i("passes tab with button background colors", () => {
+      const n = [o({
+        button: {
+          label: "Button",
+          gradientStartColor: "#ff0000",
+          gradientEndColor: "#00ff00",
+          buttonBgColor: "#eeeeee",
+          buttonHoverBgColor: "#dddddd",
+          buttonTextColor: "#000000",
+          buttonHoverTextColor: "#ffffff"
+        }
+      })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({
+          tabs: t.arrayContaining([
+            t.objectContaining({
+              button: t.objectContaining({
+                buttonBgColor: "#eeeeee",
+                buttonHoverBgColor: "#dddddd"
+              })
+            })
+          ])
+        }),
+        t.anything()
+      );
+    }), i("passes tab with text colors", () => {
+      const n = [o({
+        button: {
+          label: "Button",
+          gradientStartColor: "#ff0000",
+          gradientEndColor: "#00ff00",
+          buttonBgColor: "#ffffff",
+          buttonHoverBgColor: "#000000",
+          buttonTextColor: "#ff0000",
+          buttonHoverTextColor: "#00ff00"
+        }
+      })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({
+          tabs: t.arrayContaining([
+            t.objectContaining({
+              button: t.objectContaining({
+                buttonTextColor: "#ff0000",
+                buttonHoverTextColor: "#00ff00"
+              })
+            })
+          ])
+        }),
+        t.anything()
+      );
+    }), i("passes tab with optional borderHoverColor", () => {
+      const n = [o({
+        button: {
+          label: "Button",
+          gradientStartColor: "#ff0000",
+          gradientEndColor: "#00ff00",
+          buttonBgColor: "#ffffff",
+          buttonHoverBgColor: "#000000",
+          buttonTextColor: "#000000",
+          buttonHoverTextColor: "#ffffff",
+          borderHoverColor: "#ff00ff"
+        }
+      })];
+      s(/* @__PURE__ */ a(c, { tabs: n })), t(h).toHaveBeenCalledWith(
+        t.objectContaining({
+          tabs: t.arrayContaining([
+            t.objectContaining({
+              button: t.objectContaining({
+                borderHoverColor: "#ff00ff"
+              })
+            })
+          ])
+        }),
+        t.anything()
+      );
+    });
+  }), d("Integration Tests", () => {
+    i("orchestrates TabNavigation and TabContent correctly", async () => {
+      const n = [
+        o({
+          title: "Videos",
+          content: /* @__PURE__ */ a("div", { children: "Video List" }),
+          classname: "videos-panel"
+        }),
+        o({
+          title: "Photos",
+          content: /* @__PURE__ */ a("div", { children: "Photo Gallery" }),
+          classname: "photos-panel"
+        })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(h).toHaveBeenCalledWith(
+        t.objectContaining({ tabs: n }),
+        t.anything()
+      ), t(e("tab-content")).toHaveClass("videos-panel"), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => {
+        t(e("tab-content")).toHaveClass("photos-panel");
+      });
+    }), i("handles complete tabbed interface workflow", async () => {
+      const n = [
+        {
+          title: "Tab 1",
+          content: "Content 1",
+          classname: "tab-1",
+          button: {
+            label: "Button 1",
+            gradientStartColor: "#ff0000",
+            gradientEndColor: "#00ff00",
+            buttonBgColor: "#ffffff",
+            buttonHoverBgColor: "#000000",
+            buttonTextColor: "#000000",
+            buttonHoverTextColor: "#ffffff"
+          }
+        },
+        {
+          title: "Tab 2",
+          content: "Content 2",
+          classname: "tab-2"
+        },
+        {
+          title: "Tab 3",
+          content: "Content 3"
+        }
+      ], e = /* @__PURE__ */ a("button", { children: "Action" }), { getByTestId: l } = s(
+        /* @__PURE__ */ a(
+          c,
+          {
+            navRightSideContent: e,
+            tabs: n
+          }
+        )
+      );
+      t(l("tab-navigation")).toBeInTheDocument(), t(l("tab-content")).toBeInTheDocument(), t(l("right-side-content").textContent).toBe("Action"), t(l("tab-content").textContent).toBe("Content 1"), t(l("tab-content")).toHaveClass("tab-1"), await b(async () => {
+        l("nav-tab-2").click();
+      }), await r(() => {
+        t(l("tab-content").textContent).toBe("Content 3"), t(l("tab-content").className).toBe("");
+      });
+    }), i("maintains state across tab switches", async () => {
+      const n = [
+        o({ title: "A", content: "Content A" }),
+        o({ title: "B", content: "Content B" }),
+        o({ title: "C", content: "Content C" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("Content A"), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Content B")), await b(async () => {
+        e("nav-tab-2").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Content C")), await b(async () => {
+        e("nav-tab-0").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Content A")), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("Content B"));
+    }), i("works with dynamic content types", async () => {
+      const n = [
+        o({ content: "String content" }),
+        o({ content: /* @__PURE__ */ a("div", { children: "JSX content" }) }),
+        o({ content: 123 }),
+        o({ content: null })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content").textContent).toBe("String content"), await b(async () => {
+        e("nav-tab-1").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("JSX content")), await b(async () => {
+        e("nav-tab-2").click();
+      }), await r(() => t(e("tab-content").textContent).toBe("123")), await b(async () => {
+        e("nav-tab-3").click();
+      }), await r(() => t(e("tab-content").textContent).toBe(""));
+    });
+  }), d("Edge Cases", () => {
+    i("throws error with empty tabs array", () => {
+      const n = [], e = f.spyOn(console, "error").mockImplementation(() => {
+      });
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).toThrow(), e.mockRestore();
+    }), i("handles tab with very long title", () => {
+      const n = "A".repeat(1e3), e = [o({ title: n })];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: e }))).not.toThrow();
+    }), i("handles tab with complex nested JSX content", () => {
+      const e = [o({ content: /* @__PURE__ */ v("div", { children: [
+        /* @__PURE__ */ v("header", { children: [
+          /* @__PURE__ */ a("h1", { children: "Title" }),
+          /* @__PURE__ */ a("nav", { children: /* @__PURE__ */ v("ul", { children: [
+            /* @__PURE__ */ a("li", { children: "Item 1" }),
+            /* @__PURE__ */ a("li", { children: "Item 2" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ a("main", { children: /* @__PURE__ */ a("article", { children: "Content" }) })
+      ] }) })];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: e }))).not.toThrow();
+    }), i("handles rapid tab switching", async () => {
+      const n = [
+        o({ content: "A" }),
+        o({ content: "B" }),
+        o({ content: "C" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      await b(async () => {
+        e("nav-tab-1").click(), e("nav-tab-2").click(), e("nav-tab-0").click(), e("nav-tab-1").click();
+      }), await r(() => {
+        t(e("tab-content").textContent).toBe("B");
+      });
+    }), i("handles clicking same tab multiple times", () => {
+      const n = [
+        o({ content: "First" }),
+        o({ content: "Second" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      e("nav-tab-0").click(), e("nav-tab-0").click(), e("nav-tab-0").click(), t(e("tab-content").textContent).toBe("First");
+    }), i("handles tab with all optional fields as undefined", () => {
+      const n = [{
+        title: "Tab",
+        content: "Content",
+        classname: void 0,
+        button: void 0
+      }];
+      t(() => s(/* @__PURE__ */ a(c, { tabs: n }))).not.toThrow();
+    }), i("handles special characters in classnames", () => {
+      const n = [
+        o({ classname: "tab-1_active--selected" })
+      ], { getByTestId: e } = s(/* @__PURE__ */ a(c, { tabs: n }));
+      t(e("tab-content")).toHaveClass("tab-1_active--selected");
+    });
+  });
+});

package/dist/components/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { useState as l, useRef as V } from "react";
 import { classes as f } from "../../utils/helpers.js";
-import { s as e, C as k, A as w } from "../../Form.module-Cd8qH2rj.mjs";
+import { s as e, C as k, A as w } from "../../Form.module-CarfWK5T.mjs";
 function T(m) {
   var o, d, u;
   const { name: i, label: h, rows: p, width: _, helpText: v, ...x } = m, [C, N] = l(`${e["form-field__input"]}`), t = V(null), [r, n] = l(""), [c, b] = l("clean"), g = `input-width--${_}`, y = () => {