@wix/design-system 1.155.0 → 1.156.0

package/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_155_0_FunnelBadge";
+var _namespace_ = "wds_1_156_0_FunnelBadge";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -14,7 +14,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_FunnelBadge__root","badge":"wds_1_155_0_FunnelBadge__badge","badgeText":"wds_1_155_0_FunnelBadge__badgeText","badgeContent":"wds_1_155_0_FunnelBadge__badgeContent","darkBadge":"wds_1_155_0_FunnelBadge__darkBadge"};
+module.exports.classes = {"root":"wds_1_156_0_FunnelBadge__root","badge":"wds_1_156_0_FunnelBadge__badge","badgeText":"wds_1_156_0_FunnelBadge__badgeText","badgeContent":"wds_1_156_0_FunnelBadge__badgeContent","darkBadge":"wds_1_156_0_FunnelBadge__darkBadge"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelBar/FunnelBar.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_155_0_FunnelBar";
+var _namespace_ = "wds_1_156_0_FunnelBar";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_FunnelBar__root","filledBar":"wds_1_155_0_FunnelBar__filledBar"};
+module.exports.classes = {"root":"wds_1_156_0_FunnelBar__root","filledBar":"wds_1_156_0_FunnelBar__filledBar"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelChart.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_FunnelChart";
+var _namespace_ = "wds_1_156_0_FunnelChart";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_FunnelChart__root","funnel":"wds_1_155_0_FunnelChart__funnel","labels":"wds_1_155_0_FunnelChart__labels","labelWrapper":"wds_1_155_0_FunnelChart__labelWrapper"};
+module.exports.classes = {"root":"wds_1_156_0_FunnelChart__root","funnel":"wds_1_156_0_FunnelChart__funnel","labels":"wds_1_156_0_FunnelChart__labels","labelWrapper":"wds_1_156_0_FunnelChart__labelWrapper"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelLabel/FunnelLabel.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_155_0_FunnelLabel";
+var _namespace_ = "wds_1_156_0_FunnelLabel";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_FunnelLabel__root"};
+module.exports.classes = {"root":"wds_1_156_0_FunnelLabel__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelStep/FunnelStep.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_155_0_FunnelStep";
+var _namespace_ = "wds_1_156_0_FunnelStep";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_FunnelStep__root","funnelStep":"wds_1_155_0_FunnelStep__funnelStep","funnelStepPlaceholder":"wds_1_155_0_FunnelStep__funnelStepPlaceholder","funnelStepRotated":"wds_1_155_0_FunnelStep__funnelStepRotated","badgeWrapper":"wds_1_155_0_FunnelStep__badgeWrapper"};
+module.exports.classes = {"root":"wds_1_156_0_FunnelStep__root","funnelStep":"wds_1_156_0_FunnelStep__funnelStep","funnelStepPlaceholder":"wds_1_156_0_FunnelStep__funnelStepPlaceholder","funnelStepRotated":"wds_1_156_0_FunnelStep__funnelStepRotated","badgeWrapper":"wds_1_156_0_FunnelStep__badgeWrapper"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/GoogleAddressInput/GoogleAddressInput.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_GoogleAddressInput";
+var _namespace_ = "wds_1_156_0_GoogleAddressInput";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_GoogleAddressInput__root","googleFooter":"wds_1_155_0_GoogleAddressInput__googleFooter"};
+module.exports.classes = {"root":"wds_1_156_0_GoogleAddressInput__root","googleFooter":"wds_1_156_0_GoogleAddressInput__googleFooter"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/GooglePreview/GooglePreview.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_GooglePreview";
+var _namespace_ = "wds_1_156_0_GooglePreview";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_GooglePreview__root","googlePreviewTitle":"wds_1_155_0_GooglePreview__googlePreviewTitle","googlePreviewUrl":"wds_1_155_0_GooglePreview__googlePreviewUrl","googlePreviewDescription":"wds_1_155_0_GooglePreview__googlePreviewDescription","googlePreviewSiteName":"wds_1_155_0_GooglePreview__googlePreviewSiteName","googlePreviewWebsiteInfo":"wds_1_155_0_GooglePreview__googlePreviewWebsiteInfo","googlePreviewWebsiteInfoContent":"wds_1_155_0_GooglePreview__googlePreviewWebsiteInfoContent","googlePreviewWebsiteInfoCTA":"wds_1_155_0_GooglePreview__googlePreviewWebsiteInfoCTA","googlePreviewFaviconBox":"wds_1_155_0_GooglePreview__googlePreviewFaviconBox"};
+module.exports.classes = {"root":"wds_1_156_0_GooglePreview__root","googlePreviewTitle":"wds_1_156_0_GooglePreview__googlePreviewTitle","googlePreviewUrl":"wds_1_156_0_GooglePreview__googlePreviewUrl","googlePreviewDescription":"wds_1_156_0_GooglePreview__googlePreviewDescription","googlePreviewSiteName":"wds_1_156_0_GooglePreview__googlePreviewSiteName","googlePreviewWebsiteInfo":"wds_1_156_0_GooglePreview__googlePreviewWebsiteInfo","googlePreviewWebsiteInfoContent":"wds_1_156_0_GooglePreview__googlePreviewWebsiteInfoContent","googlePreviewWebsiteInfoCTA":"wds_1_156_0_GooglePreview__googlePreviewWebsiteInfoCTA","googlePreviewFaviconBox":"wds_1_156_0_GooglePreview__googlePreviewFaviconBox"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Heading/Heading.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_Heading";
+var _namespace_ = "wds_1_156_0_Heading";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -14,7 +14,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_Heading__root","heading-h1":"wds_1_155_0_StylableTypography__heading-h1","heading-h2":"wds_1_155_0_StylableTypography__heading-h2","heading-h3":"wds_1_155_0_StylableTypography__heading-h3","heading-h4":"wds_1_155_0_StylableTypography__heading-h4","heading-h5":"wds_1_155_0_StylableTypography__heading-h5","heading-h6":"wds_1_155_0_StylableTypography__heading-h6","heading-xl":"wds_1_155_0_StylableTypography__heading-xl","heading-l":"wds_1_155_0_StylableTypography__heading-l","heading-m":"wds_1_155_0_StylableTypography__heading-m","heading-s":"wds_1_155_0_StylableTypography__heading-s","heading-t":"wds_1_155_0_StylableTypography__heading-t","heading-xt":"wds_1_155_0_StylableTypography__heading-xt"};
+module.exports.classes = {"root":"wds_1_156_0_Heading__root","heading-h1":"wds_1_156_0_StylableTypography__heading-h1","heading-h2":"wds_1_156_0_StylableTypography__heading-h2","heading-h3":"wds_1_156_0_StylableTypography__heading-h3","heading-h4":"wds_1_156_0_StylableTypography__heading-h4","heading-h5":"wds_1_156_0_StylableTypography__heading-h5","heading-h6":"wds_1_156_0_StylableTypography__heading-h6","heading-xl":"wds_1_156_0_StylableTypography__heading-xl","heading-l":"wds_1_156_0_StylableTypography__heading-l","heading-m":"wds_1_156_0_StylableTypography__heading-m","heading-s":"wds_1_156_0_StylableTypography__heading-s","heading-t":"wds_1_156_0_StylableTypography__heading-t","heading-xt":"wds_1_156_0_StylableTypography__heading-xt"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Highlighter/Highlighter.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_Highlighter";
+var _namespace_ = "wds_1_156_0_Highlighter";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_Highlighter__root"};
+module.exports.classes = {"root":"wds_1_156_0_Highlighter__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/HorizontalTimeline/HorizontalTimeline.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_HorizontalTimeline";
+var _namespace_ = "wds_1_156_0_HorizontalTimeline";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_HorizontalTimeline__root","line":"wds_1_155_0_HorizontalTimeline__line","column":"wds_1_155_0_HorizontalTimeline__column","item":"wds_1_155_0_HorizontalTimeline__item","lineIconLine":"wds_1_155_0_HorizontalTimeline__lineIconLine","icon":"wds_1_155_0_HorizontalTimeline__icon","label":"wds_1_155_0_HorizontalTimeline__label"};
+module.exports.classes = {"root":"wds_1_156_0_HorizontalTimeline__root","line":"wds_1_156_0_HorizontalTimeline__line","column":"wds_1_156_0_HorizontalTimeline__column","item":"wds_1_156_0_HorizontalTimeline__item","lineIconLine":"wds_1_156_0_HorizontalTimeline__lineIconLine","icon":"wds_1_156_0_HorizontalTimeline__icon","label":"wds_1_156_0_HorizontalTimeline__label"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/HorizontalTimeline/HorizontalTimelineIcons.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_HorizontalTimelineIcons";
+var _namespace_ = "wds_1_156_0_HorizontalTimelineIcons";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_HorizontalTimelineIcons__root","baseIcon":"wds_1_155_0_HorizontalTimelineIcons__baseIcon","completeIcon":"wds_1_155_0_HorizontalTimelineIcons__completeIcon","errorIcon":"wds_1_155_0_HorizontalTimelineIcons__errorIcon","upcomingIcon":"wds_1_155_0_HorizontalTimelineIcons__upcomingIcon wds_1_155_0_HorizontalTimelineIcons__baseIcon","boundaryIcon":"wds_1_155_0_HorizontalTimelineIcons__boundaryIcon","activeIcon":"wds_1_155_0_HorizontalTimelineIcons__activeIcon wds_1_155_0_HorizontalTimelineIcons__baseIcon"};
-module.exports.keyframes = {"bounce":"wds_1_155_0_HorizontalTimelineIcons__bounce"}; 
+module.exports.classes = {"root":"wds_1_156_0_HorizontalTimelineIcons__root","baseIcon":"wds_1_156_0_HorizontalTimelineIcons__baseIcon","completeIcon":"wds_1_156_0_HorizontalTimelineIcons__completeIcon","errorIcon":"wds_1_156_0_HorizontalTimelineIcons__errorIcon","upcomingIcon":"wds_1_156_0_HorizontalTimelineIcons__upcomingIcon wds_1_156_0_HorizontalTimelineIcons__baseIcon","boundaryIcon":"wds_1_156_0_HorizontalTimelineIcons__boundaryIcon","activeIcon":"wds_1_156_0_HorizontalTimelineIcons__activeIcon wds_1_156_0_HorizontalTimelineIcons__baseIcon"};
+module.exports.keyframes = {"bounce":"wds_1_156_0_HorizontalTimelineIcons__bounce"}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 

package/dist/cjs/IconButton/IconButton.st.css.js

@@ -9,7 +9,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_IconButton";
+var _namespace_ = "wds_1_156_0_IconButton";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -17,7 +17,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_IconButton__root","mobile":"wds_1_155_0_WixDesignSystemProvider__mobile"};
+module.exports.classes = {"root":"wds_1_156_0_IconButton__root","mobile":"wds_1_156_0_WixDesignSystemProvider__mobile"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Image/Image.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_155_0_Image";
+var _namespace_ = "wds_1_156_0_Image";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_155_0_Image__root"};
+module.exports.classes = {"root":"wds_1_156_0_Image__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/ImageViewer/ImageViewer.js

@@ -16,7 +16,6 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _AddItem = _interopRequireDefault(require("../AddItem/AddItem"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _PopoverMenu = _interopRequireDefault(require("../PopoverMenu"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("./constants");
 var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
 var _StatusContext = require("../FormField/StatusContext");
@@ -48,7 +47,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 56,
+          lineNumber: 55,
           columnNumber: 7
         }
       });
@@ -61,14 +60,18 @@ class ImageViewer extends _react.Component {
         onLoad,
         onError,
         key,
-        dataHook
+        dataHook,
+        fit
       } = _ref;
       var dataAttributes = {
         'data-hook': dataHook,
         'data-image-visible': shouldDisplay
       };
       return /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
-        className: (0, _classnames.default)([_ImageViewerSt.classes.image, _ImageViewerSt.classes.stretch, shouldDisplay && _ImageViewerSt.classes.imageVisible]),
+        className: (0, _ImageViewerSt.st)(_ImageViewerSt.classes.image, {
+          shouldDisplay,
+          fit
+        }),
         src: imageUrl,
         onLoad: onLoad,
         onError: onError,
@@ -77,7 +80,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 83,
+          lineNumber: 82,
           columnNumber: 7
         }
       }));
@@ -108,6 +111,9 @@ class ImageViewer extends _react.Component {
       };
     };
     this._renderImage = () => {
+      var {
+        fit
+      } = this.props;
       var {
         imageLoading
       } = this.state;
@@ -130,7 +136,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 137,
+          lineNumber: 136,
           columnNumber: 7
         }
       }, this._renderImageElement({
@@ -141,12 +147,14 @@ class ImageViewer extends _react.Component {
           this._resetImageLoading();
         },
         dataHook: _constants.dataHooks.image,
-        key: generateKey(_constants.dataHooks.image, currentImageUrl)
+        key: generateKey(_constants.dataHooks.image, currentImageUrl),
+        fit
       }), this._renderImageElement({
         imageUrl: previousImageUrl,
         shouldDisplay: imageLoading && !!previousImageUrl,
         dataHook: _constants.dataHooks.previousImage,
-        key: generateKey(_constants.dataHooks.previousImage, previousImageUrl)
+        key: generateKey(_constants.dataHooks.previousImage, previousImageUrl),
+        fit
       }));
     };
     this._renderUpdateButton = ref => {
@@ -162,7 +170,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 172,
+          lineNumber: 173,
           columnNumber: 7
         }
       }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -174,14 +182,14 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 178,
+          lineNumber: 179,
           columnNumber: 9
         }
       }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Replace, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 185,
+          lineNumber: 186,
           columnNumber: 11
         }
       })));
@@ -202,7 +210,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 196,
+          lineNumber: 197,
           columnNumber: 7
         }
       }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -217,14 +225,14 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 202,
+          lineNumber: 203,
           columnNumber: 9
         }
       }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Delete, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 212,
+          lineNumber: 213,
           columnNumber: 11
         }
       })));
@@ -242,7 +250,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 221,
+          lineNumber: 222,
           columnNumber: 7
         }
       }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -256,14 +264,14 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 227,
+          lineNumber: 228,
           columnNumber: 9
         }
       }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Download, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 236,
+          lineNumber: 237,
           columnNumber: 11
         }
       })));
@@ -298,7 +306,7 @@ class ImageViewer extends _react.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 261,
+              lineNumber: 262,
               columnNumber: 11
             }
           }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -309,14 +317,14 @@ class ImageViewer extends _react.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 267,
+              lineNumber: 268,
               columnNumber: 13
             }
           }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.More, {
             __self: this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 273,
+              lineNumber: 274,
               columnNumber: 15
             }
           })));
@@ -324,7 +332,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 256,
+          lineNumber: 257,
           columnNumber: 7
         }
       }, /*#__PURE__*/_react.default.createElement(_PopoverMenu.default.MenuItem, {
@@ -332,7 +340,7 @@ class ImageViewer extends _react.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 279,
+            lineNumber: 280,
             columnNumber: 23
           }
         }),
@@ -341,7 +349,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 278,
+          lineNumber: 279,
           columnNumber: 9
         }
       }), /*#__PURE__*/_react.default.createElement(_PopoverMenu.default.MenuItem, {
@@ -349,7 +357,7 @@ class ImageViewer extends _react.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 284,
+            lineNumber: 285,
             columnNumber: 23
           }
         }),
@@ -358,7 +366,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 283,
+          lineNumber: 284,
           columnNumber: 9
         }
       }));
@@ -400,7 +408,7 @@ class ImageViewer extends _react.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 323,
+        lineNumber: 324,
         columnNumber: 5
       }
     }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
@@ -408,7 +416,7 @@ class ImageViewer extends _react.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 329,
+        lineNumber: 330,
         columnNumber: 7
       }
     }));
@@ -418,7 +426,7 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 335,
+          lineNumber: 336,
           columnNumber: 7
         }
       }, this._renderFirstButton(), this._renderSecondButton());
@@ -442,14 +450,14 @@ class ImageViewer extends _react.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 351,
+          lineNumber: 352,
           columnNumber: 7
         }
       }, content, /*#__PURE__*/_react.default.createElement("span", {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 360,
+          lineNumber: 361,
           columnNumber: 9
         }
       }));
@@ -492,6 +500,7 @@ class ImageViewer extends _react.Component {
       dataHook,
       removeRoundedBorders,
       imageUrl,
+      fit,
       status,
       statusMessage,
       className
@@ -527,7 +536,7 @@ class ImageViewer extends _react.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 406,
+        lineNumber: 408,
         columnNumber: 7
       }
     }), (hasNoPreviousImageWhileLoading || !hasImage) && this._renderAddImage(), this._renderImage(), !disabled && this._renderOverlayWith(imageLoading ? this._renderLoader() : hasImage && this._renderButtons()), (status || finalStatus === 'loading') && !disabled && /*#__PURE__*/_react.default.createElement("div", {
@@ -535,7 +544,7 @@ class ImageViewer extends _react.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 425,
+        lineNumber: 427,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement(_StatusIndicator.default, {
@@ -545,7 +554,7 @@ class ImageViewer extends _react.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 426,
+        lineNumber: 428,
         columnNumber: 13
       }
     })));
@@ -557,6 +566,7 @@ ImageViewer.defaultProps = {
   showUpdateButton: true,
   showDownloadButton: false,
   showRemoveButton: true,
+  fit: 'cover',
   addImageInfo: 'Add Image',
   updateImageInfo: 'Update',
   downloadImageInfo: 'Download',
@@ -574,6 +584,12 @@ ImageViewer.propTypes = {
   className: _propTypes.default.string,
   /** Links to image asset source (URL). Leave it blank when image is not uploaded yet. */
   imageUrl: _propTypes.default.string,
+  /**
+   * Specifies image fit mode inside a box.
+   * Check [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property values for more info.
+   * @default `cover`
+   */
+  fit: _propTypes.default.oneOf(['cover', 'contain']),
   /** Specifies the status of a viewer. */
   status: _propTypes.default.oneOf(['error', 'warning', 'loading']),
   /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */