@metamask/design-system-react-native/dist/components/Box/Box.cjs

Design System React Native

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Box = void 0;
const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native/index.js");
const Box_constants_1 = require("./Box.constants.cjs");
const Box = ({ flexDirection, flexWrap, gap, alignItems, justifyContent, margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical, borderWidth, borderColor, backgroundColor, twClassName = '', style, children, ...props }) => {
    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
    const twContainerClassNames = tw `
    flex
    ${flexDirection ?? ''} 
    ${flexWrap ?? ''} 
    ${gap !== undefined ? Box_constants_1.TWCLASSMAP_BOX_GAP[gap] : ''} 
    ${alignItems ?? ''} 
    ${justifyContent ?? ''}
    ${margin !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN[margin] : ''}
    ${marginTop !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_TOP[marginTop] : ''}
    ${marginRight !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight] : ''}
    ${marginBottom !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom] : ''}
    ${marginLeft !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft] : ''}
    ${marginHorizontal !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_HORIZONTAL[marginHorizontal] : ''}
    ${marginVertical !== undefined ? Box_constants_1.TWCLASSMAP_BOX_MARGIN_VERTICAL[marginVertical] : ''}
    ${padding !== undefined ? Box_constants_1.TWCLASSMAP_BOX_PADDING[padding] : ''}
    ${paddingTop !== undefined ? Box_constants_1.TWCLASSMAP_BOX_PADDING_TOP[paddingTop] : ''}
    ${paddingRight !== undefined ? Box_constants_1.TWCLASSMAP_BOX_PADDING_RIGHT[paddingRight] : ''}
    ${paddingBottom !== undefined ? Box_constants_1.TWCLASSMAP_BOX_PADDING_BOTTOM[paddingBottom] : ''}
    ${paddingLeft !== undefined ? Box_constants_1.TWCLASSMAP_BOX_PADDING_LEFT[paddingLeft] : ''}
    ${paddingHorizontal !== undefined ? Box_constants_1.TWCLASSMAP_BOX_PADDING_HORIZONTAL[paddingHorizontal] : ''}
    ${paddingVertical !== undefined ? Box_constants_1.TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical] : ''}
    ${borderWidth !== undefined ? Box_constants_1.TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth] : ''}
    ${borderColor ?? ''}
    ${backgroundColor ?? ''}
    ${twClassName}`;
    return (<react_native_1.View style={[twContainerClassNames, style]} {...props}>
      {children}
    </react_native_1.View>);
};
exports.Box = Box;
//# sourceMappingURL=Box.cjs.map