@panneau/medias 3.0.223 → 3.0.224

package/lib/index.js

@@ -1,1633 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var reactIntl = require('react-intl');
-var contexts = require('@panneau/core/contexts');
-var hooks = require('@panneau/core/hooks');
-var Button = require('@panneau/element-button');
-var Form = require('@panneau/element-form');
-var FormStatus = require('@panneau/element-form-status');
-var ImageDisplay = require('@panneau/display-image');
-var MediaPlayer = require('@panneau/element-media-player');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var isArray = require('lodash/isArray');
-var uniqBy = require('lodash/uniqBy');
-var core = require('@panneau/core');
-var Buttons = require('@panneau/element-buttons');
-var Grid = require('@panneau/element-grid');
-var Icon = require('@panneau/element-icon');
-var MediaCard = require('@panneau/element-media-card');
-var Pagination = require('@panneau/element-pagination');
-var Table = require('@panneau/element-table');
-var UploadField = require('@panneau/field-upload');
-var Filters = require('@panneau/filter-filters');
-var data = require('@panneau/data');
-
-/* eslint-disable react/jsx-props-no-spreading */
-var MediasApiContext = /*#__PURE__*/React.createContext(null);
-var useMediasApi = function useMediasApi() {
-  return React.useContext(MediasApiContext);
-};
-var apiPropTypes = PropTypes.shape({
-  get: PropTypes.func.isRequired,
-  getTrashed: PropTypes.func.isRequired,
-  create: PropTypes.func.isRequired,
-  find: PropTypes.func.isRequired,
-  update: PropTypes.func.isRequired,
-  trash: PropTypes.func.isRequired,
-  "delete": PropTypes.func.isRequired
-});
-var propTypes$9 = {
-  api: apiPropTypes,
-  children: PropTypes.node.isRequired
-};
-var defaultProps$9 = {
-  api: null
-};
-function MediasApiProvider(_ref) {
-  var providedApi = _ref.api,
-    children = _ref.children;
-  var previousApi = useMediasApi();
-  var api = React.useMemo(function () {
-    return providedApi || previousApi;
-  }, [providedApi, previousApi]);
-  return /*#__PURE__*/React.createElement(MediasApiContext.Provider, {
-    value: api
-  }, children);
-}
-MediasApiProvider.propTypes = propTypes$9;
-MediasApiProvider.defaultProps = defaultProps$9;
-
-var _excluded$7 = ["items"];
-var useMedias = function useMedias() {
-  var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  var api = useMediasApi();
-  var trashed = React.useMemo(function () {
-    var _ref = opts || {},
-      _ref$trashed = _ref.trashed,
-      trashedOpt = _ref$trashed === void 0 ? false : _ref$trashed;
-    return trashedOpt;
-  }, [opts]);
-  var finalQuery = React.useMemo(function () {
-    return _objectSpread(_objectSpread({}, query), {}, {
-      trashed: trashed
-    });
-  }, [query, trashed]);
-  var getItems = React.useCallback(function () {
-    var requestedPage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    return trashed ? api.getTrashed(query, requestedPage, count) : api.get(query, requestedPage, count);
-  }, [api, query, count, trashed]);
-  var _useItemsStore = data.useItemsStore('medias', _objectSpread({
-      getPage: page !== null ? getItems : null,
-      getItems: page === null ? getItems : null,
-      page: page,
-      count: count,
-      query: finalQuery
-    }, opts)),
-    items = _useItemsStore.items,
-    props = _objectWithoutProperties(_useItemsStore, _excluded$7);
-  return _objectSpread({
-    items: items
-  }, props);
-};
-var useMedias$1 = useMedias;
-
-var _excluded$6 = ["data"];
-var useMedia = function useMedia(id, opts) {
-  var api = useMediasApi();
-  var loader = React.useCallback(function () {
-    return api.find(id);
-  }, [api, id]);
-  var _useData = data.useData(loader, opts),
-    data$1 = _useData.data,
-    request = _objectWithoutProperties(_useData, _excluded$6);
-  return _objectSpread({
-    story: data$1
-  }, request);
-};
-var useMedia$1 = useMedia;
-
-var useMediaCreate = function useMediaCreate() {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    creating = _useState2[0],
-    setCreating = _useState2[1];
-  var api = useMediasApi();
-  var create = React.useCallback(function (data) {
-    setCreating(true);
-    return api.create(data).then(function (response) {
-      setCreating(false);
-      return response;
-    });
-  }, [api, setCreating]);
-  return {
-    create: create,
-    creating: creating
-  };
-};
-var useMediaCreate$1 = useMediaCreate;
-
-var useMediaUpdate = function useMediaUpdate() {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    updating = _useState2[0],
-    setUpdating = _useState2[1];
-  var api = useMediasApi();
-  var update = React.useCallback(function (id, data) {
-    setUpdating(true);
-    return api.update(id, data).then(function (response) {
-      setUpdating(false);
-      return response;
-    });
-  }, [api, setUpdating]);
-  return {
-    update: update,
-    updating: updating
-  };
-};
-var useMediaUpdate$1 = useMediaUpdate;
-
-var useMediaDelete = function useMediaDelete() {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    deleting = _useState2[0],
-    setDeleting = _useState2[1];
-  var api = useMediasApi();
-  var mediaDelete = React.useCallback(function (id, data) {
-    setDeleting(true);
-    return api["delete"](id, data).then(function (response) {
-      setDeleting(false);
-      return response;
-    });
-  }, [api, setDeleting]);
-  return {
-    mediaDelete: mediaDelete,
-    deleting: deleting
-  };
-};
-var useMediaDelete$1 = useMediaDelete;
-
-var useMediaTrash = function useMediaTrash() {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    trashing = _useState2[0],
-    setTrashing = _useState2[1];
-  var api = useMediasApi();
-  var mediaTrash = React.useCallback(function (id, data) {
-    setTrashing(true);
-    return api.trash(id, data).then(function (response) {
-      setTrashing(false);
-      return response;
-    });
-  }, [api, setTrashing]);
-  return {
-    mediaTrash: mediaTrash,
-    trashing: trashing
-  };
-};
-var useMediaTrash$1 = useMediaTrash;
-
-var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
-
-var propTypes$8 = {
-  value: PropTypes.shape({
-    id: PropTypes.string,
-    type: PropTypes.string
-  }),
-  showPlayer: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps$8 = {
-  value: null,
-  showPlayer: true,
-  className: null
-};
-function MediaFrame(_ref) {
-  var value = _ref.value,
-    initialShowPlayer = _ref.showPlayer,
-    className = _ref.className;
-  var _useState = React.useState(initialShowPlayer),
-    _useState2 = _slicedToArray(_useState, 2),
-    showPlayer = _useState2[0],
-    setShowPlayer = _useState2[1];
-  var _ref2 = value || {},
-    _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? null : _ref2$type;
-  var onClick = React.useCallback(function () {
-    setShowPlayer(!showPlayer);
-  }, [showPlayer, setShowPlayer]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.mediaFrame, 'position-relative', 'd-flex', 'flex-grow-1', 'w-100', 'mw-100', _defineProperty({}, className, className != null)])
-  }, showPlayer && type !== 'image' ? /*#__PURE__*/React.createElement(MediaPlayer, {
-    value: value,
-    autoPlay: false,
-    width: "100%"
-  }) : /*#__PURE__*/React.createElement(ImageDisplay, {
-    className: "w-100",
-    value: value,
-    maxWidth: "100%",
-    maxHeight: "100%",
-    onClick: type === 'video' || type === 'audio' ? onClick : null
-  }));
-}
-MediaFrame.propTypes = propTypes$8;
-MediaFrame.defaultProps = defaultProps$8;
-
-var defaultFields = [{
-  name: 'name',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "WX83V9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "File name"
-    }]
-  }),
-  type: 'text',
-  component: 'text'
-}, {
-  name: 'description',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "ygNvmz",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Description"
-    }]
-  }),
-  type: 'text',
-  component: 'text'
-}, {
-  id: 'info',
-  component: 'fields',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "3RT69u",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Informations"
-    }]
-  }),
-  isList: true,
-  hideWithoutValue: true,
-  fields: [{
-    id: 'user',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "yByaBh",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Added by"
-      }]
-    }),
-    type: 'display',
-    display: 'avatar',
-    name: 'user',
-    horizontal: true
-  }, {
-    id: 'created_at',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "PN+75e",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Created at"
-      }]
-    }),
-    type: 'display',
-    display: 'date',
-    name: 'created_at',
-    format: 'yyyy-MM-dd hh:ss',
-    horizontal: true
-  }]
-}, {
-  id: 'technical',
-  component: 'fields',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "xKUOLG",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Technical details"
-    }]
-  }),
-  isList: true,
-  hideWithoutValue: true,
-  fields: [{
-    id: 'format',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "JuxiUN",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Format"
-      }]
-    }),
-    type: 'display',
-    display: 'unit',
-    format: 'format',
-    name: 'format',
-    horizontal: true
-  }, {
-    id: 'dimensions',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "rmJBin",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Dimensions"
-      }]
-    }),
-    type: 'display',
-    display: 'unit',
-    format: 'dimensions',
-    name: 'metadata',
-    horizontal: true
-  }, {
-    id: 'size',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "g2CRt5",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Size"
-      }]
-    }),
-    type: 'display',
-    display: 'unit',
-    format: 'bytes',
-    name: 'metadata.size',
-    horizontal: true
-  }, {
-    id: 'duration',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "wU++NJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Duration"
-      }]
-    }),
-    type: 'display',
-    display: 'unit',
-    format: 'duration',
-    name: 'metadata.duration',
-    horizontal: true
-  }]
-}];
-
-var propTypes$7 = {
-  value: PropTypes.shape({
-    id: PropTypes.string
-  }),
-  fields: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string
-  })),
-  onChange: PropTypes.func,
-  onSave: PropTypes.func,
-  onDelete: PropTypes.func,
-  onClose: PropTypes.func,
-  withDelete: PropTypes.bool,
-  withTrash: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.node
-};
-var defaultProps$7 = {
-  value: null,
-  fields: defaultFields,
-  onChange: null,
-  onSave: null,
-  onDelete: null,
-  onClose: null,
-  withDelete: false,
-  withTrash: false,
-  className: null,
-  children: null
-};
-function MediaForm(_ref) {
-  var initialValue = _ref.value,
-    initialFields = _ref.fields,
-    onChange = _ref.onChange,
-    onSave = _ref.onSave,
-    onDelete = _ref.onDelete,
-    onClose = _ref.onClose,
-    withDelete = _ref.withDelete,
-    withTrash = _ref.withTrash,
-    className = _ref.className,
-    children = _ref.children;
-  var FieldsComponent = contexts.useFieldComponent('fields');
-  var _useMediaUpdate = useMediaUpdate$1(),
-    update = _useMediaUpdate.update,
-    updating = _useMediaUpdate.updating;
-  var _useMediaTrash = useMediaTrash$1(),
-    mediaTrash = _useMediaTrash.mediaTrash,
-    trashing = _useMediaTrash.trashing;
-  var _useMediaDelete = useMediaDelete$1(),
-    mediaDelete = _useMediaDelete.mediaDelete,
-    deleting = _useMediaDelete.deleting;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    changed = _useState2[0],
-    setChanged = _useState2[1];
-  var disabled = updating || deleting || trashing || initialValue === null;
-  var _ref2 = initialValue || {},
-    _ref2$name = _ref2.name,
-    name = _ref2$name === void 0 ? null : _ref2$name,
-    _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? null : _ref2$type,
-    _ref2$deletedAt = _ref2.deletedAt,
-    deletedAt = _ref2$deletedAt === void 0 ? null : _ref2$deletedAt;
-  var onChangeMedia = React.useCallback(function (newValue) {
-    if (onChange !== null) {
-      onChange(newValue);
-    }
-    setChanged(true);
-  }, [onChange, setChanged]);
-  var onMediaSaved = React.useCallback(function (newValue) {
-    if (onSave !== null) {
-      onSave(newValue);
-    }
-    setChanged(false);
-  }, [onChange, setChanged]);
-  var onDeleteMedia = React.useCallback(function () {
-    var _ref3 = initialValue || {},
-      _ref3$id = _ref3.id,
-      id = _ref3$id === void 0 ? null : _ref3$id;
-    if (withTrash && deletedAt !== null) {
-      mediaTrash(id, initialValue).then(function () {
-        if (onDelete !== null) {
-          onDelete();
-        }
-        setChanged(false);
-        if (onClose !== null) {
-          onClose();
-        }
-      });
-    } else {
-      // Destroy
-      mediaDelete(id, initialValue).then(function () {
-        if (onDelete !== null) {
-          onDelete();
-        }
-        setChanged(false);
-        if (onClose !== null) {
-          onClose();
-        }
-      });
-    }
-  }, [initialValue, mediaDelete, mediaTrash, deletedAt, setChanged, onDelete, withTrash]);
-  var postForm = React.useCallback(function (action, data) {
-    return initialValue !== null ? update(initialValue.id, data) : new Promise();
-  }, [initialValue, update]);
-  var _useForm = hooks.useForm({
-      fields: initialFields,
-      postForm: postForm,
-      onComplete: onMediaSaved,
-      value: initialValue,
-      setValue: onChangeMedia,
-      disabled: updating
-    }),
-    value = _useForm.value,
-    setValue = _useForm.setValue,
-    fields = _useForm.fields,
-    onSubmit = _useForm.onSubmit,
-    status = _useForm.status,
-    generalError = _useForm.generalError;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['text-body', _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("nav", {
-    className: "navbar d-flex w-100 align-items-end justify-content-between border-bottom mb-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-end justify-content-start mb-1",
-    style: {
-      maxWidth: '66%'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "me-3 mb-0"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "secondary",
-    outline: true,
-    onClick: onClose,
-    icon: "arrow-left"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "8NyYTH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Back"
-    }]
-  }))), /*#__PURE__*/React.createElement("h4", {
-    className: "d-inline text-truncate mb-0"
-  }, name), /*#__PURE__*/React.createElement("span", {
-    className: "mx-2"
-  }, type)), /*#__PURE__*/React.createElement("div", null, withDelete ? /*#__PURE__*/React.createElement(Button, {
-    className: "me-2 mb-1 mt-1",
-    theme: "danger",
-    icon: withTrash && deletedAt !== null ? 'trash-fill' : 'trash',
-    iconPosition: "right",
-    onClick: onDeleteMedia,
-    disabled: deleting || trashing
-  }, withTrash && deletedAt === null ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "PSlT7H",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Trash"
-    }]
-  }) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "Bhu3B2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Delete"
-    }]
-  })) : null, onSave !== null ? /*#__PURE__*/React.createElement(Button, {
-    className: "mb-1 mt-1",
-    theme: "primary",
-    icon: changed ? 'check' : 'check',
-    iconPosition: "right",
-    onClick: onSubmit,
-    disabled: !changed || updating || deleting
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "R1HYj0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Save"
-    }]
-  })) : null)), /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-md-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "position-relative w-100"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.mediaFrame
-  }, /*#__PURE__*/React.createElement(MediaFrame, {
-    value: value
-  }))), children), /*#__PURE__*/React.createElement("div", {
-    className: "col-md-6"
-  }, /*#__PURE__*/React.createElement(Form, {
-    onChange: onChangeMedia,
-    withoutActions: true
-  }, /*#__PURE__*/React.createElement(FieldsComponent, {
-    fields: fields,
-    value: value,
-    onChange: setValue,
-    disabled: disabled
-  })), generalError !== null && status !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "mt-5"
-  }, /*#__PURE__*/React.createElement(FormStatus, {
-    status: status
-  })) : null)));
-}
-MediaForm.propTypes = propTypes$7;
-MediaForm.defaultProps = defaultProps$7;
-
-var MediaContext = /*#__PURE__*/React.createContext(null);
-var useCurrentMedia = function useCurrentMedia() {
-  return React.useContext(MediaContext);
-};
-var propTypes$6 = {
-  media: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  children: PropTypes.node.isRequired
-};
-var defaultProps$6 = {
-  media: null
-};
-function MediaProvider(_ref) {
-  var providedMedia = _ref.media,
-    children = _ref.children;
-  var _useState = React.useState(providedMedia),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentMedia = _useState2[0],
-    setCurrentMedia = _useState2[1];
-  var values = React.useMemo(function () {
-    return {
-      currentMedia: currentMedia,
-      setCurrentMedia: setCurrentMedia
-    };
-  }, [currentMedia, setCurrentMedia]);
-  return /*#__PURE__*/React.createElement(MediaContext.Provider, {
-    value: values
-  }, children);
-}
-MediaProvider.propTypes = propTypes$6;
-MediaProvider.defaultProps = defaultProps$6;
-
-var defaultColumns = [{
-  id: 'image',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "UbxbKP",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Preview"
-    }]
-  }),
-  component: 'image',
-  path: 'thumbnail_url',
-  sortable: false
-}, {
-  id: 'name',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "WX83V9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "File name"
-    }]
-  }),
-  component: 'text-description',
-  path: 'name',
-  descriptionPath: 'type',
-  descriptionValues: {
-    image: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "AwDQvD",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    }),
-    video: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "mQiyAm",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
-    }),
-    audio: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "XnyI69",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio"
-      }]
-    }),
-    document: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "1dqmFw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Document"
-      }]
-    })
-  },
-  sortable: true
-}, {
-  id: 'dimensions',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "eCe9ZY",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Dimensions"
-    }]
-  }),
-  component: 'unit',
-  format: 'dimensions',
-  path: 'metadata'
-}, {
-  id: 'size',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "c3hu9o",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Size"
-    }]
-  }),
-  component: 'unit',
-  format: 'bytes',
-  path: 'metadata.size'
-}, {
-  id: 'duration',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "002oWQ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Duration"
-    }]
-  }),
-  component: 'unit',
-  format: 'duration',
-  path: 'metadata.duration'
-},
-// {
-//     id: 'author',
-//     label: <FormattedMessage defaultMessage="Added by" description="Field name" />,
-//     component: 'avatar',
-//     path: 'metadata.author',
-//     namePath: 'name',
-//     withoutName: true,
-// },
-{
-  id: 'created_at',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "OzYWZz",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Created at"
-    }]
-  }),
-  component: 'date',
-  path: 'created_at',
-  format: 'yyyy-MM-dd hh:ss',
-  sortable: true
-}, {
-  id: 'actions',
-  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "rtwfuZ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Actions"
-    }]
-  }),
-  actions: ['edit']
-  // component: ItemActions,
-  // label: 'Edit',
-  // url: '/edit/1',
-}
-// {
-//     id: 'status',
-//     label: <FormattedMessage defaultMessage="Status" description="Field name" />,
-//     component: 'text',
-//     path: 'metadata.status',
-// },
-];
-
-var defaultFilters = [{
-  id: 'search',
-  component: 'search',
-  name: 'search',
-  width: 220
-}, {
-  id: 'types',
-  component: 'select',
-  name: 'types',
-  placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "9/t5wK",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Type"
-    }]
-  }),
-  options: [{
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "yHAmDD",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    }),
-    value: 'image'
-  }, {
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "xSERPA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
-    }),
-    value: 'video'
-  }, {
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "yQRtgx",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio"
-      }]
-    }),
-    value: 'audio'
-  }, {
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "8INLfU",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Document"
-      }]
-    }),
-    value: 'document'
-  }],
-  multiple: true
-}
-// {
-//     id: 'author',
-//     component: 'select',
-//     name: 'author',
-//     placeholder: <FormattedMessage defaultMessage="Author" description="Filter label" />,
-//     requestUrl: '/persons',
-//     itemLabelPath: 'name',
-//     multiple: true,
-// },
-// {
-//     id: 'tag',
-//     component: 'select',
-//     name: 'tag',
-//     placeholder: <FormattedMessage defaultMessage="Tag" description="Filter label" />,
-//     requestUrl: '/tags',
-//     itemLabelPath: 'label',
-//     multiple: true,
-// },
-];
-
-var _excluded$5 = ["page", "count"],
-  _excluded2 = ["types", "trashed"];
-var propTypes$5 = {
-  items: core.PropTypes.medias,
-  extraItems: core.PropTypes.medias,
-  types: PropTypes.arrayOf(PropTypes.string),
-  filters: core.PropTypes.filters,
-  columns: core.PropTypes.tableColumns,
-  query: PropTypes.shape({}),
-  baseUrl: PropTypes.string,
-  fields: core.PropTypes.fields,
-  layout: PropTypes.string,
-  layouts: PropTypes.arrayOf(PropTypes.shape({})),
-  theme: PropTypes.string,
-  onMediaUploaded: PropTypes.func,
-  onItemsChange: PropTypes.func,
-  onLayoutChange: PropTypes.func,
-  onMediaFormOpen: PropTypes.func,
-  onMediaFormClose: PropTypes.func,
-  selectable: PropTypes.bool,
-  selectedItems: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.arrayOf(PropTypes.shape({}))]),
-  onSelectionChange: PropTypes.func,
-  multipleSelection: PropTypes.bool,
-  uppyConfig: PropTypes.shape({}),
-  withDelete: PropTypes.bool,
-  withTrash: PropTypes.bool,
-  withStickySelection: PropTypes.bool,
-  withoutUpload: PropTypes.bool,
-  className: PropTypes.string,
-  formChildren: PropTypes.node
-};
-var defaultProps$5 = {
-  items: null,
-  extraItems: null,
-  types: null,
-  filters: defaultFilters,
-  columns: defaultColumns,
-  fields: defaultFields,
-  query: null,
-  baseUrl: null,
-  layout: 'table',
-  layouts: [{
-    id: 'table',
-    label: /*#__PURE__*/React.createElement(Icon, {
-      name: "table"
-    })
-  }, {
-    id: 'grid',
-    label: /*#__PURE__*/React.createElement(Icon, {
-      name: "grid"
-    })
-  }],
-  theme: null,
-  onMediaUploaded: null,
-  onItemsChange: null,
-  onLayoutChange: null,
-  onMediaFormOpen: null,
-  onMediaFormClose: null,
-  selectable: false,
-  selectedItems: null,
-  onSelectionChange: null,
-  multipleSelection: false,
-  uppyConfig: null,
-  withDelete: false,
-  withTrash: false,
-  withStickySelection: false,
-  withoutUpload: false,
-  className: null,
-  formChildren: null
-};
-function MediasBrowser(_ref) {
-  var initialItems = _ref.items,
-    extraItems = _ref.extraItems,
-    types = _ref.types,
-    baseUrl = _ref.baseUrl,
-    filters = _ref.filters,
-    columns = _ref.columns,
-    fields = _ref.fields,
-    initialQuery = _ref.query,
-    initialLayout = _ref.layout,
-    layouts = _ref.layouts,
-    theme = _ref.theme,
-    onMediaUploaded = _ref.onMediaUploaded,
-    onItemsChange = _ref.onItemsChange,
-    onLayoutChange = _ref.onLayoutChange,
-    onMediaFormOpen = _ref.onMediaFormOpen,
-    onMediaFormClose = _ref.onMediaFormClose,
-    selectable = _ref.selectable,
-    selectedItems = _ref.selectedItems,
-    onSelectionChange = _ref.onSelectionChange,
-    multipleSelection = _ref.multipleSelection,
-    uppyConfig = _ref.uppyConfig,
-    withDelete = _ref.withDelete,
-    withTrash = _ref.withTrash,
-    withStickySelection = _ref.withStickySelection,
-    withoutUpload = _ref.withoutUpload,
-    className = _ref.className,
-    formChildren = _ref.formChildren;
-  var _useState = React.useState(initialItems || null),
-    _useState2 = _slicedToArray(_useState, 1),
-    baseItems = _useState2[0];
-  var baseQuery = React.useMemo(function () {
-    return _objectSpread(_objectSpread({
-      count: 12
-    }, initialQuery), types !== null ? {
-      types: types
-    } : null);
-  }, [initialQuery, types]);
-  var _useQuery = hooks.useQuery(baseQuery),
-    fullQuery = _useQuery.query,
-    onPageChange = _useQuery.onPageChange,
-    onQueryChange = _useQuery.onQueryChange,
-    onQueryReset = _useQuery.onQueryReset;
-  var _useMemo = React.useMemo(function () {
-      var _ref2 = fullQuery || {},
-        _ref2$page = _ref2.page,
-        fullQueryPage = _ref2$page === void 0 ? null : _ref2$page,
-        _ref2$count = _ref2.count,
-        fullQueryCount = _ref2$count === void 0 ? null : _ref2$count,
-        params = _objectWithoutProperties(_ref2, _excluded$5);
-      return {
-        page: fullQueryPage,
-        count: fullQueryCount,
-        query: params
-      };
-    }, [fullQuery]),
-    _useMemo$page = _useMemo.page,
-    page = _useMemo$page === void 0 ? null : _useMemo$page,
-    _useMemo$count = _useMemo.count,
-    count = _useMemo$count === void 0 ? null : _useMemo$count,
-    _useMemo$query = _useMemo.query,
-    query = _useMemo$query === void 0 ? null : _useMemo$query;
-
-  // eslint-disable-next-line no-unused-vars
-  var _ref3 = query || {};
-    _ref3.types;
-    var _ref3$trashed = _ref3.trashed,
-    trashed = _ref3$trashed === void 0 ? null : _ref3$trashed,
-    queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
-  var _useMediaTrash = useMediaTrash$1(),
-    mediaTrash = _useMediaTrash.mediaTrash,
-    trashing = _useMediaTrash.trashing;
-  var _useMediaDelete = useMediaDelete$1(),
-    mediaDelete = _useMediaDelete.mediaDelete,
-    deleting = _useMediaDelete.deleting;
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showTrashed = _useState4[0],
-    setShowTrashed = _useState4[1];
-  var onClickTrash = React.useCallback(function () {
-    setShowTrashed(!showTrashed);
-  }, [showTrashed, setShowTrashed]);
-  var _useMedias = useMedias$1(query, page, count, {
-      items: baseItems,
-      trashed: showTrashed
-    }),
-    items = _useMedias.items,
-    allItems = _useMedias.allItems,
-    _useMedias$loading = _useMedias.loading,
-    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
-    _useMedias$loaded = _useMedias.loaded,
-    loaded = _useMedias$loaded === void 0 ? false : _useMedias$loaded,
-    _useMedias$updateItem = _useMedias.updateItem,
-    updateItem = _useMedias$updateItem === void 0 ? null : _useMedias$updateItem,
-    _useMedias$pagination = _useMedias.pagination,
-    _useMedias$pagination2 = _useMedias$pagination === void 0 ? {} : _useMedias$pagination,
-    lastPage = _useMedias$pagination2.lastPage,
-    total = _useMedias$pagination2.total,
-    _useMedias$pages = _useMedias.pages,
-    pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
-    reload = _useMedias.reload;
-  React.useEffect(function () {
-    if (onItemsChange !== null) {
-      onItemsChange(items);
-    }
-  }, [items, onItemsChange]);
-  var _useState5 = React.useState(initialLayout || 'table'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    layout = _useState6[0],
-    setLayout = _useState6[1];
-  var hasLayouts = React.useMemo(function () {
-    return layouts !== null && layouts.length > 1;
-  }, [layouts]);
-  var onClickLayout = React.useCallback(function (newLayout) {
-    setLayout(newLayout);
-    if (onLayoutChange !== null) {
-      onLayoutChange(newLayout);
-    }
-  }, [setLayout]);
-  var _useCurrentMedia = useCurrentMedia(),
-    currentMedia = _useCurrentMedia.currentMedia,
-    setCurrentMedia = _useCurrentMedia.setCurrentMedia;
-  React.useEffect(function () {
-    if (currentMedia !== null && onMediaFormOpen !== null) {
-      onMediaFormOpen();
-    }
-    if (currentMedia === null && onMediaFormClose !== null) {
-      onMediaFormClose();
-    }
-  }, [currentMedia]);
-  var onOpenMedia = React.useCallback(function (media) {
-    setCurrentMedia(media);
-  }, [setCurrentMedia]);
-  var onCloseMedia = React.useCallback(function () {
-    setCurrentMedia(null);
-  }, [setCurrentMedia]);
-  var onSaveMedia = React.useCallback(function (item) {
-    setCurrentMedia(null);
-    updateItem(item);
-  }, [setCurrentMedia, updateItem]);
-  var onDeleteMedia = React.useCallback(function () {
-    if (reload !== null) {
-      reload();
-    }
-  }, [reload]);
-  var onTrashMedia = React.useCallback(function (id) {
-    return !showTrashed && withTrash ? mediaTrash(id).then(function () {
-      if (!multipleSelection) {
-        var _ref4 = selectedItems || {},
-          _ref4$id = _ref4.id,
-          selectedId = _ref4$id === void 0 ? null : _ref4$id;
-        if (selectedId !== null && selectedId === id) {
-          onSelectionChange(null);
-        }
-      }
-      // Todo remove from mult selection
-    }).then(reload) : mediaDelete(id).then(function () {
-      if (!multipleSelection) {
-        var _ref5 = selectedItems || {},
-          _ref5$id = _ref5.id,
-          selectedId = _ref5$id === void 0 ? null : _ref5$id;
-        if (selectedId !== null && selectedId === id) {
-          onSelectionChange(null);
-        }
-      }
-      // Todo remove from selection
-    }).then(reload);
-  }, [showTrashed, withTrash, mediaTrash, mediaDelete, reload, selectedItems, multipleSelection, onSelectionChange]);
-  var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    uploadedMedias = _useState8[0],
-    setUploadedMedias = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    uploadProcessing = _useState10[0],
-    setUploadProcessing = _useState10[1];
-  var onUploadedMediaChanged = React.useCallback(function (newMedias) {
-    var uploadedNewMedias = (isArray(newMedias) ? [].concat(_toConsumableArray(newMedias), _toConsumableArray(uploadedMedias || [])) : [newMedias].concat(_toConsumableArray(uploadedMedias || []))).filter(function (it) {
-      return it !== null;
-    });
-    setUploadedMedias(uploadedNewMedias);
-    if (onSelectionChange !== null) {
-      var _ref6 = newMedias || [],
-        _ref7 = _slicedToArray(_ref6, 1),
-        _ref7$ = _ref7[0],
-        firstMedia = _ref7$ === void 0 ? null : _ref7$;
-      onSelectionChange(multipleSelection && isArray(newMedias) ? newMedias : firstMedia);
-      onQueryReset();
-      reload();
-    }
-  }, [onSelectionChange, setUploadedMedias, uploadedMedias, onQueryReset, reload, multipleSelection]);
-  var onUploadComplete = React.useCallback(function () {
-    var medias = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (medias === null) return;
-    var rawMedias = (isArray(medias) ? medias : [medias]).filter(function (it) {
-      return it !== null;
-    });
-    if (onMediaUploaded !== null) {
-      setUploadProcessing(true);
-      onMediaUploaded(rawMedias).then(function (newMedias) {
-        onUploadedMediaChanged(newMedias);
-        setUploadProcessing(false);
-      })["catch"](function () {
-        setUploadProcessing(false);
-      });
-    } else {
-      onUploadedMediaChanged(rawMedias);
-    }
-  }, [onMediaUploaded, setUploadedMedias, setUploadProcessing, onUploadedMediaChanged]);
-  var pagination = /*#__PURE__*/React.createElement(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onPageChange,
-    theme: theme,
-    loading: loading && pages !== null,
-    selectable: selectable,
-    selectedItems: selectedItems,
-    onSelectionChange: onSelectionChange,
-    multipleSelection: multipleSelection,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  });
-  var hidePagination = loaded && !loading && (items || []).length === 0;
-  var finalFilters = React.useMemo(function () {
-    var partialFilters = withTrash ? (filters || []).concat([{
-      name: 'trashed',
-      component: 'button',
-      theme: showTrashed ? 'danger' : 'secondary',
-      outline: !showTrashed,
-      activeTheme: 'danger',
-      icon: showTrashed ? 'trash-fill' : 'trash',
-      onClick: onClickTrash
-    }]) : filters;
-    if (types !== null && partialFilters !== null) {
-      return (partialFilters || []).map(function (filter) {
-        var _ref8 = filter || {},
-          _ref8$id = _ref8.id,
-          id = _ref8$id === void 0 ? null : _ref8$id;
-        return id === 'types' ? _objectSpread(_objectSpread({}, filter), {}, {
-          disabled: true
-        }) : filter;
-      });
-    }
-    return partialFilters;
-  }, [filters, types, withTrash, showTrashed, onClickTrash]);
-  var finalColumns = React.useMemo(function () {
-    return withTrash && showTrashed ? (columns || []).map(function (column) {
-      var _ref9 = column || {},
-        _ref9$id = _ref9.id,
-        columnId = _ref9$id === void 0 ? null : _ref9$id;
-      if (columnId === 'created_at') {
-        return _objectSpread(_objectSpread({}, column), {}, {
-          path: 'deleted_at',
-          label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-            id: "uds4wJ",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Deleted at"
-            }]
-          })
-        });
-      }
-      if (columnId === 'actions') {
-        var _ref10 = column || {},
-          _ref10$actions = _ref10.actions,
-          actions = _ref10$actions === void 0 ? [] : _ref10$actions;
-        return _objectSpread(_objectSpread({}, column), {}, {
-          actions: (actions || []).reduce(function (acc, action) {
-            if (action === 'delete') {
-              acc.push({
-                id: 'restore',
-                component: 'restore',
-                withConfirmation: true
-              });
-            }
-            acc.push(action);
-            return acc;
-          }, []).filter(function (it) {
-            return it !== 'edit';
-          })
-        });
-      }
-      return column;
-    }) : columns;
-  }, [columns, withTrash, showTrashed]);
-  var hasQueryItem = React.useMemo(function () {
-    var showOnTopQuery = types === null ? query : queryWithoutTypes;
-    return showOnTopQuery !== null && !trashed ? Object.keys(showOnTopQuery).length > 0 : false;
-  }, [types, query, queryWithoutTypes, trashed]);
-  var finalItems = React.useMemo(function () {
-    if (withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
-      return uniqBy([].concat(_toConsumableArray(uploadProcessing ? [{
-        id: '-',
-        loading: true,
-        actionsDisabled: true,
-        selectionDisabled: true
-      }] : []), _toConsumableArray(page === 1 && !hasQueryItem ? uploadedMedias || [] : []), _toConsumableArray(page === 1 && !hasQueryItem ? (extraItems || []).map(function (item) {
-        var _item$id = item.id,
-          itemId = _item$id === void 0 ? null : _item$id;
-        return (allItems || []).find(function () {
-          var _ref11 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref11$id = _ref11.id,
-            otherId = _ref11$id === void 0 ? null : _ref11$id;
-          return otherId === itemId;
-        }) || item || null;
-      }).filter(function (it) {
-        return it !== null;
-      }) || [] : []), _toConsumableArray(items || [])), function (it) {
-        return it === null || it === void 0 ? void 0 : it.id;
-      });
-    }
-    return items;
-  }, [items, page, allItems, withStickySelection, extraItems, uploadProcessing, hasQueryItem]);
-
-  // const emptyWithSticky = useMemo(
-  //     () => (items || []).length === 0 && (finalItems || []).length > 0,
-  //     [items, finalItems],
-  // );
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, currentMedia !== null ? /*#__PURE__*/React.createElement(MediaForm, {
-    value: currentMedia,
-    fields: fields,
-    onChange: setCurrentMedia,
-    onSave: onSaveMedia,
-    onClose: onCloseMedia,
-    onDelete: onDeleteMedia,
-    withDelete: withDelete,
-    withTrash: withTrash
-  }, formChildren) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'justify-content-between'])
-  }, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    value: query,
-    clearValue: types !== null ? queryWithoutTypes : null,
-    filters: finalFilters,
-    onChange: onQueryChange,
-    onReset: onQueryReset,
-    theme: theme
-  }) : null, !withoutUpload ? /*#__PURE__*/React.createElement(UploadField, {
-    className: "ms-auto w-auto text-nowrap mt-2 mb-2 ps-2",
-    withButton: true,
-    withoutMedia: true,
-    uppyProps: uppyConfig,
-    types: types,
-    allowMultipleUploads: multipleSelection,
-    onChange: onUploadComplete,
-    disabled: uploadProcessing,
-    loading: uploadProcessing,
-    outline: false,
-    closeAfterFinish: true
-  }) : null), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'mt-1', 'mb-3', {
-      'justify-content-between': hasLayouts,
-      'justify-content-end': !hasLayouts
-    }])
-  }, hasLayouts ? /*#__PURE__*/React.createElement(Buttons, {
-    size: "sm",
-    theme: "secondary",
-    outline: true,
-    items: (layouts || []).map(function (lay) {
-      return _objectSpread(_objectSpread({}, lay), {}, {
-        active: layout === lay.id,
-        onClick: function onClick() {
-          return onClickLayout(lay.id);
-        },
-        className: 'px-3 py-2'
-      });
-    })
-  }) : null, !hidePagination ? pagination : /*#__PURE__*/React.createElement("div", null)), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
-    size: "small",
-    theme: theme,
-    component: MediaCard,
-    componentProps: {
-      className: 'd-flex w-100',
-      cardClassName: 'flex-grow-1',
-      vertical: true,
-      onClickDescription: function onClickDescription(it) {
-        onOpenMedia(it);
-      }
-    },
-    selectable: selectable,
-    selectedItems: selectedItems,
-    onSelectionChange: uploadProcessing ? null : onSelectionChange,
-    multipleSelection: multipleSelection,
-    query: query // For sort
-    ,
-    onQueryChange: onQueryChange,
-    items: finalItems || [],
-    loading: loading,
-    loaded: loaded
-    // empty={emptyWithSticky}
-  }) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, {
-    theme: theme,
-    columns: finalColumns,
-    displayPlaceholder: /*#__PURE__*/React.createElement("span", {
-      className: "text-secondary text-opacity-75"
-    }, "\u2014"),
-    selectable: selectable,
-    selectedItems: selectedItems,
-    onSelectionChange: uploadProcessing ? null : onSelectionChange,
-    multipleSelection: multipleSelection,
-    query: query // For sort
-    ,
-    onQueryChange: onQueryChange,
-    items: finalItems,
-    loading: loading,
-    loaded: loaded
-    // empty={emptyWithSticky}
-    ,
-    actionsProps: {
-      getDeletePropsFromItem: function getDeletePropsFromItem() {
-        var _ref12 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref12$id = _ref12.id,
-          id = _ref12$id === void 0 ? null : _ref12$id;
-        return {
-          href: null,
-          withConfirmation: false,
-          disabled: trashing || deleting,
-          icon: showTrashed ? 'trash-fill' : 'trash',
-          onClick: function onClick() {
-            return onTrashMedia(id);
-          }
-        };
-      },
-      getEditPropsFromItem: function getEditPropsFromItem(it) {
-        return {
-          href: null,
-          onClick: function onClick() {
-            onOpenMedia(it);
-          }
-        };
-      }
-    }
-  }) : null, !hidePagination ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, pagination) : null));
-}
-MediasBrowser.propTypes = propTypes$5;
-MediasBrowser.defaultProps = defaultProps$5;
-
-var _excluded$4 = ["items", "value", "onChange", "multiple", "className"];
-var propTypes$4 = {
-  items: PropTypes.arrayOf(PropTypes.shape({})),
-  value: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.arrayOf(PropTypes.shape({}))]),
-  multiple: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  className: PropTypes.string
-};
-var defaultProps$4 = {
-  items: null,
-  value: null,
-  multiple: false,
-  className: null
-};
-function MediasPicker(_ref) {
-  var initialItems = _ref.items,
-    initialSelectedItems = _ref.value,
-    onChange = _ref.onChange,
-    multiple = _ref.multiple,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  // Keep the previous selection on top of first page
-  var extraItems = React.useMemo(function () {
-    if (initialSelectedItems === null) {
-      return null;
-    }
-    return isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems];
-  }, []);
-
-  // Mostly for testing
-  var _useState = React.useState(initialSelectedItems || null),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedItems = _useState2[0],
-    setSelectedItems = _useState2[1];
-  var onSelectionChange = React.useCallback(function (newSelection) {
-    setSelectedItems(newSelection);
-  }, [setSelectedItems]);
-
-  // Sync from the top
-  React.useEffect(function () {
-    setSelectedItems(initialSelectedItems);
-  }, [initialSelectedItems, setSelectedItems]);
-  React.useEffect(function () {
-    if (onChange !== null) {
-      onChange(selectedItems);
-    }
-  }, [selectedItems, onChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
-    items: initialItems // TODO: fix useItems if actually using this
-    ,
-    selectable: true,
-    selectedItems: selectedItems,
-    onSelectionChange: onSelectionChange,
-    multipleSelection: multiple,
-    extraItems: extraItems
-  }, props)));
-}
-MediasPicker.propTypes = propTypes$4;
-MediasPicker.defaultProps = defaultProps$4;
-
-var _excluded$3 = ["api", "media"];
-var propTypes$3 = {
-  api: apiPropTypes,
-  media: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })
-};
-var defaultProps$3 = {
-  api: null,
-  media: null
-};
-function MediasBrowserContainer(_ref) {
-  var api = _ref.api,
-    media = _ref.media,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  return /*#__PURE__*/React.createElement(MediasApiProvider, {
-    api: api
-  }, /*#__PURE__*/React.createElement(MediaProvider, {
-    media: media
-  }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
-}
-MediasBrowserContainer.propTypes = propTypes$3;
-MediasBrowserContainer.defaultProps = defaultProps$3;
-
-var _excluded$2 = ["api", "media", "onChange"];
-var propTypes$2 = {
-  api: apiPropTypes,
-  media: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  onChange: PropTypes.func.isRequired
-};
-var defaultProps$2 = {
-  api: null,
-  media: null
-};
-function MediasPickerContainer(_ref) {
-  var api = _ref.api,
-    media = _ref.media,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(MediasApiProvider, {
-    api: api
-  }, /*#__PURE__*/React.createElement(MediaProvider, {
-    media: media
-  }, /*#__PURE__*/React.createElement(MediasPicker, Object.assign({}, props, {
-    onChange: onChange
-  }))));
-}
-MediasPickerContainer.propTypes = propTypes$2;
-MediasPickerContainer.defaultProps = defaultProps$2;
-
-var _excluded$1 = ["resource"];
-var propTypes$1 = {
-  resource: PropTypes.string
-};
-var defaultProps$1 = {
-  resource: 'medias'
-};
-function MediasResourceBrowser(_ref) {
-  var resourceId = _ref.resource,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  var resource = contexts.usePanneauResource(resourceId);
-  var api = data.useApi();
-  var mediasApi = React.useMemo(function () {
-    return {
-      get: function get() {
-        var _api$resources;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return (_api$resources = api.resources).get.apply(_api$resources, [resource].concat(args));
-      },
-      getTrashed: function getTrashed() {
-        var _api$resources2;
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-        return (_api$resources2 = api.resources).getTrashed.apply(_api$resources2, [resource].concat(args));
-      },
-      find: function find() {
-        var _api$resources3;
-        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-          args[_key3] = arguments[_key3];
-        }
-        return (_api$resources3 = api.resources).find.apply(_api$resources3, [resource].concat(args));
-      },
-      create: function create() {
-        var _api$resources4;
-        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-          args[_key4] = arguments[_key4];
-        }
-        return (_api$resources4 = api.resources).create.apply(_api$resources4, [resource].concat(args));
-      },
-      update: function update() {
-        var _api$resources5;
-        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-          args[_key5] = arguments[_key5];
-        }
-        return (_api$resources5 = api.resources).update.apply(_api$resources5, [resource].concat(args));
-      },
-      trash: function trash() {
-        var _api$resources6;
-        for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-          args[_key6] = arguments[_key6];
-        }
-        return (_api$resources6 = api.resources).trash.apply(_api$resources6, [resource].concat(args));
-      },
-      "delete": function _delete() {
-        var _api$resources7;
-        for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-          args[_key7] = arguments[_key7];
-        }
-        return (_api$resources7 = api.resources)["delete"].apply(_api$resources7, [resource].concat(args));
-      }
-    };
-  }, [api, resource]);
-  return /*#__PURE__*/React.createElement(MediasBrowserContainer, Object.assign({
-    api: mediasApi
-  }, props));
-}
-MediasResourceBrowser.propTypes = propTypes$1;
-MediasResourceBrowser.defaultProps = defaultProps$1;
-
-var _excluded = ["resource"];
-var propTypes = {
-  resource: PropTypes.string
-};
-var defaultProps = {
-  resource: 'medias'
-};
-function MediasResourcePicker(_ref) {
-  var resourceId = _ref.resource,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var resource = contexts.usePanneauResource(resourceId);
-  var _ref2 = resource || {},
-    _ref2$index = _ref2.index,
-    index = _ref2$index === void 0 ? null : _ref2$index,
-    _ref2$fields = _ref2.fields,
-    fields = _ref2$fields === void 0 ? null : _ref2$fields;
-  var _ref3 = index || {},
-    _ref3$filters = _ref3.filters,
-    filters = _ref3$filters === void 0 ? null : _ref3$filters,
-    _ref3$columns = _ref3.columns,
-    columns = _ref3$columns === void 0 ? null : _ref3$columns;
-  var api = data.useApi();
-  var mediasApi = React.useMemo(function () {
-    return {
-      get: function get() {
-        var _api$resources;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return (_api$resources = api.resources).get.apply(_api$resources, [resource].concat(args));
-      },
-      getTrashed: function getTrashed() {
-        var _api$resources2;
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-        return (_api$resources2 = api.resources).getTrashed.apply(_api$resources2, [resource].concat(args));
-      },
-      find: function find() {
-        var _api$resources3;
-        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-          args[_key3] = arguments[_key3];
-        }
-        return (_api$resources3 = api.resources).find.apply(_api$resources3, [resource].concat(args));
-      },
-      create: function create() {
-        var _api$resources4;
-        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-          args[_key4] = arguments[_key4];
-        }
-        return (_api$resources4 = api.resources).create.apply(_api$resources4, [resource].concat(args));
-      },
-      update: function update() {
-        var _api$resources5;
-        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-          args[_key5] = arguments[_key5];
-        }
-        return (_api$resources5 = api.resources).update.apply(_api$resources5, [resource].concat(args));
-      },
-      trash: function trash() {
-        var _api$resources6;
-        for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-          args[_key6] = arguments[_key6];
-        }
-        return (_api$resources6 = api.resources).trash.apply(_api$resources6, [resource].concat(args));
-      },
-      "delete": function _delete() {
-        var _api$resources7;
-        for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-          args[_key7] = arguments[_key7];
-        }
-        return (_api$resources7 = api.resources)["delete"].apply(_api$resources7, [resource].concat(args));
-      }
-    };
-  }, [api, resource]);
-  return /*#__PURE__*/React.createElement(MediasPickerContainer, Object.assign({
-    api: mediasApi
-  }, filters !== null ? {
-    filters: filters
-  } : null, fields !== null ? {
-    fields: fields
-  } : null, columns !== null ? {
-    columns: columns
-  } : null, props));
-}
-MediasResourcePicker.propTypes = propTypes;
-MediasResourcePicker.defaultProps = defaultProps;
-
-exports.MediaForm = MediaForm;
-exports.MediaProvider = MediaProvider;
-exports.MediasApiProvider = MediasApiProvider;
-exports.MediasBrowser = MediasBrowser;
-exports.MediasBrowserContainer = MediasBrowserContainer;
-exports.MediasPicker = MediasPicker;
-exports.MediasPickerContainer = MediasPickerContainer;
-exports.MediasResourceBrowser = MediasResourceBrowser;
-exports.MediasResourcePicker = MediasResourcePicker;
-exports.apiPropTypes = apiPropTypes;
-exports.columns = defaultColumns;
-exports.fields = defaultFields;
-exports.filters = defaultFilters;
-exports.useCurrentMedia = useCurrentMedia;
-exports.useMedia = useMedia$1;
-exports.useMediaCreate = useMediaCreate$1;
-exports.useMediaDelete = useMediaDelete$1;
-exports.useMediaTrash = useMediaTrash$1;
-exports.useMediaUpdate = useMediaUpdate$1;
-exports.useMedias = useMedias$1;
-exports.useMediasApi = useMediasApi;