@alma-oss/spirit-web-react 4.0.0

package/components/Header/Header.cjs

@@ -0,0 +1,1261 @@
+'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 mergeStyleProps(ElementTag, styleProps) {
+    const isSpiritComponent = typeof ElementTag !== 'string' && !!(ElementTag === null || ElementTag === void 0 ? void 0 : ElementTag.spiritComponent);
+    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);
+    const isProcessable = (options.includesKey ? isStylePropKeyIncluded : !isStylePropKeyIncluded) && !isEmpty(stylePropValue);
+    return isProcessable;
+};
+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, }) => {
+    let message;
+    let hasProps;
+    const messageBase = `Deprecation warning (${componentName}):`;
+    React.useEffect(() => {
+        const isExecutable = trigger && componentName && process.env.NODE_ENV === 'development';
+        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 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 useDialog = (ref, isOpen) => {
+    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) {
+            dialogNode.close();
+        }
+    }, [isOpen, ref]);
+    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 && !dialogNode.open && dialogNode.showModal) {
+                dialogNode.showModal();
+                setOpenClass(true);
+            }
+            else if (!isOpen && dialogNode.open) {
+                setOpenClass(false);
+            }
+        }
+    }, [isOpen, ref, setOpenClass]);
+    const openDialog = () => {
+        if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.open) {
+            ref.current.showModal();
+            setOpenClass(true);
+        }
+    };
+    const closeDialog = () => {
+        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (dialogNode && dialogNode.open) {
+            setOpenClass(false);
+        }
+    };
+    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;
+        },
+    })));
+};
+Dialog.spiritComponent = 'Dialog';
+var Dialog$1 = React.forwardRef(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$1, 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';
+
+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: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$7(props, ["elementType", "children", "isCurrent"]);
+    const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, {
+        classProps: classProps.headerDialogLink,
+        styleProps,
+        otherProps,
+    });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+};
+const HeaderDialogLink = React.forwardRef(_HeaderDialogLink);
+HeaderDialogLink.spiritComponent = '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: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$6(props, ["elementType", "children", "isCurrent"]);
+    const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
+    const { styleProps, props: otherProps } = useStyleProps(restProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, {
+        classProps: classProps.headerLink,
+        styleProps,
+        otherProps,
+    });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+};
+const HeaderLink = React.forwardRef(_HeaderLink);
+HeaderLink.spiritComponent = '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 buttonSymmetricalClass = `${buttonClass}--symmetrical`;
+    if (isBlock && isSymmetrical) {
+        warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
+    }
+    const classProps = classNames(buttonClass, getButtonColorClassname(buttonClass, color), getButtonSizeClassname(buttonClass, size), {
+        [buttonBlockClass]: isBlock && !isSymmetrical,
+        [buttonDisabledClass]: isDisabled || isLoading,
+        [buttonLoadingClass]: isLoading,
+        [buttonSymmetricalClass]: isSymmetrical && !isBlock,
+    });
+    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: ElementTag = defaultProps$1.elementType, children } = propsWithDefaults, restProps = __rest$3(propsWithDefaults, ["elementType", "children"]);
+    const { buttonProps } = useButtonProps(restProps);
+    const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
+    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, buttonProps, { ref: ref }, mergedStyleProps),
+        children,
+        restProps.isLoading && React.createElement(Spinner, null)));
+};
+const Button = React.forwardRef(_Button);
+Button.spiritComponent = '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 buttonSymmetricalClass = `${buttonClass}--symmetrical`;
+    if (isBlock && isSymmetrical) {
+        warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
+    }
+    const classProps = classNames(buttonClass, getButtonLinkColorClassname(buttonClass, color), getButtonLinkSizeClassname(buttonClass, size), {
+        [buttonBlockClass]: isBlock && !isSymmetrical,
+        [buttonDisabledClass]: isDisabled || isLoading,
+        [buttonLoadingClass]: isLoading,
+        [buttonSymmetricalClass]: isSymmetrical && !isBlock,
+    });
+    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: ElementTag = defaultProps.elementType, children } = propsWithDefaults, restProps = __rest$1(propsWithDefaults, ["elementType", "children"]);
+    const { buttonLinkProps } = useButtonLinkProps(propsWithDefaults);
+    const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
+    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, buttonLinkProps, mergedStyleProps, { ref: ref }),
+        children,
+        restProps.isLoading && React.createElement(Spinner, null)));
+};
+const ButtonLink = React.forwardRef(_ButtonLink);
+ButtonLink.spiritComponent = '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