@itcase/ui 1.0.5 → 1.0.7

package/dist/components/Divider.js

@@ -34,6 +34,22 @@ function Divider(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 sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'divider_size_',
     propsKey: 'size'
@@ -45,7 +61,7 @@ function Divider(props) {
   var _useStyles = useStyles.useStyles(props),
     hrStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("hr", {
-    className: clsx__default.default(className, 'divider', widthClass, directionClass, sizeClass, fillClass),
+    className: clsx__default.default(className, 'divider', widthClass, directionClass, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass),
     style: hrStyles
   });
 }

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,72 @@ 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 _useStyles = useStyles.useStyles(props),
+    gridRowStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'grid__row', fillClass),
+    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'
@@ -73,11 +77,23 @@ function Group(props) {
     prefix: 'width_',
     propsKey: 'width'
   });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
+  });
   var _useStyles = useStyles.useStyles(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),
+    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/Icon.js

@@ -34,14 +34,20 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var SVG__default = /*#__PURE__*/_interopDefault(SVG);
 
+var iconConfig = {
+  appearance: {},
+  setAppearance: function setAppearance(newComponent) {
+    iconConfig.appearance = newComponent;
+  }
+};
 var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, ref) {
   var before = props.before,
     after = props.after,
-    Counter = props.Counter,
+    Badge = props.Badge,
     SvgImage = props.SvgImage,
-    imageSrc = props.imageSrc,
-    simple = props.simple,
-    className = props.className,
+    imageSrc = props.imageSrc;
+    props.simple;
+    var className = props.className,
     href = props.href,
     link = props.link,
     linkTarget = props.linkTarget,
@@ -59,46 +65,58 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
     }
     return sizes;
   }, []);
-  var bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'bgFill'
-  });
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'icon_fill_',
+    prefix: 'fill_',
     propsKey: 'fill'
   });
   var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'icon_fill_hover_',
+    prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var bgFillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var fillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_fill_size_',
-    propsKey: 'bgFillSize'
+    propsKey: 'fillSize'
   });
-  var strokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var iconFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_',
+    propsKey: 'iconFill'
+  });
+  var iconFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_hover_',
+    propsKey: 'iconFillHover'
+  });
+  var iconStrokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_stroke_',
-    propsKey: 'stroke'
+    propsKey: 'iconStroke'
   });
-  var strokeHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var iconStrokeHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_stroke_hover_',
-    propsKey: 'strokeHover'
+    propsKey: 'iconStrokeHover'
   });
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_size_',
-    propsKey: 'size'
+    propsKey: 'iconSize'
   });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_shape_',
     propsKey: 'shape'
   });
-  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
-  var borderHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'borderHover'
   });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
+  });
   var _useStyles = useStyles.useStyles(props),
     iconStyles = _useStyles.styles;
   var ImageComponent = React.useMemo(function () {
@@ -119,17 +137,17 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
     return null;
   }, [SvgImage, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'icon', simple && 'icon_type_simple', bgFillClass, bgFillSizeClass, borderClass, borderHoverClass, fillClass, fillHoverClass, shapeClass, strokeClass, strokeHoverClass, Counter && 'icon_type_with-counter', (link || href || onClick) && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
     ref: ref,
     style: iconStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
+    className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', iconSizeClass),
+    DefaultComponent: "div",
     href: link || href,
-    target: linkTarget,
     rel: linkRel,
-    className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', sizeClass),
-    DefaultComponent: "div"
-  }, before, ImageComponent, after, Counter));
+    target: linkTarget
+  }, before, ImageComponent, after, Badge));
 });
 Icon.propTypes = {
   SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.func, PropTypes__default.default.object]),
@@ -182,3 +200,4 @@ function removeFillStroke(code) {
 }
 
 exports.Icon = Icon;
+exports.iconConfig = iconConfig;

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);
 }