@micromag/core 0.3.491 → 0.3.503

package/assets/css/styles.css

@@ -1,4 +1,4 @@
-.micromag-core-buttons-button-container.micromag-core-buttons-button-asLink,.micromag-core-buttons-button-container.micromag-core-buttons-button-withoutStyle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-core-buttons-button-container .micromag-core-buttons-button-icon{display:block;position:relative}.micromag-core-buttons-button-container .micromag-core-buttons-button-icon,.micromag-core-buttons-button-container .micromag-core-buttons-button-label{-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1),-webkit-transform .3s cubic-bezier(0,.6,.5,1)}.micromag-core-buttons-button-container.micromag-core-buttons-button-asLink{color:#a13dff;font-weight:700}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-label{margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-right{margin-left:.5em}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon.micromag-core-buttons-button-withAnimations.micromag-core-buttons-button-icon-right .micromag-core-buttons-button-label{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIconColumns{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row}.micromag-core-buttons-button-container.micromag-core-buttons-button-linkDisabled{opacity:.4;pointer-events:none;text-decoration:none}
+.micromag-core-buttons-button-container.micromag-core-buttons-button-asLink,.micromag-core-buttons-button-container.micromag-core-buttons-button-withoutStyle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-core-buttons-button-container .micromag-core-buttons-button-icon{display:block;position:relative}.micromag-core-buttons-button-container .micromag-core-buttons-button-icon,.micromag-core-buttons-button-container .micromag-core-buttons-button-label{-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1),-webkit-transform .3s cubic-bezier(0,.6,.5,1)}.micromag-core-buttons-button-container.micromag-core-buttons-button-asLink{color:#a13dff;font-weight:700}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-label{margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-right{margin-left:.5em}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon.micromag-core-buttons-button-withAnimations.micromag-core-buttons-button-icon-right .micromag-core-buttons-button-label{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIconColumns{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row}.micromag-core-buttons-button-container.micromag-core-buttons-button-linkDisabled{opacity:.4;pointer-events:none;text-decoration:none}.micromag-core-buttons-button-container.micromag-core-buttons-button-focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);outline:2px solid #000}.micromag-core-buttons-button-container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);outline:2px solid #000}
 
 .micromag-core-forms-form-actions{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:2rem}.micromag-core-forms-form-actions.micromag-core-forms-form-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.micromag-core-forms-form-actions.micromag-core-forms-form-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
 .micromag-core-partials-link-withoutStyle{color:inherit;text-decoration:none}.micromag-core-partials-link-withoutStyle:hover{color:inherit;text-decoration:none}

package/es/components.js

@@ -66,7 +66,7 @@ Label.propTypes = propTypes$T;
 Label.defaultProps = defaultProps$T;
 var Label$1 = Label;
 
-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 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","focus-visible":"micromag-core-buttons-button-focus-visible"};
 
 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$S = {
@@ -1914,7 +1914,7 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', 'p-2', styles$l.header, {
+    className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header, {
       // 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
@@ -1923,7 +1923,7 @@ var ModalDialog = function ModalDialog(_ref) {
     className: "modal-title"
   }, /*#__PURE__*/React.createElement(Label$1, null, title)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn-close",
+    className: "btn btn-close p-2",
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React.createElement("div", {

package/es/contexts.js

@@ -943,7 +943,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     return setControlsVisible(true);
   }, [setControlsVisible]);
   var hideControls = useCallback(function () {
-    return setControlsVisible(false);
+    setControlsVisible(false);
   }, [setControlsVisible]);
   var hasAudio = useMemo(function () {
     if (media === null || media.tagName.toLowerCase() !== 'video') {

package/es/index.js

@@ -793,7 +793,7 @@ var ColorsParser = /*#__PURE__*/function () {
   }
 
   // Convert medias object to path
-  _createClass(ColorsParser, [{
+  return _createClass(ColorsParser, [{
     key: "parse",
     value: function parse(story) {
       var _this = this;
@@ -912,7 +912,6 @@ var ColorsParser = /*#__PURE__*/function () {
       });
     }
   }]);
-  return ColorsParser;
 }();
 var ColorsParser$1 = ColorsParser;
 
@@ -928,7 +927,6 @@ var getComponentFromName = function getComponentFromName() {
 };
 
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(ComponentsManager, _EventEmitter);
   function ComponentsManager() {
     var _this;
     var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -937,7 +935,8 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
     _this.components = components;
     return _this;
   }
-  _createClass(ComponentsManager, [{
+  _inherits(ComponentsManager, _EventEmitter);
+  return _createClass(ComponentsManager, [{
     key: "addComponent",
     value: function addComponent(name, component) {
       var namespace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -997,12 +996,10 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
       return this.components !== null && typeof this.components[namespace !== null ? "".concat(namespace, ".").concat(name) : name] !== 'undefined';
     }
   }]);
-  return ComponentsManager;
 }(EventEmitter);
 var ComponentsManager$1 = ComponentsManager;
 
 var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(DefinitionsManager, _EventEmitter);
   function DefinitionsManager() {
     var _this;
     var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -1011,7 +1008,8 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
     _this.definitions = definitions || [];
     return _this;
   }
-  _createClass(DefinitionsManager, [{
+  _inherits(DefinitionsManager, _EventEmitter);
+  return _createClass(DefinitionsManager, [{
     key: "addDefinition",
     value: function addDefinition(definition) {
       this.addDefinitions(isArray(definition) ? definition : [definition]);
@@ -1077,12 +1075,10 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
       }, {});
     }
   }]);
-  return DefinitionsManager;
 }(EventEmitter);
 var DefinitionsManager$1 = DefinitionsManager;
 
 var EventsManager = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(EventsManager, _EventEmitter);
   function EventsManager(element) {
     var _this;
     _classCallCheck(this, EventsManager);
@@ -1092,7 +1088,8 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
     _this.listeners = {};
     return _this;
   }
-  _createClass(EventsManager, [{
+  _inherits(EventsManager, _EventEmitter);
+  return _createClass(EventsManager, [{
     key: "subscribe",
     value: function subscribe(event, callback) {
       this.on(event, callback);
@@ -1139,17 +1136,16 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
       this.element.removeEventListener(event, this.listeners[event]);
     }
   }]);
-  return EventsManager;
 }(EventEmitter);
 var EventsManager$1 = EventsManager;
 
 var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
-  _inherits(FieldsManager, _DefinitionsManager);
   function FieldsManager() {
     _classCallCheck(this, FieldsManager);
     return _callSuper(this, FieldsManager, arguments);
   }
-  _createClass(FieldsManager, [{
+  _inherits(FieldsManager, _DefinitionsManager);
+  return _createClass(FieldsManager, [{
     key: "filter",
     value: function filter(_filter) {
       return new FieldsManager(this.definitions.filter(_filter));
@@ -1157,7 +1153,6 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
       // return this;
     }
   }]);
-  return FieldsManager;
 }(DefinitionsManager$1);
 var FieldsManager$1 = FieldsManager;
 
@@ -1175,7 +1170,7 @@ var MediasParser = /*#__PURE__*/function () {
     this.fieldsPatternCache = fieldsPattern || {};
     this.parsedThemesCache = {};
   }
-  _createClass(MediasParser, [{
+  return _createClass(MediasParser, [{
     key: "getParsedStoryTheme",
     value: function getParsedStoryTheme(storyId, theme) {
       if (typeof this.parsedThemesCache[storyId] === 'undefined') {
@@ -1432,12 +1427,10 @@ var MediasParser = /*#__PURE__*/function () {
       return isArray(obj) ? _toConsumableArray(obj.keys()) : Object.keys(obj);
     }
   }]);
-  return MediasParser;
 }();
 var MediasParser$1 = MediasParser;
 
 var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
-  _inherits(ScreensManager, _DefinitionsManager);
   function ScreensManager() {
     var _this;
     var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -1446,7 +1439,8 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
     _this.fieldsPattern = null;
     return _this;
   }
-  _createClass(ScreensManager, [{
+  _inherits(ScreensManager, _DefinitionsManager);
+  return _createClass(ScreensManager, [{
     key: "getFields",
     value: function getFields(id) {
       var _ref = this.getDefinition(id) || {},
@@ -1489,7 +1483,6 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
       return this.addDefinitions(manager.getDefinitions());
     }
   }]);
-  return ScreensManager;
 }(DefinitionsManager$1);
 var ScreensManager$1 = ScreensManager;
 
@@ -1505,7 +1498,7 @@ var FontsParser = /*#__PURE__*/function () {
     this.screensManager = screensManager;
     this.fieldsPatternCache = fieldsPattern || {};
   }
-  _createClass(FontsParser, [{
+  return _createClass(FontsParser, [{
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
@@ -1618,7 +1611,6 @@ var FontsParser = /*#__PURE__*/function () {
       }, []);
     }
   }]);
-  return FontsParser;
 }();
 var FontsParser$1 = FontsParser;
 
@@ -1632,7 +1624,7 @@ var MigrationsParser = /*#__PURE__*/function () {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  _createClass(MigrationsParser, [{
+  return _createClass(MigrationsParser, [{
     key: "parse",
     value: function parse(story) {
       if (story === null) {
@@ -1681,7 +1673,6 @@ var MigrationsParser = /*#__PURE__*/function () {
       });
     }
   }]);
-  return MigrationsParser;
 }();
 
 var _excluded$1 = ["textStyle", "color", "boxStyle"];
@@ -1693,7 +1684,7 @@ var ThemeParser = /*#__PURE__*/function () {
     this.definitionCache = {};
     this.fieldsCache = {};
   }
-  _createClass(ThemeParser, [{
+  return _createClass(ThemeParser, [{
     key: "getDefinitionByScreen",
     value: function getDefinitionByScreen(type, themeComponents) {
       if (typeof this.definitionCache[type] === 'undefined') {
@@ -2035,7 +2026,6 @@ var ThemeParser = /*#__PURE__*/function () {
       return initialValue;
     }
   }]);
-  return ThemeParser;
 }();
 var ThemeParser$1 = ThemeParser;
 
@@ -2067,7 +2057,7 @@ var StoryParser = /*#__PURE__*/function () {
       screensManager: screensManager
     });
   }
-  _createClass(StoryParser, [{
+  return _createClass(StoryParser, [{
     key: "parse",
     value: function parse(story) {
       var _this = this;
@@ -2100,14 +2090,12 @@ var StoryParser = /*#__PURE__*/function () {
       }, story);
     }
   }]);
-  return StoryParser;
 }();
 var StoryParser$1 = StoryParser;
 
 var _excluded = ["value"],
   _excluded2 = ["value", "currentTime"];
 var Tracking = /*#__PURE__*/function (_BaseTracking) {
-  _inherits(Tracking, _BaseTracking);
   function Tracking() {
     var _this;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -2122,7 +2110,8 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
     }
     return _this;
   }
-  _createClass(Tracking, [{
+  _inherits(Tracking, _BaseTracking);
+  return _createClass(Tracking, [{
     key: "setVariables",
     value: function setVariables(variables) {
       this.variables = variables;
@@ -2218,7 +2207,6 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
       this.push(data);
     }
   }]);
-  return Tracking;
 }(Tracking$2);
 var Tracking$1 = Tracking;
 

package/lib/components.js

@@ -197,7 +197,7 @@ if (typeof history !== "undefined" && typeof window[patchKey] === "undefined") {
   });
 }
 
-var _excluded3 = ["to", "href", "onClick", "asChild", "children", "replace", "state"];
+var _excluded3 = ["to", "href", "onClick", "asChild", "children", "className", "replace", "state"];
 
 /*
  * Transforms `path` into its relative `base` version
@@ -240,7 +240,11 @@ var defaultRouter = {
   base: "",
   // this option is used to override the current location during SSR
   ssrPath: undefined,
-  ssrSearch: undefined
+  ssrSearch: undefined,
+  // customizes how `href` props are transformed for <Link />
+  hrefs: function hrefs(x) {
+    return x;
+  }
 };
 var RouterCtx = React.createContext(defaultRouter);
 
@@ -279,13 +283,15 @@ var Link$2 = React.forwardRef(function (props, ref) {
   var router = useRouter();
   var _useLocationFromRoute3 = useLocationFromRouter(router),
     _useLocationFromRoute4 = _slicedToArray(_useLocationFromRoute3, 2),
+    path = _useLocationFromRoute4[0],
     navigate = _useLocationFromRoute4[1];
   var to = props.to,
     _props$href = props.href,
     _href = _props$href === void 0 ? to : _props$href,
     _onClick = props.onClick,
     asChild = props.asChild,
-    children = props.children;
+    children = props.children,
+    cls = props.className;
     props.replace;
     props.state;
     var restProps = _objectWithoutProperties(props, _excluded3);
@@ -293,7 +299,7 @@ var Link$2 = React.forwardRef(function (props, ref) {
     // ignores the navigation when clicked using right mouse button or
     // by holding a special modifier key: ctrl, command, win, alt, shift
     if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0) return;
-    _onClick && _onClick(event); // TODO: is it safe to use _onClick?.(event)
+    _onClick === null || _onClick === void 0 || _onClick(event);
     if (!event.defaultPrevented) {
       event.preventDefault();
       navigate(_href, props);
@@ -301,13 +307,16 @@ var Link$2 = React.forwardRef(function (props, ref) {
   });
 
   // handle nested routers and absolute paths
-  var href = _href[0] === "~" ? _href.slice(1) : router.base + _href;
+  var href = router.hrefs(_href[0] === "~" ? _href.slice(1) : router.base + _href, router // pass router as a second argument for convinience
+  );
   return asChild && React.isValidElement(children) ? React.cloneElement(children, {
-    href: href,
-    onClick: onClick
+    onClick: onClick,
+    href: href
   }) : React.createElement("a", _objectSpread(_objectSpread({}, restProps), {}, {
-    href: href,
     onClick: onClick,
+    href: href,
+    // `className` can be a function to apply the class if this link is active
+    className: cls !== null && cls !== void 0 && cls.call ? cls(path === href) : cls,
     children: children,
     ref: ref
   }));
@@ -336,7 +345,7 @@ Label.propTypes = propTypes$T;
 Label.defaultProps = defaultProps$T;
 var Label$1 = Label;
 
-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 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","focus-visible":"micromag-core-buttons-button-focus-visible"};
 
 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$S = {
@@ -2184,7 +2193,7 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', 'p-2', styles$l.header, {
+    className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header, {
       // 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
@@ -2193,7 +2202,7 @@ var ModalDialog = function ModalDialog(_ref) {
     className: "modal-title"
   }, /*#__PURE__*/React.createElement(Label$1, null, title)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn-close",
+    className: "btn btn-close p-2",
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React.createElement("div", {

package/lib/contexts.js

@@ -964,7 +964,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     return setControlsVisible(true);
   }, [setControlsVisible]);
   var hideControls = React.useCallback(function () {
-    return setControlsVisible(false);
+    setControlsVisible(false);
   }, [setControlsVisible]);
   var hasAudio = React.useMemo(function () {
     if (media === null || media.tagName.toLowerCase() !== 'video') {
@@ -1138,7 +1138,7 @@ if (typeof history !== "undefined" && typeof window[patchKey] === "undefined") {
   });
 }
 
-var _excluded3 = ["to", "href", "onClick", "asChild", "children", "replace", "state"];
+var _excluded3 = ["to", "href", "onClick", "asChild", "children", "className", "replace", "state"];
 
 /*
  * Transforms `path` into its relative `base` version
@@ -1181,7 +1181,11 @@ var defaultRouter = {
   base: "",
   // this option is used to override the current location during SSR
   ssrPath: undefined,
-  ssrSearch: undefined
+  ssrSearch: undefined,
+  // customizes how `href` props are transformed for <Link />
+  hrefs: function hrefs(x) {
+    return x;
+  }
 };
 var RouterCtx = React.createContext(defaultRouter);
 
@@ -1223,13 +1227,15 @@ React.forwardRef(function (props, ref) {
   var router = useRouter();
   var _useLocationFromRoute3 = useLocationFromRouter(router),
     _useLocationFromRoute4 = _slicedToArray(_useLocationFromRoute3, 2),
+    path = _useLocationFromRoute4[0],
     navigate = _useLocationFromRoute4[1];
   var to = props.to,
     _props$href = props.href,
     _href = _props$href === void 0 ? to : _props$href,
     _onClick = props.onClick,
     asChild = props.asChild,
-    children = props.children;
+    children = props.children,
+    cls = props.className;
     props.replace;
     props.state;
     var restProps = _objectWithoutProperties(props, _excluded3);
@@ -1237,7 +1243,7 @@ React.forwardRef(function (props, ref) {
     // ignores the navigation when clicked using right mouse button or
     // by holding a special modifier key: ctrl, command, win, alt, shift
     if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0) return;
-    _onClick && _onClick(event); // TODO: is it safe to use _onClick?.(event)
+    _onClick === null || _onClick === void 0 || _onClick(event);
     if (!event.defaultPrevented) {
       event.preventDefault();
       navigate(_href, props);
@@ -1245,13 +1251,16 @@ React.forwardRef(function (props, ref) {
   });
 
   // handle nested routers and absolute paths
-  var href = _href[0] === "~" ? _href.slice(1) : router.base + _href;
+  var href = router.hrefs(_href[0] === "~" ? _href.slice(1) : router.base + _href, router // pass router as a second argument for convinience
+  );
   return asChild && React.isValidElement(children) ? React.cloneElement(children, {
-    href: href,
-    onClick: onClick
+    onClick: onClick,
+    href: href
   }) : React.createElement("a", _objectSpread(_objectSpread({}, restProps), {}, {
-    href: href,
     onClick: onClick,
+    href: href,
+    // `className` can be a function to apply the class if this link is active
+    className: cls !== null && cls !== void 0 && cls.call ? cls(path === href) : cls,
     children: children,
     ref: ref
   }));
@@ -1290,12 +1299,12 @@ RoutesProvider.defaultProps = defaultProps$6;
 var compilers = {};
 function generatePath(fullPath, data) {
   var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var fullUrlMatches = fullPath.match(/^(https?:\/\/[^/]+)\//);
+  var fullUrlMatches = fullPath.match(/^(https?:\/\/)/);
   if (typeof compilers[fullPath] === 'undefined') {
-    compilers[fullPath] = pathToRegexp.compile(fullPath.replace(/^(https?:\/\/[^/]+)\//, '/'), opts);
+    compilers[fullPath] = pathToRegexp.compile(fullPath.replace(/^(https?:\/\/)/, ''), opts);
   }
   var compiler = compilers[fullPath];
-  return fullUrlMatches !== null ? "".concat(fullUrlMatches[1].substr(0, -1)).concat(compiler(data)) : compiler(data);
+  return fullUrlMatches !== null ? "".concat(fullUrlMatches[1]).concat(compiler(data)) : compiler(data);
 }
 var useUrlGeneratorPathToRepexp = function useUrlGeneratorPathToRepexp() {
   var _ref2 = useRoutesContext() || {},

package/lib/index.js

@@ -879,7 +879,7 @@ var ColorsParser = /*#__PURE__*/function () {
   }
 
   // Convert medias object to path
-  _createClass(ColorsParser, [{
+  return _createClass(ColorsParser, [{
     key: "parse",
     value: function parse(story) {
       var _this = this;
@@ -998,7 +998,6 @@ var ColorsParser = /*#__PURE__*/function () {
       });
     }
   }]);
-  return ColorsParser;
 }();
 var ColorsParser$1 = ColorsParser;
 
@@ -1014,7 +1013,6 @@ var getComponentFromName = function getComponentFromName() {
 };
 
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(ComponentsManager, _EventEmitter);
   function ComponentsManager() {
     var _this;
     var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1023,7 +1021,8 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
     _this.components = components;
     return _this;
   }
-  _createClass(ComponentsManager, [{
+  _inherits(ComponentsManager, _EventEmitter);
+  return _createClass(ComponentsManager, [{
     key: "addComponent",
     value: function addComponent(name, component) {
       var namespace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -1083,12 +1082,10 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
       return this.components !== null && typeof this.components[namespace !== null ? "".concat(namespace, ".").concat(name) : name] !== 'undefined';
     }
   }]);
-  return ComponentsManager;
 }(EventEmitter);
 var ComponentsManager$1 = ComponentsManager;
 
 var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(DefinitionsManager, _EventEmitter);
   function DefinitionsManager() {
     var _this;
     var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -1097,7 +1094,8 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
     _this.definitions = definitions || [];
     return _this;
   }
-  _createClass(DefinitionsManager, [{
+  _inherits(DefinitionsManager, _EventEmitter);
+  return _createClass(DefinitionsManager, [{
     key: "addDefinition",
     value: function addDefinition(definition) {
       this.addDefinitions(isArray(definition) ? definition : [definition]);
@@ -1163,12 +1161,10 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
       }, {});
     }
   }]);
-  return DefinitionsManager;
 }(EventEmitter);
 var DefinitionsManager$1 = DefinitionsManager;
 
 var EventsManager = /*#__PURE__*/function (_EventEmitter) {
-  _inherits(EventsManager, _EventEmitter);
   function EventsManager(element) {
     var _this;
     _classCallCheck(this, EventsManager);
@@ -1178,7 +1174,8 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
     _this.listeners = {};
     return _this;
   }
-  _createClass(EventsManager, [{
+  _inherits(EventsManager, _EventEmitter);
+  return _createClass(EventsManager, [{
     key: "subscribe",
     value: function subscribe(event, callback) {
       this.on(event, callback);
@@ -1225,17 +1222,16 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
       this.element.removeEventListener(event, this.listeners[event]);
     }
   }]);
-  return EventsManager;
 }(EventEmitter);
 var EventsManager$1 = EventsManager;
 
 var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
-  _inherits(FieldsManager, _DefinitionsManager);
   function FieldsManager() {
     _classCallCheck(this, FieldsManager);
     return _callSuper(this, FieldsManager, arguments);
   }
-  _createClass(FieldsManager, [{
+  _inherits(FieldsManager, _DefinitionsManager);
+  return _createClass(FieldsManager, [{
     key: "filter",
     value: function filter(_filter) {
       return new FieldsManager(this.definitions.filter(_filter));
@@ -1243,7 +1239,6 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
       // return this;
     }
   }]);
-  return FieldsManager;
 }(DefinitionsManager$1);
 var FieldsManager$1 = FieldsManager;
 
@@ -1261,7 +1256,7 @@ var MediasParser = /*#__PURE__*/function () {
     this.fieldsPatternCache = fieldsPattern || {};
     this.parsedThemesCache = {};
   }
-  _createClass(MediasParser, [{
+  return _createClass(MediasParser, [{
     key: "getParsedStoryTheme",
     value: function getParsedStoryTheme(storyId, theme) {
       if (typeof this.parsedThemesCache[storyId] === 'undefined') {
@@ -1518,12 +1513,10 @@ var MediasParser = /*#__PURE__*/function () {
       return isArray(obj) ? _toConsumableArray(obj.keys()) : Object.keys(obj);
     }
   }]);
-  return MediasParser;
 }();
 var MediasParser$1 = MediasParser;
 
 var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
-  _inherits(ScreensManager, _DefinitionsManager);
   function ScreensManager() {
     var _this;
     var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -1532,7 +1525,8 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
     _this.fieldsPattern = null;
     return _this;
   }
-  _createClass(ScreensManager, [{
+  _inherits(ScreensManager, _DefinitionsManager);
+  return _createClass(ScreensManager, [{
     key: "getFields",
     value: function getFields(id) {
       var _ref = this.getDefinition(id) || {},
@@ -1575,7 +1569,6 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
       return this.addDefinitions(manager.getDefinitions());
     }
   }]);
-  return ScreensManager;
 }(DefinitionsManager$1);
 var ScreensManager$1 = ScreensManager;
 
@@ -1591,7 +1584,7 @@ var FontsParser = /*#__PURE__*/function () {
     this.screensManager = screensManager;
     this.fieldsPatternCache = fieldsPattern || {};
   }
-  _createClass(FontsParser, [{
+  return _createClass(FontsParser, [{
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
@@ -1704,7 +1697,6 @@ var FontsParser = /*#__PURE__*/function () {
       }, []);
     }
   }]);
-  return FontsParser;
 }();
 var FontsParser$1 = FontsParser;
 
@@ -1718,7 +1710,7 @@ var MigrationsParser = /*#__PURE__*/function () {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  _createClass(MigrationsParser, [{
+  return _createClass(MigrationsParser, [{
     key: "parse",
     value: function parse(story) {
       if (story === null) {
@@ -1767,7 +1759,6 @@ var MigrationsParser = /*#__PURE__*/function () {
       });
     }
   }]);
-  return MigrationsParser;
 }();
 
 var _excluded$1 = ["textStyle", "color", "boxStyle"];
@@ -1779,7 +1770,7 @@ var ThemeParser = /*#__PURE__*/function () {
     this.definitionCache = {};
     this.fieldsCache = {};
   }
-  _createClass(ThemeParser, [{
+  return _createClass(ThemeParser, [{
     key: "getDefinitionByScreen",
     value: function getDefinitionByScreen(type, themeComponents) {
       if (typeof this.definitionCache[type] === 'undefined') {
@@ -2121,7 +2112,6 @@ var ThemeParser = /*#__PURE__*/function () {
       return initialValue;
     }
   }]);
-  return ThemeParser;
 }();
 var ThemeParser$1 = ThemeParser;
 
@@ -2153,7 +2143,7 @@ var StoryParser = /*#__PURE__*/function () {
       screensManager: screensManager
     });
   }
-  _createClass(StoryParser, [{
+  return _createClass(StoryParser, [{
     key: "parse",
     value: function parse(story) {
       var _this = this;
@@ -2186,14 +2176,12 @@ var StoryParser = /*#__PURE__*/function () {
       }, story);
     }
   }]);
-  return StoryParser;
 }();
 var StoryParser$1 = StoryParser;
 
 var _excluded = ["value"],
   _excluded2 = ["value", "currentTime"];
 var Tracking = /*#__PURE__*/function (_BaseTracking) {
-  _inherits(Tracking, _BaseTracking);
   function Tracking() {
     var _this;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -2208,7 +2196,8 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
     }
     return _this;
   }
-  _createClass(Tracking, [{
+  _inherits(Tracking, _BaseTracking);
+  return _createClass(Tracking, [{
     key: "setVariables",
     value: function setVariables(variables) {
       this.variables = variables;
@@ -2304,7 +2293,6 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
       this.push(data);
     }
   }]);
-  return Tracking;
 }(tracking.Tracking);
 var Tracking$1 = Tracking;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.491",
+    "version": "0.3.503",
     "private": false,
     "description": "",
     "keywords": [
@@ -155,5 +155,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "d4af8a992fad6d8d50e41e347a4b92e6e025b984"
+    "gitHead": "50e91d4d3f655cd4fbe8a9fc1c3dec54f3fc63ca"
 }