@telefonica/mistica 11.6.0 → 11.7.0

package/dist/image.d.ts

@@ -14,7 +14,7 @@ export declare type ImageProps = {
     /** defaults to 100% when no width and no height are given */
     width?: string | number;
     height?: string | number;
-    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original image proportions, set aspectRatio to 0  */
     aspectRatio?: AspectRatio | number;
     /** defaults to empty string */
     alt?: string;

package/dist/image.js

@@ -108,17 +108,18 @@ var useStyles = (0, _jss).createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function borderRadius(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function aspectRatio(param) {
                     var aspectRatio1 = param.aspectRatio;
                     return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -166,9 +167,10 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var supportsAspectRatio = (0, _aspectRatioSupport).useSupportsAspectRatio();
     var noBorderRadiusContext = useDisableBorderRadius();
     var noBorderSetting = noBorderRadius !== null && noBorderRadius !== void 0 ? noBorderRadius : noBorderRadiusContext;
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css.
+    // if aspect ratio is 0, we use the original image proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderSetting,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/dist/image.js.flow

@@ -19,7 +19,7 @@ export type ImageProps = {
  width?: string | number,
  height?: string | number,
  /**
-  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original image proportions, set aspectRatio to 0
   */
  aspectRatio?: AspectRatio | number,
  /**

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "11.6.0";
+var PACKAGE_VERSION = "11.7.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/video.d.ts

@@ -15,7 +15,7 @@ export declare type VideoProps = {
     /** defaults to 100% when no width and no height are given */
     width?: string | number;
     height?: string | number;
-    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original video proportions, set aspectRatio to 0 */
     aspectRatio?: AspectRatio | number;
     /** accepts multiple sources */
     src: string | Array<string> | VideoSource | Array<VideoSource>;

package/dist/video.js

@@ -101,17 +101,18 @@ var useStyles = (0, _jss).createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function borderRadius(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function aspectRatio(param) {
                     var aspectRatio1 = param.aspectRatio;
                     return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -155,9 +156,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     var supportsAspectRatio = (0, _aspectRatioSupport).useSupportsAspectRatio();
     var noBorderRadius = (0, _image).useDisableBorderRadius();
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css
+    // if aspect ratio is 0, we use the original video proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/dist/video.js.flow

@@ -20,7 +20,7 @@ export type VideoProps = {
  width?: string | number,
  height?: string | number,
  /**
-  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original video proportions, set aspectRatio to 0
   */
  aspectRatio?: AspectRatio | number,
  /**

package/dist-es/image.js

@@ -79,17 +79,18 @@ var useStyles = createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function(param) {
                     var aspectRatio = param.aspectRatio;
                     return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -136,9 +137,10 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadiusContext = useDisableBorderRadius();
     var noBorderSetting = noBorderRadius !== null && noBorderRadius !== void 0 ? noBorderRadius : noBorderRadiusContext;
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css.
+    // if aspect ratio is 0, we use the original image proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderSetting,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "11.6.0";
+export var PACKAGE_VERSION = "11.7.0";

package/dist-es/video.js

@@ -73,17 +73,18 @@ var useStyles = createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             "@supports (aspect-ratio: 1 / 1)": {
-                borderRadius: function(param) {
-                    var noBorderRadius = param.noBorderRadius;
-                    return noBorderRadius ? 0 : 4;
-                },
                 aspectRatio: function(param) {
                     var aspectRatio = param.aspectRatio;
                     return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
                 }
             },
             "$wrapper &": {
+                borderRadius: 0,
                 position: "absolute",
                 width: "100%",
                 height: "100%",
@@ -127,9 +128,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadius = useDisableBorderRadius();
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number";
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
+    // if width or height are numeric, we can calculate the other with the ratio without css
+    // if aspect ratio is 0, we use the original video proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
         noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.6.0",
+    "version": "11.7.0",
     "license": "MIT",
     "repository": {
         "type": "git",