@pantheon-systems/pds-toolkit-react 2.0.0-alpha.48 → 2.0.0-alpha.49

package/dist/index.js

@@ -4088,38 +4088,43 @@ var hn = ({ className: t, clearLabel: n = "Clear", disabled: r = !1, filterKey:
 		]),
 		...o
 	}, f && /* @__PURE__ */ e.createElement("div", { className: `${s}__image` }, f[0]), p && /* @__PURE__ */ e.createElement("div", { className: `${s}__main` }, p), m && /* @__PURE__ */ e.createElement("div", { className: `${s}__footer` }, m));
-}, In = ({ className: t, defaultValue: n, id: r, label: i, labelDisplay: a = "left", layout: o = "auto", onChange: s, options: c, size: l = "m", ...u }) => {
-	let d = "pds-card-select", f = l === "m" ? null : `${d}--${l}`, p = `${d}__legend`;
-	a === "center" && (p = `${d}__legend ${d}__legend--center`), a === "hidden" && (p = `${d}__legend visually-hidden`);
-	let [m, g] = h(n), _ = (e) => {
-		g(e.currentTarget.value), s && s(e.currentTarget.value);
-	}, v = c.length, y = "pds-grid-item pds-grid-item--sm-4 pds-grid-item--md-6", b = "pds-grid-item pds-grid-item--sm-4 pds-grid-item--md-4", x = "";
-	return o === "twoAcross" ? x = y : o === "threeAcross" ? x = b : o === "auto" && (x = v === 1 ? "pds-grid-item" : v % 3 == 0 ? b : v % 2 == 0 ? y : b), /* @__PURE__ */ e.createElement("fieldset", {
+}, In = ({ className: t, defaultValue: n, id: r, imageVariant: i = "bleed", label: a, labelDisplay: o = "left", layout: s = "auto", onChange: c, options: l, showIndicator: u = !0, size: d = "m", ...f }) => {
+	let p = "pds-card-select", m = d === "m" ? null : `${p}--${d}`, g = i === "bleed" ? null : `${p}--image-${i}`, _ = u ? null : `${p}--no-indicator`, v = `${p}__legend`;
+	o === "center" && (v = `${p}__legend ${p}__legend--center`), o === "hidden" && (v = `${p}__legend visually-hidden`);
+	let [y, b] = h(n), x = (e) => {
+		b(e.currentTarget.value), c && c(e.currentTarget.value);
+	}, S = l.length, C = "pds-grid-item pds-grid-item--sm-4 pds-grid-item--md-6", w = "pds-grid-item pds-grid-item--sm-4 pds-grid-item--md-4", T = "";
+	return s === "twoAcross" ? T = C : s === "threeAcross" ? T = w : s === "auto" && (T = S === 1 ? "pds-grid-item" : S % 3 == 0 ? w : S % 2 == 0 ? C : w), /* @__PURE__ */ e.createElement("fieldset", {
 		className: Z([
-			d,
-			f,
+			p,
+			m,
+			g,
+			_,
 			t
 		]),
 		id: r,
-		...u
-	}, /* @__PURE__ */ e.createElement("legend", { className: p }, i), /* @__PURE__ */ e.createElement("div", { className: `${d}__options pds-grid pds-grid--gap-m` }, c.map((t, n) => /* @__PURE__ */ e.createElement("div", {
-		key: `${r}-option-${n}`,
-		className: Z([`${d}__option`, x])
-	}, /* @__PURE__ */ e.createElement("input", {
-		defaultChecked: m === t.value,
-		id: t.id ? t.id : `${r}-option-${n}`,
-		name: r,
-		onClick: _,
-		type: "radio",
-		value: t.value
-	}), /* @__PURE__ */ e.createElement("label", {
-		className: m === t.value ? `${d}__option-label ${d}__option-label--selected` : `${d}__option-label`,
-		htmlFor: t.id ? t.id : `${r}-option-${n}`
-	}, /* @__PURE__ */ e.createElement("div", { className: `${d}__option-label-indicator` }, /* @__PURE__ */ e.createElement(Q, {
-		className: m === t.value ? `${d}__option-icon ${d}__option-icon--selected` : `${d}__option-icon`,
-		iconName: m === t.value ? "circleCheck" : "circle",
-		size: "l"
-	})), /* @__PURE__ */ e.createElement("span", { className: `${d}__option-label-text` }, t.label), t.children && /* @__PURE__ */ e.createElement("div", { className: `${d}__option-children` }, t.children))))));
+		...f
+	}, /* @__PURE__ */ e.createElement("legend", { className: v }, a), /* @__PURE__ */ e.createElement("div", { className: `${p}__options pds-grid pds-grid--gap-m` }, l.map((t, n) => {
+		let i = t.id ? t.id : `${r}-option-${n}`, a = y === t.value, s = Le(e.isValidElement(t.children) && t.children.type === e.Fragment ? t.children.props.children : t.children), c = s.image, l = s.__unslotted || s.main;
+		return /* @__PURE__ */ e.createElement("div", {
+			key: `${r}-option-${n}`,
+			className: Z([`${p}__option`, T])
+		}, /* @__PURE__ */ e.createElement("input", {
+			defaultChecked: a,
+			id: i,
+			name: r,
+			onClick: x,
+			type: "radio",
+			value: t.value
+		}), /* @__PURE__ */ e.createElement("label", {
+			className: Z([`${p}__option-label`, a ? `${p}__option-label--selected` : null]),
+			htmlFor: i
+		}, c && /* @__PURE__ */ e.createElement("div", { className: `${p}__option-image` }, c[0]), /* @__PURE__ */ e.createElement("div", { className: `${p}__option-content` }, u && /* @__PURE__ */ e.createElement("div", { className: `${p}__option-label-indicator` }, /* @__PURE__ */ e.createElement(Q, {
+			className: Z([`${p}__option-icon`, a ? `${p}__option-icon--selected` : null]),
+			iconName: a ? "circleCheck" : "circle",
+			size: "l"
+		})), /* @__PURE__ */ e.createElement("div", { className: `${p}__option-body` }, /* @__PURE__ */ e.createElement("span", { className: Z([`${p}__option-label-text`, o === "hidden" ? "visually-hidden" : null]) }, t.label), l && /* @__PURE__ */ e.createElement("div", { className: `${p}__option-main` }, l)))));
+	})));
 }, Ln = ({ className: t, heading: n, headingLevel: r = "span", iconName: i, linkContent: a, message: o, ...s }) => {
 	let c = "pds-compact-empty-state";
 	return /* @__PURE__ */ e.createElement("div", {
@@ -9462,7 +9467,7 @@ var fr = {
 		imageSrc: P.imageSrc,
 		size: "s",
 		uniqueId: P.workspaceId
-	}), /* @__PURE__ */ e.createElement("span", { className: `${b}__name` }, P.displayName)) : null;
+	}), /* @__PURE__ */ e.createElement("span", { className: `${b}__name` }, /* @__PURE__ */ e.createElement("span", { className: `${b}__name-text` }, P.displayName))) : null;
 	return /* @__PURE__ */ e.createElement("span", {
 		className: Z([b, n]),
 		...u
@@ -9988,7 +9993,7 @@ var fr = {
 	}, s && /* @__PURE__ */ e.createElement("div", { className: `${v}__close-wrapper` }, /* @__PURE__ */ e.createElement(tn, {
 		ariaLabel: i,
 		onClick: () => w(!1),
-		size: "l"
+		size: "m"
 	})), /* @__PURE__ */ e.createElement("div", { className: `${v}__title` }, f), /* @__PURE__ */ e.createElement("div", {
 		className: `${v}__content`,
 		style: S
@@ -12016,13 +12021,17 @@ var Sa = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 		},
 		...l
 	}, /* @__PURE__ */ e.createElement("div", { className: `${u}__main` }, f.__unslotted || f.content), /* @__PURE__ */ e.createElement("div", { className: `${u}__side` }, f.sidebar));
-}, Ja = ({ children: t, className: n, hasPanel: r = !1, ...i }) => {
-	let a = Le(t), o = a.stepper, s = a.form, c = "pds-stepper-layout", l = /* @__PURE__ */ e.createElement(ri, {
-		className: Z([c, n]),
+}, Ja = ({ children: t, className: n, formWidth: r = "standard", hasPanel: i = !1, ...a }) => {
+	let o = Le(t), s = o.stepper, c = o.form, l = "pds-stepper-layout", u = r === "full" ? `${l}--full-width` : null, d = /* @__PURE__ */ e.createElement(ri, {
+		className: Z([
+			l,
+			u,
+			n
+		]),
 		width: "wide",
-		...i
-	}, o && /* @__PURE__ */ e.createElement("div", { className: `${c}__stepper-container` }, o), s && /* @__PURE__ */ e.createElement("div", { className: `${c}__form-container` }, s));
-	return r ? /* @__PURE__ */ e.createElement(Ki, null, l) : l;
+		...a
+	}, s && /* @__PURE__ */ e.createElement("div", { className: `${l}__stepper-container` }, s), c && /* @__PURE__ */ e.createElement("div", { className: `${l}__form-container` }, c));
+	return i ? /* @__PURE__ */ e.createElement(Ki, null, d) : d;
 }, Ya = ({ children: t, className: n, gridGap: r = "xl", verticalAlign: i = "start", ...a }) => {
 	let o = "pds-three-item-layout", s = r === "xl" ? "pds-grid" : `pds-grid pds-grid--gap-${r}`, c = `${o}--${i}`, l = Le(t), u = [
 		l["first-item"],