@itcase/ui 1.0.6 → 1.0.8

package/dist/components/Logo.js

@@ -3,8 +3,17 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
+var index = require('./Link.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../useStyles-e4accb53.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -22,29 +31,35 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Logo(props) {
   var className = props.className,
-    LinkComponent = props.LinkComponent,
     size = props.size,
     link = props.link,
     href = props.href,
-    target = props.target,
-    rel = props.rel,
     source = props.source,
     src = props.src;
   var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(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',
-    href: link || href,
-    target: target,
-    rel: rel
-  }, /*#__PURE__*/React__default.default.createElement("img", {
+  }, link || href ? /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
+    href: link || href
+  }, ' ', /*#__PURE__*/React__default.default.createElement("img", {
     className: "logo__image",
     src: src || source
   })) : /*#__PURE__*/React__default.default.createElement("img", {
@@ -57,12 +72,8 @@ Logo.propTypes = {
   className: PropTypes__default.default.string,
   isLink: PropTypes__default.default.bool,
   logoSrc: PropTypes__default.default.string,
-  href: PropTypes__default.default.string,
   src: PropTypes__default.default.string,
-  source: PropTypes__default.default.string,
-  link: PropTypes__default.default.string,
-  target: PropTypes__default.default.string,
-  rel: PropTypes__default.default.string
+  target: PropTypes__default.default.string
 };
 Logo.defaultProps = {};
 

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');
@@ -43,19 +43,20 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
   var after = props.after,
     before = props.before,
     className = props.className,
-    iconAfter = props.iconAfter,
-    iconAfterBgFill = props.iconAfterBgFill,
-    iconAfterFill = props.iconAfterFill,
+    size = props.size,
+    iconAfter = props.iconAfter;
+    props.iconAfterBgFill;
+    var iconAfterFill = props.iconAfterFill,
     iconAfterSize = props.iconAfterSize,
     iconAfterStroke = props.iconAfterStroke,
-    iconBefore = props.iconBefore,
-    iconBeforeBgFill = props.iconBeforeBgFill,
-    iconBeforeFill = props.iconBeforeFill,
+    iconBefore = props.iconBefore;
+    props.iconBeforeBgFill;
+    var iconBeforeFill = props.iconBeforeFill,
     iconBeforeSize = props.iconBeforeSize,
     iconBeforeStroke = props.iconBeforeStroke,
-    iconClear = props.iconClear,
-    iconClearBgFill = props.iconClearBgFill,
-    iconClearFill = props.iconClearFill,
+    iconClear = props.iconClear;
+    props.iconClearBgFill;
+    var iconClearFill = props.iconClearFill,
     iconClearSize = props.iconClearSize,
     iconClearStroke = props.iconClearStroke,
     placeholder = props.placeholder,
@@ -137,15 +138,33 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     prefix: 'width_',
     propsKey: 'width'
   });
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, type && "search-input_type_" + type)
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  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),
+    searchInputStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("label", {
+    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, size && "search-input_size_" + size, 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,
+    SvgImage: iconBefore,
     size: iconBeforeSize,
-    bgFill: iconBeforeBgFill,
-    stroke: iconBeforeStroke,
-    SvgImage: iconBefore
+    iconFill: iconBeforeFill,
+    iconStroke: iconBeforeStroke
   }), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('search-input__wrapper', inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -167,19 +186,17 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     textColor: placeholderColorClass
   }, placeholder || 'Search')), value && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__clear",
-    fill: iconClearFill,
-    size: iconClearSize,
-    bgFill: iconClearBgFill,
-    stroke: iconClearStroke,
     SvgImage: iconClear,
+    size: iconClearSize,
+    iconFill: iconClearFill,
+    iconStroke: iconClearStroke,
     onClick: onClickClearIcon
   })), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__icon search-input__icon-after",
-    fill: iconAfterFill,
+    SvgImage: iconAfter,
     size: iconAfterSize,
-    bgFill: iconAfterBgFill,
-    stroke: iconAfterStroke,
-    SvgImage: iconAfter
+    iconFill: iconAfterFill,
+    iconStroke: iconAfterStroke
   }), after);
 });
 SearchInput.DEFAULT_REF_STATE = {

package/dist/components/Segmented.js

@@ -3,6 +3,23 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
+var index = require('./Text.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../useStyles-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('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -13,11 +30,14 @@ 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,
-    setActiveSegment = props.setActiveSegment;
+    setActiveSegment = props.setActiveSegment,
+    size = props.size,
+    labelTextColor = props.labelTextColor,
+    labelTextActiveColor = props.labelTextActiveColor,
+    labelTextSize = props.labelTextSize;
   var controlRef = React.useRef(null);
   var segmentsRefs = React.useMemo(function () {
     return new Map(segments.map(function (item) {
@@ -32,19 +52,43 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
       offsetWidth = activeSegmentRef.current.offsetWidth;
       offsetLeft = activeSegmentRef.current.offsetLeft;
     }
-    controlRef.current.style.setProperty('--highlight-width', offsetWidth + "px");
-    controlRef.current.style.setProperty('--highlight-x-pos', offsetLeft - 2 + "px");
+    controlRef.current.style.setProperty('--segmented-active-width', offsetWidth + "px");
+    controlRef.current.style.setProperty('--segmented-active-x-pos', offsetLeft - 2 + "px");
   }, [activeSegment, segmentsRefs]);
+  var indicatorFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'indicatorFill'
+  });
+  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 shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'segmented_shape_',
+    propsKey: 'shape'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
   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', shapeClass, fillClass, size && "segmented_size_" + size, type && "segmented_type_" + type),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "segmented__wrapper"
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "segmented__wrapper-inner"
+    className: clsx__default.default('segmented__wrapper-inner', borderColorClass, borderWidthClass, borderTypeClass)
   }, 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", {
@@ -58,10 +102,15 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
         return setActiveSegment(item);
       }
     }), /*#__PURE__*/React__default.default.createElement("label", {
-      className: "segmented__item-label",
+      className: clsx__default.default('segmented__item-label'),
       htmlFor: item.label
-    }, item.label));
-  }))));
+    }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+      textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor,
+      size: labelTextSize
+    }, item.label)));
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('segmented__indicator', indicatorFillClass)
+  }, "\xA0"))));
 });
 Segmented.displayName = 'Segmented';
 Segmented.propTypes = {
@@ -73,5 +122,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 }; }
 
@@ -58,13 +60,13 @@ function Tab(props) {
     target = props.target,
     label = props.label,
     labelColor = props.labelColor,
-    labelColorHover = props.labelColorHover,
+    labelTextColorHover = props.labelTextColorHover,
     labelColorActive = props.labelColorActive,
-    labelGradient = props.labelGradient,
-    labelSize = props.labelSize,
-    labelWrap = props.labelWrap,
-    labelStyle = props.labelStyle,
-    labelWeight = props.labelWeight,
+    labelTextGradient = props.labelTextGradient,
+    labelTextSize = props.labelTextSize,
+    labelTextWrap = props.labelTextWrap,
+    labelTextStyle = props.labelTextStyle,
+    labeTextlWeight = props.labeTextlWeight,
     dividerFill = props.dividerFill,
     dividerFillHover = props.dividerFillHover,
     dividerFillActive = props.dividerFillActive,
@@ -74,6 +76,12 @@ function Tab(props) {
     dividerDirection = props.dividerDirection,
     onClick = props.onClick,
     onMouseEnter = props.onMouseEnter;
+    props.badge;
+    props.badgeSize;
+    props.badgeFill;
+    props.badgeTextColor;
+    props.badgeTextSize;
+    props.badgeValue;
   var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
@@ -126,10 +134,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, {
@@ -141,13 +150,13 @@ function Tab(props) {
   }, /*#__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: "tab__label",
     textColorActive: isActive && labelColorActive || appearance && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    textGradient: labelGradient,
-    size: labelSize,
-    textWeight: labelWeight,
+    textGradient: labelTextGradient,
+    size: labelTextSize,
+    textWeight: labeTextlWeight,
     textColor: labelColor || appearance && tabConfig.appearance[appearance].labelColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    textWrap: labelWrap,
-    textColorHover: labelColorHover,
-    textStyle: labelStyle
+    textWrap: labelTextWrap,
+    textColorHover: labelTextColorHover,
+    textStyle: labelTextStyle
   }, dividerFillActive, " ", label), /*#__PURE__*/React__default.default.createElement(index$2.Divider, {
     width: "fill",
     fill: dividerFill || appearance && tabConfig.appearance[appearance].dividerFill.replace(/([A-Z])/g, '-$1').toLowerCase(),
@@ -174,7 +183,7 @@ Tab.propTypes = (_Tab$propTypes = {
   linkFillTablet: PropTypes__default.default.oneOf(fill.default),
   isActive: PropTypes__default.default.bool,
   label: PropTypes__default.default.string,
-  labelSize: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func,
   onMouseEnter: PropTypes__default.default.func,
   size: PropTypes__default.default.oneOf(size.default),
@@ -191,15 +200,119 @@ Tab.propTypes = (_Tab$propTypes = {
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
   labelColor: PropTypes__default.default.oneOf(textColor.default),
-  labelColorHover: PropTypes__default.default.oneOf(textColorHover.default),
+  labelTextColorHover: PropTypes__default.default.oneOf(textColorHover.default),
   labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
-  labelGradient: PropTypes__default.default.oneOf(textGradient.default)
-}, _Tab$propTypes["labelSize"] = PropTypes__default.default.oneOf(size.default), _Tab$propTypes.labelWrap = PropTypes__default.default.string, _Tab$propTypes.labelStyle = PropTypes__default.default.oneOf(textStyle.default), _Tab$propTypes.labelWeight = PropTypes__default.default.oneOf(textWeight.default), _Tab$propTypes.type = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeDesktop = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeMobile = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeTablet = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.title = PropTypes__default.default.string, _Tab$propTypes.underline = PropTypes__default.default.oneOf(underline.default), _Tab$propTypes);
+  labelTextGradient: PropTypes__default.default.oneOf(textGradient.default)
+}, _Tab$propTypes["labelTextSize"] = PropTypes__default.default.oneOf(size.default), _Tab$propTypes.labelTextWrap = PropTypes__default.default.string, _Tab$propTypes.labelTextStyle = PropTypes__default.default.oneOf(textStyle.default), _Tab$propTypes.labeTextlWeight = PropTypes__default.default.oneOf(textWeight.default), _Tab$propTypes.type = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeDesktop = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeMobile = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeTablet = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.title = PropTypes__default.default.string, _Tab$propTypes.underline = PropTypes__default.default.oneOf(underline.default), _Tab$propTypes);
 Tab.defaultProps = {
   size: 'normal',
   LinkComponent: 'a',
   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/components/Tile.js

@@ -65,9 +65,11 @@ function Tile(props) {
     textWrap = props.textWrap,
     textColor = props.textColor,
     title = props.title,
-    titleSize = props.titleSize,
-    titleAlign = props.titleAlign,
-    titleWrap = props.titleWrap,
+    titleTextSize = props.titleTextSize,
+    titleTextWrap = props.titleTextWrap,
+    titleTextColor = props.titleTextColor,
+    titleTextWeight = props.titleTextWeight,
+    titleTextAlign = props.titleTextAlign,
     type = props.type,
     onClick = props.onClick;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -112,9 +114,11 @@ function Tile(props) {
     className: clsx__default.default('tile__wrapper', alignClass, alignDirectionClass)
   }, before, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
     className: "tile__title",
-    size: titleSize,
-    textWrap: titleWrap,
-    textAlign: titleAlign
+    size: titleTextSize,
+    textWrap: titleTextWrap,
+    textColor: titleTextColor,
+    textAlign: titleTextAlign,
+    textWeight: titleTextWeight
   }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     size: textSize,
     textColor: textColor,
@@ -173,7 +177,6 @@ Tile.propTypes = {
 };
 Tile.defaultProps = {
   textTag: 'span',
-  titleSize: 'h5',
   alignDirection: 'vertical'
 };
 

package/dist/css/components/Avatar/Avatar.css

@@ -18,8 +18,17 @@
     @each $size in 24, 32, 40, 60, 72, 96, 144, 240 {
       &_$(size) {
         ^^&__wrapper {
-          width: $(size)px;
-          height: $(size)px;
+          ^^^&__image {
+            width: $(size)px;
+            height: $(size)px;
+          }
+          ^^^&__name {
+            width: $(size)px;
+            height: $(size)px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
         }
       }
     }

package/dist/css/components/Badge/Badge.css

@@ -10,6 +10,7 @@
       &_$(size) {
         min-width: var(--badge-width-size-$(size));
         min-height: var(--badge-height-size-$(size));
+        max-width: var(--badge-width-size-$(size));
         max-height: var(--badge-height-size-$(size));
       }
     }