@itcase/ui 1.0.1

package/dist/components/FormField.js

@@ -0,0 +1,289 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var direction = require('../constants/componentProps/direction.js');
+var size = require('../constants/componentProps/size.js');
+var index$2 = require('./Divider.js');
+var index = require('./Text.js');
+var index$1 = require('./Icon.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index$3 = require('./RadioButton.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+var index$4 = require('./Switch.js');
+var SelectContainer = require('../SelectContainer-e2544642.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/width.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('react-select');
+require('../objectWithoutProperties-ea190611.js');
+require('react-dom');
+
+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 FormField(props) {
+  var id = props.id,
+    children = props.children,
+    afterItem = props.afterItem,
+    beforeItem = props.beforeItem,
+    dividerWidth = props.dividerWidth,
+    dividerDirection = props.dividerDirection,
+    set = props.set,
+    className = props.className,
+    dividerSize = props.dividerSize,
+    dividerFill = props.dividerFill,
+    descSize = props.descSize,
+    descTextWidth = props.descTextWidth,
+    descTextColor = props.descTextColor,
+    desc = props.desc,
+    label = props.label,
+    labelSize = props.labelSize,
+    labelTextWidth = props.labelTextWidth,
+    labelTextColor = props.labelTextColor,
+    clearIconFill = props.clearIconFill,
+    clearIcon = props.clearIcon,
+    clearIconSize = props.clearIconSize,
+    messageSize = props.messageSize,
+    messageTextWidth = props.messageTextWidth,
+    messageTextColor = props.messageTextColor,
+    message = props.message;
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field_size_',
+    propsKey: 'size'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field_shape_',
+    propsKey: 'shape'
+  });
+  var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-field__item-value_shape_',
+    propsKey: 'inputShape'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    formFieldStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'form-field', set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, directionClass),
+    style: formFieldStyles
+  }, label && /*#__PURE__*/React__default.default.createElement("label", {
+    htmlFor: id,
+    className: "form-field__label"
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+    size: labelSize,
+    textWeight: labelTextWidth,
+    textColor: labelTextColor
+  }, label)), desc && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-field__desc"
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+    size: descSize,
+    textWeight: descTextWidth,
+    textColor: descTextColor
+  }, desc)), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-field__item', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('form-field__item-wrapper')
+  }, beforeItem, children, clearIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    fill: clearIconFill,
+    SvgImage: clearIcon,
+    size: clearIconSize
+  }), afterItem), /*#__PURE__*/React__default.default.createElement(index$2.Divider, {
+    className: "form-field__item-divider",
+    width: dividerWidth,
+    direction: dividerDirection,
+    size: dividerSize,
+    fill: dividerFill
+  })), message && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "form-field__message"
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+    size: messageSize,
+    textWeight: messageTextWidth,
+    textColor: messageTextColor
+  }, message)));
+}
+FormField.propTypes = {
+  id: PropTypes__default.default.string,
+  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),
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
+  dividerSize: PropTypes__default.default.string,
+  dividerFill: PropTypes__default.default.string,
+  style: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func
+};
+FormField.defaultProps = {
+  dividerWidth: 'fill',
+  dividerDirection: 'horizontal'
+};
+
+function ChoiceField(props) {
+  var radioButtonId = props.radioButtonId,
+    radioButtonClassName = props.radioButtonClassName,
+    radioButtonFillCheckmark = props.radioButtonFillCheckmark,
+    radioButtonFillChecked = props.radioButtonFillChecked,
+    radioButtonFill = props.radioButtonFill,
+    radioButtonFillDisable = props.radioButtonFillDisable,
+    radioButtonShape = props.radioButtonShape,
+    radioButtonBorder = props.radioButtonBorder;
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$3.RadioButton, {
+    id: radioButtonId,
+    className: radioButtonClassName,
+    fillCheckmark: radioButtonFillCheckmark,
+    fillChecked: radioButtonFillChecked,
+    fill: radioButtonFill,
+    fillDisable: radioButtonFillDisable,
+    shape: radioButtonShape,
+    border: radioButtonBorder
+  }));
+}
+ChoiceField.propTypes = {
+  radioButtonClassName: PropTypes__default.default.string
+};
+ChoiceField.defaultProps = {
+  radioButtonClassName: 'form-field__item-radio-button'
+};
+
+function PasswordField(props) {
+  var placeholder = props.placeholder,
+    passwordClassName = props.passwordClassName,
+    value = props.value;
+  var placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderColor'
+  });
+  var valueTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text text-color_',
+    propsKey: 'valueTextColor'
+  });
+  var valueTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'valueTextSize'
+  });
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement("input", {
+    type: "text",
+    value: value,
+    placeholder: placeholder,
+    className: clsx__default.default(passwordClassName, valueTextSizeClass, valueTextColorClass, placeholderColorClass)
+  }));
+}
+PasswordField.propTypes = {
+  children: PropTypes__default.default.any,
+  passwordClassName: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string
+};
+PasswordField.defaultProps = {
+  set: 'password',
+  passwordClassName: 'form-field__item-password'
+};
+
+function SwitchField(props) {
+  var className = props.className;
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$4.Switch, {
+    className: clsx__default.default('form-field__item-switch', className)
+  }));
+}
+SwitchField.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string
+};
+SwitchField.defaultProps = {
+  set: 'switch'
+};
+
+function SelectField(props) {
+  var className = props.className,
+    selectInputClass = props.selectInputClass,
+    selectFill = props.selectFill,
+    selectShape = props.selectShape,
+    selectBorder = props.selectBorder,
+    selectSize = props.selectSize,
+    selectOptionFill = props.selectOptionFill,
+    selectOptionTextSize = props.selectOptionTextSize,
+    selectOptionTextColor = props.selectOptionTextColor,
+    selectOptionBefore = props.selectOptionBefore,
+    selectOptionAfter = props.selectOptionAfter,
+    selectInputBefore = props.selectInputBefore,
+    selectInputAfter = props.selectInputAfter,
+    selectInputFill = props.selectInputFill,
+    selectInputTextSize = props.selectInputTextSize,
+    selectInputTextColor = props.selectInputTextColor;
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(SelectContainer.SelectInput, {
+    className: clsx__default.default(selectInputClass, className),
+    fill: selectFill,
+    shape: selectShape,
+    borderColor: selectBorder,
+    size: selectSize,
+    optionFill: selectOptionFill,
+    optionTextSize: selectOptionTextSize,
+    optionTextColor: selectOptionTextColor,
+    optionBefore: selectOptionBefore,
+    optionAfter: selectOptionAfter,
+    inputBefore: selectInputBefore,
+    inputAfter: selectInputAfter,
+    inputFill: selectInputFill,
+    inputTextSize: selectInputTextSize,
+    inputTextColor: selectInputTextColor
+  }));
+}
+SelectField.propTypes = {
+  children: PropTypes__default.default.any,
+  textInputClass: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string
+};
+SelectField.defaultProps = {
+  set: 'select',
+  selectInputClass: 'form-field__item-select'
+};
+
+exports.ChoiceField = ChoiceField;
+exports.FormField = FormField;
+exports.PasswordField = PasswordField;
+exports.SelectField = SelectField;
+exports.SwitchField = SwitchField;

package/dist/components/Grid.js

@@ -0,0 +1,329 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('../constants/componentProps/fill.js');
+var gridJustifyItems = require('../constants/componentProps/gridJustifyItems.js');
+var gridAlign = require('../constants/componentProps/gridAlign.js');
+var shape = require('../constants/componentProps/shape.js');
+var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
+var verticalResizeMode = require('../constants/componentProps/verticalResizeMode.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var UIContext = require('../context/UIContext.js');
+var gridAlignSelf = require('../constants/componentProps/gridAlignSelf.js');
+var gridJustifySelf = require('../constants/componentProps/gridJustifySelf.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+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 Grid(props) {
+  var id = props.id,
+    after = props.after,
+    before = props.before,
+    children = props.children,
+    className = props.className,
+    gridBackground = props.gridBackground,
+    gridBackgroundDesktop = props.gridBackgroundDesktop,
+    gridBackgroundMobile = props.gridBackgroundMobile,
+    gridBackgroundTablet = props.gridBackgroundTablet,
+    horizontalResizing = props.horizontalResizing,
+    onClick = props.onClick,
+    type = props.type,
+    useGridSystem = props.useGridSystem,
+    Tag = props.tag,
+    verticalResizing = props.verticalResizing;
+  var _useUserDeviceContext = UIContext.useUserDeviceContext(),
+    isMobile = _useUserDeviceContext.isMobile,
+    isTablet = _useUserDeviceContext.isTablet,
+    isDesktop = _useUserDeviceContext.isDesktop;
+  var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_columns_',
+    propsKey: 'columns'
+  });
+  var rowsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_rows_',
+    propsKey: 'rows'
+  });
+  var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_row-gap_',
+    propsKey: 'rowGap'
+  });
+  var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_column-gap_',
+    propsKey: 'columnGap'
+  });
+  var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_align-content_',
+    propsKey: 'alignContent'
+  });
+  var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_align-items_',
+    propsKey: 'alignItems'
+  });
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  var justifyItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_justify-items_',
+    propsKey: 'justifyItems'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillWrapperClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fillWrapper'
+  });
+  var fillWrapperInnerClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fillWrapperInner'
+  });
+  var shapeWrapperClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_shape_',
+    propsKey: 'shapeWrapper'
+  });
+  var shapeWrapperInnerClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_shape_',
+    propsKey: 'shapeWrapperInner'
+  });
+  var gridTargetBackground = React.useMemo(function () {
+    if (isMobile && gridBackgroundMobile) {
+      return gridBackgroundMobile;
+    }
+    if (isTablet && gridBackgroundTablet) {
+      return gridBackgroundTablet;
+    }
+    if (isDesktop && gridBackgroundDesktop) {
+      return gridBackgroundDesktop;
+    }
+    return gridBackground;
+  }, [isMobile, isTablet, isDesktop, gridBackgroundMobile, gridBackgroundTablet, gridBackgroundDesktop, gridBackground]);
+  var gridTargetBackgroundWrapper = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'gridBackgroundWrapper'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    gridStyles = _useStyles.styles,
+    gridWrapperStyles = _useStyles.gridWrapper,
+    gridWrapperInnerStyles = _useStyles.gridWrapperInner;
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'grid', useGridSystem && "grid_state_system", type && "grid_type_" + type, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && "grid_horizontal-resizing_" + horizontalResizing, verticalResizing && "grid_vertical-resizing_" + verticalResizing),
+    id: id,
+    style: gridStyles,
+    onClick: onClick
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "grid__before"
+  }, before), typeof gridTargetBackground === 'string' ? /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('grid__background', gridTargetBackground && "fill_" + gridTargetBackground.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, "\xA0") : gridTargetBackground && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "grid__background"
+  }, gridTargetBackground), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('grid__wrapper', fillWrapperClass, shapeWrapperClass),
+    style: gridWrapperStyles
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('grid__wrapper-inner', fillWrapperInnerClass, shapeWrapperInnerClass),
+    style: gridWrapperInnerStyles
+  }, children, gridTargetBackgroundWrapper && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('grid__wrapper-background', gridTargetBackgroundWrapper)
+  }, "\xA0"))), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "grid__after"
+  }, after));
+}
+Grid.propTypes = {
+  id: PropTypes__default.default.string,
+  after: PropTypes__default.default.any,
+  alignContent: PropTypes__default.default.oneOf(gridAlign.default),
+  alignContentDesktop: PropTypes__default.default.oneOf(gridAlign.default),
+  alignContentMobile: PropTypes__default.default.oneOf(gridAlign.default),
+  alignContentTablet: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItems: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItemsDesktop: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItemsMobile: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItemsTablet: PropTypes__default.default.oneOf(gridAlign.default),
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  columnGap: PropTypes__default.default.number,
+  columnGapDesktop: PropTypes__default.default.number,
+  columnGapMobile: PropTypes__default.default.number,
+  columnGapTablet: PropTypes__default.default.number,
+  columns: PropTypes__default.default.number,
+  columnsDesktop: PropTypes__default.default.number,
+  columnsMobile: PropTypes__default.default.number,
+  columnsTablet: PropTypes__default.default.number,
+  useGridSystem: PropTypes__default.default.bool,
+  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),
+  fillWrapper: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInner: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInnerDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInnerMobile: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInnerTablet: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperMobile: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperTablet: PropTypes__default.default.oneOf(fill.default),
+  gridBackground: PropTypes__default.default.any,
+  gridBackgroundDesktop: PropTypes__default.default.any,
+  gridBackgroundMobile: PropTypes__default.default.any,
+  gridBackgroundTablet: PropTypes__default.default.any,
+  gridBackgroundWrapper: PropTypes__default.default.any,
+  gridBackgroundWrapperDesktop: PropTypes__default.default.any,
+  gridBackgroundWrapperMobile: PropTypes__default.default.any,
+  gridBackgroundWrapperTablet: PropTypes__default.default.any,
+  horizontalResizing: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  justifyContent: PropTypes__default.default.string,
+  justifyContentDesktop: PropTypes__default.default.string,
+  justifyContentMobile: PropTypes__default.default.string,
+  justifyContentTablet: PropTypes__default.default.string,
+  justifyItems: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  justifyItemsDesktop: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  justifyItemsMobile: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  justifyItemsTablet: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  rowGap: PropTypes__default.default.string,
+  rowGapDesktop: PropTypes__default.default.string,
+  rowGapMobile: PropTypes__default.default.string,
+  rowGapTablet: PropTypes__default.default.string,
+  rows: PropTypes__default.default.number,
+  rowsDesktop: PropTypes__default.default.number,
+  rowsMobile: PropTypes__default.default.number,
+  rowsTablet: PropTypes__default.default.number,
+  shapeWrapper: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInner: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInnerDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInnerMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInnerTablet: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperTablet: PropTypes__default.default.oneOf(shape.default),
+  type: PropTypes__default.default.string,
+  verticalResizing: PropTypes__default.default.oneOf(verticalResizeMode.default),
+  onClick: PropTypes__default.default.func
+};
+Grid.defaultProps = {
+  tag: 'div'
+};
+
+function GridItem(props) {
+  var id = props.id,
+    children = props.children,
+    className = props.className;
+  var orderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'order_',
+    propsKey: 'order'
+  });
+  var alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_align-self_',
+    propsKey: 'alignSelf'
+  });
+  var justifySelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_justify-self_',
+    propsKey: 'justifySelf'
+  });
+  var columnStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_column-start_',
+    propsKey: 'columnStart'
+  });
+  var columnEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_column-end_',
+    propsKey: 'columnEnd'
+  });
+  var columnSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_column-span_',
+    propsKey: 'columnSpan'
+  });
+  var rowStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_row-start_',
+    propsKey: 'rowStart'
+  });
+  var rowEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_row-end_',
+    propsKey: 'rowEnd'
+  });
+  var rowSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_row-span_',
+    propsKey: 'rowSpan'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    gridItemStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass),
+    id: id,
+    style: gridItemStyles
+  }, children);
+}
+GridItem.propTypes = {
+  id: PropTypes__default.default.string,
+  alignSelf: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfDesktop: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfMobile: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfTablet: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(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),
+  columnEnd: PropTypes__default.default.number,
+  columnEndDesktop: PropTypes__default.default.number,
+  columnEndMobile: PropTypes__default.default.number,
+  columnEndTablet: PropTypes__default.default.number,
+  columnSpan: PropTypes__default.default.number,
+  columnSpanDesktop: PropTypes__default.default.number,
+  columnSpanMobile: PropTypes__default.default.number,
+  columnSpanTablet: PropTypes__default.default.number,
+  columnStart: PropTypes__default.default.number,
+  columnStartDesktop: PropTypes__default.default.number,
+  columnStartMobile: PropTypes__default.default.number,
+  columnStartTablet: PropTypes__default.default.number,
+  rowEnd: PropTypes__default.default.number,
+  rowEndDesktop: PropTypes__default.default.number,
+  rowEndMobile: PropTypes__default.default.number,
+  rowEndTablet: PropTypes__default.default.number,
+  rowSpan: PropTypes__default.default.number,
+  rowSpanDesktop: PropTypes__default.default.number,
+  rowSpanMobile: PropTypes__default.default.number,
+  rowSpanTablet: PropTypes__default.default.number,
+  rowStart: PropTypes__default.default.number,
+  rowStartDesktop: PropTypes__default.default.number,
+  rowStartMobile: PropTypes__default.default.number,
+  rowStartTablet: PropTypes__default.default.number,
+  justifySelf: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfDesktop: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfMobile: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfTablet: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  order: PropTypes__default.default.number,
+  orderDesktop: PropTypes__default.default.number,
+  orderMobile: PropTypes__default.default.number,
+  orderTablet: PropTypes__default.default.number,
+  zIndex: PropTypes__default.default.number,
+  zIndexMobile: PropTypes__default.default.number,
+  zIndexTablet: PropTypes__default.default.number,
+  zIndexDesktop: PropTypes__default.default.number
+};
+
+exports.Grid = Grid;
+exports.GridItem = GridItem;