@micromag/media-gallery 0.3.508 → 0.3.510

package/lib/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
@@ -8,1841 +9,536 @@ var isArray = require('lodash/isArray');
 var PropTypes = require('prop-types');
 var React = require('react');
 var reactDom = require('react-dom');
-var reactIntl = require('react-intl');
+var medias = require('@panneau/medias');
 var core = require('@micromag/core');
 var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
 var data = require('@micromag/data');
-var hooks = require('@micromag/core/hooks');
-var faHeadphonesAlt = require('@fortawesome/free-solid-svg-icons/faHeadphonesAlt');
-var faInfoCircle = require('@fortawesome/free-solid-svg-icons/faInfoCircle');
-var faPlayCircle = require('@fortawesome/free-solid-svg-icons/faPlayCircle');
-var faTimesCircle = require('@fortawesome/free-solid-svg-icons/faTimesCircle');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var uniqBy = require('lodash/uniqBy');
-var prettyBytes = require('pretty-bytes');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var faChevronLeft = require('@fortawesome/free-solid-svg-icons/faChevronLeft');
-var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
-var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
-var faSearch = require('@fortawesome/free-solid-svg-icons/faSearch');
-var faSpinner = require('@fortawesome/free-solid-svg-icons/faSpinner');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-
-var middleEllipsis = function middleEllipsis(string, maxLength) {
-  if (!string) return string;
-  if (maxLength < 1) return string;
-  if (string.length <= maxLength) return string;
-  if (maxLength === 1) return "".concat(string.substring(0, 1), "...");
-  var midpoint = Math.ceil(string.length / 2);
-  var toremove = string.length - maxLength;
-  var lstrip = Math.ceil(toremove / 2);
-  var rstrip = toremove - lstrip;
-  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
-};
-
-var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","selected":"micromag-media-gallery-items-gallery-item-selected","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
-
-var propTypes$b = {
-  item: core.PropTypes.media,
-  width: PropTypes.number,
-  selected: PropTypes.bool,
-  withInfoButton: PropTypes.bool,
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-  onClickInfo: PropTypes.func,
-  onClickRemove: PropTypes.func
-};
-var defaultProps$b = {
-  item: null,
-  width: 0,
-  selected: false,
-  withInfoButton: false,
-  className: null,
-  onClick: null,
-  onClickInfo: null,
-  onClickRemove: null
-};
-var GalleryItem = function GalleryItem(_ref) {
-  var item = _ref.item,
-    width = _ref.width,
-    selected = _ref.selected,
-    withInfoButton = _ref.withInfoButton,
-    className = _ref.className,
-    onClick = _ref.onClick,
-    onClickInfo = _ref.onClickInfo,
-    onClickRemove = _ref.onClickRemove;
-  var type = item.type,
-    _item$thumbnail_url = item.thumbnail_url,
-    thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
-    name = item.name,
-    size = item.size;
-  var title = name;
-  if (width < 768) {
-    title = middleEllipsis(name, Math.floor(Math.max(18, width / 2 / 9)));
-  } else {
-    title = middleEllipsis(name, Math.floor(Math.max(25, width / 3 / 8)));
-  }
-  return /*#__PURE__*/React.createElement(components.Card, {
-    image: /*#__PURE__*/React.createElement("button", {
-      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
-      type: "button",
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['card-img-top', styles$b.image]),
-      style: {
-        backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
-      }
-    })),
-    beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(components.Button, {
-      className: styles$b.infoButton,
-      onClick: onClickInfo,
-      withoutStyle: true
-    }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faInfoCircle.faInfoCircle,
-      className: styles$b.icon
-    })) : null, selected ? /*#__PURE__*/React.createElement(components.Button, {
-      className: classNames(['text-danger', styles$b.closeButton]),
-      onClick: onClickRemove,
-      withoutStyle: true
-    }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faTimesCircle.faTimesCircle,
-      className: styles$b.icon
-    })) : null),
-    footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$b.icon,
-      icon: faPlayCircle.faPlayCircle
-    }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$b.icon,
-      icon: faHeadphonesAlt.faHeadphonesAlt
-    }) : null, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-truncate', styles$b.label])
-    }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
-      className: "text-body-secondary ms-1"
-    }, size) : null)),
-    theme: selected ? null : null,
-    className: classNames([styles$b.container, _defineProperty(_defineProperty({}, styles$b.selected, selected), className, className !== null)]),
-    footerClassName: classNames(['p-1', styles$b.footer]),
-    onClickFooter: onClick
-  });
-};
-GalleryItem.propTypes = propTypes$b;
-GalleryItem.defaultProps = defaultProps$b;
-var GalleryItem$1 = GalleryItem;
-
-var styles$a = {};
-
-var propTypes$a = {
-  items: core.PropTypes.medias,
-  selectedItem: core.PropTypes.media,
-  withInfoButton: PropTypes.bool,
-  isSmall: PropTypes.bool,
-  selectedFirst: PropTypes.bool,
-  className: PropTypes.string,
-  onClickItem: PropTypes.func,
-  onClickItemInfo: PropTypes.func,
-  onClickRemoveItem: PropTypes.func
-};
-var defaultProps$a = {
-  items: null,
-  selectedItem: null,
-  withInfoButton: false,
-  isSmall: false,
-  selectedFirst: false,
-  className: null,
-  onClickItem: null,
-  onClickItemInfo: null,
-  onClickRemoveItem: null
-};
-function Gallery(_ref) {
-  var items = _ref.items,
-    selectedItem = _ref.selectedItem,
-    withInfoButton = _ref.withInfoButton,
-    isSmall = _ref.isSmall,
-    selectedFirst = _ref.selectedFirst,
-    className = _ref.className,
-    onClickItem = _ref.onClickItem,
-    onClickItemInfo = _ref.onClickItemInfo,
-    onClickRemoveItem = _ref.onClickRemoveItem;
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    ref = _useDimensionObserver.ref,
-    width = _useDimensionObserver.width;
-  var finalItems = React.useMemo(function () {
-    if (selectedFirst && selectedItem !== null && typeof selectedItem.id !== 'undefined') {
-      return [selectedItem].concat(_toConsumableArray(items.filter(function (_ref2) {
-        var id = _ref2.id;
-        return id !== selectedItem.id;
-      })));
-    }
-    return items;
-  }, [selectedFirst, selectedItem, items]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, 'p-2', 'pt-0', _defineProperty({}, className, className !== null)]),
-    ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['row', 'mx-n1', 'row-cols-2', {
-      'row-cols-md-3': !isSmall
-    }])
-  }, finalItems.map(function (item) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "col px-1 py-1",
-      key: "gallery-item-".concat(item.id)
-    }, /*#__PURE__*/React.createElement(GalleryItem$1, {
-      item: item,
-      width: width,
-      selected: selectedItem !== null && selectedItem.id === item.id,
-      onClick: onClickItem !== null ? function () {
-        return onClickItem(item);
-      } : null,
-      onClickInfo: onClickItemInfo !== null ? function () {
-        return onClickItemInfo(item);
-      } : null,
-      onClickRemove: onClickRemoveItem !== null ? function () {
-        onClickRemoveItem();
-      } : null,
-      withInfoButton: withInfoButton
-    }));
-  })));
-}
-Gallery.propTypes = propTypes$a;
-Gallery.defaultProps = defaultProps$a;
-
-var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio","placeholder":"micromag-media-gallery-partials-media-metadata-placeholder"};
+var reactIntl = require('react-intl');
+var pathToRegexp = require('path-to-regexp');
 
-var propTypes$9 = {
-  media: core.PropTypes.media,
-  tags: core.PropTypes.tags,
-  onChange: PropTypes.func,
-  onClickClose: PropTypes.func,
-  onClickSave: PropTypes.func,
-  onClickDelete: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$9 = {
-  media: null,
-  tags: [],
-  onChange: null,
-  onClickClose: null,
-  onClickSave: null,
-  onClickDelete: null,
-  className: null
-};
-function MediaMetadata(_ref) {
-  var media = _ref.media,
-    allTags = _ref.tags,
-    onChange = _ref.onChange,
-    onClickClose = _ref.onClickClose,
-    onClickSave = _ref.onClickSave,
-    onClickDelete = _ref.onClickDelete,
-    className = _ref.className;
-  var _ref2 = media || {},
-    mediaId = _ref2.id,
-    type = _ref2.type,
-    _ref2$url = _ref2.url,
-    url = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$thumbnail_url = _ref2.thumbnail_url,
-    thumbnail = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
-    _ref2$name = _ref2.name,
-    mediaName = _ref2$name === void 0 ? null : _ref2$name,
-    _ref2$metadata = _ref2.metadata,
-    metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
-  var _ref3 = metadata || {},
-    _ref3$filename = _ref3.filename,
-    filename = _ref3$filename === void 0 ? null : _ref3$filename,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? null : _ref3$size,
-    _ref3$width = _ref3.width,
-    width = _ref3$width === void 0 ? null : _ref3$width,
-    _ref3$height = _ref3.height,
-    height = _ref3$height === void 0 ? null : _ref3$height,
-    _ref3$duration = _ref3.duration,
-    duration = _ref3$duration === void 0 ? null : _ref3$duration,
-    _ref3$user = _ref3.user,
-    user = _ref3$user === void 0 ? null : _ref3$user,
-    _ref3$description = _ref3.description,
-    mediaDescription = _ref3$description === void 0 ? null : _ref3$description,
-    _ref3$tags = _ref3.tags,
-    mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
-  var _useMediaUpdate = data.useMediaUpdate(),
-    update = _useMediaUpdate.update;
-  var _useMediaRequestDelet = data.useMediaRequestDelete(),
-    requestDeleteMedia = _useMediaRequestDelet.requestDeleteMedia;
-  var _useMediaDelete = data.useMediaDelete(),
-    deleteMedia = _useMediaDelete.deleteMedia;
-  var getOptionLabel = React.useCallback(function (_ref4) {
-    var name = _ref4.name;
-    return name;
-  }, []);
-  var getOptionValue = React.useCallback(function (_ref5) {
-    var name = _ref5.name;
-    return name;
-  }, []);
-  var getNewOptionData = React.useCallback(function (inputValue) {
-    return {
-      name: inputValue
-    };
-  }, []);
-  var finalTags = React.useMemo(function () {
-    return allTags !== null ? uniqBy(mediaTags.concat(allTags), function (_ref6) {
-      var id = _ref6.id;
-      return id;
-    }) : mediaTags;
-  }, [mediaTags, allTags]);
-  var _useState = React.useState(mediaName),
-    _useState2 = _slicedToArray(_useState, 2),
-    name = _useState2[0],
-    setName = _useState2[1];
-  var _useState3 = React.useState(mediaDescription),
-    _useState4 = _slicedToArray(_useState3, 2),
-    description = _useState4[0],
-    setDescription = _useState4[1];
-  var _useState5 = React.useState(mediaTags.map(getOptionValue)),
-    _useState6 = _slicedToArray(_useState5, 2),
-    tags = _useState6[0],
-    setTags = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    changed = _useState8[0],
-    setChanged = _useState8[1];
-  var onTagChange = React.useCallback(function (val) {
-    setTags(val);
-    setChanged(true);
-  }, [tags, setTags, setChanged]);
-  var onNameChange = React.useCallback(function (val) {
-    setName(val);
-    setChanged(true);
-  }, [tags, setName, setChanged]);
-  var onDescriptionChange = React.useCallback(function (val) {
-    setDescription(val);
-    setChanged(true);
-  }, [tags, setDescription, setChanged]);
-  var _useState9 = React.useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    saveState = _useState10[0],
-    setSaveState = _useState10[1];
-  var onSave = React.useCallback(function () {
-    return update(mediaId, {
-      name: name,
-      tags: tags,
-      description: description
-    }).then(function (response) {
-      setChanged(false);
-      setSaveState(null);
-      if (onClickSave !== null) {
-        onClickSave();
-      }
-      if (onChange !== null) {
-        onChange(response);
-      }
-    })["catch"](function () {
-      setSaveState(false);
-    });
-  }, [mediaId, name, tags, description, metadata, update, onChange, onClickSave, onClickClose, setChanged, setSaveState]);
-  var _useState11 = React.useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    deletedState = _useState12[0],
-    setDeletedState = _useState12[1];
-  var _useState13 = React.useState(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    confirmation = _useState14[0],
-    setConfirmation = _useState14[1];
-  React.useEffect(function () {
-    setDeletedState(null);
-    setConfirmation(null);
-  }, [mediaId, setDeletedState, setConfirmation]);
-  var onConfirm = React.useCallback(function () {
-    requestDeleteMedia(mediaId).then(function (response) {
-      var _ref7 = response || {},
-        state = _ref7.state,
-        _ref7$items = _ref7.items,
-        items = _ref7$items === void 0 ? [] : _ref7$items;
-      if (state === 'needs_confirmation') {
-        setConfirmation(items || []);
-      } else {
-        setConfirmation(null);
-      }
-    })["catch"](function () {
-      setConfirmation(null);
-    });
-  }, [mediaId, requestDeleteMedia, setConfirmation]);
-  var onDelete = React.useCallback(function () {
-    deleteMedia(mediaId).then(function () {
-      setChanged(false);
-      setDeletedState(true);
-      setConfirmation(null);
-      if (onClickDelete !== null) {
-        onClickDelete(mediaId);
-      }
-    })["catch"](function () {
-      setDeletedState(false);
-      setConfirmation(null);
-    });
-  }, [mediaId, deleteMedia, onClickDelete, setChanged, setDeletedState, setConfirmation]);
-  var onCancelDelete = React.useCallback(function () {
-    setConfirmation(null);
-    setDeletedState(null);
-  }, [setConfirmation, setDeletedState]);
-  React.useEffect(function () {
-    if (media !== null) {
-      setTags(mediaTags);
-      setName(mediaName);
-      setDescription(mediaDescription);
-    } else {
-      setTags([]);
-      setName(null);
-      setDescription(null);
-    }
-    setChanged(false);
-  }, [media, setTags, setName, setDescription, setChanged]);
-  var TextField = contexts.useFieldComponent('text');
-  var TokensField = contexts.useFieldComponent('tokens');
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['position-relative', _defineProperty({
-      'bg-light': type === 'audio',
-      'bg-black': type === 'image'
-    }, styles$9.video, type === 'video')])
-  }, type === 'video' ? /*#__PURE__*/React.createElement("video", {
-    className: styles$9.player,
-    controls: true,
-    src: url
-  }) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
-    className: styles$9.audio
-  }, /*#__PURE__*/React.createElement("audio", {
-    className: styles$9.player,
-    controls: true,
-    src: url
-  })) : null, type !== 'video' && thumbnail !== null ? /*#__PURE__*/React.createElement("img", {
-    src: thumbnail,
-    className: styles$9.image,
-    alt: filename
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: styles$9.placeholder
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "p-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "tags mb-4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "my-3"
-  }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "kBz8vF",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Name"
-    }]
-  })), /*#__PURE__*/React.createElement(TextField, {
-    value: name,
-    onChange: onNameChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "my-3"
-  }, /*#__PURE__*/React.createElement("h6", {
-    className: "mb-0"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "YJZtWR",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Description"
-    }]
-  })), /*#__PURE__*/React.createElement("p", {
-    className: "mb-1"
-  }, /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "EDFyUp",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Alternative text (accessibility)"
-    }]
-  }))), /*#__PURE__*/React.createElement(TextField, {
-    value: description,
-    onChange: onDescriptionChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "my-3"
-  }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "4fHMVj",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Tags"
-    }]
-  })), /*#__PURE__*/React.createElement(TokensField, {
-    value: tags,
-    options: finalTags
-    // loadOptions={loadTags}
-    ,
-    getOptionLabel: getOptionLabel,
-    getOptionValue: getOptionValue,
-    getNewOptionData: getNewOptionData,
-    onChange: onTagChange
-  })), changed ? /*#__PURE__*/React.createElement(components.Button, {
-    theme: "primary",
-    onClick: onSave
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "qIw1nW",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Save"
-    }]
-  })) : null, saveState === false ? /*#__PURE__*/React.createElement("p", {
-    className: "pt-1 text-danger"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "DYjRd/",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Sorry, this media could not be saved."
-    }]
-  })) : null), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "c9VwT/",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Technical details"
-    }]
-  })), /*#__PURE__*/React.createElement("ul", {
-    className: "list-group"
-  }, type !== null ? /*#__PURE__*/React.createElement("li", {
-    className: "list-group-item py-2 px-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-body-secondary"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "OkNUmk",
+var defaultColumns = [{
+  id: 'image',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "UbxbKP",
     defaultMessage: [{
       "type": 0,
-      "value": "Type"
+      "value": "Preview"
     }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col text-capitalize"
-  }, /*#__PURE__*/React.createElement("small", null, type)))) : null, filename !== null ? /*#__PURE__*/React.createElement("li", {
-    className: "list-group-item py-2 px-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-body-secondary"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "aovRFH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Filename"
-    }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, filename)))) : null, duration ? /*#__PURE__*/React.createElement("li", {
-    className: "list-group-item py-2 px-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-body-secondary"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "eoW0tZ",
+  }),
+  component: 'image',
+  path: 'thumbnail_url',
+  sortable: false
+}, {
+  id: 'name',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "WX83V9",
     defaultMessage: [{
       "type": 0,
-      "value": "Duration"
+      "value": "File name"
     }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, duration)))) : null, width !== null || height !== null ? /*#__PURE__*/React.createElement("li", {
-    className: "list-group-item py-2 px-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-body-secondary"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "mv37oK",
+  }),
+  component: 'text-description',
+  path: 'name',
+  descriptionPath: 'type',
+  descriptionValues: {
+    image: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "AwDQvD",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image"
+      }]
+    }),
+    video: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "mQiyAm",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Video"
+      }]
+    }),
+    audio: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "XnyI69",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    document: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "1dqmFw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Document"
+      }]
+    })
+  },
+  sortable: true
+}, {
+  id: 'dimensions',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "eCe9ZY",
     defaultMessage: [{
       "type": 0,
-      "value": "Dimension"
+      "value": "Dimensions"
     }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, width, "x", height)))) : null, size !== null ? /*#__PURE__*/React.createElement("li", {
-    className: "list-group-item py-2 px-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-body-secondary"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "liyV7Y",
+  }),
+  component: 'unit',
+  format: 'dimensions',
+  path: 'metadata'
+}, {
+  id: 'size',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "c3hu9o",
     defaultMessage: [{
       "type": 0,
       "value": "Size"
     }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, prettyBytes(size))))) : null, description !== null ? /*#__PURE__*/React.createElement("li", {
-    className: "list-group-item py-2 px-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-body-secondary"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "7uyslu",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Description"
-    }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, description)))) : null, user !== null && user.name ? /*#__PURE__*/React.createElement("li", {
-    className: "list-group-item py-2 px-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-body-secondary"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "sUR1xV",
+  }),
+  component: 'unit',
+  format: 'bytes',
+  path: 'metadata.size'
+}, {
+  id: 'duration',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "002oWQ",
     defaultMessage: [{
       "type": 0,
-      "value": "Author"
+      "value": "Duration"
     }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null), /*#__PURE__*/React.createElement("div", {
-    className: "py-3"
-  }, confirmation !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, confirmation.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: "pt-1 text-danger"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "2FD6tj",
+  }),
+  component: 'unit',
+  format: 'duration',
+  path: 'metadata.duration'
+},
+// {
+//     id: 'author',
+//     label: <FormattedMessage defaultMessage="Added by" description="Field name" />,
+//     component: 'avatar',
+//     path: 'metadata.author',
+//     namePath: 'name',
+//     withoutName: true,
+// },
+{
+  id: 'created_at',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "OzYWZz",
     defaultMessage: [{
       "type": 0,
-      "value": "This media is used by the following documents:"
+      "value": "Created at"
     }]
-  })), /*#__PURE__*/React.createElement("ul", null, confirmation.map(function (it, i) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: "".concat(it, "-").concat(i + 1),
-      className: "text-danger"
-    }, it);
-  }))) : null, /*#__PURE__*/React.createElement("p", {
-    className: "pt-1 text-danger"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "wy2g+x",
+  }),
+  component: 'date',
+  path: 'created_at',
+  format: 'yyyy-MM-dd hh:ss',
+  sortable: true
+}, {
+  id: 'actions',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "rtwfuZ",
     defaultMessage: [{
       "type": 0,
-      "value": "Are you sure you want to continue?"
+      "value": "Actions"
     }]
-  }))) : null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex"
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    className: "me-2",
-    theme: "danger",
-    outline: true,
-    onClick: confirmation === null ? onConfirm : onDelete
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "/KQ87r",
+  }),
+  actions: ['edit', 'delete']
+  // component: ItemActions,
+  // label: 'Edit',
+  // url: '/edit/1',
+}
+// {
+//     id: 'status',
+//     label: <FormattedMessage defaultMessage="Status" description="Field name" />,
+//     component: 'text',
+//     path: 'metadata.status',
+// },
+];
+
+var defaultFields = [{
+  name: 'name',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "WX83V9",
     defaultMessage: [{
       "type": 0,
-      "value": "Delete media"
+      "value": "File name"
     }]
-  })), confirmation !== null ? /*#__PURE__*/React.createElement(components.Button, {
-    theme: "primary",
-    outline: true,
-    onClick: onCancelDelete
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "Xb6r3F",
+  }),
+  type: 'text',
+  component: 'text'
+}, {
+  name: 'description',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "ygNvmz",
     defaultMessage: [{
       "type": 0,
-      "value": "Cancel"
+      "value": "Description"
     }]
-  })) : null), deletedState === false ? /*#__PURE__*/React.createElement("p", {
-    className: "pt-1 text-danger"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "rqbRV2",
+  }),
+  type: 'text',
+  component: 'text'
+}, {
+  id: 'info',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "3RT69u",
     defaultMessage: [{
       "type": 0,
-      "value": "Sorry, this media could not be deleted."
+      "value": "Informations"
     }]
-  })) : null)));
-}
-MediaMetadata.propTypes = propTypes$9;
-MediaMetadata.defaultProps = defaultProps$9;
-
-var useSearchFilters = function useSearchFilters(_ref) {
-  var _ref$recent = _ref.recent,
-    recent = _ref$recent === void 0 ? [] : _ref$recent,
-    _ref$tags = _ref.tags,
-    tags = _ref$tags === void 0 ? [] : _ref$tags,
-    _ref$team = _ref.team,
-    team = _ref$team === void 0 ? [] : _ref$team,
-    _ref$sources = _ref.sources,
-    upstreamSources = _ref$sources === void 0 ? [] : _ref$sources,
-    _ref$withType = _ref.withType,
-    withType = _ref$withType === void 0 ? false : _ref$withType,
-    _ref$storyId = _ref.storyId,
-    storyId = _ref$storyId === void 0 ? null : _ref$storyId;
-  var sources = [].concat(_toConsumableArray(storyId !== null ? [{
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "eiaIIB",
-      defaultMessage: [{
-        "type": 0,
-        "value": "This Micromag"
-      }]
-    }),
-    value: "document-".concat(storyId)
-  }] : []), [{
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "xAzv6g",
-      defaultMessage: [{
-        "type": 0,
-        "value": "All sources"
-      }]
-    }),
-    value: 'all'
-  }], _toConsumableArray(team !== null && team.length > 0 ? [{
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "/62oe4",
-      defaultMessage: [{
-        "type": 0,
-        "value": "My files"
-      }]
-    }),
-    value: 'user'
-  }] : []), _toConsumableArray(upstreamSources)).filter(function (it) {
-    return it !== null;
-  });
-  var types = [{
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "2J05S0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Images"
-      }]
-    }),
-    value: 'image'
-  }, {
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "QBlqW9",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Videos"
-      }]
-    }),
-    value: 'video'
-  }, {
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "PNMMo/",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audios"
-      }]
-    }),
-    value: 'audio'
-  }];
-  var usage = [{
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'user',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "tmfbUn",
+      id: "yByaBh",
       defaultMessage: [{
         "type": 0,
-        "value": "Unused"
+        "value": "Added by"
       }]
     }),
-    value: 'unused'
+    type: 'display',
+    display: 'avatar',
+    name: 'user',
+    horizontal: true
   }, {
+    id: 'created_at',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "AQ8Aig",
+      id: "PN+75e",
       defaultMessage: [{
         "type": 0,
-        "value": "Used"
+        "value": "Created at"
       }]
     }),
-    value: 'used'
-  }];
-  var sections = [withType ? {
-    value: 'types',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "/ca7BX",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Types"
-      }]
-    }),
-    items: types
-  } : null, {
-    value: 'recent',
+    type: 'display',
+    display: 'date',
+    name: 'created_at',
+    format: 'yyyy-MM-dd hh:ss',
+    horizontal: true
+  }]
+}, {
+  id: 'technical',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'format',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "vYunz+",
+      id: "JuxiUN",
       defaultMessage: [{
         "type": 0,
-        "value": "Recent searches"
+        "value": "Format"
       }]
     }),
-    items: recent
+    type: 'display',
+    display: 'unit',
+    format: 'format',
+    name: 'format',
+    horizontal: true
   }, {
-    value: 'tags',
+    id: 'dimensions',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "/OM5UY",
+      id: "rmJBin",
       defaultMessage: [{
         "type": 0,
-        "value": "Tags"
+        "value": "Dimensions"
       }]
     }),
-    items: tags
+    type: 'display',
+    display: 'unit',
+    format: 'dimensions',
+    name: 'metadata',
+    horizontal: true
   }, {
-    value: 'users',
+    id: 'size',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "pfvDzR",
+      id: "g2CRt5",
       defaultMessage: [{
         "type": 0,
-        "value": "Added by"
+        "value": "Size"
       }]
     }),
-    items: team
+    type: 'display',
+    display: 'unit',
+    format: 'bytes',
+    name: 'metadata.size',
+    horizontal: true
   }, {
-    value: 'usage',
+    id: 'duration',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "mOSkbf",
+      id: "wU++NJ",
       defaultMessage: [{
         "type": 0,
-        "value": "Usage"
+        "value": "Duration"
       }]
     }),
-    items: usage
-  }].filter(function (it) {
-    return it !== null;
-  });
-  return {
-    sources: sources,
-    sections: sections,
-    types: types
-  };
-};
-
-// eslint-disable-next-line import/prefer-default-export
-var filtersValue = PropTypes.shape({
-  search: PropTypes.string
-});
-PropTypes.shape({
-  types: PropTypes.arrayOf(PropTypes.string),
-  tags: PropTypes.arrayOf(PropTypes.string),
-  users: PropTypes.arrayOf(PropTypes.string),
-  usage: PropTypes.arrayOf(PropTypes.oneOf(['used', 'unused']))
+    type: 'display',
+    display: 'unit',
+    format: 'duration',
+    name: 'metadata.duration',
+    horizontal: true
+  }]
+}];
+
+/* eslint-disable react/jsx-props-no-spreading */
+var RoutesContext = /*#__PURE__*/React.createContext(null);
+var useRoutesContext = function useRoutesContext() {
+  return React.useContext(RoutesContext);
+};
+({
+  children: PropTypes.node.isRequired,
+  routes: PropTypes.objectOf(PropTypes.string).isRequired,
+  basePath: PropTypes.string
 });
-
-var styles$8 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
-
-var propTypes$8 = {
-  value: PropTypes.string,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    label: core.PropTypes.label,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    active: PropTypes.bool
-  })),
-  onChange: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$8 = {
-  value: null,
-  items: null,
-  onChange: null,
-  className: null
-};
-function DropdownSection(_ref) {
-  var value = _ref.value,
-    items = _ref.items,
-    onChange = _ref.onChange,
-    className = _ref.className;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var currentItem = items.find(function (i) {
-    return i.value === value;
-  });
-  var onOpen = React.useCallback(function () {
-    setOpen(!open);
-  }, [open, setOpen]);
-  var onBlur = React.useCallback(function () {
-    // Work around the event call order
-    setTimeout(function () {
-      setOpen(false);
-    }, 300);
-  }, [setOpen]);
-  var onItemClick = React.useCallback(function (e) {
-    var val = e.target.dataset.value || null;
-    setOpen(false);
-    onChange(val);
-  }, [setOpen]);
-  return items !== null && items.length > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, 'dropdown', _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$8.label
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "9ZdD+Q",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Library for"
-    }]
-  })), /*#__PURE__*/React.createElement("button", {
-    className: classNames([styles$8.dropdownToggle, 'dropdown-toggle', {
-      open: open === true
-    }]),
-    type: "button",
-    onClick: onOpen,
-    onBlur: onBlur
-  }, (currentItem ? currentItem.label : null) || /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "15GBmG",
-    defaultMessage: [{
-      "type": 0,
-      "value": "All"
-    }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.dropdown, 'dropdown-menu', {
-      show: open === true
-    }])
-  }, items.map(function (_ref3) {
-    var label = _ref3.label,
-      itemValue = _ref3.value;
-    var itemClassNames = classNames(['dropdown-item', {
-      active: itemValue === value
-    }]);
-    return /*#__PURE__*/React.createElement("button", {
-      className: itemClassNames,
-      type: "button",
-      key: "drop-".concat(itemValue),
-      onClick: onItemClick,
-      "data-value": itemValue
-    }, label);
-  }))) : null;
+var compilers = {};
+function generatePath(fullPath, data) {
+  var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var fullUrlMatches = fullPath.match(/^(https?:\/\/)/);
+  if (typeof compilers[fullPath] === 'undefined') {
+    compilers[fullPath] = pathToRegexp.compile(fullPath.replace(/^(https?:\/\/)/, ''), opts);
+  }
+  var compiler = compilers[fullPath];
+  return fullUrlMatches !== null ? "".concat(fullUrlMatches[1]).concat(compiler(data)) : compiler(data);
 }
-DropdownSection.propTypes = propTypes$8;
-DropdownSection.defaultProps = defaultProps$8;
-
-var styles$7 = {"container":"micromag-media-gallery-forms-search-container","input":"micromag-media-gallery-forms-search-input","active":"micromag-media-gallery-forms-search-active"};
-
-var propTypes$7 = {
-  value: PropTypes.string,
-  loading: PropTypes.bool,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onClickIcon: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$7 = {
-  value: null,
-  loading: false,
-  onChange: null,
-  onFocus: null,
-  onBlur: null,
-  onClickIcon: null,
-  className: null
-};
-var Search = function Search(_ref) {
-  var value = _ref.value,
-    loading = _ref.loading,
-    onChange = _ref.onChange,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
-    onClickIcon = _ref.onClickIcon,
-    className = _ref.className;
-  var intl = reactIntl.useIntl();
-  var onSearchChange = React.useCallback(function (e) {
-    var newValue = e.currentTarget.value.length > 0 ? e.currentTarget.value : null;
-    if (onChange !== null) {
-      onChange(newValue);
-    }
-  }, [onChange]);
-  React.useCallback(function () {
-    if (onChange !== null) {
-      onChange('');
-    }
-  }, [onChange]);
-  var onClickSearchIcon = React.useCallback(function () {
-    if (onClickIcon !== null) {
-      onClickIcon();
-    }
-  }, [onClickIcon]);
-  return /*#__PURE__*/React.createElement("form", {
-    method: "post",
-    className: classNames([styles$7.container, 'w-100', 'border', 'border-dark', 'rounded', _defineProperty({}, className, className !== null)]),
-    onSubmit: function onSubmit(e) {
-      return e.preventDefault();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "input-group w-100"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn",
-    onClick: onClickSearchIcon
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: loading ? faSpinner.faSpinner : faSearch.faSearch,
-    spin: loading
-  })), /*#__PURE__*/React.createElement("input", {
-    className: classNames([styles$7.input, 'form-control', {
-      'bg-light': !!value,
-      'text-dark': value
-    }]),
-    type: "text",
-    value: value || '',
-    placeholder: intl.formatMessage({
-      id: "n/SxMs",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Search medias"
-      }]
-    }),
-    onChange: onSearchChange,
-    onFocus: onFocus,
-    onBlur: onBlur
-  }), null));
-};
-Search.propTypes = propTypes$7;
-Search.defaultProps = defaultProps$7;
-var SearchForm = Search;
-
-var styles$6 = {"container":"micromag-media-gallery-forms-tag-dropdown-container","select":"micromag-media-gallery-forms-tag-dropdown-select"};
-
-var propTypes$6 = {
-  tags: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    value: PropTypes.oneOf([PropTypes.string, PropTypes.node]),
-    active: PropTypes.bool
-  })),
-  parent: PropTypes.string,
-  onChange: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$6 = {
-  tags: null,
-  parent: null,
-  onChange: null,
-  className: null
-};
-var TagDropdown = function TagDropdown(_ref) {
-  var tags = _ref.tags,
-    parent = _ref.parent,
-    onChange = _ref.onChange,
-    className = _ref.className;
-  var onItemChange = React.useCallback(function (e) {
-    var val = e.target.dataset.value || null;
-    onChange(val, parent);
-  }, [onChange, parent]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("select", {
-    className: classNames(['form-select', styles$6.select])
-  }, tags !== null ? tags.map(function (_ref3) {
-    var label = _ref3.label,
-      value = _ref3.value,
-      active = _ref3.active;
-    var itemClassNames = classNames([styles$6.tag, 'fs-6', {
-      'btn-primary': active === true
-    }]);
-    return /*#__PURE__*/React.createElement("option", {
-      className: itemClassNames,
-      type: "button",
-      key: "option-".concat(value),
-      onClick: onItemChange,
-      "data-value": value,
-      value: value
-    }, label);
-  }) : null));
-};
-TagDropdown.propTypes = propTypes$6;
-TagDropdown.defaultProps = defaultProps$6;
-var TagDropdown$1 = TagDropdown;
-
-var styles$5 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
-
-var propTypes$5 = {
-  tags: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    value: PropTypes.oneOf([PropTypes.string, PropTypes.node]),
-    active: PropTypes.bool
-  })),
-  parent: PropTypes.string,
-  onChange: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$5 = {
-  tags: null,
-  parent: null,
-  onChange: null,
-  className: null
-};
-var TagSection = function TagSection(_ref) {
-  var tags = _ref.tags,
-    parent = _ref.parent,
-    onChange = _ref.onChange,
-    className = _ref.className;
-  var onItemChange = React.useCallback(function (e) {
-    var val = e.target.dataset.value || null;
-    onChange(val, parent);
-  }, [onChange, parent]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
-  }, tags !== null ? tags.map(function (_ref3) {
-    var label = _ref3.label,
-      value = _ref3.value,
-      active = _ref3.active;
-    var itemClassNames = classNames([styles$5.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-secondary', 'text-truncate', {
-      'btn-primary': active === true
-      // 'btn-outline-light': active === false,
-    }]);
-    return /*#__PURE__*/React.createElement("button", {
-      className: itemClassNames,
-      type: "button",
-      key: "tag-".concat(value),
-      onClick: onItemChange,
-      "data-value": value
-    }, label);
-  }) : null);
-};
-TagSection.propTypes = propTypes$5;
-TagSection.defaultProps = defaultProps$5;
-var TagSection$1 = TagSection;
-
-var styles$4 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
-
-var propTypes$4 = {
-  filters: PropTypes.object,
-  // eslint-disable-line
-  sections: PropTypes.arrayOf(PropTypes.shape({})),
-  onChange: PropTypes.func,
-  onClose: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$4 = {
-  filters: null,
-  sections: [],
-  onChange: null,
-  onClose: null,
-  className: null
-};
-var SearchFilters = function SearchFilters(_ref) {
-  var filters = _ref.filters,
-    sections = _ref.sections,
-    onChange = _ref.onChange,
-    onClose = _ref.onClose,
-    className = _ref.className;
-  var intl = reactIntl.useIntl();
-  var getActive = React.useCallback(function (items, sectionFilters) {
-    return items !== null ? items.map(function (it) {
-      return _objectSpread(_objectSpread({}, it), {}, {
-        active: sectionFilters ? !!sectionFilters.find(function (f) {
-          return f === it.value;
-        }) : false
-      });
-    }) : [];
-  }, []);
-  var activeSections = React.useMemo(function () {
-    return sections.map(function (section) {
-      return _objectSpread(_objectSpread({}, section), {}, {
-        items: getActive(section.items, filters[section.value])
-      });
-    });
-  }, [getActive, sections, filters]);
-  var onSectionChange = React.useCallback(function (data, section) {
-    var val = filters[section] ? filters[section] : [];
-    var found = !!val.find(function (f) {
-      return f === data;
-    });
-    if (found) {
-      onChange(section, val.filter(function (f) {
-        return f !== data;
-      }));
-    } else if (data) {
-      if (section === 'recent') {
-        onChange('search', data);
-      } else if (section === 'usage') {
-        onChange(section, [data]);
-      } else {
-        onChange(section, [].concat(_toConsumableArray(val), [data]));
-      }
+var useUrlGeneratorPathToRepexp = function useUrlGeneratorPathToRepexp() {
+  var _ref2 = useRoutesContext() || {},
+    _ref2$routes = _ref2.routes,
+    routes = _ref2$routes === void 0 ? null : _ref2$routes,
+    _ref2$basePath = _ref2.basePath,
+    basePath = _ref2$basePath === void 0 ? null : _ref2$basePath;
+  var urlGenerator = React.useCallback(function (key, data, opts) {
+    var path = routes !== null ? routes[key] || null : null;
+    if (path === null) {
+      return null;
     }
-  }, [filters, onChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
-  }, activeSections.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['bg-dark', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    className: classNames([styles$4.closeBtn, 'py-1', 'px-1', 'text-light']),
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faTimes.faTimes
-    }),
-    onClick: onClose,
-    title: intl.formatMessage({
-      id: "yCXMzz",
+    var url = generatePath(path, data, opts);
+    return basePath !== null ? "".concat(basePath.replace(/\/$/, ''), "/").concat(url.replace(/^\//, '')) : url;
+  }, [routes, basePath]);
+  return urlGenerator;
+};
+var useUrlGeneratorPathToRegexp = useUrlGeneratorPathToRepexp;
+
+function filters() {
+  var route = useUrlGeneratorPathToRegexp();
+  return [{
+    id: 'search',
+    component: 'search',
+    name: 'search'
+  }, {
+    id: 'types',
+    component: 'select',
+    name: 'types',
+    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "9/t5wK",
       defaultMessage: [{
         "type": 0,
-        "value": "Close"
+        "value": "Type"
       }]
-    })
-  }), activeSections.map(function (_ref3) {
-    var value = _ref3.value,
-      label = _ref3.label,
-      items = _ref3.items;
-    return items.length > 0 ? /*#__PURE__*/React.createElement("div", {
-      key: "filter-".concat(value),
-      className: classNames([styles$4.section, 'py-2'])
-    }, /*#__PURE__*/React.createElement("p", {
-      className: classNames([styles$4.title, 'm-0'])
-    }, label), value === 'tags' || value === 'recent' || value === 'users' ? /*#__PURE__*/React.createElement(TagDropdown$1, {
-      className: classNames([styles$4.tags]),
-      tags: items,
-      parent: value,
-      onChange: onSectionChange
-    }) : /*#__PURE__*/React.createElement(TagSection$1, {
-      className: classNames([styles$4.tags]),
-      tags: items,
-      parent: value,
-      onChange: onSectionChange
-    })) : null;
-  })) : null);
-};
-SearchFilters.propTypes = propTypes$4;
-SearchFilters.defaultProps = defaultProps$4;
-var SearchFilters$1 = SearchFilters;
-
-var styles$3 = {"container":"micromag-media-gallery-buttons-close-container"};
-
-var _excluded = ["className"];
-var propTypes$3 = {
-  className: PropTypes.string
-};
-var defaultProps$3 = {
-  className: null
-};
-var CloseButton = function CloseButton(_ref) {
-  var className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(components.Button, Object.assign({
-    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
-    withoutStyle: true,
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faTimes.faTimes,
-      className: styles$3.icon
     }),
-    iconPosition: "right"
-  }, props));
-};
-CloseButton.propTypes = propTypes$3;
-CloseButton.defaultProps = defaultProps$3;
-var CloseButton$1 = CloseButton;
-
-var styles$2 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
-
-var propTypes$2 = {
-  filters: PropTypes.shape({
-    types: PropTypes.arrayOf(PropTypes.string),
-    tags: PropTypes.arrayOf(PropTypes.string),
-    users: PropTypes.arrayOf(PropTypes.string),
-    usage: PropTypes.arrayOf(PropTypes.oneOf(['used', 'unused']))
-  }),
-  onChange: PropTypes.func,
-  onReset: PropTypes.func,
-  sections: PropTypes.arrayOf(PropTypes.shape({})),
-  className: PropTypes.string
-};
-var defaultProps$2 = {
-  filters: null,
-  onChange: null,
-  onReset: null,
-  sections: [],
-  className: null
-};
-function ActiveFilters(_ref) {
-  var filters = _ref.filters,
-    onChange = _ref.onChange,
-    onReset = _ref.onReset,
-    sections = _ref.sections,
-    className = _ref.className;
-  var handleReset = React.useCallback(function () {
-    if (onReset !== null) {
-      onReset();
-    }
-  }, [onReset]);
-  var removeFilter = React.useCallback(function (key, activeValue) {
-    var newFilterValue = filters[key].filter(function (it) {
-      return it !== activeValue;
-    });
-    var newValue = newFilterValue.length > 0 ? newFilterValue : null;
-    if (onChange !== null) {
-      onChange(key, newValue);
-    }
-  }, [onChange, filters]);
-  var hasValue = Object.keys(filters).reduce(function (oneHasValue, key) {
-    return oneHasValue || filters[key] !== null;
-  }, false);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$2.container, _defineProperty({}, className, className)])
-  }, hasValue ? /*#__PURE__*/React.createElement("div", {
-    className: styles$2.heading
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.title
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "t2cFdl",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Active filters"
-    }]
-  })), /*#__PURE__*/React.createElement(CloseButton$1, {
-    className: styles$2.resetButton,
-    onClick: handleReset
-  }, /*#__PURE__*/React.createElement("u", null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "/T/UDH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Remove all"
-    }]
-  })))) : null, filters !== null ? Object.keys(filters).map(function (key) {
-    var section = sections.find(function (s) {
-      return s.value === key;
-    });
-    return section && filters[key] !== null ? filters[key].map(function (activeValue) {
-      var current = section.items.find(function (s) {
-        return s.value === activeValue;
-      });
-      var _ref3 = current || {},
-        _ref3$label = _ref3.label,
-        label = _ref3$label === void 0 ? '' : _ref3$label;
-      return /*#__PURE__*/React.createElement(components.Button, {
-        className: styles$2.activeTag,
-        key: "filter-button-".concat(activeValue),
-        type: "submit",
-        size: "sm",
-        label: /*#__PURE__*/React.createElement("span", null, section.label, " : ", label),
-        theme: "secondary",
-        icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-          icon: faTimes.faTimes
-        }),
-        iconPosition: "right",
-        onClick: function onClick() {
-          return removeFilter(key, activeValue);
-        }
-      });
-    }) : null;
-  }) : null);
-}
-ActiveFilters.propTypes = propTypes$2;
-ActiveFilters.defaultProps = defaultProps$2;
-
-var styles$1 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","thumbnail":"micromag-media-gallery-partials-navbar-thumbnail","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
-
-var propTypes$1 = {
-  types: PropTypes.arrayOf(PropTypes.string),
-  filters: filtersValue,
-  media: core.PropTypes.media,
-  selectedMedia: core.PropTypes.media,
-  storyId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  tags: core.PropTypes.tags,
-  authors: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string
-  })),
-  loading: PropTypes.bool,
-  withoutSource: PropTypes.bool,
-  withoutType: PropTypes.bool,
-  onClickAdd: PropTypes.func,
-  onClickItem: PropTypes.func,
-  onClickItemInfo: PropTypes.func,
-  onClickClear: PropTypes.func,
-  // TODO: still needed?
-  onFocusSearch: PropTypes.func,
-  onFiltersChange: PropTypes.func,
-  onClickBack: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$1 = {
-  types: null,
-  filters: null,
-  media: null,
-  selectedMedia: null,
-  storyId: null,
-  tags: [],
-  authors: [],
-  loading: false,
-  withoutSource: false,
-  withoutType: true,
-  onClickAdd: null,
-  onClickItem: null,
-  onClickItemInfo: null,
-  onClickClear: null,
-  onFocusSearch: null,
-  onFiltersChange: null,
-  onClickBack: null,
-  className: null
-};
-function Navbar(_ref) {
-  var types = _ref.types,
-    filters = _ref.filters,
-    media = _ref.media,
-    selectedMedia = _ref.selectedMedia,
-    storyId = _ref.storyId,
-    tags = _ref.tags,
-    authors = _ref.authors,
-    loading = _ref.loading,
-    withoutSource = _ref.withoutSource,
-    withoutType = _ref.withoutType,
-    className = _ref.className,
-    onClickAdd = _ref.onClickAdd,
-    onClickItem = _ref.onClickItem,
-    onClickItemInfo = _ref.onClickItemInfo,
-    onClickClear = _ref.onClickClear,
-    onFocusSearch = _ref.onFocusSearch,
-    onFiltersChange = _ref.onFiltersChange,
-    onClickBack = _ref.onClickBack;
-  var intl = reactIntl.useIntl();
-  var throttle = React.useRef(null);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-
-  // TODO: get data from api for real testing
-
-  var _useMediasRecentSearc = data.useMediasRecentSearches(),
-    getSearches = _useMediasRecentSearc.getSearches,
-    createSearch = _useMediasRecentSearc.createSearch;
-  var recent = React.useMemo(function () {
-    return getSearches();
-  }, [getSearches]);
-  var _useSearchFilters = useSearchFilters({
-      recent: recent.map(function (val) {
-        return {
-          value: val,
-          label: val
-        };
+    options: [{
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "yHAmDD",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Image"
+        }]
       }),
-      tags: tags !== null ? tags.map(function (t) {
-        return {
-          value: t.name,
-          label: t.name
-        };
-      }) : [],
-      team: authors || [],
-      withType: !withoutType,
-      storyId: storyId
-    }),
-    sources = _useSearchFilters.sources,
-    sections = _useSearchFilters.sections;
-  var searchValue = filters !== null ? filters.search || null : null;
-  var hasFilter = filters !== null ? Object.keys(filters).reduce(function (acc, val) {
-    if (val !== 'type' && val !== 'search' && val !== 'source' && filters[val] !== null && filters[val].length > 0) {
-      return true;
-    }
-    return acc;
-  }, false) : false;
-  var onFilterChange = React.useCallback(function (type, value) {
-    var isOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var newFiltersValue = _objectSpread(_objectSpread({}, filters), {}, _defineProperty({}, type, value));
-    if (onFiltersChange !== null) {
-      onFiltersChange(newFiltersValue);
-    }
-    setOpen(isOpen);
-  }, [filters, onFiltersChange, setOpen]);
-  var onFiltersReset = React.useCallback(function () {
-    onFiltersChange({
-      type: filters.type || null,
-      search: filters.search || null,
-      source: filters.source || null
-    });
-    setOpen(false);
-  }, [filters, onFiltersChange]);
-  var onSearchChange = React.useCallback(function (value) {
-    if (throttle.current !== null) {
-      clearTimeout(throttle.current);
-    }
-    throttle.current = setTimeout(function () {
-      createSearch(value);
-      throttle.current = null;
-    }, 5000);
-    onFilterChange('search', value, !!value);
-    setOpen(false);
-  }, [onFilterChange, createSearch, setOpen, throttle]);
-  var onSourceChange = React.useCallback(function (value) {
-    onFilterChange('source', value);
-  }, [onFilterChange]);
-  var onSearchFocus = React.useCallback(function () {
-    if (onFocusSearch !== null) {
-      onFocusSearch();
-    }
-  }, [onFocusSearch]);
-  var onCloseFilters = React.useCallback(function () {
-    setOpen(false);
-  }, [setOpen]);
-  var onToggleMenu = React.useCallback(function () {
-    setOpen(!open);
-  }, [open, setOpen]);
-  var onClickRemove = React.useCallback(function () {
-    if (onClickClear !== null) {
-      onClickClear();
-    } else if (onClickItem !== null) {
-      onClickItem(null);
-    }
-  }, [onClickClear, onClickItem]);
-  var uploadMessage = React.useMemo(function () {
-    var message = /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "3Ap0C1",
+      value: 'image'
+    }, {
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "xSERPA",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Video"
+        }]
+      }),
+      value: 'video'
+    }, {
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "yQRtgx",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Audio"
+        }]
+      }),
+      value: 'audio'
+    }],
+    multiple: true
+  }, {
+    id: 'source',
+    component: 'select',
+    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "Pc4AD8",
       defaultMessage: [{
         "type": 0,
-        "value": "Upload a media"
+        "value": "Source"
       }]
-    });
-    if (types !== null) {
-      if (types.indexOf('video') !== -1 && types.indexOf('image') !== -1) {
-        message = /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-          id: "KK5teQ",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Upload a visual file"
-          }]
-        });
-      } else if (types.indexOf('video') !== -1) {
-        message = /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-          id: "WeD4nB",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Upload a video file"
-          }]
-        });
-      } else if (types.indexOf('image') !== -1) {
-        message = /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-          id: "KdAKt7",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Upload an image file"
-          }]
-        });
-      } else if (types.indexOf('audio') !== -1) {
-        message = /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-          id: "6W4St0",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Upload an audio file"
-          }]
-        });
-      } else if (types.indexOf('subtitle') !== -1) {
-        message = /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-          id: "BAfC6s",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Upload a closed captions file"
-          }]
-        });
-      }
-    }
-    return message;
-  }, [types]);
-  return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$1.container, 'navbar', _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.inner])
-  }, media === null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['list-group-item rounded w-100 mw-100 navbar-text mb-2', {
-      'border border-primary bg-dark py-2 px-2': selectedMedia !== null
-    }])
-  }, selectedMedia !== null ? /*#__PURE__*/React.createElement("div", {
-    className: ""
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center mb-2 overflow-hidden"
-  }, /*#__PURE__*/React.createElement(components.Media, {
-    className: styles$1.mediaPreview,
-    thumbnailClassName: styles$1.thumbnail,
-    thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url,
-    thumbnailAlign: "center"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$1.mediaLabel, 'd-inline-block', 'text-break', 'mx-1', 'me-2'])
-  }, selectedMedia.name || /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "fVqgfl",
-    defaultMessage: [{
-      "type": 0,
-      "value": "[no title]"
-    }]
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 align-content-center justify-content-between"
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    onClick: function onClick() {
-      return onClickItemInfo(selectedMedia);
-    },
-    theme: "secondary",
-    size: "sm",
-    iconPosition: "right",
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faInfoCircle.faInfoCircle
     }),
-    outline: true
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "iCf/MP",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Edit"
+    name: 'source',
+    options: [{
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "DYxnlo",
+        defaultMessage: [{
+          "type": 0,
+          "value": "All"
+        }]
+      }),
+      value: 'all'
+    }, {
+      label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+        id: "AgH3AR",
+        defaultMessage: [{
+          "type": 0,
+          "value": "This micromag"
+        }]
+      }),
+      value: 'document-1'
     }]
-  })), /*#__PURE__*/React.createElement(components.Button, {
-    theme: "secondary",
-    size: "sm",
-    outline: true,
-    iconPosition: "right",
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faTimes.faTimes
-    }),
-    onClick: onClickRemove,
-    title: intl.formatMessage({
-      id: "UG3SXh",
+  }, {
+    id: 'authors',
+    component: 'select',
+    name: 'authors',
+    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "7oXkoj",
       defaultMessage: [{
         "type": 0,
-        "value": "Remove"
+        "value": "Authors"
       }]
-    })
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "8TbpT7",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Remove"
-    }]
-  })))) : /*#__PURE__*/React.createElement(components.Button, {
-    className: "w-100",
-    theme: "primary",
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faPlus.faPlus
     }),
-    onClick: onClickAdd,
-    title: intl.formatMessage({
-      id: "Tt4jN1",
+    requestUrl: route('medias.authors') || '/api/medias/authors',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true
+  }, {
+    id: 'tags',
+    component: 'select',
+    name: 'tags',
+    placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+      id: "9mXl24",
       defaultMessage: [{
         "type": 0,
-        "value": "Add"
+        "value": "Tags"
       }]
-    })
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ps-2"
-  }, uploadMessage))) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
-  }, /*#__PURE__*/React.createElement(DropdownSection, {
-    items: sources,
-    value: filters.source || null,
-    onChange: onSourceChange
-  })) : null, media !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "w-100 d-flex flex-nowrap justify-content-between"
-  }, /*#__PURE__*/React.createElement("form", {
-    className: classNames(['d-flex', 'me-2'])
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    theme: "secondary",
-    outline: true,
-    size: "sm",
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faChevronLeft.faChevronLeft
     }),
-    onClick: onClickBack
-  })), /*#__PURE__*/React.createElement("strong", {
-    className: "navbar-text me-auto w-100 text-truncate text-light"
-  }, media !== null ? media.name : null)) : null, media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 flex-nowrap justify-content-between"
-  }, /*#__PURE__*/React.createElement(SearchForm, {
-    value: searchValue,
-    onChange: onSearchChange,
-    onFocus: onSearchFocus,
-    onClickIcon: onToggleMenu,
-    loading: loading,
-    className: classNames(['d-flex'])
-  })), open ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
-  }, /*#__PURE__*/React.createElement(SearchFilters$1, {
-    filters: filters,
-    sections: sections,
-    onChange: onFilterChange,
-    onClose: onCloseFilters
-  })) : null) : null, hasFilter && !open && media === null ? /*#__PURE__*/React.createElement("div", {
-    className: "list-group-item py-2 px-2 d-flex w-100 my-2 flex-nowrap justify-content-between"
-  }, /*#__PURE__*/React.createElement(ActiveFilters, {
-    filters: filters,
-    sections: sections,
-    onChange: onFilterChange,
-    onReset: onFiltersReset
-  })) : null));
+    requestUrl: route('medias.tags') || '/api/medias/tags',
+    itemLabelPath: 'name',
+    itemValuePath: 'id',
+    multiple: true,
+    paginated: true
+  }];
 }
-Navbar.propTypes = propTypes$1;
-Navbar.defaultProps = defaultProps$1;
 
-var styles = {"container":"micromag-media-gallery-container","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","mediaMetadata":"micromag-media-gallery-mediaMetadata","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
+var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
+
+// const videoTypes = ['video', 'image/gif'];
 
-var videoTypes = ['video', 'image/gif'];
 var propTypes = {
-  type: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  value: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  types: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   source: PropTypes.string,
+  filters: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })),
   isPicker: PropTypes.bool,
-  isSmall: PropTypes.bool,
-  withoutTitle: PropTypes.bool,
-  withoutSource: PropTypes.bool,
-  withoutType: PropTypes.bool,
+  multiple: PropTypes.bool,
   medias: core.PropTypes.medias,
-  selectedMedia: core.PropTypes.media,
+  buttons: PropTypes.arrayOf(PropTypes.shape({})),
   className: PropTypes.string,
-  navbarClassName: PropTypes.string,
-  onChange: PropTypes.func,
-  onClickMedia: PropTypes.func,
-  onClearMedia: PropTypes.func
+  onChange: PropTypes.func
 };
 var defaultProps = {
-  type: null,
+  value: null,
+  types: null,
   source: 'all',
+  filters: null,
+  fields: defaultFields,
+  columns: defaultColumns,
   isPicker: false,
-  isSmall: false,
-  withoutTitle: false,
-  withoutSource: false,
-  withoutType: true,
+  multiple: false,
   medias: null,
-  selectedMedia: null,
+  buttons: null,
   className: null,
-  navbarClassName: null,
-  onChange: null,
-  onClickMedia: null,
-  onClearMedia: null
+  onChange: null
 };
 function MediaGallery(_ref) {
-  var type = _ref.type,
+  var value = _ref.value,
+    types = _ref.types,
     source = _ref.source,
+    filters$1 = _ref.filters,
+    fields = _ref.fields,
+    columns = _ref.columns,
     isPicker = _ref.isPicker,
-    isSmall = _ref.isSmall,
-    withoutTitle = _ref.withoutTitle,
-    withoutSource = _ref.withoutSource,
-    withoutType = _ref.withoutType,
+    multiple = _ref.multiple,
     initialMedias = _ref.medias,
-    selectedMedia = _ref.selectedMedia,
+    buttons = _ref.buttons,
     className = _ref.className,
-    navbarClassName = _ref.navbarClassName,
-    onChange = _ref.onChange,
-    onClickMedia = _ref.onClickMedia,
-    onClearMedia = _ref.onClearMedia;
-  var intl = reactIntl.useIntl();
-  // Base state for filters
-  var defaultFilters = {
-    type: type,
-    source: source
-  };
-
-  // Filters
-  var throttle = React.useRef(null);
-  var _useState = React.useState(defaultFilters),
-    _useState2 = _slicedToArray(_useState, 2),
-    queryValue = _useState2[0],
-    setQueryValue = _useState2[1];
-  var _useState3 = React.useState(defaultFilters),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filtersValue = _useState4[0],
-    setFiltersValue = _useState4[1];
-  var story = contexts.useStory();
-  var _ref2 = story || {},
-    _ref2$id = _ref2.id,
-    storyId = _ref2$id === void 0 ? null : _ref2$id;
-  var _useMediaTags = data.useMediaTags(),
-    tags = _useMediaTags.tags;
-  var _useMediaAuthors = data.useMediaAuthors(),
-    authors = _useMediaAuthors.authors;
-  var onFiltersChange = React.useCallback(function (value) {
-    if (throttle.current !== null) {
-      clearTimeout(throttle.current);
-    }
-    throttle.current = setTimeout(function () {
-      setQueryValue(value);
-      throttle.current = null;
-    }, 500);
-    setFiltersValue(value);
-  }, [setFiltersValue, setQueryValue, throttle]);
-  var _useState5 = React.useState(initialMedias),
-    _useState6 = _slicedToArray(_useState5, 2),
-    defaultItems = _useState6[0],
-    setDefaultItems = _useState6[1];
-
-  // Items
-  var _useMedias = data.useMedias(queryValue, 1, 30, {
-      pages: defaultItems
-    }),
-    loadedMedias = _useMedias.items,
-    _useMedias$loading = _useMedias.loading,
-    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
-    _useMedias$loadNextPa = _useMedias.loadNextPage,
-    loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
-    _useMedias$allLoaded = _useMedias.allLoaded,
-    allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
-
-  // Temporary type filter
-  var _useState7 = React.useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    addedMedias = _useState8[0],
-    setAddedMedias = _useState8[1];
-  var medias = React.useMemo(function () {
-    var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(loadedMedias || []));
-    return allMedias.length > 0 ? allMedias : null;
-  }, [loadedMedias, addedMedias]);
-
-  // Medias
-  var _useState9 = React.useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    metadataMedia = _useState10[0],
-    setMetadataMedia = _useState10[1];
-  var onClickItem = React.useCallback(function (media) {
-    var _ref3 = media || {},
-      _ref3$id = _ref3.id,
-      mediaId = _ref3$id === void 0 ? null : _ref3$id;
-    var _ref4 = selectedMedia || {},
-      _ref4$id = _ref4.id,
-      selectedId = _ref4$id === void 0 ? null : _ref4$id;
-    var different = mediaId !== selectedId;
-    if (!isPicker) {
-      setMetadataMedia(media);
-    } else if (onClickMedia !== null) {
-      if (different) {
-        onClickMedia(media);
+    onChange = _ref.onChange;
+  var api = data.useApi();
+  var mediasApi = React.useMemo(function () {
+    return {
+      get: function get() {
+        var _api$medias;
+        return (_api$medias = api.medias).get.apply(_api$medias, arguments);
+      },
+      getTrashed: function getTrashed() {
+        var _api$medias2;
+        return (_api$medias2 = api.medias).get.apply(_api$medias2, arguments);
+      },
+      find: function find() {
+        var _api$medias3;
+        return (_api$medias3 = api.medias).find.apply(_api$medias3, arguments);
+      },
+      create: function create() {
+        var _api$medias4;
+        return (_api$medias4 = api.medias).create.apply(_api$medias4, arguments);
+      },
+      update: function update() {
+        var _api$medias5;
+        return (_api$medias5 = api.medias).update.apply(_api$medias5, arguments);
+      },
+      "delete": function _delete() {
+        var _api$medias6;
+        return (_api$medias6 = api.medias)["delete"].apply(_api$medias6, arguments);
+      },
+      trash: function trash() {
+        var _api$medias7;
+        return (_api$medias7 = api.medias)["delete"].apply(_api$medias7, arguments);
       }
-    }
-  }, [isPicker, setMetadataMedia, onClickMedia, selectedMedia]);
-  var onClickRemoveItem = React.useCallback(function () {
-    setMetadataMedia(null);
-    if (onClickMedia !== null) {
-      onClickMedia(null);
-    }
-  }, [isPicker, setMetadataMedia, onClickMedia]);
-  var onClickItemInfo = React.useCallback(function (media) {
-    return setMetadataMedia(media);
-  }, [setMetadataMedia]);
-  var onMetadataClickClose = React.useCallback(function () {
-    setMetadataMedia(null);
-  }, [setMetadataMedia]);
-  var onMetadataClickDelete = React.useCallback(function () {
-    var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var _ref5 = selectedMedia || {},
-      _ref5$id = _ref5.id,
-      selectedId = _ref5$id === void 0 ? null : _ref5$id;
-    if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
-      onClickMedia(null);
-    }
-    setMetadataMedia(null);
-  }, [setMetadataMedia, onClickMedia, selectedMedia]);
-  var onMetadataChange = React.useCallback(function (val) {
-    setMetadataMedia(val);
-    var _ref6 = val || {},
-      _ref6$id = _ref6.id,
-      mediaId = _ref6$id === void 0 ? null : _ref6$id;
-    var _ref7 = selectedMedia || {},
-      _ref7$id = _ref7.id,
-      selectedId = _ref7$id === void 0 ? null : _ref7$id;
-    if (onChange !== null && mediaId === selectedId) {
-      onChange(val);
-    }
-  }, [setMetadataMedia, selectedMedia, onChange]);
-  React.useEffect(function () {
-    if (metadataMedia !== null) {
-      window.scrollTo(0, 0);
-    }
-  }, [metadataMedia]);
-
-  // Navigation
-  var onClickBack = React.useCallback(function () {
-    setMetadataMedia(null);
-  }, [setMetadataMedia, setDefaultItems, setQueryValue]);
+    };
+  }, [api]);
 
   // Upload modal
-  var _useState11 = React.useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    uploading = _useState12[0],
-    setUploading = _useState12[1];
-  var _useState13 = React.useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    uploadModalOpened = _useState14[0],
-    setUploadModalOpened = _useState14[1];
-  var _useMediaCreate = data.useMediaCreate(),
-    createMedia = _useMediaCreate.create;
-  var onClickAdd = React.useCallback(function () {
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    addedMedias = _useState2[0],
+    setAddedMedias = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2);
+    _useState4[0];
+    var setUploading = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    uploadModalOpened = _useState6[0],
+    setUploadModalOpened = _useState6[1];
+  React.useCallback(function () {
     return setUploadModalOpened(true);
   }, [setUploadModalOpened]);
+  var _useMediaCreate = data.useMediaCreate(),
+    createMedia = _useMediaCreate.create;
   var onUploadCompleted = React.useCallback(function (newMedias) {
+    console.log('newMedias', newMedias);
     setUploading(true);
     Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
       setUploading(false);
@@ -1852,67 +548,75 @@ function MediaGallery(_ref) {
   var onUploadRequestClose = React.useCallback(function () {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
+  var partialFilters = filters$1 || filters() || [];
+  var finalFilters = React.useMemo(function () {
+    return partialFilters.map(function (filter) {
+      var _ref2 = filter || {},
+        _ref2$id = _ref2.id,
+        id = _ref2$id === void 0 ? null : _ref2$id;
+      if (id === 'sources') {
+        return filter;
+      }
+      // if (id === 'tags' && tags !== null) {
+      //     return { ...filter, options: tags };
+      // }
+      return filter;
+    }).concat();
+  }, [partialFilters]);
+  var _useState7 = React.useState(source !== null ? {
+      source: source
+    } : null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    query = _useState8[0],
+    setQuery = _useState8[1];
+  var finalQuery = React.useMemo(function () {
+    setQuery(_objectSpread(_objectSpread({}, query || null), source !== null ? {
+      source: source
+    } : null));
+  }, [source, setQuery]);
+  var finalValue = React.useMemo(function () {
+    if (addedMedias === null || addedMedias.length === 0) {
+      return value;
+    }
+    console.log('finalValue', addedMedias);
+    var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(isArray(value) ? value || [] : [value]));
+    return allMedias.length > 0 ? allMedias : null;
+  }, [value, addedMedias]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, styles.metadataOpened, metadataMedia !== null), className, className)])
-  }, /*#__PURE__*/React.createElement(Navbar, {
-    types: isArray(type) ? type : [type],
-    filters: filtersValue,
-    media: metadataMedia !== null ? metadataMedia : null,
-    selectedMedia: selectedMedia,
-    onFiltersChange: onFiltersChange,
-    onClickAdd: onClickAdd,
-    onClickItem: onClickItem,
-    onClickItemInfo: onClickItemInfo,
-    onClickBack: onClickBack,
-    onClickClear: onClearMedia,
-    withoutTitle: withoutTitle,
-    withoutSource: withoutSource,
-    withoutType: withoutType,
-    storyId: storyId,
-    authors: authors,
-    tags: tags,
-    loading: loading || uploading,
-    className: navbarClassName
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.gallery
-  }, medias !== null && !uploading ? /*#__PURE__*/React.createElement(Gallery, {
-    items: medias,
-    selectedItem: selectedMedia,
-    selectedFirst: true,
-    withInfoButton: isPicker,
-    isSmall: isSmall,
-    onClickItem: onClickItem,
-    onClickItemInfo: onClickItemInfo,
-    onClickRemoveItem: onClickRemoveItem
-  }) : null, !allLoaded ? /*#__PURE__*/React.createElement("div", {
-    className: "w-100 mb-2"
-  }, loading || uploading ? /*#__PURE__*/React.createElement(components.Spinner, {
-    className: styles.loading
-  }) : null, !loading && !uploading ? /*#__PURE__*/React.createElement(components.Button, {
-    className: "d-block mx-auto",
-    theme: "secondary",
-    outline: true,
-    onClick: loadNextPage
-  }, intl.formatMessage({
-    id: "ur6G0U",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Load more"
-    }]
-  })) : null) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles.mediaMetadata
-  }, /*#__PURE__*/React.createElement(MediaMetadata, {
-    media: metadataMedia,
-    tags: tags,
-    onChange: onMetadataChange,
-    onClickClose: onMetadataClickClose
-    // onClickSave={onMetadataClickSave}
-    ,
-    onClickDelete: onMetadataClickDelete
-  }))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
-    type: type === 'video' ? videoTypes : type,
+    className: classNames([styles.container, _defineProperty({}, className, className)])
+  }, isPicker ? /*#__PURE__*/React.createElement(medias.MediasPickerContainer, {
+    className: styles.browser,
+    api: mediasApi,
+    value: finalValue,
+    theme: "dark",
+    types: types,
+    query: finalQuery,
+    multiple: multiple,
+    items: initialMedias,
+    filters: finalFilters,
+    fields: fields,
+    columns: columns,
+    onChange: onChange,
+    buttons: buttons,
+    buttonsClassName: "ms-xl-auto",
+    withStickySelection: true
+  }) : /*#__PURE__*/React.createElement(medias.MediasBrowserContainer, {
+    className: styles.browser,
+    api: mediasApi,
+    value: finalValue,
+    theme: "dark",
+    types: types,
+    query: finalQuery,
+    multiple: multiple,
+    items: initialMedias,
+    filters: finalFilters,
+    fields: fields,
+    columns: columns,
+    buttons: buttons,
+    buttonsClassName: "ms-xl-auto",
+    withStickySelection: true
+  }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(components.UploadModal, {
+    types: types,
     opened: uploadModalOpened,
     onUploaded: onUploadCompleted,
     onRequestClose: onUploadRequestClose