@protonradio/proton-ui 0.7.5-beta14 → 0.7.5-beta16

package/dist/index.d.ts

@@ -374,31 +374,26 @@ declare interface IconProps {
  * ImageOverlay component for displaying an image with a blur effect.
  * @interface ImageBackdropProps
  */
-export declare function ImageBackdrop({ image, imageUrl, onLoad, children, }: ImageBackdropProps): JSX_2.Element;
+export declare function ImageBackdrop({ image, imageUrl, onLoad }: ImageBackdropProps): JSX_2.Element;
 
 declare interface ImageBackdropProps {
     /**
-     * The image to display in the overlay. Supports server side rendering.
+     * Manually display a backdrop image. Useful for server-side rendering.
+     * @important When using this prop, you must style your own image component appropriately.
+     * The component will be placed directly in the backdrop without additional styling.
      */
     image?: React.ReactNode;
     /**
-     * The URL of the image to display in the overlay.
-     * @important Supported in client components only.
+     * The URL of the image to display in the backdrop.
+     * @important Client-side only. Cannot be used in Server Components.
+     * When using this prop, the image will be automatically styled with the backdrop effect.
      */
     imageUrl?: string;
     /**
      * Callback function to handle the image load event.
-     * @important Supported in client components only.
+     * @important Client-side only. Cannot be used in Server Components.
      */
     onLoad?: (image: HTMLImageElement) => void;
-    /**
-     * Callback function to handle the background event.
-     */
-    onBackgroundEvent?: () => void;
-    /**
-     * The children to display in the backdrop.
-     */
-    children?: React.ReactNode;
 }
 
 /**

package/dist/index.es.js

@@ -8983,8 +8983,8 @@ function Ws({
         "proton-Backdrop__background",
         t ? "proton-Backdrop__fade-in" : "proton-Backdrop__overlay"
       ),
-      onClick: (l) => {
-        e && l.target === l.currentTarget && (l.stopPropagation(), e());
+      onClick: () => {
+        e && e();
       },
       children: [
         e && /* @__PURE__ */ b.jsx("div", { className: "proton-Backdrop__close-button", "aria-hidden": "true", children: "ESC" }),
@@ -11780,21 +11780,16 @@ const Lh = (t) => {
   }
   return "";
 };
-function f4({
-  image: t,
-  imageUrl: e = "",
-  onLoad: n,
-  children: r
-}) {
-  const { palette: l } = Ie(), i = Nc(l.BASE_COLOR), o = Lh(i);
+function f4({ image: t, imageUrl: e = "", onLoad: n }) {
+  const { palette: r } = Ie(), l = Nc(r.BASE_COLOR), i = Lh(l);
   return /* @__PURE__ */ b.jsxs(Ws, { fadeIn: !1, children: [
-    t ? /* @__PURE__ */ b.jsx("div", { className: "proton-Backdrop__image", "aria-hidden": "true", children: t }) : /* @__PURE__ */ b.jsx(
+    t ? /* @__PURE__ */ b.jsx("div", { "aria-hidden": "true", children: t }) : /* @__PURE__ */ b.jsx(
       "img",
       {
         alt: "",
         src: e,
         className: "proton-Backdrop__image",
-        onLoad: (a) => n == null ? void 0 : n(a.currentTarget),
+        onLoad: (o) => n == null ? void 0 : n(o.currentTarget),
         "aria-hidden": "true"
       }
     ),
@@ -11808,7 +11803,7 @@ function f4({
           WebkitBackdropFilter: "blur(24px) brightness(75%)",
           backdropFilter: "blur(24px) brightness(75%)",
           filter: "brightness(50%)",
-          background: o
+          background: i
         }
       }
     )