@patternfly/react-core 6.5.0-prerelease.9 → 6.5.0

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,11 +452,11 @@ exports[`FormSelect invalid FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 32 32"
           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"
+            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
           />
         </svg>
       </span>
@@ -397,12 +469,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 +502,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,11 +525,11 @@ exports[`FormSelect validated success FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 512 512"
+          viewBox="0 0 32 32"
           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"
+            d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
           />
         </svg>
       </span>
@@ -458,12 +542,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 +575,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,11 +598,11 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 576 512"
+          viewBox="0 0 32 32"
           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"
+            d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
           />
         </svg>
       </span>
@@ -519,12 +615,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/HelperText/HelperTextItem.tsx

@@ -1,9 +1,9 @@
 import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
 import { css } from '@patternfly/react-styles';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export enum HelperTextItemVariant {
   default = 'default',
@@ -38,9 +38,9 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
 
 const defaultVariantIcons = {
   indeterminate: <MinusIcon />,
-  warning: <ExclamationTriangleIcon />,
-  success: <CheckCircleIcon />,
-  error: <ExclamationCircleIcon />
+  warning: <RhUiWarningFillIcon />,
+  success: <RhUiCheckCircleFillIcon />,
+  error: <RhUiErrorFillIcon />
 };
 
 export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({

package/src/components/HelperText/examples/HelperText.md

@@ -9,7 +9,7 @@ import { Fragment } from 'react';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
 import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
 
 ## Examples

package/src/components/HelperText/examples/HelperTextWithCustomIcon.tsx

@@ -4,7 +4,7 @@ import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
 import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
   <Fragment>
@@ -27,7 +27,7 @@ export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
       </HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="error" icon={<TimesIcon />}>
+      <HelperTextItem variant="error" icon={<RhMicronsCloseIcon />}>
         This is error helper text
       </HelperTextItem>
     </HelperText>

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;
+  };
+  /** @beta Flag indicating the hero has glass styling when glass theme is applied. */
+  isGlass?: 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,
+  isGlass = 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, isGlass && styles.modifiers.glass, className)}
+      style={{ ...props.style, ...customStyles }}
+      {...props}
+    >
+      <div className={css(styles.heroBody)}>{children}</div>
+    </div>
+  );
+};
+
+Hero.displayName = 'Hero';