@carbon-labs/react-animated-header 0.42.0 → 0.44.0

package/es/__stories__/AnimatedHeader.stories.d.ts

@@ -6,13 +6,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import AnimatedHeader from '../components/AnimatedHeader/AnimatedHeader';
 import type { Meta } from '@storybook/react-webpack5';
 import '../components/animated-header.scss';
 declare const meta: Meta<typeof AnimatedHeader>;
 export default meta;
 export declare const ThemeG10: {
-    (args: any): import("react/jsx-runtime").JSX.Element;
+    (args: any): React.JSX.Element;
     argTypes: {
         description: {
             description: string;
@@ -15205,7 +15206,7 @@ export declare const ThemeG10: {
     };
 };
 export declare const ThemeG100: {
-    (args: any): import("react/jsx-runtime").JSX.Element;
+    (args: any): React.JSX.Element;
     argTypes: {
         description: {
             description: string;

package/es/__stories__/data/SampleCustomTaskContent.d.ts

@@ -6,5 +6,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const SampleCustomTaskContent: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+declare const SampleCustomTaskContent: () => React.JSX.Element;
 export default SampleCustomTaskContent;

package/es/__stories__/data/index.d.ts

@@ -18,7 +18,7 @@ export declare const tasksControllerConfigButton: {
     type: string;
     button: {
         href: string;
-        icon: import("@carbon/react/icons").CarbonIconType;
+        icon: import("@carbon/icons-react").CarbonIconType;
         text: string;
         type: "tertiary";
     };

package/es/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface AnimatedBackgroundProps {
+    headerAnimation?: object;
+    isOpen: boolean;
+}
+declare const AnimatedBackground: React.FC<AnimatedBackgroundProps>;
+export default AnimatedBackground;

package/es/components/AnimatedBackground/AnimatedBackground.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useRef, useEffect } from 'react';
+import lottie from 'lottie-web';
+import { usePrefix } from '@carbon-labs/utilities/usePrefix';
+
+const AnimatedBackground = ({
+  headerAnimation,
+  isOpen
+}) => {
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header__lottie-animation`;
+  const animationContainer = useRef(null);
+  const animRef = useRef(null);
+  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
+  useEffect(() => {
+    // Make sure any prior instance is destroyed before creating a new one
+    if (animRef.current) {
+      animRef.current.destroy();
+      animRef.current = null;
+    }
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
+    const animation = lottie.loadAnimation({
+      container: animationContainer.current,
+      animationData: headerAnimation,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false,
+      rendererSettings: {
+        preserveAspectRatio: 'xMidYMid slice'
+      }
+    });
+    animRef.current = animation;
+    animation.setSpeed(1);
+    const onDomLoaded = () => {
+      const totalFrames = animation.getDuration(true);
+      if (isReduced) {
+        animation.goToAndStop(totalFrames, true);
+      } else {
+        animation.play();
+      }
+    };
+    animation.addEventListener('DOMLoaded', onDomLoaded);
+    return () => {
+      animation.removeEventListener('DOMLoaded', onDomLoaded);
+      animation.destroy();
+      animRef.current = null;
+    };
+    // Re-init when the JSON or reduced-motion preference changes
+  }, [headerAnimation, isReduced]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: animationContainer,
+    className: `${blockClass}`,
+    "data-expanded": isOpen,
+    "aria-hidden": "true"
+  }));
+};
+
+export { AnimatedBackground as default };

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -6,9 +6,8 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState, Suspense, lazy } from 'react';
 import PropTypes from 'prop-types';
-import lottie from 'lottie-web';
 import { Grid, Column, Button } from '@carbon/react';
 import { ChevronUp, ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '@carbon-labs/utilities/usePrefix';
@@ -17,9 +16,12 @@ import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
 import TasksController from '../TasksController/TasksController.js';
 import WorkspaceSelector from '../WorkspaceSelector/WorkspaceSelector.js';
 import HeaderTitle from '../HeaderTitle/HeaderTitle.js';
+import StaticBackground from '../StaticBackground/StaticBackground.js';
 import ContentSwitcherSelector from '../ContentSwitcherSelector/ContentSwitcherSelector.js';
 import HeaderAction from '../HeaderAction/HeaderAction.js';
 
+const AnimatedBackground = /*#__PURE__*/lazy(() => import('../AnimatedBackground/AnimatedBackground.js'));
+
 /** Animated Header */
 
 const AnimatedHeader = ({
@@ -45,62 +47,10 @@ const AnimatedHeader = ({
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header`;
-  const animationContainer = useRef(null);
-  const animRef = useRef(null);
   const [isOpen, setIsOpen] = useState(true);
-  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
   const handleButtonCollapseClick = () => {
     setIsOpen(!isOpen);
   };
-  useEffect(() => {
-    // Make sure any prior instance is destroyed before creating a new one
-    if (animRef.current) {
-      animRef.current.destroy();
-      animRef.current = null;
-    }
-    if (!animationContainer.current || !headerAnimation) {
-      return;
-    }
-    const animation = lottie.loadAnimation({
-      container: animationContainer.current,
-      animationData: headerAnimation,
-      renderer: 'svg',
-      loop: false,
-      autoplay: false,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    });
-    animRef.current = animation;
-    const onDomLoaded = () => {
-      const data = animation.animationData;
-      const markers = data?.markers ?? [];
-      const first = markers?.[0]?.tm ?? 0;
-      const totalFrames = animation.getDuration(true);
-      const second = markers?.[1]?.tm ?? totalFrames;
-      if (isReduced) {
-        // Respect reduced motion
-        const restFrame = (typeof second === 'number' ? second : totalFrames * 0.5) | 0;
-        animation.goToAndStop(restFrame, true);
-        return;
-      }
-      animation.setSpeed(1);
-      requestAnimationFrame(() => {
-        if (typeof first === 'number' && typeof second === 'number') {
-          animation.playSegments([first, second], true);
-        } else {
-          animation.play();
-        }
-      });
-    };
-    animation.addEventListener('DOMLoaded', onDomLoaded);
-    return () => {
-      animation.removeEventListener('DOMLoaded', onDomLoaded);
-      animation.destroy();
-      animRef.current = null;
-    };
-    // Re-init when the JSON or reduced-motion preference changes
-  }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("header", {
     className: blockClass,
     "data-expanded": isOpen
@@ -110,24 +60,14 @@ const AnimatedHeader = ({
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__container--gradient`
-  }), !headerAnimation && headerStatic && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static`
-    // eslint-disable-next-line react/forbid-dom-props
-    ,
-    style: {
-      backgroundImage: `url(${headerStatic})`
-    },
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__lottie-animation--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: animationContainer,
-    className: `${blockClass}__lottie-animation`,
-    "data-expanded": isOpen,
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement(Column, {
+  }), headerAnimation ? typeof window !== 'undefined' && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AnimatedBackground, {
+    headerAnimation: headerAnimation,
+    isOpen: isOpen
+  })) : /*#__PURE__*/React.createElement(StaticBackground, {
+    headerStatic: headerStatic
+  }), /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 16,

package/es/components/StaticBackground/StaticBackground.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface StaticBackgroundProps {
+    headerStatic?: React.JSX.Element | string;
+}
+declare const StaticBackground: React.FC<StaticBackgroundProps>;
+export default StaticBackground;

package/es/components/StaticBackground/StaticBackground.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { usePrefix } from '@carbon-labs/utilities/usePrefix';
+import React from 'react';
+
+const StaticBackground = ({
+  headerStatic
+}) => {
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header__static`;
+  if (!headerStatic) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}`
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: {
+      backgroundImage: `url(${headerStatic})`
+    },
+    "aria-hidden": "true"
+  }));
+};
+
+export { StaticBackground as default };

package/es/components/TasksController/TasksController.d.ts

@@ -6,6 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { ButtonBaseProps, DropdownProps } from '@carbon/react';
 import { TileGroup } from '../AnimatedHeader/types';
 export interface TasksControllerConfig {
@@ -28,5 +29,5 @@ export type TasksControllerProps = {
     selectedTileGroup?: TileGroup;
     setSelectedTileGroup?: (e: any) => void;
 };
-declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => React.JSX.Element | null;
 export default TasksController;

package/es/components/Tiles/AITile/AITileBody.d.ts

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { type TagProps } from '@carbon/react';
 type TagTypeName = TagProps<'div'>['type'];
 export type AITileLabelVariant = 'aiLabel' | 'tag';
@@ -22,5 +22,5 @@ export type AITileBodyProps = {
     aiLabelTagType?: TagTypeName;
     isLoading?: boolean;
 };
-export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, aiLabelVariant, aiLabelText, aiLabelTagType, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, aiLabelVariant, aiLabelText, aiLabelTagType, isLoading, }: AITileBodyProps) => React.JSX.Element;
 export {};

package/es/components/Tiles/GlassTile/GlassTileBody.d.ts

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { type TagProps } from '@carbon/react';
 type TagTypeName = TagProps<'div'>['type'];
 export type GlassTileBodyProps = {
@@ -20,5 +20,5 @@ export type GlassTileBodyProps = {
     tagType?: TagTypeName;
     isLoading?: boolean;
 };
-export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, tagLabel, tagType, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, tagLabel, tagType, isLoading, }: GlassTileBodyProps) => React.JSX.Element;
 export {};

package/es/components/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { DropdownProps } from '@carbon/react';
+import React from 'react';
 export interface Workspace {
     id: string;
     label: string;
@@ -24,5 +25,5 @@ export type WorkspaceSelectorProps = {
     userName?: string;
     isLoading?: boolean;
 };
-declare const WorkspaceSelector: ({ workspaceSelectorConfig, userName, isLoading, }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const WorkspaceSelector: ({ workspaceSelectorConfig, userName, isLoading, }: WorkspaceSelectorProps) => React.JSX.Element | null;
 export default WorkspaceSelector;

package/lib/__stories__/AnimatedHeader.stories.d.ts

@@ -6,13 +6,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import AnimatedHeader from '../components/AnimatedHeader/AnimatedHeader';
 import type { Meta } from '@storybook/react-webpack5';
 import '../components/animated-header.scss';
 declare const meta: Meta<typeof AnimatedHeader>;
 export default meta;
 export declare const ThemeG10: {
-    (args: any): import("react/jsx-runtime").JSX.Element;
+    (args: any): React.JSX.Element;
     argTypes: {
         description: {
             description: string;
@@ -15205,7 +15206,7 @@ export declare const ThemeG10: {
     };
 };
 export declare const ThemeG100: {
-    (args: any): import("react/jsx-runtime").JSX.Element;
+    (args: any): React.JSX.Element;
     argTypes: {
         description: {
             description: string;

package/lib/__stories__/data/SampleCustomTaskContent.d.ts

@@ -6,5 +6,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const SampleCustomTaskContent: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+declare const SampleCustomTaskContent: () => React.JSX.Element;
 export default SampleCustomTaskContent;

package/lib/__stories__/data/index.d.ts

@@ -18,7 +18,7 @@ export declare const tasksControllerConfigButton: {
     type: string;
     button: {
         href: string;
-        icon: import("@carbon/react/icons").CarbonIconType;
+        icon: import("@carbon/icons-react").CarbonIconType;
         text: string;
         type: "tertiary";
     };

package/lib/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface AnimatedBackgroundProps {
+    headerAnimation?: object;
+    isOpen: boolean;
+}
+declare const AnimatedBackground: React.FC<AnimatedBackgroundProps>;
+export default AnimatedBackground;

package/lib/components/AnimatedBackground/AnimatedBackground.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var lottie = require('lottie-web');
+var usePrefix = require('@carbon-labs/utilities/usePrefix');
+
+const AnimatedBackground = ({
+  headerAnimation,
+  isOpen
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header__lottie-animation`;
+  const animationContainer = React.useRef(null);
+  const animRef = React.useRef(null);
+  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
+  React.useEffect(() => {
+    // Make sure any prior instance is destroyed before creating a new one
+    if (animRef.current) {
+      animRef.current.destroy();
+      animRef.current = null;
+    }
+    if (!animationContainer.current || !headerAnimation) {
+      return;
+    }
+    const animation = lottie.loadAnimation({
+      container: animationContainer.current,
+      animationData: headerAnimation,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false,
+      rendererSettings: {
+        preserveAspectRatio: 'xMidYMid slice'
+      }
+    });
+    animRef.current = animation;
+    animation.setSpeed(1);
+    const onDomLoaded = () => {
+      const totalFrames = animation.getDuration(true);
+      if (isReduced) {
+        animation.goToAndStop(totalFrames, true);
+      } else {
+        animation.play();
+      }
+    };
+    animation.addEventListener('DOMLoaded', onDomLoaded);
+    return () => {
+      animation.removeEventListener('DOMLoaded', onDomLoaded);
+      animation.destroy();
+      animRef.current = null;
+    };
+    // Re-init when the JSON or reduced-motion preference changes
+  }, [headerAnimation, isReduced]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: animationContainer,
+    className: `${blockClass}`,
+    "data-expanded": isOpen,
+    "aria-hidden": "true"
+  }));
+};
+
+exports.default = AnimatedBackground;

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var lottie = require('lottie-web');
 var react = require('@carbon/react');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('@carbon-labs/utilities/usePrefix');
@@ -21,9 +20,12 @@ var BaseTile = require('../Tiles/BaseTile/BaseTile.js');
 var TasksController = require('../TasksController/TasksController.js');
 var WorkspaceSelector = require('../WorkspaceSelector/WorkspaceSelector.js');
 var HeaderTitle = require('../HeaderTitle/HeaderTitle.js');
+var StaticBackground = require('../StaticBackground/StaticBackground.js');
 var ContentSwitcherSelector = require('../ContentSwitcherSelector/ContentSwitcherSelector.js');
 var HeaderAction = require('../HeaderAction/HeaderAction.js');
 
+const AnimatedBackground = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('../AnimatedBackground/AnimatedBackground.js'); }));
+
 /** Animated Header */
 
 const AnimatedHeader = ({
@@ -49,62 +51,10 @@ const AnimatedHeader = ({
 }) => {
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header`;
-  const animationContainer = React.useRef(null);
-  const animRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(true);
-  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
   const handleButtonCollapseClick = () => {
     setIsOpen(!isOpen);
   };
-  React.useEffect(() => {
-    // Make sure any prior instance is destroyed before creating a new one
-    if (animRef.current) {
-      animRef.current.destroy();
-      animRef.current = null;
-    }
-    if (!animationContainer.current || !headerAnimation) {
-      return;
-    }
-    const animation = lottie.loadAnimation({
-      container: animationContainer.current,
-      animationData: headerAnimation,
-      renderer: 'svg',
-      loop: false,
-      autoplay: false,
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice'
-      }
-    });
-    animRef.current = animation;
-    const onDomLoaded = () => {
-      const data = animation.animationData;
-      const markers = data?.markers ?? [];
-      const first = markers?.[0]?.tm ?? 0;
-      const totalFrames = animation.getDuration(true);
-      const second = markers?.[1]?.tm ?? totalFrames;
-      if (isReduced) {
-        // Respect reduced motion
-        const restFrame = (typeof second === 'number' ? second : totalFrames * 0.5) | 0;
-        animation.goToAndStop(restFrame, true);
-        return;
-      }
-      animation.setSpeed(1);
-      requestAnimationFrame(() => {
-        if (typeof first === 'number' && typeof second === 'number') {
-          animation.playSegments([first, second], true);
-        } else {
-          animation.play();
-        }
-      });
-    };
-    animation.addEventListener('DOMLoaded', onDomLoaded);
-    return () => {
-      animation.removeEventListener('DOMLoaded', onDomLoaded);
-      animation.destroy();
-      animRef.current = null;
-    };
-    // Re-init when the JSON or reduced-motion preference changes
-  }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("header", {
     className: blockClass,
     "data-expanded": isOpen
@@ -114,24 +64,14 @@ const AnimatedHeader = ({
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__container--gradient`
-  }), !headerAnimation && headerStatic && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__static`
-    // eslint-disable-next-line react/forbid-dom-props
-    ,
-    style: {
-      backgroundImage: `url(${headerStatic})`
-    },
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__lottie-animation--container`
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: animationContainer,
-    className: `${blockClass}__lottie-animation`,
-    "data-expanded": isOpen,
-    "aria-hidden": "true"
-  })), /*#__PURE__*/React.createElement(react.Column, {
+  }), headerAnimation ? typeof window !== 'undefined' && /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AnimatedBackground, {
+    headerAnimation: headerAnimation,
+    isOpen: isOpen
+  })) : /*#__PURE__*/React.createElement(StaticBackground.default, {
+    headerStatic: headerStatic
+  }), /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 8,
     lg: 16,

package/lib/components/StaticBackground/StaticBackground.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface StaticBackgroundProps {
+    headerStatic?: React.JSX.Element | string;
+}
+declare const StaticBackground: React.FC<StaticBackgroundProps>;
+export default StaticBackground;

package/lib/components/StaticBackground/StaticBackground.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var usePrefix = require('@carbon-labs/utilities/usePrefix');
+var React = require('react');
+
+const StaticBackground = ({
+  headerStatic
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}--animated-header__static`;
+  if (!headerStatic) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}`
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: {
+      backgroundImage: `url(${headerStatic})`
+    },
+    "aria-hidden": "true"
+  }));
+};
+
+exports.default = StaticBackground;

package/lib/components/TasksController/TasksController.d.ts

@@ -6,6 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import { ButtonBaseProps, DropdownProps } from '@carbon/react';
 import { TileGroup } from '../AnimatedHeader/types';
 export interface TasksControllerConfig {
@@ -28,5 +29,5 @@ export type TasksControllerProps = {
     selectedTileGroup?: TileGroup;
     setSelectedTileGroup?: (e: any) => void;
 };
-declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TasksController: ({ tasksControllerConfig, isLoading, allTileGroups, selectedTileGroup, setSelectedTileGroup, }: TasksControllerProps) => React.JSX.Element | null;
 export default TasksController;

package/lib/components/Tiles/AITile/AITileBody.d.ts

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { type TagProps } from '@carbon/react';
 type TagTypeName = TagProps<'div'>['type'];
 export type AITileLabelVariant = 'aiLabel' | 'tag';
@@ -22,5 +22,5 @@ export type AITileBodyProps = {
     aiLabelTagType?: TagTypeName;
     isLoading?: boolean;
 };
-export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, aiLabelVariant, aiLabelText, aiLabelTagType, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, aiLabelVariant, aiLabelText, aiLabelTagType, isLoading, }: AITileBodyProps) => React.JSX.Element;
 export {};

package/lib/components/Tiles/GlassTile/GlassTileBody.d.ts

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { type TagProps } from '@carbon/react';
 type TagTypeName = TagProps<'div'>['type'];
 export type GlassTileBodyProps = {
@@ -20,5 +20,5 @@ export type GlassTileBodyProps = {
     tagType?: TagTypeName;
     isLoading?: boolean;
 };
-export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, tagLabel, tagType, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, tagLabel, tagType, isLoading, }: GlassTileBodyProps) => React.JSX.Element;
 export {};

package/lib/components/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { DropdownProps } from '@carbon/react';
+import React from 'react';
 export interface Workspace {
     id: string;
     label: string;
@@ -24,5 +25,5 @@ export type WorkspaceSelectorProps = {
     userName?: string;
     isLoading?: boolean;
 };
-declare const WorkspaceSelector: ({ workspaceSelectorConfig, userName, isLoading, }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const WorkspaceSelector: ({ workspaceSelectorConfig, userName, isLoading, }: WorkspaceSelectorProps) => React.JSX.Element | null;
 export default WorkspaceSelector;

package/lib/es/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -0,0 +1,8 @@
+export { AnimatedBackground as default };
+declare function AnimatedBackground({ headerAnimation, isOpen }: {
+    headerAnimation: any;
+    isOpen: any;
+}): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+import React from 'react';

package/lib/es/components/StaticBackground/StaticBackground.d.ts

@@ -0,0 +1,7 @@
+export { StaticBackground as default };
+declare function StaticBackground({ headerStatic }: {
+    headerStatic: any;
+}): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;
+import React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -43,7 +43,7 @@
     "lottie-web": "^5.12.2"
   },
   "devDependencies": {
-    "@carbon-labs/utilities": "0.21.0"
+    "@carbon-labs/utilities": "0.22.0"
   },
-  "gitHead": "b0e1037e0377d84bd08b8808375e1c18f5e89720"
+  "gitHead": "a90f7c900917a4a25e61fe92a80a564f81cdaa50"
 }