@pantheon-systems/pds-toolkit-react 2.0.0-alpha.80 → 2.0.0-alpha.82

package/dist/index.js

@@ -4616,7 +4616,7 @@ var lr = ({ className: t = "pds-dropdown__selected-icon" }) => /* @__PURE__ */ e
 		className: `${c}__swatch`,
 		style: { backgroundColor: l(n, t.color, t.paletteIndex) }
 	}), t.label)));
-}, Rr = (e) => typeof e == "number" ? `${e}rem` : typeof e == "string" && e.endsWith("%") ? e : `${Wt[`SPACING_${e.toUpperCase()}`]}rem`, zr = ({ className: t, colorType: n = "regular", isAnimated: r = !0, shape: i = "rounded", size: a, textIsJustified: o, textLineCount: s = 1, textSize: c = "m", ...l }) => {
+}, Rr = (e) => typeof e == "number" ? `${e}rem` : typeof e == "string" && e.endsWith("%") ? e : Wt[`SPACING_${e.toUpperCase()}`], zr = ({ className: t, colorType: n = "regular", isAnimated: r = !0, shape: i = "rounded", size: a, textIsJustified: o, textLineCount: s = 1, textSize: c = "m", ...l }) => {
 	let u = "pds-skeleton", d = `${u}--${i}`, f = r ? `pds-pulse pds-pulse--${n}` : `${u}--${n}`, p = [
 		"text-block",
 		"code-block",
@@ -10964,28 +10964,29 @@ var Qr = {
 		]),
 		...o
 	}, n);
-}, no = ({ children: t, className: n, expandButtonAriaLabel: r, isExpandable: i = !1, ...a }) => {
-	let o = "pds-panel-row", [s, c] = g(!1), l = ht(t), u = l["items-left"], d = l["items-right"], f = l["items-below"], p = () => {
-		c((e) => !e);
+}, no = ({ children: t, className: n, expandButtonAriaLabel: r, isExpandable: i = !1, stackBelow: a = "m", ...o }) => {
+	let s = "pds-panel-row", c = `${s}--stack-${a}`, [l, u] = g(!1), d = ht(t), f = d["items-left"], p = d["items-right"], m = d["items-below"], h = () => {
+		u((e) => !e);
 	};
 	return /* @__PURE__ */ e.createElement("li", {
 		className: Z([
-			o,
-			s ? "is-expanded" : null,
+			s,
+			c,
+			l ? "is-expanded" : null,
 			n ?? ""
 		]),
-		...a
-	}, /* @__PURE__ */ e.createElement("div", { className: Z([`${o}__main`, i ? "is-expandable" : ""]) }, u && /* @__PURE__ */ e.createElement("div", { className: `${o}__items ${o}__items--left` }, u), d && /* @__PURE__ */ e.createElement("div", { className: `${o}__items ${o}__items--right` }, d), i && /* @__PURE__ */ e.createElement("button", {
-		"aria-expanded": s,
+		...o
+	}, /* @__PURE__ */ e.createElement("div", { className: Z([`${s}__main`, i ? "is-expandable" : ""]) }, f && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--left` }, f), p && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--right` }, p), i && /* @__PURE__ */ e.createElement("button", {
+		"aria-expanded": l,
 		"aria-label": r,
-		className: `${o}__expand-button`,
-		onClick: p
+		className: `${s}__expand-button`,
+		onClick: h
 	}, /* @__PURE__ */ e.createElement(Q, {
-		className: `${o}__expand-icon ${s ? "rotated" : ""}`,
+		className: `${s}__expand-icon ${l ? "rotated" : ""}`,
 		iconName: "angleDown"
-	}))), i && f && /* @__PURE__ */ e.createElement("div", {
-		className: `${o}__items ${o}__items--below`,
-		style: s ? {
+	}))), i && m && /* @__PURE__ */ e.createElement("div", {
+		className: `${s}__items ${s}__items--below`,
+		style: l ? {
 			display: "block",
 			height: "auto",
 			opacity: "1"
@@ -10994,7 +10995,7 @@ var Qr = {
 			height: "0",
 			opacity: "0"
 		}
-	}, /* @__PURE__ */ e.createElement("div", { className: `${o}__items-inside` }, f)));
+	}, /* @__PURE__ */ e.createElement("div", { className: `${s}__items-inside` }, m)));
 }, ro = ({ children: t, className: n, ...r }) => /* @__PURE__ */ e.createElement("div", {
 	className: Z(["pds-panel-stack", n ?? ""]),
 	...r
@@ -12971,24 +12972,25 @@ var zo = ({ 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));
-}, hs = ({ children: t, className: n, gridGap: r = "xl", secondSidebarMobileLocation: i = "after", secondSidebarWidth: a, secondSidebarWidthMax: o, secondSidebarWidthMin: s, sidebarLocation: c = "right", sidebarMobileLocation: l = "after", sidebarWidth: u = "33%", sidebarWidthMax: d = 25, sidebarWidthMin: f = 15, ...p }) => {
-	let m = "pds-sidebar-layout", h = r === "none" ? "0" : `var(--pds-spacing-${r})`, g = ht(t), _ = !!g["second-sidebar"];
+}, hs = ({ 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 = ht(t), b = !!y["second-sidebar"];
 	return /* @__PURE__ */ e.createElement("div", {
-		className: Z([m, n ?? ""]),
-		"data-second-sidebar-mobile-location": _ ? i : void 0,
-		"data-sidebar-location": c,
-		"data-sidebar-mobile-location": l,
+		className: Z([h, n ?? ""]),
+		"data-second-sidebar-mobile-location": b ? a : void 0,
+		"data-sidebar-location": l,
+		"data-sidebar-mobile-location": u,
 		style: {
-			"--sidebar-width": u,
-			"--sidebar-width-max": `${d}rem`,
-			"--sidebar-width-min": `${f}rem`,
-			"--second-sidebar-width": a ?? u,
-			"--second-sidebar-width-max": `${o ?? d}rem`,
-			"--second-sidebar-width-min": `${s ?? f}rem`,
-			gap: h
+			"--sidebar-width": d,
+			"--sidebar-width-max": `${f}rem`,
+			"--sidebar-width-min": `${p}rem`,
+			"--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
 		},
-		...p
-	}, /* @__PURE__ */ e.createElement("div", { className: `${m}__main` }, g.__unslotted || g.content), /* @__PURE__ */ e.createElement("div", { className: `${m}__side` }, g.sidebar), _ && /* @__PURE__ */ e.createElement("div", { className: `${m}__second-side` }, g["second-sidebar"]));
+		...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"]));
 }, gs = ({ children: n, className: r, maxColumns: i = 3, style: a, ...o }) => {
 	let s = "pds-stat-panel-group", c = `${s}--max-${i}`, l = {
 		"--max-columns": i,
@@ -13058,7 +13060,7 @@ var zo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		]),
 		...o
 	}, /* @__PURE__ */ e.createElement("div", { className: m.join(" ").trim() }, _), /* @__PURE__ */ e.createElement("div", { className: h.join(" ").trim() }, v));
-}, bs = ({ alignContent: t = "flex-start", alignItems: n = "stretch", children: r, className: i, flexDirection: a = "row", flexWrap: o = "nowrap", gap: s = "xl", justifyContent: c = "flex-start", mobileAlignContent: l, mobileAlignItems: u, mobileFlexDirection: d = "column", mobileFlexWrap: f, mobileGap: p, mobileJustifyContent: m, style: h, ...g }) => {
+}, bs = ({ alignContent: t = "flex-start", alignItems: n = "stretch", children: r, className: i, flexDirection: a = "row", flexWrap: o = "nowrap", gap: s = "xl", justifyContent: c = "flex-start", mobileAlignContent: l, mobileAlignItems: u, mobileFlexDirection: d, mobileFlexWrap: f, mobileGap: p, mobileJustifyContent: m, style: h, ...g }) => {
 	let _ = "pds-flex", v = `${_}-container`, y = {
 		"--pds-flex-align-content": t,
 		"--pds-flex-align-items": n,
@@ -13067,7 +13069,7 @@ var zo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		"--pds-flex-wrap": o,
 		"--pds-flex-align-content-mobile": l ?? t,
 		"--pds-flex-align-items-mobile": u ?? n,
-		"--pds-flex-direction-mobile": d,
+		"--pds-flex-direction-mobile": d ?? a,
 		"--pds-flex-justify-content-mobile": m ?? c,
 		"--pds-flex-wrap-mobile": f ?? o
 	}, b = p ?? s, x = s === "none" ? null : `${_}-gap--${s}`, S = b === s ? null : `${_}-gap-mobile--${b}`;