@itcase/ui 1.0.56 → 1.0.58

package/dist/components/Chips.js

@@ -30,8 +30,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const chipsConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    chipsConfig.appearance = newComponent;
+  }
+};
 function Chips(props) {
   const {
+    appearance,
     children,
     className,
     label,
@@ -52,6 +59,10 @@ function Chips(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'chips_size_',
     propsKey: 'size'
@@ -72,13 +83,13 @@ function Chips(props) {
     styles: chipsStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'chips', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
+    className: clsx__default.default(className, 'chips', fillClass || chipsConfig.appearance[appearance] && `fill_${chipsConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
     style: chipsStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "chips__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "chips__label",
-    textColor: labelTextColor,
+    textColor: labelTextColor || chipsConfig.appearance[appearance] && chipsConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textWeight: labelTextWeight,
     size: labelSize
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
@@ -116,7 +127,8 @@ Chips.propTypes = {
   type: PropTypes__default.default.string
 };
 Chips.defaultProps = {
-  label: ''
+  label: 'Chips'
 };
 
 exports.Chips = Chips;
+exports.chipsConfig = chipsConfig;

package/dist/components/Group.js

@@ -85,6 +85,10 @@ function Group(props) {
     prefix: 'width_',
     propsKey: 'width'
   });
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
   const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
@@ -110,7 +114,7 @@ function Group(props) {
     wrapper: groupWrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     "data-tour": dataTour,
     id: id,
     style: Object.assign({}, groupStyles, style),

package/dist/components/Swiper.js

@@ -7,6 +7,7 @@ var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
 var index = require('./Title.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textGradient.js');
@@ -15,15 +16,14 @@ require('../constants/componentProps/textWeight.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/wrap.js');
-require('../hooks/useStyles.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('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -4849,8 +4849,12 @@ function Swiper(props) {
     prefix: 'align_',
     propsKey: 'align'
   });
+  const {
+    styles: style
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass, shapeClass, className, set && `swiper-block_set_${set}`),
+    style: style,
     id: id
   }, (title || prevButton && nextButton) && /*#__PURE__*/React__default.default.createElement("div", {
     className: "swiper-block__wrapper"

package/dist/css/components/Choice/Choice.css

@@ -10,13 +10,15 @@
   &_shape {
     &_rounded {
       border-radius: 8px;
-      ^^&__item:first-child {
-        border-top-left-radius: 8px;
-        border-bottom-left-radius: 8px;
-      }
-      ^^&__item:last-child {
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
+      ^^&__wrapper {
+        ^^^&__item:first-child {
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+        }
+        ^^^&__item:last-child {
+          border-top-right-radius: 8px;
+          border-bottom-right-radius: 8px;
+        }
       }
     }
     &_circular {
@@ -50,7 +52,8 @@
   &:last-child {
     border-right: 0;
   }
-  &_state_active {
+  &_active {
+    background: var(--choice-item-background-active);
   }
   & input {
     width: 100%;
@@ -75,4 +78,5 @@
 }
 :root {
   --choice-item-background-hover: var(--color-surface-secondary);
+  --choice-item-background-active: var(--color-surface-active);
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -11,7 +11,8 @@
   &:last-child {
     border-right: 0;
   }
-  &_state_active {
+  &_active {
+    background: var(--choice-item-background-active);
   }
   & input {
     width: 100%;

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

@@ -900,6 +900,15 @@ div.swiper-block__item {
 
 .swiper-block {
   &&_type_step {
+    height: 100%;
+    ^&__swiper {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+    & .swiper-wrapper {
+      align-items: center !important;
+    }
     & .swiper-slide {
       width: 100% !important;
     }

package/package.json

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