@micromag/core 0.3.346 → 0.3.348

package/es/components.js

@@ -44,13 +44,13 @@ import { useSpring } from '@react-spring/core';
 import { config, animated } from '@react-spring/web';
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$L = {
+var propTypes$S = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$L = {
+var defaultProps$S = {
   isHtml: false,
   values: {}
 };
@@ -63,13 +63,13 @@ var Label = function Label(_ref) {
     values: values
   }, children)) : children;
 };
-Label.propTypes = propTypes$L;
-Label.defaultProps = defaultProps$L;
+Label.propTypes = propTypes$S;
+Label.defaultProps = defaultProps$S;
 
 var styles$w = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
 var _excluded$b = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$K = {
+var propTypes$R = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
   size: PropTypes.buttonSize,
@@ -103,7 +103,7 @@ var propTypes$K = {
   })])
 };
 
-var defaultProps$K = {
+var defaultProps$R = {
   type: 'button',
   theme: null,
   size: null,
@@ -215,13 +215,13 @@ var Button$1 = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button$1.propTypes = propTypes$K;
-Button$1.defaultProps = defaultProps$K;
+Button$1.propTypes = propTypes$R;
+Button$1.defaultProps = defaultProps$R;
 
 var styles$v = {};
 
 var _excluded$a = ["className", "onClick", "theme"];
-var propTypes$J = {
+var propTypes$Q = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -230,7 +230,7 @@ var propTypes$J = {
   className: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$J = {
+var defaultProps$Q = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -275,14 +275,14 @@ var Buttons = function Buttons(_ref) {
     return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
   }));
 };
-Buttons.propTypes = propTypes$J;
-Buttons.defaultProps = defaultProps$J;
+Buttons.propTypes = propTypes$Q;
+Buttons.defaultProps = defaultProps$Q;
 
 var _excluded$9 = ["className"];
-var propTypes$I = {
+var propTypes$P = {
   className: PropTypes$1.string
 };
-var defaultProps$I = {
+var defaultProps$P = {
   className: null
 };
 var BackButton = function BackButton(_ref) {
@@ -297,12 +297,12 @@ var BackButton = function BackButton(_ref) {
     })
   }, props));
 };
-BackButton.propTypes = propTypes$I;
-BackButton.defaultProps = defaultProps$I;
+BackButton.propTypes = propTypes$P;
+BackButton.defaultProps = defaultProps$P;
 
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
-var propTypes$H = {
+var propTypes$O = {
   name: PropTypes$1.string,
   // .isRequired,
   value: PropTypes.component,
@@ -316,7 +316,7 @@ var propTypes$H = {
   fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$H = {
+var defaultProps$O = {
   name: null,
   form: null,
   formComponents: {},
@@ -394,12 +394,12 @@ var FieldForm = function FieldForm(_ref) {
     isForm: true
   }, formProps))) : null;
 };
-FieldForm.propTypes = propTypes$H;
-FieldForm.defaultProps = defaultProps$H;
+FieldForm.propTypes = propTypes$O;
+FieldForm.defaultProps = defaultProps$O;
 
 var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var propTypes$G = {
+var propTypes$N = {
   action: PropTypes$1.string.isRequired,
   method: PropTypes$1.string,
   fields: PropTypes.formFields,
@@ -408,6 +408,8 @@ var propTypes$G = {
   postForm: PropTypes$1.func,
   submitButtonLabel: PropTypes.label,
   submitButtonLoadingLabel: PropTypes.label,
+  submitButtonTheme: PropTypes$1.string,
+  cancelButtonTheme: PropTypes$1.string,
   buttons: PropTypes.buttons,
   children: PropTypes$1.node,
   actionsAlign: PropTypes$1.oneOf(['left', 'right']),
@@ -426,7 +428,7 @@ var propTypes$G = {
   actionsClassName: PropTypes$1.string,
   cancelClassName: PropTypes$1.string
 };
-var defaultProps$G = {
+var defaultProps$N = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -439,6 +441,8 @@ var defaultProps$G = {
     }]
   }),
   submitButtonLoadingLabel: null,
+  submitButtonTheme: null,
+  cancelButtonTheme: null,
   buttons: null,
   children: null,
   actionsAlign: 'left',
@@ -466,6 +470,8 @@ var Form = function Form(_ref) {
     postForm = _ref.postForm,
     submitButtonLabel = _ref.submitButtonLabel,
     submitButtonLoadingLabel = _ref.submitButtonLoadingLabel,
+    submitButtonTheme = _ref.submitButtonTheme,
+    cancelButtonTheme = _ref.cancelButtonTheme,
     buttons = _ref.buttons,
     children = _ref.children,
     actionsAlign = _ref.actionsAlign,
@@ -599,7 +605,7 @@ var Form = function Form(_ref) {
     type: "button",
     onClick: onCancel,
     href: onCancelHref,
-    theme: "secondary",
+    theme: cancelButtonTheme || 'secondary',
     outline: true,
     disabled: status === 'loading',
     className: classNames(['me-2', _defineProperty({}, cancelClassName, cancelClassName !== null)])
@@ -614,7 +620,7 @@ var Form = function Form(_ref) {
     className: styles$u.buttons
   }) : /*#__PURE__*/React.createElement(Button$1, {
     type: "submit",
-    theme: "primary",
+    theme: submitButtonTheme || 'primary',
     disabled: status === 'loading' || !canSave
   }, status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel), complete ? /*#__PURE__*/React.createElement("p", {
     className: "text-success mx-2 my-1"
@@ -626,13 +632,13 @@ var Form = function Form(_ref) {
     }]
   })) : null) : null);
 };
-Form.propTypes = propTypes$G;
-Form.defaultProps = defaultProps$G;
+Form.propTypes = propTypes$N;
+Form.defaultProps = defaultProps$N;
 
 var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-var propTypes$F = {
+var propTypes$M = {
   href: PropTypes$1.string,
   external: PropTypes$1.bool,
   target: PropTypes$1.string,
@@ -641,7 +647,7 @@ var propTypes$F = {
   withoutStyle: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$F = {
+var defaultProps$M = {
   href: '',
   external: false,
   target: '_blank',
@@ -669,11 +675,11 @@ var Link = function Link(_ref) {
     to: href
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
-Link.propTypes = propTypes$F;
-Link.defaultProps = defaultProps$F;
+Link.propTypes = propTypes$M;
+Link.defaultProps = defaultProps$M;
 
 var _excluded$6 = ["label", "className"];
-var propTypes$E = {
+var propTypes$L = {
   href: PropTypes$1.string,
   header: PropTypes$1.node,
   image: PropTypes$1.node,
@@ -702,7 +708,7 @@ var propTypes$E = {
   onClickBody: PropTypes$1.func,
   onClickFooter: PropTypes$1.func
 };
-var defaultProps$E = {
+var defaultProps$L = {
   href: null,
   header: null,
   image: null,
@@ -816,15 +822,15 @@ var Card = function Card(_ref) {
     className: cardClassName
   }, cardInner);
 };
-Card.propTypes = propTypes$E;
-Card.defaultProps = defaultProps$E;
+Card.propTypes = propTypes$L;
+Card.defaultProps = defaultProps$L;
 
-var propTypes$D = {
+var propTypes$K = {
   animated: PropTypes$1.bool,
   color: PropTypes$1.string,
   className: PropTypes$1.string
 };
-var defaultProps$D = {
+var defaultProps$K = {
   animated: true,
   color: 'currentColor',
   className: null
@@ -887,19 +893,19 @@ var Spinner = function Spinner(_ref) {
     repeatCount: "indefinite"
   }) : null))));
 };
-Spinner.propTypes = propTypes$D;
-Spinner.defaultProps = defaultProps$D;
+Spinner.propTypes = propTypes$K;
+Spinner.defaultProps = defaultProps$K;
 
 var styles$s = {};
 
 var _excluded$5 = ["description", "loading", "children", "className"];
-var propTypes$C = {
+var propTypes$J = {
   description: PropTypes$1.node,
   loading: PropTypes$1.bool,
   children: PropTypes$1.node,
   className: PropTypes$1.string
 };
-var defaultProps$C = {
+var defaultProps$J = {
   description: null,
   loading: false,
   children: null,
@@ -915,8 +921,228 @@ var FormPanel = function FormPanel(_ref) {
     className: classNames([styles$s.container, _defineProperty({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
 };
-FormPanel.propTypes = propTypes$C;
-FormPanel.defaultProps = defaultProps$C;
+FormPanel.propTypes = propTypes$J;
+FormPanel.defaultProps = defaultProps$J;
+
+var propTypes$I = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$I = {
+  className: null,
+  color: '#fff'
+};
+var ArrowIcon = function ArrowIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "14",
+    viewBox: "0 0 20 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__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: color
+  }));
+};
+ArrowIcon.propTypes = propTypes$I;
+ArrowIcon.defaultProps = defaultProps$I;
+
+var propTypes$H = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$H = {
+  className: null,
+  color: '#fff'
+};
+var CloseIcon = function CloseIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 1L21 21",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 21L21 0.999998",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+};
+CloseIcon.propTypes = propTypes$H;
+CloseIcon.defaultProps = defaultProps$H;
+
+var propTypes$G = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$G = {
+  className: null,
+  color: '#fff'
+};
+var LinkIcon = function LinkIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.60207 8.70208C7.75493 10.2515 9.95019 10.5697 11.4965 9.40761C11.6277 9.31077 11.7589 9.2001 11.8762 9.08251L13.9749 6.97975C15.3417 5.61018 15.3417 3.39674 13.9749 2.02717C12.608 0.657609 10.3989 0.657609 9.03205 2.02717L7.83086 3.22381",
+    stroke: color,
+    strokeWidth: "1.25",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.39793 7.29793C8.24507 5.74852 6.04981 5.43034 4.50345 6.59239C4.37229 6.68923 4.24113 6.7999 4.12377 6.91749L2.02515 9.02026C0.658284 10.3898 0.658284 12.6033 2.02515 13.9728C3.39201 15.3424 5.60109 15.3424 6.96795 13.9728L8.16223 12.7762",
+    stroke: color,
+    strokeWidth: "1.25",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+LinkIcon.propTypes = propTypes$G;
+LinkIcon.defaultProps = defaultProps$G;
+
+var propTypes$F = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$F = {
+  className: null,
+  color: '#fff'
+};
+var MuteIcon = function MuteIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__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", {
+    d: "M18 15.6875C19.6569 15.6875 21 14.3444 21 12.6875C21 11.0306 19.6569 9.6875 18 9.6875",
+    stroke: color
+  }));
+};
+MuteIcon.propTypes = propTypes$F;
+MuteIcon.defaultProps = defaultProps$F;
+
+var propTypes$E = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$E = {
+  className: null,
+  color: '#fff'
+};
+var PauseIcon = function PauseIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    width: "14",
+    height: "18",
+    viewBox: "0 0 14 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "8",
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
+  }));
+};
+PauseIcon.propTypes = propTypes$E;
+PauseIcon.defaultProps = defaultProps$E;
+
+var propTypes$D = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$D = {
+  className: null,
+  color: '#fff'
+};
+var PlayIcon = function PlayIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "23",
+    viewBox: "0 0 20 23",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__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,
+    stroke: color
+  }));
+};
+PlayIcon.propTypes = propTypes$D;
+PlayIcon.defaultProps = defaultProps$D;
+
+var propTypes$C = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$C = {
+  className: null,
+  color: '#fff'
+};
+var UnmuteIcon = function UnmuteIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__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
+  }));
+};
+UnmuteIcon.propTypes = propTypes$C;
+UnmuteIcon.defaultProps = defaultProps$C;
 
 var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
@@ -4184,4 +4410,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };
+export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon, UploadModal };

package/lib/components.js

@@ -85,13 +85,13 @@ var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$L = {
+var propTypes$S = {
   children: core.PropTypes.label.isRequired,
   isHtml: PropTypes__default["default"].bool,
   values: PropTypes__default["default"].object // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$L = {
+var defaultProps$S = {
   isHtml: false,
   values: {}
 };
@@ -104,13 +104,13 @@ var Label = function Label(_ref) {
     values: values
   }, children)) : children;
 };
-Label.propTypes = propTypes$L;
-Label.defaultProps = defaultProps$L;
+Label.propTypes = propTypes$S;
+Label.defaultProps = defaultProps$S;
 
 var styles$w = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
 var _excluded$b = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$K = {
+var propTypes$R = {
   type: PropTypes__default["default"].string,
   theme: core.PropTypes.buttonTheme,
   size: core.PropTypes.buttonSize,
@@ -144,7 +144,7 @@ var propTypes$K = {
   })])
 };
 
-var defaultProps$K = {
+var defaultProps$R = {
   type: 'button',
   theme: null,
   size: null,
@@ -256,13 +256,13 @@ var Button$1 = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button$1.propTypes = propTypes$K;
-Button$1.defaultProps = defaultProps$K;
+Button$1.propTypes = propTypes$R;
+Button$1.defaultProps = defaultProps$R;
 
 var styles$v = {};
 
 var _excluded$a = ["className", "onClick", "theme"];
-var propTypes$J = {
+var propTypes$Q = {
   buttons: core.PropTypes.buttons,
   size: core.PropTypes.buttonSize,
   theme: core.PropTypes.buttonTheme,
@@ -271,7 +271,7 @@ var propTypes$J = {
   className: PropTypes__default["default"].string,
   buttonClassName: PropTypes__default["default"].string
 };
-var defaultProps$J = {
+var defaultProps$Q = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -316,14 +316,14 @@ var Buttons = function Buttons(_ref) {
     return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
   }));
 };
-Buttons.propTypes = propTypes$J;
-Buttons.defaultProps = defaultProps$J;
+Buttons.propTypes = propTypes$Q;
+Buttons.defaultProps = defaultProps$Q;
 
 var _excluded$9 = ["className"];
-var propTypes$I = {
+var propTypes$P = {
   className: PropTypes__default["default"].string
 };
-var defaultProps$I = {
+var defaultProps$P = {
   className: null
 };
 var BackButton = function BackButton(_ref) {
@@ -338,12 +338,12 @@ var BackButton = function BackButton(_ref) {
     })
   }, props));
 };
-BackButton.propTypes = propTypes$I;
-BackButton.defaultProps = defaultProps$I;
+BackButton.propTypes = propTypes$P;
+BackButton.defaultProps = defaultProps$P;
 
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
-var propTypes$H = {
+var propTypes$O = {
   name: PropTypes__default["default"].string,
   // .isRequired,
   value: core.PropTypes.component,
@@ -357,7 +357,7 @@ var propTypes$H = {
   fieldContext: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$H = {
+var defaultProps$O = {
   name: null,
   form: null,
   formComponents: {},
@@ -435,12 +435,12 @@ var FieldForm = function FieldForm(_ref) {
     isForm: true
   }, formProps))) : null;
 };
-FieldForm.propTypes = propTypes$H;
-FieldForm.defaultProps = defaultProps$H;
+FieldForm.propTypes = propTypes$O;
+FieldForm.defaultProps = defaultProps$O;
 
 var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var propTypes$G = {
+var propTypes$N = {
   action: PropTypes__default["default"].string.isRequired,
   method: PropTypes__default["default"].string,
   fields: core.PropTypes.formFields,
@@ -449,6 +449,8 @@ var propTypes$G = {
   postForm: PropTypes__default["default"].func,
   submitButtonLabel: core.PropTypes.label,
   submitButtonLoadingLabel: core.PropTypes.label,
+  submitButtonTheme: PropTypes__default["default"].string,
+  cancelButtonTheme: PropTypes__default["default"].string,
   buttons: core.PropTypes.buttons,
   children: PropTypes__default["default"].node,
   actionsAlign: PropTypes__default["default"].oneOf(['left', 'right']),
@@ -467,7 +469,7 @@ var propTypes$G = {
   actionsClassName: PropTypes__default["default"].string,
   cancelClassName: PropTypes__default["default"].string
 };
-var defaultProps$G = {
+var defaultProps$N = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -480,6 +482,8 @@ var defaultProps$G = {
     }]
   }),
   submitButtonLoadingLabel: null,
+  submitButtonTheme: null,
+  cancelButtonTheme: null,
   buttons: null,
   children: null,
   actionsAlign: 'left',
@@ -507,6 +511,8 @@ var Form = function Form(_ref) {
     postForm = _ref.postForm,
     submitButtonLabel = _ref.submitButtonLabel,
     submitButtonLoadingLabel = _ref.submitButtonLoadingLabel,
+    submitButtonTheme = _ref.submitButtonTheme,
+    cancelButtonTheme = _ref.cancelButtonTheme,
     buttons = _ref.buttons,
     children = _ref.children,
     actionsAlign = _ref.actionsAlign,
@@ -640,7 +646,7 @@ var Form = function Form(_ref) {
     type: "button",
     onClick: onCancel,
     href: onCancelHref,
-    theme: "secondary",
+    theme: cancelButtonTheme || 'secondary',
     outline: true,
     disabled: status === 'loading',
     className: classNames__default["default"](['me-2', _defineProperty__default["default"]({}, cancelClassName, cancelClassName !== null)])
@@ -655,7 +661,7 @@ var Form = function Form(_ref) {
     className: styles$u.buttons
   }) : /*#__PURE__*/React__default["default"].createElement(Button$1, {
     type: "submit",
-    theme: "primary",
+    theme: submitButtonTheme || 'primary',
     disabled: status === 'loading' || !canSave
   }, status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel), complete ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: "text-success mx-2 my-1"
@@ -667,13 +673,13 @@ var Form = function Form(_ref) {
     }]
   })) : null) : null);
 };
-Form.propTypes = propTypes$G;
-Form.defaultProps = defaultProps$G;
+Form.propTypes = propTypes$N;
+Form.defaultProps = defaultProps$N;
 
 var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-var propTypes$F = {
+var propTypes$M = {
   href: PropTypes__default["default"].string,
   external: PropTypes__default["default"].bool,
   target: PropTypes__default["default"].string,
@@ -682,7 +688,7 @@ var propTypes$F = {
   withoutStyle: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$F = {
+var defaultProps$M = {
   href: '',
   external: false,
   target: '_blank',
@@ -710,11 +716,11 @@ var Link = function Link(_ref) {
     to: href
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children));
 };
-Link.propTypes = propTypes$F;
-Link.defaultProps = defaultProps$F;
+Link.propTypes = propTypes$M;
+Link.defaultProps = defaultProps$M;
 
 var _excluded$6 = ["label", "className"];
-var propTypes$E = {
+var propTypes$L = {
   href: PropTypes__default["default"].string,
   header: PropTypes__default["default"].node,
   image: PropTypes__default["default"].node,
@@ -743,7 +749,7 @@ var propTypes$E = {
   onClickBody: PropTypes__default["default"].func,
   onClickFooter: PropTypes__default["default"].func
 };
-var defaultProps$E = {
+var defaultProps$L = {
   href: null,
   header: null,
   image: null,
@@ -857,15 +863,15 @@ var Card = function Card(_ref) {
     className: cardClassName
   }, cardInner);
 };
-Card.propTypes = propTypes$E;
-Card.defaultProps = defaultProps$E;
+Card.propTypes = propTypes$L;
+Card.defaultProps = defaultProps$L;
 
-var propTypes$D = {
+var propTypes$K = {
   animated: PropTypes__default["default"].bool,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$D = {
+var defaultProps$K = {
   animated: true,
   color: 'currentColor',
   className: null
@@ -928,19 +934,19 @@ var Spinner = function Spinner(_ref) {
     repeatCount: "indefinite"
   }) : null))));
 };
-Spinner.propTypes = propTypes$D;
-Spinner.defaultProps = defaultProps$D;
+Spinner.propTypes = propTypes$K;
+Spinner.defaultProps = defaultProps$K;
 
 var styles$s = {};
 
 var _excluded$5 = ["description", "loading", "children", "className"];
-var propTypes$C = {
+var propTypes$J = {
   description: PropTypes__default["default"].node,
   loading: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string
 };
-var defaultProps$C = {
+var defaultProps$J = {
   description: null,
   loading: false,
   children: null,
@@ -956,8 +962,228 @@ var FormPanel = function FormPanel(_ref) {
     className: classNames__default["default"]([styles$s.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React__default["default"].createElement(Spinner, null) : children);
 };
-FormPanel.propTypes = propTypes$C;
-FormPanel.defaultProps = defaultProps$C;
+FormPanel.propTypes = propTypes$J;
+FormPanel.defaultProps = defaultProps$J;
+
+var propTypes$I = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$I = {
+  className: null,
+  color: '#fff'
+};
+var ArrowIcon = function ArrowIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "20",
+    height: "14",
+    viewBox: "0 0 20 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React__default["default"].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: color
+  }));
+};
+ArrowIcon.propTypes = propTypes$I;
+ArrowIcon.defaultProps = defaultProps$I;
+
+var propTypes$H = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$H = {
+  className: null,
+  color: '#fff'
+};
+var CloseIcon = function CloseIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M1 1L21 21",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M1 21L21 0.999998",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+};
+CloseIcon.propTypes = propTypes$H;
+CloseIcon.defaultProps = defaultProps$H;
+
+var propTypes$G = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$G = {
+  className: null,
+  color: '#fff'
+};
+var LinkIcon = function LinkIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M6.60207 8.70208C7.75493 10.2515 9.95019 10.5697 11.4965 9.40761C11.6277 9.31077 11.7589 9.2001 11.8762 9.08251L13.9749 6.97975C15.3417 5.61018 15.3417 3.39674 13.9749 2.02717C12.608 0.657609 10.3989 0.657609 9.03205 2.02717L7.83086 3.22381",
+    stroke: color,
+    strokeWidth: "1.25",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M9.39793 7.29793C8.24507 5.74852 6.04981 5.43034 4.50345 6.59239C4.37229 6.68923 4.24113 6.7999 4.12377 6.91749L2.02515 9.02026C0.658284 10.3898 0.658284 12.6033 2.02515 13.9728C3.39201 15.3424 5.60109 15.3424 6.96795 13.9728L8.16223 12.7762",
+    stroke: color,
+    strokeWidth: "1.25",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+LinkIcon.propTypes = propTypes$G;
+LinkIcon.defaultProps = defaultProps$G;
+
+var propTypes$F = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$F = {
+  className: null,
+  color: '#fff'
+};
+var MuteIcon = function MuteIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].createElement("path", {
+    d: "M18 15.6875C19.6569 15.6875 21 14.3444 21 12.6875C21 11.0306 19.6569 9.6875 18 9.6875",
+    stroke: color
+  }));
+};
+MuteIcon.propTypes = propTypes$F;
+MuteIcon.defaultProps = defaultProps$F;
+
+var propTypes$E = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$E = {
+  className: null,
+  color: '#fff'
+};
+var PauseIcon = function PauseIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: className,
+    width: "14",
+    height: "18",
+    viewBox: "0 0 14 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("rect", {
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
+  }), /*#__PURE__*/React__default["default"].createElement("rect", {
+    x: "8",
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
+  }));
+};
+PauseIcon.propTypes = propTypes$E;
+PauseIcon.defaultProps = defaultProps$E;
+
+var propTypes$D = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$D = {
+  className: null,
+  color: '#fff'
+};
+var PlayIcon = function PlayIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "20",
+    height: "23",
+    viewBox: "0 0 20 23",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React__default["default"].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,
+    stroke: color
+  }));
+};
+PlayIcon.propTypes = propTypes$D;
+PlayIcon.defaultProps = defaultProps$D;
+
+var propTypes$C = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$C = {
+  className: null,
+  color: '#fff'
+};
+var UnmuteIcon = function UnmuteIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React__default["default"].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__default["default"].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
+  }));
+};
+UnmuteIcon.propTypes = propTypes$C;
+UnmuteIcon.defaultProps = defaultProps$C;
 
 var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
@@ -4225,12 +4451,14 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
+exports.ArrowIcon = ArrowIcon;
 exports.BackButton = BackButton;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
 exports.Buttons = Buttons;
 exports.Card = Card;
 exports.Close = Close;
+exports.CloseIcon = CloseIcon;
 exports.CollapsablePanel = CollapsablePanel;
 exports.Date = Date$1;
 exports.Detector = Detector;
@@ -4244,6 +4472,7 @@ exports.FormPanel = FormPanel;
 exports.HighlightStyle = HighlightStyle;
 exports.Label = Label;
 exports.Link = Link;
+exports.LinkIcon = LinkIcon;
 exports.LinkStyle = LinkStyle;
 exports.Media = Media;
 exports.Menu = Menu;
@@ -4252,11 +4481,13 @@ exports.Modal = Modal;
 exports.ModalDialog = ModalDialog;
 exports.ModalPortal = ModalPortal;
 exports.Modals = Modals;
+exports.MuteIcon = MuteIcon;
 exports.Navbar = Navbar;
 exports.Pagination = PaginationMenu;
 exports.Panel = Panel;
 exports.PanelPortal = PanelPortal;
 exports.Panels = Panels;
+exports.PauseIcon = PauseIcon;
 exports.PlaceholderAdFrame = AdFrame;
 exports.PlaceholderAdImage = AdImage;
 exports.PlaceholderAudio = Audio;
@@ -4274,6 +4505,7 @@ exports.PlaceholderTitle = Title$1;
 exports.PlaceholderVideo = Video;
 exports.PlaceholderVideo360 = Video360;
 exports.PlaceholderVideoLoop = VideoLoop;
+exports.PlayIcon = PlayIcon;
 exports.Screen = Screen$1;
 exports.ScreenElement = ScreenElement;
 exports.ScreenPlaceholder = Placeholder;
@@ -4285,4 +4517,5 @@ exports.Spinner = Spinner;
 exports.Tabs = TabsMenu;
 exports.Transitions = Transitions;
 exports.TransitionsStagger = TransitionsStagger;
+exports.UnmuteIcon = UnmuteIcon;
 exports.UploadModal = UploadModal;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.346",
+    "version": "0.3.348",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a71f64210aaba1aef0fc07b6cc087badb2e74119"
+    "gitHead": "20ef008fdf5c678004b740f395f51cb548591dad"
 }