@awsui/components-react/box/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import React from 'react';
import { getBaseProps } from '../internal/base-component';
import clsx from 'clsx';
import styles from './styles.css.js';
import { useTelemetry } from '../internal/hooks/use-telemetry';
export default function Box(_a) {
    var _b = _a.variant, variant = _b === void 0 ? 'div' : _b, _c = _a.margin, margin = _c === void 0 ? {} : _c, _d = _a.padding, padding = _d === void 0 ? {} : _d, display = _a.display, textAlign = _a.textAlign, float = _a.float, fontSize = _a.fontSize, fontWeight = _a.fontWeight, color = _a.color, children = _a.children, rest = __rest(_a, ["variant", "margin", "padding", "display", "textAlign", "float", "fontSize", "fontWeight", "color", "children"]);
    useTelemetry('Box');
    var baseProps = getBaseProps(rest);
    var marginsClassNamesSuffices = getClassNamesSuffixes(margin);
    var paddingsClassNamesSuffices = getClassNamesSuffixes(padding);
    var Tag = variant;
    var className = clsx(baseProps.className, styles.root, styles.box, styles[variant + "-variant"], marginsClassNamesSuffices.map(function (suffix) { return styles["m-" + suffix]; }), paddingsClassNamesSuffices.map(function (suffix) { return styles["p-" + suffix]; }), styles["d-" + display], styles["f-" + float], styles["color-" + (color || 'default')], styles["font-size-" + (fontSize || 'default')], styles["font-weight-" + (fontWeight || 'default')], styles["t-" + textAlign]);
    return (React.createElement(Tag, __assign({}, baseProps, { className: className }), children));
}
var getClassNamesSuffixes = function (value) {
    if (typeof value === 'string') {
        return [value];
    }
    var sides = ['top', 'right', 'bottom', 'left', 'horizontal', 'vertical'];
    return sides.filter(function (side) { return !!value[side]; }).map(function (side) { return side + "-" + value[side]; });
};