@micromag/viewer 0.3.345 → 0.3.347

package/es/index.js

@@ -200,8 +200,8 @@ function useScreenInteraction() {
 
 var styles$g = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled"};
 
-var _excluded$8 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$n = {
+var _excluded$9 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var propTypes$o = {
   type: PropTypes.string,
   theme: PropTypes$1.buttonTheme,
   size: PropTypes$1.buttonSize,
@@ -229,7 +229,7 @@ var propTypes$n = {
   })])
 };
 
-var defaultProps$n = {
+var defaultProps$o = {
   type: 'button',
   theme: null,
   size: null,
@@ -279,7 +279,7 @@ var Button = function Button(_ref) {
     iconClassName = _ref.iconClassName,
     labelClassName = _ref.labelClassName,
     refButton = _ref.refButton,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
@@ -337,40 +337,43 @@ var Button = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button.propTypes = propTypes$n;
-Button.defaultProps = defaultProps$n;
+Button.propTypes = propTypes$o;
+Button.defaultProps = defaultProps$o;
 
-var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","icon":"micromag-viewer-buttons-icon-button-icon","label":"micromag-viewer-buttons-icon-button-label"};
+var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
 
-var _excluded$7 = ["className"];
-var propTypes$m = {
+var _excluded$8 = ["iconClassName", "className"];
+var propTypes$n = {
+  iconClassName: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$m = {
+var defaultProps$n = {
+  iconClassName: null,
   className: null
 };
 var IconButton = function IconButton(_ref) {
-  var className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+  var iconClassName = _ref.iconClassName,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
     className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
     labelClassName: styles$f.label,
-    iconClassName: styles$f.icon
+    iconClassName: classNames([styles$f.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, props));
 };
-IconButton.propTypes = propTypes$m;
-IconButton.defaultProps = defaultProps$m;
+IconButton.propTypes = propTypes$n;
+IconButton.defaultProps = defaultProps$n;
 
-var _excluded$6 = ["className"];
-var propTypes$l = {
+var _excluded$7 = ["className"];
+var propTypes$m = {
   className: PropTypes.string
 };
-var defaultProps$l = {
+var defaultProps$m = {
   className: null
 };
-var CloseButton = function CloseButton(_ref) {
+var CloseButton$1 = function CloseButton(_ref) {
   var className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(IconButton, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
@@ -392,6 +395,61 @@ var CloseButton = function CloseButton(_ref) {
     }))
   }, props));
 };
+CloseButton$1.propTypes = propTypes$m;
+CloseButton$1.defaultProps = defaultProps$m;
+
+var _excluded$6 = ["className"];
+var propTypes$l = {
+  className: PropTypes.string
+};
+var defaultProps$l = {
+  className: null
+};
+var CloseButton = function CloseButton(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    className: classNames([_defineProperty({}, className, className !== null)]),
+    label: intl.formatMessage({
+      id: "dj/p/q",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Close"
+      }]
+    }),
+    icon: /*#__PURE__*/React.createElement("svg", {
+      width: "19",
+      height: "23",
+      viewBox: "0 0 19 23",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("mask", {
+      id: "path-1-inside-1_560_19911",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
+    })), /*#__PURE__*/React.createElement("path", {
+      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
+      fill: "currentColor",
+      mask: "url(#path-1-inside-1_560_19911)"
+    }), /*#__PURE__*/React.createElement("rect", {
+      x: "3.5",
+      y: "0.5",
+      width: "15",
+      height: "19",
+      rx: "2.5",
+      stroke: "currentColor"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M7.35333 6.35333L14.6467 13.6467",
+      stroke: "currentColor",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M7.35333 13.6467L14.6467 6.35333",
+      stroke: "white"
+    }))
+  }, props));
+};
 CloseButton.propTypes = propTypes$l;
 CloseButton.defaultProps = defaultProps$l;
 
@@ -420,15 +478,27 @@ var MenuButton = function MenuButton(_ref) {
     }),
     iconPosition: "right",
     icon: /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10",
-      height: "16",
-      viewBox: "0 0 10 16",
+      width: "19",
+      height: "23",
+      viewBox: "0 0 19 23",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("mask", {
+      id: "path-1-inside-1_572_15622",
       fill: "currentColor"
-      // className={iconClassName}
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "10",
-      height: "16"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M0 7C0 4.79086 1.79086 3 4 3H12C14.2091 3 16 4.79086 16 7V19C16 21.2091 14.2091 23 12 23H4C1.79086 23 0 21.2091 0 19V7Z"
+    })), /*#__PURE__*/React.createElement("path", {
+      d: "M0 3H16H0ZM16 19C16 21.7614 13.7614 24 11 24H4C1.23858 24 -1 21.7614 -1 19H1C1 20.6569 2.34315 22 4 22H12C14.2091 22 16 20.6569 16 19ZM4 24C1.23858 24 -1 21.7614 -1 19V8C-1 5.23858 1.23858 3 4 3C2.34315 3 1 4.79086 1 7V19C1 20.6569 2.34315 22 4 22V24ZM16 3V23V3Z",
+      fill: "currentColor",
+      mask: "url(#path-1-inside-1_572_15622)"
+    }), /*#__PURE__*/React.createElement("rect", {
+      x: "3.5",
+      y: "0.5",
+      width: "15",
+      height: "19",
+      rx: "2.5",
+      stroke: "currentColor"
     }))
   }, props));
 };
@@ -457,15 +527,21 @@ var ShareButton = function ShareButton(_ref) {
     }),
     iconPosition: "left",
     icon: /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10px",
-      height: "16px",
-      viewBox: "0 0 10 16",
+      width: "16",
+      height: "22",
+      viewBox: "0 0 16 22",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.55806 0.183058C7.80213 -0.0610194 8.19786 -0.0610194 8.44194 0.183058L12.4194 4.16053C12.6635 4.40461 12.6635 4.80034 12.4194 5.04442C12.1753 5.2885 11.7796 5.2885 11.5355 5.04442L8.625 2.13388V11.25H7.375V2.13388L4.46446 5.04442C4.22039 5.2885 3.82466 5.2885 3.58058 5.04442C3.3365 4.80034 3.3365 4.40461 3.58058 4.16053L7.55806 0.183058Z",
+      fill: "currentColor"
+    }), /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M16 18.25V10.25C16 8.59315 14.6569 7.25 13 7.25C14.1046 7.25 15 8.59315 15 10.25V18.25C15 19.3546 14.1046 20.25 13 20.25H3C1.89543 20.25 1 19.3546 1 18.25V10.25C1 8.59315 1.89543 7.25 3 7.25C1.34315 7.25 0 8.59315 0 10.25V18.25C0 19.9069 1.34315 21.25 3 21.25H13C14.6569 21.25 16 19.9069 16 18.25Z",
       fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("polygon", {
-      points: "8.5 14.5 1.5 14.5 1.5 8 0 8 0 16 10 16 10 8 8.5 8 8.5 14.5"
-    }), /*#__PURE__*/React.createElement("polygon", {
-      points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 11.26 5.75 11.26 5.75 2.87 8.56 5.68 9.62 4.62"
     }))
   }, props));
 };
@@ -1559,7 +1635,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       iconPosition: "left",
       focusable: !shareOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
@@ -1795,17 +1871,17 @@ var ArrowHint = function ArrowHint(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.inner
   }, /*#__PURE__*/React.createElement("svg", {
-    className: styles$3.arrow,
+    width: "20",
+    height: "14",
+    viewBox: "0 0 20 14",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0px",
-    y: "0px",
-    width: "10px",
-    height: "16px",
-    viewBox: "0 0 10 16",
+    className: styles$3.arrow
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.353 0.371014L19.319 6.33704C19.6851 6.70314 19.6851 7.29671 19.319 7.66282L13.353 13.6288C12.9869 13.9949 12.3933 13.9949 12.0272 13.6288C11.6611 13.2627 11.6611 12.6692 12.0272 12.3031L16.3929 7.9374H0V6.06246H16.3929L12.0272 1.6968C11.6611 1.33069 11.6611 0.737119 12.0272 0.371014C12.3933 0.0049094 12.9869 0.0049094 13.353 0.371014Z",
     fill: "currentColor"
-  }, /*#__PURE__*/React.createElement("polygon", {
-    points: "9.62 4.62 5 0 0.38 4.62 1.44 5.68 4.25 2.87 4.25 14.39 5.75 14.39 5.75 2.87 8.56 5.68 9.62 4.62"
   }))));
 };
 ArrowHint.propTypes = propTypes$6;
@@ -2144,39 +2220,33 @@ function PlaybackControls(_ref) {
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
   var icon = playing ? /*#__PURE__*/React.createElement("svg", {
     className: styles$1.icon,
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0px",
-    y: "0px",
-    width: "10px",
-    height: "16px",
-    viewBox: "0 0 10 16",
-    xmlSpace: "preserve"
+    width: "14",
+    height: "18",
+    viewBox: "0 0 14 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("rect", {
-    fill: color,
-    x: "1",
-    y: "3.27",
-    width: "3",
-    height: "9.69"
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: color,
-    x: "6",
-    y: "3.27",
-    width: "3",
-    height: "9.69"
+    x: "8",
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
   })) : /*#__PURE__*/React.createElement("svg", {
-    className: styles$1.icon,
+    width: "20",
+    height: "23",
+    viewBox: "0 0 20 23",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0px",
-    y: "0px",
-    width: "10px",
-    height: "16px",
-    viewBox: "0 0 10 16",
-    xmlSpace: "preserve"
+    className: styles$1.icon
   }, /*#__PURE__*/React.createElement("path", {
+    d: "M16.25 12.5574L2.74999 20.3516C1.74999 20.9289 0.499993 20.2073 0.499993 19.0526L0.499994 3.4641C0.499994 2.3094 1.74999 1.58771 2.74999 2.16506L16.25 9.95929C17.25 10.5366 17.25 11.98 16.25 12.5574Z",
     fill: color,
-    d: "M1,3.16V12.84l8-4.84L1,3.16"
+    stroke: color
   }));
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$1.withPlayPause, controls && !seekBarOnly), _defineProperty(_ref4, styles$1.withMute, hasMedia || controls), _defineProperty(_ref4, styles$1.withSeekBar, controls), _defineProperty(_ref4, styles$1.withSeekBarOnly, seekBarOnly), _defineProperty(_ref4, styles$1.isCollapsed, isCollapsed), _defineProperty(_ref4, styles$1.isMuted, muted), _defineProperty(_ref4, collapsedClassName, collapsedClassName !== null && isCollapsed), _ref4)])
@@ -2227,42 +2297,36 @@ function PlaybackControls(_ref) {
     onClick: muted ? onUnmute : onMute,
     focusable: controlsVisible || mediaHasAudio,
     icon: muted ? /*#__PURE__*/React.createElement("svg", {
+      width: "26",
+      height: "26",
+      viewBox: "0 0 26 26",
+      fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      xmlnsXlink: "http://www.w3.org/1999/xlink",
-      x: "0px",
-      y: "0px",
-      width: "10px",
-      height: "16px",
-      viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
       className: styles$1.icon
-    }, /*#__PURE__*/React.createElement("polygon", {
-      fill: color,
-      points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
-    }), /*#__PURE__*/React.createElement("polygon", {
-      fill: color,
-      points: "10 6.63 8.94 5.57 7.58 6.93 6.21 5.57 5.15 6.63 6.52 7.99 5.15 9.35 6.21 10.43 7.58 9.06 8.94 10.43 10 9.35 8.64 7.99 10 6.63"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
+      fill: color
+    }), /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20.8536 13.3946L23 15.5411L23.7071 14.834L21.5607 12.6875L23.7071 10.5411L23 9.83398L20.8536 11.9804L18.7071 9.83398L18 10.5411L20.1464 12.6875L18 14.834L18.7071 15.5411L20.8536 13.3946Z",
+      fill: color
     })) : /*#__PURE__*/React.createElement("svg", {
+      width: "26",
+      height: "26",
+      viewBox: "0 0 26 26",
+      fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      xmlnsXlink: "http://www.w3.org/1999/xlink",
-      x: "0px",
-      y: "0px",
-      width: "10px",
-      height: "16px",
-      viewBox: "0 0 10 16",
-      xmlSpace: "preserve",
       className: styles$1.icon
-    }, /*#__PURE__*/React.createElement("polygon", {
-      fill: color,
-      points: "2.75 4.63 1.24 6 0 6 0 10 1.24 10 4.54 13 4.54 3 2.75 4.63"
-    }), /*#__PURE__*/React.createElement("circle", {
-      fill: color,
-      cx: "6.14",
-      cy: "8",
-      r: ".99"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
+      fill: color
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M18 18.6875C21.3137 18.6875 24 16.0012 24 12.6875C24 9.37379 21.3137 6.6875 18 6.6875",
+      stroke: color
     }), /*#__PURE__*/React.createElement("path", {
-      fill: color,
-      d: "M6.14,11.88v-1.5c1.31,0,2.38-1.07,2.38-2.38s-1.07-2.38-2.38-2.38v-1.5c2.14,0,3.88,1.74,3.88,3.88s-1.74,3.88-3.88,3.88Z"
+      d: "M18 15.6875C19.6569 15.6875 21 14.3444 21 12.6875C21 11.0306 19.6569 9.6875 18 9.6875",
+      stroke: color
     })),
     "aria-label": muted ? intl.formatMessage({
       id: "RK/QEY",