@photoroom/ui 0.1.845 → 0.1.847

package/index.mjs

@@ -36216,12 +36216,12 @@ var AK = ({ isOver: e, label: t, className: n }) => /* @__PURE__ */ R("div", {
 	return /* @__PURE__ */ R("button", {
 		...i,
 		ref: r,
-		className: W("group relative flex appearance-none outline-hidden", "bg-surface-primary-elevated min-h-[64px] min-w-[64px]", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", t),
+		className: W("group group/starterTile relative flex appearance-none outline-hidden", "bg-surface-primary-elevated min-h-[64px] min-w-[64px]", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", t),
 		children: [n, uh.isMobile ? /* @__PURE__ */ L("span", {
 			className: "rounded-500 absolute inset-e-3 top-3 z-10 flex size-10 items-center justify-center bg-white",
 			children: /* @__PURE__ */ L(b, { className: "size-5" })
 		}) : /* @__PURE__ */ L("div", {
-			className: U("absolute inset-0 z-10", "flex items-center", "hover:bg-misc-visual-hover group-focus-visible:bg-misc-visual-hover group-active:after:bg-misc-visual-down", "group-focus-visible:opacity-100 hover:opacity-100", "interaction-transition transition-all", {
+			className: U("absolute inset-0 z-10", "flex items-center", "hover:bg-misc-visual-hover group-focus-visible:bg-misc-visual-hover group-has-focus-visible/starterTile:bg-misc-visual-hover group-active:after:bg-misc-visual-down", "group-focus-visible:opacity-100 group-has-focus-visible/starterTile:opacity-100 hover:opacity-100", "interaction-transition transition-all", {
 				"opacity-0": !a,
 				"opacity-100": a
 			}),
@@ -38899,9 +38899,9 @@ var HY = ({ label: e, selected: t, badge: n, thumbnail: r, icon: i, multiline: a
 HY.displayName = "DropdownMenuSingleSelectionItem";
 //#endregion
 //#region src/components/dropdown/DropdownMenuDivider/DropdownMenuDivider.tsx
-var hhe = (e) => /* @__PURE__ */ L(dU, {
-	className: "border-misc-divider mx-3 my-1 border-t",
-	...e
+var hhe = ({ className: e, ...t }) => /* @__PURE__ */ L(dU, {
+	className: W("border-misc-divider mx-3 my-1 border-t", e),
+	...t
 }), UY = ({ selected: e, className: t, children: n, ...r }) => /* @__PURE__ */ R("button", {
 	...r,
 	type: "button",
@@ -60045,12 +60045,12 @@ var O7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
 			})]
 		})
 	});
-}, aEe = function({ as: e = "a", label: t, isNew: n, ref: r, ...i }) {
+}, aEe = function({ as: e = "a", label: t, isNew: n, className: r, ref: i, ...a }) {
 	return /* @__PURE__ */ R(e, {
-		ref: r,
-		className: U("inline-flex items-center gap-1.5", "rounded-200 cursor-pointer outline-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "component-light-500 text-content-subdued-primary", "hover:text-content-primary focus-visible:text-content-primary active:text-content-primary", "interaction-transition transition-colors"),
-		...i,
-		...i.href?.toString().startsWith("http") ? {
+		ref: i,
+		className: W("inline-flex items-center gap-1.5", "rounded-200 cursor-pointer outline-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "component-light-500 text-content-subdued-primary", "hover:text-content-primary focus-visible:text-content-primary active:text-content-primary", "interaction-transition transition-colors", r),
+		...a,
+		...a.href?.toString().startsWith("http") ? {
 			target: "_blank",
 			rel: "noopener noreferrer"
 		} : {},
@@ -60109,10 +60109,10 @@ function oEe({ title: e, className: t, children: n, ...r }) {
 }
 //#endregion
 //#region src/components/website/FooterBlockV2/FooterV2Block.tsx
-function M7({ appsSectionTitle: e, appButtons: t, linksSections: n, socialLinks: r, legalLinks: i, languageSelector: a, ...o }) {
+function M7({ appsSectionTitle: e, appButtons: t, linksSections: n, socialLinks: r, legalLinks: i, languageSelector: a, className: o, ...s }) {
 	return /* @__PURE__ */ L("footer", {
-		className: "bg-surface-primary px-4 py-6 sm:px-6 sm:pt-20 md:px-8 lg:pt-24 lg:pb-10",
-		...o,
+		className: W("bg-surface-primary px-4 py-6 sm:px-6 sm:pt-20 md:px-8 lg:pt-24 lg:pb-10", o),
+		...s,
 		children: /* @__PURE__ */ R("div", {
 			className: "mx-auto flex max-w-[1200px] flex-col gap-12 md:gap-16 lg:gap-32",
 			children: [/* @__PURE__ */ R("div", {
@@ -60201,11 +60201,11 @@ var sEe = ({ image: e, title: t, description: n, className: r, ...i }) => /* @__
 			children: n
 		})]
 	})
-}), N7 = ({ letter: e, href: t, ref: n, ...r }) => /* @__PURE__ */ L("a", {
-	ref: n,
+}), N7 = ({ letter: e, href: t, className: n, ref: r, ...i }) => /* @__PURE__ */ L("a", {
+	ref: r,
 	href: t,
-	className: U("component-700 rounded-500 flex size-500 items-center justify-center", "outline-hidden", t ? "hover:bg-background-subdued-hover active:bg-background-subdued-down" : "opacity-30", "interaction-transition focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring transition-all"),
-	...r,
+	className: W("component-700 rounded-500 flex size-500 items-center justify-center", "outline-hidden", t ? "hover:bg-background-subdued-hover active:bg-background-subdued-down" : "opacity-30", "interaction-transition focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring transition-all", n),
+	...i,
 	children: e
 });
 N7.displayName = "GlossaryLetterLink";
@@ -62014,17 +62014,17 @@ var fDe = Object.assign(r9, {
 		className: "heading-thin-700 max-w-[600px] text-balance",
 		children: e
 	})]
-}), ODe = ({ titleBlock: e, children: t, cta: n, ...r }) => {
-	let i = Se.count(t);
+}), ODe = ({ titleBlock: e, children: t, cta: n, className: r, ...i }) => {
+	let a = Se.count(t);
 	return /* @__PURE__ */ R("div", {
-		className: U("px-4 sm:px-6 md:px-8 xl:px-10", "pt-e700 pb-e1000", "gap-i600 flex flex-col items-stretch"),
-		...r,
+		className: W("px-4 sm:px-6 md:px-8 xl:px-10", "pt-e700 pb-e1000", "gap-i600 flex flex-col items-stretch", r),
+		...i,
 		children: [e, /* @__PURE__ */ R("div", {
 			className: "gap-i500 mx-auto flex w-full max-w-[1200px] flex-col",
 			children: [/* @__PURE__ */ L("div", {
 				className: U("grid w-full grid-cols-1 gap-6", {
-					"lg:grid-cols-2": i < 3,
-					"lg:grid-cols-3": i >= 3
+					"lg:grid-cols-2": a < 3,
+					"lg:grid-cols-3": a >= 3
 				}),
 				children: t
 			}), n && /* @__PURE__ */ L("div", {
@@ -62412,24 +62412,24 @@ var kDe = ({ titleBlock: e, children: t, className: n, ...r }) => {
 			className: U("bg-surface-primary border-misc-border absolute size-3 rounded-full border", "start-0 top-3", "lg:start-1/2 lg:top-14 lg:-translate-x-1/2 lg:rtl:translate-x-1/2")
 		})
 	]
-}), s9 = (({ as: e = "a", icon: t, title: n, description: r, image: i, ref: a, ...o }) => o.href ? /* @__PURE__ */ R(e, {
-	ref: a,
-	className: "group inline-flex w-full flex-col gap-3 outline-hidden",
-	...o,
+}), s9 = (({ as: e = "a", className: t, icon: n, title: r, description: i, image: a, ref: o, ...s }) => s.href ? /* @__PURE__ */ R(e, {
+	ref: o,
+	className: W("group inline-flex w-full flex-col gap-3 outline-hidden", t),
+	...s,
 	children: [/* @__PURE__ */ R("div", {
 		className: U("relative flex", "rounded-500 aspect-video overflow-hidden", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring", "transition-all"),
-		children: [i, /* @__PURE__ */ L("div", { className: "rounded-500 ring-misc-border pointer-events-none absolute inset-0 ring-1 ring-inset" })]
+		children: [a, /* @__PURE__ */ L("div", { className: "rounded-500 ring-misc-border pointer-events-none absolute inset-0 ring-1 ring-inset" })]
 	}), /* @__PURE__ */ R("div", {
 		className: "flex flex-col gap-1",
 		children: [/* @__PURE__ */ R("div", {
 			className: "flex items-center",
-			children: [t, /* @__PURE__ */ L("span", {
+			children: [n, /* @__PURE__ */ L("span", {
 				className: "component-600 ms-1.25",
-				children: n
+				children: r
 			})]
-		}), r && /* @__PURE__ */ L("p", {
+		}), i && /* @__PURE__ */ L("p", {
 			className: "component-light-500 text-content-secondary",
-			children: r
+			children: i
 		})]
 	})]
 }) : null);
@@ -62596,10 +62596,10 @@ var d9 = ({ title: e, subtitle: t, image: n, form: r, cta: i, dismiss: a, classN
 d9.displayName = "RaterPromoBanner";
 //#endregion
 //#region src/components/website/ToolSmallCard/ToolSmallCard.tsx
-var f9 = (({ as: e = "a", title: t, image: n, ref: r, ...i }) => i.href ? /* @__PURE__ */ R(e, {
-	ref: r,
-	className: U("inline-flex items-center gap-2 py-1.5 ps-1.5 pe-3", "rounded-500 border-misc-hairline-emphasized misc-border-size-hairline", "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 outline-hidden transition-all"),
-	...i,
+var f9 = (({ as: e = "a", title: t, image: n, className: r, ref: i, ...a }) => a.href ? /* @__PURE__ */ R(e, {
+	ref: i,
+	className: W("inline-flex items-center gap-2 py-1.5 ps-1.5 pe-3", "rounded-500 border-misc-hairline-emphasized misc-border-size-hairline", "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 outline-hidden transition-all", r),
+	...a,
 	children: [!!n && /* @__PURE__ */ L("div", {
 		className: "rounded-concentric-500-6px relative flex h-12 w-[85px] shrink-0 overflow-hidden [&_img]:size-full [&_img]:object-cover",
 		children: n

package/package.json

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