@itcase/ui 1.0.6 → 1.0.7

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,
@@ -109,7 +109,7 @@ function Button(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, borderClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, 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 +127,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

@@ -57,11 +57,13 @@ function Cell(props) {
     after = props.after,
     before = props.before,
     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;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -127,14 +129,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 +156,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,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'
@@ -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);
 }

package/dist/components/Logo.js

@@ -34,10 +34,22 @@ function Logo(props) {
     prefix: 'logo_align-items_',
     propsKey: 'alignItems'
   });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
   var _useStyles = useStyles.useStyles(props),
     logo = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'logo', alignItemsClass, size && "logo_size_" + size),
+    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && "logo_size_" + size),
     style: logo
   }, link || href ? /*#__PURE__*/React__default.default.createElement(LinkComponent, {
     className: 'logo__link',

package/dist/components/Search.js

@@ -7,20 +7,13 @@ var fill = require('../constants/componentProps/fill.js');
 var index = require('./Icon.js');
 var index$1 = require('./Text.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-e4accb53.js');
 var index$2 = require('./Scrollbar.js');
 require('react-inlinesvg');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Link.js');
-require('../useStyles-e4accb53.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/size.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textGradient.js');
@@ -28,6 +21,13 @@ require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.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');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
@@ -137,8 +137,11 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     prefix: 'width_',
     propsKey: 'width'
   });
+  var _useStyles = useStyles.useStyles(props),
+    searchInputStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, type && "search-input_type_" + type)
+    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, type && "search-input_type_" + type),
+    style: searchInputStyles
   }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__icon search-input__icon-before",
     fill: iconBeforeFill,

package/dist/components/Segmented.js

@@ -13,7 +13,6 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
   var name = props.name,
     className = props.className,
-    fill = props.fill,
     type = props.type,
     segments = props.segments,
     activeSegment = props.activeSegment,
@@ -36,7 +35,7 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
     controlRef.current.style.setProperty('--highlight-x-pos', offsetLeft - 2 + "px");
   }, [activeSegment, segmentsRefs]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'segmented', type && "segmented_type_" + type, fill && "fill_" + fill.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'segmented', type && "segmented_type_" + type),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "segmented__wrapper"
@@ -44,7 +43,7 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
     className: "segmented__wrapper-inner"
   }, segments == null ? void 0 : segments.map(function (item, i) {
     return /*#__PURE__*/React__default.default.createElement("div", {
-      className: "segmented__item " + (item.value === activeSegment.value ? 'segmented__item_active' : ''),
+      className: clsx__default.default('segmented__item', item.value === activeSegment.value ? 'segmented__item_active' : ''),
       key: item.value,
       ref: segmentsRefs.get(item.value)
     }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -73,5 +72,8 @@ Segmented.propTypes = {
   setActiveSegment: PropTypes__default.default.func,
   type: PropTypes__default.default.string
 };
+Segmented.defaultProps = {
+  activeSegment: {}
+};
 
 exports.Segmented = Segmented;

package/dist/components/Tab.js

@@ -19,6 +19,10 @@ var underline = require('../constants/componentProps/underline.js');
 var useStyles = require('../useStyles-e4accb53.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var size = require('../constants/componentProps/size.js');
+var direction = require('../constants/componentProps/direction.js');
+var stacking = require('../constants/componentProps/stacking.js');
+var wrap = require('../constants/componentProps/wrap.js');
+var width = require('../constants/componentProps/width.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -27,8 +31,6 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');
-require('../constants/componentProps/direction.js');
-require('../constants/componentProps/width.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -126,10 +128,11 @@ function Tab(props) {
     propsKey: 'width'
   });
   var _useStyles = useStyles.useStyles(props),
-    menuItem = _useStyles.styles;
+    tab = _useStyles.styles;
+  console.log(tabConfig.appearance);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', appearance && (("fill_" + tabConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), ("fill_hover_" + tabConfig.appearance[appearance].fillHoverClass).replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "tab_set_" + set, justifyContentClass),
-    style: menuItem,
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', appearance && ("fill_" + tabConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), appearance && ("fill_hover_" + tabConfig.appearance[appearance].fillHoverClass).replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "tab_set_" + set, justifyContentClass),
+    style: tab,
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, /*#__PURE__*/React__default.default.createElement(index.Link, {
@@ -201,5 +204,109 @@ Tab.defaultProps = {
   direction: 'horizontal'
 };
 
+function TabGroup(props) {
+  var id = props.id,
+    children = props.children,
+    className = props.className,
+    horizontalScroll = props.horizontalScroll,
+    set = props.set,
+    style = props.style;
+  var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_content-align_',
+    propsKey: 'contentAlign'
+  });
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_direction_',
+    propsKey: 'direction'
+  });
+  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_wrap_',
+    propsKey: 'wrap'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(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, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass),
+    id: id,
+    style: Object.assign({}, groupStyles, style)
+  }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
+    className: "group__wrapper",
+    style: groupWrapperStyles
+  }, children) : children);
+}
+TabGroup.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),
+  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),
+  contentAlign: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignDesktop: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignMobile: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignTablet: PropTypes__default.default.oneOf([null, 'center']),
+  stacking: PropTypes__default.default.oneOf(stacking.default),
+  stackingDesktop: PropTypes__default.default.oneOf(stacking.default),
+  stackingMobile: PropTypes__default.default.oneOf(stacking.default),
+  stackingTablet: PropTypes__default.default.oneOf(stacking.default),
+  wrap: PropTypes__default.default.oneOf(wrap.default),
+  wrapDesktop: PropTypes__default.default.oneOf(wrap.default),
+  wrapMobile: PropTypes__default.default.oneOf(wrap.default),
+  wrapTablet: PropTypes__default.default.oneOf(wrap.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),
+  spaceBetweenItems: PropTypes__default.default.string,
+  spaceBetweenItemsDesktop: PropTypes__default.default.string,
+  spaceBetweenItemsMobile: PropTypes__default.default.string,
+  spaceBetweenItemsTablet: 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),
+  columns: PropTypes__default.default.number,
+  columnsDesktop: PropTypes__default.default.number,
+  columnsMobile: PropTypes__default.default.number,
+  columnsTablet: PropTypes__default.default.number,
+  set: PropTypes__default.default.string,
+  horizontalScroll: PropTypes__default.default.bool
+};
+
 exports.Tab = Tab;
+exports.TabGroup = TabGroup;
 exports.tabConfig = tabConfig;

package/dist/css/components/Dropdown/Dropdown.css

@@ -1,13 +1,9 @@
 .dropdown {
   display: flex;
-  align-items: center;
-  gap: 8px;
   position: relative;
   &__wrapper {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin: 16px 0 0 0;
+    padding: 12px 0;
+    gap: 8px;
   }
 }
 .dropdown {
@@ -16,28 +12,18 @@
       ^^&__wrapper {
         animation-name: dropDownAnimationClose;
       }
-      ^^&__button {
-        & .button__icon {
-          animation-name: dropDownButtonAnimationClose;
-        }
-      }
     }
     &_open {
       ^^&__wrapper {
         animation-name: dropDownAnimationOpen;
       }
-      ^^&__button {
-        & .button__icon {
-          animation-name: dropDownButtonAnimationOpen;
-        }
-      }
     }
   }
 }
 .dropdown {
   &_shape {
     &_rounded {
-      border-radius: 4px;
+      border-radius: 12px;
       position: relative;
     }
   }
@@ -52,7 +38,24 @@
 .dropdown {
   &&_state_open {
     ^&__wrapper {
-
     }
   }
 }
+.dropdown {
+  &__item {
+    min-width: 240px;
+    &-label {
+      display: block;
+    }
+    &_size {
+      @each $size in normal, compact {
+        &_$(size) {
+          ^^&-label {
+            padding: var(--dropdown-item-size-$(size)-padding);
+            gap: var(--dropdown-item-size-$(size)-gap);
+          }
+        }
+      }
+    }
+}
+}

package/dist/css/components/Grid/Grid.css

@@ -206,3 +206,8 @@
     }
   }
 }
+.grid {
+  &__row {
+    display: grid;
+  }
+}

package/dist/css/components/Grid/css/__row/grid__row.css

@@ -0,0 +1,5 @@
+.grid {
+  &__row {
+    display: grid;
+  }
+}

package/dist/css/components/Segmented/Segmented.css

@@ -0,0 +1,97 @@
+.segmented {
+  display: flex;
+  align-items: center;
+  border: solid 1px red;
+  &__wrapper {
+    border: solid 1px var(--color-surface-border-tertiary);
+    border-radius: 8px;
+    ^&__list {
+      margin: 2px;
+      position: relative;
+      display: flex;
+      &::before {
+        width: var(--segmented-active-width);
+        height: 100%;
+        background: #438ffe;
+        padding: 8px 0;
+        border-radius: 8px;
+        position: absolute;
+        content: '';
+        display: block;
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+        left: var(--segmented-active-x-pos);
+        top: 0;
+        z-index: 1;
+        transition: left 0.3s ease, width 0.3s ease;
+      }
+      ^^&__item {
+        min-width: 104px;
+        padding: 8px 24px;
+        position: relative;
+        display: flex;
+        &::after {
+          width: 1px;
+          height: 100%;
+          background: var(--color-surface-border-tertiary);
+          content: '';
+          display: block;
+          top: 0;
+          transform: translate(24px, 0);
+        }
+        &:last-child {
+          &::after {
+            display: none;
+          }
+        }
+        &_state_active {
+          & label {
+            color: #fff;
+          }
+        }
+        & input {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 2;
+          opacity: 0%;
+          cursor: pointer;
+        }
+        & label {
+          text-align: center;
+          position: relative;
+          display: block;
+          z-index: 3;
+          transition: color 0.5s ease;
+          cursor: pointer;
+          @mixin text-l;
+        }
+      }
+    }
+  }
+  &__range {
+    margin: 0 0 0 24px;
+    border: solid 1px var(--color-surface-border-tertiary);
+    border-radius: 8px;
+    position: relative;
+    &-value {
+      text-align: center;
+      padding: 10px 24px;
+      border-radius: 8px;
+      cursor: pointer;
+      @mixin text-l;
+      &_state_active {
+        color: #fff;
+        background: #438ffe;
+      }
+    }
+    ^&__modal {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+}

package/dist/css/components/Tab/Tab.css

@@ -36,6 +36,9 @@
     }
   }
 }
+.tab-group {
+  position: relative;
+}
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;

package/dist/css/styles/justify-content/justify-content.css

@@ -0,0 +1,7 @@
+.justify-content {
+  @each $val in flexStart, flexEnd, spaceBetween, spaceAround, spaceEvenly, flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_$(val) {
+      justify-content: $(val);
+    }
+  }
+}

package/dist/hooks/styleAttributes.js

@@ -28,6 +28,6 @@ var styleAttributes = [
 /**
  * Grid
  */
-'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows'];
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows'];
 
 exports.default = styleAttributes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",