@pantheon-systems/pds-toolkit-react 2.0.0-alpha.47 → 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", {
@@ -7784,29 +7789,35 @@ var fr = {
 		message: k,
 		validationStatus: v
 	}));
-}, Ir = a(({ checked: t, className: n, defaultChecked: r, disabled: i = !1, id: a, inputProps: o, inputWidth: s, label: c, message: l, onChange: u, required: d = !1, showLabel: f = !0, switchPlacement: p = "right", ...m }, g) => {
-	let _ = Dt(s), v = "pds-switch", y = `${v}--${p}`, b = l ? `${v}--message` : null, x = i ? $.disabled : null, S = d && !i ? $.required : null, C = t !== void 0, [w, T] = h(!C && r ? r : !1), E = (e) => {
-		C || T(e.target.checked), u && u(e);
-	}, D = () => {
+}, Ir = a(({ checked: t, className: n, defaultChecked: r, disabled: i = !1, id: a, inputProps: o, inputWidth: s, label: c, message: l, offLabel: u = "Off", onChange: d, onLabel: f = "On", required: p = !1, showLabel: m = !0, showStatusLabel: g = !0, statusLabelPlacement: _ = "right", switchPlacement: v = "right", ...y }, b) => {
+	let x = Dt(s), S = "pds-switch", C = `${S}--${v}`, w = l ? `${S}--message` : null, T = i ? $.disabled : null, E = p && !i ? $.required : null, D = t !== void 0, [O, k] = h(!D && r ? r : !1), A = t || O ? f : u, j = (e) => {
+		D || k(e.target.checked), d && d(e);
+	}, M = g ? /* @__PURE__ */ e.createElement("span", {
+		"aria-hidden": "true",
+		className: `${S}__toggle-label`
+	}, A) : null, N = () => {
 		i || document.getElementById(a)?.click();
-	}, O = /* @__PURE__ */ e.createElement("div", { className: `${v}__control` }, /* @__PURE__ */ e.createElement("input", {
-		ref: g,
+	}, P = /* @__PURE__ */ e.createElement("div", {
+		className: `${S}__control`,
+		"data-status-label-placement": _
+	}, /* @__PURE__ */ e.createElement("input", {
+		ref: b,
 		"aria-describedby": l ? `${a}__message` : null,
-		checked: t === void 0 ? w : t,
+		checked: t === void 0 ? O : t,
 		className: "visually-hidden",
 		disabled: i,
 		id: a,
 		name: a,
-		onChange: E,
-		required: d,
+		onChange: j,
+		required: p,
 		role: "switch",
 		type: "checkbox",
 		...o
-	}), /* @__PURE__ */ e.createElement("div", { className: `${v}__track-wrapper` }, /* @__PURE__ */ e.createElement("span", {
+	}), /* @__PURE__ */ e.createElement("div", { className: `${S}__track-wrapper` }, _ === "left" && M, /* @__PURE__ */ e.createElement("span", {
 		"aria-hidden": "true",
-		className: `${v}__track`,
-		onClick: D
-	}, /* @__PURE__ */ e.createElement("span", { className: `${v}__thumb` })))), k = l ? /* @__PURE__ */ e.createElement(jt, {
+		className: `${S}__track`,
+		onClick: N
+	}, /* @__PURE__ */ e.createElement("span", { className: `${S}__thumb` })), _ === "right" && M)), F = l ? /* @__PURE__ */ e.createElement(jt, {
 		className: "pds-input-message--switch",
 		hasValidationMessage: !1,
 		id: a,
@@ -7816,23 +7827,23 @@ var fr = {
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
 			$.base,
-			v,
-			y,
-			b,
-			x,
 			S,
+			C,
+			w,
+			T,
+			E,
 			n
 		]),
-		style: s ? _ : null,
-		...m
+		style: s ? x : null,
+		...y
 	}, /* @__PURE__ */ e.createElement(At, {
-		className: `${v}__label`,
+		className: `${S}__label`,
 		disabled: i,
 		id: a,
 		label: c,
-		required: d,
-		showLabel: f
-	}), /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, k, O));
+		required: p,
+		showLabel: m
+	}), /* @__PURE__ */ e.createElement("div", { className: `${S}__content` }, F, P));
 }), Lr = ({ disabled: t, dropTargetDirection: n, focusedIndex: r, index: i, isDragging: a, isSortable: o, onDragEnd: s, onDragOver: c, onDragStart: u, onFocusInput: d, onKeyboardMove: f, onRemove: p, setFocusedIndex: h, tag: g, totalTags: _, translationStrings: v }) => {
 	let y = m(null), b = "pds-tags-input__tag";
 	l(() => {
@@ -9456,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
@@ -9982,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
@@ -12010,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"],