@micromag/media-gallery 0.2.394 → 0.2.398

package/es/index.js

@@ -2,458 +2,525 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { PropTypes } from '@micromag/core';
+import { Card, Button, Media, Spinner, UploadModal } from '@micromag/core/components';
+import { useFieldComponent, useStory } from '@micromag/core/contexts';
+import { useMediaUpdate, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
 import classNames from 'classnames';
-import { useMediasRecentSearches, useMediaTags, useMediaUpdate, useMedias, useMediaCreate } from '@micromag/data';
-import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { Button, Card, Spinner, UploadModal } from '@micromag/core/components';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch, faTimes, faChevronLeft, faPlus, faInfoCircle, faTimesCircle, faPlayCircle, faHeadphonesAlt } from '@fortawesome/free-solid-svg-icons';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import PropTypes$1 from 'prop-types';
+import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { useResizeObserver } from '@micromag/core/hooks';
-import { useStory, useFieldComponent } from '@micromag/core/contexts';
+import { faInfoCircle, faTimesCircle, faPlayCircle, faHeadphonesAlt, faSearch, faTimes, faPlus, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import uniqBy from 'lodash/uniqBy';
 import prettyBytes from 'pretty-bytes';
+import { FormattedMessage, useIntl } from 'react-intl';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+
+var styles$8 = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
+
+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$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"};
+var styles$7 = {"container":"micromag-media-gallery-items-gallery-item-container","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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
 
 var propTypes$a = {
-  value: PropTypes.string,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes$1.label,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    active: PropTypes.bool
-  })),
-  onChange: PropTypes.func,
-  className: PropTypes.string
+  item: PropTypes.media,
+  width: PropTypes$1.number,
+  selected: PropTypes$1.bool,
+  withInfoButton: PropTypes$1.bool,
+  className: PropTypes$1.string,
+  onClick: PropTypes$1.func,
+  onClickInfo: PropTypes$1.func
 };
 var defaultProps$a = {
-  value: null,
-  items: null,
-  onChange: null,
-  className: null
+  item: null,
+  width: 0,
+  selected: false,
+  withInfoButton: false,
+  className: null,
+  onClick: null,
+  onClickInfo: null
 };
 
-var DropdownSection = function DropdownSection(_ref) {
-  var value = _ref.value,
-      items = _ref.items,
-      onChange = _ref.onChange,
-      className = _ref.className;
+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;
+  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;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+  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)));
+  }
 
-  var currentItem = items.find(function (i) {
-    return i.value === value;
-  });
-  var onOpen = useCallback(function () {
-    setOpen(!open);
-  }, [open, setOpen]);
-  var onBlur = useCallback(function () {
-    // Work around the event call order
-    setTimeout(function () {
-      setOpen(false);
-    }, 300);
-  }, [setOpen]);
-  var onItemClick = 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(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(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,
+  return /*#__PURE__*/React.createElement(Card, {
+    image: /*#__PURE__*/React.createElement("button", {
       type: "button",
-      key: "drop-".concat(itemValue),
-      onClick: onItemClick,
-      "data-value": itemValue
-    }, label);
-  }))) : null;
+      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$7.imageButton]),
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(['card-img-top', styles$7.image]),
+      style: {
+        backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
+      }
+    })),
+    beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
+      className: styles$7.infoButton,
+      onClick: onClickInfo,
+      withoutStyle: true
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faInfoCircle,
+      className: styles$7.icon
+    })) : null, selected ? /*#__PURE__*/React.createElement("div", {
+      className: classNames(['text-danger', styles$7.closeIcon])
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faTimesCircle,
+      className: styles$7.icon
+    })) : null),
+    footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: styles$7.icon,
+      icon: faPlayCircle
+    }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: styles$7.icon,
+      icon: faHeadphonesAlt
+    }) : null, /*#__PURE__*/React.createElement("div", {
+      className: classNames(['text-truncate', styles$7.label])
+    }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
+      className: "text-muted ml-1"
+    }, size) : null)),
+    theme: selected ? 'primary' : null,
+    className: classNames([styles$7.container, _defineProperty({
+      'border-primary': selected
+    }, className, className !== null)]),
+    footerClassName: classNames(['p-2', styles$7.footer]),
+    onClickFooter: onClick
+  });
 };
 
-DropdownSection.propTypes = propTypes$a;
-DropdownSection.defaultProps = defaultProps$a;
+GalleryItem.propTypes = propTypes$a;
+GalleryItem.defaultProps = defaultProps$a;
+
+var styles$6 = {};
 
 var propTypes$9 = {
-  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
+  items: PropTypes.medias,
+  selectedItem: PropTypes.media,
+  withInfoButton: PropTypes$1.bool,
+  isSmall: PropTypes$1.bool,
+  selectedFirst: PropTypes$1.bool,
+  className: PropTypes$1.string,
+  onClickItem: PropTypes$1.func,
+  onClickItemInfo: PropTypes$1.func
 };
 var defaultProps$9 = {
-  tags: null,
-  parent: null,
-  onChange: null,
-  className: null
+  items: null,
+  selectedItem: null,
+  withInfoButton: false,
+  isSmall: false,
+  selectedFirst: false,
+  className: null,
+  onClickItem: null,
+  onClickItemInfo: null
 };
 
-var TagSection = function TagSection(_ref) {
-  var tags = _ref.tags,
-      parent = _ref.parent,
-      onChange = _ref.onChange,
-      className = _ref.className;
-  var onItemChange = useCallback(function (e) {
-    var val = e.target.dataset.value || null;
-    onChange(val, parent);
-  }, [onChange, parent]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['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(['btn', 'btn-sm', 'mb-1', 'mr-1', 'btn-dark', {
-      'btn-primary': active === true // 'btn-outline-light': active === false,
+var Gallery = 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;
 
-    }]);
-    return /*#__PURE__*/React.createElement("button", {
-      className: itemClassNames,
-      type: "button",
-      key: "tag-".concat(value),
-      onClick: onItemChange,
-      "data-value": value
-    }, label);
-  }) : null);
+  var _useResizeObserver = useResizeObserver(),
+      ref = _useResizeObserver.ref,
+      contentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref2 = contentRect || {},
+      width = _ref2.width;
+
+  var finalItems = useMemo(function () {
+    if (selectedFirst && selectedItem !== null && typeof selectedItem.id !== 'undefined') {
+      return [selectedItem].concat(_toConsumableArray(items.filter(function (_ref3) {
+        var id = _ref3.id;
+        return id !== selectedItem.id;
+      })));
+    }
+
+    return items;
+  }, [selectedFirst, selectedItem, items]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$6.container, 'p-2', _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, {
+      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,
+      withInfoButton: withInfoButton
+    }));
+  })));
 };
 
-TagSection.propTypes = propTypes$9;
-TagSection.defaultProps = defaultProps$9;
+Gallery.propTypes = propTypes$9;
+Gallery.defaultProps = defaultProps$9;
 
-var styles$7 = {"container":"micromag-media-gallery-forms-search-filters-container","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 styles$5 = {"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"};
 
 var propTypes$8 = {
-  filters: PropTypes.object,
-  // eslint-disable-line
-  sections: PropTypes.arrayOf(PropTypes.object),
-  onChange: PropTypes.func,
-  className: PropTypes.string
+  media: PropTypes.media,
+  tags: PropTypes.tags,
+  className: PropTypes$1.string
 };
 var defaultProps$8 = {
-  filters: null,
-  sections: [],
-  onChange: null,
+  media: null,
+  tags: [],
   className: null
 };
 
-var SearchFilters = function SearchFilters(_ref) {
-  var filters = _ref.filters,
-      sections = _ref.sections,
-      onChange = _ref.onChange,
+var MediaMetadata = function MediaMetadata(_ref) {
+  var media = _ref.media,
+      allTags = _ref.tags,
       className = _ref.className;
-  var getActive = 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 = useMemo(function () {
-    return sections.map(function (section) {
-      return _objectSpread(_objectSpread({}, section), {}, {
-        items: getActive(section.items, filters[section.value])
-      });
-    });
-  }, [getActive, sections, filters]);
-  var onSectionChange = 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]));
-      }
-    }
-  }, [filters, onChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
-  }, activeSections.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
-  }, 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$7.section, 'py-2'])
-    }, /*#__PURE__*/React.createElement("p", {
-      className: classNames([styles$7.title, 'm-0'])
-    }, label), /*#__PURE__*/React.createElement(TagSection, {
-      className: classNames([styles$7.tags]),
-      tags: items,
-      parent: value,
-      onChange: onSectionChange
-    })) : null;
-  })) : null);
-};
-
-SearchFilters.propTypes = propTypes$8;
-SearchFilters.defaultProps = defaultProps$8;
-
-var propTypes$7 = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onClickIcon: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$7 = {
-  value: null,
-  onChange: null,
-  onFocus: null,
-  onBlur: null,
-  onClickIcon: null,
-  className: null
-};
-
-var Search = function Search(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      onClickIcon = _ref.onClickIcon,
-      className = _ref.className;
-  var intl = useIntl();
-  var onSearchChange = useCallback(function (e) {
-    var newValue = e.currentTarget.value.length > 0 ? e.currentTarget.value : null;
-
-    if (onChange !== null) {
-      onChange(newValue);
-    }
-  }, [onChange]);
-  useCallback(function () {
-    if (onChange !== null) {
-      onChange('');
-    }
-  }, [onChange]);
-  var onClickSearchIcon = useCallback(function () {
-    if (onClickIcon !== null) {
-      onClickIcon();
-    }
-  }, [onClickIcon]);
-  return /*#__PURE__*/React.createElement("form", {
-    method: "post",
-    className: classNames(['w-100', _defineProperty({}, className, className !== null)]),
-    onSubmit: function onSubmit(e) {
-      return e.preventDefault();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "input-group w-100"
-  }, /*#__PURE__*/React.createElement("span", {
-    type: "span",
-    className: "input-group-prepend"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "input-group-text reset-button",
-    onClick: onClickSearchIcon
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faSearch
-  }))), /*#__PURE__*/React.createElement("input", {
-    className: classNames(['form-control', {
-      'bg-light': !!value,
-      'text-dark': value
-    }]),
-    type: "text",
-    value: value || '',
-    placeholder: intl.formatMessage({
-      "id": "gprXiG",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Search..."
-      }]
-    }),
-    onChange: onSearchChange,
-    onFocus: onFocus,
-    onBlur: onBlur
-  }), null));
-};
 
-Search.propTypes = propTypes$7;
-Search.defaultProps = defaultProps$7;
+  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 styles$6 = {"container":"micromag-media-gallery-buttons-close-container"};
+  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 _excluded = ["className"];
-var propTypes$6 = {
-  className: PropTypes.string
-};
-var defaultProps$6 = {
-  className: null
-};
+  var _useMediaUpdate = useMediaUpdate(),
+      update = _useMediaUpdate.update;
 
-var CloseButton = function CloseButton(_ref) {
-  var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
+  var getOptionLabel = useCallback(function (_ref4) {
+    var name = _ref4.name;
+    return name;
+  }, []);
+  var getOptionValue = useCallback(function (_ref5) {
+    var name = _ref5.name;
+    return name;
+  }, []);
+  var getNewOptionData = useCallback(function (inputValue) {
+    return {
+      name: inputValue
+    };
+  }, []);
+  var finalTags = useMemo(function () {
+    return allTags !== null ? uniqBy(mediaTags.concat(allTags), function (_ref6) {
+      var id = _ref6.id;
+      return id;
+    }) : mediaTags;
+  }, [mediaTags, allTags]);
 
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)]),
-    withoutStyle: true,
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faTimes,
-      className: styles$6.icon
-    }),
-    iconPosition: "right"
-  }, props));
-};
+  var _useState = useState(mediaName),
+      _useState2 = _slicedToArray(_useState, 2),
+      name = _useState2[0],
+      setName = _useState2[1];
 
-CloseButton.propTypes = propTypes$6;
-CloseButton.defaultProps = defaultProps$6;
+  var _useState3 = useState(mediaDescription),
+      _useState4 = _slicedToArray(_useState3, 2),
+      description = _useState4[0],
+      setDescription = _useState4[1];
 
-var styles$5 = {"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 _useState5 = useState(mediaTags.map(getOptionValue)),
+      _useState6 = _slicedToArray(_useState5, 2),
+      tags = _useState6[0],
+      setTags = _useState6[1];
 
-var propTypes$5 = {
-  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.object),
-  className: PropTypes.string
-};
-var defaultProps$5 = {
-  filters: null,
-  onChange: null,
-  onReset: null,
-  sections: [],
-  className: null
-};
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      changed = _useState8[0],
+      setChanged = _useState8[1];
 
-var ActiveFilters = function ActiveFilters(_ref) {
-  var filters = _ref.filters,
-      onChange = _ref.onChange,
-      onReset = _ref.onReset,
-      sections = _ref.sections,
-      className = _ref.className;
-  var handleReset = useCallback(function () {
-    if (onReset !== null) {
-      onReset();
-    }
-  }, [onReset]);
-  var removeFilter = useCallback(function (key, activeValue) {
-    var newFilterValue = filters[key].filter(function (it) {
-      return it !== activeValue;
+  var onTagChange = useCallback(function (val) {
+    setTags(val);
+    setChanged(true);
+  }, [tags, setTags, setChanged]);
+  var onNameChange = useCallback(function (val) {
+    setName(val);
+    setChanged(true);
+  }, [tags, setName, setChanged]);
+  var onDescriptionChange = useCallback(function (val) {
+    setDescription(val);
+    setChanged(true);
+  }, [tags, setDescription, setChanged]);
+  var onSave = useCallback(function () {
+    return update(mediaId, {
+      name: name,
+      tags: tags,
+      description: description
+    }).then(function () {
+      setChanged(false);
     });
-    var newValue = newFilterValue.length > 0 ? newFilterValue : null;
-
-    if (onChange !== null) {
-      onChange(key, newValue);
+  }, [mediaId, name, tags, description, metadata, update]);
+  useEffect(function () {
+    if (media !== null) {
+      setTags(mediaTags);
+      setName(mediaName);
+      setDescription(mediaDescription);
+    } else {
+      setTags([]);
+      setName(null);
+      setDescription(null);
     }
-  }, [onChange, filters]);
-  var hasValue = Object.keys(filters).reduce(function (oneHasValue, key) {
-    return oneHasValue || filters[key] !== null;
-  }, false);
+
+    setChanged(false);
+  }, [media, setTags, setName, setDescription, setChanged]);
+  var TextField = useFieldComponent('text');
+  var TokensField = useFieldComponent('tokens');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$5.container, _defineProperty({}, className, className)])
-  }, hasValue ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.heading
+    className: classNames([styles$5.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.title
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "t2cFdl",
-    defaultMessage: [{
+    className: classNames(['position-relative', _defineProperty({
+      'bg-light': type === 'audio',
+      'bg-black': type === 'image'
+    }, styles$5.video, type === 'video')])
+  }, type === 'video' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("video", {
+    className: styles$5.player,
+    controls: true,
+    src: url
+  })) : null, type === 'audio' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles$5.audio
+  }, /*#__PURE__*/React.createElement("audio", {
+    className: styles$5.player,
+    controls: true,
+    src: url
+  }))) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
+    src: thumbnail,
+    className: styles$5.image,
+    alt: filename
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: "p-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tags mb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "kBz8vF",
+    defaultMessage: [{
       "type": 0,
-      "value": "Active filters"
+      "value": "Name"
     }]
-  })), /*#__PURE__*/React.createElement(CloseButton, {
-    className: styles$5.resetButton,
-    onClick: handleReset
-  }, /*#__PURE__*/React.createElement("u", null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "/T/UDH",
+  })), /*#__PURE__*/React.createElement(TextField, {
+    value: name,
+    onChange: onNameChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/React.createElement("h6", {
+    className: "mb-0"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "YJZtWR",
     defaultMessage: [{
       "type": 0,
-      "value": "Remove all"
+      "value": "Description"
     }]
-  })))) : 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(Button, {
-        className: styles$5.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(FontAwesomeIcon, {
-          icon: faTimes
-        }),
-        iconPosition: "right",
-        onClick: function onClick() {
-          return removeFilter(key, activeValue);
-        }
-      });
-    }) : null;
-  }) : null);
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "mb-1"
+  }, /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "EDFyUp",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Alternative text (accessibility)"
+    }]
+  }))), /*#__PURE__*/React.createElement(TextField, {
+    value: description,
+    onChange: onDescriptionChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(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(Button, {
+    theme: "primary",
+    onClick: onSave
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "qIw1nW",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Save"
+    }]
+  })) : null), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(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-muted"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "OkNUmk",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Type"
+    }]
+  })), /*#__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-muted"
+  }, /*#__PURE__*/React.createElement(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-muted"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "eoW0tZ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Duration"
+    }]
+  })), /*#__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-muted"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "mv37oK",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Dimension"
+    }]
+  })), /*#__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-muted"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "liyV7Y",
+    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-muted"
+  }, /*#__PURE__*/React.createElement(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-muted"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "sUR1xV",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Author"
+    }]
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "col"
+  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null)));
 };
 
-ActiveFilters.propTypes = propTypes$5;
-ActiveFilters.defaultProps = defaultProps$5;
+MediaMetadata.propTypes = propTypes$8;
+MediaMetadata.defaultProps = defaultProps$8;
 
-var useSearchSections = function useSearchSections(_ref) {
+var useSearchFilters = function useSearchFilters(_ref) {
   var _ref$recent = _ref.recent,
       recent = _ref$recent === void 0 ? [] : _ref$recent,
       _ref$tags = _ref.tags,
@@ -463,26 +530,28 @@ var useSearchSections = function useSearchSections(_ref) {
       _ref$sources = _ref.sources,
       upstreamSources = _ref$sources === void 0 ? [] : _ref$sources,
       _ref$withType = _ref.withType,
-      withType = _ref$withType === void 0 ? false : _ref$withType;
-  var sources = [{
+      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(FormattedMessage, {
-      id: "xAzv6g",
+      id: "eiaIIB",
       defaultMessage: [{
         "type": 0,
-        "value": "All sources"
+        "value": "This Micromag"
       }]
     }),
-    value: 'all'
-  }, {
+    value: storyId
+  }] : []), [{
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "eiaIIB",
+      id: "xAzv6g",
       defaultMessage: [{
         "type": 0,
-        "value": "This Micromag"
+        "value": "All sources"
       }]
     }),
-    value: 'micromag'
-  }].concat(_toConsumableArray(team.length > 0 ? [{
+    value: 'all'
+  }], _toConsumableArray(team !== null && team.length > 0 ? [{
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "/62oe4",
       defaultMessage: [{
@@ -601,769 +670,735 @@ var useSearchSections = function useSearchSections(_ref) {
   };
 };
 
-var filtersValue = PropTypes.shape({
-  search: PropTypes.string
+var filtersValue = PropTypes$1.shape({
+  search: PropTypes$1.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']))
+PropTypes$1.shape({
+  types: PropTypes$1.arrayOf(PropTypes$1.string),
+  tags: PropTypes$1.arrayOf(PropTypes$1.string),
+  users: PropTypes$1.arrayOf(PropTypes$1.string),
+  usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
 });
 
-var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner"};
+var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
 
-var propTypes$4 = {
-  filters: filtersValue,
-  media: PropTypes$1.media,
-  withoutTitle: PropTypes.bool,
-  withoutSource: PropTypes.bool,
-  withoutType: PropTypes.bool,
-  onClickAdd: PropTypes.func,
-  onClickCancel: PropTypes.func,
-  onFocusSearch: PropTypes.func,
-  onFiltersChange: PropTypes.func,
-  onClickBack: PropTypes.func,
-  className: PropTypes.string
+var styles$3 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label"};
+
+var propTypes$7 = {
+  value: PropTypes$1.string,
+  items: PropTypes$1.arrayOf(PropTypes$1.shape({
+    label: PropTypes.label,
+    value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    active: PropTypes$1.bool
+  })),
+  onChange: PropTypes$1.func,
+  className: PropTypes$1.string
 };
-var defaultProps$4 = {
-  filters: null,
-  media: null,
-  withoutTitle: false,
-  withoutSource: false,
-  withoutType: true,
-  onClickAdd: null,
-  onClickCancel: null,
-  onFocusSearch: null,
-  onFiltersChange: null,
-  onClickBack: null,
+var defaultProps$7 = {
+  value: null,
+  items: null,
+  onChange: null,
   className: null
 };
 
-var Navbar = function Navbar(_ref) {
-  var filters = _ref.filters,
-      media = _ref.media,
-      withoutTitle = _ref.withoutTitle,
-      withoutSource = _ref.withoutSource,
-      withoutType = _ref.withoutType,
-      className = _ref.className,
-      onClickAdd = _ref.onClickAdd;
-      _ref.onClickCancel;
-      var onFocusSearch = _ref.onFocusSearch,
-      onFiltersChange = _ref.onFiltersChange,
-      onClickBack = _ref.onClickBack;
-  var throttle = useRef(null);
+var DropdownSection = function DropdownSection(_ref) {
+  var value = _ref.value,
+      items = _ref.items,
+      onChange = _ref.onChange,
+      className = _ref.className;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
-      setOpen = _useState2[1]; // TODO: get data from api for real testing
+      setOpen = _useState2[1];
 
-
-  var _useMediasRecentSearc = useMediasRecentSearches(),
-      getSearches = _useMediasRecentSearc.getSearches,
-      createSearch = _useMediasRecentSearc.createSearch;
-
-  var recent = useMemo(function () {
-    return getSearches();
-  }, [getSearches]);
-
-  var _useMediaTags = useMediaTags(),
-      _useMediaTags$tags = _useMediaTags.tags,
-      tags = _useMediaTags$tags === void 0 ? [] : _useMediaTags$tags; // const { team } = useOrganisationTeam();
-
-
-  var team = [];
-
-  var _useSearchFilters = useSearchSections({
-    recent: recent.map(function (val) {
-      return {
-        value: val,
-        label: val
-      };
-    }),
-    tags: tags !== null ? tags.map(function (t) {
-      return {
-        value: t.name,
-        label: t.name
-      };
-    }) : [],
-    team: team,
-    withType: !withoutType
-  }),
-      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 = 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 = useCallback(function () {
-    onFiltersChange({
-      type: filters.type || null,
-      search: filters.search || null,
-      source: filters.source || null
-    });
-    setOpen(false);
-  }, [filters, onFiltersChange]);
-  var onSearchChange = 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 = useCallback(function (value) {
-    onFilterChange('source', value);
-  }, [onFilterChange]);
-  var onSearchFocus = useCallback(function () {
-    if (onFocusSearch !== null) {
-      onFocusSearch();
-    }
-
-    setOpen(true);
+  var currentItem = items.find(function (i) {
+    return i.value === value;
   });
-  var onClear = useCallback(function () {
-    setOpen(false);
-  }, [setOpen]);
-  var onToggleMenu = useCallback(function () {
+  var onOpen = useCallback(function () {
     setOpen(!open);
   }, [open, setOpen]);
-  var title = !withoutTitle ? /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "JV5hRr",
+  var onBlur = useCallback(function () {
+    // Work around the event call order
+    setTimeout(function () {
+      setOpen(false);
+    }, 300);
+  }, [setOpen]);
+  var onItemClick = 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$3.container, 'dropdown', _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$3.label
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "9ZdD+Q",
     defaultMessage: [{
       "type": 0,
-      "value": "Media gallery"
+      "value": "Library for"
     }]
-  }) : null;
-  return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$4.container, 'navbar', _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.inner
-  }, !withoutSource && media === null ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 flex-nowrap justify-content-center"
-  }, /*#__PURE__*/React.createElement(DropdownSection, {
-    items: sources,
-    value: filters.source || null,
-    onChange: onSourceChange
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: "w-100 d-flex flex-nowrap justify-content-between"
-  }, media !== null ? /*#__PURE__*/React.createElement("form", {
-    className: classNames(['form-inline', 'mr-2'])
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "secondary",
-    outline: true,
-    size: "sm",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faChevronLeft
-    }),
-    onClick: onClickBack
-  })) : null, /*#__PURE__*/React.createElement("strong", {
-    className: "navbar-text mr-auto w-100 d-flex align-items-center justify-content-between"
-  }, media !== null ? media.name : title, media === null ? /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faPlus
-    }),
-    onClick: onClickAdd
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "Tt4jN1",
+  })), /*#__PURE__*/React.createElement("button", {
+    className: classNames([styles$3.dropdownToggle, 'dropdown-toggle', {
+      open: open === true
+    }]),
+    type: "button",
+    onClick: onOpen,
+    onBlur: onBlur
+  }, (currentItem ? currentItem.label : null) || /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "15GBmG",
     defaultMessage: [{
       "type": 0,
-      "value": "Add"
+      "value": "All"
     }]
-  })) : 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(Search, {
-    value: searchValue,
-    onChange: onSearchChange,
-    onFocus: onSearchFocus,
-    onClickIcon: onToggleMenu,
-    className: classNames(['form-inline'])
-  }), /*#__PURE__*/React.createElement("form", {
-    className: classNames(['form-inline'])
-  }, open ? /*#__PURE__*/React.createElement(Button, {
-    className: "ml-2",
-    theme: "primary",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faTimes
-    }),
-    onClick: onClear
-  }) : null)), open ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
-  }, /*#__PURE__*/React.createElement(SearchFilters, {
-    filters: filters,
-    sections: sections,
-    onChange: onFilterChange
-  })) : null) : null, hasFilter && !open && media === null ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
-  }, /*#__PURE__*/React.createElement(ActiveFilters, {
-    filters: filters,
-    sections: sections,
-    onChange: onFilterChange,
-    onReset: onFiltersReset
-  })) : null));
-};
-
-Navbar.propTypes = propTypes$4;
-Navbar.defaultProps = defaultProps$4;
-
-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));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$3.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 styles$3 = {"container":"micromag-media-gallery-items-gallery-item-container","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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
+DropdownSection.propTypes = propTypes$7;
+DropdownSection.defaultProps = defaultProps$7;
 
-var propTypes$3 = {
-  item: PropTypes$1.media,
-  width: PropTypes.number,
-  selected: PropTypes.bool,
-  withInfoButton: PropTypes.bool,
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-  onClickInfo: PropTypes.func
+var propTypes$6 = {
+  value: PropTypes$1.string,
+  onChange: PropTypes$1.func,
+  onFocus: PropTypes$1.func,
+  onBlur: PropTypes$1.func,
+  onClickIcon: PropTypes$1.func,
+  className: PropTypes$1.string
 };
-var defaultProps$3 = {
-  item: null,
-  width: 0,
-  selected: false,
-  withInfoButton: false,
-  className: null,
-  onClick: null,
-  onClickInfo: null
+var defaultProps$6 = {
+  value: null,
+  onChange: null,
+  onFocus: null,
+  onBlur: null,
+  onClickIcon: null,
+  className: 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;
-  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)));
-  }
+var Search = function Search(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      onClickIcon = _ref.onClickIcon,
+      className = _ref.className;
+  var intl = useIntl();
+  var onSearchChange = useCallback(function (e) {
+    var newValue = e.currentTarget.value.length > 0 ? e.currentTarget.value : null;
 
-  return /*#__PURE__*/React.createElement(Card, {
-    image: /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$3.imageButton]),
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['card-img-top', styles$3.image]),
-      style: {
-        backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
-      }
-    })),
-    beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
-      className: styles$3.infoButton,
-      onClick: onClickInfo,
-      withoutStyle: true
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faInfoCircle,
-      className: styles$3.icon
-    })) : null, selected ? /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-primary', styles$3.closeIcon])
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faTimesCircle,
-      className: styles$3.icon
-    })) : null),
-    footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$3.icon,
-      icon: faPlayCircle
-    }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$3.icon,
-      icon: faHeadphonesAlt
-    }) : null, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-truncate', styles$3.label])
-    }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
-      className: "text-muted ml-1"
-    }, size) : null)),
-    theme: selected ? 'primary' : null,
-    className: classNames([styles$3.container, _defineProperty({
-      'border-primary': selected
-    }, className, className !== null)]),
-    footerClassName: classNames(['p-2', styles$3.footer]),
-    onClickFooter: onClick
-  });
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+  }, [onChange]);
+  useCallback(function () {
+    if (onChange !== null) {
+      onChange('');
+    }
+  }, [onChange]);
+  var onClickSearchIcon = useCallback(function () {
+    if (onClickIcon !== null) {
+      onClickIcon();
+    }
+  }, [onClickIcon]);
+  return /*#__PURE__*/React.createElement("form", {
+    method: "post",
+    className: classNames(['w-100', _defineProperty({}, className, className !== null)]),
+    onSubmit: function onSubmit(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "input-group w-100"
+  }, /*#__PURE__*/React.createElement("span", {
+    type: "span",
+    className: "input-group-prepend"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "input-group-text reset-button",
+    onClick: onClickSearchIcon
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSearch
+  }))), /*#__PURE__*/React.createElement("input", {
+    className: classNames(['form-control', {
+      'bg-light': !!value,
+      'text-dark': value
+    }]),
+    type: "text",
+    value: value || '',
+    placeholder: intl.formatMessage({
+      "id": "gprXiG",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Search..."
+      }]
+    }),
+    onChange: onSearchChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }), null));
 };
 
-GalleryItem.propTypes = propTypes$3;
-GalleryItem.defaultProps = defaultProps$3;
-
-var styles$2 = {};
+Search.propTypes = propTypes$6;
+Search.defaultProps = defaultProps$6;
 
-var propTypes$2 = {
-  items: PropTypes$1.medias,
-  selectedItem: PropTypes$1.media,
-  withInfoButton: PropTypes.bool,
-  isSmall: PropTypes.bool,
-  selectedFirst: PropTypes.bool,
-  className: PropTypes.string,
-  onClickItem: PropTypes.func,
-  onClickItemInfo: PropTypes.func
+var propTypes$5 = {
+  tags: PropTypes$1.arrayOf(PropTypes$1.shape({
+    label: PropTypes$1.string,
+    value: PropTypes$1.oneOf([PropTypes$1.string, PropTypes$1.node]),
+    active: PropTypes$1.bool
+  })),
+  parent: PropTypes$1.string,
+  onChange: PropTypes$1.func,
+  className: PropTypes$1.string
 };
-var defaultProps$2 = {
-  items: null,
-  selectedItem: null,
-  withInfoButton: false,
-  isSmall: false,
-  selectedFirst: false,
-  className: null,
-  onClickItem: null,
-  onClickItemInfo: null
+var defaultProps$5 = {
+  tags: null,
+  parent: null,
+  onChange: null,
+  className: null
 };
 
-var Gallery = 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;
-
-  var _useResizeObserver = useResizeObserver(),
-      ref = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref2 = contentRect || {},
-      width = _ref2.width;
-
-  var finalItems = useMemo(function () {
-    if (selectedFirst && selectedItem !== null && typeof selectedItem.id !== 'undefined') {
-      return [selectedItem].concat(_toConsumableArray(items.filter(function (_ref3) {
-        var id = _ref3.id;
-        return id !== selectedItem.id;
-      })));
-    }
-
-    return items;
-  }, [selectedFirst, selectedItem, items]);
+var TagSection = function TagSection(_ref) {
+  var tags = _ref.tags,
+      parent = _ref.parent,
+      onChange = _ref.onChange,
+      className = _ref.className;
+  var onItemChange = useCallback(function (e) {
+    var val = e.target.dataset.value || null;
+    onChange(val, parent);
+  }, [onChange, parent]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, 'p-2', _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, {
-      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,
-      withInfoButton: withInfoButton
-    }));
-  })));
+    className: classNames(['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(['btn', 'btn-sm', 'mb-1', 'mr-1', 'btn-dark', {
+      '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);
 };
 
-Gallery.propTypes = propTypes$2;
-Gallery.defaultProps = defaultProps$2;
+TagSection.propTypes = propTypes$5;
+TagSection.defaultProps = defaultProps$5;
 
-var styles$1 = {"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"};
+var styles$2 = {"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$1 = {
-  media: PropTypes$1.media,
-  className: PropTypes.string
+var propTypes$4 = {
+  filters: PropTypes$1.object,
+  // eslint-disable-line
+  sections: PropTypes$1.arrayOf(PropTypes$1.object),
+  onChange: PropTypes$1.func,
+  onClose: PropTypes$1.func,
+  className: PropTypes$1.string
 };
-var defaultProps$1 = {
-  media: null,
+var defaultProps$4 = {
+  filters: null,
+  sections: [],
+  onChange: null,
+  onClose: null,
   className: null
 };
 
-var MediaMetadata = function MediaMetadata(_ref) {
-  var media = _ref.media,
+var SearchFilters = function SearchFilters(_ref) {
+  var filters = _ref.filters,
+      sections = _ref.sections,
+      onChange = _ref.onChange,
+      onClose = _ref.onClose,
       className = _ref.className;
+  var intl = useIntl();
+  var getActive = 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 = useMemo(function () {
+    return sections.map(function (section) {
+      return _objectSpread(_objectSpread({}, section), {}, {
+        items: getActive(section.items, filters[section.value])
+      });
+    });
+  }, [getActive, sections, filters]);
+  var onSectionChange = useCallback(function (data, section) {
+    var val = filters[section] ? filters[section] : [];
+    var found = !!val.find(function (f) {
+      return f === data;
+    });
 
-  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; // const api = useApi();
-
-
-  var story = useStory();
-
-  var _ref4 = story || {},
-      _ref4$id = _ref4.id,
-      documentId = _ref4$id === void 0 ? null : _ref4$id;
+    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]));
+      }
+    }
+  }, [filters, onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$2.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
+  }, activeSections.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames([styles$2.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faTimes
+    }),
+    onClick: onClose,
+    title: intl.formatMessage({
+      "id": "yCXMzz",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Close"
+      }]
+    })
+  }), 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$2.section, 'py-2'])
+    }, /*#__PURE__*/React.createElement("p", {
+      className: classNames([styles$2.title, 'm-0'])
+    }, label), /*#__PURE__*/React.createElement(TagSection, {
+      className: classNames([styles$2.tags]),
+      tags: items,
+      parent: value,
+      onChange: onSectionChange
+    })) : null;
+  })) : null);
+};
 
-  var _useMediaTags = useMediaTags(),
-      usedTags = _useMediaTags.tags; // const { authors: usedAuthors } = useMediaAuthors();
+SearchFilters.propTypes = propTypes$4;
+SearchFilters.defaultProps = defaultProps$4;
 
+var styles$1 = {"container":"micromag-media-gallery-buttons-close-container"};
 
-  var _useMediaUpdate = useMediaUpdate(),
-      update = _useMediaUpdate.update;
+var _excluded = ["className"];
+var propTypes$3 = {
+  className: PropTypes$1.string
+};
+var defaultProps$3 = {
+  className: null
+};
 
-  console.log(story, documentId); // eslint-disable-line
-  // const loadTags = useCallback(
-  //     (input) =>
-  //         api.medias.getTags(
-  //             {
-  //                 search: input,
-  //             },
-  //             5,
-  //         ),
-  //     [api],
-  // );
-
-  var getOptionLabel = useCallback(function (_ref5) {
-    var name = _ref5.name;
-    return name;
-  }, []);
-  var getOptionValue = useCallback(function (_ref6) {
-    var name = _ref6.name;
-    return name;
-  }, []);
-  var getNewOptionData = useCallback(function (inputValue) {
-    return {
-      name: inputValue
-    };
-  }, []);
-  var allTags = useMemo(function () {
-    return usedTags !== null ? uniqBy(mediaTags.concat(usedTags), function (_ref7) {
-      var id = _ref7.id;
-      return id;
-    }) : mediaTags;
-  }, [mediaTags, usedTags]);
+var CloseButton = function CloseButton(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(mediaName),
-      _useState2 = _slicedToArray(_useState, 2),
-      name = _useState2[0],
-      setName = _useState2[1];
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
+    withoutStyle: true,
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faTimes,
+      className: styles$1.icon
+    }),
+    iconPosition: "right"
+  }, props));
+};
 
-  var _useState3 = useState(mediaDescription),
-      _useState4 = _slicedToArray(_useState3, 2),
-      description = _useState4[0],
-      setDescription = _useState4[1];
+CloseButton.propTypes = propTypes$3;
+CloseButton.defaultProps = defaultProps$3;
 
-  var _useState5 = useState(mediaTags.map(getOptionValue)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      tags = _useState6[0],
-      setTags = _useState6[1];
+var styles = {"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 _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      changed = _useState8[0],
-      setChanged = _useState8[1];
+var propTypes$2 = {
+  filters: PropTypes$1.shape({
+    types: PropTypes$1.arrayOf(PropTypes$1.string),
+    tags: PropTypes$1.arrayOf(PropTypes$1.string),
+    users: PropTypes$1.arrayOf(PropTypes$1.string),
+    usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
+  }),
+  onChange: PropTypes$1.func,
+  onReset: PropTypes$1.func,
+  sections: PropTypes$1.arrayOf(PropTypes$1.object),
+  className: PropTypes$1.string
+};
+var defaultProps$2 = {
+  filters: null,
+  onChange: null,
+  onReset: null,
+  sections: [],
+  className: null
+};
 
-  var onTagChange = useCallback(function (val) {
-    setTags(val);
-    setChanged(true);
-  }, [tags, setTags, setChanged]);
-  var onNameChange = useCallback(function (val) {
-    setName(val);
-    setChanged(true);
-  }, [tags, setName, setChanged]);
-  var onDescriptionChange = useCallback(function (val) {
-    setDescription(val);
-    setChanged(true);
-  }, [tags, setDescription, setChanged]);
-  var onSave = useCallback(function () {
-    return update(mediaId, {
-      name: name,
-      tags: tags,
-      description: description
-    }).then(function () {
-      setChanged(false);
-    });
-  }, [mediaId, name, tags, description, metadata, update]);
-  useEffect(function () {
-    if (media !== null) {
-      setTags(mediaTags);
-      setName(mediaName);
-      setDescription(mediaDescription);
-    } else {
-      setTags([]);
-      setName(null);
-      setDescription(null);
+var ActiveFilters = function ActiveFilters(_ref) {
+  var filters = _ref.filters,
+      onChange = _ref.onChange,
+      onReset = _ref.onReset,
+      sections = _ref.sections,
+      className = _ref.className;
+  var handleReset = useCallback(function () {
+    if (onReset !== null) {
+      onReset();
     }
+  }, [onReset]);
+  var removeFilter = useCallback(function (key, activeValue) {
+    var newFilterValue = filters[key].filter(function (it) {
+      return it !== activeValue;
+    });
+    var newValue = newFilterValue.length > 0 ? newFilterValue : null;
 
-    setChanged(false);
-  }, [media, setTags, setName, setDescription, setChanged]);
-  var TextField = useFieldComponent('text');
-  var TokensField = useFieldComponent('tokens');
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty({}, className, className)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['position-relative', _defineProperty({
-      'bg-light': type === 'audio',
-      'bg-black': type === 'image'
-    }, styles$1.video, type === 'video')])
-  }, type === 'video' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("video", {
-    className: styles$1.player,
-    controls: true,
-    src: url
-  })) : null, type === 'audio' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.audio
-  }, /*#__PURE__*/React.createElement("audio", {
-    className: styles$1.player,
-    controls: true,
-    src: url
-  }))) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
-    src: thumbnail,
-    className: styles$1.image,
-    alt: filename
-  }) : null), /*#__PURE__*/React.createElement("div", {
-    className: "p-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "tags mb-4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
-  }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "kBz8vF",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Name"
-    }]
-  })), /*#__PURE__*/React.createElement(TextField, {
-    value: name,
-    onChange: onNameChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
-  }, /*#__PURE__*/React.createElement("h6", {
-    className: "mb-0"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "YJZtWR",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Description"
-    }]
-  })), /*#__PURE__*/React.createElement("p", {
-    className: "mb-1"
-  }, /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "EDFyUp",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Alternative text (accessibility)"
-    }]
-  }))), /*#__PURE__*/React.createElement(TextField, {
-    value: description,
-    onChange: onDescriptionChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
-  }, /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "4fHMVj",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Tags"
-    }]
-  })), /*#__PURE__*/React.createElement(TokensField, {
-    value: tags,
-    options: allTags // loadOptions={loadTags}
-    ,
-    getOptionLabel: getOptionLabel,
-    getOptionValue: getOptionValue,
-    getNewOptionData: getNewOptionData,
-    onChange: onTagChange
-  })), changed ? /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    onClick: onSave
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "qIw1nW",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Save"
-    }]
-  })) : null), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(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-muted"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "OkNUmk",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Type"
-    }]
-  })), /*#__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-muted"
-  }, /*#__PURE__*/React.createElement(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-muted"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "eoW0tZ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Duration"
-    }]
-  })), /*#__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"
+    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.container, _defineProperty({}, className, className)])
+  }, hasValue ? /*#__PURE__*/React.createElement("div", {
+    className: styles.heading
   }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-muted"
+    className: styles.title
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "mv37oK",
+    id: "t2cFdl",
     defaultMessage: [{
       "type": 0,
-      "value": "Dimension"
+      "value": "Active filters"
     }]
-  })), /*#__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-muted"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "liyV7Y",
+  })), /*#__PURE__*/React.createElement(CloseButton, {
+    className: styles.resetButton,
+    onClick: handleReset
+  }, /*#__PURE__*/React.createElement("u", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "/T/UDH",
     defaultMessage: [{
       "type": 0,
-      "value": "Size"
+      "value": "Remove all"
     }]
-  })), /*#__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"
+  })))) : 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(Button, {
+        className: styles.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(FontAwesomeIcon, {
+          icon: faTimes
+        }),
+        iconPosition: "right",
+        onClick: function onClick() {
+          return removeFilter(key, activeValue);
+        }
+      });
+    }) : null;
+  }) : null);
+};
+
+ActiveFilters.propTypes = propTypes$2;
+ActiveFilters.defaultProps = defaultProps$2;
+
+var propTypes$1 = {
+  filters: filtersValue,
+  media: PropTypes.media,
+  selectedMedia: PropTypes.media,
+  storyId: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
+  tags: PropTypes.tags,
+  authors: PropTypes.authors,
+  withoutSource: PropTypes$1.bool,
+  withoutType: PropTypes$1.bool,
+  onClickAdd: PropTypes$1.func,
+  onClickItem: PropTypes$1.func,
+  onClickItemInfo: PropTypes$1.func,
+  // onClickCancel: PropTypes.func, // TODO: still needed?
+  onFocusSearch: PropTypes$1.func,
+  onFiltersChange: PropTypes$1.func,
+  onClickBack: PropTypes$1.func,
+  className: PropTypes$1.string
+};
+var defaultProps$1 = {
+  filters: null,
+  media: null,
+  selectedMedia: null,
+  storyId: null,
+  tags: [],
+  authors: [],
+  withoutSource: false,
+  withoutType: true,
+  onClickAdd: null,
+  onClickItem: null,
+  onClickItemInfo: null,
+  // onClickCancel: null,
+  onFocusSearch: null,
+  onFiltersChange: null,
+  onClickBack: null,
+  className: null
+};
+
+var Navbar = function Navbar(_ref) {
+  var filters = _ref.filters,
+      media = _ref.media,
+      selectedMedia = _ref.selectedMedia,
+      storyId = _ref.storyId,
+      tags = _ref.tags,
+      authors = _ref.authors,
+      withoutSource = _ref.withoutSource,
+      withoutType = _ref.withoutType,
+      className = _ref.className,
+      onClickAdd = _ref.onClickAdd,
+      onClickItem = _ref.onClickItem,
+      onClickItemInfo = _ref.onClickItemInfo,
+      onFocusSearch = _ref.onFocusSearch,
+      onFiltersChange = _ref.onFiltersChange,
+      onClickBack = _ref.onClickBack;
+  var intl = useIntl();
+  var throttle = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1]; // TODO: get data from api for real testing
+
+
+  var _useMediasRecentSearc = useMediasRecentSearches(),
+      getSearches = _useMediasRecentSearc.getSearches,
+      createSearch = _useMediasRecentSearc.createSearch;
+
+  var recent = useMemo(function () {
+    return getSearches();
+  }, [getSearches]);
+
+  var _useSearchFilters = useSearchFilters({
+    recent: recent.map(function (val) {
+      return {
+        value: val,
+        label: val
+      };
+    }),
+    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 = 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 = useCallback(function () {
+    onFiltersChange({
+      type: filters.type || null,
+      search: filters.search || null,
+      source: filters.source || null
+    });
+    setOpen(false);
+  }, [filters, onFiltersChange]);
+  var onSearchChange = 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 = useCallback(function (value) {
+    onFilterChange('source', value);
+  }, [onFilterChange]);
+  var onSearchFocus = useCallback(function () {
+    if (onFocusSearch !== null) {
+      onFocusSearch();
+    }
+
+    setOpen(true);
+  });
+  var onCloseFilters = useCallback(function () {
+    setOpen(false);
+  }, [setOpen]);
+  var onToggleMenu = useCallback(function () {
+    setOpen(!open);
+  }, [open, setOpen]);
+  return /*#__PURE__*/React.createElement("nav", {
+    className: classNames([styles$4.container, 'navbar', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: "col-4 text-muted"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "7uyslu",
+    className: styles$4.inner
+  }, media === null ? /*#__PURE__*/React.createElement("strong", {
+    className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
+  }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
+    className: "d-flex px-0 py-0 align-items-center",
+    onClick: function onClick() {
+      return onClickItemInfo(selectedMedia);
+    }
+  }, /*#__PURE__*/React.createElement(Media, {
+    className: styles$4.mediaPreview,
+    thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ml-2"
+  }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "fVqgfl",
     defaultMessage: [{
       "type": 0,
-      "value": "Description"
+      "value": "[no title]"
     }]
-  })), /*#__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-muted"
+  }))) : /*#__PURE__*/React.createElement("span", {
+    className: "pl-2"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "sUR1xV",
+    id: "VspZp9",
     defaultMessage: [{
       "type": 0,
-      "value": "Author"
+      "value": "Upload an image"
     }]
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null)));
+  })), selectedMedia === null ? /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faPlus
+    }),
+    onClick: onClickAdd,
+    title: intl.formatMessage({
+      "id": "Tt4jN1",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Add"
+      }]
+    })
+  }) : /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faTimes
+    }),
+    onClick: function onClick() {
+      return onClickItem(selectedMedia);
+    },
+    title: intl.formatMessage({
+      "id": "UG3SXh",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Remove"
+      }]
+    })
+  })) : null, !withoutSource && media === null ? /*#__PURE__*/React.createElement("div", {
+    className: "py-2 d-flex w-100 flex-nowrap"
+  }, /*#__PURE__*/React.createElement(DropdownSection, {
+    items: sources,
+    value: filters.source || null,
+    onChange: onSourceChange
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: "w-100 d-flex flex-nowrap justify-content-between"
+  }, media !== null ? /*#__PURE__*/React.createElement("form", {
+    className: classNames(['form-inline', 'mr-2'])
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "secondary",
+    outline: true,
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faChevronLeft
+    }),
+    onClick: onClickBack
+  })) : null, /*#__PURE__*/React.createElement("strong", {
+    className: "navbar-text mr-auto w-100"
+  }, media !== null ? media.name : 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(Search, {
+    value: searchValue,
+    onChange: onSearchChange,
+    onFocus: onSearchFocus,
+    onClickIcon: onToggleMenu,
+    className: classNames(['form-inline'])
+  })), open ? /*#__PURE__*/React.createElement("div", {
+    className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
+  }, /*#__PURE__*/React.createElement(SearchFilters, {
+    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));
 };
 
-MediaMetadata.propTypes = propTypes$1;
-MediaMetadata.defaultProps = defaultProps$1;
-
-var styles = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
+Navbar.propTypes = propTypes$1;
+Navbar.defaultProps = defaultProps$1;
 
 var propTypes = {
-  type: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  source: PropTypes.string,
-  isPicker: PropTypes.bool,
-  isSmall: PropTypes.bool,
-  withoutTitle: PropTypes.bool,
-  withoutSource: PropTypes.bool,
-  withoutType: PropTypes.bool,
-  medias: PropTypes$1.medias,
-  selectedMedia: PropTypes$1.media,
-  className: PropTypes.string,
-  navbarClassName: PropTypes.string,
-  onClickMedia: PropTypes.func
+  type: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.array]),
+  source: PropTypes$1.string,
+  isPicker: PropTypes$1.bool,
+  isSmall: PropTypes$1.bool,
+  withoutTitle: PropTypes$1.bool,
+  withoutSource: PropTypes$1.bool,
+  withoutType: PropTypes$1.bool,
+  medias: PropTypes.medias,
+  selectedMedia: PropTypes.media,
+  className: PropTypes$1.string,
+  navbarClassName: PropTypes$1.string,
+  onClickMedia: PropTypes$1.func
 };
 var defaultProps = {
   type: null,
@@ -1381,7 +1416,7 @@ var defaultProps = {
 };
 
 var MediaGallery = function MediaGallery(_ref) {
-  var _ref2;
+  var _ref3;
 
   var type = _ref.type,
       source = _ref.source,
@@ -1413,6 +1448,18 @@ var MediaGallery = function MediaGallery(_ref) {
       filtersValue = _useState4[0],
       setFiltersValue = _useState4[1];
 
+  var story = useStory();
+
+  var _ref2 = story || {},
+      _ref2$id = _ref2.id,
+      storyId = _ref2$id === void 0 ? null : _ref2$id;
+
+  var _useMediaTags = useMediaTags(),
+      tags = _useMediaTags.tags;
+
+  var _useMediaAuthors = useMediaAuthors(),
+      authors = _useMediaAuthors.authors;
+
   var onFiltersChange = useCallback(function (value) {
     if (throttle.current !== null) {
       clearTimeout(throttle.current);
@@ -1499,22 +1546,29 @@ var MediaGallery = function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref2, className, className), _ref2)])
+    className: classNames([styles$8.container, (_ref3 = {}, _defineProperty(_ref3, styles$8.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
   }, /*#__PURE__*/React.createElement(Navbar, {
     filters: filtersValue,
     media: metadataMedia !== null ? metadataMedia : null,
+    selectedMedia: selectedMedia,
     onFiltersChange: onFiltersChange,
     onClickAdd: onClickAdd,
+    onClickItem: onClickItem,
+    onClickItemInfo: onClickItemInfo,
     onClickBack: onClickBack,
     onClickCancel: onClickCancel,
     withoutTitle: withoutTitle // withoutSource={withoutSource}
     ,
+    withoutSource: false,
     withoutType: withoutType,
+    storyId: storyId,
+    authors: authors,
+    tags: tags,
     className: navbarClassName
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles.content
+    className: styles$8.content
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.gallery
+    className: styles$8.gallery
   }, medias !== null && !uploading ? /*#__PURE__*/React.createElement(Gallery, {
     items: medias,
     selectedItem: selectedMedia,
@@ -1524,11 +1578,12 @@ var MediaGallery = function MediaGallery(_ref) {
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo
   }) : null, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
-    className: styles.loading
+    className: styles$8.loading
   }) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles.mediaMetadata
+    className: styles$8.mediaMetadata
   }, /*#__PURE__*/React.createElement(MediaMetadata, {
     media: metadataMedia,
+    tags: tags,
     onClickClose: onMetadataClickClose
   }))), /*#__PURE__*/React.createElement(UploadModal, {
     type: type === 'video' ? ['video', 'image/gif'] : type,