@trafilea/afrodita-components 6.15.4 → 6.15.5

package/build/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
-import React__default, { FC, SVGProps, ReactNode, CSSProperties, ElementType, ReactFragment, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
+import React__default, { FC, SVGProps, ReactNode, CSSProperties, ElementType, ReactFragment, AriaAttributes, HTMLAttributes, LabelHTMLAttributes, DetailedHTMLProps, VideoHTMLAttributes, RefObject } from 'react';
 import { ComponentSize as ComponentSize$1 } from 'src/types/enums';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import { TextProps as TextProps$1 } from 'src/components/text/Text';
@@ -3515,7 +3515,7 @@ declare type VideoProps = {
     thumbnail: string;
     source: string;
     height?: string;
-};
+} & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
 declare const Video: React.FC<VideoProps>;
 
 declare type ProductGalleryMobileProps = {

package/build/index.esm.js

@@ -3363,12 +3363,12 @@ var buildImageUrl = function (_a) {
 
 var Img = newStyled.img(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
 var Image$3 = function (_a) {
-    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, className = _a.className;
+    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
     var config = useTheme().config;
     var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
         ? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
         : src;
-    return (jsx$1(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
+    return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
 };
 var templateObject_1$1W;
 
@@ -13325,7 +13325,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
   afterZoomOut: PropTypes.func
 } : {};
 
-var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: relative;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"], ["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: relative;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
+var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"], ["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
 var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"], ["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
 var templateObject_1$Y, templateObject_2$E;
 
@@ -13337,13 +13337,13 @@ var ProgressBar$1 = function (_a) {
 var Container$K = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  max-width: 530px;\n  position: relative;\n"], ["\n  max-width: 530px;\n  position: relative;\n"])));
 var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"], ["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"])), function (props) { return props.height; });
 var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"], ["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"])));
-var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"])));
-var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  position: absolute;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  position: absolute;\n"])));
+var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"])));
+var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
 var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
 
 var Video$1 = function (_a) {
     var _b, _c, _d, _e;
-    var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
+    var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, rest = __rest(_a, ["source", "thumbnail", "height", "className"]);
     var videoRef = useRef(null);
     var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
     var _g = useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
@@ -13378,7 +13378,7 @@ var Video$1 = function (_a) {
             setVideoProgress(videoRef.current.currentTime);
         }
     };
-    return (jsxs$1(Container$K, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$K, __assign$1({ className: className }, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
 };
 
 var Container$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"], ["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"])), function (_a) {

package/build/index.js

@@ -3389,12 +3389,12 @@ var buildImageUrl = function (_a) {
 
 var Img = newStyled.img(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
 var Image$3 = function (_a) {
-    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, className = _a.className;
+    var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
     var config = useTheme().config;
     var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
         ? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
         : src;
-    return (jsxRuntime.jsx(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
+    return (jsxRuntime.jsx(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
 };
 var templateObject_1$1W;
 
@@ -13351,7 +13351,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
   afterZoomOut: PropTypes.func
 } : {};
 
-var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: relative;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"], ["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: relative;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
+var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"], ["\n  top: 20px;\n  left: 10px;\n  border-radius: 10px;\n  position: absolute;\n  height: 5px;\n  width: 95%;\n  background: rgba(0, 0, 0, 0.3);\n  transition: opacity 0.3s ease-in-out;\n  opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
 var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"], ["\n  height: 100%;\n  width: ", "%;\n  background-color: white;\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
 var templateObject_1$Y, templateObject_2$E;
 
@@ -13363,13 +13363,13 @@ var ProgressBar$1 = function (_a) {
 var Container$K = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  max-width: 530px;\n  position: relative;\n"], ["\n  max-width: 530px;\n  position: relative;\n"])));
 var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"], ["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"])), function (props) { return props.height; });
 var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"], ["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"])));
-var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"])));
-var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  position: absolute;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 92%;\n  position: absolute;\n"])));
+var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"])));
+var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
 var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
 
 var Video$1 = function (_a) {
     var _b, _c, _d, _e;
-    var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
+    var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, rest = __rest(_a, ["source", "thumbnail", "height", "className"]);
     var videoRef = React$2.useRef(null);
     var _f = React$2.useState(true), isLoading = _f[0], setIsLoading = _f[1];
     var _g = React$2.useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
@@ -13404,7 +13404,7 @@ var Video$1 = function (_a) {
             setVideoProgress(videoRef.current.currentTime);
         }
     };
-    return (jsxRuntime.jsxs(Container$K, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(Container$K, __assign$1({ className: className }, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
 };
 
 var Container$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"], ["\n  ", "\n  z-index: 0;\n  position: relative;\n  height: '45rem' &.styleforhorizontal {\n    height: '30rem';\n  }\n  display: block;\n  height: fit-content;\n  overflow: hidden;\n  white-space: nowrap;\n  grid-area: 1/2;\n"])), function (_a) {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "6.15.4",
+  "version": "6.15.5",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",