@kaizen/components 1.38.1 → 1.38.2

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

@@ -22,6 +22,9 @@ var VideoPlayer = function (_a) {
   var _e = React.useState(true),
     prefersReducedMotion = _e[0],
     setPrefersReducedMotion = _e[1];
+  var _f = React.useState(),
+    sourceEl = _f[0],
+    setSourceEl = _f[1];
   React.useEffect(function () {
     /**
      * Setting `muted` on the player is required in Safari/Webkit and older
@@ -102,6 +105,23 @@ var VideoPlayer = function (_a) {
       videoElement.removeEventListener("ended", onEnded);
     };
   }, [videoRef]);
+  React.useEffect(function () {
+    /**
+     * This seems counter-intuitive, but webm support is codec specific.
+     * Only offer webm if we are positive the browser supports it.
+     * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1
+     */
+    canPlayWebm.canPlayWebm() ? setSourceEl(React.createElement(React.Fragment, null, React.createElement("source", {
+      src: hostedAssets.assetUrl("".concat(source, ".webm")),
+      type: "video/webm"
+    }), React.createElement("source", {
+      src: hostedAssets.assetUrl("".concat(source, ".mp4")),
+      type: "video/mp4"
+    }))) : React.createElement("source", {
+      src: hostedAssets.assetUrl("".concat(source, ".mp4")),
+      type: "video/mp4"
+    });
+  }, [setSourceEl]);
   var pausePlay = usePausePlay.usePausePlay(videoRef);
   return React.createElement("figure", {
     className: classnames(Base_module.figure, (_b = {}, _b["".concat(Base_module[aspectRatio], " ").concat(Base_module.aspectRatioWrapper)] = Boolean(aspectRatio), _b))
@@ -118,13 +138,7 @@ var VideoPlayer = function (_a) {
     autoPlay: prefersReducedMotion ? false : autoplay,
     playsInline: true,
     tabIndex: -1
-  }, canPlayWebm.canPlayWebm() && React.createElement("source", {
-    src: hostedAssets.assetUrl("".concat(source, ".webm")),
-    type: "video/webm"
-  }), React.createElement("source", {
-    src: hostedAssets.assetUrl("".concat(source, ".mp4")),
-    type: "video/mp4"
-  })), React.createElement(IconButton.IconButton, {
+  }, sourceEl), React.createElement(IconButton.IconButton, {
     onClick: function () {
       return pausePlay.toggle();
     },

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(styles.figure, {\n        [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:\n          Boolean(aspectRatio),\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        {/**\n         * This seems counter-intuitive, but webm support is codec specific.\n         * Only offer webm if we are positive the browser supports it.\n         * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1\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","_c","autoplay","_d","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_e","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","_b","concat","aspectRatioWrapper","Boolean","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","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 [sourceEl, setSourceEl] = React.useState<React.ReactNode>()\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    /**\n     * This seems counter-intuitive, but webm support is codec specific.\n     * Only offer webm if we are positive the browser supports it.\n     * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1\n     */\n    canPlayWebm() ? (\n      setSourceEl(\n        <>\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n          <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n        </>\n      )\n    ) : (\n      <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n    )\n  }, [setSourceEl])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(styles.figure, {\n        [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:\n          Boolean(aspectRatio),\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        {sourceEl}\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","_c","autoplay","_d","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_e","React","useState","prefersReducedMotion","setPrefersReducedMotion","_f","sourceEl","setSourceEl","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","canPlayWebm","createElement","Fragment","src","assetUrl","concat","type","pausePlay","usePausePlay","className","classnames","styles","figure","_b","aspectRatioWrapper","Boolean","muted","preload","ref","width","wrapper","poster","autoPlay","playsInline","tabIndex","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}

package/dist/cjs/Tabs/subcomponents/TabList.cjs

@@ -14,10 +14,11 @@ var TabList = function (props) {
     _a = props.noPadding,
     noPadding = _a === void 0 ? false : _a,
     children = props.children,
-    restProps = tslib.__rest(props, ["aria-label", "noPadding", "children"]);
+    classNameOverride = props.classNameOverride,
+    restProps = tslib.__rest(props, ["aria-label", "noPadding", "children", "classNameOverride"]);
   return React.createElement(tabs.TabList, tslib.__assign({
     "aria-label": ariaLabel,
-    className: classnames(TabList_module.tabList, noPadding && TabList_module.noPadding)
+    className: classnames(TabList_module.tabList, classNameOverride, noPadding && TabList_module.noPadding)
   }, restProps), children);
 };
 exports.TabList = TabList;

package/dist/cjs/Tabs/subcomponents/TabList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.cjs","sources":["../../../../src/Tabs/subcomponents/TabList.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\"\nimport { TabList as ReachTabList } from \"@reach/tabs\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./TabList.module.scss\"\n\nexport type TabListProps = {\n  /**\n   * Accessible name for the set of tabs\n   */\n  \"aria-label\": string\n  /**\n   * Removes the built in padding\n   */\n  noPadding?: boolean\n  children: ReactNode\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\n/**\n * Wrapper for the tabs themselves\n */\nexport const TabList = (props: TabListProps): JSX.Element => {\n  const {\n    \"aria-label\": ariaLabel,\n    noPadding = false,\n    children,\n    ...restProps\n  } = props\n  return (\n    <ReachTabList\n      aria-label={ariaLabel}\n      className={classnames(styles.tabList, noPadding && styles.noPadding)}\n      {...restProps}\n    >\n      {children}\n    </ReachTabList>\n  )\n}\n"],"names":["TabList","props","ariaLabel","_a","noPadding","children","restProps","__rest","React","createElement","ReachTabList","__assign","className","classnames","styles","tabList"],"mappings":";;;;;;;;AAkBA;;AAEG;AACI,IAAMA,OAAO,GAAG,SAAAA,CAACC,KAAmB,EAAA;EAEvC,IAAcC,SAAS,GAIrBD,KAAK,CAJgB,YAAA,CAAA;IACvBE,KAGEF,KAAK,CAAAG,SAHU;IAAjBA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA;IACjBE,QAAQ,GAENJ,KAAK,CAFCI,QAAA;IACLC,SAAS,GAAAC,KAAAA,CAAAA,MAAA,CACVN,KAAK,EALH,CAKL,YAAA,EAAA,WAAA,EAAA,UAAA,CAAA,CADa;EAEd,OACEO,KAAC,CAAAC,aAAA,CAAAC,IAAY,CAAAV,OAAA,EACCW,KAAA,CAAAA,QAAA,CAAA;IAAA,YAAA,EAAAT,SAAS;IACrBU,SAAS,EAAEC,UAAU,CAACC,cAAM,CAACC,OAAO,EAAEX,SAAS,IAAIU,cAAM,CAACV,SAAS;EAAC,CAChE,EAAAE,SAAS,CAEZ,EAAAD,QAAQ,CACI;AAEnB,CAAA;"}
+{"version":3,"file":"TabList.cjs","sources":["../../../../src/Tabs/subcomponents/TabList.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\"\nimport { TabList as ReachTabList } from \"@reach/tabs\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./TabList.module.scss\"\n\nexport type TabListProps = {\n  /**\n   * Accessible name for the set of tabs\n   */\n  \"aria-label\": string\n  /**\n   * Removes the built in padding\n   */\n  noPadding?: boolean\n  children: ReactNode\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\n/**\n * Wrapper for the tabs themselves\n */\nexport const TabList = (props: TabListProps): JSX.Element => {\n  const {\n    \"aria-label\": ariaLabel,\n    noPadding = false,\n    children,\n    classNameOverride,\n    ...restProps\n  } = props\n  return (\n    <ReachTabList\n      aria-label={ariaLabel}\n      className={classnames(\n        styles.tabList,\n        classNameOverride,\n        noPadding && styles.noPadding\n      )}\n      {...restProps}\n    >\n      {children}\n    </ReachTabList>\n  )\n}\n"],"names":["TabList","props","ariaLabel","_a","noPadding","children","classNameOverride","restProps","__rest","React","createElement","ReachTabList","__assign","className","classnames","styles","tabList"],"mappings":";;;;;;;;AAkBA;;AAEG;AACI,IAAMA,OAAO,GAAG,SAAAA,CAACC,KAAmB,EAAA;EAEvC,IAAcC,SAAS,GAKrBD,KAAK,CAAA,YAAA,CALgB;IACvBE,EAAA,GAIEF,KAAK,CAAAG,SAJU;IAAjBA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA;IACjBE,QAAQ,GAGNJ,KAAK,CAHCI,QAAA;IACRC,iBAAiB,GAEfL,KAAK,CAAAK,iBAFU;IACdC,SAAS,GACVC,KAAAA,CAAAA,MAAA,CAAAP,KAAK,EANH,CAAA,YAAA,EAAA,WAAA,EAAA,UAAA,EAAA,mBAAA,CAML,CADa;EAEd,OACEQ,KAAA,CAAAC,aAAA,CAACC,YAAY,EAAAC,KAAAA,CAAAA,QAAA,CAAA;IAAA,YAAA,EACCV,SAAS;IACrBW,SAAS,EAAEC,UAAU,CACnBC,cAAM,CAACC,OAAO,EACdV,iBAAiB,EACjBF,SAAS,IAAIW,cAAM,CAACX,SAAS;GAE3B,EAAAG,SAAS,CAEZ,EAAAF,QAAQ,CACI;AAEnB,CAAA;"}

package/dist/cjs/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}
 .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)}
 .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)}}
+.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)}
+.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}
 .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 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));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}

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

@@ -20,6 +20,9 @@ var VideoPlayer = function (_a) {
   var _e = React.useState(true),
     prefersReducedMotion = _e[0],
     setPrefersReducedMotion = _e[1];
+  var _f = React.useState(),
+    sourceEl = _f[0],
+    setSourceEl = _f[1];
   useEffect(function () {
     /**
      * Setting `muted` on the player is required in Safari/Webkit and older
@@ -100,6 +103,23 @@ var VideoPlayer = function (_a) {
       videoElement.removeEventListener("ended", onEnded);
     };
   }, [videoRef]);
+  useEffect(function () {
+    /**
+     * This seems counter-intuitive, but webm support is codec specific.
+     * Only offer webm if we are positive the browser supports it.
+     * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1
+     */
+    canPlayWebm() ? setSourceEl( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("source", {
+      src: assetUrl("".concat(source, ".webm")),
+      type: "video/webm"
+    }), /*#__PURE__*/React.createElement("source", {
+      src: assetUrl("".concat(source, ".mp4")),
+      type: "video/mp4"
+    }))) : ( /*#__PURE__*/React.createElement("source", {
+      src: assetUrl("".concat(source, ".mp4")),
+      type: "video/mp4"
+    }));
+  }, [setSourceEl]);
   var pausePlay = usePausePlay(videoRef);
   return /*#__PURE__*/React.createElement("figure", {
     className: classnames(styles.figure, (_b = {}, _b["".concat(styles[aspectRatio], " ").concat(styles.aspectRatioWrapper)] = Boolean(aspectRatio), _b))
@@ -116,13 +136,7 @@ var VideoPlayer = function (_a) {
     autoPlay: prefersReducedMotion ? false : autoplay,
     playsInline: true,
     tabIndex: -1
-  }, canPlayWebm() && ( /*#__PURE__*/React.createElement("source", {
-    src: assetUrl("".concat(source, ".webm")),
-    type: "video/webm"
-  })), /*#__PURE__*/React.createElement("source", {
-    src: assetUrl("".concat(source, ".mp4")),
-    type: "video/mp4"
-  })), /*#__PURE__*/React.createElement(IconButton, {
+  }, sourceEl), /*#__PURE__*/React.createElement(IconButton, {
     onClick: function () {
       return pausePlay.toggle();
     },

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(styles.figure, {\n        [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:\n          Boolean(aspectRatio),\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        {/**\n         * This seems counter-intuitive, but webm support is codec specific.\n         * Only offer webm if we are positive the browser supports it.\n         * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1\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","_c","autoplay","_d","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_e","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","_b","concat","aspectRatioWrapper","Boolean","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","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 [sourceEl, setSourceEl] = React.useState<React.ReactNode>()\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    /**\n     * This seems counter-intuitive, but webm support is codec specific.\n     * Only offer webm if we are positive the browser supports it.\n     * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1\n     */\n    canPlayWebm() ? (\n      setSourceEl(\n        <>\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n          <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n        </>\n      )\n    ) : (\n      <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n    )\n  }, [setSourceEl])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(styles.figure, {\n        [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:\n          Boolean(aspectRatio),\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        {sourceEl}\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","_c","autoplay","_d","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_e","React","useState","prefersReducedMotion","setPrefersReducedMotion","_f","sourceEl","setSourceEl","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","canPlayWebm","createElement","Fragment","src","assetUrl","concat","type","pausePlay","usePausePlay","className","classnames","styles","figure","_b","aspectRatioWrapper","Boolean","muted","preload","ref","width","wrapper","poster","autoPlay","playsInline","tabIndex","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}

package/dist/esm/Tabs/subcomponents/TabList.mjs

@@ -12,10 +12,11 @@ var TabList = function (props) {
     _a = props.noPadding,
     noPadding = _a === void 0 ? false : _a,
     children = props.children,
-    restProps = __rest(props, ["aria-label", "noPadding", "children"]);
+    classNameOverride = props.classNameOverride,
+    restProps = __rest(props, ["aria-label", "noPadding", "children", "classNameOverride"]);
   return /*#__PURE__*/React.createElement(TabList$1, __assign({
     "aria-label": ariaLabel,
-    className: classnames(styles.tabList, noPadding && styles.noPadding)
+    className: classnames(styles.tabList, classNameOverride, noPadding && styles.noPadding)
   }, restProps), children);
 };
 export { TabList };

package/dist/esm/Tabs/subcomponents/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","sources":["../../../../src/Tabs/subcomponents/TabList.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\"\nimport { TabList as ReachTabList } from \"@reach/tabs\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./TabList.module.scss\"\n\nexport type TabListProps = {\n  /**\n   * Accessible name for the set of tabs\n   */\n  \"aria-label\": string\n  /**\n   * Removes the built in padding\n   */\n  noPadding?: boolean\n  children: ReactNode\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\n/**\n * Wrapper for the tabs themselves\n */\nexport const TabList = (props: TabListProps): JSX.Element => {\n  const {\n    \"aria-label\": ariaLabel,\n    noPadding = false,\n    children,\n    ...restProps\n  } = props\n  return (\n    <ReachTabList\n      aria-label={ariaLabel}\n      className={classnames(styles.tabList, noPadding && styles.noPadding)}\n      {...restProps}\n    >\n      {children}\n    </ReachTabList>\n  )\n}\n"],"names":["TabList","props","ariaLabel","_a","noPadding","children","restProps","__rest","React","createElement","ReachTabList","__assign","className","classnames","styles","tabList"],"mappings":";;;;;;AAkBA;;AAEG;AACI,IAAMA,OAAO,GAAG,SAAAA,CAACC,KAAmB,EAAA;EAEvC,IAAcC,SAAS,GAIrBD,KAAK,CAJgB,YAAA,CAAA;IACvBE,KAGEF,KAAK,CAAAG,SAHU;IAAjBA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA;IACjBE,QAAQ,GAENJ,KAAK,CAFCI,QAAA;IACLC,SAAS,GAAAC,MAAA,CACVN,KAAK,EALH,CAKL,YAAA,EAAA,WAAA,EAAA,UAAA,CAAA,CADa;EAEd,oBACEO,KAAC,CAAAC,aAAA,CAAAC,SAAY,EACCC,QAAA,CAAA;IAAA,YAAA,EAAAT,SAAS;IACrBU,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAO,EAAEX,SAAS,IAAIU,MAAM,CAACV,SAAS;EAAC,CAChE,EAAAE,SAAS,CAEZ,EAAAD,QAAQ,CACI;AAEnB,CAAA;"}
+{"version":3,"file":"TabList.mjs","sources":["../../../../src/Tabs/subcomponents/TabList.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\"\nimport { TabList as ReachTabList } from \"@reach/tabs\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./TabList.module.scss\"\n\nexport type TabListProps = {\n  /**\n   * Accessible name for the set of tabs\n   */\n  \"aria-label\": string\n  /**\n   * Removes the built in padding\n   */\n  noPadding?: boolean\n  children: ReactNode\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\n/**\n * Wrapper for the tabs themselves\n */\nexport const TabList = (props: TabListProps): JSX.Element => {\n  const {\n    \"aria-label\": ariaLabel,\n    noPadding = false,\n    children,\n    classNameOverride,\n    ...restProps\n  } = props\n  return (\n    <ReachTabList\n      aria-label={ariaLabel}\n      className={classnames(\n        styles.tabList,\n        classNameOverride,\n        noPadding && styles.noPadding\n      )}\n      {...restProps}\n    >\n      {children}\n    </ReachTabList>\n  )\n}\n"],"names":["TabList","props","ariaLabel","_a","noPadding","children","classNameOverride","restProps","__rest","React","createElement","ReachTabList","__assign","className","classnames","styles","tabList"],"mappings":";;;;;;AAkBA;;AAEG;AACI,IAAMA,OAAO,GAAG,SAAAA,CAACC,KAAmB,EAAA;EAEvC,IAAcC,SAAS,GAKrBD,KAAK,CAAA,YAAA,CALgB;IACvBE,EAAA,GAIEF,KAAK,CAAAG,SAJU;IAAjBA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA;IACjBE,QAAQ,GAGNJ,KAAK,CAHCI,QAAA;IACRC,iBAAiB,GAEfL,KAAK,CAAAK,iBAFU;IACdC,SAAS,GACVC,MAAA,CAAAP,KAAK,EANH,CAAA,YAAA,EAAA,WAAA,EAAA,UAAA,EAAA,mBAAA,CAML,CADa;EAEd,oBACEQ,KAAA,CAAAC,aAAA,CAACC,SAAY,EAAAC,QAAA,CAAA;IAAA,YAAA,EACCV,SAAS;IACrBW,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,OAAO,EACdV,iBAAiB,EACjBF,SAAS,IAAIW,MAAM,CAACX,SAAS;GAE3B,EAAAG,SAAS,CAEZ,EAAAF,QAAQ,CACI;AAEnB,CAAA;"}

package/dist/esm/index.css

@@ -1,9 +1,9 @@
 .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}
-.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}
 .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}}
 .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}
 .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}}