@alma-oss/spirit-web-react 4.3.0 → 4.4.2

package/components/Header/Header.cjs

@@ -1,1343 +0,0 @@
-'use strict';
-
-var classNames = require('classnames');
-var React = require('react');
-var spiritDesignTokens = require('@alma-oss/spirit-design-tokens');
-var htmlDomParser = require('html-dom-parser');
-var domToReactLib = require('html-react-parser/lib/dom-to-react');
-
-const ENVIRONMENTS = {
-    PRODUCTION: 'production',
-};
-const isProduction = () => process.env.NODE_ENV === ENVIRONMENTS.PRODUCTION;
-
-const warning = (condition, message) => {
-    if (!isProduction()) {
-        const text = `Warning: ${message}`;
-        if (typeof console !== 'undefined') {
-            console.warn(text);
-        }
-        try {
-            throw Error(text);
-        }
-        catch (x) {
-        }
-    }
-};
-
-const CLASS_NAME_OPEN = 'is-open';
-
-var __rest$j = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-function createUppercaseKeyDictionary(obj) {
-    return Object.fromEntries(Object.keys(obj).map((key) => [key.toUpperCase(), key]));
-}
-const AlignmentX = {
-    LEFT: 'left',
-    CENTER: 'center',
-    RIGHT: 'right',
-};
-Object.assign({ SPACE_BETWEEN: 'space-between', STRETCH: 'stretch' }, AlignmentX);
-const AlignmentY = {
-    TOP: 'top',
-    CENTER: 'center',
-    BOTTOM: 'bottom',
-};
-Object.assign({ BASELINE: 'baseline', STRETCH: 'stretch' }, AlignmentY);
-createUppercaseKeyDictionary(spiritDesignTokens.componentColors.button);
-createUppercaseKeyDictionary(spiritDesignTokens.emotionColors);
-const TextColors = createUppercaseKeyDictionary(spiritDesignTokens.textColors);
-const Sizes = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large',
-};
-Object.assign(Object.assign({ XSMALL: 'xsmall' }, Sizes), { XLARGE: 'xlarge' });
-const _a = createUppercaseKeyDictionary(spiritDesignTokens.containers), { MAXWIDTH, PADDING } = _a; __rest$j(_a, ["MAXWIDTH", "PADDING"]);
-
-const Direction = {
-    HORIZONTAL: 'horizontal',
-    VERTICAL: 'vertical',
-};
-Object.assign(Object.assign({}, Direction), { HORIZONTAL_REVERSED: 'horizontal-reversed' });
-var DirectionAxis;
-(function (DirectionAxis) {
-    DirectionAxis["X"] = "x";
-    DirectionAxis["Y"] = "y";
-})(DirectionAxis || (DirectionAxis = {}));
-
-const SpacingStyleProp = {
-    margin: 'm',
-    marginTop: 'mt',
-    marginRight: 'mr',
-    marginBottom: 'mb',
-    marginLeft: 'ml',
-    marginX: 'mx',
-    marginY: 'my',
-};
-const DisplayStyleProps = {
-    hideOn: 'd',
-    hideFrom: 'd',
-};
-const ThemeStyleProps = {
-    theme: '',
-};
-
-const defaultContext$2 = undefined;
-const ClassNamePrefixContext = React.createContext(defaultContext$2);
-ClassNamePrefixContext.Provider;
-ClassNamePrefixContext.Consumer;
-
-Object.assign(Object.assign({}, Sizes), { AUTO: 'auto' });
-
-const STYLE_SPACING_AUTO = 'auto';
-
-const BREAKPOINT_MOBILE = 'mobile';
-
-var SpiritBreakpoints;
-(function (SpiritBreakpoints) {
-    SpiritBreakpoints["TABLET"] = "tablet";
-    SpiritBreakpoints["DESKTOP"] = "desktop";
-})(SpiritBreakpoints || (SpiritBreakpoints = {}));
-
-const isNullish = (value) => value == null;
-const isEmptyString = (value) => typeof value === 'string' && value.trim() === '';
-const isEmptyArray = (value) => Array.isArray(value) && value.length === 0;
-const isEmptyObject = (value) => typeof value === 'object' && value !== null && Object.keys(value).length === 0;
-const isEnumerable = (value) => {
-    if (typeof value === 'object' && value !== null) {
-        for (const key in value) {
-            if (Object.hasOwnProperty.call(value, key)) {
-                return true;
-            }
-        }
-    }
-    return false;
-};
-const isEmpty = (value) => {
-    if (isNullish(value)) {
-        return true;
-    }
-    if (isEmptyString(value)) {
-        return true;
-    }
-    if (isEmptyArray(value)) {
-        return true;
-    }
-    if (isEmptyObject(value)) {
-        return true;
-    }
-    if (isEnumerable(value)) {
-        return false;
-    }
-    return false;
-};
-
-const applyClassNamePrefix = (prefix) => (className) => prefix != null && prefix !== '' ? `${prefix}-${className}` : className;
-const applyColor = (color) => (className) => `${className}--${color}`;
-const applySize = (size) => (className) => `${className}--${size}`;
-
-const compose = (...functions) => functions.reduceRight((prevFunction, nextFunction) => (...args) => nextFunction(prevFunction(...args)), (value) => value);
-
-const htmlReactParser = (html) => {
-    if (typeof html !== 'string') {
-        throw new TypeError('First argument must be a string');
-    }
-    if (!html) {
-        return [];
-    }
-    const htmlToDOM = typeof htmlDomParser.default === 'function' ? htmlDomParser.default : htmlDomParser;
-    const domToReact = typeof domToReactLib.default === 'function' ? domToReactLib.default : domToReactLib;
-    return domToReact(htmlToDOM(html));
-};
-
-function hasSpiritComponent(elementTag) {
-    return typeof elementTag !== 'string' && elementTag !== null && 'spiritComponent' in elementTag;
-}
-function mergeStyleProps(ElementTag, styleProps) {
-    const isSpiritComponent = hasSpiritComponent(ElementTag);
-    const isNonNullableObject = (styleProp) => typeof styleProp === 'object' && styleProp !== null;
-    const extractClassNames = (styleProp) => {
-        if (typeof styleProp === 'string') {
-            return [styleProp];
-        }
-        if (isNonNullableObject(styleProp)) {
-            return [styleProp.className, styleProp.UNSAFE_className].filter(Boolean);
-        }
-        return [];
-    };
-    const extractCssVariables = (styleProp) => isNonNullableObject(styleProp)
-        ? Object.entries(styleProp)
-            .filter(([key]) => key.startsWith('--'))
-            .reduce((extractedCssVariable, [key, value]) => (Object.assign(Object.assign({}, extractedCssVariable), { [key]: value })), {})
-        : {};
-    const extractCssStylesAndVariables = (cssProperties, styleProp) => {
-        if (!isNonNullableObject(styleProp)) {
-            return cssProperties;
-        }
-        const typedStyleProp = styleProp;
-        const styles = typedStyleProp.style || typedStyleProp.UNSAFE_style || {};
-        const cssVariables = extractCssVariables(styleProp);
-        return Object.assign(Object.assign(Object.assign({}, cssProperties), styles), cssVariables);
-    };
-    const mergedClasses = Object.values(styleProps).flatMap(extractClassNames).filter(Boolean).join(' ');
-    const mergedStyles = Object.values(styleProps)
-        .filter(isNonNullableObject)
-        .reduce(extractCssStylesAndVariables, {});
-    return isSpiritComponent
-        ? { UNSAFE_className: mergedClasses, UNSAFE_style: mergedStyles }
-        : { className: mergedClasses, style: mergedStyles };
-}
-
-const isSSR = typeof window === 'undefined';
-
-const camelCaseToKebabCase = (input) => input.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
-const CLASS_SEPARATOR = '-';
-const normalizeSpacingValue = (value) => value === STYLE_SPACING_AUTO ? STYLE_SPACING_AUTO : value.replace(/[^0-9]/g, '');
-const isSpaceToken = (value) => typeof value === 'string' && value.startsWith('space-');
-const getUtilityValue = (value) => (isSpaceToken(value) ? normalizeSpacingValue(value) : value);
-const isKeyIncluded = (object, key) => Object.keys(object).includes(key);
-const processBreakpointProperties = (utilityName, propValue, prefix) => Object.keys(propValue).reduce((accumulatedBreakpointUtilities, breakpoint) => {
-    const breakpointValue = propValue[breakpoint];
-    if (typeof breakpointValue === 'string') {
-        const utilityValue = getUtilityValue(breakpointValue);
-        const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `${CLASS_SEPARATOR}${breakpoint}`;
-        accumulatedBreakpointUtilities.push(applyClassNamePrefix(prefix)(`${utilityName}${infix}${CLASS_SEPARATOR}${utilityValue}`));
-    }
-    return accumulatedBreakpointUtilities;
-}, []);
-const processHideOnProperty = (utilityName, propValue, prefix) => {
-    const breakpoints = Array.isArray(propValue) ? propValue : [propValue];
-    return breakpoints.map((breakpoint) => applyClassNamePrefix(prefix)(`${utilityName}${CLASS_SEPARATOR}only${CLASS_SEPARATOR}${breakpoint}${CLASS_SEPARATOR}none`));
-};
-const processHideFromProperty = (utilityName, propValue, prefix) => {
-    const breakpoint = propValue;
-    const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `${CLASS_SEPARATOR}${breakpoint}`;
-    return [applyClassNamePrefix(prefix)(`${utilityName}${infix}${CLASS_SEPARATOR}none`)];
-};
-const processDisplayProperties = (utilityKey, utilityName, propValue, prefix) => {
-    switch (utilityKey) {
-        case 'hideOn':
-            return processHideOnProperty(utilityName, propValue, prefix);
-        case 'hideFrom':
-            return processHideFromProperty(utilityName, propValue, prefix);
-        default:
-            return [];
-    }
-};
-const processProperties = (utilityKey, utilityName, propValue, prefix) => {
-    if (utilityName === ThemeStyleProps.theme) {
-        if (typeof propValue !== 'string') {
-            return [];
-        }
-        const themeClassName = camelCaseToKebabCase(propValue);
-        return [applyClassNamePrefix(prefix)(themeClassName)];
-    }
-    if (utilityKey in DisplayStyleProps) {
-        return processDisplayProperties(utilityKey, utilityName, propValue, prefix);
-    }
-    if (typeof propValue === 'boolean') {
-        return propValue ? [applyClassNamePrefix(prefix)(utilityName)] : [];
-    }
-    if (typeof propValue === 'string') {
-        return [applyClassNamePrefix(prefix)(`${utilityName}-${getUtilityValue(propValue)}`)];
-    }
-    return processBreakpointProperties(utilityName, propValue, prefix);
-};
-const isStylePropProcessable = (styleProps, stylePropKey, stylePropValue, options = { includesKey: true }) => {
-    const isStylePropKeyIncluded = isKeyIncluded(styleProps, stylePropKey);
-    if (options.includesKey) {
-        return isStylePropKeyIncluded && !isEmpty(stylePropValue);
-    }
-    return !isStylePropKeyIncluded;
-};
-const useStyleUtilities = (props, prefix = '', additionalProps = {}) => {
-    const styleProps = Object.assign(Object.assign(Object.assign(Object.assign({}, SpacingStyleProp), DisplayStyleProps), ThemeStyleProps), additionalProps);
-    const propEntries = Object.entries(props);
-    const styleUtilities = propEntries.reduce((accumulatedUtilities, [key, propValue]) => {
-        if (isStylePropProcessable(styleProps, key, propValue)) {
-            const utilityName = styleProps[key];
-            return [
-                ...accumulatedUtilities,
-                ...processProperties(key, utilityName, propValue, prefix),
-            ];
-        }
-        return accumulatedUtilities;
-    }, []);
-    const updatedProps = propEntries.reduce((accumulatedProps, [key, propValue]) => {
-        if (isStylePropProcessable(styleProps, key, propValue, { includesKey: false })) {
-            return Object.assign(Object.assign({}, accumulatedProps), { [key]: propValue });
-        }
-        return accumulatedProps;
-    }, {});
-    return {
-        styleUtilities,
-        props: updatedProps,
-    };
-};
-
-var __rest$i = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-function useStyleProps(props, additionalUtilities) {
-    const classNamePrefix = React.useContext(ClassNamePrefixContext);
-    const { UNSAFE_className, UNSAFE_style } = props, otherProps = __rest$i(props, ["UNSAFE_className", "UNSAFE_style"]);
-    const styleUtilitiesConfig = Object.assign({ theme: ThemeStyleProps.theme }, ({}));
-    const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix, styleUtilitiesConfig);
-    const style = Object.assign({}, UNSAFE_style);
-    if (modifiedProps.className) {
-        warning(false, 'The className prop is unsafe and is unsupported in Spirit Web React. ' +
-            'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
-            'Note that this may break in future versions due to DOM structure changes.');
-        delete modifiedProps.className;
-    }
-    if (modifiedProps.style) {
-        warning(false, 'The style prop is unsafe and is unsupported in Spirit Web React. ' +
-            'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
-            'Note that this may break in future versions due to DOM structure changes.');
-        delete modifiedProps.style;
-    }
-    const styleProps = {
-        style: Object.keys(style).length > 0 ? style : undefined,
-        className: classNames(UNSAFE_className, ...styleUtilities) || undefined,
-    };
-    return {
-        styleProps,
-        props: modifiedProps,
-    };
-}
-
-const useIsomorphicLayoutEffect = !isSSR ? React.useLayoutEffect : React.useEffect;
-
-const EVENT_CANCEL = 'cancel';
-const EVENT_KEYDOWN = 'keydown';
-const EVENT_KEY = 'Escape';
-const useCancelEvent = (ref, callback, closeOnEscapeKeyDown = true, isOpen = false) => {
-    const handleCancel = React.useCallback((event) => {
-        if (!ref || !callback) {
-            return;
-        }
-        if (event.defaultPrevented) {
-            return;
-        }
-        event.preventDefault();
-        if (callback && closeOnEscapeKeyDown) {
-            callback(event);
-        }
-    }, [ref, callback, closeOnEscapeKeyDown]);
-    const handleKeyDown = React.useCallback((event) => {
-        if (event.key === EVENT_KEY && !closeOnEscapeKeyDown && isOpen) {
-            event.preventDefault();
-        }
-    }, [closeOnEscapeKeyDown, isOpen]);
-    useIsomorphicLayoutEffect(() => {
-        const node = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (node) {
-            node.addEventListener(EVENT_CANCEL, handleCancel);
-            document.addEventListener(EVENT_KEYDOWN, handleKeyDown);
-            return () => {
-                node.removeEventListener(EVENT_CANCEL, handleCancel);
-                document.removeEventListener(EVENT_KEYDOWN, handleKeyDown);
-            };
-        }
-        return () => undefined;
-    }, [ref, handleCancel]);
-    return handleCancel;
-};
-
-const useClassNamePrefix = (className) => {
-    const classNamePrefix = React.useContext(ClassNamePrefixContext);
-    let prefixedClassName = className;
-    if (className && classNamePrefix) {
-        prefixedClassName = applyClassNamePrefix(classNamePrefix)(className);
-    }
-    else if (classNamePrefix) {
-        prefixedClassName = classNamePrefix;
-    }
-    return prefixedClassName;
-};
-
-const useClick = (isDisabled, onClick) => React.useCallback((event) => {
-    if (isDisabled) {
-        event.preventDefault();
-        return;
-    }
-    if (onClick) {
-        onClick(event);
-    }
-}, [isDisabled, onClick]);
-
-const useClickOutside = ({ ref, callback }) => {
-    const stateRef = React.useRef({
-        mouseDownTarget: null,
-    });
-    const clickHandler = React.useCallback((event) => {
-        const state = stateRef.current;
-        if (!ref ||
-            !callback ||
-            event.defaultPrevented ||
-            (ref.current && ref.current.contains(state.mouseDownTarget))) {
-            return;
-        }
-        if (ref.current &&
-            !ref.current.contains(event === null || event === void 0 ? void 0 : event.target) &&
-            callback) {
-            callback(event);
-        }
-    }, [ref, callback]);
-    const onMouseDown = (event) => {
-        stateRef.current.mouseDownTarget = event.target;
-    };
-    useIsomorphicLayoutEffect(() => {
-        document.addEventListener('mousedown', onMouseDown, { capture: true });
-        document.addEventListener('click', clickHandler, { capture: true });
-        return () => {
-            document.removeEventListener('mousedown', onMouseDown, { capture: true });
-            document.removeEventListener('click', clickHandler, { capture: true });
-        };
-    }, [clickHandler]);
-};
-
-const useDeprecationMessage = ({ method = 'component', trigger, componentName, componentProps, propertyProps, customText, }) => {
-    const messageBase = `Deprecation warning (${componentName}):`;
-    React.useEffect(() => {
-        const isExecutable = trigger && componentName && process.env.NODE_ENV === 'development';
-        let message;
-        let hasProps;
-        switch (method) {
-            case 'property':
-                if (propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.delete) {
-                    message = `${messageBase} "${propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.deprecatedName}" property will be deleted in the next major version.`;
-                }
-                else if ((propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.deprecatedValue) && (propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.newValue) && (propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.propertyName)) {
-                    message = `${messageBase} The "${propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.deprecatedValue}" value for "${propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.propertyName}" property will be renamed to "${propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.newValue}" in the next major version.`;
-                }
-                else {
-                    message = `${messageBase} "${propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.deprecatedName}" property will be replaced in the next major version. Please use "${propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.newName}" instead. ♻️️`;
-                }
-                hasProps = !!propertyProps;
-                break;
-            case 'custom':
-                message = `${messageBase} ${customText}`;
-                hasProps = true;
-                break;
-            case 'component':
-            default:
-                if (componentProps === null || componentProps === void 0 ? void 0 : componentProps.delete) {
-                    message = `${messageBase} The component and its subcomponents will be deleted in the next major version.`;
-                }
-                else {
-                    message = `${messageBase} The component and its subcomponents will be renamed to "${componentProps === null || componentProps === void 0 ? void 0 : componentProps.newName}" in the next major version.`;
-                }
-                hasProps = !!componentProps;
-                break;
-        }
-        if (message && isExecutable && hasProps) {
-            warning(false, message);
-        }
-    }, []);
-};
-
-const defaultContext$1 = undefined;
-const IconsContext = React.createContext(defaultContext$1);
-IconsContext.Provider;
-IconsContext.Consumer;
-
-const useIcon = (name) => {
-    const icons = React.useContext(IconsContext);
-    if (icons != null && icons[name] != null) {
-        return icons[name];
-    }
-    warning(false, `The ${name} icon is missing from your assets or icon map provided by the IconsProvider. Please make sure you have provided all icons needed by used components.`);
-    return '';
-};
-
-const useLastActiveFocus = (isOpen) => {
-    const lastActiveElement = React.useRef(null);
-    React.useEffect(() => {
-        if (isOpen) {
-            lastActiveElement.current = document.activeElement;
-        }
-        else if (lastActiveElement === null || lastActiveElement === void 0 ? void 0 : lastActiveElement.current) {
-            lastActiveElement.current.focus();
-        }
-    }, [isOpen]);
-};
-
-const CLASSNAME_SCROLLING_DISABLED = 'is-scrolling-disabled';
-const disableScroll = () => {
-    const { body } = document;
-    const scrollBarWidth = window.innerWidth - body.clientWidth;
-    body.style.paddingRight = `${scrollBarWidth}px`;
-    body.classList.add(CLASSNAME_SCROLLING_DISABLED);
-};
-const enableScroll = () => {
-    const { body } = document;
-    body.style.paddingRight = '';
-    body.classList.remove(CLASSNAME_SCROLLING_DISABLED);
-};
-const useScrollControl = (ref, isOpen) => {
-    React.useEffect(() => {
-        if (isOpen) {
-            disableScroll();
-        }
-        else if (ref.current && !ref.current.open) {
-            enableScroll();
-        }
-        return () => {
-            enableScroll();
-        };
-    }, [isOpen, ref]);
-};
-
-const SYMMETRICAL_CLASS_SUFFIX = '--symmetrical';
-const NON_SYMMETRICAL_CLASS_SUFFIX = '--asymmetrical';
-function getSymmetryClassNamesReducer(componentClass, isSymmetrical) {
-    return (acc, breakpoint) => {
-        if (breakpoint in isSymmetrical) {
-            const value = isSymmetrical[breakpoint];
-            const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `--${breakpoint}`;
-            if (value) {
-                return {
-                    classes: [...acc.classes, `${componentClass}${infix}${SYMMETRICAL_CLASS_SUFFIX}`],
-                    wasSymmetrical: true,
-                };
-            }
-            if (acc.wasSymmetrical) {
-                return {
-                    classes: [...acc.classes, `${componentClass}${infix}${NON_SYMMETRICAL_CLASS_SUFFIX}`],
-                    wasSymmetrical: acc.wasSymmetrical,
-                };
-            }
-        }
-        return acc;
-    };
-}
-function useSymmetry(componentClass, isSymmetrical) {
-    if (typeof isSymmetrical !== 'object' || isSymmetrical === null) {
-        return {
-            isSymmetricalActive: isSymmetrical === true,
-            symmetricalClassName: isSymmetrical ? `${componentClass}${SYMMETRICAL_CLASS_SUFFIX}` : '',
-        };
-    }
-    const { classes } = Object.keys(spiritDesignTokens.breakpoints).reduce(getSymmetryClassNamesReducer(componentClass, isSymmetrical), { classes: [], wasSymmetrical: false });
-    return {
-        isSymmetricalActive: Object.values(isSymmetrical).includes(true),
-        symmetricalClassName: classes.join(' '),
-    };
-}
-
-const HEADER_COLOR_DEFAULT = 'primary';
-const HEADER_ACTIONS_COLOR_DEFAULT = 'primary';
-const HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT = 'Close';
-const HEADER_MENU_TOGGLE_LABEL_DEFAULT = 'Menu';
-
-const useHeaderStyleProps = ({ actionsColor = HEADER_ACTIONS_COLOR_DEFAULT, color = HEADER_COLOR_DEFAULT, hasActionsAtEnd, isCurrentLink, isSimple, } = {
-    actionsColor: HEADER_ACTIONS_COLOR_DEFAULT,
-    color: HEADER_COLOR_DEFAULT,
-    hasActionsAtEnd: false,
-    isCurrentLink: false,
-    isSimple: false,
-}) => {
-    const headerClass = useClassNamePrefix('Header');
-    const headerColorClass = `${headerClass}--${color}`;
-    const headerSimpleClass = `${headerClass}--simple`;
-    const headerNavClass = `${headerClass}Nav`;
-    const headerNavItemClass = `${headerClass}NavItem`;
-    const headerLinkClass = `${headerClass}Link`;
-    const headerLinkCurrentClass = `${headerLinkClass}--current`;
-    const headerDesktopActionsClass = `${headerClass}DesktopActions`;
-    const headerDesktopActionsAtEndClass = `${headerDesktopActionsClass}--end`;
-    const headerMobileActionsClass = `${headerClass}MobileActions`;
-    const headerDialogClass = `${headerClass}Dialog`;
-    const headerDialogPanelClass = `${headerDialogClass}__panel`;
-    const headerDialogContentClass = `${headerDialogClass}__content`;
-    const headerDialogActionsClass = `${headerClass}DialogActions`;
-    const headerDialogActionsColorClass = `${headerDialogActionsClass}--${actionsColor}`;
-    const headerDialogCloseButtonClass = `${headerClass}DialogCloseButton`;
-    const headerDialogLinkClass = `${headerClass}DialogLink`;
-    const headerDialogLinkCurrentClass = `${headerDialogLinkClass}--current`;
-    const headerDialogNavClass = `${headerClass}DialogNav`;
-    const headerDialogNavItemClass = `${headerClass}DialogNavItem`;
-    const headerDialogTextClass = `${headerClass}DialogText`;
-    const classProps = {
-        root: classNames(headerClass, headerColorClass, { [headerSimpleClass]: isSimple }),
-        headerButton: headerLinkClass,
-        headerDesktopActions: classNames(headerDesktopActionsClass, { [headerDesktopActionsAtEndClass]: hasActionsAtEnd }),
-        headerDialog: {
-            root: headerDialogClass,
-            panel: headerDialogPanelClass,
-            content: headerDialogContentClass,
-        },
-        headerDialogActions: classNames(headerDialogActionsClass, headerDialogActionsColorClass),
-        headerDialogButton: headerDialogLinkClass,
-        headerDialogCloseButton: headerDialogCloseButtonClass,
-        headerDialogLink: classNames(headerDialogLinkClass, { [headerDialogLinkCurrentClass]: isCurrentLink }),
-        headerDialogNav: headerDialogNavClass,
-        headerDialogNavItem: headerDialogNavItemClass,
-        headerDialogText: headerDialogTextClass,
-        headerLink: classNames(headerLinkClass, { [headerLinkCurrentClass]: isCurrentLink }),
-        headerMobileActions: headerMobileActionsClass,
-        headerNav: headerNavClass,
-        headerNavItem: headerNavItemClass,
-    };
-    return {
-        classProps,
-    };
-};
-
-var __rest$h = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const Header = (props) => {
-    const { children, color = HEADER_COLOR_DEFAULT, isSimple } = props, restProps = __rest$h(props, ["children", "color", "isSimple"]);
-    const { classProps } = useHeaderStyleProps({ color, isSimple });
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    useDeprecationMessage({
-        method: 'custom',
-        trigger: true,
-        componentName: 'Header',
-        customText: `The component will be removed in the next major version. Component is replaced by the current implementation of UNSTABLE_Header.
-    Please see the composition of the UNSTABLE_Header, Drawer and Navigation components.`,
-    });
-    return (React.createElement("header", Object.assign({}, otherProps, { className: classNames(classProps.root, styleProps.className), style: styleProps.style }), children));
-};
-Header.spiritComponent = 'Header';
-
-const HeaderButton = (props) => {
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(props);
-    return (React.createElement("button", Object.assign({}, otherProps, { type: "button", className: classNames(classProps.headerButton, styleProps.className), style: styleProps.style })));
-};
-HeaderButton.spiritComponent = 'HeaderButton';
-
-var __rest$g = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const defaultProps$3 = {
-    isAtEnd: false,
-};
-const HeaderDesktopActions = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$3), props);
-    const { isAtEnd } = propsWithDefaults, restProps = __rest$g(propsWithDefaults, ["isAtEnd"]);
-    const { classProps } = useHeaderStyleProps({ hasActionsAtEnd: isAtEnd });
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    return (React.createElement("nav", Object.assign({}, otherProps, { className: classNames(classProps.headerDesktopActions, styleProps.className), style: styleProps.style })));
-};
-HeaderDesktopActions.spiritComponent = 'HeaderDesktopActions';
-
-const TRANSITION_FALLBACK_TIMEOUT = 300;
-
-const useDialog = (ref, isOpen) => {
-    const closeTimeoutRef = React.useRef(null);
-    const clearCloseTimeout = React.useCallback(() => {
-        if (closeTimeoutRef.current !== null) {
-            clearTimeout(closeTimeoutRef.current);
-            closeTimeoutRef.current = null;
-        }
-    }, []);
-    const scheduleDialogClose = React.useCallback((dialogNode) => {
-        clearCloseTimeout();
-        closeTimeoutRef.current = setTimeout(() => {
-            if (dialogNode.open && dialogNode.close) {
-                dialogNode.close();
-            }
-        }, TRANSITION_FALLBACK_TIMEOUT);
-    }, [clearCloseTimeout]);
-    const handleTransitionEnd = React.useCallback((event) => {
-        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (dialogNode && event.target === dialogNode && !isOpen && dialogNode.open && dialogNode.close) {
-            clearCloseTimeout();
-            dialogNode.close();
-        }
-    }, [isOpen, ref, clearCloseTimeout]);
-    useScrollControl(ref, isOpen);
-    const setOpenClass = React.useCallback((shouldAdd) => {
-        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (dialogNode === null || dialogNode === void 0 ? void 0 : dialogNode.classList) {
-            if (shouldAdd) {
-                dialogNode.classList.add(CLASS_NAME_OPEN);
-            }
-            else {
-                dialogNode.classList.remove(CLASS_NAME_OPEN);
-            }
-        }
-    }, [ref]);
-    React.useEffect(() => {
-        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (dialogNode) {
-            if (isOpen) {
-                clearCloseTimeout();
-                if (!dialogNode.open && dialogNode.showModal) {
-                    dialogNode.showModal();
-                    setOpenClass(true);
-                }
-            }
-            else if (!isOpen && dialogNode.open) {
-                setOpenClass(false);
-                scheduleDialogClose(dialogNode);
-            }
-        }
-        return () => {
-            clearCloseTimeout();
-        };
-    }, [isOpen, ref, setOpenClass, clearCloseTimeout, scheduleDialogClose]);
-    const openDialog = () => {
-        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (dialogNode) {
-            clearCloseTimeout();
-            if (!dialogNode.open && dialogNode.showModal) {
-                dialogNode.showModal();
-                setOpenClass(true);
-            }
-        }
-    };
-    const closeDialog = () => {
-        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (dialogNode && dialogNode.open) {
-            setOpenClass(false);
-            scheduleDialogClose(dialogNode);
-        }
-    };
-    return {
-        openDialog,
-        closeDialog,
-        onTransitionEnd: handleTransitionEnd,
-    };
-};
-
-var __rest$f = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const _Dialog = (props, ref) => {
-    const { children, isOpen, onClose, closeOnBackdropClick = true, closeOnEscapeKeyDown } = props, restProps = __rest$f(props, ["children", "isOpen", "onClose", "closeOnBackdropClick", "closeOnEscapeKeyDown"]);
-    const dialogElementRef = React.useRef(ref);
-    const contentElementRef = React.useRef(null);
-    const { closeDialog, onTransitionEnd } = useDialog(dialogElementRef, isOpen);
-    const handleClickOutside = (event) => {
-        if (closeOnBackdropClick && event.target === dialogElementRef.current) {
-            closeDialog();
-            onClose(event);
-        }
-    };
-    useClickOutside({
-        ref: contentElementRef,
-        callback: isOpen ? handleClickOutside : undefined,
-    });
-    useCancelEvent(dialogElementRef, onClose, closeOnEscapeKeyDown, isOpen);
-    const child = React.Children.only(children);
-    return (React.createElement("dialog", Object.assign({ ref: dialogElementRef, onTransitionEnd: onTransitionEnd }, restProps), React.cloneElement(child, {
-        ref: (clonedElementRef) => {
-            contentElementRef.current = clonedElementRef;
-        },
-    })));
-};
-const Dialog = React.forwardRef(_Dialog);
-Dialog.spiritComponent = 'Dialog';
-Dialog.displayName = 'Dialog';
-
-const defaultContext = {
-    id: '',
-    isOpen: false,
-    onClose: () => null,
-};
-const HeaderDialogContext = React.createContext(defaultContext);
-const HeaderDialogProvider = HeaderDialogContext.Provider;
-const HeaderDialogConsumer = HeaderDialogContext.Consumer;
-const useHeaderDialogContext = () => React.useContext(HeaderDialogContext);
-
-var __rest$e = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const HeaderDialog = (props) => {
-    const { children, id, isOpen, onClose } = props, restProps = __rest$e(props, ["children", "id", "isOpen", "onClose"]);
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const providerValue = { id, isOpen, onClose };
-    useLastActiveFocus(isOpen);
-    return (React.createElement(HeaderDialogProvider, { value: providerValue },
-        React.createElement(Dialog, Object.assign({}, otherProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.headerDialog.root, styleProps.className), style: styleProps.style }),
-            React.createElement("div", { className: classProps.headerDialog.panel },
-                React.createElement("div", { className: classProps.headerDialog.content }, children)))));
-};
-HeaderDialog.spiritComponent = 'HeaderDialog';
-
-var __rest$d = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const HeaderDialogActions = (props) => {
-    const { color = HEADER_ACTIONS_COLOR_DEFAULT } = props, restProps = __rest$d(props, ["color"]);
-    const { classProps } = useHeaderStyleProps({ actionsColor: color });
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    return (React.createElement("nav", Object.assign({}, otherProps, { className: classNames(classProps.headerDialogActions, styleProps.className), style: styleProps.style })));
-};
-HeaderDialogActions.spiritComponent = 'HeaderDialogActions';
-
-const HeaderDialogButton = (props) => {
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(props);
-    return (React.createElement("button", Object.assign({}, otherProps, { type: "button", className: classNames(classProps.headerDialogButton, styleProps.className), style: styleProps.style })));
-};
-HeaderDialogButton.spiritComponent = 'HeaderDialogButton';
-
-const DEFAULT_BOX_SIZE = 24;
-
-const useIconBoxSize = (boxSize) => { var _a; return typeof boxSize === 'object' ? ((_a = boxSize.mobile) !== null && _a !== void 0 ? _a : DEFAULT_BOX_SIZE) : (boxSize !== null && boxSize !== void 0 ? boxSize : DEFAULT_BOX_SIZE); };
-
-var __rest$c = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const setCustomDimension = (prefix, size) => {
-    const style = {};
-    if (typeof size === 'object') {
-        Object.entries(size).forEach(([breakpoint, breakpointSize]) => {
-            const breakpointSuffix = breakpoint === 'mobile' ? '' : `-${breakpoint}`;
-            style[`${prefix}${breakpointSuffix}`] = `${breakpointSize === null || breakpointSize === void 0 ? void 0 : breakpointSize.toString()}px`;
-        });
-    }
-    return style;
-};
-const useIconStyleProps = (props) => {
-    const { boxSize, color, name } = props, otherProps = __rest$c(props, ["boxSize", "color", "name"]);
-    const stylePrefix = `--${spiritDesignTokens.cssVariablePrefix}icon`;
-    const isDualtoneIcon = String(name).includes('-dualtone');
-    const dualtoneColorWithDefault = isDualtoneIcon && !color ? TextColors.PRIMARY : color;
-    const iconClass = useClassNamePrefix('Icon');
-    const iconDualtoneColorClass = `${iconClass}--${dualtoneColorWithDefault}`;
-    const classProps = classNames(iconClass, {
-        [iconDualtoneColorClass]: color || dualtoneColorWithDefault,
-    });
-    const customizedIconStyle = Object.assign({}, (boxSize ? setCustomDimension(`${stylePrefix}-size`, boxSize) : {}));
-    return {
-        classProps,
-        iconStyleProps: customizedIconStyle,
-        props: otherProps,
-    };
-};
-
-var __rest$b = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const defaultProps$2 = {
-    ariaHidden: true,
-    boxSize: DEFAULT_BOX_SIZE,
-};
-const _Icon = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$2), props);
-    const { boxSize, name, title, ariaHidden } = propsWithDefaults, restProps = __rest$b(propsWithDefaults, ["boxSize", "name", "title", "ariaHidden"]);
-    let icon = useIcon(name);
-    const iconSize = useIconBoxSize(boxSize);
-    const { classProps, iconStyleProps, props: modifiedProps } = useIconStyleProps(Object.assign({ boxSize, name }, restProps));
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps('svg', {
-        classProps,
-        iconStyleProps,
-        styleProps,
-    });
-    if (title) {
-        icon = `<title>${title}</title>${icon}`;
-    }
-    return (React.createElement("svg", Object.assign({}, otherProps, mergedStyleProps, { viewBox: "0 0 24 24", fill: "none", width: iconSize, height: iconSize, "aria-hidden": ariaHidden, ref: ref }), htmlReactParser(icon)));
-};
-const Icon = React.forwardRef(_Icon);
-Icon.spiritComponent = 'Icon';
-Icon.displayName = 'Icon';
-
-var __rest$a = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-function useVisuallyHiddenProps(props) {
-    const restProps = __rest$a(props, []);
-    const visuallyHiddenClass = useClassNamePrefix('accessibility-hidden');
-    return {
-        classProps: visuallyHiddenClass,
-        props: restProps,
-    };
-}
-
-var __rest$9 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const VisuallyHidden = (props) => {
-    const { children, elementType: ElementTag = 'span' } = props, rest = __rest$9(props, ["children", "elementType"]);
-    const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
-};
-VisuallyHidden.spiritComponent = 'VisuallyHidden';
-
-var __rest$8 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const HeaderDialogCloseButton = (props) => {
-    const { label = HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT, onClick } = props, restProps = __rest$8(props, ["label", "onClick"]);
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const { id, isOpen, onClose } = useHeaderDialogContext();
-    const clickHandler = (event) => {
-        onClose(event);
-        if (onClick)
-            onClick(event);
-    };
-    return (React.createElement("button", Object.assign({}, otherProps, { type: "button", "aria-expanded": isOpen, "aria-controls": id, onClick: clickHandler, className: classNames(classProps.headerDialogCloseButton, styleProps.className), style: styleProps.style }),
-        React.createElement(Icon, { name: "close" }),
-        React.createElement(VisuallyHidden, null, label)));
-};
-HeaderDialogCloseButton.spiritComponent = 'HeaderDialogCloseButton';
-
-var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const _HeaderDialogLink = (props, ref) => {
-    const { elementType = 'a', children, isCurrent } = props, restProps = __rest$7(props, ["elementType", "children", "isCurrent"]);
-    const Component = elementType;
-    const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(Component, {
-        classProps: classProps.headerDialogLink,
-        styleProps,
-        otherProps,
-    });
-    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
-};
-const HeaderDialogLink = React.forwardRef(_HeaderDialogLink);
-HeaderDialogLink.spiritComponent = 'HeaderDialogLink';
-HeaderDialogLink.displayName = 'HeaderDialogLink';
-
-const HeaderDialogNav = (props) => {
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(props);
-    return (React.createElement("ul", Object.assign({}, otherProps, { className: classNames(classProps.headerDialogNav, styleProps.className), style: styleProps.style })));
-};
-HeaderDialogNav.spiritComponent = 'HeaderDialogNav';
-
-const HeaderDialogNavItem = (props) => {
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(props);
-    return (React.createElement("li", Object.assign({}, otherProps, { className: classNames(classProps.headerDialogNavItem, styleProps.className), style: styleProps.style })));
-};
-HeaderDialogNavItem.spiritComponent = 'HeaderDialogNavItem';
-
-const HeaderDialogText = (props) => {
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(props);
-    return (React.createElement("span", Object.assign({}, otherProps, { className: classNames(classProps.headerDialogText, styleProps.className), style: styleProps.style })));
-};
-HeaderDialogText.spiritComponent = 'HeaderDialogText';
-
-var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const _HeaderLink = (props, ref) => {
-    const { elementType = 'a', children, isCurrent } = props, restProps = __rest$6(props, ["elementType", "children", "isCurrent"]);
-    const Component = elementType;
-    const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(Component, {
-        classProps: classProps.headerLink,
-        styleProps,
-        otherProps,
-    });
-    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
-};
-const HeaderLink = React.forwardRef(_HeaderLink);
-HeaderLink.spiritComponent = 'HeaderLink';
-HeaderLink.displayName = 'HeaderLink';
-
-const useButtonProps = (props) => {
-    const { isDisabled, isLoading, onClick, type = 'button' } = props;
-    const handleClick = useClick(isDisabled, onClick);
-    const additionalProps = {
-        type,
-        disabled: isDisabled || isLoading,
-    };
-    return {
-        buttonProps: Object.assign(Object.assign({}, additionalProps), { onClick: handleClick }),
-    };
-};
-
-var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const getButtonColorClassname = (className, color) => compose(applyColor(color))(className);
-const getButtonSizeClassname = (className, size) => compose(applySize(size))(className);
-function useButtonStyleProps(props) {
-    const { color, isBlock, isDisabled, isLoading, isSymmetrical, size } = props, restProps = __rest$5(props, ["color", "isBlock", "isDisabled", "isLoading", "isSymmetrical", "size"]);
-    useDeprecationMessage({
-        method: 'custom',
-        trigger: !!isBlock,
-        componentName: 'Button',
-        customText: "The `isBlock` property will be deleted in the next major release. Please read component's documentation for more information.",
-    });
-    const buttonClass = useClassNamePrefix('Button');
-    const buttonBlockClass = `${buttonClass}--block`;
-    const buttonDisabledClass = `${buttonClass}--disabled`;
-    const buttonLoadingClass = `${buttonClass}--loading`;
-    const { isSymmetricalActive, symmetricalClassName } = useSymmetry(buttonClass, isSymmetrical);
-    if (isBlock && isSymmetricalActive) {
-        warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
-    }
-    const shouldApplyBlock = () => isBlock && !isSymmetricalActive;
-    const classProps = classNames(buttonClass, getButtonColorClassname(buttonClass, color), getButtonSizeClassname(buttonClass, size), {
-        [buttonBlockClass]: shouldApplyBlock(),
-        [buttonDisabledClass]: isDisabled || isLoading,
-        [buttonLoadingClass]: isLoading,
-    }, symmetricalClassName);
-    return {
-        classProps,
-        props: restProps,
-    };
-}
-
-const PropsContext = React.createContext(null);
-PropsContext.Provider;
-PropsContext.Consumer;
-const usePropsContext = (props = {}) => {
-    const context = React.useContext(PropsContext);
-    return context ? Object.assign(Object.assign({}, props), context) : props;
-};
-
-var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-function useSpinnerStyleProps(props) {
-    const { color } = props, restProps = __rest$4(props, ["color"]);
-    const spinnerClass = useClassNamePrefix('text');
-    const spinnerColorClass = color ? `${spinnerClass}-${color}` : '';
-    const spinnerAnimation = useClassNamePrefix('animation-spin-clockwise');
-    const className = classNames(spinnerColorClass, spinnerAnimation);
-    return {
-        classProps: className,
-        props: restProps,
-    };
-}
-
-const Spinner = (props) => {
-    const { classProps, props: modifiedProps } = useSpinnerStyleProps(props);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    return (React.createElement(Icon, Object.assign({}, otherProps, { name: "spinner", UNSAFE_className: classNames(classProps, styleProps.className), UNSAFE_style: styleProps.style })));
-};
-Spinner.spiritComponent = 'Spinner';
-
-var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const defaultProps$1 = {
-    color: 'primary',
-    isBlock: false,
-    isDisabled: false,
-    isLoading: false,
-    isSymmetrical: false,
-    size: 'medium',
-    type: 'button',
-    elementType: 'button',
-};
-const _Button = (props, ref) => {
-    const propsWithContext = usePropsContext();
-    const propsWithDefaults = Object.assign(Object.assign(Object.assign({}, defaultProps$1), props), propsWithContext);
-    const { elementType = defaultProps$1.elementType, children } = propsWithDefaults, restProps = __rest$3(propsWithDefaults, ["elementType", "children"]);
-    const Component = elementType;
-    const { buttonProps } = useButtonProps(restProps);
-    const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
-    return (React.createElement(Component, Object.assign({}, otherProps, buttonProps, { ref: ref }, mergedStyleProps),
-        children,
-        restProps.isLoading && React.createElement(Spinner, null)));
-};
-const Button = React.forwardRef(_Button);
-Button.spiritComponent = 'Button';
-Button.displayName = 'Button';
-
-const useButtonLinkProps = (props) => {
-    const { elementType, isDisabled, isLoading, onClick, href, target, rel } = props;
-    const handleClick = useClick(isDisabled, onClick);
-    const additionalProps = {
-        role: 'button',
-        href: elementType === 'a' && isDisabled ? undefined : href,
-        target: elementType === 'a' ? target : undefined,
-        disabled: isDisabled || isLoading,
-        rel: elementType === 'a' ? rel : undefined,
-    };
-    return {
-        buttonLinkProps: Object.assign(Object.assign({}, additionalProps), { onClick: handleClick }),
-    };
-};
-
-var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const getButtonLinkColorClassname = (className, color) => compose(applyColor(color))(className);
-const getButtonLinkSizeClassname = (className, size) => compose(applySize(size))(className);
-function useButtonLinkStyleProps(props) {
-    const { color, isBlock, isDisabled, isLoading, isSymmetrical, size } = props, restProps = __rest$2(props, ["color", "isBlock", "isDisabled", "isLoading", "isSymmetrical", "size"]);
-    useDeprecationMessage({
-        method: 'custom',
-        trigger: !!isBlock,
-        componentName: 'ButtonLink',
-        customText: "The `isBlock` property will be deleted in the next major release. Please read component's documentation for more information.",
-    });
-    const buttonClass = useClassNamePrefix('Button');
-    const buttonBlockClass = `${buttonClass}--block`;
-    const buttonDisabledClass = `${buttonClass}--disabled`;
-    const buttonLoadingClass = `${buttonClass}--loading`;
-    const { isSymmetricalActive, symmetricalClassName } = useSymmetry(buttonClass, isSymmetrical);
-    if (isBlock && isSymmetricalActive) {
-        warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
-    }
-    const shouldApplyBlock = () => isBlock && !isSymmetricalActive;
-    const classProps = classNames(buttonClass, getButtonLinkColorClassname(buttonClass, color), getButtonLinkSizeClassname(buttonClass, size), {
-        [buttonBlockClass]: shouldApplyBlock(),
-        [buttonDisabledClass]: isDisabled || isLoading,
-        [buttonLoadingClass]: isLoading,
-    }, symmetricalClassName);
-    return {
-        classProps,
-        props: restProps,
-    };
-}
-
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const defaultProps = {
-    color: 'primary',
-    elementType: 'a',
-    isBlock: false,
-    isDisabled: false,
-    isLoading: false,
-    isSymmetrical: false,
-    size: 'medium',
-};
-const _ButtonLink = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
-    const { elementType = defaultProps.elementType, children } = propsWithDefaults, restProps = __rest$1(propsWithDefaults, ["elementType", "children"]);
-    const Component = elementType;
-    const { buttonLinkProps } = useButtonLinkProps(propsWithDefaults);
-    const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
-    return (React.createElement(Component, Object.assign({}, otherProps, buttonLinkProps, mergedStyleProps, { ref: ref }),
-        children,
-        restProps.isLoading && React.createElement(Spinner, null)));
-};
-const ButtonLink = React.forwardRef(_ButtonLink);
-ButtonLink.spiritComponent = 'ButtonLink';
-ButtonLink.displayName = 'ButtonLink';
-
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const HeaderMobileActions = (props) => {
-    const { children, dialogId, menuToggleLabel = HEADER_MENU_TOGGLE_LABEL_DEFAULT, isOpen, onOpen } = props, restProps = __rest(props, ["children", "dialogId", "menuToggleLabel", "isOpen", "onOpen"]);
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.headerMobileActions, styleProps.className), style: styleProps.style }),
-        children,
-        React.createElement(Button, { "aria-controls": dialogId, "aria-expanded": isOpen, color: "secondary", onClick: onOpen, isSymmetrical: true },
-            React.createElement(Icon, { name: "hamburger" }),
-            React.createElement(VisuallyHidden, null, menuToggleLabel))));
-};
-HeaderMobileActions.spiritComponent = 'HeaderMobileActions';
-
-const HeaderNav = (props) => {
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(props);
-    return (React.createElement("ul", Object.assign({}, otherProps, { className: classNames(classProps.headerNav, styleProps.className), style: styleProps.style })));
-};
-HeaderNav.spiritComponent = 'HeaderNav';
-
-const HeaderNavItem = (props) => {
-    const { classProps } = useHeaderStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(props);
-    return (React.createElement("li", Object.assign({}, otherProps, { className: classNames(classProps.headerNavItem, styleProps.className), style: styleProps.style })));
-};
-HeaderNavItem.spiritComponent = 'HeaderNavItem';
-
-exports.HEADER_ACTIONS_COLOR_DEFAULT = HEADER_ACTIONS_COLOR_DEFAULT;
-exports.HEADER_COLOR_DEFAULT = HEADER_COLOR_DEFAULT;
-exports.HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT = HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT;
-exports.HEADER_MENU_TOGGLE_LABEL_DEFAULT = HEADER_MENU_TOGGLE_LABEL_DEFAULT;
-exports.Header = Header;
-exports.HeaderButton = HeaderButton;
-exports.HeaderDesktopActions = HeaderDesktopActions;
-exports.HeaderDialog = HeaderDialog;
-exports.HeaderDialogActions = HeaderDialogActions;
-exports.HeaderDialogButton = HeaderDialogButton;
-exports.HeaderDialogCloseButton = HeaderDialogCloseButton;
-exports.HeaderDialogConsumer = HeaderDialogConsumer;
-exports.HeaderDialogLink = HeaderDialogLink;
-exports.HeaderDialogNav = HeaderDialogNav;
-exports.HeaderDialogNavItem = HeaderDialogNavItem;
-exports.HeaderDialogProvider = HeaderDialogProvider;
-exports.HeaderDialogText = HeaderDialogText;
-exports.HeaderLink = HeaderLink;
-exports.HeaderMobileActions = HeaderMobileActions;
-exports.HeaderNav = HeaderNav;
-exports.HeaderNavItem = HeaderNavItem;
-exports.useHeaderDialogContext = useHeaderDialogContext;
-exports.useHeaderStyleProps = useHeaderStyleProps;
-//# sourceMappingURL=Header.cjs.map