@alma-oss/spirit-web-react 4.0.0

package/components/Accordion/useAccordionAriaProps.d.ts

@@ -0,0 +1,23 @@
+import { type Booleanish } from '../../types';
+declare const NAME_ARIA_EXPANDED = "aria-expanded";
+declare const NAME_ARIA_CONTROLS = "aria-controls";
+declare const NAME_ARIA_LABELEDBY = "aria-labelledby";
+export interface AccordionAriaProps {
+    id: string | undefined;
+    isOpen: boolean;
+}
+export interface AccordionAriaPropsReturn {
+    headerProps: {
+        id: string;
+    };
+    triggerProps: {
+        [NAME_ARIA_EXPANDED]: Booleanish;
+        [NAME_ARIA_CONTROLS]: string;
+    };
+    contentProps: {
+        id: string;
+        [NAME_ARIA_LABELEDBY]: string;
+    };
+}
+export declare const useAccordionAriaProps: ({ id, isOpen }: AccordionAriaProps) => AccordionAriaPropsReturn;
+export {};

package/components/Accordion/useAccordionAriaProps.js

@@ -0,0 +1,24 @@
+const NAME_ARIA_EXPANDED = 'aria-expanded';
+const NAME_ARIA_CONTROLS = 'aria-controls';
+const NAME_ARIA_LABELEDBY = 'aria-labelledby';
+export const useAccordionAriaProps = ({ id, isOpen }) => {
+    const headerId = `${id}_Header`;
+    const contentId = `${id}_Content`;
+    const headerProps = {
+        id: headerId,
+    };
+    const triggerProps = {
+        [NAME_ARIA_EXPANDED]: isOpen,
+        [NAME_ARIA_CONTROLS]: contentId,
+    };
+    const contentProps = {
+        id: contentId,
+        [NAME_ARIA_LABELEDBY]: headerId,
+    };
+    return {
+        headerProps,
+        triggerProps,
+        contentProps,
+    };
+};
+//# sourceMappingURL=useAccordionAriaProps.js.map

package/components/Accordion/useAccordionAriaProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccordionAriaProps.js","sourceRoot":"","sources":["../../../src/components/Accordion/useAccordionAriaProps.ts"],"names":[],"mappings":"AAEA,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAC3C,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAC3C,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AA0B9C,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,EAAsB,EAA4B,EAAE;IACpG,MAAM,QAAQ,GAAG,GAAG,EAAE,SAAS,CAAC;IAChC,MAAM,SAAS,GAAG,GAAG,EAAE,UAAU,CAAC;IAElC,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,QAAQ;KACb,CAAC;IACF,MAAM,YAAY,GAAG;QACnB,CAAC,kBAAkB,CAAC,EAAE,MAAM;QAC5B,CAAC,kBAAkB,CAAC,EAAE,SAAS;KAChC,CAAC;IACF,MAAM,YAAY,GAAG;QACnB,EAAE,EAAE,SAAS;QACb,CAAC,mBAAmB,CAAC,EAAE,QAAQ;KAChC,CAAC;IAEF,OAAO;QACL,WAAW;QACX,YAAY;QACZ,YAAY;KACb,CAAC;AACJ,CAAC,CAAC"}

package/components/Accordion/useAccordionStyleProps.d.ts

@@ -0,0 +1,13 @@
+export interface AccordionStyleReturn {
+    classProps: {
+        root: string;
+        item: string;
+        header: string;
+        toggle: string;
+        side: string;
+        slot: string;
+        icon: string;
+        content: string;
+    };
+}
+export declare const useAccordionStyleProps: () => AccordionStyleReturn;

package/components/Accordion/useAccordionStyleProps.js

@@ -0,0 +1,24 @@
+import { useClassNamePrefix } from "../../hooks/index.js";
+export const useAccordionStyleProps = () => {
+    const accordionClass = useClassNamePrefix('Accordion');
+    const accordionItemClass = `${accordionClass}__item`;
+    const accordionItemHeaderClass = `${accordionClass}__itemHeader`;
+    const accordionItemToggleClass = `${accordionClass}__itemToggle`;
+    const accordionItemSideClass = `${accordionClass}__itemSide`;
+    const accordionItemSlotClass = `${accordionClass}__itemSlot`;
+    const accordionItemIconClass = `${accordionClass}__itemIcon`;
+    const accordionItemContentClass = `${accordionClass}__content`;
+    return {
+        classProps: {
+            root: accordionClass,
+            item: accordionItemClass,
+            header: accordionItemHeaderClass,
+            toggle: accordionItemToggleClass,
+            side: accordionItemSideClass,
+            slot: accordionItemSlotClass,
+            icon: accordionItemIconClass,
+            content: accordionItemContentClass,
+        },
+    };
+};
+//# sourceMappingURL=useAccordionStyleProps.js.map

package/components/Accordion/useAccordionStyleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccordionStyleProps.js","sourceRoot":"","sources":["../../../src/components/Accordion/useAccordionStyleProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAgBjD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAyB,EAAE;IAC/D,MAAM,cAAc,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvD,MAAM,kBAAkB,GAAG,GAAG,cAAc,QAAQ,CAAC;IACrD,MAAM,wBAAwB,GAAG,GAAG,cAAc,cAAc,CAAC;IACjE,MAAM,wBAAwB,GAAG,GAAG,cAAc,cAAc,CAAC;IACjE,MAAM,sBAAsB,GAAG,GAAG,cAAc,YAAY,CAAC;IAC7D,MAAM,sBAAsB,GAAG,GAAG,cAAc,YAAY,CAAC;IAC7D,MAAM,sBAAsB,GAAG,GAAG,cAAc,YAAY,CAAC;IAC7D,MAAM,yBAAyB,GAAG,GAAG,cAAc,WAAW,CAAC;IAE/D,OAAO;QACL,UAAU,EAAE;YACV,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,kBAAkB;YACxB,MAAM,EAAE,wBAAwB;YAChC,MAAM,EAAE,wBAAwB;YAChC,IAAI,EAAE,sBAAsB;YAC5B,IAAI,EAAE,sBAAsB;YAC5B,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE,yBAAyB;SACnC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/components/Accordion/useOpenItem.d.ts

@@ -0,0 +1,3 @@
+export declare const useOpenItem: (id: string | undefined) => {
+    isOpen: boolean;
+};

package/components/Accordion/useOpenItem.js

@@ -0,0 +1,14 @@
+import { useAccordionContext } from "./AccordionContext.js";
+export const useOpenItem = (id) => {
+    const { open } = useAccordionContext();
+    const isOpen = (iid) => {
+        if (iid) {
+            return !!(iid === open || (open === null || open === void 0 ? void 0 : open.includes(iid)));
+        }
+        return false;
+    };
+    return {
+        isOpen: isOpen(id),
+    };
+};
+//# sourceMappingURL=useOpenItem.js.map

package/components/Accordion/useOpenItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenItem.js","sourceRoot":"","sources":["../../../src/components/Accordion/useOpenItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,EAAsB,EAGtB,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEvC,MAAM,MAAM,GAAG,CAAC,GAAuB,EAAW,EAAE;QAClD,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,GAAG,CAAC,CAAA,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,OAAO;QACL,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;KACnB,CAAC;AACJ,CAAC,CAAC"}

package/components/ActionGroup/ActionGroup.cjs

@@ -0,0 +1,541 @@
+'use strict';
+
+var React = require('react');
+var spiritDesignTokens = require('@alma-oss/spirit-design-tokens');
+var classNames = require('classnames');
+require('html-dom-parser');
+require('html-react-parser/lib/dom-to-react');
+
+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 createUppercaseKeyDictionary(obj) {
+    return Object.fromEntries(Object.keys(obj).map((key) => [key.toUpperCase(), key]));
+}
+const AlignmentX = {
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right',
+};
+const AlignmentXExtended = Object.assign({ SPACE_BETWEEN: 'space-between', STRETCH: 'stretch' }, AlignmentX);
+const AlignmentY = {
+    TOP: 'top',
+    CENTER: 'center',
+    BOTTOM: 'bottom',
+};
+const AlignmentYExtended = Object.assign({ BASELINE: 'baseline', STRETCH: 'stretch' }, AlignmentY);
+createUppercaseKeyDictionary(spiritDesignTokens.componentColors.button);
+createUppercaseKeyDictionary(spiritDesignTokens.emotionColors);
+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$4(_a, ["MAXWIDTH", "PADDING"]);
+
+const Direction = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+const DirectionExtended = 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 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 defaultContext$1 = undefined;
+const ClassNamePrefixContext = React.createContext(defaultContext$1);
+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;
+
+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 camelCaseToKebabCase = (input) => input.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+const kebabCaseToCamelCase = (input) => input.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+const kebabCaseToCamelCaseValues = (input) => {
+    if (typeof input === 'object' && input !== null) {
+        const result = {};
+        for (const [key, value] of Object.entries(input)) {
+            result[key] = typeof value === 'string' ? kebabCaseToCamelCase(value) : value;
+        }
+        return result;
+    }
+    return input;
+};
+const stringOrObjectKebabCaseToCamelCase = (input) => {
+    if (typeof input === 'string') {
+        return kebabCaseToCamelCase(input);
+    }
+    if (typeof input === 'object' && input !== null) {
+        return kebabCaseToCamelCaseValues(input);
+    }
+    return input;
+};
+
+function toPascalCase(str) {
+    if (typeof str !== 'string') {
+        return str;
+    }
+    return str
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}
+
+function generateStaticStylePropsClasses(componentClass, property, type) {
+    return `${componentClass}--${type || ''}${type ? toPascalCase(property) : property}`;
+}
+function generateResponsiveStylePropsClasses(componentClass, property, type) {
+    return Object.keys(property)
+        .map((key) => {
+        const infix = key === 'mobile' ? '' : `--${key}`;
+        const responsiveProperty = property[key];
+        return `${componentClass}${infix}--${type || ''}${type ? toPascalCase(responsiveProperty) : responsiveProperty}`;
+    })
+        .join(' ');
+}
+function isResponsiveProperty(property) {
+    return property && typeof property === 'object';
+}
+function generateStylePropsClassNames(componentClass, property, type) {
+    const generate = isResponsiveProperty(property)
+        ? generateResponsiveStylePropsClasses
+        : generateStaticStylePropsClasses;
+    return generate(componentClass, property, type);
+}
+
+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$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;
+};
+function useStyleProps(props, additionalUtilities) {
+    const classNamePrefix = React.useContext(ClassNamePrefixContext);
+    const { UNSAFE_className, UNSAFE_style } = props, otherProps = __rest$3(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 DEFAULT_MOBILE_ALIGNMENT = 'stretch';
+function useAlignmentClass(componentClass, property, type) {
+    const responsiveProperty = property && typeof property === 'object' ? Object.assign({ mobile: DEFAULT_MOBILE_ALIGNMENT }, property) : property;
+    return generateStylePropsClassNames(componentClass, responsiveProperty, type);
+}
+
+const useClassNamePrefix = (className) => {
+    const classNamePrefix = React.useContext(ClassNamePrefixContext);
+    let prefixedClassName = className;
+    if (classNamePrefix) {
+        prefixedClassName = applyClassNamePrefix(classNamePrefix)(className);
+    }
+    else if (classNamePrefix) {
+        prefixedClassName = classNamePrefix;
+    }
+    return prefixedClassName;
+};
+
+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 = undefined;
+const IconsContext = React.createContext(defaultContext);
+IconsContext.Provider;
+IconsContext.Consumer;
+
+function useSpacingStyle(spacing, prefix, direction = undefined) {
+    const style = {};
+    const directionSuffix = direction ? `-${direction}` : '';
+    if (typeof spacing === 'object' && spacing !== null) {
+        Object.keys(spacing).forEach((key) => {
+            var _a;
+            const breakpointSuffix = key === 'mobile' ? '' : `-${key}`;
+            style[`--${prefix}-spacing${directionSuffix}${breakpointSuffix}`] =
+                `var(--${spiritDesignTokens.cssVariablePrefix}${(_a = spacing[key]) === null || _a === void 0 ? void 0 : _a.toString()})`;
+        });
+    }
+    else if (spacing) {
+        style[`--${prefix}-spacing${directionSuffix}`] =
+            `var(--${spiritDesignTokens.cssVariablePrefix}${spacing})`;
+    }
+    return style;
+}
+
+const WRAP_CLASS = '--wrap';
+const NO_WRAP_CLASS = '--noWrap';
+function useWrapClass(componentClass, property) {
+    if (typeof property === 'object' && property !== null) {
+        return Object.entries(property)
+            .map(([key, responsiveProperty]) => {
+            const infix = key === 'mobile' ? '' : `--${key}`;
+            return `${componentClass}${infix}${responsiveProperty ? WRAP_CLASS : NO_WRAP_CLASS}`;
+        })
+            .join(' ');
+    }
+    return `${componentClass}${property ? WRAP_CLASS : NO_WRAP_CLASS}`;
+}
+
+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;
+};
+function useFlexStyleProps(props) {
+    const { alignmentX, alignmentY, direction, spacing, spacingX, spacingY, isWrapping } = props, restProps = __rest$2(props, ["alignmentX", "alignmentY", "direction", "spacing", "spacingX", "spacingY", "isWrapping"]);
+    useDeprecationMessage({
+        method: 'custom',
+        trigger: direction === 'row' || direction === 'column',
+        componentName: 'Flex',
+        customText: 'Direction values `row` and `column` are deprecated and will be removed in the next major release. Use `horizontal` and `vertical` values instead.',
+    });
+    const flexClass = useClassNamePrefix('Flex');
+    const flexStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, useSpacingStyle(spacing, 'flex', DirectionAxis.X)), useSpacingStyle(spacing, 'flex', DirectionAxis.Y)), useSpacingStyle(spacingX, 'flex', DirectionAxis.X)), useSpacingStyle(spacingY, 'flex', DirectionAxis.Y));
+    const directionClass = generateStylePropsClassNames(flexClass, stringOrObjectKebabCaseToCamelCase(direction));
+    const classes = classNames(flexClass, useWrapClass(flexClass, isWrapping), {
+        [useAlignmentClass(flexClass, alignmentX, 'alignmentX')]: alignmentX,
+        [useAlignmentClass(flexClass, alignmentY, 'alignmentY')]: alignmentY,
+        [directionClass]: direction,
+    });
+    return {
+        classProps: classes,
+        props: restProps,
+        styleProps: flexStyle,
+    };
+}
+
+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$1 = {
+    alignmentX: AlignmentXExtended.STRETCH,
+    alignmentY: AlignmentYExtended.STRETCH,
+    direction: DirectionExtended.HORIZONTAL,
+    elementType: 'div',
+    isWrapping: false,
+};
+const Flex = (props) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$1), props);
+    const { elementType: ElementTag = 'div', direction, children } = propsWithDefaults, restProps = __rest$1(propsWithDefaults, ["elementType", "direction", "children"]);
+    const { classProps, props: modifiedProps, styleProps: flexStyle } = useFlexStyleProps(Object.assign({ direction }, restProps));
+    const { styleProps, props: otherProps } = useStyleProps(Object.assign({}, modifiedProps));
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, flexStyle, styleProps, otherProps });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+};
+Flex.spiritComponent = 'Flex';
+
+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 defaultProps = {
+    alignmentX: {
+        mobile: AlignmentXExtended.STRETCH,
+        tablet: AlignmentXExtended.LEFT,
+    },
+    direction: {
+        mobile: DirectionExtended.VERTICAL,
+        tablet: DirectionExtended.HORIZONTAL,
+    },
+};
+const ActionGroup = (props) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), restProps);
+    return React.createElement(Flex, Object.assign({}, propsWithDefaults), children);
+};
+ActionGroup.spiritComponent = 'ActionGroup';
+
+exports.ActionGroup = ActionGroup;
+//# sourceMappingURL=ActionGroup.cjs.map