@photoroom/ui 0.1.493 → 0.1.494

package/index.mjs

@@ -56154,12 +56154,15 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 		className: U("flex flex-wrap gap-2 xl:flex-1 xl:flex-nowrap", j9),
 		children: i
 	})]
-}), F9 = ({ isChecked: r, planName: i, description: a, includedLabel: o, excludedLabel: s }) => /* @__PURE__ */ t(N9, { children: /* @__PURE__ */ n("div", {
+}), F9 = ({ isChecked: r, planName: i, description: a, includedLabel: o, excludedLabel: s, isLoading: c }) => /* @__PURE__ */ t(N9, { children: /* @__PURE__ */ n("div", {
 	className: U("h-8 px-2", "inline-flex items-center gap-1.5", "rounded-400 border-misc-hairline misc-border-size-hairline", "xl:h-auto xl:border-none xl:px-0", "component-500 text-content-primary"),
 	children: [!!i && /* @__PURE__ */ n("span", {
 		className: "text-content-secondary xl:sr-only",
 		children: [i, ":"]
-	}), a || /* @__PURE__ */ t("div", {
+	}), c ? /* @__PURE__ */ t(LJ, {
+		className: "h-4 w-12",
+		rounding: "200"
+	}) : a || /* @__PURE__ */ t("div", {
 		className: "flex h-6 w-6 items-center justify-center",
 		children: r ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(u, { className: "icon-size-400 text-content-accent" }), /* @__PURE__ */ t("span", {
 			className: "sr-only",
@@ -56277,8 +56280,8 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 		className: "flex flex-1 flex-col gap-6 *:flex-1 sm:flex-row sm:gap-4 xl:gap-1.5",
 		children: i
 	})]
-}), I9 = ({ value: e, originalValue: r, priceSubLabel: i, billingPeriod: a, perMonthLabel: o, perYearLabel: s, billedAnnuallyLabel: c, showYearlyPriceAsMonthly: l, disabled: u, variant: d = "default", children: f }) => {
-	let p = l ? o : s;
+}), I9 = ({ value: e, originalValue: r, priceSubLabel: i, billingPeriod: a, perMonthLabel: o, perYearLabel: s, billedAnnuallyLabel: c, showYearlyPriceAsMonthly: l, disabled: u, isLoading: d, isError: f, variant: p = "default", children: m }) => {
+	let h = l ? o : s;
 	return /* @__PURE__ */ n("div", {
 		className: "flex w-full flex-col gap-6",
 		children: [/* @__PURE__ */ n("div", {
@@ -56290,66 +56293,52 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 					children: r
 				}), /* @__PURE__ */ t("span", {
 					className: "text-900 font-600 leading-500",
-					children: u ? "–" : e || "\xA0"
+					children: u ? "–" : d ? /* @__PURE__ */ t(LJ, {
+						className: "inline-block h-[1em] w-24 align-middle",
+						rounding: "300"
+					}) : e || (f ? "–" : " ")
 				})]
 			}), !u && /* @__PURE__ */ t("span", {
-				className: U("component-500", d === "dark" ? "text-content-white-secondary" : "text-content-primary"),
+				className: U("component-500", p === "dark" ? "text-content-white-secondary" : "text-content-primary"),
 				children: i ?? /* @__PURE__ */ n("span", {
 					className: "component-400 text-content-secondary",
 					children: [
 						a === "monthly" && o,
-						a === "yearly" && p,
+						a === "yearly" && h,
 						l && c && `, ${c}`
 					]
 				})
 			})]
-		}), !u && f]
+		}), !u && m]
 	});
-}, L9 = ({ options: e = [], value: r, onValueChange: i, ariaLabel: a, variant: o = "radio", isDark: s = !1 }) => {
+}, L9 = ({ options: e = [], value: n, onValueChange: r, ariaLabel: i, isDark: a = !1, isLoading: o = !1 }) => {
 	if (!e.length) return null;
-	let c = s ? "text-content-white-primary" : "text-content-primary", l = (t) => {
-		let n = e.find((e) => e.value === t);
-		return n?.description ?? n?.label ?? null;
-	}, [u] = e;
-	if (e.length === 1 && u) return /* @__PURE__ */ t("div", {
-		className: U("component-500 flex min-h-10 items-center", c),
-		children: l(u.value)
-	});
-	if (o === "select") return /* @__PURE__ */ t(V6, {
+	if (o) return /* @__PURE__ */ t(LJ, {
+		className: "h-10 w-full",
+		rounding: "300"
+	});
+	let [s] = e;
+	return e.length === 1 && s ? /* @__PURE__ */ t("div", {
+		className: U("component-500 flex min-h-10 items-center", a ? "text-content-white-primary" : "text-content-primary"),
+		children: s.label
+	}) : /* @__PURE__ */ t(V6, {
 		isSearchable: !1,
 		multiline: !0,
 		className: "w-full",
-		placeholder: a,
-		value: r,
-		onValueChange: (e) => i?.(e),
+		placeholder: i,
+		value: n,
+		onValueChange: (e) => r?.(e),
 		options: e.map((e) => ({
 			value: e.value,
 			label: e.label
 		})),
-		renderOption: (e) => l(e.value),
-		renderValue: (e) => l(e)
-	});
-	let d = e.find((e) => e.value === r)?.description;
-	return /* @__PURE__ */ n("div", {
-		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ t(p3, {
-			variant: "label",
-			value: r,
-			onValueChange: i,
-			children: e.map((e) => /* @__PURE__ */ t(p3.Item, {
-				value: e.value,
-				label: e.label
-			}, e.value))
-		}), !!d && /* @__PURE__ */ t("div", {
-			className: U("component-500 [&_strong]:text-content-accent [&_strong]:font-medium", c),
-			children: d
-		})]
+		renderValue: (t) => e.find((e) => e.value === t)?.label ?? null
 	});
-}, oCe = ({ planType: r, description: i, cta: a, propLists: o, billingPeriod: s, specialOfferLabel: c, clientLogos: l, planPriceLabelOverride: u, planPriceSubLabel: d, planName: f, showYearlyPriceAsMonthly: p, tagLabel: m, tagVariant: h = "neutral", variant: g = "default", freePlanLabel: _, perMonthLabel: v, perYearLabel: y, billedAnnuallyLabel: b, subscriptionOptions: x, isUnavailable: S, unavailableLabel: C, subscriptionType: w, onSubscriptionTypeChange: T, subscriptionTypeSelectorVariant: E, resolvedPrice: D, ...O }) => {
-	let [k, A] = je(x?.[0]?.value), j = w ?? k, M = T ?? A, N = s === "yearly" && p, { value: P, originalValue: F } = D ?? {}, I = g === "dark";
+}, oCe = ({ planType: r, description: i, cta: a, propLists: o, billingPeriod: s, specialOfferLabel: c, clientLogos: l, planPriceLabelOverride: u, planPriceSubLabel: d, planName: f, showYearlyPriceAsMonthly: p, tagLabel: m, tagVariant: h = "neutral", variant: g = "default", freePlanLabel: _, perMonthLabel: v, perYearLabel: y, billedAnnuallyLabel: b, subscriptionOptions: x, isUnavailable: S, unavailableLabel: C, subscriptionType: w, onSubscriptionTypeChange: T, resolvedPrice: E, isError: D, isSelectorLoading: O, ...k }) => {
+	let [A, j] = je(x?.[0]?.value), M = w ?? A, N = T ?? j, P = s === "yearly" && p, { value: F, originalValue: I } = E ?? {}, ee = g === "dark";
 	return /* @__PURE__ */ n("div", {
-		className: U("relative flex w-full flex-col gap-6", "px-4 py-7", "rounded-500", I ? "bg-background-default text-content-white-primary" : "bg-background-inverted", "border", I ? "border-white-alpha-3" : "border-misc-border", m && "max-xl:pt-0", !m && "sm:max-xl:pt-0"),
-		...O,
+		className: U("relative flex w-full flex-col gap-6", "px-4 py-7", "rounded-500", ee ? "bg-background-default text-content-white-primary" : "bg-background-inverted", "border", ee ? "border-white-alpha-3" : "border-misc-border", m && "max-xl:pt-0", !m && "sm:max-xl:pt-0"),
+		...k,
 		children: [/* @__PURE__ */ n("div", {
 			className: "flex flex-col",
 			children: [
@@ -56365,7 +56354,7 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 					children: [/* @__PURE__ */ n("div", {
 						className: "inline-flex flex-row gap-3",
 						children: [/* @__PURE__ */ t("div", {
-							className: U("component-semi-strong-800", I ? "text-content-white-primary" : "text-content-primary"),
+							className: U("component-semi-strong-800", ee ? "text-content-white-primary" : "text-content-primary"),
 							children: f
 						}), c && /* @__PURE__ */ t("div", {
 							className: "flex items-center",
@@ -56378,7 +56367,7 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 						className: "flex flex-col",
 						"data-pricing-card-description": !0,
 						children: i && /* @__PURE__ */ t("div", {
-							className: U("component-500", I ? "text-content-white-secondary" : "text-content-subdued-primary"),
+							className: U("component-500", ee ? "text-content-white-secondary" : "text-content-subdued-primary"),
 							children: i
 						})
 					})]
@@ -56397,24 +56386,26 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 							"pro",
 							"business",
 							"ultra"
-						].includes(r) && (P ? /* @__PURE__ */ t(I9, {
-							value: P,
-							originalValue: F,
+						].includes(r) && /* @__PURE__ */ t(I9, {
+							value: F,
+							originalValue: I,
 							disabled: S,
+							isLoading: !F && !D,
+							isError: D,
 							billingPeriod: s,
 							perMonthLabel: v,
 							perYearLabel: y,
-							showYearlyPriceAsMonthly: N,
+							showYearlyPriceAsMonthly: P,
 							billedAnnuallyLabel: b,
 							children: /* @__PURE__ */ t(L9, {
 								options: x,
-								value: j,
-								onValueChange: M,
-								variant: E,
+								value: M,
+								onValueChange: N,
 								ariaLabel: f,
-								isDark: I
+								isDark: ee,
+								isLoading: O
 							})
-						}) : /* @__PURE__ */ t(I9, { disabled: S })),
+						}),
 						r === "enterprise" && /* @__PURE__ */ t(I9, {
 							value: u,
 							priceSubLabel: d,
@@ -56424,11 +56415,11 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 							perYearLabel: y,
 							children: /* @__PURE__ */ t(L9, {
 								options: x,
-								value: j,
-								onValueChange: M,
-								variant: E,
+								value: M,
+								onValueChange: N,
 								ariaLabel: f,
-								isDark: I
+								isDark: ee,
+								isLoading: O
 							})
 						})
 					]
@@ -56445,8 +56436,8 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 				})
 			]
 		}), /* @__PURE__ */ n("div", {
-			className: U("flex flex-1 flex-col justify-between gap-6", I && "[&_svg]:text-content-white-primary"),
-			children: [o && o.length > 0 && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", { className: U("h-px w-full shrink-0", I ? "bg-white-alpha-3" : "bg-misc-divider") }), /* @__PURE__ */ t("div", {
+			className: U("flex flex-1 flex-col justify-between gap-6", ee && "[&_svg]:text-content-white-primary"),
+			children: [o && o.length > 0 && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", { className: U("h-px w-full shrink-0", ee ? "bg-white-alpha-3" : "bg-misc-divider") }), /* @__PURE__ */ t("div", {
 				className: U("flex flex-1 flex-col justify-between gap-8", o.length > 1 && "[&>*:last-child]:justify-end"),
 				children: o
 			})] }), l && l.length > 0 && /* @__PURE__ */ t("div", {
@@ -56458,8 +56449,8 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 }, sCe = ({ planName: e, planShortName: n }) => /* @__PURE__ */ t(P9, {
 	planName: e,
 	planShortName: n
-}), cCe = ({ planName: e, planType: r, billingPeriod: i, showYearlyPriceAsMonthly: a, planPriceLabelOverride: o, cta: s, perMonthLabel: c, perYearLabel: l, billedAnnuallyLabel: u, resolvedPrice: d }) => {
-	let f = r === "enterprise", { value: p } = d ?? {}, m = f ? o : p, h = i === "monthly" || a ? c : l, g = i === "yearly" && a ? u : void 0;
+}), cCe = ({ planName: e, planType: r, billingPeriod: i, showYearlyPriceAsMonthly: a, planPriceLabelOverride: o, cta: s, perMonthLabel: c, perYearLabel: l, billedAnnuallyLabel: u, resolvedPrice: d, isError: f }) => {
+	let p = r === "enterprise", { value: m } = d ?? {}, h = p ? o : m, g = !p && !h && !f, _ = i === "monthly" || a ? c : l, v = i === "yearly" && a ? u : void 0;
 	return /* @__PURE__ */ t(N9, { children: /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4",
 		children: [
@@ -56471,10 +56462,13 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 				className: "flex flex-col items-start",
 				children: [/* @__PURE__ */ t("span", {
 					className: "text-800 font-600 text-content-primary leading-500 [word-break:break-word]",
-					children: m || "\xA0"
-				}), !f && h && /* @__PURE__ */ n("span", {
+					children: g ? /* @__PURE__ */ t(LJ, {
+						className: "inline-block h-[1em] w-20 align-middle",
+						rounding: "300"
+					}) : h || (f ? "–" : "\xA0")
+				}), !p && _ && /* @__PURE__ */ n("span", {
 					className: "component-light-400 text-content-subdued-primary flex min-w-0",
-					children: [/* @__PURE__ */ t("span", { children: h }), g && /* @__PURE__ */ n("span", { children: [", ", g] })]
+					children: [/* @__PURE__ */ t("span", { children: _ }), v && /* @__PURE__ */ n("span", { children: [", ", v] })]
 				})]
 			}),
 			s && /* @__PURE__ */ t("div", {
@@ -56483,12 +56477,13 @@ var WSe = ({ lang: e, monthlyProcessedImages: r = 1e3, items: i, partnerCard: a,
 			})
 		]
 	}) });
-}, lCe = ({ isChecked: e, description: n, planName: r, includedLabel: i, excludedLabel: a }) => /* @__PURE__ */ t(F9, {
+}, lCe = ({ isChecked: e, description: n, planName: r, includedLabel: i, excludedLabel: a, isLoading: o }) => /* @__PURE__ */ t(F9, {
 	isChecked: e,
 	description: n,
 	planName: r,
 	includedLabel: i,
-	excludedLabel: a
+	excludedLabel: a,
+	isLoading: o
 }), uCe = ({ children: e, ...n }) => /* @__PURE__ */ t("div", {
 	className: "rounded-400 bg-background-subdued inline-flex gap-0.5 p-0.5",
 	...n,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.493",
+  "version": "0.1.494",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [