@pantheon-systems/pds-toolkit-react 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/index.js

@@ -13427,11 +13427,15 @@ var ts = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		},
 		...s
 	}, f && /* @__PURE__ */ e.createElement("aside", { className: `${c}__sidebar` }, /* @__PURE__ */ e.createElement("div", { className: `${c}__sidebar-inner` }, f)), /* @__PURE__ */ e.createElement("div", { className: `${c}__content` }, d));
-}, Ls = ({ children: t, className: n, gridGap: r = "xl", mobileGridGap: i, secondSidebarMobileLocation: a = "after", secondSidebarWidth: o, secondSidebarWidthMax: s, secondSidebarWidthMin: c, sidebarLocation: l = "right", sidebarMobileLocation: u = "after", sidebarWidth: d = "33%", sidebarWidthMax: f = 25, sidebarWidthMin: p = 15, ...m }) => {
-	let h = "pds-sidebar-layout", g = (e) => e === "none" ? "0" : `var(--pds-spacing-${e})`, _ = g(r), v = g(i ?? r), y = _t(t), b = !!y["second-sidebar"];
+}, Ls = ({ children: t, className: n, gridGap: r = "xl", mobileGridGap: i, secondSidebarMobileLocation: a = "after", secondSidebarWidth: o, secondSidebarWidthMax: s, secondSidebarWidthMin: c, sidebarLocation: l = "right", sidebarMobileLocation: u = "after", sidebarWidth: d = "33%", sidebarWidthMax: f = 25, sidebarWidthMin: p = 15, stackSidebarsBelow: m, ...h }) => {
+	let g = "pds-sidebar-layout", _ = (e) => e === "none" ? "0" : `var(--pds-spacing-${e})`, v = _(r), y = _(i ?? r), b = _t(t), x = !!b["second-sidebar"], S = !!m && x;
 	return /* @__PURE__ */ e.createElement("div", {
-		className: Z([h, n ?? ""]),
-		"data-second-sidebar-mobile-location": b ? a : void 0,
+		className: Z([
+			g,
+			S ? `${g}--stack-container` : null,
+			n ?? ""
+		]),
+		"data-second-sidebar-mobile-location": x ? a : void 0,
 		"data-sidebar-location": l,
 		"data-sidebar-mobile-location": u,
 		style: {
@@ -13441,11 +13445,11 @@ var ts = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 			"--second-sidebar-width": o ?? d,
 			"--second-sidebar-width-max": `${s ?? f}rem`,
 			"--second-sidebar-width-min": `${c ?? p}rem`,
-			"--pds-sidebar-layout-gap": _,
-			"--pds-sidebar-layout-gap-mobile": v
+			"--pds-sidebar-layout-gap": v,
+			"--pds-sidebar-layout-gap-mobile": y
 		},
-		...m
-	}, /* @__PURE__ */ e.createElement("div", { className: `${h}__main` }, y.__unslotted || y.content), /* @__PURE__ */ e.createElement("div", { className: `${h}__side` }, y.sidebar), b && /* @__PURE__ */ e.createElement("div", { className: `${h}__second-side` }, y["second-sidebar"]));
+		...h
+	}, /* @__PURE__ */ e.createElement("div", { className: `${g}__main` }, b.__unslotted || b.content), S ? /* @__PURE__ */ e.createElement("div", { className: Z([`${g}__sides`, `${g}__sides--stack-${m}`]) }, /* @__PURE__ */ e.createElement("div", { className: `${g}__side` }, b.sidebar), /* @__PURE__ */ e.createElement("div", { className: `${g}__second-side` }, b["second-sidebar"])) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: `${g}__side` }, b.sidebar), x && /* @__PURE__ */ e.createElement("div", { className: `${g}__second-side` }, b["second-sidebar"])));
 }, Rs = ({ children: n, className: r, maxColumns: i = 3, style: a, ...o }) => {
 	let s = "pds-stat-panel-group", c = `${s}--max-${i}`, l = {
 		"--max-columns": i,