@kaizen/components 1.41.1 → 1.42.1

package/dist/cjs/Heading/Heading.cjs

@@ -34,6 +34,7 @@ const Heading = /*#__PURE__*/function () {
 var translateHeadingLevelToTag = function (headingLevel) {
   switch (headingLevel) {
     case "display-0":
+    case "composable-header-title":
     case "heading-1":
       return "h1";
     case "heading-2":

package/dist/cjs/Heading/Heading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.cjs","sources":["../../../src/Heading/Heading.tsx"],"sourcesContent":["import { createElement, HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Heading.module.scss\"\n\nconst VARIANTS_24PX_OR_GREATER = [\"display-0\", \"heading-1\", \"heading-2\"]\n\nexport type HeadingVariants =\n  | \"display-0\"\n  | \"heading-1\"\n  | \"heading-2\"\n  | \"heading-3\"\n  | \"heading-4\"\n  | \"heading-5\"\n  | \"heading-6\"\n\nexport type AllowedHeadingTags =\n  | \"pre\"\n  | \"p\"\n  | \"div\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"label\"\n\nexport type AllowedHeadingColors =\n  | \"dark\"\n  | \"dark-reduced-opacity\"\n  | \"white\"\n  | \"white-reduced-opacity\"\n  | \"positive\"\n  | \"negative\"\n\nexport type HeadingProps = {\n  children: React.ReactNode\n  /**\n   * HTML elements that are allowed on Headings. When not supplied, the tag is inferred from\n   * the variant. E.g. display-0 will infer h1\n   */\n  tag?: AllowedHeadingTags\n  /**\n   * Allowed heading variants\n   */\n  variant: HeadingVariants\n  color?: AllowedHeadingColors\n} & OverrideClassName<HTMLAttributes<HTMLElement>>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Headings Guidance}\n * {@link https://cultureamp.design/?path=/docs/components-typography-heading--display-0 Storybook}\n */\nexport const Heading = ({\n  children,\n  tag,\n  variant,\n  color = \"dark\",\n  classNameOverride,\n  ...restProps\n}: HeadingProps): JSX.Element => {\n  const inferredTag =\n    tag === undefined ? translateHeadingLevelToTag(variant) : tag\n\n  const className = classnames(\n    styles.heading,\n    styles[variant],\n    classNameOverride,\n    styles[color],\n    VARIANTS_24PX_OR_GREATER.includes(variant) ? styles.large : styles.small\n  )\n\n  return createElement(inferredTag, { ...restProps, className }, children)\n}\n\nHeading.displayName = \"Heading\"\n\n/**\n * A helper to infer the tag when not explicitly passed as a prop\n * @param headingLevel Level of the heading\n */\nconst translateHeadingLevelToTag = (headingLevel: HeadingVariants): string => {\n  switch (headingLevel) {\n    case \"display-0\":\n    case \"heading-1\":\n      return \"h1\"\n    case \"heading-2\":\n      return \"h2\"\n    case \"heading-3\":\n      return \"h3\"\n    case \"heading-4\":\n      return \"h4\"\n    case \"heading-5\":\n      return \"h5\"\n    case \"heading-6\":\n    default:\n      return \"h6\"\n  }\n}\n"],"names":["VARIANTS_24PX_OR_GREATER","Heading","_a","children","tag","variant","_b","color","classNameOverride","restProps","__rest","inferredTag","undefined","translateHeadingLevelToTag","className","classnames","styles","heading","includes","large","small","createElement","__assign","displayName","headingLevel"],"mappings":";;;;;;AAKA,IAAMA,wBAAwB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC;AA8CxE;;;AAGG;AAHH,MAIaC,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAACC,EAOT,EAAA;IANb,IAAAC,QAAQ,cAAA;MACRC,GAAG,SAAA;MACHC,OAAO,GAAAH,EAAA,CAAAG,OAAA;MACPC,EAAc,GAAAJ,EAAA,CAAAK,KAAA;MAAdA,KAAK,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,KAAA;MACdE,iBAAiB,uBAAA;MACdC,SAAS,GANUC,KAAA,CAAAA,MAAA,CAAAR,EAAA,EAAA,CAAA,UAAA,EAAA,KAAA,EAAA,SAAA,EAAA,OAAA,EAAA,mBAAA,CAOvB,CADa;IAEZ,IAAMS,WAAW,GACfP,GAAG,KAAKQ,SAAS,GAAGC,0BAA0B,CAACR,OAAO,CAAC,GAAGD,GAAG;IAE/D,IAAMU,SAAS,GAAGC,UAAU,CAC1BC,cAAM,CAACC,OAAO,EACdD,cAAM,CAACX,OAAO,CAAC,EACfG,iBAAiB,EACjBQ,cAAM,CAACT,KAAK,CAAC,EACbP,wBAAwB,CAACkB,QAAQ,CAACb,OAAO,CAAC,GAAGW,cAAM,CAACG,KAAK,GAAGH,cAAM,CAACI,KAAK,CACzE;IAED,OAAOC,mBAAa,CAACV,WAAW,EAAOW,KAAA,CAAAA,QAAA,CAAAA,KAAA,CAAAA,QAAA,CAAA,CAAA,CAAA,EAAAb,SAAS,CAAE,EAAA;MAAAK,SAAS,EAAAA;KAAA,CAAA,EAAIX,QAAQ,CAAC;EAC1E,CAAC;EAEDF,OAAO,CAACsB,WAAW,GAAG,SAAS;EAE/B;;;AAGG;EAHH,OAxBatB,OAAO;AAAA;AA4BpB,IAAMY,0BAA0B,GAAG,SAAAA,CAACW,YAA6B,EAAA;EAC/D,QAAQA,YAAY;IAClB,KAAK,WAAW;IAChB,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;IAChB;MACE,OAAO,IAAI;EACd;AACH,CAAC;"}
+{"version":3,"file":"Heading.cjs","sources":["../../../src/Heading/Heading.tsx"],"sourcesContent":["import { createElement, HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Heading.module.scss\"\n\nconst VARIANTS_24PX_OR_GREATER = [\"display-0\", \"heading-1\", \"heading-2\"]\n\nexport type HeadingVariants =\n  | \"display-0\"\n  | \"composable-header-title\"\n  | \"heading-1\"\n  | \"heading-2\"\n  | \"heading-3\"\n  | \"heading-4\"\n  | \"heading-5\"\n  | \"heading-6\"\n\nexport type AllowedHeadingTags =\n  | \"pre\"\n  | \"p\"\n  | \"div\"\n  | \"span\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"label\"\n\nexport type AllowedHeadingColors =\n  | \"dark\"\n  | \"dark-reduced-opacity\"\n  | \"white\"\n  | \"white-reduced-opacity\"\n  | \"positive\"\n  | \"negative\"\n\nexport type HeadingProps = {\n  children: React.ReactNode\n  /**\n   * HTML elements that are allowed on Headings. When not supplied, the tag is inferred from\n   * the variant. E.g. display-0 will infer h1\n   */\n  tag?: AllowedHeadingTags\n  /**\n   * Allowed heading variants\n   */\n  variant: HeadingVariants\n  color?: AllowedHeadingColors\n} & OverrideClassName<HTMLAttributes<HTMLElement>>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Headings Guidance}\n * {@link https://cultureamp.design/?path=/docs/components-typography-heading--display-0 Storybook}\n */\nexport const Heading = ({\n  children,\n  tag,\n  variant,\n  color = \"dark\",\n  classNameOverride,\n  ...restProps\n}: HeadingProps): JSX.Element => {\n  const inferredTag =\n    tag === undefined ? translateHeadingLevelToTag(variant) : tag\n\n  const className = classnames(\n    styles.heading,\n    styles[variant],\n    classNameOverride,\n    styles[color],\n    VARIANTS_24PX_OR_GREATER.includes(variant) ? styles.large : styles.small\n  )\n\n  return createElement(inferredTag, { ...restProps, className }, children)\n}\n\nHeading.displayName = \"Heading\"\n\n/**\n * A helper to infer the tag when not explicitly passed as a prop\n * @param headingLevel Level of the heading\n */\nconst translateHeadingLevelToTag = (headingLevel: HeadingVariants): string => {\n  switch (headingLevel) {\n    case \"display-0\":\n    case \"composable-header-title\":\n    case \"heading-1\":\n      return \"h1\"\n    case \"heading-2\":\n      return \"h2\"\n    case \"heading-3\":\n      return \"h3\"\n    case \"heading-4\":\n      return \"h4\"\n    case \"heading-5\":\n      return \"h5\"\n    case \"heading-6\":\n    default:\n      return \"h6\"\n  }\n}\n"],"names":["VARIANTS_24PX_OR_GREATER","Heading","_a","children","tag","variant","_b","color","classNameOverride","restProps","__rest","inferredTag","undefined","translateHeadingLevelToTag","className","classnames","styles","heading","includes","large","small","createElement","__assign","displayName","headingLevel"],"mappings":";;;;;;AAKA,IAAMA,wBAAwB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC;AA+CxE;;;AAGG;AAHH,MAIaC,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAACC,EAOT,EAAA;IANb,IAAAC,QAAQ,cAAA;MACRC,GAAG,SAAA;MACHC,OAAO,GAAAH,EAAA,CAAAG,OAAA;MACPC,EAAc,GAAAJ,EAAA,CAAAK,KAAA;MAAdA,KAAK,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,KAAA;MACdE,iBAAiB,uBAAA;MACdC,SAAS,GANUC,KAAA,CAAAA,MAAA,CAAAR,EAAA,EAAA,CAAA,UAAA,EAAA,KAAA,EAAA,SAAA,EAAA,OAAA,EAAA,mBAAA,CAOvB,CADa;IAEZ,IAAMS,WAAW,GACfP,GAAG,KAAKQ,SAAS,GAAGC,0BAA0B,CAACR,OAAO,CAAC,GAAGD,GAAG;IAE/D,IAAMU,SAAS,GAAGC,UAAU,CAC1BC,cAAM,CAACC,OAAO,EACdD,cAAM,CAACX,OAAO,CAAC,EACfG,iBAAiB,EACjBQ,cAAM,CAACT,KAAK,CAAC,EACbP,wBAAwB,CAACkB,QAAQ,CAACb,OAAO,CAAC,GAAGW,cAAM,CAACG,KAAK,GAAGH,cAAM,CAACI,KAAK,CACzE;IAED,OAAOC,mBAAa,CAACV,WAAW,EAAOW,KAAA,CAAAA,QAAA,CAAAA,KAAA,CAAAA,QAAA,CAAA,CAAA,CAAA,EAAAb,SAAS,CAAE,EAAA;MAAAK,SAAS,EAAAA;KAAA,CAAA,EAAIX,QAAQ,CAAC;EAC1E,CAAC;EAEDF,OAAO,CAACsB,WAAW,GAAG,SAAS;EAE/B;;;AAGG;EAHH,OAxBatB,OAAO;AAAA;AA4BpB,IAAMY,0BAA0B,GAAG,SAAAA,CAACW,YAA6B,EAAA;EAC/D,QAAQA,YAAY;IAClB,KAAK,WAAW;IAChB,KAAK,yBAAyB;IAC9B,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;MACd,OAAO,IAAI;IACb,KAAK,WAAW;IAChB;MACE,OAAO,IAAI;EACd;AACH,CAAC;"}

package/dist/cjs/Heading/Heading.module.scss.cjs

@@ -3,6 +3,7 @@
 var styles = {
   "heading": "Heading-module_heading__Gq6I8",
   "display-0": "Heading-module_display-0__yZ7rx",
+  "composable-header-title": "Heading-module_composable-header-title__mqQVh",
   "heading-1": "Heading-module_heading-1__PbAcw",
   "heading-2": "Heading-module_heading-2__Ovpfe",
   "heading-3": "Heading-module_heading-3__S4Pb1",

package/dist/cjs/Heading/Heading.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Heading.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

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

@@ -9,22 +9,18 @@ var canPlayWebm = require('../../utils/canPlayWebm.cjs');
 var usePausePlay = require('../../utils/usePausePlay.cjs');
 var Base_module = require('../Base/Base.module.scss.cjs');
 var VideoPlayer = function (_a) {
-  var _b;
-  var _c = _a.autoplay,
-    autoplay = _c === void 0 ? true : _c,
-    _d = _a.loop,
-    loop = _d === void 0 ? false : _d,
+  var _b = _a.autoplay,
+    autoplay = _b === void 0 ? true : _b,
+    _c = _a.loop,
+    loop = _c === void 0 ? false : _c,
     fallback = _a.fallback,
     source = _a.source,
     aspectRatio = _a.aspectRatio,
     onEnded = _a.onEnded;
   var videoRef = React.useRef(null);
-  var _e = React.useState(true),
-    prefersReducedMotion = _e[0],
-    setPrefersReducedMotion = _e[1];
-  var _f = React.useState(),
-    sourceEl = _f[0],
-    setSourceEl = _f[1];
+  var _d = React.useState(true),
+    prefersReducedMotion = _d[0],
+    setPrefersReducedMotion = _d[1];
   React.useEffect(function () {
     /**
      * Setting `muted` on the player is required in Safari/Webkit and older
@@ -105,26 +101,9 @@ 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))
+    className: classnames(Base_module.figure, aspectRatio && Base_module[aspectRatio], aspectRatio && Base_module.aspectRatioWrapper)
   }, React.createElement("video", {
     muted: true,
     "aria-hidden": true,
@@ -138,7 +117,13 @@ var VideoPlayer = function (_a) {
     autoPlay: prefersReducedMotion ? false : autoplay,
     playsInline: true,
     tabIndex: -1
-  }, sourceEl), React.createElement(IconButton.IconButton, {
+  }, 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, {
     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  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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"}
+{"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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"}

package/dist/cjs/Modal/InputEditModal/InputEditModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputEditModal.cjs","sources":["../../../../src/Modal/InputEditModal/InputEditModal.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { ButtonProps } from \"~components/Button\"\nimport { Heading } from \"~components/Heading\"\nimport {\n  GenericModal,\n  ModalFooter,\n  ModalHeader,\n  ModalAccessibleLabel,\n  ModalBody,\n} from \"~components/Modal/GenericModal\"\nimport styles from \"./InputEditModal.module.scss\"\n\nexport type InputEditModalProps = {\n  isOpen: boolean\n  unpadded?: boolean\n  mood: \"positive\" | \"destructive\"\n  title: string\n  onSubmit: () => void\n  onSecondaryAction?: () => void\n  onDismiss: () => void\n  onAfterLeave?: () => void\n  localeDirection?: \"rtl\" | \"ltr\"\n  submitLabel?: string\n  dismissLabel?: string\n  secondaryLabel?: string\n  /**\n   * @deprecated Please use data-testid\n   */\n  automationId?: string\n  children: React.ReactNode\n  submitWorking?: { label: string; labelHidden?: boolean }\n} & HTMLAttributes<HTMLDivElement>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-modals-inputeditmodal--docs Storybook}\n */\nexport const InputEditModal = ({\n  isOpen,\n  mood,\n  title,\n  onSubmit,\n  onSecondaryAction,\n  onAfterLeave,\n  localeDirection = \"ltr\",\n  submitLabel = \"Submit\",\n  dismissLabel = \"Cancel\",\n  secondaryLabel,\n  submitWorking,\n  children,\n  unpadded = false,\n  onDismiss: propsOnDismiss,\n  ...props\n}: InputEditModalProps): JSX.Element => {\n  const onDismiss = submitWorking ? undefined : propsOnDismiss\n  const submitAction = { label: submitLabel, onClick: onSubmit }\n  const workingProps = submitWorking\n    ? {\n        working: true,\n        workingLabel: submitWorking.label,\n        workingLabelHidden: submitWorking.labelHidden,\n      }\n    : {}\n\n  const showSecondary = onSecondaryAction && secondaryLabel\n\n  const footerActions: ButtonProps[] = [\n    { ...submitAction, ...workingProps },\n    {\n      label: showSecondary ? secondaryLabel : dismissLabel,\n      onClick: showSecondary ? onSecondaryAction : onDismiss,\n      disabled: !!submitWorking,\n    },\n  ]\n\n  return (\n    <GenericModal\n      isOpen={isOpen}\n      onEscapeKeyup={onDismiss}\n      onAfterLeave={onAfterLeave}\n    >\n      <div className={styles.modal} dir={localeDirection} data-modal {...props}>\n        <ModalHeader onDismiss={onDismiss}>\n          <div\n            className={classnames(\n              styles.header,\n              localeDirection === \"rtl\" && styles.textAlignRTL,\n              !unpadded && styles.padded\n            )}\n          >\n            <ModalAccessibleLabel>\n              <Heading tag=\"h2\" variant=\"heading-2\">\n                {title}\n              </Heading>\n            </ModalAccessibleLabel>\n          </div>\n        </ModalHeader>\n        <ModalBody>\n          <div\n            className={classnames(styles.body, !unpadded && styles.padded)}\n            dir={localeDirection}\n          >\n            {children}\n          </div>\n        </ModalBody>\n        <ModalFooter\n          actions={footerActions}\n          appearance={mood === \"destructive\" ? \"destructive\" : \"primary\"}\n          variant=\"inputEdit\"\n          unpadded={unpadded}\n        />\n      </div>\n    </GenericModal>\n  )\n}\n\nInputEditModal.displayName = \"InputEditModal\"\n"],"names":["InputEditModal","_a","isOpen","mood","title","onSubmit","onSecondaryAction","onAfterLeave","_b","localeDirection","_c","submitLabel","_d","dismissLabel","secondaryLabel","submitWorking","children","_e","unpadded","propsOnDismiss","onDismiss","props","__rest","undefined","submitAction","label","onClick","workingProps","working","workingLabel","workingLabelHidden","labelHidden","showSecondary","footerActions","__assign","disabled","React","createElement","GenericModal","onEscapeKeyup","className","styles","modal","dir","ModalHeader","classnames","header","textAlignRTL","padded","ModalAccessibleLabel","Heading","tag","variant","ModalBody","body","ModalFooter","actions","appearance","displayName"],"mappings":"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"}
+{"version":3,"file":"InputEditModal.cjs","sources":["../../../../src/Modal/InputEditModal/InputEditModal.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { ButtonProps } from \"~components/Button\"\nimport { Heading } from \"~components/Heading\"\nimport {\n  GenericModal,\n  ModalFooter,\n  ModalHeader,\n  ModalAccessibleLabel,\n  ModalBody,\n} from \"~components/Modal/GenericModal\"\nimport styles from \"./InputEditModal.module.scss\"\n\nexport type InputEditModalProps = {\n  isOpen: boolean\n  unpadded?: boolean\n  mood: \"positive\" | \"destructive\"\n  title: string\n  onSubmit: () => void\n  onSecondaryAction?: () => void\n  onDismiss: () => void\n  onAfterLeave?: () => void\n  localeDirection?: \"rtl\" | \"ltr\"\n  submitLabel?: string\n  dismissLabel?: string\n  secondaryLabel?: string\n  /**\n   * @deprecated Please use data-testid\n   */\n  automationId?: string\n  children: React.ReactNode\n  submitWorking?: { label: string; labelHidden?: boolean }\n} & Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\">\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal#Input-Edit-Modal Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-modals-inputeditmodal--docs Storybook}\n */\nexport const InputEditModal = ({\n  isOpen,\n  mood,\n  title,\n  onSubmit,\n  onSecondaryAction,\n  onAfterLeave,\n  localeDirection = \"ltr\",\n  submitLabel = \"Submit\",\n  dismissLabel = \"Cancel\",\n  secondaryLabel,\n  submitWorking,\n  children,\n  unpadded = false,\n  onDismiss: propsOnDismiss,\n  ...props\n}: InputEditModalProps): JSX.Element => {\n  const onDismiss = submitWorking ? undefined : propsOnDismiss\n  const submitAction = { label: submitLabel, onClick: onSubmit }\n  const workingProps = submitWorking\n    ? {\n        working: true,\n        workingLabel: submitWorking.label,\n        workingLabelHidden: submitWorking.labelHidden,\n      }\n    : {}\n\n  const showSecondary = onSecondaryAction && secondaryLabel\n\n  const footerActions: ButtonProps[] = [\n    { ...submitAction, ...workingProps },\n    {\n      label: showSecondary ? secondaryLabel : dismissLabel,\n      onClick: showSecondary ? onSecondaryAction : onDismiss,\n      disabled: !!submitWorking,\n    },\n  ]\n\n  return (\n    <GenericModal\n      isOpen={isOpen}\n      onEscapeKeyup={onDismiss}\n      onAfterLeave={onAfterLeave}\n    >\n      <div className={styles.modal} dir={localeDirection} data-modal {...props}>\n        <ModalHeader onDismiss={onDismiss}>\n          <div\n            className={classnames(\n              styles.header,\n              localeDirection === \"rtl\" && styles.textAlignRTL,\n              !unpadded && styles.padded\n            )}\n          >\n            <ModalAccessibleLabel>\n              <Heading tag=\"h2\" variant=\"heading-2\">\n                {title}\n              </Heading>\n            </ModalAccessibleLabel>\n          </div>\n        </ModalHeader>\n        <ModalBody>\n          <div\n            className={classnames(styles.body, !unpadded && styles.padded)}\n            dir={localeDirection}\n          >\n            {children}\n          </div>\n        </ModalBody>\n        <ModalFooter\n          actions={footerActions}\n          appearance={mood === \"destructive\" ? \"destructive\" : \"primary\"}\n          variant=\"inputEdit\"\n          unpadded={unpadded}\n        />\n      </div>\n    </GenericModal>\n  )\n}\n\nInputEditModal.displayName = \"InputEditModal\"\n"],"names":["InputEditModal","_a","isOpen","mood","title","onSubmit","onSecondaryAction","onAfterLeave","_b","localeDirection","_c","submitLabel","_d","dismissLabel","secondaryLabel","submitWorking","children","_e","unpadded","propsOnDismiss","onDismiss","props","__rest","undefined","submitAction","label","onClick","workingProps","working","workingLabel","workingLabelHidden","labelHidden","showSecondary","footerActions","__assign","disabled","React","createElement","GenericModal","onEscapeKeyup","className","styles","modal","dir","ModalHeader","classnames","header","textAlignRTL","padded","ModalAccessibleLabel","Heading","tag","variant","ModalBody","body","ModalFooter","actions","appearance","displayName"],"mappings":"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"}

package/dist/cjs/dts/BrandMoment/_docs/ExampleHeaders.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const MinimalBasic: () => JSX.Element;
 export declare const MinimalCustomerFocused: () => JSX.Element;
 export declare const FakeNavBar: () => JSX.Element;

package/dist/cjs/dts/Button/IconButton/IconButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GenericProps, ButtonFormAttributes, WorkingProps, WorkingUndefinedProps, ButtonBadgeProps } from "../GenericButton";
 export type IconButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
     label: string;

package/dist/cjs/dts/Calendar/CalendarRange/CalendarRange.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DayPickerRangeProps } from "react-day-picker";
 import { OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarRangeElement = HTMLDivElement;

package/dist/cjs/dts/Calendar/CalendarSingle/CalendarSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DayPickerSingleProps } from "react-day-picker";
 import { OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarSingleElement = HTMLDivElement;

package/dist/cjs/dts/Calendar/LegacyCalendarRange/LegacyCalendarRange.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Locale } from "date-fns";
 import { DateRange, DayClickEventHandler, Matcher } from "react-day-picker";
 import { DayOfWeek } from "../enums";

package/dist/cjs/dts/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CollapsibleProps } from "../Collapsible";
 export type ExpertAdviceCollapsibleProps = Omit<CollapsibleProps, "renderHeader" | "variant" | "group" | "separated">;
 /**

package/dist/cjs/dts/DateInput/DateInputDescription/DateInputDescription.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Locale } from "date-fns";
 export type DateInputDescriptionProps = {
     description?: string | JSX.Element;

package/dist/cjs/dts/Filter/FilterBar/FilterBar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OverrideClassName } from "../../types/OverrideClassName";
 import { FilterBarProviderProps } from "./context/FilterBarContext";
 import { FiltersValues } from "./types";

package/dist/cjs/dts/Filter/FilterBar/context/FilterBarContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterAttributes, FilterState, Filters, FiltersValues } from "../types";
 import { ActiveFiltersArray } from "./types";
 export type FilterBarContextValue<Value, ValuesMap extends FiltersValues = Record<string, Value>> = {

package/dist/cjs/dts/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const AddFiltersMenu: {
     (): JSX.Element;
     displayName: string;

package/dist/cjs/dts/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const ClearAllButton: {
     (): JSX.Element;
     displayName: string;

package/dist/cjs/dts/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterDatePickerProps } from "../../../FilterDatePicker";
 export type FilterBarDatePickerProps = Omit<FilterDatePickerProps, "id" | "label" | "renderTrigger" | "isOpen" | "setIsOpen" | "selectedDate" | "onDateChange" | "locale"> & {
     id?: string;

package/dist/cjs/dts/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterDateRangePickerProps } from "../../../FilterDateRangePicker";
 export type FilterBarDateRangePickerProps = Omit<FilterDateRangePickerProps, "id" | "label" | "renderTrigger" | "isOpen" | "setIsOpen" | "selectedRange" | "onRangeChange" | "locale"> & {
     id?: string;

package/dist/cjs/dts/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Key } from "@react-types/shared";
 import { FilterMultiSelectProps } from "../../../FilterMultiSelect";
 export type FilterBarMultiSelectProps = Omit<FilterMultiSelectProps, "isOpen" | "setIsOpen" | "renderTrigger" | "label" | "selectedKeys" | "trigger"> & {

package/dist/cjs/dts/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterSelectProps, SelectOption } from "../../../FilterSelect";
 export type FilterBarSelectProps<Option extends SelectOption = SelectOption> = Omit<FilterSelectProps<Option>, "isOpen" | "setIsOpen" | "renderTrigger" | "label" | "selectedKey"> & {
     id?: string;

package/dist/cjs/dts/Filter/FilterDatePicker/FilterDatePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterProps } from "../Filter";
 import { FilterButtonProps } from "../FilterButton";
 import { FilterDatePickerFieldProps } from "./subcomponents/FilterDatePickerField";

package/dist/cjs/dts/Filter/FilterDateRangePicker/FilterDateRangePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterProps } from "../Filter";
 import { FilterButtonProps } from "../FilterButton";
 import { FilterDateRangePickerFieldProps } from "./subcomponents/FilterDateRangePickerField";

package/dist/cjs/dts/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Locale } from "date-fns";
 export type DateRangeDisplayLabelProps = {
     dateRange: {

package/dist/cjs/dts/Filter/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateRangeFieldValidationMessage } from "../FilterDateRangePickerField/types";
 export type DateRangeValidationMessageProps = {
     validationMessage?: DateRangeFieldValidationMessage;

package/dist/cjs/dts/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -61,7 +61,7 @@ export declare const FilterMultiSelect: {
         displayName: string;
     };
     LoadMoreButton: {
-        (props: import("./subcomponents/LoadMoreButton").LoadMoreButtonProps): JSX.Element;
+        (props: import("../../Button/GenericButton").GenericButtonProps): JSX.Element;
         displayName: string;
     };
     NoResults: {

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonProps } from "../../../../Button";
 export type LoadMoreButtonProps = ButtonProps;
 export declare const LoadMoreButton: {

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type MenuLoadingSkeletonProps = {
     isAnimated?: boolean;
 };

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultiSelectItem } from "../../types";
 export interface MultiSelectOptionProps {
     classNameOverride?: string;

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type SearchInputProps = {
     label?: string;
     id?: string;

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SectionDivider: () => JSX.Element;

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const ClearButton: {
     (): JSX.Element;
     displayName: string;

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const SelectAllButton: {
     (): JSX.Element;
     displayName: string;

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type FilterTriggerButtonProps = {
     label: string;
     selectedOptionLabels: string[];

package/dist/cjs/dts/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterTriggerButtonProps } from "../FilterTriggerButton";
 export type RemovableFilterTriggerProps = FilterTriggerButtonProps & {
     onRemove: () => void;

package/dist/cjs/dts/Filter/FilterSelect/FilterSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SelectProps as AriaSelectProps } from "@react-stately/select";
 import { FilterButtonProps } from "../FilterButton";
 import { SelectPopoverContentsProps } from "../../__future__/Select/subcomponents";

package/dist/cjs/dts/Filter/_docs/controls/renderTriggerControls.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterButtonProps } from "../../FilterButton";
 export declare const renderTriggerControls: {
     description: string;

package/dist/cjs/dts/Heading/Heading.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
 import { OverrideClassName } from "../types/OverrideClassName";
-export type HeadingVariants = "display-0" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6";
+export type HeadingVariants = "display-0" | "composable-header-title" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6";
 export type AllowedHeadingTags = "pre" | "p" | "div" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label";
 export type AllowedHeadingColors = "dark" | "dark-reduced-opacity" | "white" | "white-reduced-opacity" | "positive" | "negative";
 export type HeadingProps = {

package/dist/cjs/dts/Icon/AcademyIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const AcademyIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ActionOffIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ActionOffIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ActionOffWhiteIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ActionOffWhiteIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ActionOnIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ActionOnIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/AddIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const AddIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/AddLinkIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const AddLinkIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/AddWhiteIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const AddWhiteIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/AiIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const AiIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArchivedIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArchivedIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArchivedWhiteIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArchivedWhiteIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArrowBackwardIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArrowBackwardIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArrowDownIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArrowDownIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArrowForwardIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArrowForwardIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArrowLeftIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArrowLeftIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArrowRightIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArrowRightIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ArrowUpIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ArrowUpIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/BlankIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const BlankIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/BoldIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const BoldIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/BookmarkOffIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const BookmarkOffIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/BookmarkOnIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const BookmarkOnIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/BranchingIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const BranchingIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/BullettedListIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const BullettedListIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/CaMonogramIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const CaMonogramIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/CameraIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const CameraIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/CautionIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const CautionIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/CautionWhiteIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const CautionWhiteIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/CheckIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const CheckIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ChevronDownIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ChevronDownIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ChevronLeftIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ChevronLeftIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ChevronRightIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ChevronRightIcon: (props: IconProps) => JSX.Element;

package/dist/cjs/dts/Icon/ChevronUpIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { IconProps } from "./types";
 export declare const ChevronUpIcon: (props: IconProps) => JSX.Element;