@itcase/ui 1.0.1

package/dist/components/Dropdown.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Text.js');
+var index$1 = require('./Button.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../useStyles-77c3b520.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/horizontalResizeMode.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/width.js');
+require('./Icon.js');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Dropdown(props) {
+  props.id;
+    var className = props.className,
+    children = props.children,
+    set = props.set,
+    title = props.title,
+    label = props.label,
+    labelIcon = props.labelIcon;
+    props.labelIconOpen;
+    var labelIconFill = props.labelIconFill,
+    animationOpen = props.animationOpen,
+    animationClose = props.animationClose;
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = React.useState({
+      className: ''
+    }),
+    animationState = _useState2[0],
+    setAnimationState = _useState2[1];
+  var onClick = React.useCallback(function (event) {
+    setIsOpen(function (prevState) {
+      return !prevState;
+    });
+    setAnimationState(function (prevState) {
+      return {
+        className: prevState.className === animationOpen ? animationClose : animationOpen
+      };
+    });
+  }, []);
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dropdown_shape_',
+    propsKey: 'shape'
+  });
+  var titleTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'titleTextColor'
+  });
+  var titleSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'titleSize'
+  });
+  var titleTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'titleTextWeight'
+  });
+  var labelFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelFill'
+  });
+  var labelFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelFillHover'
+  });
+  var labelSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelSize'
+  });
+  var labelTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelTextColor'
+  });
+  var labelTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelTextSize'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, fillClass, fillHoverClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
+    onClick: onClick
+  }, title && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    textColor: titleTextColorClass,
+    size: titleSizeClass,
+    textWeight: titleTextWeightClass
+  }, title), /*#__PURE__*/React__default.default.createElement(index$1.Button, {
+    className: clsx__default.default('dropdown__button', isOpen ? 'dropdown__button_state_open' : 'dropdown__button_state_close'),
+    fill: labelFillClass,
+    fillHover: labelFillHoverClass,
+    size: labelSizeClass,
+    labelTextColor: labelTextColorClass,
+    labelSize: labelTextSizeClass,
+    label: label,
+    iconAfter: labelIcon,
+    iconAfterFill: labelIconFill
+  }), children && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "dropdown__wrapper"
+  }, children));
+}
+Dropdown.propTypes = {
+  className: PropTypes__default.default.string
+};
+Dropdown.defaultProps = {
+  animationOpen: 'dropdown_animation_open',
+  animationClose: 'dropdown_animation_close'
+};
+
+exports.Dropdown = Dropdown;

package/dist/components/Emoji.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('../constants/componentProps/fill.js');
+var direction = require('../constants/componentProps/direction.js');
+var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
+var shape = require('../constants/componentProps/shape.js');
+var emojiSize = require('../constants/componentProps/emojiSize.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Emoji(props) {
+  var children = props.children,
+    after = props.after,
+    before = props.before,
+    className = props.className,
+    emoji = props.emoji,
+    label = props.label,
+    type = props.type,
+    onClick = props.onClick;
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'emoji_direction_',
+    propsKey: 'direction'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'emoji_size_',
+    propsKey: 'size'
+  });
+  var emojiFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'emojiFill'
+  });
+  var emojiShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'emoji__icon-shape_',
+    propsKey: 'emojiShape'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'emoji_shape_',
+    propsKey: 'shape'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'resize-horizontal_',
+    propsKey: 'width'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    emojiStyles = _useStyles.styles,
+    emojiIconStyles = _useStyles.icon,
+    emojiWrapperStyles = _useStyles.wrapper;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'emoji', directionClass, fillClass, shapeClass, widthClass, type && "emoji_type_" + type),
+    onClick: onClick,
+    style: emojiStyles
+  }, before, emoji && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('emoji__icon', emojiFillClass, sizeClass, emojiShapeClass),
+    style: emojiIconStyles
+  }, emoji), (children || label) && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "emoji__wrapper",
+    style: emojiWrapperStyles
+  }, children || label), after);
+}
+Emoji.propTypes = {
+  children: PropTypes__default.default.any,
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  emoji: PropTypes__default.default.string,
+  size: PropTypes__default.default.oneOf(emojiSize.default),
+  sizeDesktop: PropTypes__default.default.oneOf(emojiSize.default),
+  sizeMobile: PropTypes__default.default.oneOf(emojiSize.default),
+  sizeTablet: PropTypes__default.default.oneOf(emojiSize.default),
+  emojiFill: PropTypes__default.default.oneOf(fill.default),
+  emojiFillDesktop: PropTypes__default.default.oneOf(fill.default),
+  emojiFillMobile: PropTypes__default.default.oneOf(fill.default),
+  emojiFillTablet: PropTypes__default.default.oneOf(fill.default),
+  emojiShape: PropTypes__default.default.oneOf(shape.default),
+  emojiShapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  emojiShapeMobile: PropTypes__default.default.oneOf(shape.default),
+  emojiShapeTablet: PropTypes__default.default.oneOf(shape.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  label: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  width: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthMobile: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthTablet: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthDesktop: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  onClick: PropTypes__default.default.func
+};
+Emoji.defaultProps = {
+  direction: 'horizontal',
+  shape: 'circular'
+};
+
+exports.Emoji = Emoji;

package/dist/components/Fader.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('../constants/componentProps/fill.js');
+var fillGradient = require('../constants/componentProps/fillGradient.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Fader(props) {
+  var className = props.className,
+    isFader = props.isFader,
+    type = props.type;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill-gradient_',
+    propsKey: 'fillGradient'
+  });
+  var opacityClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'opacity_',
+    propsKey: 'opacity'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    faderStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'fader', opacityClass, isFader && 'fader_state_visible', type && className + "_type_" + type, fillClass, fillGradientClass),
+    style: faderStyles
+  }, "\xA0");
+}
+Fader.propTypes = {
+  className: PropTypes__default.default.string,
+  opacity: PropTypes__default.default.string,
+  opacityDesktop: PropTypes__default.default.string,
+  opacityMobile: PropTypes__default.default.string,
+  opacityTablet: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillGradient: PropTypes__default.default.oneOf(fillGradient.default),
+  fillGradientMobile: PropTypes__default.default.oneOf(fillGradient.default),
+  fillGradientTablet: PropTypes__default.default.oneOf(fillGradient.default),
+  fillGradientDesktop: PropTypes__default.default.oneOf(fillGradient.default),
+  type: PropTypes__default.default.string,
+  isFader: PropTypes__default.default.any
+};
+
+exports.Fader = Fader;

package/dist/components/Flex.js

@@ -0,0 +1,264 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var direction = require('../constants/componentProps/direction.js');
+var fill = require('../constants/componentProps/fill.js');
+var flexAlign = require('../constants/componentProps/flexAlign.js');
+var flexJustifyContent = require('../constants/componentProps/flexJustifyContent.js');
+var flexWrap = require('../constants/componentProps/flexWrap.js');
+var shape = require('../constants/componentProps/shape.js');
+var width = require('../constants/componentProps/width.js');
+var position = require('../constants/componentProps/position.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Flex(props) {
+  var id = props.id,
+    children = props.children,
+    className = props.className,
+    Tag = props.tag,
+    type = props.type,
+    onClick = props.onClick;
+  var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex_align-content_',
+    propsKey: 'alignContent'
+  });
+  var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex_align-items_',
+    propsKey: 'alignItems'
+  });
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex_wrap_',
+    propsKey: 'wrap'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex_direction_',
+    propsKey: 'direction'
+  });
+  var flowClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex_flow_',
+    propsKey: 'flow'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex_shape_',
+    propsKey: 'shape'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_',
+    propsKey: 'borderType'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    flexStyles = _useStyles.styles,
+    flexWrapperStyles = _useStyles.wrapper;
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'flex', widthClass, alignContentClass, alignItemsClass, directionClass, fillClass, flowClass, borderClass, borderTypeClass, positionClass, justifyContentClass, shapeClass, type && "flex_type_" + type, wrapClass),
+    id: id,
+    style: flexStyles,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "flex__wrapper",
+    style: flexWrapperStyles
+  }, children));
+}
+Flex.propTypes = {
+  id: PropTypes__default.default.string,
+  alignContent: PropTypes__default.default.oneOf(flexAlign.default),
+  alignContentDesktop: PropTypes__default.default.oneOf(flexAlign.default),
+  alignContentMobile: PropTypes__default.default.oneOf(flexAlign.default),
+  alignContentTablet: PropTypes__default.default.oneOf(flexAlign.default),
+  alignItems: PropTypes__default.default.oneOf(flexAlign.default),
+  alignItemsDesktop: PropTypes__default.default.oneOf(flexAlign.default),
+  alignItemsMobile: PropTypes__default.default.oneOf(flexAlign.default),
+  alignItemsTablet: PropTypes__default.default.oneOf(flexAlign.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  flow: PropTypes__default.default.string,
+  flowDesktop: PropTypes__default.default.string,
+  flowMobile: PropTypes__default.default.string,
+  flowTablet: PropTypes__default.default.string,
+  justifyContent: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  justifyContentDesktop: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  justifyContentMobile: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  justifyContentTablet: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  justifyItems: PropTypes__default.default.oneOf(flexAlign.default),
+  justifyItemsDesktop: PropTypes__default.default.oneOf(flexAlign.default),
+  justifyItemsMobile: PropTypes__default.default.oneOf(flexAlign.default),
+  justifyItemsTablet: PropTypes__default.default.oneOf(flexAlign.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  position: PropTypes__default.default.oneOf(position.default),
+  positionMobile: PropTypes__default.default.oneOf(position.default),
+  positionTablet: PropTypes__default.default.oneOf(position.default),
+  positionDesktop: PropTypes__default.default.oneOf(position.default),
+  tag: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  width: PropTypes__default.default.oneOf(width.default),
+  widthMobile: PropTypes__default.default.oneOf(width.default),
+  widthTablet: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default),
+  wrap: PropTypes__default.default.oneOf(flexWrap.default),
+  wrapDesktop: PropTypes__default.default.oneOf(flexWrap.default),
+  wrapMobile: PropTypes__default.default.oneOf(flexWrap.default),
+  wrapTablet: PropTypes__default.default.oneOf(flexWrap.default),
+  onClick: PropTypes__default.default.func
+};
+Flex.defaultProps = {
+  tag: 'div'
+};
+
+function FlexItem(props) {
+  var children = props.children,
+    className = props.className;
+  var alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex__item_align-self_',
+    propsKey: 'alignSelf'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex__item_direction_',
+    propsKey: 'direction'
+  });
+  var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex__item_grow_',
+    propsKey: 'grow'
+  });
+  var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex__item_align-items_',
+    propsKey: 'alignItems'
+  });
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex__item_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex__item_shape_',
+    propsKey: 'shape'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'resize-horizontal_',
+    propsKey: 'width'
+  });
+  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex__item_wrap_',
+    propsKey: 'wrap'
+  });
+  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    flexItemStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass),
+    style: flexItemStyles
+  }, children);
+}
+FlexItem.propTypes = {
+  alignItems: PropTypes__default.default.oneOf(flexAlign.default),
+  alignItemsDesktop: PropTypes__default.default.oneOf(flexAlign.default),
+  alignItemsMobile: PropTypes__default.default.oneOf(flexAlign.default),
+  alignItemsTablet: PropTypes__default.default.oneOf(flexAlign.default),
+  alignSelf: PropTypes__default.default.oneOf(flexAlign.default),
+  alignSelfDesktop: PropTypes__default.default.oneOf(flexAlign.default),
+  alignSelfMobile: PropTypes__default.default.oneOf(flexAlign.default),
+  alignSelfTablet: PropTypes__default.default.oneOf(flexAlign.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  columnEnd: PropTypes__default.default.number,
+  columnEndDesktop: PropTypes__default.default.number,
+  columnEndMobile: PropTypes__default.default.number,
+  columnEndTablet: PropTypes__default.default.number,
+  columnSpan: PropTypes__default.default.string,
+  columnSpanDesktop: PropTypes__default.default.string,
+  columnSpanMobile: PropTypes__default.default.string,
+  columnSpanTablet: PropTypes__default.default.string,
+  columnStart: PropTypes__default.default.number,
+  columnStartDesktop: PropTypes__default.default.number,
+  columnStartMobile: PropTypes__default.default.number,
+  columnStartTablet: PropTypes__default.default.number,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  grow: PropTypes__default.default.number,
+  growDesktop: PropTypes__default.default.number,
+  growMobile: PropTypes__default.default.number,
+  growTablet: PropTypes__default.default.number,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  justifyContent: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  justifyContentDesktop: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  justifyContentMobile: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  justifyContentTablet: PropTypes__default.default.oneOf(flexJustifyContent.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  width: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthMobile: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthTablet: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthDesktop: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  position: PropTypes__default.default.oneOf(position.default),
+  positionMobile: PropTypes__default.default.oneOf(position.default),
+  positionTablet: PropTypes__default.default.oneOf(position.default),
+  positionDesktop: PropTypes__default.default.oneOf(position.default),
+  wrap: PropTypes__default.default.oneOf(flexWrap.default),
+  wrapDesktop: PropTypes__default.default.oneOf(flexWrap.default),
+  wrapMobile: PropTypes__default.default.oneOf(flexWrap.default),
+  wrapTablet: PropTypes__default.default.oneOf(flexWrap.default)
+};
+
+exports.Flex = Flex;
+exports.FlexItem = FlexItem;