@wix/design-system/dist/esm/Layout/Layout.js

@wix/design-system

import React, { useMemo } from 'react';
import { stVars as spacingStVars } from '../Foundation/stylable/spacing.st.css.js';
import { st, classes } from './Layout.st.css.js';
const formatSpacingValue = (value) => {
    if (typeof value === 'number') {
        return `${value}px`;
    }
    return spacingStVars[value] || `${value}`;
};
const Layout = ({ children, gap = '24px', cols, justifyItems, alignItems, rowHeight = 'auto', dataHook, height, className, }) => {
    const smartGap = useMemo(() => formatSpacingValue(gap), [gap]);
    return (React.createElement("div", { "data-hook": dataHook, "data-gap": smartGap, style: {
            height,
            gap: smartGap,
            justifyItems,
            alignItems,
            gridAutoRows: rowHeight,
            gridTemplateColumns: cols
                ? `repeat(${cols}, minmax(0, 1fr))`
                : undefined,
        }, className: st(classes.root, className), children: children }));
};
Layout.displayName = 'Layout';
export default Layout;
//# sourceMappingURL=Layout.js.map