@carbon-labs/react-animated-header 0.1.0

package/lib/_virtual/_commonjsHelpers.js

@@ -0,0 +1,14 @@
+/**
+ * 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';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/lib/_virtual/lottie.js

@@ -0,0 +1,18 @@
+/**
+ * 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 _commonjsHelpers = require('./_commonjsHelpers.js');
+var lottie$1 = require('../node_modules/lottie-web/build/player/lottie.js');
+
+var lottieExports = lottie$1.__require();
+var lottie = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lottieExports);
+
+exports.default = lottie;

package/lib/_virtual/lottie2.js

@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+var lottie = {exports: {}};
+
+exports.__module = lottie;

package/lib/assets/index.d.ts

@@ -0,0 +1,7 @@
+import dataFabricAnimatedLight from './animated/header_1312x738_data_fabric_light_03.json';
+import dataFabricAnimatedDark from './animated/header_1312x738_data_fabric_dark_06.json';
+import watsonXAnimatedLight from './animated/header_1312x738_watsonx_data_light_03.json';
+import watsonXAnimatedDark from './animated/header_1312x738_watsonx_data_dark_02.json';
+import wxbiaAnimatedLight from './animated/header_illustration_container_wxbia_light_08.json';
+import wxbiaAnimatedDark from './animated/header_illustration_container_wxbia_dark_05.json';
+export { dataFabricAnimatedLight, dataFabricAnimatedDark, dataFabricStaticLight, dataFabricStaticDark, watsonXAnimatedLight, watsonXAnimatedDark, watsonXStaticLight, watsonXStaticDark, wxbiaAnimatedLight, wxbiaAnimatedDark };

package/lib/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ButtonKind } from '@carbon/react';
+/** Animated Header */
+export interface Tile {
+    id: string;
+    href: string;
+    title: string;
+    mainIcon: string;
+}
+export interface TileGroup {
+    id: number;
+    name: string;
+    tiles: Tile[];
+}
+export interface AnimatedHeaderProps {
+    name?: string;
+    description?: string;
+    buttonText?: string;
+    buttonType?: ButtonKind;
+    buttonIcon?: any;
+    headerDropdown?: boolean;
+    productName?: string;
+    tileDropdownItems?: Array<object>;
+    selectedTileGroup: TileGroup[] | any;
+    setSelectedTileGroup: (e: any) => void;
+    allTiles: TileGroup[];
+    headerAnimation?: object;
+    headerStatic?: React.JSX.Element;
+}
+declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
+export default AnimatedHeader;

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -0,0 +1,281 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var react = require('@carbon/react');
+var lottie = require('../../_virtual/lottie.js');
+var usePrefix = require('../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+var BaseTile = require('../Tiles/BaseTile/BaseTile.js');
+var bucket12 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-12.js');
+var bucket13 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-13.js');
+var bucket3 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
+
+var _PauseFilled, _PlayFilledAlt;
+
+/** Animated Header */
+
+const AnimatedHeader = _ref => {
+  let {
+    name,
+    description,
+    buttonText,
+    buttonType = 'tertiary',
+    buttonIcon = null,
+    headerDropdown = false,
+    productName = '[Product name]',
+    tileDropdownItems,
+    selectedTileGroup,
+    setSelectedTileGroup,
+    allTiles,
+    headerAnimation,
+    headerStatic
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}-animated-header`;
+  let animationContainer = /*#__PURE__*/React.createRef();
+  const [open, setOpen] = React.useState(true);
+  const [playing, setPlaying] = React.useState(true);
+  const [headingTextAnimation, setHeadingTextAnimation] = React.useState('');
+  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
+  const collapsed = `${blockClass}--collapsed`;
+  const contentCollapsed = `${blockClass}__content--collapsed`;
+  const descriptionCollapsed = `${blockClass}__left-area-container--collapsed`;
+  const headingCollapsed = `${blockClass}__heading--collapsed`;
+  const headingExpanded = `${blockClass}__heading--expanded`;
+  const lottieCollapsed = `${blockClass}__lottie-animation--collapsed`;
+  const handleButtonCollapseClick = () => {
+    setOpen(!open);
+    open ? setHeadingTextAnimation(headingCollapsed) : setHeadingTextAnimation(headingExpanded);
+  };
+  const handleLottieAnimationClick = () => {
+    if (playing) {
+      lottie.default.pause();
+    } else {
+      lottie.default.play();
+    }
+    setPlaying(!playing);
+  };
+  React.useEffect(() => {
+    let animation = lottie.default.loadAnimation({
+      container: animationContainer.current,
+      animationData: headerAnimation,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false
+    });
+    const lottieLoadSpeed = 1;
+    const lottieLoopSpeed = 1;
+    const animationData = animation['animationData'];
+    function reducedMotion() {
+      animation.goToAndStop(5000);
+    }
+    function load() {
+      animation.setSpeed(lottieLoadSpeed);
+      animation.playSegments([animationData.markers.at(0).tm, animationData.markers.at(1).tm], true);
+    }
+    function loop() {
+      animation.setSpeed(lottieLoopSpeed);
+      animation.playSegments([animationData.markers.at(1).tm, animationData.op], true);
+    }
+    if (!!isReduced) {
+      // reduced motion on
+      animation.addEventListener('DOMLoaded', reducedMotion);
+    } else {
+      // reduced motion off
+
+      // Run Start Animation
+      animation.addEventListener('DOMLoaded', load);
+
+      // Run Looped Animation
+      animation.addEventListener('complete', loop);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("section", {
+    className: `${blockClass} ${!open && collapsed}`
+  }, /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement("div", {
+    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`,
+    style: {
+      backgroundImage: `url(${headerStatic})`
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__lottie-animation--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: animationContainer,
+    className: `${blockClass}__lottie-animation ${!open && lottieCollapsed}`
+  })), /*#__PURE__*/React.createElement(react.Column, {
+    sm: 4,
+    md: 8,
+    lg: 16
+  }, /*#__PURE__*/React.createElement(react.Tooltip, {
+    align: "bottom",
+    label: `Welcome, ${name}`
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: `${blockClass}__heading ${headingTextAnimation}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}__heading-welcome`
+  }, "Welcome,", ' '), /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}__heading-name`
+  }, name)))), (description || buttonText || headerDropdown) && /*#__PURE__*/React.createElement(react.Column, {
+    sm: 4,
+    md: 8,
+    lg: 4,
+    className: `${blockClass}__left-area-container ${!open && descriptionCollapsed}`
+  }, description && /*#__PURE__*/React.createElement(react.Tooltip, {
+    align: "bottom",
+    label: description
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: `${blockClass}__description`
+  }, description)), buttonText && /*#__PURE__*/React.createElement(react.Button, {
+    className: `${blockClass}__button`,
+    kind: buttonType,
+    renderIcon: buttonIcon
+  }, buttonText), !buttonText && headerDropdown && allTiles && /*#__PURE__*/React.createElement(react.Dropdown, {
+    id: `${blockClass}__header-dropdown`,
+    className: `${blockClass}__header-dropdown`,
+    size: "md",
+    autoAlign: true,
+    titleText: "Label",
+    initialSelectedItem: allTiles[0],
+    label: allTiles[0].name,
+    hideLabel: true,
+    type: "inline",
+    items: allTiles,
+    itemToString: item => item ? item.name : '',
+    onChange: e => setSelectedTileGroup(e)
+  })), selectedTileGroup && /*#__PURE__*/React.createElement(react.Column, {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    className: `${blockClass}__content`
+  }, tileDropdownItems && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__tile-dropdown--container ${!open && contentCollapsed}`
+  }, /*#__PURE__*/React.createElement(react.Dropdown, {
+    id: `${blockClass}__tile-dropdown`,
+    className: `${blockClass}__tile-dropdown`,
+    size: "sm",
+    titleText: "Label",
+    label: `Open in: ${name}'s sandbox`,
+    hideLabel: true,
+    type: "inline",
+    items: tileDropdownItems,
+    itemToString: item => item ? item['text'] : ''
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__tiles-container`
+  }, selectedTileGroup.tiles.map(tile => {
+    return /*#__PURE__*/React.createElement(BaseTile.BaseTile, {
+      key: tile.id,
+      id: tile.id,
+      open: open,
+      href: tile.href,
+      mainIcon: tile.mainIcon,
+      secondaryIcon: tile.secondaryIcon,
+      title: tile.title,
+      subtitle: tile.subtitle,
+      productName: productName
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__button-collapse--gradient`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__button-collapse--container`
+  }, headerAnimation && !isReduced && /*#__PURE__*/React.createElement(react.IconButton, {
+    className: `${blockClass}__icon-button`,
+    label: playing ? 'Pause' : 'Play',
+    kind: "ghost",
+    type: "button",
+    onClick: handleLottieAnimationClick
+  }, playing ? _PauseFilled || (_PauseFilled = /*#__PURE__*/React.createElement(bucket12.PauseFilled, {
+    size: 16,
+    fill: `var(--cds-icon-secondary)`
+  })) : _PlayFilledAlt || (_PlayFilledAlt = /*#__PURE__*/React.createElement(bucket13.PlayFilledAlt, {
+    size: 16,
+    fill: `var(--cds-icon-secondary)`
+  }))), /*#__PURE__*/React.createElement(react.Button, {
+    id: `${blockClass}__button-collapse`,
+    kind: "ghost",
+    renderIcon: open ? bucket3.ChevronUp : bucket3.ChevronDown,
+    onClick: handleButtonCollapseClick
+  }, open ? `Collapse` : `Expand`))));
+};
+AnimatedHeader.displayName = 'Animated Header';
+AnimatedHeader.propTypes = {
+  /**
+   * Specify an optional className to be added to your Animated Header
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the current username of active user
+   */
+  name: PropTypes.string,
+  /**
+   * Provide short sentence in max. 3 lines related to product context
+   */
+  description: PropTypes.string,
+  /**
+   * (optional), Provide content that needs highest attention from
+   * the user or content that triggers an action and allow users to
+   * directly start working and gain value (within one click)
+   */
+  buttonText: PropTypes.string,
+  /**
+   * Specify the carbon button type
+   */
+  buttonType: react.ButtonKinds,
+  /**
+   * (optional), Provide the renderIcon used in the button
+   * ex. Launch, Add, ect.
+   */
+  buttonIcon: PropTypes.any,
+  /**
+   * Header dropdown menu when button/buttonText is not in use
+   */
+  headerDropdown: PropTypes.bool,
+  /**
+   * Provide current product name
+   */
+  productName: PropTypes.string,
+  /**
+   * Object containing dropdown items
+   * `Open in: "_"`
+   */
+  tileDropdownItems: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The tile group that is active in the header
+   * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
+   */
+  selectedTileGroup: PropTypes.object,
+  /**
+   * Provide function to be called when switching selected tile group
+   */
+  setSelectedTileGroup: PropTypes.func,
+  /**
+   * Array of each tile group setup
+   */
+  allTiles: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * In-product imagery / lottie animation (.json) dim. 1312 x 738
+   * (to update headerAnimation content storybook requires remount in toolbar)
+   */
+  headerAnimation: PropTypes.object,
+  /**
+   * In-product imagery / static imagery dim. 1312 x 738
+   * Only active when headerAnimation is not in use
+   */
+  headerStatic: PropTypes.object
+};
+
+exports.default = AnimatedHeader;

package/lib/components/Tiles/AIPromptTile/AIPromptTile.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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';
+/** Primary UI component for user interaction */
+interface AIPromptTileProps {
+    id?: string;
+    href?: string;
+    open?: boolean;
+    mainIcon?: string;
+    title?: string;
+    productName?: string;
+}
+export declare const AIPromptTile: React.FC<AIPromptTileProps>;
+export {};

package/lib/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -0,0 +1,96 @@
+/**
+ * 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';
+
+var React = require('react');
+var react = require('@carbon/react');
+var index = require('../../../node_modules/@carbon/icons-react/es/index.js');
+var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+var bucket14 = require('../../../node_modules/@carbon/icons-react/es/generated/bucket-14.js');
+
+var _AILabel;
+
+/** Primary UI component for user interaction */
+
+const AIPromptTile = _ref => {
+  let {
+    id,
+    href,
+    open,
+    mainIcon,
+    title,
+    productName
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}-animated-header__ai-prompt-tile`;
+  const collapsed = `${blockClass}--collapsed`;
+  const [textInput, setTextInput] = React.useState('');
+  const MainIcon = mainIcon ? index[mainIcon] : null;
+  const Send = bucket14.Send;
+  const handleTextInput = e => {
+    setTextInput(e.target.value);
+  };
+  const openInNewTab = url => {
+    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+    if (newWindow) newWindow.opener = null;
+  };
+  const handleTextInputKeyDown = event => {
+    if (event.key === 'Enter') {
+      console.log('do validate');
+      openInNewTab(`${href}&primed_chat=${textInput}`);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: `${blockClass}`,
+    className: `${prefix}-animated-header__tile ${blockClass}`,
+    key: id
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body ${!open && collapsed}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--icons`
+  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
+    fill: `var(--cds-icon-secondary)`,
+    size: 24
+  }), _AILabel || (_AILabel = /*#__PURE__*/React.createElement(react.AILabel, {
+    autoAlign: true,
+    aiText: "AI",
+    size: "mini"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--title`
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--text-input-container ${textInput && `${blockClass}--text-input-container__active`}`
+  }, /*#__PURE__*/React.createElement(react.TextInput, {
+    id: `${blockClass}--text-input`,
+    className: `${blockClass}--text-input`,
+    type: "text",
+    labelText: "AI Chat Input",
+    hideLabel: true,
+    placeholder: "Start chatting...",
+    size: "sm",
+    onChange: handleTextInput,
+    onKeyDown: handleTextInputKeyDown,
+    value: textInput
+  }), /*#__PURE__*/React.createElement(react.IconButton, {
+    className: `${blockClass}--icon-button ${textInput && `${blockClass}--icon-button__active`}`,
+    label: `Chat in ${productName}`,
+    kind: "ghost",
+    size: "sm",
+    disabled: !textInput,
+    align: "top-right",
+    onClick: () => openInNewTab(`${href}&primed_chat=${textInput}`),
+    onKeyDown: handleTextInputKeyDown
+  }, /*#__PURE__*/React.createElement(Send, null))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--footer`
+  }, /*#__PURE__*/React.createElement(react.Button, {
+    kind: "ghost",
+    size: "sm",
+    href: href
+  }, "Open ", productName))));
+};
+
+exports.AIPromptTile = AIPromptTile;

package/lib/components/Tiles/BaseTile/BaseTile.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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';
+/** Base Tile */
+interface BaseTileProps {
+    id?: string;
+    open?: boolean;
+    href?: string;
+    mainIcon?: string;
+    secondaryIcon?: string;
+    title?: string;
+    productName?: string;
+    subtitle?: string;
+}
+export declare const BaseTile: React.FC<BaseTileProps>;
+export {};

package/lib/components/Tiles/BaseTile/BaseTile.js

@@ -0,0 +1,41 @@
+/**
+ * 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';
+
+var React = require('react');
+var AIPromptTile = require('../AIPromptTile/AIPromptTile.js');
+var GlassTile = require('../GlassTile/GlassTile.js');
+
+/** Base Tile */
+
+const BaseTile = _ref => {
+  let {
+    id,
+    open,
+    href,
+    mainIcon,
+    secondaryIcon,
+    title,
+    productName,
+    subtitle
+  } = _ref;
+  const props = {
+    id,
+    open,
+    href,
+    mainIcon,
+    secondaryIcon,
+    title,
+    productName,
+    subtitle
+  };
+  const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile.AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile.GlassTile, props);
+  return tile;
+};
+
+exports.BaseTile = BaseTile;

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

@@ -0,0 +1,21 @@
+/**
+ * @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';
+/** Primary UI component for user interaction */
+interface GlassTileProps {
+    id?: string;
+    href?: string;
+    open?: boolean;
+    mainIcon?: string;
+    secondaryIcon?: string;
+    title?: string;
+    subtitle?: string;
+}
+export declare const GlassTile: React.FC<GlassTileProps>;
+export {};

package/lib/components/Tiles/GlassTile/GlassTile.js

@@ -0,0 +1,55 @@
+/**
+ * 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';
+
+var React = require('react');
+var react = require('@carbon/react');
+var index = require('../../../node_modules/@carbon/icons-react/es/index.js');
+var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePrefix.js');
+
+/** Primary UI component for user interaction */
+
+const GlassTile = _ref => {
+  let {
+    id,
+    href,
+    open,
+    mainIcon,
+    secondaryIcon,
+    title,
+    subtitle
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const blockClass = `${prefix}-animated-header__glass-tile`;
+  const collapsed = `${blockClass}--collapsed`;
+  const MainIcon = mainIcon ? index[mainIcon] : null;
+  const SecondaryIcon = secondaryIcon ? index[secondaryIcon] : null;
+  return /*#__PURE__*/React.createElement(react.Link, {
+    className: `${prefix}-animated-header__tile ${blockClass}`,
+    key: id,
+    href: href
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body ${!open && collapsed}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--icons`
+  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
+    fill: `var(--cds-icon-secondary)`,
+    size: 24
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--title`
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--footer`
+  }, subtitle && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--subtitle`
+  }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
+    size: 16,
+    fill: `var(--cds-icon-secondary)`
+  }))));
+};
+
+exports.GlassTile = GlassTile;

package/lib/components/Tiles/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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 { AIPromptTile } from './AIPromptTile/AIPromptTile';
+import { BaseTile } from './BaseTile/BaseTile';
+import { GlassTile } from './GlassTile/GlassTile';
+export { AIPromptTile, BaseTile, GlassTile };

package/lib/data/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @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.
+ */
+export const tileDropdownData: {
+    id: string;
+    text: string;
+}[];
+export const headerTiles: ({
+    id: number;
+    name: string;
+    tiles: ({
+        id: string;
+        href: string;
+        title: string;
+        mainIcon: string;
+        subtitle?: undefined;
+    } | {
+        id: string;
+        href: string;
+        title: string;
+        subtitle: string;
+        mainIcon: string;
+    })[];
+} | {
+    id: number;
+    name: string;
+    tiles: ({
+        id: string;
+        href: string;
+        title: string;
+        subtitle: string;
+        mainIcon: string;
+        secondaryIcon?: undefined;
+    } | {
+        id: string;
+        href: string;
+        title: string;
+        mainIcon: string;
+        secondaryIcon: string;
+        subtitle?: undefined;
+    })[];
+})[];