jobiqo-cl/lib/src/components/02-atoms/06-layout/03-flex/02-flex-item/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index_esm$9 = require('../../../../../../node_modules/@styled-system/space/dist/index.esm.js');
require('../../../../../../node_modules/styled-system/dist/index.esm.js');

/**
 * @file index.tsx
 *
 * @fileoverview Renders a single flex item.
 */
/**
 * Will align content provide in the children property centerally.
 * Use this component when you want to align something centerally.
 */
const StyledFlexItem = styled__default.div `
	align-self: ${props => props.alignSelf};
	justify-self: ${props => props.justifySelf};
	${props => (props.flex ? `flex: ${props.flex};` : ``)}
	${index_esm$9.space}
`;
/**
 * Display multiple items in a flex structure. Useful for laying single dimensionally
 * a set of items together.
 */
const FlexItem = (_a) => {
    var { alignSelf = 'auto', justifySelf = 'auto', flex, children } = _a, props = tslib_es6.__rest(_a, ["alignSelf", "justifySelf", "flex", "children"]);
    return (React__default.createElement(StyledFlexItem, Object.assign({ alignSelf: alignSelf, justifySelf: justifySelf, flex: flex }, props), children));
};

exports.FlexItem = FlexItem;
exports.default = FlexItem;