@kaizen/components 1.42.1 → 1.42.2

package/dist/cjs/Illustration/subcomponents/VideoPlayer/VideoPlayer.cjs

@@ -21,6 +21,12 @@ var VideoPlayer = function (_a) {
   var _d = React.useState(true),
     prefersReducedMotion = _d[0],
     setPrefersReducedMotion = _d[1];
+  var _e = React.useState(false),
+    isWebmCompatible = _e[0],
+    setIsWebmCompatible = _e[1];
+  var _f = React.useState(false),
+    windowIsAvailable = _f[0],
+    setWindowIsAvailable = _f[1];
   React.useEffect(function () {
     /**
      * Setting `muted` on the player is required in Safari/Webkit and older
@@ -101,6 +107,13 @@ var VideoPlayer = function (_a) {
       videoElement.removeEventListener("ended", onEnded);
     };
   }, [videoRef]);
+  React.useEffect(function () {
+    // SSR does not have a window, which is required for canPlayWebm.
+    if (window !== undefined) setWindowIsAvailable(true);
+  }, []);
+  React.useEffect(function () {
+    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm.canPlayWebm());
+  }, [windowIsAvailable]);
   var pausePlay = usePausePlay.usePausePlay(videoRef);
   return React.createElement("figure", {
     className: classnames(Base_module.figure, aspectRatio && Base_module[aspectRatio], aspectRatio && Base_module.aspectRatioWrapper)
@@ -117,7 +130,7 @@ var VideoPlayer = function (_a) {
     autoPlay: prefersReducedMotion ? false : autoplay,
     playsInline: true,
     tabIndex: -1
-  }, canPlayWebm.canPlayWebm() && React.createElement("source", {
+  }, isWebmCompatible && React.createElement("source", {
     src: hostedAssets.assetUrl("".concat(source, ".webm")),
     type: "video/webm"
   }), React.createElement("source", {

package/dist/cjs/Illustration/subcomponents/VideoPlayer/VideoPlayer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.cjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n  /**\n   * Specifies whether the animation plays as soon as it is rendered.\n   * If the user has enabled prefer-reduced-motion their preferences\n   * take precedent over this prop.\n   */\n  autoplay?: boolean\n\n  /**\n   * Replay from start when active animation reaches the end of the animation.\n   */\n  loop?: boolean\n\n  /**\n   * Fallback image. Used when rendering of the asset fails, or as a\n   * poster for the video player.\n   */\n  fallback: string\n\n  /**\n   * The path of the animation source, excluding the file extension. This\n   * Player will preference Webm over mp4.\n   */\n  source: string\n\n  /**\n   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n   * component in a container, forcing the aspect ratio.\n   */\n  aspectRatio?: \"landscape\" | \"portrait\" | \"square\"\n\n  onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n  autoplay = true,\n  loop = false,\n  fallback,\n  source,\n  aspectRatio,\n  onEnded,\n}: VideoPlayerProps): JSX.Element => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    React.useState<boolean>(true)\n\n  useEffect(() => {\n    /**\n     * Setting `muted` on the player is required in Safari/Webkit and older\n     * versions of Chome for the video to autoplay (regardless of whether\n     * the format contains an audio stream or not).\n     *\n     * React does not guarentee the `muted` attribute is set on the\n     * `video` element. So on load we force set this attribute. See issue:\n     * https://github.com/facebook/react/issues/10389\n     */\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.setAttribute(\"muted\", \"\")\n    }\n  }, [])\n\n  useEffect(() => {\n    // when the source of the animation is updated, we need to reload the asset\n    // to ensure the video player is in sync with the new source.\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.load()\n    }\n  }, [source])\n\n  useEffect(() => {\n    if (!window) return\n\n    const reducedMotionQuery = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    )\n    setPrefersReducedMotion(reducedMotionQuery.matches)\n    const updateMotionPreferences = (): void => {\n      const { matches = false } = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      )\n      setPrefersReducedMotion(matches)\n    }\n\n    const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n    const isUnsupportedSafari =\n      window.matchMedia(\"\").addEventListener === undefined\n\n    if (isLegacyEdge || isUnsupportedSafari) return\n\n    reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n    return function cleanup() {\n      reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n    }\n  }, [])\n\n  useEffect(() => {\n    const { current: videoElement } = videoRef\n    if (!videoElement) return\n\n    if (prefersReducedMotion) {\n      videoElement.pause()\n    } else if (autoplay && !prefersReducedMotion) {\n      try {\n        // Older browsers may not return a promise, so .play could return undefined\n        videoElement.play()?.catch(() => {\n          /*\n           * An DOMException _may_ be raised by some browsers if we\n           * programatically interact with the video before the\n           * user has interacted with the page. This is okay - so\n           * we're going to catch this error without handling it. See:\n           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n           */\n        })\n      } catch (e) {\n        /**\n         * Older browsers will raise a synchronous error because their first implementation\n         * of `.play` was not a promise.\n         */\n      }\n    }\n    /**\n     * Chrome seems to have an issue with changes to autoplay after the video\n     * has been mounted. If there is a change in autoplay we need to force the\n     * play() method to be called.\n     */\n  }, [prefersReducedMotion, autoplay])\n\n  useEffect(() => {\n    // Add event listeners for the video element\n    const { current: videoElement } = videoRef\n    if (!videoElement || !onEnded) return\n\n    videoElement.addEventListener(\"ended\", onEnded)\n\n    return function cleanup() {\n      videoElement.removeEventListener(\"ended\", onEnded)\n    }\n  }, [videoRef])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(\n        styles.figure,\n        aspectRatio && styles[aspectRatio],\n        aspectRatio && styles.aspectRatioWrapper\n      )}\n    >\n      <video\n        muted={true}\n        aria-hidden={true}\n        preload=\"metadata\"\n        ref={videoRef}\n        width=\"100%\"\n        data-testid=\"kz-video-player\"\n        className={styles.wrapper}\n        loop={loop}\n        poster={assetUrl(`${fallback}.png`)}\n        autoPlay={prefersReducedMotion ? false : autoplay}\n        playsInline={true}\n        tabIndex={-1}\n      >\n        {canPlayWebm() && (\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n        )}\n        <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n      </video>\n      <IconButton\n        onClick={(): void => pausePlay.toggle()}\n        icon={pausePlay.icon}\n        label={pausePlay.label}\n        classNameOverride={styles.pausePlayButton}\n      />\n    </figure>\n  )\n}\n"],"names":["VideoPlayer","_a","_b","autoplay","_c","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_d","React","useState","prefersReducedMotion","setPrefersReducedMotion","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","pausePlay","usePausePlay","className","classnames","styles","figure","aspectRatioWrapper","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","concat","autoPlay","playsInline","tabIndex","canPlayWebm","src","type","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}
+{"version":3,"file":"VideoPlayer.cjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n  /**\n   * Specifies whether the animation plays as soon as it is rendered.\n   * If the user has enabled prefer-reduced-motion their preferences\n   * take precedent over this prop.\n   */\n  autoplay?: boolean\n\n  /**\n   * Replay from start when active animation reaches the end of the animation.\n   */\n  loop?: boolean\n\n  /**\n   * Fallback image. Used when rendering of the asset fails, or as a\n   * poster for the video player.\n   */\n  fallback: string\n\n  /**\n   * The path of the animation source, excluding the file extension. This\n   * Player will preference Webm over mp4.\n   */\n  source: string\n\n  /**\n   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n   * component in a container, forcing the aspect ratio.\n   */\n  aspectRatio?: \"landscape\" | \"portrait\" | \"square\"\n\n  onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n  autoplay = true,\n  loop = false,\n  fallback,\n  source,\n  aspectRatio,\n  onEnded,\n}: VideoPlayerProps): JSX.Element => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    React.useState<boolean>(true)\n  const [isWebmCompatible, setIsWebmCompatible] = React.useState<boolean>(false)\n  const [windowIsAvailable, setWindowIsAvailable] =\n    React.useState<boolean>(false)\n\n  useEffect(() => {\n    /**\n     * Setting `muted` on the player is required in Safari/Webkit and older\n     * versions of Chome for the video to autoplay (regardless of whether\n     * the format contains an audio stream or not).\n     *\n     * React does not guarentee the `muted` attribute is set on the\n     * `video` element. So on load we force set this attribute. See issue:\n     * https://github.com/facebook/react/issues/10389\n     */\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.setAttribute(\"muted\", \"\")\n    }\n  }, [])\n\n  useEffect(() => {\n    // when the source of the animation is updated, we need to reload the asset\n    // to ensure the video player is in sync with the new source.\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.load()\n    }\n  }, [source])\n\n  useEffect(() => {\n    if (!window) return\n\n    const reducedMotionQuery = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    )\n    setPrefersReducedMotion(reducedMotionQuery.matches)\n    const updateMotionPreferences = (): void => {\n      const { matches = false } = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      )\n      setPrefersReducedMotion(matches)\n    }\n\n    const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n    const isUnsupportedSafari =\n      window.matchMedia(\"\").addEventListener === undefined\n\n    if (isLegacyEdge || isUnsupportedSafari) return\n\n    reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n    return function cleanup() {\n      reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n    }\n  }, [])\n\n  useEffect(() => {\n    const { current: videoElement } = videoRef\n    if (!videoElement) return\n\n    if (prefersReducedMotion) {\n      videoElement.pause()\n    } else if (autoplay && !prefersReducedMotion) {\n      try {\n        // Older browsers may not return a promise, so .play could return undefined\n        videoElement.play()?.catch(() => {\n          /*\n           * An DOMException _may_ be raised by some browsers if we\n           * programatically interact with the video before the\n           * user has interacted with the page. This is okay - so\n           * we're going to catch this error without handling it. See:\n           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n           */\n        })\n      } catch (e) {\n        /**\n         * Older browsers will raise a synchronous error because their first implementation\n         * of `.play` was not a promise.\n         */\n      }\n    }\n    /**\n     * Chrome seems to have an issue with changes to autoplay after the video\n     * has been mounted. If there is a change in autoplay we need to force the\n     * play() method to be called.\n     */\n  }, [prefersReducedMotion, autoplay])\n\n  useEffect(() => {\n    // Add event listeners for the video element\n    const { current: videoElement } = videoRef\n    if (!videoElement || !onEnded) return\n\n    videoElement.addEventListener(\"ended\", onEnded)\n\n    return function cleanup() {\n      videoElement.removeEventListener(\"ended\", onEnded)\n    }\n  }, [videoRef])\n\n  useEffect(() => {\n    // SSR does not have a window, which is required for canPlayWebm.\n    if (window !== undefined) setWindowIsAvailable(true)\n  }, [])\n\n  useEffect(() => {\n    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm())\n  }, [windowIsAvailable])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(\n        styles.figure,\n        aspectRatio && styles[aspectRatio],\n        aspectRatio && styles.aspectRatioWrapper\n      )}\n    >\n      <video\n        muted={true}\n        aria-hidden={true}\n        preload=\"metadata\"\n        ref={videoRef}\n        width=\"100%\"\n        data-testid=\"kz-video-player\"\n        className={styles.wrapper}\n        loop={loop}\n        poster={assetUrl(`${fallback}.png`)}\n        autoPlay={prefersReducedMotion ? false : autoplay}\n        playsInline={true}\n        tabIndex={-1}\n      >\n        {isWebmCompatible && (\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n        )}\n        <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n      </video>\n      <IconButton\n        onClick={(): void => pausePlay.toggle()}\n        icon={pausePlay.icon}\n        label={pausePlay.label}\n        classNameOverride={styles.pausePlayButton}\n      />\n    </figure>\n  )\n}\n"],"names":["VideoPlayer","_a","_b","autoplay","_c","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_d","React","useState","prefersReducedMotion","setPrefersReducedMotion","_e","isWebmCompatible","setIsWebmCompatible","_f","windowIsAvailable","setWindowIsAvailable","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","canPlayWebm","pausePlay","usePausePlay","className","classnames","styles","figure","aspectRatioWrapper","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","concat","autoPlay","playsInline","tabIndex","src","type","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}

package/dist/cjs/index.css

@@ -1,13 +1,13 @@
 .Select-module_container__TaMKg{position:relative;width:100%}.Select-module_notFullWidth__Mr-3G{width:180px}
 .Main-module_main__hMyB1{z-index:0}
 .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
-.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
+.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
+.Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
 .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
-.Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
-.Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
+.Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}
 .Avatar-module_wrapper__LY2q2{align-items:center;background:var(--color-gray-300,#eaeaec);border-radius:100%;box-sizing:border-box;display:flex;justify-content:center;overflow:hidden}.Avatar-module_wrapper__LY2q2:not(.Avatar-module_small__PeksS){border:3px solid var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Avatar-module_wrapper__LY2q2.Avatar-module_personal__2U7--{background:var(--color-orange-100,#fff0e8)}.Avatar-module_wrapper__LY2q2.Avatar-module_otherUser__b-drl{background:var(--color-gray-300,#eaeaec)}.Avatar-module_wrapper__LY2q2.Avatar-module_company__2qtJE{background:var(--color-white,#fff);border:0;border-radius:var(--border-solid-border-radius,7px);padding:6px}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS{height:1.25rem;width:1.25rem}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{margin-bottom:-1px}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS.Avatar-module_company__2qtJE{padding:0}.Avatar-module_wrapper__LY2q2.Avatar-module_medium__Vy3V8{height:3rem;width:3rem}.Avatar-module_wrapper__LY2q2.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q{margin-bottom:-1px}.Avatar-module_wrapper__LY2q2.Avatar-module_large__qiNWs{height:4.5rem;width:4.5rem}.Avatar-module_wrapper__LY2q2.Avatar-module_xlarge__Vx4IG{height:6rem;width:6rem}.Avatar-module_wrapper__LY2q2.Avatar-module_xxlarge__oOoGq{height:7.75rem;width:7.75rem}.Avatar-module_wrapper__LY2q2 .Avatar-module_initials__VDY2Q{speak-as:spell-out;border-bottom:none;text-decoration:none}.Avatar-module_avatarImage__FuULy{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Avatar-module_loading__i9V-D .Avatar-module_avatarImage__FuULy{display:none}.Avatar-module_companyAvatarImage__7rlfG{border-radius:4px;box-sizing:border-box;-o-object-fit:contain;object-fit:contain}.Avatar-module_fallbackIcon__MPWxq{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);width:28px}.Avatar-module_xxlarge__oOoGq .Avatar-module_fallbackIcon__MPWxq{width:75px}.Avatar-module_xlarge__Vx4IG .Avatar-module_fallbackIcon__MPWxq{width:60px}.Avatar-module_large__qiNWs .Avatar-module_fallbackIcon__MPWxq{width:35px}.Avatar-module_medium__Vy3V8 .Avatar-module_fallbackIcon__MPWxq{margin-bottom:-1px;width:25px}.Avatar-module_small__PeksS .Avatar-module_fallbackIcon__MPWxq{margin-bottom:-1px;width:10px}.Avatar-module_initials__VDY2Q{box-sizing:border-box;color:var(--color-purple-800,#2f2438);font-family:var(--typography-heading-1-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:22px;font-weight:var(--typography-heading-1-font-weight,700);letter-spacing:var(--typography-heading-3-letter-spacing,normal);padding-left:5px;padding-right:5px;text-align:center;width:100%}.Avatar-module_initials__VDY2Q:not(.Avatar-module_longName__31Yuf):before{content:"";display:block;margin-top:-.001em}.Avatar-module_xlarge__Vx4IG .Avatar-module_initials__VDY2Q,.Avatar-module_xxlarge__oOoGq .Avatar-module_initials__VDY2Q{font-size:34px;letter-spacing:var(--typography-heading-1-letter-spacing,normal)}.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q{font-size:16px}.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q,.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{font-weight:var(--typography-heading-5-font-weight,600);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{font-size:8px}
 .AvatarGroup-module_AvatarGroup__bdL0o{display:inline-flex;list-style:none;margin:0;padding:0}.AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-inline-start:-.625rem}[dir=rtl] .AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-left:0}.AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-inline-start:-1.5rem}[dir=rtl] .AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-left:0}.AvatarGroup-module_large__HN9Yy .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-inline-start:-2.25rem}[dir=rtl] .AvatarGroup-module_large__HN9Yy .AvatarGroup-module_AvatarGroupItem__xQol-+.AvatarGroup-module_AvatarGroupItem__xQol-{margin-left:0}.AvatarGroup-module_AvatarCounter__PKFzl{align-items:center;background:var(--color-gray-300,#eaeaec);border:3px solid var(--color-white,#fff);border-radius:100%;box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));box-sizing:border-box;display:flex;justify-content:center;overflow:hidden}.AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarCounter__PKFzl{border:none;box-shadow:none;font-size:.5rem;height:1.25rem;width:1.25rem}.AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarCounter__PKFzl,.AvatarGroup-module_small__7uv8k .AvatarGroup-module_AvatarCounter__PKFzl{font-family:var(--typography-heading-5-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-5-font-weight,600);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}.AvatarGroup-module_medium__af52y .AvatarGroup-module_AvatarCounter__PKFzl{font-size:var(--typography-heading-5-font-size,1rem);height:3rem;width:3rem}.AvatarGroup-module_large__HN9Yy .AvatarGroup-module_AvatarCounter__PKFzl{font-family:var(--typography-heading-3-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-3-font-size,1.375rem);font-weight:var(--typography-heading-3-font-weight,700);height:4.5rem;letter-spacing:var(--typography-heading-3-letter-spacing,normal);width:4.5rem}[dir=rtl] .AvatarGroup-module_AvatarCounter__PKFzl{direction:ltr;margin-left:0}

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs

@@ -19,6 +19,12 @@ var VideoPlayer = function (_a) {
   var _d = React.useState(true),
     prefersReducedMotion = _d[0],
     setPrefersReducedMotion = _d[1];
+  var _e = React.useState(false),
+    isWebmCompatible = _e[0],
+    setIsWebmCompatible = _e[1];
+  var _f = React.useState(false),
+    windowIsAvailable = _f[0],
+    setWindowIsAvailable = _f[1];
   useEffect(function () {
     /**
      * Setting `muted` on the player is required in Safari/Webkit and older
@@ -99,6 +105,13 @@ var VideoPlayer = function (_a) {
       videoElement.removeEventListener("ended", onEnded);
     };
   }, [videoRef]);
+  useEffect(function () {
+    // SSR does not have a window, which is required for canPlayWebm.
+    if (window !== undefined) setWindowIsAvailable(true);
+  }, []);
+  useEffect(function () {
+    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm());
+  }, [windowIsAvailable]);
   var pausePlay = usePausePlay(videoRef);
   return /*#__PURE__*/React.createElement("figure", {
     className: classnames(styles.figure, aspectRatio && styles[aspectRatio], aspectRatio && styles.aspectRatioWrapper)
@@ -115,7 +128,7 @@ var VideoPlayer = function (_a) {
     autoPlay: prefersReducedMotion ? false : autoplay,
     playsInline: true,
     tabIndex: -1
-  }, canPlayWebm() && ( /*#__PURE__*/React.createElement("source", {
+  }, isWebmCompatible && ( /*#__PURE__*/React.createElement("source", {
     src: assetUrl("".concat(source, ".webm")),
     type: "video/webm"
   })), /*#__PURE__*/React.createElement("source", {

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.mjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n  /**\n   * Specifies whether the animation plays as soon as it is rendered.\n   * If the user has enabled prefer-reduced-motion their preferences\n   * take precedent over this prop.\n   */\n  autoplay?: boolean\n\n  /**\n   * Replay from start when active animation reaches the end of the animation.\n   */\n  loop?: boolean\n\n  /**\n   * Fallback image. Used when rendering of the asset fails, or as a\n   * poster for the video player.\n   */\n  fallback: string\n\n  /**\n   * The path of the animation source, excluding the file extension. This\n   * Player will preference Webm over mp4.\n   */\n  source: string\n\n  /**\n   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n   * component in a container, forcing the aspect ratio.\n   */\n  aspectRatio?: \"landscape\" | \"portrait\" | \"square\"\n\n  onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n  autoplay = true,\n  loop = false,\n  fallback,\n  source,\n  aspectRatio,\n  onEnded,\n}: VideoPlayerProps): JSX.Element => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    React.useState<boolean>(true)\n\n  useEffect(() => {\n    /**\n     * Setting `muted` on the player is required in Safari/Webkit and older\n     * versions of Chome for the video to autoplay (regardless of whether\n     * the format contains an audio stream or not).\n     *\n     * React does not guarentee the `muted` attribute is set on the\n     * `video` element. So on load we force set this attribute. See issue:\n     * https://github.com/facebook/react/issues/10389\n     */\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.setAttribute(\"muted\", \"\")\n    }\n  }, [])\n\n  useEffect(() => {\n    // when the source of the animation is updated, we need to reload the asset\n    // to ensure the video player is in sync with the new source.\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.load()\n    }\n  }, [source])\n\n  useEffect(() => {\n    if (!window) return\n\n    const reducedMotionQuery = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    )\n    setPrefersReducedMotion(reducedMotionQuery.matches)\n    const updateMotionPreferences = (): void => {\n      const { matches = false } = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      )\n      setPrefersReducedMotion(matches)\n    }\n\n    const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n    const isUnsupportedSafari =\n      window.matchMedia(\"\").addEventListener === undefined\n\n    if (isLegacyEdge || isUnsupportedSafari) return\n\n    reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n    return function cleanup() {\n      reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n    }\n  }, [])\n\n  useEffect(() => {\n    const { current: videoElement } = videoRef\n    if (!videoElement) return\n\n    if (prefersReducedMotion) {\n      videoElement.pause()\n    } else if (autoplay && !prefersReducedMotion) {\n      try {\n        // Older browsers may not return a promise, so .play could return undefined\n        videoElement.play()?.catch(() => {\n          /*\n           * An DOMException _may_ be raised by some browsers if we\n           * programatically interact with the video before the\n           * user has interacted with the page. This is okay - so\n           * we're going to catch this error without handling it. See:\n           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n           */\n        })\n      } catch (e) {\n        /**\n         * Older browsers will raise a synchronous error because their first implementation\n         * of `.play` was not a promise.\n         */\n      }\n    }\n    /**\n     * Chrome seems to have an issue with changes to autoplay after the video\n     * has been mounted. If there is a change in autoplay we need to force the\n     * play() method to be called.\n     */\n  }, [prefersReducedMotion, autoplay])\n\n  useEffect(() => {\n    // Add event listeners for the video element\n    const { current: videoElement } = videoRef\n    if (!videoElement || !onEnded) return\n\n    videoElement.addEventListener(\"ended\", onEnded)\n\n    return function cleanup() {\n      videoElement.removeEventListener(\"ended\", onEnded)\n    }\n  }, [videoRef])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(\n        styles.figure,\n        aspectRatio && styles[aspectRatio],\n        aspectRatio && styles.aspectRatioWrapper\n      )}\n    >\n      <video\n        muted={true}\n        aria-hidden={true}\n        preload=\"metadata\"\n        ref={videoRef}\n        width=\"100%\"\n        data-testid=\"kz-video-player\"\n        className={styles.wrapper}\n        loop={loop}\n        poster={assetUrl(`${fallback}.png`)}\n        autoPlay={prefersReducedMotion ? false : autoplay}\n        playsInline={true}\n        tabIndex={-1}\n      >\n        {canPlayWebm() && (\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n        )}\n        <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n      </video>\n      <IconButton\n        onClick={(): void => pausePlay.toggle()}\n        icon={pausePlay.icon}\n        label={pausePlay.label}\n        classNameOverride={styles.pausePlayButton}\n      />\n    </figure>\n  )\n}\n"],"names":["VideoPlayer","_a","_b","autoplay","_c","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_d","React","useState","prefersReducedMotion","setPrefersReducedMotion","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","pausePlay","usePausePlay","className","classnames","styles","figure","aspectRatioWrapper","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","concat","autoPlay","playsInline","tabIndex","canPlayWebm","src","type","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}
+{"version":3,"file":"VideoPlayer.mjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n  /**\n   * Specifies whether the animation plays as soon as it is rendered.\n   * If the user has enabled prefer-reduced-motion their preferences\n   * take precedent over this prop.\n   */\n  autoplay?: boolean\n\n  /**\n   * Replay from start when active animation reaches the end of the animation.\n   */\n  loop?: boolean\n\n  /**\n   * Fallback image. Used when rendering of the asset fails, or as a\n   * poster for the video player.\n   */\n  fallback: string\n\n  /**\n   * The path of the animation source, excluding the file extension. This\n   * Player will preference Webm over mp4.\n   */\n  source: string\n\n  /**\n   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n   * component in a container, forcing the aspect ratio.\n   */\n  aspectRatio?: \"landscape\" | \"portrait\" | \"square\"\n\n  onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n  autoplay = true,\n  loop = false,\n  fallback,\n  source,\n  aspectRatio,\n  onEnded,\n}: VideoPlayerProps): JSX.Element => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    React.useState<boolean>(true)\n  const [isWebmCompatible, setIsWebmCompatible] = React.useState<boolean>(false)\n  const [windowIsAvailable, setWindowIsAvailable] =\n    React.useState<boolean>(false)\n\n  useEffect(() => {\n    /**\n     * Setting `muted` on the player is required in Safari/Webkit and older\n     * versions of Chome for the video to autoplay (regardless of whether\n     * the format contains an audio stream or not).\n     *\n     * React does not guarentee the `muted` attribute is set on the\n     * `video` element. So on load we force set this attribute. See issue:\n     * https://github.com/facebook/react/issues/10389\n     */\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.setAttribute(\"muted\", \"\")\n    }\n  }, [])\n\n  useEffect(() => {\n    // when the source of the animation is updated, we need to reload the asset\n    // to ensure the video player is in sync with the new source.\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.load()\n    }\n  }, [source])\n\n  useEffect(() => {\n    if (!window) return\n\n    const reducedMotionQuery = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    )\n    setPrefersReducedMotion(reducedMotionQuery.matches)\n    const updateMotionPreferences = (): void => {\n      const { matches = false } = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      )\n      setPrefersReducedMotion(matches)\n    }\n\n    const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n    const isUnsupportedSafari =\n      window.matchMedia(\"\").addEventListener === undefined\n\n    if (isLegacyEdge || isUnsupportedSafari) return\n\n    reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n    return function cleanup() {\n      reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n    }\n  }, [])\n\n  useEffect(() => {\n    const { current: videoElement } = videoRef\n    if (!videoElement) return\n\n    if (prefersReducedMotion) {\n      videoElement.pause()\n    } else if (autoplay && !prefersReducedMotion) {\n      try {\n        // Older browsers may not return a promise, so .play could return undefined\n        videoElement.play()?.catch(() => {\n          /*\n           * An DOMException _may_ be raised by some browsers if we\n           * programatically interact with the video before the\n           * user has interacted with the page. This is okay - so\n           * we're going to catch this error without handling it. See:\n           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n           */\n        })\n      } catch (e) {\n        /**\n         * Older browsers will raise a synchronous error because their first implementation\n         * of `.play` was not a promise.\n         */\n      }\n    }\n    /**\n     * Chrome seems to have an issue with changes to autoplay after the video\n     * has been mounted. If there is a change in autoplay we need to force the\n     * play() method to be called.\n     */\n  }, [prefersReducedMotion, autoplay])\n\n  useEffect(() => {\n    // Add event listeners for the video element\n    const { current: videoElement } = videoRef\n    if (!videoElement || !onEnded) return\n\n    videoElement.addEventListener(\"ended\", onEnded)\n\n    return function cleanup() {\n      videoElement.removeEventListener(\"ended\", onEnded)\n    }\n  }, [videoRef])\n\n  useEffect(() => {\n    // SSR does not have a window, which is required for canPlayWebm.\n    if (window !== undefined) setWindowIsAvailable(true)\n  }, [])\n\n  useEffect(() => {\n    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm())\n  }, [windowIsAvailable])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(\n        styles.figure,\n        aspectRatio && styles[aspectRatio],\n        aspectRatio && styles.aspectRatioWrapper\n      )}\n    >\n      <video\n        muted={true}\n        aria-hidden={true}\n        preload=\"metadata\"\n        ref={videoRef}\n        width=\"100%\"\n        data-testid=\"kz-video-player\"\n        className={styles.wrapper}\n        loop={loop}\n        poster={assetUrl(`${fallback}.png`)}\n        autoPlay={prefersReducedMotion ? false : autoplay}\n        playsInline={true}\n        tabIndex={-1}\n      >\n        {isWebmCompatible && (\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n        )}\n        <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n      </video>\n      <IconButton\n        onClick={(): void => pausePlay.toggle()}\n        icon={pausePlay.icon}\n        label={pausePlay.label}\n        classNameOverride={styles.pausePlayButton}\n      />\n    </figure>\n  )\n}\n"],"names":["VideoPlayer","_a","_b","autoplay","_c","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_d","React","useState","prefersReducedMotion","setPrefersReducedMotion","_e","isWebmCompatible","setIsWebmCompatible","_f","windowIsAvailable","setWindowIsAvailable","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","canPlayWebm","pausePlay","usePausePlay","className","classnames","styles","figure","aspectRatioWrapper","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","concat","autoPlay","playsInline","tabIndex","src","type","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}

package/dist/esm/index.css

@@ -2,10 +2,10 @@
 .Main-module_main__hMyB1{z-index:0}
 .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
 .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
-.FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
 .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
-.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
+.FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
+.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
 .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}