@itcase/ui 1.0.7 → 1.0.8

package/dist/components/Button.js

@@ -93,23 +93,31 @@ function Button(props) {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'button_shape_',
     propsKey: 'shape'
   });
   var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_',
+    prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
   var _useStyles = useStyles.useStyles(props),
     buttonStyles = _useStyles.styles,
     labelStyles = _useStyles.label;
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, Badge && 'button_type_badge', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
+    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
     href: link || href,
     DefaultComponent: "button",
     disabled: isDisabled,

package/dist/components/Cell.js

@@ -56,6 +56,7 @@ function Cell(props) {
     valueTag = props.valueTag,
     after = props.after,
     before = props.before,
+    size = props.size,
     value = props.value,
     valueTextSize = props.valueTextSize,
     valueTextColor = props.valueTextColor,
@@ -66,6 +67,7 @@ function Cell(props) {
     titleTextWeight = props.titleTextWeight,
     onClick = props.onClick,
     onMouseEnter = props.onMouseEnter;
+    props.direction;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -106,6 +108,10 @@ function Cell(props) {
     prefix: 'cell_shape_',
     propsKey: 'bgShape'
   });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cell_direction_',
+    propsKey: 'direction'
+  });
   var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
@@ -113,7 +119,7 @@ function Cell(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, set && "cell_set_" + set, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
+    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, size && "cell_size_" + size, set && "cell_set_" + set, directionClass, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__before"
   }, before), /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Grid.js

@@ -303,10 +303,14 @@ function GridRow(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   var _useStyles = useStyles.useStyles(props),
     gridRowStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'grid__row', fillClass),
+    className: clsx__default.default(className, 'grid__row', fillClass, fillHoverClass),
     id: id,
     style: gridRowStyles
   }, children);

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,12 +31,9 @@ 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, {
@@ -51,12 +57,9 @@ function Logo(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     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", {
@@ -69,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

@@ -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,18 +138,33 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
     prefix: 'width_',
     propsKey: 'width'
   });
+  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("div", {
-    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, type && "search-input_type_" + type),
+  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", {
@@ -170,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 }; }
 
@@ -16,7 +33,11 @@ var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props,
     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) {
@@ -31,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),
+    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: clsx__default.default('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", {
@@ -57,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 = {

package/dist/components/Tab.js

@@ -60,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,
@@ -76,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'
@@ -144,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(),
@@ -177,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),
@@ -194,10 +200,10 @@ 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',

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

package/dist/css/components/Cell/Cell.css

@@ -22,6 +22,20 @@
     }
   }
 }
+.cell {
+  &_direction {
+    &_vertical {
+      ^^&__data {
+      }
+    }
+    &_horizontal {
+      ^^&__data {
+        flex-flow: row;
+        justify-content: space-between;
+      }
+    }
+  }
+}
 .cell {
  &&_state {
   &_active {
@@ -35,55 +49,3 @@
   }
  }
 }
-.cell {
-  &__wrapper {
-    min-width: 240px;
-    display: flex;
-    flex-flow: row nowrap;
-  }
-}
-.cell {
-  &__wrapper {
-    &_shape {
-      &_rounded {
-        border-radius: 8px;
-      }
-      &_circular {
-        border-radius: 50%;
-      }
-      &_geometric {
-        border-radius: 0;
-      }
-    }
-  }
-}
-.cell {
-  &_set {
-    &_default {
-      ^^&__wrapper {
-        padding: 8px 24px;
-        margin: 16px 24px;
-        ^^^&__data {
-          gap: 4px;
-        }
-      }
-    }
-  }
-}
-.cell {
-  &_set {
-    &_horizontal {
-      ^^&__wrapper {
-        padding: 8px 24px;
-        ^^^&__data {
-          gap: 4px;
-          flex-flow: row nowrap;
-          align-items: center;
-          ^^^^&_desc {
-            align-self: flex-start;
-          }
-        }
-      }
-    }
-  }
-}

package/dist/css/components/Search/Search.css

@@ -11,7 +11,6 @@
 }
 .search-input {
   width: 100%;
-  grid-template-columns: 1fr 1fr;
   position: relative;
   overflow: hidden;
   display: flex;
@@ -19,9 +18,6 @@
   &__icon {
     display: flex;
     align-items: center;
-    &-before {
-      padding: 0 0 0 8px;
-    }
   }
   &__wrapper {
     width: 100%;
@@ -29,13 +25,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 7px 12px;
     align-items: center;
   }
   &__value {
-    color: var(--color-surface-text-primary);
     background: none;
-    padding: 7px 0;
     border: none;
     position: relative;
     display: block;
@@ -46,13 +39,12 @@
       outline: 0;
     }
     &:not([value='']) {
-       ~ .search-input__placeholder {
+      & ~ .search-input__placeholder {
         display: none;
       }
     }
   }
   &__placeholder {
-    color: var(--color-surface-text-primary);
     background: none;
     border: none;
     position: relative;
@@ -97,6 +89,16 @@
     }
   }
 }
+.search-input {
+  &_size {
+    @each $size in compact, normal {
+      &_$(size) {
+        padding: var(--search-input-$(size)-padding);
+        gap: var(--search-input-$(size)-gap);
+      }
+    }
+  }
+}
 .search-result {
   width: 100%;
   &__wrapper {

package/dist/css/components/Search/css/search-input/search-input.css

@@ -1,6 +1,5 @@
 .search-input {
   width: 100%;
-  grid-template-columns: 1fr 1fr;
   position: relative;
   overflow: hidden;
   display: flex;
@@ -8,9 +7,6 @@
   &__icon {
     display: flex;
     align-items: center;
-    &-before {
-      padding: 0 0 0 8px;
-    }
   }
   &__wrapper {
     width: 100%;
@@ -18,13 +14,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 7px 12px;
     align-items: center;
   }
   &__value {
-    color: var(--color-surface-text-primary);
     background: none;
-    padding: 7px 0;
     border: none;
     position: relative;
     display: block;
@@ -35,13 +28,12 @@
       outline: 0;
     }
     &:not([value='']) {
-       ~ .search-input__placeholder {
+      & ~ .search-input__placeholder {
         display: none;
       }
     }
   }
   &__placeholder {
-    color: var(--color-surface-text-primary);
     background: none;
     border: none;
     position: relative;

package/dist/css/components/Search/css/search-input/search-input_size.css

@@ -0,0 +1,10 @@
+.search-input {
+  &_size {
+    @each $size in compact, normal {
+      &_$(size) {
+        padding: var(--search-input-$(size)-padding);
+        gap: var(--search-input-$(size)-gap);
+      }
+    }
+  }
+}

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

@@ -1,18 +1,14 @@
 .segmented {
   display: flex;
   align-items: center;
-  border: solid 1px red;
   &__wrapper {
-    border: solid 1px var(--color-surface-border-tertiary);
-    border-radius: 8px;
-    ^&__list {
+    &-inner {
       margin: 2px;
       position: relative;
       display: flex;
-      &::before {
+      ^^&__indicator {
         width: var(--segmented-active-width);
         height: 100%;
-        background: #438ffe;
         padding: 8px 0;
         border-radius: 8px;
         position: absolute;
@@ -25,8 +21,7 @@
         transition: left 0.3s ease, width 0.3s ease;
       }
       ^^&__item {
-        min-width: 104px;
-        padding: 8px 24px;
+        min-width: 120px;
         position: relative;
         display: flex;
         &::after {
@@ -36,9 +31,9 @@
           content: '';
           display: block;
           top: 0;
-          transform: translate(24px, 0);
+          right: 0;
         }
-        &:last-child {
+        &:nth-last-child(-n+2) {
           &::after {
             display: none;
           }
@@ -59,39 +54,42 @@
           z-index: 2;
           opacity: 0%;
           cursor: pointer;
+          border: 0;
+          margin: 0;
         }
-        & label {
+        &-label {
+          width: 100%;
           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;
+}
+.segmented {
+  &_shape {
+    &_rounded {
       border-radius: 8px;
-      cursor: pointer;
-      @mixin text-l;
-      &_state_active {
-        color: #fff;
-        background: #438ffe;
-      }
     }
-    ^&__modal {
-      position: absolute;
-      left: 0;
-      top: 0;
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.segmented {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        ^^&__item {
+          &-label {
+            padding: var(--segmented-item-size-$(size)-padding);
+          }
+        }
+      }
     }
   }
 }

package/dist/css/components/Swiper/Swiper.css

@@ -838,6 +838,12 @@ swiper-container .swiper-notification {
   }
 }
 
+.swiper-block {
+  &_type_center {
+    margin: 60px 0 0 0;
+  }
+}
+
 .swiper-block {
   &&_type_auto {
     & .swiper-slide {

package/dist/css/components/Switch/Switch.css

@@ -1,63 +1,68 @@
 .switch {
   position: relative;
+  height: 100%;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: 0.4s;
+  overflow: hidden;
+  display: flex;
+  &__checkbox {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    margin: 0;
+    z-index: 2;
+    &:checked {
+      & + .switch__bg {
+        background: var(--color-accent-primary);
+      }
+      & ~ .switch__toggle {
+        left: 100%;
+        margin: 0 0 0 -3px;
+        background: var(--color-accent-item-primary);
+        transform: translate(-100%, -50%);
+      }
+    }
+    &:disabled {
+      & + .switch__bg {
+        background: var(--color-surface-disabled);
+      }
+    }
+  }
+  &__bg {
+    width: 100%;
+    flex: 1;
+    background: var(--color-surface-tertiary);
+    transition: all 0.25s;
+  }
+  &__toggle {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    height: calc(100% - 6px);
+    position: absolute;
+    aspect-ratio: 1/1;
+    top: 50%;
+    transform: translate(3px, -50%);
+    left: 0;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    transition: all 0.25s;
+  }
 }
 .switch {
   &_size {
     &_normal {
-      position: relative;
       min-width: 52px;
-      height: 100%;
-      border-radius: 50px;
-      cursor: pointer;
-      transition: 0.4s;
       min-height: 32px;
-      overflow: hidden;
-      display: flex;
-      ^^&__checkbox {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        cursor: pointer;
-        appearance: none;
-        border: 0;
-        margin: 0;
-        z-index: 2;
-        &:checked {
-          & + .switch__bg {
-            background: var(--color-accent-primary);
-          }
-          & ~ .switch__toggle {
-            left: 100%;
-            margin: 0 0 0 -3px;
-            background: var(--color-accent-item-primary);
-            transform: translate(-100%, -50%);
-          }
-        }
-      }
-      ^^&__bg {
-        width: 100%;
-        flex: 1;
-        background: var(--color-surface-tertiary);
-        transition: all 0.25s;
-      }
-      ^^&__toggle {
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-        height: calc(100% - 6px);
-        position: absolute;
-        aspect-ratio: 1/1;
-        top: 50%;
-        transform: translate(3px, -50%);
-        left: 0;
-        background: #fff;
-        border-radius: 50%;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-        transition: all 0.25s;
-      }
     }
     &_compact {
-      border: solid 1px red;
+      min-width: 40px;
+      min-height: 24px;
     }
   }
 }

package/dist/css/styles/align/align.css

@@ -0,0 +1,6 @@
+.align {
+  border: solid 2px red;
+  &_center {
+    margin: 0 auto;
+  }
+}

package/dist/css/styles/border-width/border-width.css

@@ -1,6 +1,7 @@
 .border-width {
   @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
     &_$(width) {
+      border-style: solid;
       border-width: $(width)px ;
     }
   }

package/package.json

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

package/dist/css/components/Cell/css/__wrapper/cell__wrapper.css

@@ -1,7 +0,0 @@
-.cell {
-  &__wrapper {
-    min-width: 240px;
-    display: flex;
-    flex-flow: row nowrap;
-  }
-}

package/dist/css/components/Cell/css/__wrapper/cell__wrapper_shape.css

@@ -1,15 +0,0 @@
-.cell {
-  &__wrapper {
-    &_shape {
-      &_rounded {
-        border-radius: 8px;
-      }
-      &_circular {
-        border-radius: 50%;
-      }
-      &_geometric {
-        border-radius: 0;
-      }
-    }
-  }
-}