@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.40

package/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
     <select
       aria-invalid="false"
       aria-label="disabled FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r5:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
       disabled=""
@@ -32,12 +32,24 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -53,7 +65,7 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
     <select
       aria-invalid="false"
       aria-label="label"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r7:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -76,12 +88,24 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -97,7 +121,7 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
     <select
       aria-invalid="false"
       aria-label="label"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r9:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
       id="id"
@@ -121,12 +145,24 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -141,7 +177,7 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
   >
     <select
       aria-invalid="false"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rb:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -164,12 +200,24 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -185,7 +233,7 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="grouped FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r3:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -254,12 +302,24 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -275,7 +335,7 @@ exports[`FormSelect Simple FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="simple FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:r1:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -336,12 +396,24 @@ exports[`FormSelect Simple FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -357,7 +429,7 @@ exports[`FormSelect invalid FormSelect input 1`] = `
     <select
       aria-invalid="true"
       aria-label="invalid FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rd:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -380,12 +452,24 @@ exports[`FormSelect invalid FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M14.75 16V9a1.25 1.25 0 0 1 2.5 0v7a1.25 1.25 0 0 1-2.5 0ZM31 16c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Zm-13 4.261a1.75 1.75 0 1 0 .001 3.501A1.75 1.75 0 0 0 16 20.261Z"
+            />
+          </svg>
         </svg>
       </span>
       <span
@@ -397,12 +481,24 @@ exports[`FormSelect invalid FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -418,7 +514,7 @@ exports[`FormSelect validated success FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rf:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -441,12 +537,24 @@ exports[`FormSelect validated success FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
           width="1em"
         >
-          <path
-            d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm7.707-17.707a.999.999 0 0 1 0 1.414l-8.646 8.646c-.292.292-.676.438-1.061.438s-.768-.146-1.061-.438l-4.646-4.646a.999.999 0 1 1 1.414-1.414L14 19.586l8.293-8.293a.999.999 0 0 1 1.414 0Z"
+            />
+          </svg>
         </svg>
       </span>
       <span
@@ -458,12 +566,24 @@ exports[`FormSelect validated success FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -479,7 +599,7 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
     <select
       aria-invalid="false"
       aria-label="validated FormSelect"
-      data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
+      data-ouia-component-id="OUIA-Generated-FormSelect-:rh:"
       data-ouia-component-type="PF6/FormSelect"
       data-ouia-safe="true"
     >
@@ -502,12 +622,24 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 576 512"
           width="1em"
         >
-          <path
-            d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 576 512"
+          >
+            <path
+              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M31.461 27.771 17.3 2.301a1.499 1.499 0 0 0-2.623 0L.517 27.771c-.261.469-.255 1.025.018 1.489s.756.74 1.294.74h28.322c.537 0 1.021-.276 1.293-.74a1.49 1.49 0 0 0 .018-1.489ZM2.678 28l13.31-23.942L29.3 28H2.678ZM16 11.75c.69 0 1.25.56 1.25 1.25v5a1.25 1.25 0 0 1-2.5 0v-5c0-.69.56-1.25 1.25-1.25Zm1.75 12.261a1.75 1.75 0 1 1-3.501-.001 1.75 1.75 0 0 1 3.501.001Z"
+            />
+          </svg>
         </svg>
       </span>
       <span
@@ -519,12 +651,24 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,102 @@
+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+import { css } from '@patternfly/react-styles';
+import heroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_hero_BackgroundImage_light';
+import heroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_hero_BackgroundImage_dark';
+import heroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_1_light';
+import heroGradientStop2Light from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_2_light';
+import heroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_3_light';
+import heroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_1_dark';
+import heroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_2_dark';
+import heroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_3_dark';
+import heroBodyWidth from '@patternfly/react-tokens/dist/esm/c_hero__body_Width';
+import heroBodyMaxWidth from '@patternfly/react-tokens/dist/esm/c_hero__body_MaxWidth';
+
+/** The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark). */
+
+export interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
+  /** Content of the hero */
+  children?: React.ReactNode;
+  /** Additional classes added to the hero */
+  className?: string;
+  /** Light theme background image path of the hero */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path of the hero */
+  backgroundSrcDark?: string;
+  /** Light theme gradient of the hero, taking any valid CSS color values for each stop property. */
+  gradientLight?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+  /** Dark theme gradient of the hero, taking any valid CSS color values for each stop property. */
+  gradientDark?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+  /** Flag indicating whether glass styles are removed from the hero when a glass theme is applied. */
+  hasNoGlass?: boolean;
+  /** Modifies the width of the hero body. */
+  bodyWidth?: string;
+  /** Modifies the max-width of the hero body. */
+  bodyMaxWidth?: string;
+}
+
+export const Hero: React.FunctionComponent<HeroProps> = ({
+  className,
+  children,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  gradientLight,
+  gradientDark,
+  hasNoGlass = false,
+  bodyWidth,
+  bodyMaxWidth,
+  ...props
+}) => {
+  const customStyles: { [key: string]: string } = {};
+  if (backgroundSrcLight) {
+    customStyles[heroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+  }
+  if (backgroundSrcDark) {
+    customStyles[heroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+  }
+
+  if (gradientLight?.stop1) {
+    customStyles[heroGradientStop1Light.name] = gradientLight.stop1;
+  }
+  if (gradientLight?.stop2) {
+    customStyles[heroGradientStop2Light.name] = gradientLight.stop2;
+  }
+  if (gradientLight?.stop3) {
+    customStyles[heroGradientStop3Light.name] = gradientLight.stop3;
+  }
+  if (gradientDark?.stop1) {
+    customStyles[heroGradientStop1Dark.name] = gradientDark.stop1;
+  }
+  if (gradientDark?.stop2) {
+    customStyles[heroGradientStop2Dark.name] = gradientDark.stop2;
+  }
+  if (gradientDark?.stop3) {
+    customStyles[heroGradientStop3Dark.name] = gradientDark.stop3;
+  }
+
+  if (bodyWidth) {
+    customStyles[heroBodyWidth.name] = bodyWidth;
+  }
+  if (bodyMaxWidth) {
+    customStyles[heroBodyMaxWidth.name] = bodyMaxWidth;
+  }
+
+  return (
+    <div
+      className={css(styles.hero, hasNoGlass && styles.modifiers.noGlass, className)}
+      style={{ ...props.style, ...customStyles }}
+      {...props}
+    >
+      <div className={css(styles.heroBody)}>{children}</div>
+    </div>
+  );
+};
+
+Hero.displayName = 'Hero';