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

package/components/PricingPlan/PricingPlan.cjs

@@ -1,1928 +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');
-var react = require('@floating-ui/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$s = (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$s(_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$3 = undefined;
-const ClassNamePrefixContext = React.createContext(defaultContext$3);
-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 TOOLTIP_TRIGGER = {
-    CLICK: 'click',
-    HOVER: 'hover',
-    FOCUS: 'focus',
-    OUTSIDE_PRESS: 'outside-press',
-    ESCAPE_KEY: 'escape-key',
-};
-
-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$r = (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$r(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 defaultLabels = {
-    common: {
-        close: 'Close',
-        edit: 'Edit',
-        remove: 'Remove',
-    },
-    breadcrumbs: {
-        back: 'Go back',
-    },
-    fileUploader: {
-        edit: 'Edit',
-        remove: 'Remove',
-        attachments: 'Attachments',
-    },
-    pagination: {
-        next: 'Next',
-        previous: 'Previous',
-        goToPage: 'Go to page',
-    },
-    textField: {
-        password: {
-            show: 'Show password',
-            hide: 'Hide password',
-        },
-    },
-    splitButton: {
-        dropdown: 'More',
-    },
-};
-
-const replaceTranslationParams = (translation, params) => Object.entries(params).reduce((result, [paramKey, value]) => {
-    const safeParamKey = paramKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    return result.replace(new RegExp(`\\{${safeParamKey}\\}`, 'g'), String(value));
-}, translation);
-
-const resolveTranslationKey = (obj, path) => {
-    const keys = path.split('.');
-    let current = obj;
-    for (const key of keys) {
-        if (typeof current === 'object' && current !== null && key in current) {
-            current = current[key];
-        }
-        else {
-            return path;
-        }
-    }
-    return typeof current === 'string' ? current : path;
-};
-
-const useI18n = () => {
-    const t = (key, params) => {
-        const translation = resolveTranslationKey(defaultLabels, key);
-        return !params ? translation : replaceTranslationParams(translation, params);
-    };
-    return { t };
-};
-
-const defaultContext$2 = undefined;
-const IconsContext = React.createContext(defaultContext$2);
-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 useToggle = (initialState = false) => {
-    const [state, setState] = React.useState(initialState);
-    const toggle = React.useCallback(() => setState((prevState) => !prevState), []);
-    return [state, toggle];
-};
-
-const NUMBER_OF_PLAN_ROWS_DEFAULT = 100;
-
-var __rest$q = (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 usePricingPlanStyleProps = (props) => {
-    const { hasComparableFeatures, isHighlighted, action, badge, title, subtitle, note, price, rows } = props, restProps = __rest$q(props, ["hasComparableFeatures", "isHighlighted", "action", "badge", "title", "subtitle", "note", "price", "rows"]);
-    const pricingPlanClass = useClassNamePrefix('PricingPlan');
-    const pricingPlanComparableClass = `${pricingPlanClass}--comparableFeatures`;
-    const pricingPlanLayoutClass = `${pricingPlanClass}__layout`;
-    const pricingPlanHighlightedClass = `${pricingPlanClass}--highlighted`;
-    const pricingPlanHeaderClass = useClassNamePrefix('PricingPlanHeader');
-    const pricingPlanHeaderBadgeClassName = `${pricingPlanHeaderClass}__badge`;
-    const pricingPlanHeaderTitleClassName = `${pricingPlanHeaderClass}__title`;
-    const pricingPlanHeaderSubtitleClassName = `${pricingPlanHeaderClass}__subtitle`;
-    const pricingPlanHeaderPriceClassName = `${pricingPlanHeaderClass}__price`;
-    const pricingPlanHeaderActionClassName = `${pricingPlanHeaderClass}__action`;
-    const pricingPlanHeaderNoteClassName = `${pricingPlanHeaderClass}__note`;
-    const pricingPlanHeaderContentClassName = `${pricingPlanHeaderClass}__content`;
-    const pricingPlanBodyClass = useClassNamePrefix('PricingPlanBody');
-    const pricingPlanBodyFeatureListClassName = `${pricingPlanBodyClass}__featureList`;
-    const pricingPlanBodyFeatureItemClassName = `${pricingPlanBodyClass}__featureItem`;
-    const pricingPlanBodyFeatureTitleClassName = `${pricingPlanBodyClass}__featureTitle`;
-    const pricingPlanBodyFeatureTitleTextClassName = `${pricingPlanBodyClass}__featureTitleText`;
-    const pricingPlanBodyFeatureDescriptionClassName = `${pricingPlanBodyClass}__featureDescription`;
-    const pricingPlanFooterClass = useClassNamePrefix('PricingPlanFooter');
-    const rootClassProps = classNames(pricingPlanClass, {
-        [pricingPlanComparableClass]: hasComparableFeatures,
-        [pricingPlanHighlightedClass]: isHighlighted,
-    });
-    const pricingPlanStyle = {};
-    if (rows !== NUMBER_OF_PLAN_ROWS_DEFAULT) {
-        pricingPlanStyle[`--${spiritDesignTokens.cssVariablePrefix}pricing-plan-rows`] = rows === null || rows === void 0 ? void 0 : rows.toString();
-    }
-    return {
-        classProps: {
-            root: rootClassProps,
-            layout: pricingPlanLayoutClass,
-            header: {
-                root: pricingPlanHeaderClass,
-                badge: badge ? pricingPlanHeaderBadgeClassName : undefined,
-                content: pricingPlanHeaderContentClassName,
-                title: title ? pricingPlanHeaderTitleClassName : undefined,
-                subtitle: subtitle ? pricingPlanHeaderSubtitleClassName : undefined,
-                price: price ? pricingPlanHeaderPriceClassName : undefined,
-                action: action ? pricingPlanHeaderActionClassName : undefined,
-                note: note ? pricingPlanHeaderNoteClassName : undefined,
-            },
-            body: {
-                root: pricingPlanBodyClass,
-                featureList: pricingPlanBodyFeatureListClassName,
-                featureItem: pricingPlanBodyFeatureItemClassName,
-                featureTitle: pricingPlanBodyFeatureTitleClassName,
-                featureTitleText: pricingPlanBodyFeatureTitleTextClassName,
-                featureDescription: pricingPlanBodyFeatureDescriptionClassName,
-            },
-            footer: pricingPlanFooterClass,
-        },
-        props: restProps,
-        styleProps: pricingPlanStyle,
-    };
-};
-
-var __rest$p = (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$7 = {
-    hasComparableFeatures: false,
-    isHighlighted: false,
-    rows: NUMBER_OF_PLAN_ROWS_DEFAULT,
-};
-const PricingPlan = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$7), props);
-    const { elementType: ElementTag = 'article', children } = propsWithDefaults, restProps = __rest$p(propsWithDefaults, ["elementType", "children"]);
-    const { classProps, props: modifiedProps, styleProps: pricingPlanStyleProps } = usePricingPlanStyleProps(restProps);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
-        classProps: classProps.root,
-        pricingPlanStyleProps,
-        styleProps,
-    });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps),
-        React.createElement("div", { className: classNames(classProps.layout) }, children)));
-};
-PricingPlan.spiritComponent = 'PricingPlan';
-
-var __rest$o = (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$6 = {
-    action: undefined,
-    badge: undefined,
-    note: undefined,
-    price: undefined,
-    subtitle: undefined,
-    title: undefined,
-};
-const PricingPlanHeader = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$6), props);
-    const { elementType: ElementTag = 'header' } = propsWithDefaults, restProps = __rest$o(propsWithDefaults, ["elementType"]);
-    const { classProps, props: modifiedProps } = usePricingPlanStyleProps(restProps);
-    const { badge, title, subtitle, price, action, note } = propsWithDefaults;
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
-        classProps: classProps.header.root,
-        styleProps,
-    });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps),
-        badge && React.createElement("div", { className: classProps.header.badge }, badge),
-        React.createElement("div", { className: classProps.header.content },
-            title && React.createElement("h3", { className: classProps.header.title }, title),
-            subtitle && React.createElement("div", { className: classNames(classProps.header.subtitle) }, subtitle),
-            price && React.createElement("div", { className: classProps.header.price }, price),
-            action && React.createElement("div", { className: classProps.header.action }, action),
-            note && React.createElement("div", { className: classProps.header.note }, note))));
-};
-PricingPlanHeader.spiritComponent = 'PricingPlanHeader';
-
-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$n = (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$n(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$m = (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$5 = {
-    ariaHidden: true,
-    boxSize: DEFAULT_BOX_SIZE,
-};
-const _Icon = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$5), props);
-    const { boxSize, name, title, ariaHidden } = propsWithDefaults, restProps = __rest$m(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';
-
-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$l = (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$l(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$1 = {
-    id: '',
-    isOpen: false,
-    onClose: () => null,
-};
-const ModalContext = React.createContext(defaultContext$1);
-const ModalProvider = ModalContext.Provider;
-ModalContext.Consumer;
-const useModalContext = () => React.useContext(ModalContext);
-
-function useModalStyleProps({ footerAlignment = AlignmentX.RIGHT, isDockedOnMobile = false, isExpandedOnMobile = false, isOpen = false, isScrollable = false, modalAlignment = AlignmentY.CENTER, } = {}) {
-    const modalClass = useClassNamePrefix('Modal');
-    const modalAlignClasses = {
-        top: `${modalClass}--top`,
-        center: `${modalClass}--center`,
-        bottom: `${modalClass}--bottom`,
-    };
-    const modalDialogClass = `${modalClass}Dialog`;
-    const modalDialogDockedOnMobileClass = `${modalDialogClass}--dockOnMobile`;
-    const modalDialogExpandedOnMobileClass = `${modalDialogClass}--expandOnMobile`;
-    const modalDialogScrollableClass = `${modalDialogClass}--scrollable`;
-    const modalHeaderClass = `${modalClass}Header`;
-    const modalTitleClass = `${modalHeaderClass}__title`;
-    const modalBodyClass = `${modalClass}Body`;
-    const modalFooterClass = `${modalClass}Footer`;
-    const modalFooterDescriptionClass = `${modalFooterClass}__description`;
-    const modalFooterActionsClass = `${modalFooterClass}__actions`;
-    const footerAlignClasses = {
-        left: `${modalFooterClass}--left`,
-        center: `${modalFooterClass}--center`,
-        right: `${modalFooterClass}--right`,
-    };
-    const classProps = {
-        root: classNames(modalClass, {
-            [modalAlignClasses[modalAlignment]]: modalAlignment,
-            [CLASS_NAME_OPEN]: isOpen,
-        }),
-        dialog: classNames(modalDialogClass, {
-            [modalDialogDockedOnMobileClass]: isDockedOnMobile,
-            [modalDialogExpandedOnMobileClass]: isExpandedOnMobile,
-            [modalDialogScrollableClass]: isScrollable,
-        }),
-        title: modalTitleClass,
-        header: modalHeaderClass,
-        body: modalBodyClass,
-        footer: {
-            root: classNames(modalFooterClass, { [footerAlignClasses[footerAlignment]]: footerAlignment }),
-            description: modalFooterDescriptionClass,
-            actions: modalFooterActionsClass,
-        },
-    };
-    return {
-        classProps,
-    };
-}
-
-var __rest$k = (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 Modal = (props) => {
-    const { children, alignmentY = AlignmentY.CENTER, isOpen, onClose, id } = props, restProps = __rest$k(props, ["children", "alignmentY", "isOpen", "onClose", "id"]);
-    const { classProps } = useModalStyleProps({ isOpen, modalAlignment: alignmentY });
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const contextValue = {
-        id,
-        isOpen,
-        onClose,
-    };
-    useLastActiveFocus(isOpen);
-    return (React.createElement(ModalProvider, { value: contextValue },
-        React.createElement(Dialog, Object.assign({}, otherProps, styleProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.root, styleProps.className), "aria-labelledby": `${id}__title` }), children)));
-};
-Modal.spiritComponent = 'Modal';
-
-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;
-};
-const ModalBody = (_a) => {
-    var { children } = _a, restProps = __rest$j(_a, ["children"]);
-    const { classProps } = useModalStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    return (React.createElement("div", Object.assign({}, otherProps, styleProps, { className: classNames(classProps.body, styleProps.className) }), children));
-};
-ModalBody.spiritComponent = 'ModalBody';
-
-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$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;
-};
-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$i(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$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;
-};
-function useSpinnerStyleProps(props) {
-    const { color } = props, restProps = __rest$h(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$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$4 = {
-    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$4), props), propsWithContext);
-    const { elementType = defaultProps$4.elementType, children } = propsWithDefaults, restProps = __rest$g(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$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 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$f(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$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 defaultProps$3 = {
-    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$3), props);
-    const { elementType = defaultProps$3.elementType, children } = propsWithDefaults, restProps = __rest$e(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$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;
-};
-function useVisuallyHiddenProps(props) {
-    const restProps = __rest$d(props, []);
-    const visuallyHiddenClass = useClassNamePrefix('accessibility-hidden');
-    return {
-        classProps: visuallyHiddenClass,
-        props: restProps,
-    };
-}
-
-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 VisuallyHidden = (props) => {
-    const { children, elementType: ElementTag = 'span' } = props, rest = __rest$c(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$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 ModalCloseButton = (_a) => {
-    var { label, onClose, id, isOpen } = _a, restProps = __rest$b(_a, ["label", "onClose", "id", "isOpen"]);
-    const { t } = useI18n();
-    const closeLabel = label !== null && label !== void 0 ? label : t('common.close');
-    return (React.createElement(Button, Object.assign({}, restProps, { isSymmetrical: true, color: "tertiary", onClick: onClose, "aria-expanded": isOpen, "aria-controls": id }),
-        React.createElement(Icon, { name: "close" }),
-        React.createElement(VisuallyHidden, null, closeLabel)));
-};
-ModalCloseButton.spiritComponent = 'ModalCloseButton';
-
-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;
-};
-const setCustomHeight = (baseVarName, propValue) => {
-    if (!propValue)
-        return {};
-    if (typeof propValue === 'object') {
-        return Object.keys(propValue).reduce((acc, key) => {
-            var _a;
-            const suffix = key === 'mobile' ? '' : `-${key}`;
-            const propName = `--${baseVarName}${suffix}`;
-            return Object.assign(Object.assign({}, acc), { [propName]: (_a = propValue[key]) === null || _a === void 0 ? void 0 : _a.toString() });
-        }, {});
-    }
-    const propName = `--${baseVarName}`;
-    return { [propName]: propValue === null || propValue === void 0 ? void 0 : propValue.toString() };
-};
-const useModalDialogStyleProps = (props) => {
-    const { height, maxHeight } = props, otherProps = __rest$a(props, ["height", "maxHeight"]);
-    const customizedHeightStyle = Object.assign(Object.assign({}, setCustomHeight('modal-dialog-height', height)), setCustomHeight('modal-dialog-max-height', maxHeight));
-    return {
-        modalDialogStyleProps: customizedHeightStyle,
-        props: otherProps,
-    };
-};
-
-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 _ModalDialog = (props, ref) => {
-    const { elementType = 'article', children, isDockedOnMobile, isExpandedOnMobile, isScrollable } = props, restProps = __rest$9(props, ["elementType", "children", "isDockedOnMobile", "isExpandedOnMobile", "isScrollable"]);
-    const Component = elementType;
-    const { classProps } = useModalStyleProps({ isDockedOnMobile, isExpandedOnMobile, isScrollable });
-    const { modalDialogStyleProps, props: modifiedProps } = useModalDialogStyleProps(restProps);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(Component, {
-        classProps: classProps.dialog,
-        modalDialogStyleProps,
-        styleProps,
-        otherProps,
-    });
-    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
-};
-const ModalDialog = React.forwardRef(_ModalDialog);
-ModalDialog.spiritComponent = 'ModalDialog';
-ModalDialog.displayName = 'ModalDialog';
-
-(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;
-};
-
-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 defaultProps$2 = {
-    hasCloseButton: true,
-};
-const ModalHeader = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$2), props);
-    const { children, closeLabel, hasCloseButton } = propsWithDefaults, restProps = __rest$8(propsWithDefaults, ["children", "closeLabel", "hasCloseButton"]);
-    const { t } = useI18n();
-    const resolvedCloseLabel = closeLabel !== null && closeLabel !== void 0 ? closeLabel : t('common.close');
-    const { classProps } = useModalStyleProps();
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const { id, isOpen, onClose } = useModalContext();
-    return (React.createElement("header", Object.assign({}, otherProps, styleProps, { className: classNames(classProps.header, styleProps.className) }),
-        children && (React.createElement("h2", { id: `${id}__title`, className: classProps.title }, children)),
-        hasCloseButton && React.createElement(ModalCloseButton, { id: id, isOpen: isOpen, label: resolvedCloseLabel, onClose: onClose })));
-};
-ModalHeader.spiritComponent = 'ModalHeader';
-
-const defaultContext = {
-    anchorRef: () => { },
-    arrowRef: { current: null },
-    getReferenceProps: () => ({
-        id: '',
-        ref: () => { },
-    }),
-    getFloatingProps: () => ({
-        id: '',
-        ref: () => { },
-    }),
-    id: '',
-    isDismissible: false,
-    isOpen: false,
-    middlewareData: {},
-    onToggle: () => { },
-    placement: 'bottom',
-    sizeMaxWidth: undefined,
-    tooltipMaxWidth: undefined,
-    tooltipRef: () => { },
-    triggerRef: () => { },
-    x: 0,
-    y: 0,
-    position: 'absolute',
-};
-const TooltipContext = React.createContext(defaultContext);
-const TooltipProvider = TooltipContext.Provider;
-TooltipContext.Consumer;
-const useTooltipContext = () => React.useContext(TooltipContext);
-
-const stringToArray = (value) => Array.isArray(value) ? value : [value];
-const useFloating = (props) => {
-    const { arrowRef, cornerOffset = 0, flipCrossAxis, flipFallbackAxisSideDirection = 'none', flipFallbackPlacements, flipProp, isDismissible, isOpen = false, offset: tooltipOffset = 0, onToggle, isFocusableOnHover, shiftProp, sizeProp, positionStrategy = 'absolute', tooltipArrowWidth = 0, tooltipPlacement, trigger, } = props;
-    const [maxWidth, setMaxWidth] = React.useState(undefined);
-    const [isClicked, setIsClicked] = React.useState(false);
-    const mainAxisOffset = cornerOffset + tooltipArrowWidth;
-    const isHoverEnabled = trigger === null || trigger === void 0 ? void 0 : trigger.includes(TOOLTIP_TRIGGER.HOVER);
-    const isClickEnabled = trigger === null || trigger === void 0 ? void 0 : trigger.includes(TOOLTIP_TRIGGER.CLICK);
-    const isFocusEnabled = trigger === null || trigger === void 0 ? void 0 : trigger.includes(TOOLTIP_TRIGGER.FOCUS);
-    const useSafePolygons = (isClickable) => isClickable
-        ? react.safePolygon({
-            requireIntent: false,
-        })
-        : undefined;
-    const { x, y, floatingStyles, refs, context, placement, middlewareData } = react.useFloating({
-        open: isOpen,
-        onOpenChange: (open, event, reason) => {
-            if (isHoverEnabled) {
-                if (reason === TOOLTIP_TRIGGER.CLICK) {
-                    setIsClicked((prev) => !prev);
-                }
-                if (isOpen && isClicked && reason === TOOLTIP_TRIGGER.HOVER) {
-                    return;
-                }
-                if (isOpen &&
-                    isClicked &&
-                    (reason === TOOLTIP_TRIGGER.CLICK ||
-                        reason === TOOLTIP_TRIGGER.OUTSIDE_PRESS ||
-                        reason === TOOLTIP_TRIGGER.ESCAPE_KEY)) {
-                    setIsClicked(false);
-                    onToggle(false);
-                    return;
-                }
-            }
-            onToggle(open);
-        },
-        placement: tooltipPlacement,
-        whileElementsMounted: react.autoUpdate,
-        middleware: [
-            react.offset(tooltipOffset),
-            react.inline(),
-            flipProp &&
-                react.flip({
-                    crossAxis: flipCrossAxis,
-                    fallbackPlacements: flipFallbackPlacements ? stringToArray(flipFallbackPlacements) : undefined,
-                    fallbackAxisSideDirection: flipFallbackAxisSideDirection,
-                }),
-            shiftProp &&
-                react.shift({
-                    limiter: react.limitShift({
-                        offset: () => ({
-                            mainAxis: mainAxisOffset,
-                        }),
-                    }),
-                }),
-            sizeProp &&
-                react.size({
-                    apply({ availableWidth }) {
-                        setMaxWidth(availableWidth);
-                    },
-                }),
-            react.arrow({ element: arrowRef.current, padding: cornerOffset }),
-        ],
-        strategy: positionStrategy,
-    });
-    const click = react.useClick(context, { enabled: isClickEnabled });
-    const hover = react.useHover(context, {
-        enabled: isHoverEnabled,
-        handleClose: useSafePolygons(!!isFocusableOnHover),
-    });
-    const focus = react.useFocus(context, { enabled: isFocusEnabled });
-    const dismiss = react.useDismiss(context, { outsidePress: !isDismissible });
-    const role = react.useRole(context, { role: 'tooltip' });
-    const { getReferenceProps: originalGetReferenceProps, getFloatingProps } = react.useInteractions([
-        click,
-        hover,
-        focus,
-        dismiss,
-        role,
-    ]);
-    const getReferenceProps = (userProps) => {
-        const referenceProps = originalGetReferenceProps(userProps);
-        if (isFocusEnabled) {
-            const originalOnMouseDown = referenceProps.onMouseDown;
-            referenceProps.onMouseDown = ((event) => {
-                if (originalOnMouseDown) {
-                    originalOnMouseDown(event);
-                }
-                const element = event.currentTarget;
-                if (element && element !== document.activeElement) {
-                    const isFocusable = element instanceof HTMLElement &&
-                        (element.tabIndex >= 0 ||
-                            element instanceof HTMLButtonElement ||
-                            element instanceof HTMLAnchorElement ||
-                            element instanceof HTMLInputElement ||
-                            element instanceof HTMLSelectElement ||
-                            element instanceof HTMLTextAreaElement);
-                    if (isFocusable) {
-                        element.focus();
-                    }
-                }
-            });
-        }
-        return referenceProps;
-    };
-    return {
-        context,
-        getFloatingProps,
-        getReferenceProps,
-        maxWidth,
-        middlewareData,
-        placement,
-        refs,
-        x,
-        y,
-        position: floatingStyles.position,
-    };
-};
-
-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 useTooltipStyleProps = (props) => {
-    const { isDismissible, isOpen } = props, modifiedProps = __rest$7(props, ["isDismissible", "isOpen"]);
-    const tooltipClass = useClassNamePrefix('Tooltip');
-    const tooltipPopoverClass = `${tooltipClass}Popover`;
-    const arrowClass = `${tooltipPopoverClass}__arrow`;
-    const closeButtonClass = `${tooltipPopoverClass}__close`;
-    const rootDismissibleClass = `${tooltipPopoverClass}--dismissible`;
-    const rootHiddenClass = 'is-hidden';
-    const isHiddenClass = React.useMemo(() => isOpen === false, [isOpen]);
-    const tooltipPopoverClassName = classNames(tooltipPopoverClass, {
-        [rootDismissibleClass]: isDismissible,
-        [rootHiddenClass]: isHiddenClass,
-    });
-    return {
-        classProps: {
-            rootClassName: tooltipClass,
-            popoverClassName: tooltipPopoverClassName,
-            arrowClassName: arrowClass,
-            closeButtonClassName: closeButtonClass,
-        },
-        props: modifiedProps,
-    };
-};
-
-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 _Tooltip = (props, ref) => {
-    var _a;
-    const { children, elementType = 'div', enableFlipping: flipProp = true, enableFlippingCrossAxis: flipCrossAxis = true, enableShifting: shiftProp = true, enableSizing: sizeProp = true, flipFallbackAxisSideDirection = 'none', flipFallbackPlacements = ['bottom', 'top'], id, isDismissible = false, isFocusableOnHover = false, isOpen = false, onToggle, placement: tooltipPlacement, positionStrategy = 'absolute', trigger = ['click', 'hover'] } = props, restProps = __rest$6(props, ["children", "elementType", "enableFlipping", "enableFlippingCrossAxis", "enableShifting", "enableSizing", "flipFallbackAxisSideDirection", "flipFallbackPlacements", "id", "isDismissible", "isFocusableOnHover", "isOpen", "onToggle", "placement", "positionStrategy", "trigger"]);
-    const Component = elementType;
-    const { classProps, props: modifiedProps } = useTooltipStyleProps(Object.assign({ isDismissible,
-        isOpen }, restProps));
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(Component, {
-        classProps: classProps.rootClassName,
-        styleProps,
-    });
-    const arrowRef = React.useRef(null);
-    const tooltipRef = React.useRef(ref);
-    let tooltipMaxWidth;
-    let tooltipOffset;
-    let tooltipCornerOffset;
-    let tooltipArrowWidth;
-    const tooltipElement = (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-spirit-element="tooltip"]');
-    const tooltipArrowElement = tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.querySelector('[data-spirit-element="tooltip-arrow"]');
-    if (tooltipElement) {
-        const tooltipComputedStyle = window.getComputedStyle(tooltipElement);
-        const tooltipArrowComputedStyle = tooltipArrowElement && window.getComputedStyle(tooltipArrowElement);
-        tooltipMaxWidth = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-max-width'), 10);
-        tooltipOffset = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-offset'), 10);
-        tooltipCornerOffset = tooltipArrowComputedStyle
-            ? parseInt(tooltipArrowComputedStyle.getPropertyValue('--tooltip-arrow-corner-offset'), 10)
-            : 0;
-        tooltipArrowWidth = tooltipArrowComputedStyle ? parseInt(tooltipArrowComputedStyle.width, 10) : 0;
-    }
-    const { getFloatingProps, getReferenceProps, maxWidth, middlewareData, placement, refs, x, y, position } = useFloating({
-        arrowRef,
-        cornerOffset: tooltipCornerOffset,
-        flipCrossAxis,
-        flipFallbackAxisSideDirection,
-        flipFallbackPlacements,
-        flipProp,
-        isDismissible,
-        isFocusableOnHover,
-        isOpen,
-        offset: tooltipOffset,
-        onToggle,
-        shiftProp,
-        sizeProp,
-        positionStrategy,
-        tooltipArrowWidth,
-        tooltipPlacement,
-        trigger,
-    });
-    return (React.createElement(TooltipProvider, { value: {
-            anchorRef: refs.setPositionReference,
-            arrowRef,
-            getFloatingProps,
-            getReferenceProps,
-            id,
-            isDismissible,
-            isOpen,
-            middlewareData,
-            onToggle,
-            placement,
-            sizeMaxWidth: maxWidth,
-            tooltipMaxWidth,
-            tooltipRef: refs.setFloating,
-            triggerRef: refs.setReference,
-            x,
-            y,
-            position,
-        } },
-        React.createElement(Component, Object.assign({}, otherProps, { ref: tooltipRef }, mergedStyleProps), children)));
-};
-const Tooltip = React.forwardRef(_Tooltip);
-Tooltip.spiritComponent = 'Tooltip';
-Tooltip.displayName = 'Tooltip';
-
-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 TooltipCloseButton = (_a) => {
-    var { label, onClick } = _a, restProps = __rest$5(_a, ["label", "onClick"]);
-    const { t } = useI18n();
-    const closeLabel = label !== null && label !== void 0 ? label : t('common.close');
-    const { classProps, props: modifiedProps } = useTooltipStyleProps(restProps);
-    const { styleProps } = useStyleProps(Object.assign({}, modifiedProps));
-    return (React.createElement("button", { type: "button", className: classNames(classProps.closeButtonClassName, styleProps.className), style: styleProps.style, onClick: onClick, "aria-expanded": "true" },
-        React.createElement(Icon, { name: "close", "aria-hidden": "true" }),
-        React.createElement(VisuallyHidden, null, closeLabel)));
-};
-TooltipCloseButton.spiritComponent = 'TooltipCloseButton';
-
-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;
-};
-const TooltipPopover = (props) => {
-    const { children } = props, rest = __rest$4(props, ["children"]);
-    const { arrowRef, getFloatingProps, isDismissible, isOpen, middlewareData, onToggle, placement, tooltipRef, x, y, position, sizeMaxWidth, tooltipMaxWidth, } = useTooltipContext();
-    const { classProps, props: modifiedProps } = useTooltipStyleProps(Object.assign({ isOpen,
-        isDismissible }, rest));
-    const { styleProps: contentStyleProps, props: contentOtherProps } = useStyleProps(modifiedProps);
-    const renderCloseButton = React.useMemo(() => isDismissible && React.createElement(TooltipCloseButton, { onClick: () => onToggle(false), label: "close" }), [isDismissible, onToggle]);
-    const getMaxHeightAndWidth = () => {
-        if (isOpen && sizeMaxWidth && tooltipMaxWidth) {
-            return {
-                maxWidth: tooltipMaxWidth < sizeMaxWidth ? tooltipMaxWidth : sizeMaxWidth,
-            };
-        }
-        return undefined;
-    };
-    const getArrowStaticSidePosition = () => {
-        if (placement && arrowRef.current) {
-            const { arrow } = middlewareData;
-            const side = placement.split('-')[0];
-            const staticSide = {
-                top: 'bottom',
-                right: 'left',
-                bottom: 'top',
-                left: 'right',
-            }[side];
-            const arrowEl = arrowRef.current;
-            const offset = staticSide === 'top' || staticSide === 'bottom'
-                ? arrowEl.offsetHeight
-                : (arrowEl.offsetHeight + arrowEl.offsetWidth) / 2;
-            return {
-                left: arrow === null || arrow === void 0 ? void 0 : arrow.x,
-                top: arrow === null || arrow === void 0 ? void 0 : arrow.y,
-                [staticSide]: offset && -Math.floor(offset),
-            };
-        }
-        return undefined;
-    };
-    return (React.createElement("div", Object.assign({ ref: tooltipRef, className: classNames(classProps.popoverClassName, contentStyleProps.className) }, contentOtherProps, getFloatingProps(), { style: Object.assign(Object.assign({ position, top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }, getMaxHeightAndWidth()), contentStyleProps.style), "data-spirit-element": "tooltip", "data-spirit-placement": placement }),
-        children,
-        renderCloseButton,
-        React.createElement("span", { ref: arrowRef, className: classProps.arrowClassName, "data-spirit-element": "tooltip-arrow", style: Object.assign({ position: 'absolute' }, getArrowStaticSidePosition()) })));
-};
-TooltipPopover.spiritComponent = 'TooltipPopover';
-
-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 = {
-    elementType: 'button',
-    children: null,
-};
-const TooltipTrigger = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$1), props);
-    const { elementType: ElementTag = 'button', children } = propsWithDefaults, restProps = __rest$3(propsWithDefaults, ["elementType", "children"]);
-    const { id, isOpen, triggerRef, getReferenceProps } = useTooltipContext();
-    const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { triggerStyleProps, transferProps });
-    return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps, { id: id, ref: triggerRef }, getReferenceProps()), typeof children === 'function' ? children({ isOpen }) : children));
-};
-TooltipTrigger.spiritComponent = 'TooltipTrigger';
-
-(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;
-};
-
-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 PricingPlanFeatureTitle = (_a) => {
-    var { feature, featureId } = _a, restProps = __rest$2(_a, ["feature", "featureId"]);
-    const { modalContent, title, tooltipContent } = feature;
-    const { classProps } = usePricingPlanStyleProps(restProps);
-    const [isTooltipOpen, toggleTooltip] = useToggle(false);
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
-    if (modalContent) {
-        return (React.createElement("div", { className: classProps.body.featureTitle },
-            React.createElement(Icon, { name: "check-plain", boxSize: 16 }),
-            React.createElement("button", { type: "button", onClick: () => setIsModalOpen(true), className: classNames(classProps.body.featureTitleText, 'text-underlined-dotted') }, title),
-            React.createElement(Modal, { id: `${featureId}-modal`, isOpen: isModalOpen, onClose: () => setIsModalOpen(false) },
-                React.createElement(ModalDialog, { isScrollable: true },
-                    React.createElement(ModalHeader, null, title),
-                    React.createElement(ModalBody, null, modalContent)))));
-    }
-    if (tooltipContent) {
-        return (React.createElement(Tooltip, { elementType: "div", id: `${featureId}-tooltip`, isDismissible: true, isOpen: isTooltipOpen, onToggle: toggleTooltip, placement: "top", trigger: ['click'], UNSAFE_className: classProps.body.featureTitle },
-            React.createElement(Icon, { name: "check-plain", boxSize: 16 }),
-            React.createElement(TooltipTrigger, { elementType: "button", UNSAFE_className: classNames(classProps.body.featureTitleText, 'text-underlined-dotted') }, title),
-            React.createElement(TooltipPopover, null,
-                React.createElement("div", null, tooltipContent))));
-    }
-    return (React.createElement("div", { className: classProps.body.featureTitle },
-        React.createElement(Icon, { name: "check-plain", boxSize: 16 }),
-        React.createElement("div", { className: classProps.body.featureTitleText, id: `${featureId}-title` }, title)));
-};
-PricingPlanFeatureTitle.spiritComponent = 'PricingPlanFeatureTitle';
-
-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 = {
-    description: undefined,
-    features: [],
-};
-const PricingPlanBody = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
-    const { description, elementType: ElementTag = 'div', features = [], id } = propsWithDefaults, restProps = __rest$1(propsWithDefaults, ["description", "elementType", "features", "id"]);
-    const { classProps, props: modifiedProps } = usePricingPlanStyleProps(restProps);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
-        classProps: classProps.body.root,
-        styleProps,
-    });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps),
-        description && React.createElement("div", null, description),
-        React.createElement("ul", { className: classProps.body.featureList }, features.map((feature, featureIndex) => {
-            const featureItemKey = `featureItem-${featureIndex}`;
-            const featureId = `${id}-feature-${featureIndex}`;
-            return (React.createElement("li", { className: classProps.body.featureItem, key: featureItemKey },
-                React.createElement(PricingPlanFeatureTitle, { feature: feature, featureId: featureId }),
-                React.createElement("div", { className: classProps.body.featureDescription }, feature.description)));
-        }))));
-};
-PricingPlanBody.spiritComponent = 'PricingPlanBody';
-
-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 PricingPlanFooter = (props) => {
-    const { children, elementType: ElementTag = 'footer' } = props, restProps = __rest(props, ["children", "elementType"]);
-    const { classProps, props: modifiedProps } = usePricingPlanStyleProps(restProps);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.footer, styleProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
-};
-PricingPlanFooter.spiritComponent = 'PricingPlanFooter';
-
-exports.PricingPlan = PricingPlan;
-exports.PricingPlanBody = PricingPlanBody;
-exports.PricingPlanFooter = PricingPlanFooter;
-exports.PricingPlanHeader = PricingPlanHeader;
-exports.usePricingPlanStyleProps = usePricingPlanStyleProps;
-//# sourceMappingURL=PricingPlan.cjs.map