@deriv-web-design/ui 0.1.9 → 0.1.11

package/dist/index.d.mts

@@ -593,8 +593,11 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
      */
     productImage?: ReactNode | string;
     /**
-     * Smaller floating image shown below the productImage in the Showcase variant.
-     * Accepts a ReactNode or image URL string.
+     * Secondary foreground image. Accepts a ReactNode or image URL string.
+     * In the Showcase variant it sits below `productImage`, cropped to a 1:1 box.
+     * In the Split variant it is a small layer anchored to the hero's lower
+     * inline-end and painted behind `heroImage` so the subject overlaps it; it
+     * keeps its natural aspect ratio (no crop) and is hidden below 992px.
      */
     floatingImage?: ReactNode | string;
 }
@@ -667,9 +670,16 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
      * The field always renders for that variant; this prop only customises it.
      */
     search?: HeaderSearchProps;
+    /**
+     * Set to `true` when the fixed `Navbar` is rendered above this header (it is
+     * the first section on the page). Reserves top clearance equal to the navbar's
+     * footprint so the vertically-centred title never slides under the fixed pill.
+     * Defaults to `false` — leave it off when there is no navbar above the header.
+     */
+    underNavbar?: boolean;
 }
 
-declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, search, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, search, underNavbar, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */

package/dist/index.d.ts

@@ -593,8 +593,11 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
      */
     productImage?: ReactNode | string;
     /**
-     * Smaller floating image shown below the productImage in the Showcase variant.
-     * Accepts a ReactNode or image URL string.
+     * Secondary foreground image. Accepts a ReactNode or image URL string.
+     * In the Showcase variant it sits below `productImage`, cropped to a 1:1 box.
+     * In the Split variant it is a small layer anchored to the hero's lower
+     * inline-end and painted behind `heroImage` so the subject overlaps it; it
+     * keeps its natural aspect ratio (no crop) and is hidden below 992px.
      */
     floatingImage?: ReactNode | string;
 }
@@ -667,9 +670,16 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
      * The field always renders for that variant; this prop only customises it.
      */
     search?: HeaderSearchProps;
+    /**
+     * Set to `true` when the fixed `Navbar` is rendered above this header (it is
+     * the first section on the page). Reserves top clearance equal to the navbar's
+     * footprint so the vertically-centred title never slides under the fixed pill.
+     * Defaults to `false` — leave it off when there is no navbar above the header.
+     */
+    underNavbar?: boolean;
 }
 
-declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, search, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, search, underNavbar, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */

package/dist/index.js

@@ -1927,6 +1927,14 @@ var Hero = ({
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hero__overlay", "aria-hidden": "true" }),
+          floatingImage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Visual,
+            {
+              src: floatingImage,
+              className: "hero__floating-image",
+              alt: ""
+            }
+          ),
           heroImage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Visual, { src: heroImage, className: "hero__image-slot", alt: "" }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hero__inner", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hero__content", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hero__left", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hero__body", children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hero__text", children: [
@@ -2089,6 +2097,7 @@ var Header = ({
   leftVisual,
   rightVisual,
   search,
+  underNavbar = false,
   className,
   ...props
 }) => {
@@ -2135,7 +2144,7 @@ var Header = ({
     "section",
     {
       ref: sectionRef,
-      className: ["header", variantClass, className].filter(Boolean).join(" "),
+      className: ["header", variantClass, underNavbar && "header--under-navbar", className].filter(Boolean).join(" "),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "header__grid", "aria-hidden": "true" }),