@itcase/ui 1.0.6 → 1.0.8

package/dist/components/Button.js

@@ -63,14 +63,14 @@ function Button(props) {
     href = props.href,
     target = props.target,
     rel = props.rel,
-    size = props.size;
-    props.iconBeforeBgFill;
-    var iconBeforeFill = props.iconBeforeFill;
-    props.iconAfterBgFillSize;
-    props.iconBeforeBgFillSize;
-    var iconBeforeStroke = props.iconBeforeStroke;
-    props.iconAfterBgFill;
-    var iconAfterFill = props.iconAfterFill,
+    size = props.size,
+    icon = props.icon,
+    iconSize = props.iconSize,
+    iconFill = props.iconFill,
+    iconStroke = props.iconStroke,
+    iconBeforeFill = props.iconBeforeFill,
+    iconBeforeStroke = props.iconBeforeStroke,
+    iconAfterFill = props.iconAfterFill,
     iconAfterStroke = props.iconAfterStroke,
     type = props.type,
     htmlType = props.htmlType,
@@ -93,23 +93,31 @@ function Button(props) {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'button_shape_',
     propsKey: 'shape'
   });
   var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_',
+    prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
   var _useStyles = useStyles.useStyles(props),
     buttonStyles = _useStyles.styles,
     labelStyles = _useStyles.label;
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, Badge && 'button_type_badge', !label && (iconBefore || iconAfter) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
+    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
     href: link || href,
     DefaultComponent: "button",
     disabled: isDisabled,
@@ -127,6 +135,12 @@ function Button(props) {
     size: iconBeforeSize,
     iconFill: iconBeforeFill,
     iconStroke: iconBeforeStroke
+  }), icon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    className: "button__icon",
+    SvgImage: icon,
+    size: iconSize,
+    iconFill: iconFill,
+    iconStroke: iconStroke
   }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
     className: "button__label",
     textColor: labelTextColor,

package/dist/components/Cell.js

@@ -56,14 +56,18 @@ function Cell(props) {
     valueTag = props.valueTag,
     after = props.after,
     before = props.before,
+    size = props.size,
     value = props.value,
-    valueSize = props.valueSize,
+    valueTextSize = props.valueTextSize,
     valueTextColor = props.valueTextColor,
+    valueTextWeight = props.valueTextWeight,
     title = props.title,
-    titleSize = props.titleSize,
+    titleTextSize = props.titleTextSize,
     titleTextColor = props.titleTextColor,
+    titleTextWeight = props.titleTextWeight,
     onClick = props.onClick,
     onMouseEnter = props.onMouseEnter;
+    props.direction;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -104,6 +108,10 @@ function Cell(props) {
     prefix: 'cell_shape_',
     propsKey: 'bgShape'
   });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cell_direction_',
+    propsKey: 'direction'
+  });
   var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
@@ -111,7 +119,7 @@ function Cell(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, set && "cell_set_" + set, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
+    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, size && "cell_size_" + size, set && "cell_set_" + set, directionClass, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__before"
   }, before), /*#__PURE__*/React__default.default.createElement("div", {
@@ -127,14 +135,16 @@ function Cell(props) {
     className: "cell__data"
   }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "cell__title",
-    size: titleSize,
+    size: titleTextSize,
     tag: titleTag,
-    textColor: titleTextColor
+    textColor: titleTextColor,
+    textWeight: titleTextWeight
   }, title), value && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "cell__value",
-    size: valueSize,
+    size: valueTextSize,
     tag: valueTag,
-    textColor: valueTextColor
+    textColor: valueTextColor,
+    textWeight: valueTextWeight
   }, value)), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "cell__icon-after",
     SvgImage: iconAfter,
@@ -152,10 +162,10 @@ Cell.propTypes = {
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,
   value: PropTypes__default.default.string,
-  valueSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  valueTextSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
   valueTextColor: PropTypes__default.default.string,
   title: PropTypes__default.default.string,
-  titleSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  titleTextSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
   titleTextColor: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func,
   onMouseEnter: PropTypes__default.default.func,

package/dist/components/Dropdown.js

@@ -3,29 +3,21 @@
 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');
 var useStyles = require('../useStyles-e4accb53.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('../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');
+var index$1 = require('./Text.js');
+var index = require('./Link.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var textColorActive = require('../constants/componentProps/textColorActive.js');
+var textColorHover = require('../constants/componentProps/textColorHover.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textGradient = require('../constants/componentProps/textGradient.js');
+var textStyle = require('../constants/componentProps/textStyle.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+var type = require('../constants/componentProps/type.js');
+var underline = require('../constants/componentProps/underline.js');
+var size = require('../constants/componentProps/size.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -47,12 +39,7 @@ function Dropdown(props) {
     children = props.children,
     className = props.className;
     props.id;
-    var label = props.label,
-    labelIcon = props.labelIcon,
-    labelIconFill = props.labelIconFill;
-    props.labelIconOpen;
-    var set = props.set,
-    title = props.title;
+    var set = props.set;
   var dropdownRef = React.useRef(null);
   var _useState = React.useState(false),
     isOpen = _useState[0],
@@ -130,29 +117,9 @@ function Dropdown(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'
+  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
   });
   var _useStyles = useStyles.useStyles(props),
     styles = _useStyles.styles;
@@ -161,25 +128,11 @@ function Dropdown(props) {
   console.log('isOpen: ', isOpen);
   console.log('animationState: ', animationState);
   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),
+    className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, fillClass, fillHoverClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,
     style: styles,
     onClick: onClick
-  }, title && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    size: titleSizeClass,
-    textColor: titleTextColorClass,
-    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,
-    iconAfter: labelIcon,
-    iconAfterFill: labelIconFill,
-    label: label,
-    labelSize: labelTextSizeClass,
-    labelTextColor: labelTextColorClass,
-    size: labelSizeClass
-  }), children &&
+  }, children &&
   /*#__PURE__*/
   // Add "onAnimationEnd" only for wrapper for ignore dropdown button
   React__default.default.createElement("div", {
@@ -196,4 +149,180 @@ Dropdown.defaultProps = {
   animationClose: 'dropdown_animation_close'
 };
 
+function DropdownItem(props) {
+  var isActive = props.isActive,
+    isHover = props.isHover;
+    props.appearance;
+    var after = props.after,
+    before = props.before,
+    children = props.children,
+    className = props.className,
+    href = props.href,
+    link = props.link,
+    set = props.set,
+    rel = props.rel,
+    desc = props.desc,
+    descTextGradient = props.descTextGradient,
+    descTextSize = props.descTextSize,
+    descTextWeight = props.descTextWeight,
+    descTextColor = props.descTextColor,
+    descTextWrap = props.descTextWrap,
+    descTextColorHover = props.descTextColorHover,
+    descTextStyle = props.descTextStyle,
+    label = props.label,
+    target = props.target,
+    labelTextColorActive = props.labelTextColorActive,
+    labelTextGradient = props.labelTextGradient,
+    labelTextSize = props.labelTextSize,
+    labelTextWeight = props.labelTextWeight,
+    labelTextColor = props.labelTextColor,
+    labelTextWrap = props.labelTextWrap,
+    labelTextColorHover = props.labelTextColorHover,
+    labelTextStyle = props.labelTextStyle,
+    underline = props.underline,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter;
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_direction_',
+    propsKey: 'direction'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_hover_',
+    propsKey: 'fillActiveHover'
+  });
+  var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  var linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'linkFill'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_shape_',
+    propsKey: 'shape'
+  });
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_type_',
+    propsKey: 'type'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    dropdownItem = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, set && "dropdown__item_set_" + set, justifyContentClass),
+    style: dropdownItem,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, /*#__PURE__*/React__default.default.createElement(index.Link, {
+    href: link || href,
+    className: clsx__default.default('dropdown__item-link', alignDirectionClass, alignClass),
+    underline: underline,
+    fill: linkFillClass,
+    target: target,
+    rel: rel
+  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "dropdown__item-label",
+    textColorActive: isActive && labelTextColorActive,
+    textGradient: labelTextGradient,
+    size: labelTextSize,
+    textWeight: labelTextWeight,
+    textColor: labelTextColor,
+    textWrap: labelTextWrap,
+    textColorHover: labelTextColorHover,
+    textStyle: labelTextStyle
+  }, label), desc && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "dropdown__item-desc",
+    textGradient: descTextGradient,
+    size: descTextSize,
+    textWeight: descTextWeight,
+    textColor: descTextColor,
+    textWrap: descTextWrap,
+    textColorHover: descTextColorHover,
+    textStyle: descTextStyle
+  }, desc)), after)));
+}
+DropdownItem.propTypes = {
+  before: PropTypes__default.default.any,
+  after: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  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),
+  linkFill: PropTypes__default.default.oneOf(fill.default),
+  linkFillDesktop: PropTypes__default.default.oneOf(fill.default),
+  linkFillMobile: PropTypes__default.default.oneOf(fill.default),
+  linkFillTablet: PropTypes__default.default.oneOf(fill.default),
+  isActive: PropTypes__default.default.bool,
+  label: PropTypes__default.default.string,
+  labelSize: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func,
+  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),
+  LinkComponent: PropTypes__default.default.any,
+  href: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  target: PropTypes__default.default.string,
+  rel: PropTypes__default.default.string,
+  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),
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textColorHover: PropTypes__default.default.oneOf(textColorHover.default),
+  textColorActive: PropTypes__default.default.oneOf(textColorActive.default),
+  textGradient: PropTypes__default.default.oneOf(textGradient.default),
+  textSize: PropTypes__default.default.oneOf(size.default),
+  textWrap: PropTypes__default.default.string,
+  textStyle: PropTypes__default.default.oneOf(textStyle.default),
+  textWeight: PropTypes__default.default.oneOf(textWeight.default),
+  type: PropTypes__default.default.oneOf(type.default),
+  typeDesktop: PropTypes__default.default.oneOf(type.default),
+  typeMobile: PropTypes__default.default.oneOf(type.default),
+  typeTablet: PropTypes__default.default.oneOf(type.default),
+  title: PropTypes__default.default.string,
+  underline: PropTypes__default.default.oneOf(underline.default)
+};
+DropdownItem.defaultProps = {
+  size: 'm',
+  LinkComponent: 'a',
+  direction: 'horizontal'
+};
+
 exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;

package/dist/components/Grid.js

@@ -11,11 +11,11 @@ var horizontalResizeMode = require('../constants/componentProps/horizontalResize
 var verticalResizeMode = require('../constants/componentProps/verticalResizeMode.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../useStyles-e4accb53.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('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
@@ -34,20 +34,12 @@ function Grid(props) {
     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'
@@ -100,22 +92,6 @@ function Grid(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,
@@ -127,19 +103,13 @@ function Grid(props) {
     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", {
+  }, before), /*#__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", {
+  }, children)), after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "grid__after"
   }, after));
 }
@@ -325,5 +295,76 @@ GridItem.propTypes = {
   zIndexDesktop: PropTypes__default.default.number
 };
 
+function GridRow(props) {
+  var id = props.id,
+    children = props.children,
+    className = props.className;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    gridRowStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'grid__row', fillClass, fillHoverClass),
+    id: id,
+    style: gridRowStyles
+  }, children);
+}
+GridRow.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;
+exports.GridRow = GridRow;

package/dist/components/Group.js

@@ -45,6 +45,10 @@ function Group(props) {
     prefix: 'align_',
     propsKey: 'align'
   });
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'justify-content_',
+    propsKey: 'justifyContent'
+  });
   var stackingClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_stacking_',
     propsKey: 'stacking'
@@ -89,7 +93,7 @@ function Group(props) {
     groupStyles = _useStyles.styles,
     groupWrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass),
+    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, justifyContentClass),
     id: id,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Image.js

@@ -57,11 +57,11 @@ function Image(props) {
     prefix: 'image_resize-mode_',
     propsKey: 'resizeMode'
   });
-  var imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'imageWidth'
   });
-  var imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'imageHeight'
   });
@@ -85,7 +85,7 @@ function Image(props) {
     alt: alt,
     title: title,
     style: imageStyles,
-    className: clsx__default.default('image__item', imageWidthClass, imageHeightClass, imgClassName, borderColorImageClass),
+    className: clsx__default.default('image__item', widthClass, heightClass, imgClassName, borderColorImageClass),
     onError: onError
   }), overlay, caption, children), after);
 }