@itcase/ui 1.0.49 → 1.0.51

package/dist/components/Avatar.js

@@ -9,10 +9,8 @@ var index$2 = require('./Icon.js');
 var size = require('../constants/componentProps/size.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('../constants/componentProps/borderColor.js');
-require('../constants/componentProps/horizontalContentAlign.js');
 require('../constants/componentProps/resizeMode.js');
 require('../constants/componentProps/shape.js');
-require('../constants/componentProps/verticalContentAlign.js');
 require('../constants/componentProps/width.js');
 require('../hooks/useStyles.js');
 require('lodash/camelCase');

package/dist/components/Card.js

@@ -23,9 +23,7 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../constants/componentProps/borderColor.js');
-require('../constants/componentProps/horizontalContentAlign.js');
 require('../constants/componentProps/resizeMode.js');
-require('../constants/componentProps/verticalContentAlign.js');
 require('../constants/componentProps/width.js');
 require('lodash/castArray');
 

package/dist/components/Icon.js

@@ -69,6 +69,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     }
     return sizes;
   }, []);
+  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cursor_',
+    propsKey: 'cursor'
+  });
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -142,7 +146,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     return null;
   }, [SvgImage, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
     id: id,
     ref: ref,
     "data-tour": dataTour,

package/dist/components/Image.js

@@ -4,10 +4,8 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var borderColor = require('../constants/componentProps/borderColor.js');
-var horizontalContentAlign = require('../constants/componentProps/horizontalContentAlign.js');
 var resizeMode = require('../constants/componentProps/resizeMode.js');
 var shape = require('../constants/componentProps/shape.js');
-var verticalContentAlign = require('../constants/componentProps/verticalContentAlign.js');
 var width = require('../constants/componentProps/width.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
@@ -43,12 +41,16 @@ function Image(props) {
     onClick,
     onError
   } = props;
-  const horizontalContentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'image_horizontal-content-align_',
-    propsKey: 'horizontalContentAlign'
+  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cursor_',
+    propsKey: 'cursor'
   });
-  const verticalContentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'image_vertical-content-align_',
+  const horizontalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_horizontal-align_',
+    propsKey: 'horizontalAlign'
+  });
+  const verticalAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_vertical-align_',
     propsKey: 'verticalContentAlign'
   });
   const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -61,9 +63,17 @@ function Image(props) {
   });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
-    propsKey: 'imageWidth'
+    propsKey: 'width'
   });
   const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  const imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'imageWidth'
+  });
+  const imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'imageHeight'
   });
@@ -84,7 +94,7 @@ function Image(props) {
     image: imageStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'image', type && `image_type_${type}`, horizontalContentAlignClass, verticalContentAlignClass, shapeClass, resizeModeClass),
+    className: clsx__default.default(className, 'image', type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, resizeModeClass, widthClass, heightClass),
     onClick: onClick,
     style: styles
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
@@ -95,7 +105,7 @@ function Image(props) {
     alt: alt,
     title: title,
     style: imageStyles,
-    className: clsx__default.default('image__item', widthClass, heightClass, imageClassName, borderClass, borderColorImageClass),
+    className: clsx__default.default('image__item', imageWidthClass, imageHeightClass, imageClassName, borderClass, borderColorImageClass),
     onError: onError
   }), overlay, caption, children), after);
 }
@@ -112,10 +122,6 @@ Image.propTypes = {
   caption: PropTypes__default.default.any,
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
-  horizontalContentAlign: PropTypes__default.default.oneOf(horizontalContentAlign.default),
-  horizontalContentAlignDesktop: PropTypes__default.default.oneOf(horizontalContentAlign.default),
-  horizontalContentAlignMobile: PropTypes__default.default.oneOf(horizontalContentAlign.default),
-  horizontalContentAlignTablet: PropTypes__default.default.oneOf(horizontalContentAlign.default),
   imageClassName: PropTypes__default.default.string,
   imgWrapClassName: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func,
@@ -144,10 +150,6 @@ Image.propTypes = {
   imageWidthMobile: PropTypes__default.default.oneOf(width.default),
   imageWidthTablet: PropTypes__default.default.oneOf(width.default),
   imageWidthDesktop: PropTypes__default.default.oneOf(width.default),
-  verticalContentAlign: PropTypes__default.default.oneOf(verticalContentAlign.default),
-  verticalContentAlignDesktop: PropTypes__default.default.oneOf(verticalContentAlign.default),
-  verticalContentAlignMobile: PropTypes__default.default.oneOf(verticalContentAlign.default),
-  verticalContentAlignTablet: PropTypes__default.default.oneOf(verticalContentAlign.default),
   onError: PropTypes__default.default.func
 };
 

package/dist/components/Modal.js

@@ -201,7 +201,9 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
   }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__close",
     onClick: closeModal
-  }, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
+  }, closeButton), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "modal-content__wrapper"
+  }, children)), /*#__PURE__*/React__default.default.createElement(index.Fader, {
     ref: modalFaderRef,
     fill: faderFill,
     fillGradient: faderFillGradient,

package/dist/components/Text.js

@@ -42,6 +42,10 @@ function Text(props) {
   const {
     styles: textStyles
   } = useStyles.useStyles(props);
+  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cursor_',
+    propsKey: 'cursor'
+  });
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'size'
@@ -83,7 +87,7 @@ function Text(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, widthClass, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     style: textStyles,

package/dist/css/components/Image/Image.css

@@ -1,12 +1,13 @@
 .image {
   font-size: 0;
   &__wrapper {
-    position: relative;
+    width: 100%;
     font-size: 0;
+    position: relative;
   }
 }
 .image {
-  &_horizontal-content-align {
+  &_horizontal-align {
     &_center {
       ^^&__wrapper {
         width: 100%;
@@ -22,10 +23,20 @@
       > ^^&__wrapper {
         & > ^^^&__item {
           width: 100%;
+          height: 100%;
           object-fit: cover;
         }
       }
     }
+    &_contain {
+      > ^^&__wrapper {
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
   }
 }
 .image {
@@ -82,7 +93,7 @@
   }
 }
 .image {
-  &_vertical-content-align {
+  &_vertical-align {
     &_center {
       ^^&__wrapper {
         height: 100%;

package/dist/css/components/Modal/Modal.css

@@ -27,12 +27,12 @@
   width: 100%;
   min-width: 200px;
   min-height: 200px;
-  max-width: var(--modal-max-width, 800px);
+  max-width: var(--modal-max-width, 1200px);
   position: relative;
   &:focus {
     outline: 0;
   }
-  &__inner {
+  &__wrapper {
     width: 100%;
   }
 }

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

@@ -904,8 +904,9 @@ div.swiper-block__item {
   }
 }
 
-.swiper-block {
+div.swiper-block {
   width: 100%;
+  max-width: 100%;
 }
 
 div.swiper-pagination {

package/package.json

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