@photoroom/ui 0.1.228 → 0.1.230

package/components/editor/Pill/Pill.d.ts

@@ -1,7 +1,19 @@
 export type PillProps = React.ComponentProps<"div">;
 export declare const Pill: {
     ({ className, ...props }: PillProps): import("react/jsx-runtime").JSX.Element;
-    Button: import("react").ForwardRefExoticComponent<Omit<import("./PillButton").PillButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Button: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & {
+        chevron?: boolean;
+    } & {
+        label: string;
+        icon?: React.ReactNode;
+        tooltip?: string;
+    }, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & {
+        chevron?: boolean;
+    } & {
+        icon: React.ReactNode;
+        label?: never;
+        tooltip: string;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     Divider: {
         ({ className, ...props }: import("./PillDivider").PillDividerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/components/editor/Pill/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/Pill.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,eAAO,MAAM,IAAI;8BAA6B,SAAS;;;;;;;CAYtD,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/Pill.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,eAAO,MAAM,IAAI;8BAA6B,SAAS;;;;;;;;;;;;;;;;;;;CAYtD,CAAC"}

package/components/editor/Pill/PillButton.d.ts

@@ -1,8 +1,24 @@
 import React from "react";
-export type PillButtonProps = Omit<React.ComponentProps<"button">, "children"> & {
-    icon?: React.ReactNode;
-    label?: string;
+type PillButtonBaseProps = Omit<React.ComponentProps<"button">, "children"> & {
     chevron?: boolean;
 };
-export declare const PillButton: React.ForwardRefExoticComponent<Omit<PillButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type LabelledPillButtonProps = PillButtonBaseProps & {
+    /** Visible text label. When present, `tooltip` is optional. */
+    label: string;
+    icon?: React.ReactNode;
+    /** Optional tooltip. Renders via the DS Tooltip when provided. */
+    tooltip?: string;
+};
+type IconOnlyPillButtonProps = PillButtonBaseProps & {
+    icon: React.ReactNode;
+    label?: never;
+    /**
+     * Required for icon-only buttons: renders via the DS Tooltip and feeds the
+     * accessible name (`aria-label`), unless an explicit `aria-label` is also passed.
+     */
+    tooltip: string;
+};
+export type PillButtonProps = LabelledPillButtonProps | IconOnlyPillButtonProps;
+export declare const PillButton: React.ForwardRefExoticComponent<(Omit<LabelledPillButtonProps, "ref"> | Omit<IconOnlyPillButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+export {};
 //# sourceMappingURL=PillButton.d.ts.map

package/components/editor/Pill/PillButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillButton.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/PillButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,wGA4DtB,CAAC"}
+{"version":3,"file":"PillButton.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/Pill/PillButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,uBAAuB,GAAG,mBAAmB,GAAG;IACnD,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,uBAAuB,GAAG,mBAAmB,GAAG;IACnD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAEhF,eAAO,MAAM,UAAU,yJAuEtB,CAAC"}

package/components/unsorted/Tooltip/Tooltip.d.ts

@@ -10,6 +10,12 @@ export type TooltipProps = Readonly<{
     defaultOpen?: boolean;
     triggerTabIndex?: number;
     sideOffset?: number;
+    /**
+     * Never open the tooltip from focus, only from hover (or tap on mobile). Prevents it
+     * flashing when a focus scope (e.g. a Dialog) autofocuses the trigger on mount. Pair
+     * with an explicit `aria-label` on the trigger so the accessible name is preserved.
+     */
+    disableFocusOpen?: boolean;
 }>;
 /**
  * Creating our own API by abstracting the primitive parts into our own component.
@@ -17,5 +23,5 @@ export type TooltipProps = Readonly<{
  *
  * ⚠️ The component that is passed as a trigger MUST forward the ref
  */
-export declare const Tooltip: ({ children, content, isTriggerDisabled, className, triggerClassName, withPortal, side, defaultOpen, triggerTabIndex, sideOffset, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children, content, isTriggerDisabled, className, triggerClassName, withPortal, side, defaultOpen, triggerTabIndex, sideOffset, disableFocusOpen, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/components/unsorted/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/unsorted/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAAI,6IAYrB,YAAY,4CA8Ed,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/unsorted/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAAI,+JAarB,YAAY,4CAmGd,CAAC"}

package/components/website/DataBlock/DataBlock.d.ts

@@ -1,6 +1,7 @@
-export type DataBlockProps = Omit<React.ComponentProps<"div">, "title"> & Readonly<{
+import { type BlockBackgroundVariant } from "../BlockBackground";
+export type DataBlockProps = Omit<React.ComponentProps<"section">, "title"> & Readonly<{
     title?: React.ReactNode;
-    background?: "white" | "lightgrey";
+    background?: BlockBackgroundVariant;
 }>;
-export declare const DataBlock: ({ title, children, background, ...rest }: DataBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataBlock: ({ title, background, children, className, ...rest }: DataBlockProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataBlock.d.ts.map

package/components/website/DataBlock/DataBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/website/DataBlock/DataBlock.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GACrE,QAAQ,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CACpC,CAAC,CAAC;AAEL,eAAO,MAAM,SAAS,GAAI,0CAAoD,cAAc,4CA0B3F,CAAC"}
+{"version":3,"file":"DataBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/website/DataBlock/DataBlock.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GACzE,QAAQ,CAAC;IACP,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC,CAAC,CAAC;AAEL,eAAO,MAAM,SAAS,GAAI,qDAMvB,cAAc,4CAwBhB,CAAC"}

package/index.mjs

@@ -5559,32 +5559,44 @@ var Vo = ho, Ho = yo, Uo = xo, Wo = To, Go = Do, Ko = Po, qo = /* @__PURE__ */ F
 	_(i), b(i), y(i), x(i), L(r) || ue(), P(r);
 	var me = g(i) || ue();
 	m(i), h(i) || ue(), v(i), v(i), T(o), O(o), k(o) || ue(), M(r), N(r), ee(r), te(r), ne(r), A(o), j(o), ie(r), ae(r), z(r), S(i), C(i), oe(a), se(a), pe(s), F(r) || B(s), I(r), w(i), le(), ue(), de(), fe(), ce(), B(s), F(r) && B(s), E(o), D(o), re(r), R(r), e.isMobile = me;
-})))(), Yo = ({ children: e, content: t, isTriggerDisabled: n, className: r, triggerClassName: a, withPortal: o = !0, side: s = "bottom", defaultOpen: c = !1, triggerTabIndex: l = 0, sideOffset: u, ...d }) => {
-	let f = g(), [p, m] = C(c), h = o ? Wo : i;
+})))(), Yo = ({ children: e, content: t, isTriggerDisabled: n, className: r, triggerClassName: a, withPortal: o = !0, side: s = "bottom", defaultOpen: c = !1, triggerTabIndex: l = 0, sideOffset: u, disableFocusOpen: d = !1, ...f }) => {
+	let p = g(), [m, h] = C(c), _ = S(!1), v = o ? Wo : i, y = d ? () => {
+		_.current = !0, queueMicrotask(() => {
+			_.current = !1;
+		});
+	} : void 0;
 	return /* @__PURE__ */ E(Vo, { children: /* @__PURE__ */ D(Ho, {
 		delayDuration: 0,
-		open: p,
-		onOpenChange: m,
+		open: m,
+		onOpenChange: (e) => {
+			if (e && _.current) {
+				_.current = !1;
+				return;
+			}
+			h(e);
+		},
 		defaultOpen: c,
 		children: [/* @__PURE__ */ E(Uo, {
 			asChild: !0,
 			children: n ? /* @__PURE__ */ E("span", {
 				className: H("inline-block", a),
-				"aria-describedby": f,
+				"aria-describedby": p,
 				tabIndex: l,
+				onFocusCapture: y,
 				children: e
 			}) : /* @__PURE__ */ E("span", {
 				className: H("inline-block", a),
-				"aria-describedby": f,
-				onClick: () => Jo.isMobile && m(!0),
+				"aria-describedby": p,
+				onFocusCapture: y,
+				onClick: () => Jo.isMobile && h(!0),
 				children: e
 			})
-		}), t && /* @__PURE__ */ E(h, { children: /* @__PURE__ */ D(Go, {
+		}), t && /* @__PURE__ */ E(v, { children: /* @__PURE__ */ D(Go, {
 			side: s,
 			sideOffset: u,
 			className: H("component-400 rounded-250 bg-background-tooltip z-50 px-1.5 pt-[5px] pb-1.5 [word-break:break-word] text-white", "max-w-[100vw]", "[&_strong]:component-400 [&_strong]:bg-white-alpha-3 [&_strong]:rounded-[2px] [&_strong]:px-[2px]", "[&_b]:component-400 [&_b]:bg-white-alpha-3 [&_b]:rounded-[2px] [&_b]:px-[2px]", "[&_a]:underline", s === "bottom" && "animate-tooltip-slide-down", s === "top" && "animate-tooltip-slide-up", s === "left" && "animate-tooltip-slide-left", s === "right" && "animate-tooltip-slide-right", r),
-			id: f,
-			...d,
+			id: p,
+			...f,
 			children: [t, /* @__PURE__ */ E(Ko, {
 				className: "fill-background-tooltip",
 				asChild: !0,
@@ -20676,10 +20688,10 @@ fx();
 //#region ../shared/lib/ampli/index.ts
 var px = { production: "0cc38251f8841c0d84d11fd20b400b07" }, mx = {
 	plan: {
-		version: "378",
+		version: "380",
 		branch: "main",
 		source: "web",
-		versionId: "852daa01-4ed6-48a2-aa34-eb47d3791ee3"
+		versionId: "16c224f9-b4a9-4458-b2d5-07461a3b0940"
 	},
 	ingestionMetadata: {
 		sourceName: "browser-typescript-ampli",
@@ -36528,27 +36540,34 @@ var nY = l(({ label: e, labelTestId: t, subtitle: n, isHidden: r, defaultIsHidde
 nY.displayName = "ObjectItem";
 //#endregion
 //#region src/components/editor/Pill/PillButton.tsx
-var rY = l(({ icon: e, label: t, className: n, chevron: r = !1, ...i }, a) => {
-	let o = e && !t, s = !e && t, c = e && t, l = /* @__PURE__ */ D(T, { children: [!!e && /* @__PURE__ */ E("span", {
+var rY = l(({ icon: e, label: t, className: n, chevron: r = !1, tooltip: i, ...a }, o) => {
+	let s = !!e && !t, c = !e && !!t, l = !!e && !!t, u = /* @__PURE__ */ D(T, { children: [!!e && /* @__PURE__ */ E("span", {
 		role: "presentation",
 		className: "icon-size-500",
 		children: e
 	}), !!t && /* @__PURE__ */ E("span", {
 		className: "component-500",
 		children: t
-	})] });
-	return /* @__PURE__ */ E("button", {
-		...i,
-		ref: a,
-		className: V("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", o && !r && "size-400", o && r && "size-h-400 content-to-edge-ps-250 content-to-edge-pe-150 gap-1", s && !r && "content-to-edge-px-400 size-h-400", s && r && "content-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", c && !r && "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2", c && r && "icon-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", n),
+	})] }), d = /* @__PURE__ */ E("button", {
+		...a,
+		ref: o,
+		"aria-label": a["aria-label"] ?? (s ? i : void 0),
+		className: V("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", s && !r && "size-400", s && r && "size-h-400 content-to-edge-ps-250 content-to-edge-pe-150 gap-1", c && !r && "content-to-edge-px-400 size-h-400", c && r && "content-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", l && !r && "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2", l && r && "icon-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", n),
 		children: r ? /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("span", {
 			className: "flex items-center gap-2",
-			children: l
+			children: u
 		}), /* @__PURE__ */ E(L, {
 			"aria-hidden": !0,
 			className: "icon-size-400"
-		})] }) : l
+		})] }) : u
 	});
+	return i ? /* @__PURE__ */ E(Yo, {
+		content: i,
+		side: "top",
+		isTriggerDisabled: a.disabled,
+		disableFocusOpen: !0,
+		children: d
+	}) : d;
 });
 rY.displayName = "PillButton";
 //#endregion
@@ -55095,21 +55114,34 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 			})]
 		})
 	})
-}), b_e = ({ title: e, children: t, background: r = "white", ...i }) => {
-	let a = n.toArray(t);
-	return /* @__PURE__ */ D("div", {
-		className: V("pt-e700 pb-e1000 px-4 sm:px-6 md:px-8", "gap-i600 flex flex-col", {
-			"bg-surface-default": r === "white",
-			"bg-neutral-50": r === "lightgrey"
-		}),
-		...i,
+}), f9 = l(({ as: e = "section", variant: t = "surface-default", className: n, children: r, ...i }, a) => /* @__PURE__ */ E(e, {
+	ref: a,
+	...i,
+	className: H({
+		"bg-surface-default": t === "surface-default",
+		"bg-neutral-50": t === "neutral-50",
+		"bg-sand-50": t === "sand-50",
+		"to-surface-default bg-linear-to-b from-neutral-50": t === "neutral-50-top",
+		"from-surface-default bg-linear-to-b to-neutral-50": t === "neutral-50-bottom"
+	}, n),
+	children: r
+}));
+f9.displayName = "BlockBackground";
+//#endregion
+//#region src/components/website/DataBlock/DataBlock.tsx
+var b_e = ({ title: e, background: t = "surface-default", children: r, className: i, ...a }) => {
+	let o = n.toArray(r);
+	return /* @__PURE__ */ D(f9, {
+		variant: t,
+		className: H("pt-e700 pb-e1000 gap-i600 flex flex-col px-4 sm:px-6 md:px-8", i),
+		...a,
 		children: [e, /* @__PURE__ */ E("div", {
 			className: V("mx-auto w-full max-w-[1200px]", "grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 sm:gap-y-12", {
-				"md:grid-cols-2": a.length < 3,
-				"md:grid-cols-3": a.length === 3,
-				"md:grid-cols-4": a.length > 3
+				"md:grid-cols-2": o.length < 3,
+				"md:grid-cols-3": o.length === 3,
+				"md:grid-cols-4": o.length > 3
 			}),
-			children: a
+			children: o
 		})]
 	});
 }, x_e = ({ data: e, title: t, subtitle: n, className: r, ...i }) => /* @__PURE__ */ D("div", {
@@ -55129,7 +55161,7 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 			children: n
 		})
 	]
-}), f9 = ({ children: e, className: t }) => /* @__PURE__ */ E("div", {
+}), p9 = ({ children: e, className: t }) => /* @__PURE__ */ E("div", {
 	className: "px-4 sm:px-6 md:px-8 xl:px-10",
 	children: /* @__PURE__ */ E("div", {
 		className: V("mx-auto max-w-[1200px]", t),
@@ -55140,7 +55172,7 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 	return /* @__PURE__ */ D("div", {
 		className: "pt-e700 pb-e1000 gap-i600 flex flex-col",
 		...o,
-		children: [e && /* @__PURE__ */ E(f9, { children: e }), /* @__PURE__ */ D("div", {
+		children: [e && /* @__PURE__ */ E(p9, { children: e }), /* @__PURE__ */ D("div", {
 			className: "gap-i500 flex flex-col",
 			children: [/* @__PURE__ */ E("div", {
 				ref: d,
@@ -55155,7 +55187,7 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 						children: e
 					}, t))
 				})
-			}), (n || s || c) && /* @__PURE__ */ D(f9, {
+			}), (n || s || c) && /* @__PURE__ */ D(p9, {
 				className: "flex flex-row-reverse items-center justify-between gap-2",
 				children: [(s || c) && /* @__PURE__ */ D("div", {
 					className: "flex shrink-0 gap-2",
@@ -55436,22 +55468,7 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 			}), !!r && /* @__PURE__ */ E("div", { children: r })]
 		})]
 	})
-}), p9 = l(({ as: e = "section", variant: t = "surface-default", className: n, children: r, ...i }, a) => /* @__PURE__ */ E(e, {
-	ref: a,
-	...i,
-	className: H({
-		"bg-surface-default": t === "surface-default",
-		"bg-neutral-50": t === "neutral-50",
-		"bg-sand-50": t === "sand-50",
-		"to-surface-default bg-linear-to-b from-neutral-50": t === "neutral-50-top",
-		"from-surface-default bg-linear-to-b to-neutral-50": t === "neutral-50-bottom"
-	}, n),
-	children: r
-}));
-p9.displayName = "BlockBackground";
-//#endregion
-//#region src/components/website/FocusBlock/FocusBlock.tsx
-var B_e = ({ overline: e, title: t, description: n, visual: r, ctas: i, background: a = "sand-50", ...o }) => /* @__PURE__ */ E(p9, {
+}), B_e = ({ overline: e, title: t, description: n, visual: r, ctas: i, background: a = "sand-50", ...o }) => /* @__PURE__ */ E(f9, {
 	variant: a,
 	className: "py-e700 px-4 sm:px-6 md:px-8 xl:px-10",
 	...o,
@@ -56725,7 +56742,7 @@ var Mve = Object.assign(R9, {
 			})]
 		})]
 	})
-}), Pve = ({ title: e, visualElement: t, largeVisualAsset: n, background: r = "neutral-50", bgColor: i, ...a }) => /* @__PURE__ */ E(p9, {
+}), Pve = ({ title: e, visualElement: t, largeVisualAsset: n, background: r = "neutral-50", bgColor: i, ...a }) => /* @__PURE__ */ E(f9, {
 	as: "div",
 	variant: i ? "surface-default" : r,
 	className: V("relative flex overflow-hidden", "pt-e600 pb-e500 sm:py-e500 lg:py-e800", "px-4 sm:px-6 md:px-8 xl:px-10", "xl:min-h-[720px]"),
@@ -57180,7 +57197,7 @@ var Yve = ({ title: e, children: t, cta: n, image: r, ...i }) => {
 H9.displayName = "ToolSmallCard";
 //#endregion
 //#region src/components/website/UseCasesBlock/UseCasesBlock.tsx
-var Xve = ({ titleBlock: e, selectedIndex: t, background: n = "neutral-50-bottom", useCases: r, ...a }) => /* @__PURE__ */ D(p9, {
+var Xve = ({ titleBlock: e, selectedIndex: t, background: n = "neutral-50-bottom", useCases: r, ...a }) => /* @__PURE__ */ D(f9, {
 	variant: n,
 	className: V("flex flex-col items-center", "px-4 sm:px-6 md:px-8 xl:px-10", "pt-e700 pb-e1000", "gap-i400"),
 	...a,

package/package.json

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