@micromag/core 0.3.377 → 0.3.389

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$S = {
+var propTypes$T = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$S = {
+var defaultProps$T = {
   isHtml: false,
   values: {}
 };
@@ -63,13 +63,13 @@ var Label = function Label(_ref) {
     values: values
   }, children)) : children;
 };
-Label.propTypes = propTypes$S;
-Label.defaultProps = defaultProps$S;
+Label.propTypes = propTypes$T;
+Label.defaultProps = defaultProps$T;
 
 var styles$x = {"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$R = {
+var propTypes$S = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
   size: PropTypes.buttonSize,
@@ -103,7 +103,7 @@ var propTypes$R = {
   })])
 };
 
-var defaultProps$R = {
+var defaultProps$S = {
   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$R;
-Button$1.defaultProps = defaultProps$R;
+Button$1.propTypes = propTypes$S;
+Button$1.defaultProps = defaultProps$S;
 
 var styles$w = {};
 
 var _excluded$a = ["className", "onClick", "theme"];
-var propTypes$Q = {
+var propTypes$R = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -230,7 +230,7 @@ var propTypes$Q = {
   className: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$Q = {
+var defaultProps$R = {
   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$Q;
-Buttons.defaultProps = defaultProps$Q;
+Buttons.propTypes = propTypes$R;
+Buttons.defaultProps = defaultProps$R;
 
 var _excluded$9 = ["className"];
-var propTypes$P = {
+var propTypes$Q = {
   className: PropTypes$1.string
 };
-var defaultProps$P = {
+var defaultProps$Q = {
   className: null
 };
 var BackButton = function BackButton(_ref) {
@@ -297,12 +297,12 @@ var BackButton = function BackButton(_ref) {
     })
   }, props));
 };
-BackButton.propTypes = propTypes$P;
-BackButton.defaultProps = defaultProps$P;
+BackButton.propTypes = propTypes$Q;
+BackButton.defaultProps = defaultProps$Q;
 
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
-var propTypes$O = {
+var propTypes$P = {
   name: PropTypes$1.string,
   // .isRequired,
   value: PropTypes.component,
@@ -316,7 +316,7 @@ var propTypes$O = {
   fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$O = {
+var defaultProps$P = {
   name: null,
   form: null,
   formComponents: {},
@@ -394,12 +394,12 @@ var FieldForm = function FieldForm(_ref) {
     isForm: true
   }, formProps))) : null;
 };
-FieldForm.propTypes = propTypes$O;
-FieldForm.defaultProps = defaultProps$O;
+FieldForm.propTypes = propTypes$P;
+FieldForm.defaultProps = defaultProps$P;
 
 var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var propTypes$N = {
+var propTypes$O = {
   action: PropTypes$1.string.isRequired,
   method: PropTypes$1.string,
   fields: PropTypes.formFields,
@@ -428,7 +428,7 @@ var propTypes$N = {
   actionsClassName: PropTypes$1.string,
   cancelClassName: PropTypes$1.string
 };
-var defaultProps$N = {
+var defaultProps$O = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -632,13 +632,13 @@ var Form = function Form(_ref) {
     }]
   })) : null) : null);
 };
-Form.propTypes = propTypes$N;
-Form.defaultProps = defaultProps$N;
+Form.propTypes = propTypes$O;
+Form.defaultProps = defaultProps$O;
 
 var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-var propTypes$M = {
+var propTypes$N = {
   href: PropTypes$1.string,
   external: PropTypes$1.bool,
   target: PropTypes$1.string,
@@ -647,7 +647,7 @@ var propTypes$M = {
   withoutStyle: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$M = {
+var defaultProps$N = {
   href: '',
   external: false,
   target: '_blank',
@@ -675,11 +675,11 @@ var Link = function Link(_ref) {
     to: href
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
-Link.propTypes = propTypes$M;
-Link.defaultProps = defaultProps$M;
+Link.propTypes = propTypes$N;
+Link.defaultProps = defaultProps$N;
 
 var _excluded$6 = ["label", "className"];
-var propTypes$L = {
+var propTypes$M = {
   href: PropTypes$1.string,
   header: PropTypes$1.node,
   image: PropTypes$1.node,
@@ -708,7 +708,7 @@ var propTypes$L = {
   onClickBody: PropTypes$1.func,
   onClickFooter: PropTypes$1.func
 };
-var defaultProps$L = {
+var defaultProps$M = {
   href: null,
   header: null,
   image: null,
@@ -822,18 +822,18 @@ var Card = function Card(_ref) {
     className: cardClassName
   }, cardInner);
 };
-Card.propTypes = propTypes$L;
-Card.defaultProps = defaultProps$L;
+Card.propTypes = propTypes$M;
+Card.defaultProps = defaultProps$M;
 
 var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated","rotate":"micromag-core-partials-spinner-rotate","dash":"micromag-core-partials-spinner-dash"};
 
-var propTypes$K = {
+var propTypes$L = {
   animated: PropTypes$1.bool,
   color: PropTypes$1.string,
   strokeWidth: PropTypes$1.number,
   className: PropTypes$1.string
 };
-var defaultProps$K = {
+var defaultProps$L = {
   animated: true,
   color: 'currentColor',
   strokeWidth: 3,
@@ -861,19 +861,19 @@ var Spinner = function Spinner(_ref) {
     strokeWidth: strokeWidth
   }));
 };
-Spinner.propTypes = propTypes$K;
-Spinner.defaultProps = defaultProps$K;
+Spinner.propTypes = propTypes$L;
+Spinner.defaultProps = defaultProps$L;
 
 var styles$s = {};
 
 var _excluded$5 = ["description", "loading", "children", "className"];
-var propTypes$J = {
+var propTypes$K = {
   description: PropTypes$1.node,
   loading: PropTypes$1.bool,
   children: PropTypes$1.node,
   className: PropTypes$1.string
 };
-var defaultProps$J = {
+var defaultProps$K = {
   description: null,
   loading: false,
   children: null,
@@ -889,14 +889,14 @@ 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$J;
-FormPanel.defaultProps = defaultProps$J;
+FormPanel.propTypes = propTypes$K;
+FormPanel.defaultProps = defaultProps$K;
 
-var propTypes$I = {
+var propTypes$J = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$I = {
+var defaultProps$J = {
   className: null,
   color: '#fff'
 };
@@ -917,14 +917,14 @@ var ArrowIcon = function ArrowIcon(_ref) {
     fill: color
   }));
 };
-ArrowIcon.propTypes = propTypes$I;
-ArrowIcon.defaultProps = defaultProps$I;
+ArrowIcon.propTypes = propTypes$J;
+ArrowIcon.defaultProps = defaultProps$J;
 
-var propTypes$H = {
+var propTypes$I = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$H = {
+var defaultProps$I = {
   className: null,
   color: '#fff'
 };
@@ -950,8 +950,34 @@ var CloseIcon = function CloseIcon(_ref) {
     strokeLinecap: "round"
   }));
 };
-CloseIcon.propTypes = propTypes$H;
-CloseIcon.defaultProps = defaultProps$H;
+CloseIcon.propTypes = propTypes$I;
+CloseIcon.defaultProps = defaultProps$I;
+
+var propTypes$H = {
+  className: PropTypes$1.string,
+  color: PropTypes$1.string
+};
+var defaultProps$H = {
+  className: null,
+  color: '#fff'
+};
+var FullscreenIcon = function FullscreenIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.2 0H16V4.66667H14.4V1.55556H11.2V0ZM0 0H4.8V1.55556H1.6V4.66667H0V0ZM14.4 12.4444V9.33333H16V14H11.2V12.4444H14.4ZM1.6 12.4444H4.8V14H0V9.33333H1.6V12.4444Z",
+    fill: color
+  }));
+};
+FullscreenIcon.propTypes = propTypes$H;
+FullscreenIcon.defaultProps = defaultProps$H;
 
 var propTypes$G = {
   className: PropTypes$1.string,
@@ -3665,7 +3691,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
   }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
   return /*#__PURE__*/React.createElement("div", {
-    styles: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
     ref: !hasSize ? refContainer : null
   }, hasFrameSize ? /*#__PURE__*/React.createElement("div", {
     className: styles$9.frame,
@@ -4391,4 +4417,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-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 };
+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, FullscreenIcon, 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$S = {
+var propTypes$T = {
   children: core.PropTypes.label.isRequired,
   isHtml: PropTypes__default["default"].bool,
   values: PropTypes__default["default"].object // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$S = {
+var defaultProps$T = {
   isHtml: false,
   values: {}
 };
@@ -104,13 +104,13 @@ var Label = function Label(_ref) {
     values: values
   }, children)) : children;
 };
-Label.propTypes = propTypes$S;
-Label.defaultProps = defaultProps$S;
+Label.propTypes = propTypes$T;
+Label.defaultProps = defaultProps$T;
 
 var styles$x = {"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$R = {
+var propTypes$S = {
   type: PropTypes__default["default"].string,
   theme: core.PropTypes.buttonTheme,
   size: core.PropTypes.buttonSize,
@@ -144,7 +144,7 @@ var propTypes$R = {
   })])
 };
 
-var defaultProps$R = {
+var defaultProps$S = {
   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$R;
-Button$1.defaultProps = defaultProps$R;
+Button$1.propTypes = propTypes$S;
+Button$1.defaultProps = defaultProps$S;
 
 var styles$w = {};
 
 var _excluded$a = ["className", "onClick", "theme"];
-var propTypes$Q = {
+var propTypes$R = {
   buttons: core.PropTypes.buttons,
   size: core.PropTypes.buttonSize,
   theme: core.PropTypes.buttonTheme,
@@ -271,7 +271,7 @@ var propTypes$Q = {
   className: PropTypes__default["default"].string,
   buttonClassName: PropTypes__default["default"].string
 };
-var defaultProps$Q = {
+var defaultProps$R = {
   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$Q;
-Buttons.defaultProps = defaultProps$Q;
+Buttons.propTypes = propTypes$R;
+Buttons.defaultProps = defaultProps$R;
 
 var _excluded$9 = ["className"];
-var propTypes$P = {
+var propTypes$Q = {
   className: PropTypes__default["default"].string
 };
-var defaultProps$P = {
+var defaultProps$Q = {
   className: null
 };
 var BackButton = function BackButton(_ref) {
@@ -338,12 +338,12 @@ var BackButton = function BackButton(_ref) {
     })
   }, props));
 };
-BackButton.propTypes = propTypes$P;
-BackButton.defaultProps = defaultProps$P;
+BackButton.propTypes = propTypes$Q;
+BackButton.defaultProps = defaultProps$Q;
 
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
-var propTypes$O = {
+var propTypes$P = {
   name: PropTypes__default["default"].string,
   // .isRequired,
   value: core.PropTypes.component,
@@ -357,7 +357,7 @@ var propTypes$O = {
   fieldContext: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
 };
 
-var defaultProps$O = {
+var defaultProps$P = {
   name: null,
   form: null,
   formComponents: {},
@@ -435,12 +435,12 @@ var FieldForm = function FieldForm(_ref) {
     isForm: true
   }, formProps))) : null;
 };
-FieldForm.propTypes = propTypes$O;
-FieldForm.defaultProps = defaultProps$O;
+FieldForm.propTypes = propTypes$P;
+FieldForm.defaultProps = defaultProps$P;
 
 var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var propTypes$N = {
+var propTypes$O = {
   action: PropTypes__default["default"].string.isRequired,
   method: PropTypes__default["default"].string,
   fields: core.PropTypes.formFields,
@@ -469,7 +469,7 @@ var propTypes$N = {
   actionsClassName: PropTypes__default["default"].string,
   cancelClassName: PropTypes__default["default"].string
 };
-var defaultProps$N = {
+var defaultProps$O = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -673,13 +673,13 @@ var Form = function Form(_ref) {
     }]
   })) : null) : null);
 };
-Form.propTypes = propTypes$N;
-Form.defaultProps = defaultProps$N;
+Form.propTypes = propTypes$O;
+Form.defaultProps = defaultProps$O;
 
 var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-var propTypes$M = {
+var propTypes$N = {
   href: PropTypes__default["default"].string,
   external: PropTypes__default["default"].bool,
   target: PropTypes__default["default"].string,
@@ -688,7 +688,7 @@ var propTypes$M = {
   withoutStyle: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$M = {
+var defaultProps$N = {
   href: '',
   external: false,
   target: '_blank',
@@ -716,11 +716,11 @@ var Link = function Link(_ref) {
     to: href
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children));
 };
-Link.propTypes = propTypes$M;
-Link.defaultProps = defaultProps$M;
+Link.propTypes = propTypes$N;
+Link.defaultProps = defaultProps$N;
 
 var _excluded$6 = ["label", "className"];
-var propTypes$L = {
+var propTypes$M = {
   href: PropTypes__default["default"].string,
   header: PropTypes__default["default"].node,
   image: PropTypes__default["default"].node,
@@ -749,7 +749,7 @@ var propTypes$L = {
   onClickBody: PropTypes__default["default"].func,
   onClickFooter: PropTypes__default["default"].func
 };
-var defaultProps$L = {
+var defaultProps$M = {
   href: null,
   header: null,
   image: null,
@@ -863,18 +863,18 @@ var Card = function Card(_ref) {
     className: cardClassName
   }, cardInner);
 };
-Card.propTypes = propTypes$L;
-Card.defaultProps = defaultProps$L;
+Card.propTypes = propTypes$M;
+Card.defaultProps = defaultProps$M;
 
 var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated","rotate":"micromag-core-partials-spinner-rotate","dash":"micromag-core-partials-spinner-dash"};
 
-var propTypes$K = {
+var propTypes$L = {
   animated: PropTypes__default["default"].bool,
   color: PropTypes__default["default"].string,
   strokeWidth: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string
 };
-var defaultProps$K = {
+var defaultProps$L = {
   animated: true,
   color: 'currentColor',
   strokeWidth: 3,
@@ -902,19 +902,19 @@ var Spinner = function Spinner(_ref) {
     strokeWidth: strokeWidth
   }));
 };
-Spinner.propTypes = propTypes$K;
-Spinner.defaultProps = defaultProps$K;
+Spinner.propTypes = propTypes$L;
+Spinner.defaultProps = defaultProps$L;
 
 var styles$s = {};
 
 var _excluded$5 = ["description", "loading", "children", "className"];
-var propTypes$J = {
+var propTypes$K = {
   description: PropTypes__default["default"].node,
   loading: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string
 };
-var defaultProps$J = {
+var defaultProps$K = {
   description: null,
   loading: false,
   children: null,
@@ -930,14 +930,14 @@ 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$J;
-FormPanel.defaultProps = defaultProps$J;
+FormPanel.propTypes = propTypes$K;
+FormPanel.defaultProps = defaultProps$K;
 
-var propTypes$I = {
+var propTypes$J = {
   className: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string
 };
-var defaultProps$I = {
+var defaultProps$J = {
   className: null,
   color: '#fff'
 };
@@ -958,14 +958,14 @@ var ArrowIcon = function ArrowIcon(_ref) {
     fill: color
   }));
 };
-ArrowIcon.propTypes = propTypes$I;
-ArrowIcon.defaultProps = defaultProps$I;
+ArrowIcon.propTypes = propTypes$J;
+ArrowIcon.defaultProps = defaultProps$J;
 
-var propTypes$H = {
+var propTypes$I = {
   className: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string
 };
-var defaultProps$H = {
+var defaultProps$I = {
   className: null,
   color: '#fff'
 };
@@ -991,8 +991,34 @@ var CloseIcon = function CloseIcon(_ref) {
     strokeLinecap: "round"
   }));
 };
-CloseIcon.propTypes = propTypes$H;
-CloseIcon.defaultProps = defaultProps$H;
+CloseIcon.propTypes = propTypes$I;
+CloseIcon.defaultProps = defaultProps$I;
+
+var propTypes$H = {
+  className: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string
+};
+var defaultProps$H = {
+  className: null,
+  color: '#fff'
+};
+var FullscreenIcon = function FullscreenIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M11.2 0H16V4.66667H14.4V1.55556H11.2V0ZM0 0H4.8V1.55556H1.6V4.66667H0V0ZM14.4 12.4444V9.33333H16V14H11.2V12.4444H14.4ZM1.6 12.4444H4.8V14H0V9.33333H1.6V12.4444Z",
+    fill: color
+  }));
+};
+FullscreenIcon.propTypes = propTypes$H;
+FullscreenIcon.defaultProps = defaultProps$H;
 
 var propTypes$G = {
   className: PropTypes__default["default"].string,
@@ -3706,7 +3732,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
   }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    styles: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
     ref: !hasSize ? refContainer : null
   }, hasFrameSize ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$9.frame,
@@ -4450,6 +4476,7 @@ exports.FieldForm = FieldForm;
 exports.FontFaces = FontFaces;
 exports.Form = Form;
 exports.FormPanel = FormPanel;
+exports.FullscreenIcon = FullscreenIcon;
 exports.HighlightStyle = HighlightStyle;
 exports.Label = Label;
 exports.Link = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.377",
+    "version": "0.3.389",
     "description": "",
     "keywords": [
         "javascript"
@@ -31,6 +31,7 @@
     "license": "ISC",
     "main": "lib/index.js",
     "module": "es/index.js",
+    "style": "assets/css/styles.css",
     "exports": {
         ".": "./lib/index.js",
         "./components": "./lib/components.js",
@@ -133,5 +134,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "80f2c43eabcb9c8e23e71704751c4ad4066e4d3a"
+    "gitHead": "67cbf19814ac1142a26e35df2e3959405aebf149"
 }