@photoroom/ui 0.1.557 → 0.1.559

package/index.mjs

@@ -59334,7 +59334,7 @@ function XCe({ label: e, value: t, children: n, className: r, ...i }) {
 //#region src/components/website/WebsiteNavigation/WebsiteNavigationCtaSection.tsx
 var I9 = ({ className: e, title: t, subtitle: n, icon: r, cta: i, ref: a, ...o }) => /* @__PURE__ */ L("div", {
 	ref: a,
-	className: U("flex w-full flex-col rounded-2xl p-2 lg:w-[280px]", e),
+	className: U("flex w-full max-w-full flex-col rounded-2xl p-2 lg:w-[280px]", e),
 	...o,
 	children: [
 		!!r && /* @__PURE__ */ I("span", {
@@ -59362,7 +59362,7 @@ I9.displayName = "WebsiteNavigationCtaSection";
 //#region src/components/website/WebsiteNavigation/WebsiteNavigationItem.tsx
 var L9 = (({ as: e = "a", className: t, title: n, subtitle: r, icon: i, ref: a, ...o }) => /* @__PURE__ */ L(e, {
 	ref: a,
-	className: U("group inline-flex w-full items-center gap-3 rounded-2xl p-2 text-start", i ? "lg:w-[360px]" : "lg:w-[280px]", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "interaction-transition outline-hidden transition-colors", t),
+	className: U("group inline-flex w-full max-w-full items-center gap-3 rounded-2xl p-2 text-start", i ? "lg:w-[360px]" : "lg:w-[280px]", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "interaction-transition outline-hidden transition-colors", t),
 	...o,
 	children: [
 		!!i && /* @__PURE__ */ I("span", {
@@ -59422,23 +59422,23 @@ z9.displayName = "WebsiteNavigationOverlayLink";
 //#endregion
 //#region src/components/website/WebsiteNavigation/WebsiteNavigationPanel.tsx
 function ZCe({ trigger: e, children: t, stackTarget: n }) {
-	let r = he.toArray(t), i = r.length >= 4 ? r.length - 2 : -1, [a, o] = Pe(!1), s = V(!1), c = V(0), l = V(null), u = B((e) => {
+	let r = he.toArray(t), i = r.length >= 4 ? r.length - 2 : -1, [a, o] = Pe(!1), s = i >= 0 && !a, c = V(0), l = V(null), u = B((e) => {
 		if (l.current?.disconnect(), l.current = null, !e || i < 0) return;
 		let t = () => {
-			s.current || (c.current = e.offsetWidth);
-			let t = document.documentElement.clientWidth - 32, n = c.current > t;
-			s.current = n, o(n);
+			s && (c.current = e.scrollWidth);
+			let t = document.documentElement.clientWidth - 32;
+			o(c.current > t);
 		};
 		t();
 		let n = new ResizeObserver(t);
 		n.observe(e), n.observe(document.documentElement), l.current = n;
-	}, [i]), d = r.map((e, t) => {
+	}, [i, s]), d = r.map((e, t) => {
 		let n = t === i, r = n && a;
 		return /* @__PURE__ */ L(_e, { children: [t > 0 && /* @__PURE__ */ I("div", {
 			"aria-hidden": !0,
-			className: H("bg-misc-divider w-px self-stretch", r && "hidden")
+			className: H("bg-misc-divider w-px shrink-0 self-stretch", r && "hidden")
 		}), n ? /* @__PURE__ */ I("div", {
-			className: r ? "hidden" : "contents",
+			className: r ? "hidden" : "flex",
 			children: e
 		}) : e] }, Ce(e) ? e.key ?? t : t);
 	});
@@ -59452,7 +59452,7 @@ function ZCe({ trigger: e, children: t, stackTarget: n }) {
 		className: H("absolute start-0 top-0", "data-[motion=from-start]:animate-nav-content-from-start", "data-[motion=from-end]:animate-nav-content-from-end", "data-[motion=to-start]:animate-nav-content-fade-out", "data-[motion=to-end]:animate-nav-content-fade-out"),
 		children: /* @__PURE__ */ I("div", {
 			ref: u,
-			className: "flex min-h-64 w-max min-w-96 text-start whitespace-normal",
+			className: H("flex min-h-64 w-max min-w-96 text-start whitespace-normal", "max-w-[calc(100vw-2rem)]", s && "[&>*]:shrink-0"),
 			children: d
 		})
 	})] });
@@ -59465,7 +59465,7 @@ var B9 = ({ className: e, title: t, children: n, footer: r, background: i = "sur
 		ref: a,
 		role: "group",
 		"aria-labelledby": s,
-		className: U("flex flex-col p-4 lg:min-w-[280px] lg:shrink-0 lg:p-6", i === "sand-50" ? "lg:bg-sand-50" : "lg:bg-surface-default", e),
+		className: U("flex flex-col p-4 lg:min-w-[280px] lg:p-6", i === "sand-50" ? "lg:bg-sand-50" : "lg:bg-surface-default", e),
 		...o,
 		children: [
 			/* @__PURE__ */ I("span", {
@@ -59489,7 +59489,7 @@ B9.displayName = "WebsiteNavigationSection";
 //#region src/components/website/WebsiteNavigation/WebsiteNavigationStory.tsx
 var V9 = (({ as: e = "a", className: t, title: n, category: r, visual: i, ref: a, ...o }) => /* @__PURE__ */ L(e, {
 	ref: a,
-	className: U("group flex w-full flex-col gap-2 rounded-2xl p-2 text-start lg:w-[360px]", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "interaction-transition outline-hidden transition-colors", t),
+	className: U("group flex w-full max-w-full flex-col gap-2 rounded-2xl p-2 text-start lg:w-[360px]", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "interaction-transition outline-hidden transition-colors", t),
 	...o,
 	children: [/* @__PURE__ */ I("span", {
 		className: H("rounded-400 relative aspect-video w-full shrink-0 overflow-hidden", "[&_img]:size-full [&_img]:object-cover"),
@@ -59510,7 +59510,7 @@ V9.displayName = "WebsiteNavigationStory";
 //#region src/components/website/WebsiteNavigation/WebsiteNavigationTestimonial.tsx
 var H9 = (({ as: e = "a", className: t, label: n, visual: r, ref: i, ...a }) => /* @__PURE__ */ L(e, {
 	ref: i,
-	className: U("group inline-flex w-full items-start gap-3 rounded-2xl p-2 text-start lg:w-[440px]", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "interaction-transition outline-hidden transition-colors", t),
+	className: U("group inline-flex w-full max-w-full items-start gap-3 rounded-2xl p-2 text-start lg:w-[440px]", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "interaction-transition outline-hidden transition-colors", t),
 	...a,
 	children: [/* @__PURE__ */ I("span", {
 		className: "rounded-400 bg-sand-50 border-misc-hairline misc-border-size-hairline aspect-video w-[120px] shrink-0 px-3 py-[7px]",

package/package.json

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