@micromag/media-gallery 0.3.311 → 0.3.320

package/es/index.js

@@ -3,6 +3,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
+import isArray from 'lodash/isArray';
 import PropTypes$1 from 'prop-types';
 import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
@@ -25,8 +26,6 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 
-var styles$9 = {"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;
@@ -39,7 +38,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-var styles$8 = {"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 styles$9 = {"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","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
 
 var propTypes$a = {
   item: PropTypes.media,
@@ -59,76 +58,72 @@ var defaultProps$a = {
   onClick: null,
   onClickInfo: 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;
+    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;
+    _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(Card, {
     image: /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$8.imageButton]),
+      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$9.imageButton]),
       onClick: onClick
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['card-img-top', styles$8.image]),
+      className: classNames(['card-img-top', styles$9.image]),
       style: {
         backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
       }
     })),
     beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
-      className: styles$8.infoButton,
+      className: styles$9.infoButton,
       onClick: onClickInfo,
       withoutStyle: true
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faInfoCircle,
-      className: styles$8.icon
+      className: styles$9.icon
     })) : null, selected ? /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-danger', styles$8.closeIcon])
+      className: classNames(['text-danger', styles$9.closeIcon])
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimesCircle,
-      className: styles$8.icon
+      className: styles$9.icon
     })) : null),
     footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$8.icon,
+      className: styles$9.icon,
       icon: faPlayCircle
     }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$8.icon,
+      className: styles$9.icon,
       icon: faHeadphonesAlt
     }) : null, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-truncate', styles$8.label])
+      className: classNames(['text-truncate', styles$9.label])
     }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
       className: "text-muted ms-1"
     }, size) : null)),
     theme: selected ? 'primary' : null,
-    className: classNames([styles$8.container, _defineProperty({
+    className: classNames([styles$9.container, _defineProperty({
       'border-primary': selected
     }, className, className !== null)]),
-    footerClassName: classNames(['p-1', styles$8.footer]),
+    footerClassName: classNames(['p-1', styles$9.footer]),
     onClickFooter: onClick
   });
 };
-
 GalleryItem.propTypes = propTypes$a;
 GalleryItem.defaultProps = defaultProps$a;
 
-var styles$7 = {};
+var styles$8 = {};
 
 var propTypes$9 = {
   items: PropTypes.medias,
@@ -150,21 +145,18 @@ var defaultProps$9 = {
   onClickItem: null,
   onClickItemInfo: 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;
-
+    selectedItem = _ref.selectedItem,
+    withInfoButton = _ref.withInfoButton,
+    isSmall = _ref.isSmall,
+    selectedFirst = _ref.selectedFirst,
+    className = _ref.className,
+    onClickItem = _ref.onClickItem,
+    onClickItemInfo = _ref.onClickItemInfo;
   var _useDimensionObserver = useDimensionObserver(),
-      ref = _useDimensionObserver.ref,
-      width = _useDimensionObserver.width;
-
+    ref = _useDimensionObserver.ref,
+    width = _useDimensionObserver.width;
   var finalItems = useMemo(function () {
     if (selectedFirst && selectedItem !== null && typeof selectedItem.id !== 'undefined') {
       return [selectedItem].concat(_toConsumableArray(items.filter(function (_ref2) {
@@ -172,11 +164,10 @@ function Gallery(_ref) {
         return id !== selectedItem.id;
       })));
     }
-
     return items;
   }, [selectedFirst, selectedItem, items]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, 'p-2', _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$8.container, 'p-2', _defineProperty({}, className, className !== null)]),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -200,11 +191,10 @@ function Gallery(_ref) {
     }));
   })));
 }
-
 Gallery.propTypes = propTypes$9;
 Gallery.defaultProps = defaultProps$9;
 
-var styles$6 = {"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$7 = {"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 = {
   media: PropTypes.media,
@@ -216,45 +206,40 @@ var defaultProps$8 = {
   tags: [],
   className: null
 };
-
 function MediaMetadata(_ref) {
   var media = _ref.media,
-      allTags = _ref.tags,
-      className = _ref.className;
-
+    allTags = _ref.tags,
+    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;
-
+    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;
-
+    _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 = useMediaUpdate(),
-      update = _useMediaUpdate.update;
-
+    update = _useMediaUpdate.update;
   var getOptionLabel = useCallback(function (_ref4) {
     var name = _ref4.name;
     return name;
@@ -274,27 +259,22 @@ function MediaMetadata(_ref) {
       return id;
     }) : mediaTags;
   }, [mediaTags, allTags]);
-
   var _useState = useState(mediaName),
-      _useState2 = _slicedToArray(_useState, 2),
-      name = _useState2[0],
-      setName = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
   var _useState3 = useState(mediaDescription),
-      _useState4 = _slicedToArray(_useState3, 2),
-      description = _useState4[0],
-      setDescription = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    description = _useState4[0],
+    setDescription = _useState4[1];
   var _useState5 = useState(mediaTags.map(getOptionValue)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      tags = _useState6[0],
-      setTags = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    tags = _useState6[0],
+    setTags = _useState6[1];
   var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      changed = _useState8[0],
-      setChanged = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    changed = _useState8[0],
+    setChanged = _useState8[1];
   var onTagChange = useCallback(function (val) {
     setTags(val);
     setChanged(true);
@@ -326,31 +306,30 @@ function MediaMetadata(_ref) {
       setName(null);
       setDescription(null);
     }
-
     setChanged(false);
   }, [media, setTags, setName, setDescription, setChanged]);
   var TextField = useFieldComponent('text');
   var TokensField = useFieldComponent('tokens');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, _defineProperty({}, className, className)])
+    className: classNames([styles$7.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({
       'bg-light': type === 'audio',
       'bg-black': type === 'image'
-    }, styles$6.video, type === 'video')])
+    }, styles$7.video, type === 'video')])
   }, type === 'video' ? /*#__PURE__*/React.createElement("video", {
-    className: styles$6.player,
+    className: styles$7.player,
     controls: true,
     src: url
   }) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
-    className: styles$6.audio
+    className: styles$7.audio
   }, /*#__PURE__*/React.createElement("audio", {
-    className: styles$6.player,
+    className: styles$7.player,
     controls: true,
     src: url
   })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
-    className: styles$6.image,
+    className: styles$7.image,
     alt: filename
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: "p-2"
@@ -398,7 +377,8 @@ function MediaMetadata(_ref) {
     }]
   })), /*#__PURE__*/React.createElement(TokensField, {
     value: tags,
-    options: finalTags // loadOptions={loadTags}
+    options: finalTags
+    // loadOptions={loadTags}
     ,
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
@@ -521,23 +501,22 @@ function MediaMetadata(_ref) {
     className: "col"
   }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null)));
 }
-
 MediaMetadata.propTypes = propTypes$8;
 MediaMetadata.defaultProps = defaultProps$8;
 
 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;
+    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(FormattedMessage, {
       id: "eiaIIB",
@@ -675,6 +654,7 @@ var useSearchFilters = function useSearchFilters(_ref) {
   };
 };
 
+// eslint-disable-next-line import/prefer-default-export
 var filtersValue = PropTypes$1.shape({
   search: PropTypes$1.string
 });
@@ -685,9 +665,7 @@ PropTypes$1.shape({
   usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
 });
 
-var styles$5 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
-
-var styles$4 = {"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 styles$6 = {"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$7 = {
   value: PropTypes$1.string,
@@ -705,18 +683,15 @@ var defaultProps$7 = {
   onChange: null,
   className: null
 };
-
 function DropdownSection(_ref) {
   var value = _ref.value,
-      items = _ref.items,
-      onChange = _ref.onChange,
-      className = _ref.className;
-
+    items = _ref.items,
+    onChange = _ref.onChange,
+    className = _ref.className;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
   var currentItem = items.find(function (i) {
     return i.value === value;
   });
@@ -735,9 +710,9 @@ function DropdownSection(_ref) {
     onChange(val);
   }, [setOpen]);
   return items !== null && items.length > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, 'dropdown', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$6.container, 'dropdown', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$4.label
+    className: styles$6.label
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "9ZdD+Q",
     defaultMessage: [{
@@ -745,7 +720,7 @@ function DropdownSection(_ref) {
       "value": "Library for"
     }]
   })), /*#__PURE__*/React.createElement("button", {
-    className: classNames([styles$4.dropdownToggle, 'dropdown-toggle', {
+    className: classNames([styles$6.dropdownToggle, 'dropdown-toggle', {
       open: open === true
     }]),
     type: "button",
@@ -758,12 +733,12 @@ function DropdownSection(_ref) {
       "value": "All"
     }]
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.dropdown, 'dropdown-menu', {
+    className: classNames([styles$6.dropdown, 'dropdown-menu', {
       show: open === true
     }])
   }, items.map(function (_ref3) {
     var label = _ref3.label,
-        itemValue = _ref3.value;
+      itemValue = _ref3.value;
     var itemClassNames = classNames(['dropdown-item', {
       active: itemValue === value
     }]);
@@ -776,10 +751,11 @@ function DropdownSection(_ref) {
     }, label);
   }))) : null;
 }
-
 DropdownSection.propTypes = propTypes$7;
 DropdownSection.defaultProps = defaultProps$7;
 
+// import { PropTypes as MicromagPropTypes } from '@micromag/core';
+
 var propTypes$6 = {
   value: PropTypes$1.string,
   onChange: PropTypes$1.func,
@@ -796,18 +772,16 @@ var defaultProps$6 = {
   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;
+    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);
     }
@@ -824,7 +798,7 @@ var Search = function Search(_ref) {
   }, [onClickIcon]);
   return /*#__PURE__*/React.createElement("form", {
     method: "post",
-    className: classNames(['w-100', _defineProperty({}, className, className !== null)]),
+    className: classNames(['w-100', 'border', 'border-dark', 'rounded', _defineProperty({}, className, className !== null)]),
     onSubmit: function onSubmit(e) {
       return e.preventDefault();
     }
@@ -844,10 +818,10 @@ var Search = function Search(_ref) {
     type: "text",
     value: value || '',
     placeholder: intl.formatMessage({
-      id: "gprXiG",
+      id: "FFBsfJ",
       defaultMessage: [{
         "type": 0,
-        "value": "Search..."
+        "value": "Search medias..."
       }]
     }),
     onChange: onSearchChange,
@@ -855,13 +829,12 @@ var Search = function Search(_ref) {
     onBlur: onBlur
   }), null));
 };
-
 Search.propTypes = propTypes$6;
 Search.defaultProps = defaultProps$6;
 
-var styles$3 = {"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 styles$5 = {"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 styles$2 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
+var styles$4 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
 
 var propTypes$5 = {
   tags: PropTypes$1.arrayOf(PropTypes$1.shape({
@@ -879,26 +852,26 @@ var defaultProps$5 = {
   onChange: null,
   className: null
 };
-
 var TagSection = function TagSection(_ref) {
   var tags = _ref.tags,
-      parent = _ref.parent,
-      onChange = _ref.onChange,
-      className = _ref.className;
+    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, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$4.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$2.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
-      'btn-primary': active === true // 'btn-outline-light': active === false,
-
+      value = _ref3.value,
+      active = _ref3.active;
+    var itemClassNames = classNames([styles$4.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
+      'btn-primary': active === true
+      // 'btn-outline-light': active === false,
     }]);
+
     return /*#__PURE__*/React.createElement("button", {
       className: itemClassNames,
       type: "button",
@@ -908,7 +881,6 @@ var TagSection = function TagSection(_ref) {
     }, label);
   }) : null);
 };
-
 TagSection.propTypes = propTypes$5;
 TagSection.defaultProps = defaultProps$5;
 
@@ -927,13 +899,12 @@ var defaultProps$4 = {
   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;
+    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) {
@@ -956,7 +927,6 @@ var SearchFilters = function SearchFilters(_ref) {
     var found = !!val.find(function (f) {
       return f === data;
     });
-
     if (found) {
       onChange(section, val.filter(function (f) {
         return f !== data;
@@ -972,11 +942,11 @@ var SearchFilters = function SearchFilters(_ref) {
     }
   }, [filters, onChange]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$5.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$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    className: classNames([styles$5.closeBtn, 'py-1', 'px-1', 'text-dark']),
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
     }),
@@ -990,28 +960,27 @@ var SearchFilters = function SearchFilters(_ref) {
     })
   }), activeSections.map(function (_ref3) {
     var value = _ref3.value,
-        label = _ref3.label,
-        items = _ref3.items;
+      label = _ref3.label,
+      items = _ref3.items;
     return items.length > 0 ? /*#__PURE__*/React.createElement("div", {
       key: "filter-".concat(value),
-      className: classNames([styles$3.section, 'py-2'])
+      className: classNames([styles$5.section, 'py-2'])
     }, /*#__PURE__*/React.createElement("p", {
-      className: classNames([styles$3.title, 'm-0'])
+      className: classNames([styles$5.title, 'm-0'])
     }, label), /*#__PURE__*/React.createElement(TagSection, {
-      className: classNames([styles$3.tags]),
+      className: classNames([styles$5.tags]),
       tags: items,
       parent: value,
       onChange: onSectionChange
     })) : null;
   })) : null);
 };
-
 SearchFilters.propTypes = propTypes$4;
 SearchFilters.defaultProps = defaultProps$4;
 
-var styles$1 = {"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 styles$3 = {"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 styles = {"container":"micromag-media-gallery-buttons-close-container"};
+var styles$2 = {"container":"micromag-media-gallery-buttons-close-container"};
 
 var _excluded = ["className"];
 var propTypes$3 = {
@@ -1020,22 +989,19 @@ var propTypes$3 = {
 var defaultProps$3 = {
   className: null
 };
-
 var CloseButton = function CloseButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
     withoutStyle: true,
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes,
-      className: styles.icon
+      className: styles$2.icon
     }),
     iconPosition: "right"
   }, props));
 };
-
 CloseButton.propTypes = propTypes$3;
 CloseButton.defaultProps = defaultProps$3;
 
@@ -1058,13 +1024,12 @@ var defaultProps$2 = {
   sections: [],
   className: null
 };
-
 function ActiveFilters(_ref) {
   var filters = _ref.filters,
-      onChange = _ref.onChange,
-      onReset = _ref.onReset,
-      sections = _ref.sections,
-      className = _ref.className;
+    onChange = _ref.onChange,
+    onReset = _ref.onReset,
+    sections = _ref.sections,
+    className = _ref.className;
   var handleReset = useCallback(function () {
     if (onReset !== null) {
       onReset();
@@ -1075,7 +1040,6 @@ function ActiveFilters(_ref) {
       return it !== activeValue;
     });
     var newValue = newFilterValue.length > 0 ? newFilterValue : null;
-
     if (onChange !== null) {
       onChange(key, newValue);
     }
@@ -1084,11 +1048,11 @@ function ActiveFilters(_ref) {
     return oneHasValue || filters[key] !== null;
   }, false);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$1.container, _defineProperty({}, className, className)])
+    className: classNames(['w-100', styles$3.container, _defineProperty({}, className, className)])
   }, hasValue ? /*#__PURE__*/React.createElement("div", {
-    className: styles$1.heading
+    className: styles$3.heading
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.title
+    className: styles$3.title
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "t2cFdl",
     defaultMessage: [{
@@ -1096,7 +1060,7 @@ function ActiveFilters(_ref) {
       "value": "Active filters"
     }]
   })), /*#__PURE__*/React.createElement(CloseButton, {
-    className: styles$1.resetButton,
+    className: styles$3.resetButton,
     onClick: handleReset
   }, /*#__PURE__*/React.createElement("u", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "/T/UDH",
@@ -1112,13 +1076,11 @@ function ActiveFilters(_ref) {
       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;
-
+        _ref3$label = _ref3.label,
+        label = _ref3$label === void 0 ? '' : _ref3$label;
       return /*#__PURE__*/React.createElement(Button, {
-        className: styles$1.activeTag,
+        className: styles$3.activeTag,
         key: "filter-button-".concat(activeValue),
         type: "submit",
         size: "sm",
@@ -1135,11 +1097,13 @@ function ActiveFilters(_ref) {
     }) : 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","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
+
 var propTypes$1 = {
+  types: PropTypes$1.arrayOf(PropTypes$1.string),
   filters: filtersValue,
   media: PropTypes.media,
   selectedMedia: PropTypes.media,
@@ -1159,6 +1123,7 @@ var propTypes$1 = {
   className: PropTypes$1.string
 };
 var defaultProps$1 = {
+  types: null,
   filters: null,
   media: null,
   selectedMedia: null,
@@ -1176,78 +1141,71 @@ var defaultProps$1 = {
   onClickBack: null,
   className: null
 };
-
 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,
-      onClickClear = _ref.onClickClear,
-      onFocusSearch = _ref.onFocusSearch,
-      onFiltersChange = _ref.onFiltersChange,
-      onClickBack = _ref.onClickBack;
+  var types = _ref.types,
+    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,
+    onClickClear = _ref.onClickClear,
+    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
+    _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;
-
+    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
-      };
+      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
     }),
-    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;
-
+    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 () {
@@ -1262,7 +1220,6 @@ function Navbar(_ref) {
     if (throttle.current !== null) {
       clearTimeout(throttle.current);
     }
-
     throttle.current = setTimeout(function () {
       createSearch(value);
       throttle.current = null;
@@ -1291,37 +1248,87 @@ function Navbar(_ref) {
       onClickItem(null);
     }
   }, [onClickClear, onClickItem]);
+  var uploadMessage = useMemo(function () {
+    var message = /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "3Ap0C1",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Upload a media"
+      }]
+    });
+    if (types !== null) {
+      if (types.indexOf('video') !== -1 && types.indexOf('image') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "KK5teQ",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a visual file"
+          }]
+        });
+      } else if (types.indexOf('video') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "WeD4nB",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a video file"
+          }]
+        });
+      } else if (types.indexOf('image') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "KdAKt7",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload an image file"
+          }]
+        });
+      } else if (types.indexOf('audio') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "6W4St0",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload an audio file"
+          }]
+        });
+      } else if (types.indexOf('subtitle') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "BAfC6s",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a closed captions file"
+          }]
+        });
+      }
+    }
+    return message;
+  }, [types]);
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$5.container, 'navbar', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$1.container, 'navbar', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.inner])
+    className: classNames([styles$1.inner])
   }, media === null ? /*#__PURE__*/React.createElement("div", {
-    className: "list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
+    className: classNames(['list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between', {
+      'border border-dark': selectedMedia !== null
+    }])
   }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles$5.mediaLabel, 'd-flex px-0 py-0 align-items-center']),
+    className: classNames([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
     onClick: function onClick() {
       return onClickItemInfo(selectedMedia);
-    }
+    },
+    theme: "primary",
+    outline: true
   }, /*#__PURE__*/React.createElement(Media, {
-    className: styles$5.mediaPreview,
+    className: styles$1.mediaPreview,
     thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
   }), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$5.mediaLabel, 'd-inline-block', 'text-truncate'])
+    className: classNames([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
   }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "fVqgfl",
     defaultMessage: [{
       "type": 0,
       "value": "[no title]"
     }]
-  }))) : /*#__PURE__*/React.createElement("span", {
-    className: "ps-2"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "VspZp9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Upload an image"
-    }]
-  })), selectedMedia === null ? /*#__PURE__*/React.createElement(Button, {
+  }))) : /*#__PURE__*/React.createElement(Button, {
+    className: "w-100",
     theme: "primary",
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faPlus
@@ -1334,7 +1341,9 @@ function Navbar(_ref) {
         "value": "Add"
       }]
     })
-  }) : /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ps-2"
+  }, uploadMessage)), selectedMedia === null ? null : /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
@@ -1391,10 +1400,11 @@ function Navbar(_ref) {
     onReset: onFiltersReset
   })) : null));
 }
-
 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 videoTypes = ['video', 'image/gif'];
 var propTypes = {
   type: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.array]),
@@ -1426,88 +1436,79 @@ var defaultProps = {
   onClickMedia: null,
   onClearMedia: null
 };
-
 function MediaGallery(_ref) {
   var _ref3;
-
   var type = _ref.type,
-      source = _ref.source,
-      isPicker = _ref.isPicker,
-      isSmall = _ref.isSmall,
-      withoutTitle = _ref.withoutTitle,
-      withoutSource = _ref.withoutSource,
-      withoutType = _ref.withoutType,
-      initialMedias = _ref.medias,
-      selectedMedia = _ref.selectedMedia,
-      className = _ref.className,
-      navbarClassName = _ref.navbarClassName,
-      onClickMedia = _ref.onClickMedia,
-      onClearMedia = _ref.onClearMedia;
+    source = _ref.source,
+    isPicker = _ref.isPicker,
+    isSmall = _ref.isSmall,
+    withoutTitle = _ref.withoutTitle,
+    withoutSource = _ref.withoutSource,
+    withoutType = _ref.withoutType,
+    initialMedias = _ref.medias,
+    selectedMedia = _ref.selectedMedia,
+    className = _ref.className,
+    navbarClassName = _ref.navbarClassName,
+    onClickMedia = _ref.onClickMedia,
+    onClearMedia = _ref.onClearMedia;
   // Base state for filters
   var defaultFilters = {
     type: type,
     source: source
-  }; // Filters
+  };
 
+  // Filters
   var throttle = useRef(null);
-
   var _useState = useState(defaultFilters),
-      _useState2 = _slicedToArray(_useState, 2),
-      queryValue = _useState2[0],
-      setQueryValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    queryValue = _useState2[0],
+    setQueryValue = _useState2[1];
   var _useState3 = useState(defaultFilters),
-      _useState4 = _slicedToArray(_useState3, 2),
-      filtersValue = _useState4[0],
-      setFiltersValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    filtersValue = _useState4[0],
+    setFiltersValue = _useState4[1];
   var story = useStory();
-
   var _ref2 = story || {},
-      _ref2$id = _ref2.id,
-      storyId = _ref2$id === void 0 ? null : _ref2$id;
-
+    _ref2$id = _ref2.id,
+    storyId = _ref2$id === void 0 ? null : _ref2$id;
   var _useMediaTags = useMediaTags(),
-      tags = _useMediaTags.tags;
-
+    tags = _useMediaTags.tags;
   var _useMediaAuthors = useMediaAuthors(),
-      authors = _useMediaAuthors.authors;
-
+    authors = _useMediaAuthors.authors;
   var onFiltersChange = 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]); // Items
+  }, [setFiltersValue, setQueryValue, throttle]);
 
+  // Items
   var _useMedias = useMedias(queryValue, 1, 100, _objectSpread({}, initialMedias !== null ? {
-    items: initialMedias
-  } : null)),
-      loadedMedias = _useMedias.allMedias,
-      _useMedias$loading = _useMedias.loading,
-      loading = _useMedias$loading === void 0 ? false : _useMedias$loading; // Temporary type filter
-
+      items: initialMedias
+    } : null)),
+    loadedMedias = _useMedias.allMedias,
+    _useMedias$loading = _useMedias.loading,
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading;
 
+  // Temporary type filter
   var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      addedMedias = _useState6[0],
-      setAddedMedias = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    addedMedias = _useState6[0],
+    setAddedMedias = _useState6[1];
   var medias = useMemo(function () {
     var allMedias = [].concat(_toConsumableArray(addedMedias), _toConsumableArray(loadedMedias || []));
     return allMedias.length > 0 ? allMedias : null;
-  }, [loadedMedias, addedMedias]); // Medias
+  }, [loadedMedias, addedMedias]);
 
+  // Medias
   var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      metadataMedia = _useState8[0],
-      setMetadataMedia = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    metadataMedia = _useState8[0],
+    setMetadataMedia = _useState8[1];
   var onClickItem = useCallback(function (media) {
     if (!isPicker) {
       setMetadataMedia(media);
@@ -1520,31 +1521,30 @@ function MediaGallery(_ref) {
   }, [setMetadataMedia]);
   var onMetadataClickClose = useCallback(function () {
     return setMetadataMedia(null);
-  }, [setMetadataMedia]); // Navigation
+  }, [setMetadataMedia]);
 
+  // Navigation
   var onClickBack = useCallback(function () {
     return setMetadataMedia(null);
-  }, [setMetadataMedia]); // Reset all filters except source
+  }, [setMetadataMedia]);
 
-  useCallback(function () {
-    return setFiltersValue(_objectSpread(_objectSpread({}, defaultFilters), {}, {
-      source: filtersValue.source || null
-    }));
-  }, [defaultFilters, filtersValue, setFiltersValue]); // Upload modal
+  // Reset all filters except source
+  // const onClickCancel = useCallback(
+  //     () => setFiltersValue({ ...defaultFilters, source: filtersValue.source || null }),
+  //     [defaultFilters, filtersValue, setFiltersValue],
+  // );
 
+  // Upload modal
   var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      uploading = _useState10[0],
-      setUploading = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    uploading = _useState10[0],
+    setUploading = _useState10[1];
   var _useState11 = useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      uploadModalOpened = _useState12[0],
-      setUploadModalOpened = _useState12[1];
-
+    _useState12 = _slicedToArray(_useState11, 2),
+    uploadModalOpened = _useState12[0],
+    setUploadModalOpened = _useState12[1];
   var _useMediaCreate = useMediaCreate(),
-      createMedia = _useMediaCreate.create;
-
+    createMedia = _useMediaCreate.create;
   var onClickAdd = useCallback(function () {
     return setUploadModalOpened(true);
   }, [setUploadModalOpened]);
@@ -1559,8 +1559,9 @@ function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, styles$9.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
+    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
   }, /*#__PURE__*/React.createElement(Navbar, {
+    types: isArray(type) ? type : [type],
     filters: filtersValue,
     media: metadataMedia !== null ? metadataMedia : null,
     selectedMedia: selectedMedia,
@@ -1578,9 +1579,9 @@ function MediaGallery(_ref) {
     tags: tags,
     className: navbarClassName
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$9.content
+    className: styles.content
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.gallery
+    className: styles.gallery
   }, medias !== null && !uploading ? /*#__PURE__*/React.createElement(Gallery, {
     items: medias,
     selectedItem: selectedMedia,
@@ -1590,9 +1591,9 @@ function MediaGallery(_ref) {
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo
   }) : null, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
-    className: styles$9.loading
+    className: styles.loading
   }) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$9.mediaMetadata
+    className: styles.mediaMetadata
   }, /*#__PURE__*/React.createElement(MediaMetadata, {
     media: metadataMedia,
     tags: tags,
@@ -1604,7 +1605,6 @@ function MediaGallery(_ref) {
     onRequestClose: onUploadRequestClose
   }), document.body));
 }
-
 MediaGallery.propTypes = propTypes;
 MediaGallery.defaultProps = defaultProps;