@micromag/core 0.3.251 → 0.3.262

package/es/hooks.js

@@ -6,8 +6,8 @@ import isString from 'lodash/isString';
 import dayjs from 'dayjs';
 import { EventsManager, MediasParser, StoryParser, ThemeParser } from '@micromag/core';
 import { createUseEvent, getMediaFilesAsArray } from '@micromag/core/utils';
-import { useDrag } from '@use-gesture/react';
 import { useSpring, useSprings } from '@react-spring/core';
+import { useDrag } from '@use-gesture/react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useForm as useForm$1 } from '@folklore/forms';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -193,41 +193,22 @@ var useFormattedTime = function useFormattedTime() {
   }, [now, showNow, timeGap, format]);
 };
 
-var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
-var useDocumentEvent = createUseEvent(eventsManager$1);
-
-var getValueFromSpring = function getValueFromSpring(s) {
-  var _ref = s || {},
-      _ref$value = _ref.value,
-      v = _ref$value === void 0 ? null : _ref$value;
-
-  var _ref2 = v || {},
-      p = _ref2.progress;
-
-  return p;
+var useDebounced = function useDebounced(handler, watchedValue) {
+  var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+  useEffect(function () {
+    var timeoutHandler = setTimeout(function () {
+      if (handler !== null) {
+        handler(watchedValue);
+      }
+    }, delay);
+    return function () {
+      clearTimeout(timeoutHandler);
+    };
+  }, [watchedValue, delay]);
 };
 
-function useSpringValue(wantedProgress, immediate, params) {
-  var _useState = useState(wantedProgress),
-      _useState2 = _slicedToArray(_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  var onChange = useCallback(function (spring) {
-    return setProgress(getValueFromSpring(spring));
-  }, [setProgress]);
-  useSpring(_objectSpread({
-    progress: wantedProgress,
-    onChange: onChange,
-    immediate: immediate
-  }, params)); // useEffect(() => {
-  //     if (wantedProgress !== null) {
-  //         api.start({ progress: wantedProgress, immediate, ...params });
-  //     }
-  // }, [wantedProgress, immediate, params, api]);
-
-  return immediate ? wantedProgress : progress;
-}
+var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
+var useDocumentEvent = createUseEvent(eventsManager$1);
 
 function useDragProgress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -246,21 +227,28 @@ function useDragProgress() {
       springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
       _ref$dragOptions = _ref.dragOptions,
       dragOptions = _ref$dragOptions === void 0 ? {
-    filterTaps: true,
-    preventDefault: true
+    filterTaps: true
   } : _ref$dragOptions;
 
   var refDragging = useRef(false);
+  var refProgress = useRef(wantedProgress);
 
-  var _useState = useState({
-    dragging: false,
-    progress: wantedProgress
-  }),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      dragging = _useState2$.dragging,
-      progress = _useState2$.progress,
-      setDragState = _useState2[1];
+      dragging = _useState2[0],
+      setDragging = _useState2[1];
+
+  var spring = useCallback(function () {
+    return _objectSpread({
+      progress: wantedProgress,
+      immediate: dragging || disabled
+    }, springParams);
+  }, []);
+
+  var _useSpring = useSpring(spring),
+      _useSpring2 = _slicedToArray(_useSpring, 2),
+      progress = _useSpring2[0].progress,
+      api = _useSpring2[1];
 
   var onDrag = useCallback(function (gestureState) {
     if (disabled) {
@@ -281,29 +269,35 @@ function useDragProgress() {
 
     var newProgress = computeProgress(gestureState);
     refDragging.current = active;
-    setDragState({
-      dragging: active,
-      progress: newProgress
+    refProgress.current = newProgress;
+
+    if (active !== dragging) {
+      setDragging(active);
+    }
+
+    api.start({
+      progress: newProgress,
+      immediate: active
     });
 
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
-  }, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
+  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = useDrag(onDrag, dragOptions);
-  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
   useEffect(function () {
-    if (wantedProgress !== progress && !refDragging.current) {
-      setDragState({
-        dragging: refDragging.current,
-        progress: wantedProgress
+    if (!refDragging.current && wantedProgress !== refProgress.current) {
+      refProgress.current = wantedProgress;
+      api.start({
+        progress: wantedProgress,
+        immediate: false
       });
     }
   }, [wantedProgress]);
   return {
     bind: bind,
     dragging: dragging,
-    progress: springedProgress
+    progress: progress
   };
 }
 
@@ -1489,16 +1483,17 @@ function useMediaProgress(media) {
   var _useState = useState(!disabled),
       _useState2 = _slicedToArray(_useState, 2),
       playing = _useState2[0],
-      setPlaying = _useState2[1];
+      setPlaying = _useState2[1]; // const currentTime = useMediaCurrentTime(media, {
+  //     disabled: disabled || !playing,
+  //     ...props,
+  // });
+
 
-  var currentTime = useMediaCurrentTime(media, _objectSpread({
-    disabled: disabled || !playing
-  }, props));
   var duration = useMediaDuration(media, _objectSpread({
     disabled: disabled || !playing
   }, props));
 
-  var _useState3 = useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
+  var _useState3 = useState(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
       _useState4 = _slicedToArray(_useState3, 2),
       progress = _useState4[0],
       setProgress = _useState4[1];
@@ -1533,8 +1528,8 @@ function useMediaProgress(media) {
 
     media.addEventListener('play', onResume);
     media.addEventListener('seeked', onResume);
-    media.addEventListener('playing', onResume);
-    media.addEventListener('timeupdate', onResume);
+    media.addEventListener('playing', onResume); // media.addEventListener('timeupdate', onResume);
+
     media.addEventListener('pause', onPause);
     media.addEventListener('ended', onPause);
     media.addEventListener('waiting', onPause);
@@ -1549,8 +1544,8 @@ function useMediaProgress(media) {
     return function () {
       media.removeEventListener('play', onResume);
       media.removeEventListener('seeked', onResume);
-      media.removeEventListener('playing', onResume);
-      media.removeEventListener('timeupdate', onResume);
+      media.removeEventListener('playing', onResume); // media.removeEventListener('timeupdate', onResume);
+
       media.removeEventListener('pause', onPause);
       media.removeEventListener('ended', onPause);
       media.removeEventListener('waiting', onPause);
@@ -1559,11 +1554,7 @@ function useMediaProgress(media) {
     };
   }, [media, updateProgress, setPlaying, playing]);
   useEffect(function () {
-    if (media === null) {
-      return function () {};
-    }
-
-    if (!playing || disabled) {
+    if (media === null || !playing || disabled) {
       return function () {};
     }
 
@@ -2012,6 +2003,34 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
   return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
 };
 
+var getValueFromSpring = function getValueFromSpring(s) {
+  var _ref = s || {},
+      _ref$value = _ref.value,
+      v = _ref$value === void 0 ? null : _ref$value;
+
+  var _ref2 = v || {},
+      p = _ref2.progress;
+
+  return p;
+};
+
+function useSpringValue(wantedProgress, immediate, params) {
+  var _useState = useState(wantedProgress),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  var onChange = useCallback(function (spring) {
+    return setProgress(getValueFromSpring(spring));
+  }, [setProgress]);
+  useSpring(_objectSpread({
+    progress: wantedProgress,
+    onChange: onChange,
+    immediate: immediate
+  }, params));
+  return immediate ? wantedProgress : progress;
+}
+
 var useSwipe = function useSwipe() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$width = _ref.width,
@@ -2333,4 +2352,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/utils.js

@@ -638,6 +638,38 @@ function getShadowCoords(angle, distance) {
   };
 }
 
+// import isObject from 'lodash/isObject';
+function getJustifyContent(horizontal) {
+  if (horizontal === 'left') return 'flex-start';
+  if (horizontal === 'middle') return 'center';
+  if (horizontal === 'right') return 'flex-end';
+  return null;
+}
+
+function getAlignItems(vertical) {
+  if (vertical === 'top') return 'flex-start';
+  if (vertical === 'middle') return 'center';
+  if (vertical === 'bottom') return 'flex-end';
+  return null;
+}
+
+var getStyleFromAlignment = function getStyleFromAlignment(value) {
+  if (value === null) {
+    return null;
+  }
+
+  var _value$horizontal = value.horizontal,
+      horizontal = _value$horizontal === void 0 ? null : _value$horizontal,
+      _value$vertical = value.vertical,
+      vertical = _value$vertical === void 0 ? null : _value$vertical;
+  var justifyContent = getJustifyContent(horizontal);
+  var alignItems = getAlignItems(vertical);
+  return {
+    justifyContent: justifyContent,
+    alignItems: alignItems
+  };
+};
+
 var getStyleFromColor = function getStyleFromColor() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
@@ -931,6 +963,22 @@ var getStyleFromMargin = function getStyleFromMargin(value) {
   } : null);
 };
 
+var possibleMimes = ['video/webm', 'video/mp4', 'video/ogg'];
+var supportedMimes = null;
+
+function getVideoSupportedMimes() {
+  var mimes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : possibleMimes;
+
+  if (supportedMimes === null) {
+    var video = document.createElement('video');
+    supportedMimes = mimes.filter(function (mime) {
+      return video.canPlayType(mime) !== '';
+    });
+  }
+
+  return supportedMimes;
+}
+
 var getLayoutParts = function getLayoutParts() {
   var layout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
@@ -1093,4 +1141,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -111,7 +111,7 @@ Label.defaultProps = defaultProps$L;
 
 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$a = ["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 _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 = {
   type: PropTypes__default["default"].string,
   theme: core.PropTypes.buttonTheme,
@@ -210,7 +210,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$a);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$b);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, finalLabel) : null;
@@ -269,7 +269,7 @@ Button$1.defaultProps = defaultProps$K;
 
 var styles$v = {};
 
-var _excluded$9 = ["className", "onClick", "theme"];
+var _excluded$a = ["className", "onClick", "theme"];
 var propTypes$J = {
   buttons: core.PropTypes.buttons,
   size: core.PropTypes.buttonSize,
@@ -309,7 +309,7 @@ var Buttons = function Buttons(_ref) {
         _onClick = _button$onClick === void 0 ? null : _button$onClick,
         _button$theme = button.theme,
         buttonTheme = _button$theme === void 0 ? null : _button$theme,
-        buttonProps = _objectWithoutProperties__default["default"](button, _excluded$9);
+        buttonProps = _objectWithoutProperties__default["default"](button, _excluded$a);
 
     var fixedProps = {
       key: "button-".concat(index),
@@ -332,7 +332,7 @@ var Buttons = function Buttons(_ref) {
 Buttons.propTypes = propTypes$J;
 Buttons.defaultProps = defaultProps$J;
 
-var _excluded$8 = ["className"];
+var _excluded$9 = ["className"];
 var propTypes$I = {
   className: PropTypes__default["default"].string
 };
@@ -342,7 +342,7 @@ var defaultProps$I = {
 
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
 
   return /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({
     className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
@@ -359,7 +359,7 @@ BackButton.defaultProps = defaultProps$I;
 
 var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var _excluded$7 = ["type"],
+var _excluded$8 = ["type"],
     _excluded2 = ["component", "id", "settings"];
 var propTypes$H = {
   name: PropTypes__default["default"].string,
@@ -403,7 +403,7 @@ var FieldForm = function FieldForm(_ref) {
   var _ref2 = field || {},
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$7);
+      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$8);
 
   var fieldDefinition = fieldsManager.getDefinition(type) || null;
 
@@ -711,7 +711,7 @@ Form.defaultProps = defaultProps$G;
 
 var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
-var _excluded$6 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
+var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$F = {
   href: PropTypes__default["default"].string,
   external: PropTypes__default["default"].bool,
@@ -739,7 +739,7 @@ var Link = function Link(_ref) {
       rel = _ref.rel,
       className = _ref.className,
       withoutStyle = _ref.withoutStyle,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
 
   return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
     className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$t.withoutStyle, withoutStyle)]),
@@ -755,7 +755,7 @@ var Link = function Link(_ref) {
 Link.propTypes = propTypes$F;
 Link.defaultProps = defaultProps$F;
 
-var _excluded$5 = ["label", "className"];
+var _excluded$6 = ["label", "className"];
 var propTypes$E = {
   href: PropTypes__default["default"].string,
   header: PropTypes__default["default"].node,
@@ -843,7 +843,7 @@ var Card = function Card(_ref) {
     var label = _ref2.label,
         _ref2$className = _ref2.className,
         linkClassName = _ref2$className === void 0 ? null : _ref2$className,
-        linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$5);
+        linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$6);
 
     return /*#__PURE__*/React__default["default"].createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
@@ -984,7 +984,7 @@ Spinner.defaultProps = defaultProps$D;
 
 var styles$s = {};
 
-var _excluded$4 = ["description", "loading", "children", "className"];
+var _excluded$5 = ["description", "loading", "children", "className"];
 var propTypes$C = {
   description: PropTypes__default["default"].node,
   loading: PropTypes__default["default"].bool,
@@ -1003,7 +1003,7 @@ var FormPanel = function FormPanel(_ref) {
       loading = _ref.loading,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
 
   return /*#__PURE__*/React__default["default"].createElement(Card, Object.assign({
     className: classNames__default["default"]([styles$s.container, _defineProperty__default["default"]({}, className, className !== null)])
@@ -1076,7 +1076,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
 Breadcrumb.propTypes = propTypes$B;
 Breadcrumb.defaultProps = defaultProps$B;
 
-var _excluded$3 = ["type", "className", "label", "children", "onClick", "active"];
+var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
 var propTypes$A = {
   items: core.PropTypes.menuItems,
   children: PropTypes__default["default"].node,
@@ -1149,7 +1149,7 @@ var Dropdown = function Dropdown(_ref) {
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
         _it$active = it.active,
         active = _it$active === void 0 ? false : _it$active,
-        itemProps = _objectWithoutProperties__default["default"](it, _excluded$3);
+        itemProps = _objectWithoutProperties__default["default"](it, _excluded$4);
 
     var ItemComponent = 'div';
 
@@ -1188,7 +1188,7 @@ var Dropdown = function Dropdown(_ref) {
 Dropdown.propTypes = propTypes$A;
 Dropdown.defaultProps = defaultProps$A;
 
-var _excluded$2 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
+var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
 var propTypes$z = {
   items: core.PropTypes.menuItems,
   tagName: PropTypes__default["default"].string,
@@ -1278,7 +1278,7 @@ var Menu = function Menu(_ref) {
         active = _it$active === void 0 ? false : _it$active,
         _it$onClick = it.onClick,
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        itemProps = _objectWithoutProperties__default["default"](it, _excluded$2);
+        itemProps = _objectWithoutProperties__default["default"](it, _excluded$3);
 
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
@@ -2222,7 +2222,7 @@ var Detector = function Detector(_ref) {
 Detector.propTypes = propTypes$j;
 Detector.defaultProps = defaultProps$j;
 
-var styles$h = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
+var styles$h = {"container":"micromag-core-partials-placeholder-block-container","outline":"micromag-core-partials-placeholder-block-outline","withInvertedColors":"micromag-core-partials-placeholder-block-withInvertedColors","box":"micromag-core-partials-placeholder-block-box"};
 
 var propTypes$i = {
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
@@ -2230,7 +2230,8 @@ var propTypes$i = {
   outline: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   boxClassName: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node
+  children: PropTypes__default["default"].node,
+  withInvertedColors: PropTypes__default["default"].bool
 };
 var defaultProps$i = {
   width: '100%',
@@ -2238,7 +2239,8 @@ var defaultProps$i = {
   outline: false,
   className: null,
   boxClassName: null,
-  children: null
+  children: null,
+  withInvertedColors: true
 };
 
 var PlaceholderBlock = function PlaceholderBlock(_ref) {
@@ -2249,9 +2251,10 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
       outline = _ref.outline,
       className = _ref.className,
       boxClassName = _ref.boxClassName,
+      withInvertedColors = _ref.withInvertedColors,
       children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$h.outline, outline), _ref2)])
+    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$h.outline, outline), _defineProperty__default["default"](_ref2, styles$h.withInvertedColors, withInvertedColors), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$h.box, _defineProperty__default["default"]({}, boxClassName, boxClassName !== null)]),
     style: {
@@ -3309,7 +3312,7 @@ var Audio = function Audio(_ref) {
   }));
 };
 
-var styles$c = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
+var styles$c = {"container":"micromag-core-partials-placeholder-text-container","withInvertedColors":"micromag-core-partials-placeholder-text-withInvertedColors","line":"micromag-core-partials-placeholder-text-line"};
 
 var propTypes$b = {
   lines: PropTypes__default["default"].number,
@@ -3317,7 +3320,8 @@ var propTypes$b = {
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   fontSize: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+  withInvertedColors: PropTypes__default["default"].bool
 };
 var defaultProps$b = {
   lines: 1,
@@ -3325,20 +3329,24 @@ var defaultProps$b = {
   width: '100%',
   height: null,
   fontSize: 16,
-  className: null
+  className: null,
+  withInvertedColors: true
 };
 
 var PlaceholderText = function PlaceholderText(_ref) {
+  var _ref2;
+
   var lines = _ref.lines,
       lineMargin = _ref.lineMargin,
       width = _ref.width,
       height = _ref.height,
       fontSize = _ref.fontSize,
-      className = _ref.className;
+      className = _ref.className,
+      withInvertedColors = _ref.withInvertedColors;
   var lineHeight = height !== null && isNumber__default["default"](height) ? "".concat(Math.round(height * fontSize), "px") : height;
-  var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '90%';
+  var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '80%';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$c.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className), _defineProperty__default["default"](_ref2, styles$c.withInvertedColors, withInvertedColors), _ref2)])
   }, _toConsumableArray__default["default"](Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "line-".concat(index),
@@ -3374,16 +3382,18 @@ var Button = function Button(_ref) {
   }));
 };
 
-/* eslint-disable react/prop-types */
+var _excluded$2 = ["width", "height", "className"];
 var Image = function Image(_ref) {
   var width = _ref.width,
       height = _ref.height,
-      className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+      className = _ref.className,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
+
+  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faImage.faImage,
     className: styles$d.icon
   }));
@@ -3463,7 +3473,9 @@ var Subtitle = function Subtitle(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 
 var TextPlaceholder = function TextPlaceholder(props) {
-  var _props$height = props.height,
+  var _props$className = props.className,
+      className = _props$className === void 0 ? null : _props$className,
+      _props$height = props.height,
       height = _props$height === void 0 ? 0.2 : _props$height,
       _props$lines = props.lines,
       lines = _props$lines === void 0 ? 4 : _props$lines,
@@ -3473,7 +3485,7 @@ var TextPlaceholder = function TextPlaceholder(props) {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames__default["default"]([props.className, styles$d.text])
+    className: classNames__default["default"]([className, styles$d.text])
   }));
 };
 
@@ -3486,11 +3498,17 @@ var Timeline = function Timeline(props) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Title$1 = function Title(props) {
+  var _props$height = props.height,
+      height = _props$height === void 0 ? 0.5 : _props$height,
+      _props$lines = props.lines,
+      lines = _props$lines === void 0 ? 2 : _props$lines,
+      _props$lineMargin = props.lineMargin,
+      lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames__default["default"]([props.className, styles$d.title]),
-    height: 0.5,
-    lines: 2,
-    lineMargin: 4
+    height: height,
+    lines: lines,
+    lineMargin: lineMargin
   }));
 };
 
@@ -3675,6 +3693,7 @@ var propTypes$9 = {
   screen: core.PropTypes.storyComponent.isRequired,
   renderContext: core.PropTypes.renderContext,
   screenState: PropTypes__default["default"].string,
+  index: PropTypes__default["default"].number,
   active: PropTypes__default["default"].bool,
   current: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].node,
@@ -3686,6 +3705,7 @@ var defaultProps$9 = {
   active: true,
   renderContext: null,
   screenState: null,
+  index: null,
   current: false,
   component: null,
   components: null,
@@ -3697,6 +3717,7 @@ var Screen = function Screen(_ref) {
   var screen = _ref.screen,
       renderContext = _ref.renderContext,
       screenState = _ref.screenState,
+      index = _ref.index,
       active = _ref.active,
       current = _ref.current,
       components = _ref.components,
@@ -3710,7 +3731,8 @@ var Screen = function Screen(_ref) {
 
   var CustomScreenComponent = components !== null ? utils.getComponentFromName(type, components) || null : null;
   var ContextScreenComponent = contexts.useScreenComponent(type);
-  var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
+  var ScreenComponent = CustomScreenComponent || ContextScreenComponent; // Comment
+
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen,
     renderContext: renderContext,
@@ -3718,6 +3740,7 @@ var Screen = function Screen(_ref) {
   }, ScreenComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, Object.assign({}, screen, {
+    index: index,
     active: active,
     current: current,
     mediaRef: mediaRef