@photoroom/ui 0.1.805 → 0.1.807

package/index.mjs

@@ -59189,45 +59189,28 @@ var D7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
 			children: r
 		})]
 	})
-}), Zwe = ({ question: e, answer: n, forceShowAll: r = !1, ...i }) => {
-	let a = ke(), [o, s] = Pe(!1), c = r || o;
-	return /* @__PURE__ */ R("article", {
-		...i,
-		children: [/* @__PURE__ */ R("div", {
-			className: "group/faq-question flex cursor-pointer flex-row items-start justify-between gap-4 py-4 outline-hidden sm:py-6",
-			role: "button",
-			"aria-controls": `faq-answer-${a}`,
-			onClick: () => s((e) => !e),
-			children: [/* @__PURE__ */ L("h4", {
-				className: "component-600 sm:component-700 max-w-[640px] pt-[5px] [word-break:break-word] sm:pt-[3px]",
-				children: e
-			}), /* @__PURE__ */ L(Pd, {
-				icon: t,
-				variant: c ? "primary" : "secondary",
-				density: "regular",
-				className: U("h-8 w-8 shrink-0 rounded-full transition-all", {
-					"group-hover/faq-question:bg-background-hover -rotate-45": c,
-					"group-hover/faq-question:bg-background-subdued-hover": !c
-				})
-			})]
-		}), /* @__PURE__ */ L("div", {
-			id: `faq-answer-${a}`,
-			"aria-expanded": c,
-			className: U("grid", {
-				"transition-all duration-200 ease-in-out": !r,
-				"grid-rows-[0fr] opacity-0": !c,
-				"grid-rows-[1fr] opacity-100": c
-			}),
-			children: /* @__PURE__ */ L("div", {
-				className: "overflow-hidden",
-				children: /* @__PURE__ */ L("div", {
-					className: "body-light-600 text-content-secondary max-w-[640px] pb-6 sm:pb-8",
-					children: n
-				})
-			})
+}), Zwe = ({ question: e, answer: n, forceShowAll: r = !1, open: i, className: a, ...o }) => /* @__PURE__ */ R("details", {
+	...o,
+	open: r || i,
+	className: W("group/faq", "details-content:grid details-content:grid-rows-[0fr] details-content:opacity-0", "open:details-content:grid-rows-[1fr] open:details-content:opacity-100", !r && "details-content:transition-[grid-template-rows,opacity,content-visibility] details-content:transition-discrete details-content:duration-200 details-content:ease-in-out", a),
+	children: [/* @__PURE__ */ R("summary", {
+		className: "group/faq-question flex cursor-pointer list-none flex-row items-start justify-between gap-4 py-4 outline-hidden sm:py-6 [&::-webkit-details-marker]:hidden",
+		children: [/* @__PURE__ */ L("h4", {
+			className: "component-600 sm:component-700 max-w-[640px] pt-[5px] [word-break:break-word] sm:pt-[3px]",
+			children: e
+		}), /* @__PURE__ */ L("span", {
+			"aria-hidden": "true",
+			className: U("flex size-8 shrink-0 items-center justify-center rounded-full transition-all duration-200", "bg-background-subdued text-content-primary group-hover/faq-question:bg-background-subdued-hover group-active/faq-question:bg-background-subdued-down", "group-open/faq:bg-background-default group-open/faq:text-content-white-inverted-primary group-open/faq:group-hover/faq-question:bg-background-hover group-open/faq:group-active/faq-question:bg-background-down group-open/faq:-rotate-45", "group-focus-visible/faq-question:misc-border-size-focus-ring group-focus-visible/faq-question:ring-misc-focus-indicator"),
+			children: /* @__PURE__ */ L(t, { className: "icon-size-500" })
 		})]
-	});
-}, Qwe = ({ title: e, features: t, cta: n, ...r }) => /* @__PURE__ */ R("div", {
+	}), /* @__PURE__ */ L("div", {
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ L("div", {
+			className: "body-light-600 text-content-secondary max-w-[640px] pb-6 sm:pb-8",
+			children: n
+		})
+	})]
+}), Qwe = ({ title: e, features: t, cta: n, ...r }) => /* @__PURE__ */ R("div", {
 	className: "pt-e700 pb-e1000 gap-i600 flex flex-col",
 	...r,
 	children: [e, n ? /* @__PURE__ */ R("div", {

package/package.json

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