@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

package/cjs/core/Footer/Footer.js

@@ -1,79 +1,54 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Footer = exports.defaultFooterElements = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const FooterItem_js_1 = require("./FooterItem.js");
-const FooterSeparator_js_1 = require("./FooterSeparator.js");
-const FooterList_js_1 = require("./FooterList.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const FooterItem_js_1 = require('./FooterItem.js');
+const FooterSeparator_js_1 = require('./FooterSeparator.js');
+const FooterList_js_1 = require('./FooterList.js');
 const footerTranslations = {
-    cookies: 'Cookies',
-    legalNotices: 'Legal notices',
-    privacy: 'Privacy',
-    termsOfService: 'Terms of service',
-    termsOfUse: 'Terms of use',
+  cookies: 'Cookies',
+  legalNotices: 'Legal notices',
+  privacy: 'Privacy',
+  termsOfService: 'Terms of service',
+  termsOfUse: 'Terms of use',
 };
 exports.defaultFooterElements = [
-    {
-        key: 'copyright',
-        title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`,
-    },
-    {
-        key: 'termsOfService',
-        title: footerTranslations.termsOfService,
-        url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
-    },
-    {
-        key: 'privacy',
-        title: footerTranslations.privacy,
-        url: 'https://www.bentley.com/en/privacy-policy',
-    },
-    {
-        key: 'termsOfUse',
-        title: footerTranslations.termsOfUse,
-        url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
-    },
-    {
-        key: 'cookies',
-        title: footerTranslations.cookies,
-        url: 'https://www.bentley.com/en/cookie-policy',
-    },
-    {
-        key: 'legalNotices',
-        title: footerTranslations.legalNotices,
-        url: 'https://connect.bentley.com/Legal',
-    },
+  {
+    key: 'copyright',
+    title: `© ${new Date().getFullYear()} Bentley Systems, Incorporated`,
+  },
+  {
+    key: 'termsOfService',
+    title: footerTranslations.termsOfService,
+    url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
+  },
+  {
+    key: 'privacy',
+    title: footerTranslations.privacy,
+    url: 'https://www.bentley.com/en/privacy-policy',
+  },
+  {
+    key: 'termsOfUse',
+    title: footerTranslations.termsOfUse,
+    url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
+  },
+  {
+    key: 'cookies',
+    title: footerTranslations.cookies,
+    url: 'https://www.bentley.com/en/cookie-policy',
+  },
+  {
+    key: 'legalNotices',
+    title: footerTranslations.legalNotices,
+    url: 'https://connect.bentley.com/Legal',
+  },
 ];
 /**
  * Footer element with all needed legal and info links.
@@ -88,34 +63,73 @@ exports.defaultFooterElements = [
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-exports.Footer = Object.assign((props) => {
-    const { children, customElements, translatedTitles, className, ...rest } = props;
+exports.Footer = Object.assign(
+  (props) => {
+    const { children, customElements, translatedTitles, className, ...rest } =
+      props;
     const titles = { ...footerTranslations, ...translatedTitles };
     const translatedElements = exports.defaultFooterElements.map((element) => {
-        if (element.key && titles.hasOwnProperty(element.key)) {
-            const key = element.key;
-            return {
-                ...element,
-                title: titles[key],
-            };
-        }
-        return element;
+      if (element.key && titles.hasOwnProperty(element.key)) {
+        const key = element.key;
+        return {
+          ...element,
+          title: titles[key],
+        };
+      }
+      return element;
     });
     let elements = translatedElements;
     if (customElements) {
-        elements =
-            typeof customElements === 'function'
-                ? customElements(translatedElements)
-                : [...translatedElements, ...customElements];
+      elements =
+        typeof customElements === 'function'
+          ? customElements(translatedElements)
+          : [...translatedElements, ...customElements];
     }
-    return (React.createElement(index_js_1.Box, { as: 'footer', className: (0, classnames_1.default)('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList_js_1.FooterList, null, elements.map((element, index) => {
-        return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
-            index > 0 && React.createElement(FooterSeparator_js_1.FooterSeparator, null),
-            React.createElement(FooterItem_js_1.FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
-    })))));
-}, {
+    return React.createElement(
+      index_js_1.Box,
+      {
+        as: 'footer',
+        className: (0, classnames_1.default)('iui-legal-footer', className),
+        ...rest,
+      },
+      children
+        ? children
+        : React.createElement(
+            FooterList_js_1.FooterList,
+            null,
+            elements.map((element, index) => {
+              return React.createElement(
+                React.Fragment,
+                { key: element.key || `${element.title}-${index}` },
+                index > 0 &&
+                  React.createElement(
+                    FooterSeparator_js_1.FooterSeparator,
+                    null,
+                  ),
+                React.createElement(
+                  FooterItem_js_1.FooterItem,
+                  null,
+                  element.url
+                    ? React.createElement(
+                        'a',
+                        {
+                          href: element.url,
+                          target: '_blank',
+                          rel: 'noreferrer',
+                        },
+                        element.title,
+                      )
+                    : element.title,
+                ),
+              );
+            }),
+          ),
+    );
+  },
+  {
     List: FooterList_js_1.FooterList,
     Item: FooterItem_js_1.FooterItem,
     Separator: FooterSeparator_js_1.FooterSeparator,
-});
+  },
+);
 exports.default = exports.Footer;

package/cjs/core/Footer/FooterItem.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.FooterItem = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require('../utils/index.js');
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/cjs/core/Footer/FooterList.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.FooterList = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require('../utils/index.js');
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/cjs/core/Footer/FooterSeparator.js

@@ -1,15 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.FooterSeparator = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require('../utils/index.js');
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */
-exports.FooterSeparator = index_js_1.polymorphic.li('iui-legal-footer-separator', {
+exports.FooterSeparator = index_js_1.polymorphic.li(
+  'iui-legal-footer-separator',
+  {
     'aria-hidden': true,
-});
+  },
+);
 exports.default = exports.FooterSeparator;

package/cjs/core/Footer/index.js

@@ -1,11 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.defaultFooterElements = exports.Footer = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Footer_js_1 = require("./Footer.js");
-Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return Footer_js_1.Footer; } });
-Object.defineProperty(exports, "defaultFooterElements", { enumerable: true, get: function () { return Footer_js_1.defaultFooterElements; } });
+var Footer_js_1 = require('./Footer.js');
+Object.defineProperty(exports, 'Footer', {
+  enumerable: true,
+  get: function () {
+    return Footer_js_1.Footer;
+  },
+});
+Object.defineProperty(exports, 'defaultFooterElements', {
+  enumerable: true,
+  get: function () {
+    return Footer_js_1.defaultFooterElements;
+  },
+});
 exports.default = './Footer';

package/cjs/core/Header/Header.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type HeaderTranslations = {
+type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.
      */
     moreOptions: string;
 };
-declare type HeaderProps = {
+type HeaderProps = {
     /**
      * Application logo.
      * (expects `HeaderLogo`)

package/cjs/core/Header/Header.js

@@ -1,43 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Header = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../Buttons/index.js");
-const index_js_2 = require("../utils/index.js");
-const index_js_3 = require("../DropdownMenu/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../Buttons/index.js');
+const index_js_2 = require('../utils/index.js');
+const index_js_3 = require('../DropdownMenu/index.js');
 const defaultTranslations = {
-    moreOptions: 'More options',
+  moreOptions: 'More options',
 };
 /**
  * Application header
@@ -67,18 +42,63 @@ const defaultTranslations = {
  * />
  */
 exports.Header = React.forwardRef((props, forwardedRef) => {
-    const { appLogo, breadcrumbs, isSlim = false, actions, menuItems, translatedStrings, className, children, ...rest } = props;
-    const headerTranslations = { ...defaultTranslations, ...translatedStrings };
-    return (React.createElement(index_js_2.Box, { as: 'header', className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ref: forwardedRef, ...rest },
-        React.createElement(index_js_2.Box, { className: 'iui-page-header-left' },
-            appLogo,
-            breadcrumbs && React.createElement(index_js_2.Box, { className: 'iui-page-header-divider' }),
-            breadcrumbs),
-        children && React.createElement(index_js_2.Box, { className: 'iui-page-header-center' }, children),
-        React.createElement(index_js_2.Box, { className: 'iui-page-header-right' },
-            actions,
-            menuItems && (React.createElement(index_js_3.DropdownMenu, { menuItems: menuItems },
-                React.createElement(index_js_1.IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
-                    React.createElement(index_js_2.SvgMoreVertical, { "aria-hidden": true })))))));
+  const {
+    appLogo,
+    breadcrumbs,
+    isSlim = false,
+    actions,
+    menuItems,
+    translatedStrings,
+    className,
+    children,
+    ...rest
+  } = props;
+  const headerTranslations = { ...defaultTranslations, ...translatedStrings };
+  return React.createElement(
+    index_js_2.Box,
+    {
+      as: 'header',
+      className: (0, classnames_1.default)('iui-page-header', className),
+      'data-iui-size': isSlim ? 'slim' : undefined,
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      index_js_2.Box,
+      { className: 'iui-page-header-left' },
+      appLogo,
+      breadcrumbs &&
+        React.createElement(index_js_2.Box, {
+          className: 'iui-page-header-divider',
+        }),
+      breadcrumbs,
+    ),
+    children &&
+      React.createElement(
+        index_js_2.Box,
+        { className: 'iui-page-header-center' },
+        children,
+      ),
+    React.createElement(
+      index_js_2.Box,
+      { className: 'iui-page-header-right' },
+      actions,
+      menuItems &&
+        React.createElement(
+          index_js_3.DropdownMenu,
+          { menuItems: menuItems },
+          React.createElement(
+            index_js_1.IconButton,
+            {
+              styleType: 'borderless',
+              'aria-label': headerTranslations.moreOptions,
+            },
+            React.createElement(index_js_2.SvgMoreVertical, {
+              'aria-hidden': true,
+            }),
+          ),
+        ),
+    ),
+  );
 });
 exports.default = exports.Header;

package/cjs/core/Header/HeaderBasicButton.js

@@ -1,46 +1,45 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.HeaderBasicButton = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 exports.HeaderBasicButton = React.forwardRef((props, ref) => {
-    const { onClick, className, children, style, startIcon, endIcon, styleType, size, ...rest } = props;
-    styleType; // To omit and prevent eslint error.
-    size; // To omit and prevent eslint error.
-    return (React.createElement(index_js_1.Box, { as: 'button', className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: 'button', style: style, ...rest },
-        startIcon,
-        children,
-        endIcon));
+  const {
+    onClick,
+    className,
+    children,
+    style,
+    startIcon,
+    endIcon,
+    styleType,
+    size,
+    ...rest
+  } = props;
+  styleType; // To omit and prevent eslint error.
+  size; // To omit and prevent eslint error.
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'button',
+      className: (0, classnames_1.default)(
+        'iui-header-breadcrumb-button',
+        className,
+      ),
+      onClick: onClick,
+      ref: ref,
+      type: 'button',
+      style: style,
+      ...rest,
+    },
+    startIcon,
+    children,
+    endIcon,
+  );
 });
 exports.default = exports.HeaderBasicButton;

package/cjs/core/Header/HeaderBreadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type HeaderBreadcrumbsProps = {
+type HeaderBreadcrumbsProps = {
     /**
      * Array of elements, chevrons will be put between them.
      * (expects HeaderButton[])

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.HeaderBreadcrumbs = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Header breadcrumbs, adds chevron between each provided items.
  * @example
@@ -45,13 +20,37 @@ const index_js_1 = require("../utils/index.js");
  * />
  */
 exports.HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
-    const { className, items, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'nav', "aria-label": 'breadcrumbs', className: (0, classnames_1.default)('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
-            ...previous,
-            current,
-            index !== items.length - 1 && (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },
-                React.createElement(index_js_1.SvgChevronRight, { key: `chevron${index}`, "aria-hidden": true, className: 'iui-chevron' }))),
-        ], []))));
+  const { className, items, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'nav',
+      'aria-label': 'breadcrumbs',
+      className: (0, classnames_1.default)('iui-header-breadcrumbs', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      index_js_1.Box,
+      { as: 'ol', className: 'iui-header-breadcrumbs-list' },
+      items.reduce(
+        (previous, current, index) => [
+          ...previous,
+          current,
+          index !== items.length - 1 &&
+            React.createElement(
+              index_js_1.Box,
+              { as: 'li', className: 'iui-breadcrumbs-separator', key: index },
+              React.createElement(index_js_1.SvgChevronRight, {
+                key: `chevron${index}`,
+                'aria-hidden': true,
+                className: 'iui-chevron',
+              }),
+            ),
+        ],
+        [],
+      ),
+    ),
+  );
 });
 exports.default = exports.HeaderBreadcrumbs;

package/cjs/core/Header/HeaderButton.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ButtonProps } from '../Buttons/Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
-declare type HeaderButtonProps = {
+type HeaderButtonProps = {
     /**
      * Main label of the header button.
      */