@photoroom/ui 0.1.523 → 0.1.524

package/index.mjs

@@ -53395,28 +53395,29 @@ var M_e = ({ title: e, summary: r, snapshot: i, className: a, ...o }) => /* @__P
 			})]
 		})]
 	});
-}, P_e = ({ titleBlock: e, children: r, columns: i = 3, showMoreLabel: a, ...o }) => {
-	let [s, c] = Me(!1), l = V(null), u = fe.toArray(r), d = i * 2, f = !s && !!a && u.length > d, p = () => {
-		let e = l.current;
-		Ie(() => c(!0)), e?.querySelector("a, button")?.focus();
+}, P_e = ({ titleBlock: e, children: r, columns: i = 3, showMoreLabel: a, background: o = "surface-default", ...s }) => {
+	let [c, l] = Me(!1), u = V(null), d = fe.toArray(r), f = i * 2, p = !c && !!a && d.length > f, m = () => {
+		let e = u.current;
+		Ie(() => l(!0)), e?.querySelector("a, button")?.focus();
 	};
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ n(u9, {
+		variant: o,
 		className: H("pt-e700 pb-e1000 gap-i600 flex flex-col", "px-4 sm:px-6 md:px-8 xl:px-10"),
-		...o,
+		...s,
 		children: [e, /* @__PURE__ */ n("div", {
 			className: "mx-auto flex w-full flex-col gap-10 xl:max-w-[1200px]",
 			children: [/* @__PURE__ */ t("div", {
 				className: H("grid grid-cols-1 gap-y-6", "sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8", "lg:grid-cols-3", { "xl:grid-cols-4": i === 4 }),
-				children: u.map((e, n) => /* @__PURE__ */ t("div", {
-					ref: f && n === d ? l : void 0,
-					className: H("flex", { hidden: f && n >= d }),
+				children: d.map((e, n) => /* @__PURE__ */ t("div", {
+					ref: p && n === f ? u : void 0,
+					className: H("flex", { hidden: p && n >= f }),
 					children: e
 				}, n))
-			}), f && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(Vu, {
+			}), p && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(Vu, {
 				as: "button",
 				type: "button",
 				variant: "accent",
-				onClick: p,
+				onClick: m,
 				children: a
 			}) })]
 		})]
@@ -55456,11 +55457,12 @@ var rye = Object.assign(R9, {
 			})
 		]
 	});
-}, dye = ({ title: e, overline: r, placement: i = "default" }) => /* @__PURE__ */ n("div", {
-	className: H("mx-auto flex w-full max-w-[1200px] flex-col gap-1", {
+}, dye = ({ title: e, overline: r, placement: i = "default", className: a, ...o }) => /* @__PURE__ */ n("div", {
+	className: U("mx-auto flex w-full max-w-[1200px] flex-col gap-1", {
 		"items-center text-center": i === "default",
 		"items-start text-start": i === "side"
-	}),
+	}, a),
+	...o,
 	children: [!!r && /* @__PURE__ */ t("div", {
 		className: "component-700 text-content-accent max-w-[600px]",
 		children: r

package/package.json

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