@photoroom/ui 0.1.87 → 0.1.89

package/index.mjs

@@ -53041,10 +53041,10 @@ var Yme = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ E("div", {
 		})]
 	})]
 }), $me = ({ titleBlock: e, children: t, className: n, ...r }) => /* @__PURE__ */ T("section", {
-	className: H("py-e500 w-full px-4 sm:px-6 md:px-8 xl:px-10", n),
+	className: H("pt-e700 pb-e1000 w-full px-4 sm:px-6 md:px-8 xl:px-10", n),
 	...r,
 	children: /* @__PURE__ */ E("div", {
-		className: "gap-i500 mx-auto flex w-full max-w-[1200px] flex-col items-center",
+		className: "gap-i600 mx-auto flex w-full max-w-[1200px] flex-col items-center",
 		children: [e, /* @__PURE__ */ T("div", {
 			className: "w-full max-w-[640px]",
 			children: t
@@ -53097,7 +53097,7 @@ var Yme = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ E("div", {
 			role: "row",
 			children: [
 				/* @__PURE__ */ T("div", {
-					className: "component-600 text-content-secondary flex-1 py-[13px] text-balance",
+					className: "component-light-600 text-content-secondary flex-1 py-[13px] text-balance",
 					role: "rowheader",
 					children: e.featureName
 				}),
@@ -53219,11 +53219,11 @@ var Yme = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ E("div", {
 		})]
 	});
 }, ihe = ({ title: e, content: t }) => /* @__PURE__ */ T("div", {
-	className: "py-e500 px-4 sm:px-6 md:px-8 xl:px-10",
+	className: "pt-e700 pb-e1000 px-4 sm:px-6 md:px-8 xl:px-10",
 	children: /* @__PURE__ */ E("div", {
-		className: "gap-i200 mx-auto flex max-w-[1200px] flex-col",
+		className: "gap-i600 mx-auto flex max-w-[1200px] flex-col",
 		children: [e, /* @__PURE__ */ T("div", {
-			className: V("body-500 rounded-500 bg-background-subdued p-4 sm:p-6", "columns-1 gap-6 sm:columns-2 lg:columns-3"),
+			className: V("body-light-500 rounded-500 bg-background-subdued p-4 sm:p-6", "columns-1 gap-6 sm:columns-2 lg:columns-3"),
 			children: t
 		})]
 	})
@@ -53740,14 +53740,14 @@ var v9 = {}, y9 = ({ variant: e, className: t, cssBackgroundColor: n, children:
 	let i = n?.slice(0, 8);
 	return /* @__PURE__ */ T("div", {
 		className: V("px-4 sm:px-6 md:px-8 xl:px-10", {
-			"py-e400": e === "default",
+			"pt-e400 pb-e600": e === "default",
 			"border-misc-border border-b py-6": e === "compact"
 		}),
 		...r,
 		children: /* @__PURE__ */ E("div", {
 			className: "flex flex-col items-center gap-4 sm:gap-6",
 			children: [t && /* @__PURE__ */ T("div", {
-				className: V("body-600 text-content-secondary max-w-[640px] text-center", { "sr-only": e === "compact" }),
+				className: V("component-600 text-content-secondary max-w-[640px] text-center", { "sr-only": e === "compact" }),
 				children: t
 			}), !!i?.length && /* @__PURE__ */ T("div", {
 				className: V("mx-auto flex justify-center gap-2 lg:max-w-[1200px] lg:flex-nowrap", {
@@ -53847,10 +53847,10 @@ var v9 = {}, y9 = ({ variant: e, className: t, cssBackgroundColor: n, children:
 	});
 }, Nhe = ({ containerId: e, title: t, helpText: n, url: r, visibleOnMobile: i, ...a }) => /* @__PURE__ */ E("div", {
 	id: e,
-	className: V("bg-surface-alternate py-e500 w-full px-4 xl:px-10", !i && "hidden lg:block"),
+	className: V("pt-e700 pb-e1000 w-full bg-neutral-50 px-4 xl:px-10", !i && "hidden lg:block"),
 	...a,
 	children: [/* @__PURE__ */ E("div", {
-		className: "gap-i500 flex flex-col justify-center",
+		className: "gap-i600 flex flex-col justify-center",
 		children: [t, /* @__PURE__ */ T("div", {
 			className: V("mx-auto h-[720px] w-full max-w-[1200px]", "rounded-500 overflow-hidden border"),
 			children: /* @__PURE__ */ T("iframe", {
@@ -54850,7 +54850,7 @@ var sge = Object.assign(L9, {
 		})]
 	});
 }, z9 = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ T("section", {
-	className: "py-e400 mx-auto max-w-[1200px] px-4 sm:px-6 md:px-8 xl:px-10",
+	className: "pt-e400 pb-e600 mx-auto max-w-[1200px] px-4 sm:px-6 md:px-8 xl:px-10",
 	...n,
 	children: /* @__PURE__ */ E("div", {
 		className: "gap-i200 flex flex-col",
@@ -55014,25 +55014,28 @@ var _ge = ({ titleBlock: e, content: t, ctaLabel: n, ctaLink: r, ...i }) => /* @
 	});
 }, bge = ({ titleBlock: e, cards: t, className: n, ...r }) => /* @__PURE__ */ E("section", {
 	...r,
-	className: V("py-e500 px-4 sm:px-8", n),
+	className: V("pt-e700 pb-e1000 px-4 sm:px-8", n),
 	children: [!!e && /* @__PURE__ */ T("div", {
-		className: "pb-i500",
+		className: "pb-i600",
 		children: e
 	}), /* @__PURE__ */ T("div", {
 		className: "mx-auto flex max-w-[1200px] flex-col gap-6 lg:flex-row lg:justify-center",
 		children: t
 	})]
-}), xge = "cursor-pointer rounded-200 outline-hidden focus-visible:ring focus-visible:ring-misc-focus-indicator text-content-accent hover:text-content-accent-hover active:text-content-accent-down focus-visible:text-content-accent-hover".split(" ").map((e) => `[&_a]:${e}`).join(" "), Sge = ({ content: e, footer: t, className: n, ...r }) => /* @__PURE__ */ E("div", {
-	...r,
-	className: V("rounded-500 bg-background-subdued text-content-secondary [&_strong]:body-semi-strong-700 [&_strong]:text-content-primary mx-auto w-full max-w-[512px] px-6 py-5 sm:px-8 sm:py-6", n),
-	children: [/* @__PURE__ */ T("div", {
-		className: "body-600 sm:body-700",
-		children: e
-	}), !!t && /* @__PURE__ */ T("div", {
-		className: V("body-500 mt-6", xge),
-		children: t
-	})]
-}), B9 = l(({ as: e = "a", icon: t, title: n, description: r, image: i, ...a }, o) => a.href ? /* @__PURE__ */ E(e, {
+}), xge = "cursor-pointer rounded-200 outline-hidden focus-visible:ring focus-visible:ring-misc-focus-indicator text-content-accent hover:text-content-accent-hover active:text-content-accent-down focus-visible:text-content-accent-hover".split(" ").map((e) => `[&_a]:${e}`).join(" "), Sge = ({ type: e = "default", content: t, footer: n, className: r, ...i }) => {
+	let a = e === "compact";
+	return /* @__PURE__ */ E("div", {
+		...i,
+		className: H("rounded-500 bg-background-subdued text-content-secondary [&_strong]:body-semi-strong-700 [&_strong]:text-content-primary w-full lg:max-w-[512px]", a ? "px-6 pt-5 pb-6" : "px-8 pt-6 pb-8", r),
+		children: [/* @__PURE__ */ T("div", {
+			className: V("w-full max-w-[560px]", a ? "body-light-600" : "body-light-700"),
+			children: t
+		}), !!n && /* @__PURE__ */ T("div", {
+			className: V("body-light-500 mt-6 w-full max-w-[560px]", xge),
+			children: n
+		})]
+	});
+}, B9 = l(({ as: e = "a", icon: t, title: n, description: r, image: i, ...a }, o) => a.href ? /* @__PURE__ */ E(e, {
 	ref: o,
 	className: "group inline-flex w-full flex-col gap-3 outline-hidden",
 	...a,

package/package.json

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