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

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { getBaseProps } from '../internal/base-component';
import WithNativeAttributes from '../internal/utils/with-native-attributes';
import styles from './styles.css.js';
export default function InternalBox({ variant = 'div', tagOverride, margin = {}, padding = {}, display, textAlign, float, fontSize, fontWeight, color, children, nativeAttributes, __internalRootRef, ...props }) {
    const baseProps = getBaseProps(props);
    const marginsClassNamesSuffices = getClassNamesSuffixes(margin);
    const paddingsClassNamesSuffices = getClassNamesSuffixes(padding);
    const className = clsx(baseProps.className, styles.root, styles.box, styles[`${variant.replace(/^awsui-/, '')}-variant`], marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]), paddingsClassNamesSuffices.map(suffix => 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(WithNativeAttributes, { ...baseProps, tag: getTag(variant, tagOverride), componentName: "Box", nativeAttributes: nativeAttributes, className: className, ref: __internalRootRef }, children));
}
const getClassNamesSuffixes = (value) => {
    if (typeof value === 'string') {
        return [value];
    }
    const sides = ['top', 'right', 'bottom', 'left', 'horizontal', 'vertical'];
    return sides.filter(side => !!value[side]).map(side => `${side}-${value[side]}`);
};
const getTag = (variant, tagOverride) => {
    if (tagOverride) {
        return tagOverride;
    }
    if (variant === 'awsui-value-large') {
        return 'span';
    }
    if (variant === 'awsui-key-label' || variant === 'awsui-gen-ai-label') {
        return 'div';
    }
    if (variant === 'awsui-inline-code') {
        return 'code';
    }
    return variant;
};
//# sourceMappingURL=internal.js.map