@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/Tabs/Tabs2.js

@@ -1,54 +1,46 @@
-import { Badge as e } from "../Badge/Badge2.js";
-import { TAG_CONFIG as t } from "./tabTags.js";
 /* empty css     */
-import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { Fragment as ee, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Tabs/Tabs.tsx
-var ee = {
-	required: "Required",
-	recommended: "Recommended",
-	beta: "Beta",
-	experimental: "Experimental"
-};
-function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange: p, className: m = "", panelClassName: h = "", ariaLabel: ne, showOverflowControls: g = !0, showGroupLabels: _ = !0, overflowMode: re, variant: v = "underlined", fillContainer: ie = !1, renderPanel: y = !0, moreTabsLabel: ae = "More tabs", selectTabLabel: oe = "Select tab", scrollLeftLabel: se = "Scroll left", scrollRightLabel: ce = "Scroll right", tagLabels: b = ee }) {
-	let x = re ?? (d.length > 0 ? "menu" : "dropdown"), [le, ue] = o(te || u[0]?.id || ""), [de, S] = o(!1), [fe, C] = o(!1), [w, pe] = o(!1), [T, E] = o(!1), [D, O] = o(!1), [me, k] = o(-1), A = a(null), j = a(/* @__PURE__ */ new Map()), M = a(null), N = a(null), P = a(null), F = a([]), I = a(null), L = a(0), R = a(0), z = f ?? le, B = i(() => d.length > 0 ? d.map((e) => ({
+function s({ tabs: s, groups: c = [], defaultTab: te, activeTab: l, onTabChange: u, className: d = "", panelClassName: f = "", ariaLabel: p, showOverflowControls: m = !0, showGroupLabels: h = !0, overflowMode: g, variant: _ = "underlined", fillContainer: ne = !1, renderPanel: v = !0, moreTabsLabel: re = "More tabs", selectTabLabel: ie = "Select tab", scrollLeftLabel: y = "Scroll left", scrollRightLabel: ae = "Scroll right" }) {
+	let b = g ?? (c.length > 0 ? "menu" : "dropdown"), [x, oe] = i(te || s[0]?.id || ""), [se, S] = i(!1), [ce, C] = i(!1), [w, le] = i(!1), [T, E] = i(!1), [D, O] = i(!1), [ue, k] = i(-1), A = r(null), j = r(/* @__PURE__ */ new Map()), M = r(null), N = r(null), P = r(null), F = r([]), I = r(null), L = r(0), R = r(0), z = l ?? x, B = n(() => c.length > 0 ? c.map((e) => ({
 		group: e,
-		tabs: u.filter((t) => t.groupId === e.id)
+		tabs: s.filter((t) => t.groupId === e.id)
 	})) : [{
 		group: null,
-		tabs: u
-	}], [d, u]), V = i(() => B.flatMap(({ tabs: e }) => e), [B]), H = n((e) => {
-		f || ue(e), p?.(e), O(!1);
-	}, [f, p]), U = n((e, t) => {
+		tabs: s
+	}], [c, s]), V = n(() => B.flatMap(({ tabs: e }) => e), [B]), H = e((e) => {
+		l || oe(e), u?.(e), O(!1);
+	}, [l, u]), U = e((e, t) => {
 		let n;
 		switch (e.key) {
 			case "ArrowRight":
-				e.preventDefault(), n = t === u.length - 1 ? 0 : t + 1;
+				e.preventDefault(), n = t === s.length - 1 ? 0 : t + 1;
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), n = t === 0 ? u.length - 1 : t - 1;
+				e.preventDefault(), n = t === 0 ? s.length - 1 : t - 1;
 				break;
 			case "Home":
 				e.preventDefault(), n = 0;
 				break;
 			case "End":
-				e.preventDefault(), n = u.length - 1;
+				e.preventDefault(), n = s.length - 1;
 				break;
 			default: return;
 		}
-		let r = u[n];
+		let r = s[n];
 		r && (H(r.id), j.current.get(r.id)?.focus());
-	}, [u, H]), he = n((e, t) => {
+	}, [s, H]), de = e((e, t) => {
 		t ? j.current.set(e, t) : j.current.delete(e);
-	}, []), W = n(() => {
+	}, []), W = e(() => {
 		let e = A.current;
-		if (!e || !g) {
+		if (!e || !m) {
 			S(!1), C(!1);
 			return;
 		}
 		let { scrollLeft: t, scrollWidth: n, clientWidth: r } = e;
 		S(t > 0), C(t + r < n - 1);
-	}, [g]), G = n((e) => {
+	}, [m]), G = e((e) => {
 		let t = A.current;
 		if (!t) return;
 		let n = t.clientWidth * .75;
@@ -56,35 +48,35 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 			left: e === "left" ? -n : n,
 			behavior: "smooth"
 		}), I.current !== null && clearTimeout(I.current), I.current = setTimeout(W, 300);
-	}, [W]), K = n(() => {
+	}, [W]), K = e(() => {
 		if (!A.current || w) return;
 		let e = j.current.get(z);
 		if (!e) return;
 		let t = A.current, n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
 		n.left < r.left ? t.scrollLeft -= r.left - n.left + 8 : n.right > r.right && (t.scrollLeft += n.right - r.right + 8);
-	}, [z, w]), q = n(() => {
-		typeof window > "u" || x !== "dropdown" || pe(window.innerWidth < 480);
-	}, [x]), ge = n(() => {
+	}, [z, w]), q = e(() => {
+		typeof window > "u" || b !== "dropdown" || le(window.innerWidth < 480);
+	}, [b]), fe = e(() => {
 		E((e) => !e);
-	}, []), _e = n((e) => {
+	}, []), pe = e((e) => {
 		e.key === "Escape" && T && (e.preventDefault(), E(!1));
-	}, [T]), J = n((e) => {
+	}, [T]), J = e((e) => {
 		e.touches[0] && (L.current = e.touches[0].clientX);
-	}, []), Y = n((e) => {
+	}, []), Y = e((e) => {
 		e.touches[0] && (R.current = e.touches[0].clientX);
-	}, []), X = n(() => {
+	}, []), X = e(() => {
 		if (!L.current || !R.current) return;
 		let e = L.current - R.current;
 		if (Math.abs(e) > 50) {
-			let t = u.findIndex((e) => e.id === z), n = u[t + 1], r = u[t - 1];
+			let t = s.findIndex((e) => e.id === z), n = s[t + 1], r = s[t - 1];
 			e > 0 && n ? H(n.id) : e < 0 && r && H(r.id);
 		}
 		L.current = 0, R.current = 0;
 	}, [
 		z,
-		u,
+		s,
 		H
-	]), ve = n((e) => {
+	]), me = e((e) => {
 		let t = V.length;
 		switch (e.key) {
 			case "Escape":
@@ -107,10 +99,10 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 				break;
 			case "End": e.preventDefault(), k(t - 1), F.current[t - 1]?.focus();
 		}
-	}, [V.length]), ye = n((e) => {
+	}, [V.length]), he = e((e) => {
 		e.key === "Escape" && D && (e.preventDefault(), O(!1), k(-1));
 	}, [D]);
-	r(() => {
+	t(() => {
 		if (!T) return;
 		let e = (e) => {
 			M.current && !M.current.contains(e.target) && E(!1);
@@ -118,7 +110,7 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		return document.addEventListener("mousedown", e), () => {
 			document.removeEventListener("mousedown", e);
 		};
-	}, [T]), r(() => {
+	}, [T]), t(() => {
 		if (!D) return;
 		let e = (e) => {
 			N.current && !N.current.contains(e.target) && (O(!1), k(-1));
@@ -128,7 +120,7 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
-	}, [D]), r(() => {
+	}, [D]), t(() => {
 		if (D && F.current.length > 0) {
 			let e = V.findIndex((e) => e.id === z), t = e >= 0 ? e : 0;
 			k(t), requestAnimationFrame(() => {
@@ -139,16 +131,16 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		D,
 		V,
 		z
-	]), r(() => {
-		if (!u.find((e) => e.id === z)) {
-			let e = u[0];
+	]), t(() => {
+		if (!s.find((e) => e.id === z)) {
+			let e = s[0];
 			e && H(e.id);
 		}
 	}, [
-		u,
+		s,
 		z,
 		H
-	]), r(() => {
+	]), t(() => {
 		q(), W();
 		let e = () => {
 			q(), W();
@@ -156,79 +148,73 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 		return window.addEventListener("resize", e), () => {
 			window.removeEventListener("resize", e);
 		};
-	}, [q, W]), r(() => {
+	}, [q, W]), t(() => {
 		K();
-	}, [z, K]), r(() => {
+	}, [z, K]), t(() => {
 		W();
-	}, [u, W]), r(() => () => {
+	}, [s, W]), t(() => () => {
 		I.current !== null && clearTimeout(I.current);
 	}, []);
-	let Z = u.find((e) => e.id === z)?.content, be = u.find((e) => e.id === z)?.label, xe = d.length > 0;
+	let Z = s.find((e) => e.id === z)?.content, ge = s.find((e) => e.id === z)?.label, _e = c.length > 0;
 	F.current = [];
-	let Q = (e) => e.tag ? e.tag : e.required ? "required" : null, Se = (n, r) => {
-		let i = n.id === z, a = Q(n), o = a ? t[a] : null, s = a ? b[a] : null;
-		return /* @__PURE__ */ l("button", {
-			ref: (e) => {
-				he(n.id, e);
+	let Q = (e, t) => {
+		let n = e.id === z;
+		return /* @__PURE__ */ o("button", {
+			ref: (t) => {
+				de(e.id, t);
 			},
 			role: "tab",
-			"aria-selected": i,
-			"aria-controls": y ? `tabpanel-${n.id}` : void 0,
-			id: `tab-${n.id}`,
-			tabIndex: i ? 0 : -1,
-			className: `tabs__tab${i ? " tabs__tab--active" : ""}`,
+			"aria-selected": n,
+			"aria-controls": v ? `tabpanel-${e.id}` : void 0,
+			id: `tab-${e.id}`,
+			tabIndex: n ? 0 : -1,
+			className: `tabs__tab${n ? " tabs__tab--active" : ""}`,
 			onClick: () => {
-				H(n.id);
+				H(e.id);
 			},
 			onKeyDown: (e) => {
-				U(e, r), (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") && e.stopPropagation();
+				U(e, t), (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") && e.stopPropagation();
 			},
 			children: [
-				n.labelPrefix,
-				/* @__PURE__ */ c("span", {
+				e.labelPrefix,
+				/* @__PURE__ */ a("span", {
 					className: "tabs__tab-label",
-					children: n.label
-				}),
-				o && /* @__PURE__ */ c(e, {
-					variant: o.variant,
-					size: "small",
-					className: "tabs__tag-badge",
-					children: s
+					children: e.label
 				}),
-				n.labelExtra
+				e.labelExtra
 			]
-		}, n.id);
-	}, Ce = () => xe ? B.map(({ group: e, tabs: t }, n) => /* @__PURE__ */ l("div", {
+		}, e.id);
+	}, ve = () => _e ? B.map(({ group: e, tabs: t }, n) => /* @__PURE__ */ o("div", {
 		className: "tabs__group",
-		children: [e && /* @__PURE__ */ l(s, { children: [n > 0 && /* @__PURE__ */ c("div", {
+		children: [e && /* @__PURE__ */ o(ee, { children: [n > 0 && /* @__PURE__ */ a("div", {
 			className: "tabs__separator",
 			role: "separator",
 			"aria-hidden": "true"
-		}), _ && /* @__PURE__ */ c("span", {
+		}), h && /* @__PURE__ */ a("span", {
 			className: "tabs__group-label",
 			children: e.label
-		})] }), /* @__PURE__ */ c("div", {
+		})] }), /* @__PURE__ */ a("div", {
 			className: "tabs__group-tabs",
 			children: t.map((e) => {
-				let t = u.findIndex((t) => t.id === e.id);
-				return Se(e, t);
+				let t = s.findIndex((t) => t.id === e.id);
+				return Q(e, t);
 			})
 		})]
-	}, e?.id || "default")) : u.map((e, t) => Se(e, t)), we = () => x !== "menu" || !g ? null : /* @__PURE__ */ l("div", {
+	}, e?.id || "default")) : s.map((e, t) => Q(e, t)), ye = () => b !== "menu" || !m ? null : /* @__PURE__ */ o("div", {
 		className: "tabs__overflow",
 		ref: N,
-		children: [/* @__PURE__ */ c("button", {
+		children: [/* @__PURE__ */ a("button", {
 			ref: P,
 			type: "button",
 			className: "tabs__overflow-btn",
 			onClick: () => {
 				O(!D);
 			},
-			onKeyDown: ye,
-			"aria-label": ae,
+			onKeyDown: he,
+			"aria-label": re,
 			"aria-expanded": D,
 			"aria-haspopup": "menu",
-			children: /* @__PURE__ */ l("svg", {
+			children: /* @__PURE__ */ o("svg", {
 				width: "20",
 				height: "20",
 				viewBox: "0 0 24 24",
@@ -238,75 +224,70 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
 				children: [
-					/* @__PURE__ */ c("circle", {
+					/* @__PURE__ */ a("circle", {
 						cx: "12",
 						cy: "12",
 						r: "1"
 					}),
-					/* @__PURE__ */ c("circle", {
+					/* @__PURE__ */ a("circle", {
 						cx: "12",
 						cy: "5",
 						r: "1"
 					}),
-					/* @__PURE__ */ c("circle", {
+					/* @__PURE__ */ a("circle", {
 						cx: "12",
 						cy: "19",
 						r: "1"
 					})
 				]
 			})
-		}), D && /* @__PURE__ */ c("div", {
+		}), D && /* @__PURE__ */ a("div", {
 			className: "tabs__overflow-menu",
 			role: "menu",
-			onKeyDown: ve,
-			children: B.map(({ group: n, tabs: r }) => /* @__PURE__ */ l("div", {
+			onKeyDown: me,
+			children: B.map(({ group: e, tabs: t }) => /* @__PURE__ */ o("div", {
 				className: "tabs__overflow-group",
-				children: [n && _ && /* @__PURE__ */ c("div", {
+				children: [e && h && /* @__PURE__ */ a("div", {
 					className: "tabs__overflow-group-label",
-					children: n.label
-				}), r.map((n) => {
-					let r = n.id === z, i = V.findIndex((e) => e.id === n.id), a = Q(n), o = a ? t[a] : null, s = a ? b[a] : null;
-					return /* @__PURE__ */ l("button", {
+					children: e.label
+				}), t.map((e) => {
+					let t = e.id === z, n = V.findIndex((t) => t.id === e.id);
+					return /* @__PURE__ */ o("button", {
 						ref: (e) => {
-							e && (F.current[i] = e);
+							e && (F.current[n] = e);
 						},
 						role: "menuitem",
-						tabIndex: me === i ? 0 : -1,
-						className: `tabs__overflow-item ${r ? "tabs__overflow-item--active" : ""}`,
+						tabIndex: ue === n ? 0 : -1,
+						className: `tabs__overflow-item ${t ? "tabs__overflow-item--active" : ""}`,
 						onClick: () => {
-							H(n.id);
+							H(e.id);
 						},
 						children: [
-							n.labelPrefix,
-							/* @__PURE__ */ c("span", { children: n.label }),
-							o && /* @__PURE__ */ c(e, {
-								variant: o.variant,
-								size: "small",
-								children: s
-							}),
-							n.labelExtra
+							e.labelPrefix,
+							/* @__PURE__ */ a("span", { children: e.label }),
+							e.labelExtra
 						]
-					}, n.id);
+					}, e.id);
 				})]
-			}, n?.id || "default"))
+			}, e?.id || "default"))
 		})]
-	}), $ = v === "segmented" || v === "compact";
-	return x === "dropdown" && w && !$ ? /* @__PURE__ */ l("div", {
-		className: `tabs tabs--mobile-dropdown ${m}`,
-		children: [/* @__PURE__ */ l("div", {
+	}), $ = _ === "segmented" || _ === "compact";
+	return b === "dropdown" && w && !$ ? /* @__PURE__ */ o("div", {
+		className: `tabs tabs--mobile-dropdown ${d}`,
+		children: [/* @__PURE__ */ o("div", {
 			className: "tabs__dropdown-container",
 			ref: M,
-			children: [/* @__PURE__ */ l("button", {
+			children: [/* @__PURE__ */ o("button", {
 				className: "tabs__dropdown-trigger",
-				onClick: ge,
-				onKeyDown: _e,
+				onClick: fe,
+				onKeyDown: pe,
 				"aria-expanded": T,
 				"aria-haspopup": "listbox",
-				"aria-label": ne || oe,
-				children: [/* @__PURE__ */ c("span", {
+				"aria-label": p || ie,
+				children: [/* @__PURE__ */ a("span", {
 					className: "tabs__dropdown-label",
-					children: be
-				}), /* @__PURE__ */ c("svg", {
+					children: ge
+				}), /* @__PURE__ */ a("svg", {
 					className: `tabs__dropdown-arrow ${T ? "tabs__dropdown-arrow--open" : ""}`,
 					width: "16",
 					height: "16",
@@ -314,7 +295,7 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 					fill: "none",
 					xmlns: "http://www.w3.org/2000/svg",
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ c("path", {
+					children: /* @__PURE__ */ a("path", {
 						d: "M4 6L8 10L12 6",
 						stroke: "currentColor",
 						strokeWidth: "2",
@@ -322,10 +303,10 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 						strokeLinejoin: "round"
 					})
 				})]
-			}), T && /* @__PURE__ */ c("div", {
+			}), T && /* @__PURE__ */ a("div", {
 				className: "tabs__dropdown-menu",
 				role: "listbox",
-				children: u.map((e) => /* @__PURE__ */ c("button", {
+				children: s.map((e) => /* @__PURE__ */ a("button", {
 					role: "option",
 					"aria-selected": e.id === z,
 					className: `tabs__dropdown-item ${e.id === z ? "tabs__dropdown-item--active" : ""}`,
@@ -335,37 +316,37 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 					children: e.label
 				}, e.id))
 			})]
-		}), y && /* @__PURE__ */ c("div", {
+		}), v && /* @__PURE__ */ a("div", {
 			id: `tabpanel-${z}`,
 			role: "tabpanel",
 			"aria-labelledby": `tab-${z}`,
-			className: `tabs__panel ${h}`.trim(),
+			className: `tabs__panel ${f}`.trim(),
 			tabIndex: 0,
 			onTouchStart: J,
 			onTouchMove: Y,
 			onTouchEnd: X,
 			children: Z
 		})]
-	}) : /* @__PURE__ */ l("div", {
-		className: `tabs ${x === "menu" ? "tabs--overflow-menu" : ""} ${v === "segmented" ? "tabs--variant-segmented" : v === "compact" ? "tabs--variant-compact" : ""} ${$ && ie ? "tabs--fill-container" : ""} ${m}`.replace(/\s+/g, " ").trim(),
-		children: [/* @__PURE__ */ l("div", {
+	}) : /* @__PURE__ */ o("div", {
+		className: `tabs ${b === "menu" ? "tabs--overflow-menu" : ""} ${_ === "segmented" ? "tabs--variant-segmented" : _ === "compact" ? "tabs--variant-compact" : ""} ${$ && ne ? "tabs--fill-container" : ""} ${d}`.replace(/\s+/g, " ").trim(),
+		children: [/* @__PURE__ */ o("div", {
 			className: "tabs__container",
 			children: [
-				g && de && /* @__PURE__ */ c("button", {
+				m && se && /* @__PURE__ */ a("button", {
 					className: "tabs__scroll-arrow tabs__scroll-arrow--left",
 					onClick: () => {
 						G("left");
 					},
-					"aria-label": se,
+					"aria-label": y,
 					tabIndex: -1,
-					children: /* @__PURE__ */ c("svg", {
+					children: /* @__PURE__ */ a("svg", {
 						width: "20",
 						height: "20",
 						viewBox: "0 0 20 20",
 						fill: "none",
 						xmlns: "http://www.w3.org/2000/svg",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ c("path", {
+						children: /* @__PURE__ */ a("path", {
 							d: "M12 15L7 10L12 5",
 							stroke: "currentColor",
 							strokeWidth: "2",
@@ -374,36 +355,36 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 						})
 					})
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ a("div", {
 					ref: A,
 					className: "tabs__list",
 					role: "tablist",
-					"aria-label": ne,
+					"aria-label": p,
 					onScroll: W,
 					onKeyDown: (e) => {
-						let t = u.findIndex((e) => e.id === z);
+						let t = s.findIndex((e) => e.id === z);
 						t < 0 || U(e, t);
 					},
-					onTouchStart: x === "dropdown" ? J : void 0,
-					onTouchMove: x === "dropdown" ? Y : void 0,
-					onTouchEnd: x === "dropdown" ? X : void 0,
-					children: Ce()
+					onTouchStart: b === "dropdown" ? J : void 0,
+					onTouchMove: b === "dropdown" ? Y : void 0,
+					onTouchEnd: b === "dropdown" ? X : void 0,
+					children: ve()
 				}),
-				g && fe && /* @__PURE__ */ c("button", {
+				m && ce && /* @__PURE__ */ a("button", {
 					className: "tabs__scroll-arrow tabs__scroll-arrow--right",
 					onClick: () => {
 						G("right");
 					},
-					"aria-label": ce,
+					"aria-label": ae,
 					tabIndex: -1,
-					children: /* @__PURE__ */ c("svg", {
+					children: /* @__PURE__ */ a("svg", {
 						width: "20",
 						height: "20",
 						viewBox: "0 0 20 20",
 						fill: "none",
 						xmlns: "http://www.w3.org/2000/svg",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ c("path", {
+						children: /* @__PURE__ */ a("path", {
 							d: "M8 5L13 10L8 15",
 							stroke: "currentColor",
 							strokeWidth: "2",
@@ -412,20 +393,20 @@ function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange:
 						})
 					})
 				}),
-				we()
+				ye()
 			]
-		}), y && /* @__PURE__ */ c("div", {
+		}), v && /* @__PURE__ */ a("div", {
 			id: `tabpanel-${z}`,
 			role: "tabpanel",
 			"aria-labelledby": `tab-${z}`,
-			className: `tabs__panel ${h}`.trim(),
+			className: `tabs__panel ${f}`.trim(),
 			tabIndex: 0,
 			children: Z
 		})]
 	});
 }
 //#endregion
-export { t as TAG_CONFIG, u as Tabs };
+export { s as Tabs };
 
 //# sourceMappingURL=Tabs2.js.map
 import "../../assets/components/Tabs/Tabs.css";