@tenancy.nz/gallery 1.10.1 → 1.10.3

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.cjs

@@ -16,6 +16,15 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -43,6 +52,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -119,8 +131,10 @@ function _unsupportedIterableToArray(r, a) {
 exports.arrayLikeToArray = _arrayLikeToArray;
 exports.arrayWithHoles = _arrayWithHoles;
 exports.defineProperty = _defineProperty;
+exports.extends = _extends;
 exports.iterableToArrayLimit = _iterableToArrayLimit;
 exports.nonIterableRest = _nonIterableRest;
+exports.objectDestructuringEmpty = _objectDestructuringEmpty;
 exports.objectSpread2 = _objectSpread2;
 exports.objectWithoutProperties = _objectWithoutProperties;
 exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;

package/dist/cjs/components/GalleryDragHandle.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var DragIndicatorIcon = require('@tenancy.nz/icons/DragIndicator');
+var GalleryDragHandle_styled = require('./GalleryDragHandle.styled.cjs');
+
+var GalleryDragHandle = /*#__PURE__*/React.forwardRef(function GalleryDragHandle2(_ref, ref) {
+  var rest = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref), _ref));
+  return /* @__PURE__ */React.createElement(GalleryDragHandle_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    size: "small",
+    sx: {
+      color: "#fff"
+    }
+  }, rest), {}, {
+    ref: ref
+  }), /* @__PURE__ */React.createElement(DragIndicatorIcon, {
+    size: 24
+  }));
+});
+
+exports.default = GalleryDragHandle;

package/dist/cjs/components/GalleryDragHandle.styled.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var IconButton = require('@mui/material/IconButton');
+var styles = require('@mui/material/styles');
+
+var _templateObject;
+var StyledGalleryDragHandle = styles.styled(IconButton)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  cursor: grab;\n  touch-action: manipulation;\n"])));
+
+exports.default = StyledGalleryDragHandle;

package/dist/cjs/components/GalleryDragOverlay.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var GalleryDragOverlay_styled = require('./GalleryDragOverlay.styled.cjs');
+
+function GalleryDragOverlay(_ref) {
+  var src = _ref.src;
+  return /* @__PURE__ */React.createElement(GalleryDragOverlay_styled.default, null, /* @__PURE__ */React.createElement(ui.Media, {
+    src: src
+  }));
+}
+
+exports.default = GalleryDragOverlay;

package/dist/cjs/components/GalleryDragOverlay.styled.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+
+var _templateObject, _templateObject2;
+var pop = react.keyframes(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(1.05);\n    box-shadow:\n      0 0 0 calc(1px / 1.05) rgba(63, 63, 68, 0.05),\n      -1px 0 15px 0 rgba(34, 33, 81, 0.01),\n      0px 15px 15px 0 rgba(34, 33, 81, 0.25);\n  }\n"])));
+var StyledGalleryDragOverlay = styles.styled("div")(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  height: 162px;\n  width: 162px;\n  cursor: move;\n  animation: ", " 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);\n  box-shadow:\n    0 0 0 calc(1px / 1.05) rgba(63, 63, 68, 0.05),\n    -1px 0 15px 0 rgba(34, 33, 81, 0.01),\n    0px 15px 15px 0 rgba(34, 33, 81, 0.25);\n  opacity: 1;\n  z-index: 999;\n  transform: scale(1.05);\n  transform-origin: 50% 50%;\n  border-radius: 8px;\n  overflow: hidden;\n"])), pop);
+
+exports.default = StyledGalleryDragOverlay;

package/dist/cjs/components/GalleryImage.cjs

@@ -8,12 +8,12 @@ var ZoomInIcon = require('@tenancy.nz/icons/ZoomInOutlined');
 var ui = require('@tenancy.nz/ui');
 var GalleryImage_styled = require('./GalleryImage.styled.cjs');
 
-var _excluded = ["actions", "caption", "dragging", "onClick", "src", "uploading"];
+var _excluded = ["actions", "tag", "dragging", "onClick", "src", "uploading"];
 var GalleryImage = /*#__PURE__*/React.forwardRef(function GalleryImage2(_ref, ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? void 0 : _ref$actions,
-    _ref$caption = _ref.caption,
-    caption = _ref$caption === void 0 ? void 0 : _ref$caption,
+    _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? void 0 : _ref$tag,
     _ref$dragging = _ref.dragging,
     dragging = _ref$dragging === void 0 ? void 0 : _ref$dragging,
     _ref$onClick = _ref.onClick,
@@ -37,7 +37,11 @@ var GalleryImage = /*#__PURE__*/React.forwardRef(function GalleryImage2(_ref, re
     onClick: onClick
   }, actions, onClick && /* @__PURE__ */React.createElement(ZoomInIcon, {
     size: "inherit"
-  })), !uploading && caption && /* @__PURE__ */React.createElement(GalleryImage_styled.StyledGalleryImageText, null, caption));
+  })), !uploading && tag && /* @__PURE__ */React.createElement(ui.AbsBox, {
+    right: 12,
+    bottom: 8,
+    zIndex: 2
+  }, tag));
 });
 
 exports.default = GalleryImage;

package/dist/cjs/components/GalleryImage.styled.cjs

@@ -27,9 +27,9 @@ var StyledGalleryImageOverlay = styles.styled("div", {
   var visible = _ref2.visible;
   return react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n    background: rgba(0, 0, 0, 0.5);\n    color: #fff;\n    font-size: 50px;\n    transition: all 275ms ease-in-out;\n    ", "\n  "])), !visible && react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      opacity: 0;\n      visibility: hidden;\n      backface-visibility: hidden;\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.38);\n    "]))));
 });
-var StyledGalleryImageText = styles.styled("span")(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: inline-flex;\n  position: absolute;\n  right: 8px;\n  bottom: 8px;\n  padding: 2px 8px;\n  border-radius: 4px;\n  background: rgba(0, 0, 0, 0.6);\n  color: #fff;\n  font-weight: 500;\n  z-index: 2;\n  font-size: 12px;\n"])));
+var StyledGalleryImageAction = styles.styled("div")(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  z-index: 4;\n\n  > * {\n    margin: 4px 2px;\n  }\n\n  > *:last-child {\n    margin-left: auto;\n  }\n"])));
 
+exports.StyledGalleryImageAction = StyledGalleryImageAction;
 exports.StyledGalleryImageOverlay = StyledGalleryImageOverlay;
-exports.StyledGalleryImageText = StyledGalleryImageText;
 exports.default = StyledGalleryImage;
 exports.galleryImageOverlayClassName = galleryImageOverlayClassName;

package/dist/cjs/components/GalleryViewer.styled.cjs

@@ -10,7 +10,7 @@ var StyledGalleryViewer = styles.styled("div")(_templateObject || (_templateObje
 var StyledGalleryViewerFigure = styles.styled("figure")(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 100%;\n  max-height: 100%;\n  margin: 0;\n"])));
 var StyledGalleryViewerImage = styles.styled("img")(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  max-width: 100%;\n  max-height: calc(100vh - 160px);\n  object-fit: contain;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);\n"])));
 var StyledGalleryViewerCaption = styles.styled("figcaption")(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  margin-top: 16px;\n  color: #fff;\n  font-size: 16px;\n  font-weight: 660;\n\n  > div {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
-var viewerButtonStyles = react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  && {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border: 1px solid ", ";\n    border-radius: 4px;\n    background: ", ";\n    color: ", ";\n    font-size: 24px;\n    cursor: pointer;\n    transition: background 175ms ease-in-out;\n\n    &:hover {\n      background: ", ";\n    }\n  }\n"])), ui.token("palette.component.button.secondary.borderColor"), ui.token("palette.component.button.secondary.backgroundDefault"), ui.token("palette.semantic.icons.primaryColor"), ui.token("palette.component.button.secondary.backgroundDefault"));
+var viewerButtonStyles = react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  && {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border: 1px solid ", ";\n    border-radius: 4px;\n    background: ", ";\n    color: ", ";\n    font-size: 24px;\n    cursor: pointer;\n    transition: background 175ms ease-in-out;\n  }\n\n  &&:hover {\n    background: ", " !important;\n    color: ", " !important;\n  }\n"])), ui.token("palette.component.button.secondary.borderColor"), ui.token("palette.component.button.secondary.backgroundDefault"), ui.token("palette.semantic.icons.primaryColor"), ui.token("palette.component.button.secondary.backgroundDefault"), ui.token("palette.semantic.icons.primaryColor"));
 var StyledGalleryViewerClose = styles.styled("button")(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", ";\n  top: 16px;\n  right: 16px;\n"])), viewerButtonStyles);
 var StyledGalleryViewerPrev = styles.styled("button")(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", ";\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n"])), viewerButtonStyles);
 var StyledGalleryViewerNext = styles.styled("button")(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", ";\n  right: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n"])), viewerButtonStyles);

package/dist/cjs/components/SortableGallery.cjs

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var Dropzone = require('react-dropzone');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var Stack = require('@mui/material/Stack');
+var UploadIcon = require('@tenancy.nz/icons/Upload');
+var ui = require('@tenancy.nz/ui');
+var GalleryDragOverlay = require('./GalleryDragOverlay.cjs');
+var SortableGalleryImage = require('./SortableGalleryImage.cjs');
+var Gallery = require('./Gallery.cjs');
+var SortableGallery_styled = require('./SortableGallery.styled.cjs');
+
+var _excluded = ["dropzoneText", "dropzoneProps", "onDelete", "onUpload", "onSortComplete"];
+function SortableGallery(_ref) {
+  var _ref$dropzoneText = _ref.dropzoneText,
+    dropzoneText = _ref$dropzoneText === void 0 ? "" : _ref$dropzoneText,
+    _ref$dropzoneProps = _ref.dropzoneProps,
+    dropzoneProps = _ref$dropzoneProps === void 0 ? {} : _ref$dropzoneProps,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? void 0 : _ref$onDelete,
+    _ref$onUpload = _ref.onUpload,
+    onUpload = _ref$onUpload === void 0 ? void 0 : _ref$onUpload,
+    _ref$onSortComplete = _ref.onSortComplete,
+    onSortComplete = _ref$onSortComplete === void 0 ? void 0 : _ref$onSortComplete,
+    listProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _listProps$images = listProps.images,
+    images = _listProps$images === void 0 ? [] : _listProps$images,
+    loading = listProps.loading,
+    infoText = listProps.infoText;
+  var _useState = React.useState(null),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    activeId = _useState2[0],
+    setActiveId = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    confirmDelete = _useState4[0],
+    setConfirmDelete = _useState4[1];
+  var sensors = core.useSensors(core.useSensor(core.MouseSensor), core.useSensor(core.TouchSensor));
+  var handleUpload = React.useCallback(function (acceptedFiles) {
+    var readFile = function readFile(file) {
+      return new Promise(function (resolve) {
+        var reader = new FileReader();
+        reader.onload = function () {
+          resolve({
+            path: reader.result,
+            thumb: reader.result,
+            name: file.name,
+            type: file.type
+          });
+        };
+        reader.readAsDataURL(file);
+      });
+    };
+    Promise.all(acceptedFiles.map(readFile)).then(function (files) {
+      onUpload === null || onUpload === void 0 || onUpload(files);
+    });
+  }, [onUpload]);
+  var handleDragStart = function handleDragStart(event) {
+    setActiveId(event.active.id);
+  };
+  var handleDragCancel = function handleDragCancel() {
+    setActiveId(null);
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    if (over && active.id !== over.id) {
+      var oldIndex = images.findIndex(function (img) {
+        return img.thumb === active.id;
+      });
+      var newIndex = images.findIndex(function (img) {
+        return img.thumb === over.id;
+      });
+      var sortedImages = sortable.arrayMove(images, oldIndex, newIndex);
+      onSortComplete === null || onSortComplete === void 0 || onSortComplete(sortedImages, newIndex, oldIndex);
+    }
+    setActiveId(null);
+  };
+  var handleDelete = function handleDelete(event, index) {
+    event.stopPropagation();
+    event.preventDefault();
+    setConfirmDelete(index);
+  };
+  var handleDeleteConfirm = function handleDeleteConfirm() {
+    if (confirmDelete !== null) {
+      onDelete === null || onDelete === void 0 || onDelete(confirmDelete);
+    }
+    setConfirmDelete(null);
+  };
+  return /* @__PURE__ */React.createElement(ui.Box, null, /* @__PURE__ */React.createElement(core.DndContext, {
+    sensors: sensors,
+    collisionDetection: core.closestCenter,
+    onDragCancel: handleDragCancel,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, /* @__PURE__ */React.createElement(sortable.SortableContext, {
+    items: images.map(function (image) {
+      return image.thumb;
+    }),
+    strategy: sortable.rectSortingStrategy
+  }, /* @__PURE__ */React.createElement(Gallery.default, {
+    loading: loading,
+    images: images,
+    infoText: infoText,
+    renderItem: function renderItem(image, i) {
+      return /* @__PURE__ */React.createElement(SortableGalleryImage.default, {
+        key: image.thumb,
+        src: image.thumb,
+        tag: i === 0 ? /* @__PURE__ */React.createElement(ui.Tag, {
+          color: "white",
+          disableIcon: true,
+          label: "Cover image",
+          variant: "filled"
+        }) : void 0,
+        onDelete: function onDelete(e) {
+          return handleDelete(e, i);
+        },
+        uploading: !!image.uploading,
+        onClick: image.onClick
+      });
+    }
+  })), /* @__PURE__ */React.createElement(core.DragOverlay, {
+    adjustScale: false
+  }, activeId ? /* @__PURE__ */React.createElement(GalleryDragOverlay.default, {
+    src: String(activeId)
+  }) : null)), /* @__PURE__ */React.createElement(Dropzone, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, _rollupPluginBabelHelpers.objectSpread2({
+    disabled: loading
+  }, dropzoneProps)), {}, {
+    accept: {
+      "image/*": []
+    },
+    onDrop: handleUpload
+  }), function (_ref2) {
+    var getRootProps = _ref2.getRootProps,
+      getInputProps = _ref2.getInputProps;
+    return /* @__PURE__ */React.createElement(SortableGallery_styled.default, _rollupPluginBabelHelpers.objectSpread2({}, getRootProps()), /* @__PURE__ */React.createElement("input", _rollupPluginBabelHelpers.objectSpread2({}, getInputProps())), /* @__PURE__ */React.createElement(Stack, {
+      gap: 2,
+      alignItems: "center"
+    }, /* @__PURE__ */React.createElement(UploadIcon, {
+      size: 68
+    }), /* @__PURE__ */React.createElement(ui.Text, {
+      variant: "body2",
+      weight: "400"
+    }, dropzoneText || /* @__PURE__ */React.createElement(React.Fragment, null, "Drag and drop image(s) here, or ", /* @__PURE__ */React.createElement("u", null, "choose image")))));
+  }), /* @__PURE__ */React.createElement(ui.Confirmation, {
+    open: confirmDelete !== null,
+    severity: "destructive",
+    title: "Delete image?",
+    message: "Deleting this image will permanently remove it from the system. This action cannot be undone.",
+    onCancel: function onCancel() {
+      return setConfirmDelete(null);
+    },
+    onConfirm: handleDeleteConfirm,
+    confirmBtnText: "Delete"
+  }));
+}
+
+exports.default = SortableGallery;

package/dist/cjs/components/SortableGallery.styled.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var ui = require('@tenancy.nz/ui');
+
+var _templateObject, _templateObject2;
+var StyledDropzone = styles.styled("div")(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    border: 2px dashed ", ";\n    background: #fff;\n    margin: 24px 0 0 0;\n    padding: 32px 16px;\n    border-radius: ", "px;\n    color: ", ";\n    max-height: 176px;\n  "])), ui.token("palette.semantic.border.accentColor"), theme.shape.borderRadius, ui.token("palette.semantic.text.primaryColor"));
+});
+
+exports.default = StyledDropzone;

package/dist/cjs/components/SortableGalleryImage.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var DeleteOutlinedIcon = require('@tenancy.nz/icons/DeleteOutlined');
+var ui = require('@tenancy.nz/ui');
+var GalleryDragHandle = require('./GalleryDragHandle.cjs');
+var GalleryImage = require('./GalleryImage.cjs');
+
+var _excluded = ["tag", "onDelete", "src", "uploading"];
+function SortableGalleryImage(_ref) {
+  var _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? void 0 : _ref$tag,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? void 0 : _ref$onDelete,
+    src = _ref.src,
+    _ref$uploading = _ref.uploading,
+    uploading = _ref$uploading === void 0 ? false : _ref$uploading,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useSortable = sortable.useSortable({
+      id: src
+    }),
+    attributes = _useSortable.attributes,
+    isDragging = _useSortable.isDragging,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    setDraggableNodeRef = _useSortable.setDraggableNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var styles = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition: transition
+  };
+  var actions = function actions() {
+    if (!uploading && !isDragging) {
+      return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(ui.AbsBox, {
+        display: "flex",
+        left: 8,
+        top: "50%",
+        sx: {
+          transform: "translateY(-50%)"
+        }
+      }, /* @__PURE__ */React.createElement(GalleryDragHandle.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, attributes), listeners), {}, {
+        ref: setDraggableNodeRef
+      }))), onDelete && /* @__PURE__ */React.createElement(ui.AbsBox, {
+        display: "flex",
+        top: 8,
+        right: 8,
+        zIndex: 2
+      }, /* @__PURE__ */React.createElement(ui.IconButton, {
+        onClick: onDelete,
+        color: "error",
+        variant: "contained"
+      }, /* @__PURE__ */React.createElement(DeleteOutlinedIcon, {
+        size: 20
+      }))));
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */React.createElement(GalleryImage.default, _rollupPluginBabelHelpers.objectSpread2({
+    ref: setNodeRef,
+    style: styles,
+    dragging: isDragging,
+    actions: actions(),
+    tag: tag,
+    src: src,
+    uploading: uploading
+  }, rest));
+}
+
+exports.default = SortableGalleryImage;

package/dist/cjs/index.cjs

@@ -1,13 +1,21 @@
 'use strict';
 
 var Gallery = require('./components/Gallery.cjs');
+var GalleryDragHandle = require('./components/GalleryDragHandle.cjs');
+var GalleryDragOverlay = require('./components/GalleryDragOverlay.cjs');
 var GalleryImage = require('./components/GalleryImage.cjs');
 var GalleryImageSkeleton = require('./components/GalleryImageSkeleton.cjs');
 var GalleryViewer = require('./components/GalleryViewer.cjs');
+var SortableGallery = require('./components/SortableGallery.cjs');
+var SortableGalleryImage = require('./components/SortableGalleryImage.cjs');
 
 
 
 exports.Gallery = Gallery.default;
+exports.GalleryDragHandle = GalleryDragHandle.default;
+exports.GalleryDragOverlay = GalleryDragOverlay.default;
 exports.GalleryImage = GalleryImage.default;
 exports.GalleryImageSkeleton = GalleryImageSkeleton.default;
 exports.GalleryViewer = GalleryViewer.default;
+exports.SortableGallery = SortableGallery.default;
+exports.SortableGalleryImage = SortableGalleryImage.default;

package/dist/esm/_virtual/_rollupPluginBabelHelpers.js

@@ -14,6 +14,15 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -41,6 +50,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -114,4 +126,4 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _defineProperty as defineProperty, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _defineProperty as defineProperty, _extends as extends, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _objectDestructuringEmpty as objectDestructuringEmpty, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };

package/dist/esm/components/GalleryDragHandle.js

@@ -0,0 +1,20 @@
+import { extends as _extends, objectDestructuringEmpty as _objectDestructuringEmpty, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
+import DragIndicatorIcon from '@tenancy.nz/icons/DragIndicator';
+import StyledGalleryDragHandle from './GalleryDragHandle.styled.js';
+
+var GalleryDragHandle = /*#__PURE__*/forwardRef(function GalleryDragHandle2(_ref, ref) {
+  var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /* @__PURE__ */React.createElement(StyledGalleryDragHandle, _objectSpread2(_objectSpread2({
+    size: "small",
+    sx: {
+      color: "#fff"
+    }
+  }, rest), {}, {
+    ref: ref
+  }), /* @__PURE__ */React.createElement(DragIndicatorIcon, {
+    size: 24
+  }));
+});
+
+export { GalleryDragHandle as default };

package/dist/esm/components/GalleryDragHandle.styled.js

@@ -0,0 +1,8 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+
+var _templateObject;
+var StyledGalleryDragHandle = styled(IconButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: grab;\n  touch-action: manipulation;\n"])));
+
+export { StyledGalleryDragHandle as default };

package/dist/esm/components/GalleryDragOverlay.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Media } from '@tenancy.nz/ui';
+import StyledGalleryDragOverlay from './GalleryDragOverlay.styled.js';
+
+function GalleryDragOverlay(_ref) {
+  var src = _ref.src;
+  return /* @__PURE__ */React.createElement(StyledGalleryDragOverlay, null, /* @__PURE__ */React.createElement(Media, {
+    src: src
+  }));
+}
+
+export { GalleryDragOverlay as default };

package/dist/esm/components/GalleryDragOverlay.styled.js

@@ -0,0 +1,9 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { keyframes } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+
+var _templateObject, _templateObject2;
+var pop = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(1.05);\n    box-shadow:\n      0 0 0 calc(1px / 1.05) rgba(63, 63, 68, 0.05),\n      -1px 0 15px 0 rgba(34, 33, 81, 0.01),\n      0px 15px 15px 0 rgba(34, 33, 81, 0.25);\n  }\n"])));
+var StyledGalleryDragOverlay = styled("div")(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 162px;\n  width: 162px;\n  cursor: move;\n  animation: ", " 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);\n  box-shadow:\n    0 0 0 calc(1px / 1.05) rgba(63, 63, 68, 0.05),\n    -1px 0 15px 0 rgba(34, 33, 81, 0.01),\n    0px 15px 15px 0 rgba(34, 33, 81, 0.25);\n  opacity: 1;\n  z-index: 999;\n  transform: scale(1.05);\n  transform-origin: 50% 50%;\n  border-radius: 8px;\n  overflow: hidden;\n"])), pop);
+
+export { StyledGalleryDragOverlay as default };

package/dist/esm/components/GalleryImage.js

@@ -1,15 +1,15 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
 import ZoomInIcon from '@tenancy.nz/icons/ZoomInOutlined';
-import { Media, CircularProgress } from '@tenancy.nz/ui';
-import StyledGalleryImage, { StyledGalleryImageOverlay, galleryImageOverlayClassName, StyledGalleryImageText } from './GalleryImage.styled.js';
+import { Media, CircularProgress, AbsBox } from '@tenancy.nz/ui';
+import StyledGalleryImage, { StyledGalleryImageOverlay, galleryImageOverlayClassName } from './GalleryImage.styled.js';
 
-var _excluded = ["actions", "caption", "dragging", "onClick", "src", "uploading"];
+var _excluded = ["actions", "tag", "dragging", "onClick", "src", "uploading"];
 var GalleryImage = /*#__PURE__*/forwardRef(function GalleryImage2(_ref, ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? void 0 : _ref$actions,
-    _ref$caption = _ref.caption,
-    caption = _ref$caption === void 0 ? void 0 : _ref$caption,
+    _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? void 0 : _ref$tag,
     _ref$dragging = _ref.dragging,
     dragging = _ref$dragging === void 0 ? void 0 : _ref$dragging,
     _ref$onClick = _ref.onClick,
@@ -33,7 +33,11 @@ var GalleryImage = /*#__PURE__*/forwardRef(function GalleryImage2(_ref, ref) {
     onClick: onClick
   }, actions, onClick && /* @__PURE__ */React.createElement(ZoomInIcon, {
     size: "inherit"
-  })), !uploading && caption && /* @__PURE__ */React.createElement(StyledGalleryImageText, null, caption));
+  })), !uploading && tag && /* @__PURE__ */React.createElement(AbsBox, {
+    right: 12,
+    bottom: 8,
+    zIndex: 2
+  }, tag));
 });
 
 export { GalleryImage as default };

package/dist/esm/components/GalleryImage.styled.js

@@ -23,6 +23,6 @@ var StyledGalleryImageOverlay = styled("div", {
   var visible = _ref2.visible;
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n    background: rgba(0, 0, 0, 0.5);\n    color: #fff;\n    font-size: 50px;\n    transition: all 275ms ease-in-out;\n    ", "\n  "])), !visible && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      opacity: 0;\n      visibility: hidden;\n      backface-visibility: hidden;\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.38);\n    "]))));
 });
-var StyledGalleryImageText = styled("span")(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  position: absolute;\n  right: 8px;\n  bottom: 8px;\n  padding: 2px 8px;\n  border-radius: 4px;\n  background: rgba(0, 0, 0, 0.6);\n  color: #fff;\n  font-weight: 500;\n  z-index: 2;\n  font-size: 12px;\n"])));
+var StyledGalleryImageAction = styled("div")(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  z-index: 4;\n\n  > * {\n    margin: 4px 2px;\n  }\n\n  > *:last-child {\n    margin-left: auto;\n  }\n"])));
 
-export { StyledGalleryImageOverlay, StyledGalleryImageText, StyledGalleryImage as default, galleryImageOverlayClassName };
+export { StyledGalleryImageAction, StyledGalleryImageOverlay, StyledGalleryImage as default, galleryImageOverlayClassName };

package/dist/esm/components/GalleryViewer.styled.js

@@ -8,7 +8,7 @@ var StyledGalleryViewer = styled("div")(_templateObject || (_templateObject = _t
 var StyledGalleryViewerFigure = styled("figure")(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 100%;\n  max-height: 100%;\n  margin: 0;\n"])));
 var StyledGalleryViewerImage = styled("img")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  max-height: calc(100vh - 160px);\n  object-fit: contain;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);\n"])));
 var StyledGalleryViewerCaption = styled("figcaption")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  margin-top: 16px;\n  color: #fff;\n  font-size: 16px;\n  font-weight: 660;\n\n  > div {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
-var viewerButtonStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  && {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border: 1px solid ", ";\n    border-radius: 4px;\n    background: ", ";\n    color: ", ";\n    font-size: 24px;\n    cursor: pointer;\n    transition: background 175ms ease-in-out;\n\n    &:hover {\n      background: ", ";\n    }\n  }\n"])), token("palette.component.button.secondary.borderColor"), token("palette.component.button.secondary.backgroundDefault"), token("palette.semantic.icons.primaryColor"), token("palette.component.button.secondary.backgroundDefault"));
+var viewerButtonStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  && {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border: 1px solid ", ";\n    border-radius: 4px;\n    background: ", ";\n    color: ", ";\n    font-size: 24px;\n    cursor: pointer;\n    transition: background 175ms ease-in-out;\n  }\n\n  &&:hover {\n    background: ", " !important;\n    color: ", " !important;\n  }\n"])), token("palette.component.button.secondary.borderColor"), token("palette.component.button.secondary.backgroundDefault"), token("palette.semantic.icons.primaryColor"), token("palette.component.button.secondary.backgroundDefault"), token("palette.semantic.icons.primaryColor"));
 var StyledGalleryViewerClose = styled("button")(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  top: 16px;\n  right: 16px;\n"])), viewerButtonStyles);
 var StyledGalleryViewerPrev = styled("button")(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", ";\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n"])), viewerButtonStyles);
 var StyledGalleryViewerNext = styled("button")(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  right: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n"])), viewerButtonStyles);

package/dist/esm/components/SortableGallery.js

@@ -0,0 +1,159 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useState, useCallback } from 'react';
+import Dropzone from 'react-dropzone';
+import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { SortableContext, rectSortingStrategy, arrayMove } from '@dnd-kit/sortable';
+import Stack from '@mui/material/Stack';
+import UploadIcon from '@tenancy.nz/icons/Upload';
+import { Box, Tag, Text, Confirmation } from '@tenancy.nz/ui';
+import GalleryDragOverlay from './GalleryDragOverlay.js';
+import SortableGalleryImage from './SortableGalleryImage.js';
+import Gallery from './Gallery.js';
+import StyledDropzone from './SortableGallery.styled.js';
+
+var _excluded = ["dropzoneText", "dropzoneProps", "onDelete", "onUpload", "onSortComplete"];
+function SortableGallery(_ref) {
+  var _ref$dropzoneText = _ref.dropzoneText,
+    dropzoneText = _ref$dropzoneText === void 0 ? "" : _ref$dropzoneText,
+    _ref$dropzoneProps = _ref.dropzoneProps,
+    dropzoneProps = _ref$dropzoneProps === void 0 ? {} : _ref$dropzoneProps,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? void 0 : _ref$onDelete,
+    _ref$onUpload = _ref.onUpload,
+    onUpload = _ref$onUpload === void 0 ? void 0 : _ref$onUpload,
+    _ref$onSortComplete = _ref.onSortComplete,
+    onSortComplete = _ref$onSortComplete === void 0 ? void 0 : _ref$onSortComplete,
+    listProps = _objectWithoutProperties(_ref, _excluded);
+  var _listProps$images = listProps.images,
+    images = _listProps$images === void 0 ? [] : _listProps$images,
+    loading = listProps.loading,
+    infoText = listProps.infoText;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeId = _useState2[0],
+    setActiveId = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    confirmDelete = _useState4[0],
+    setConfirmDelete = _useState4[1];
+  var sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
+  var handleUpload = useCallback(function (acceptedFiles) {
+    var readFile = function readFile(file) {
+      return new Promise(function (resolve) {
+        var reader = new FileReader();
+        reader.onload = function () {
+          resolve({
+            path: reader.result,
+            thumb: reader.result,
+            name: file.name,
+            type: file.type
+          });
+        };
+        reader.readAsDataURL(file);
+      });
+    };
+    Promise.all(acceptedFiles.map(readFile)).then(function (files) {
+      onUpload === null || onUpload === void 0 || onUpload(files);
+    });
+  }, [onUpload]);
+  var handleDragStart = function handleDragStart(event) {
+    setActiveId(event.active.id);
+  };
+  var handleDragCancel = function handleDragCancel() {
+    setActiveId(null);
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    if (over && active.id !== over.id) {
+      var oldIndex = images.findIndex(function (img) {
+        return img.thumb === active.id;
+      });
+      var newIndex = images.findIndex(function (img) {
+        return img.thumb === over.id;
+      });
+      var sortedImages = arrayMove(images, oldIndex, newIndex);
+      onSortComplete === null || onSortComplete === void 0 || onSortComplete(sortedImages, newIndex, oldIndex);
+    }
+    setActiveId(null);
+  };
+  var handleDelete = function handleDelete(event, index) {
+    event.stopPropagation();
+    event.preventDefault();
+    setConfirmDelete(index);
+  };
+  var handleDeleteConfirm = function handleDeleteConfirm() {
+    if (confirmDelete !== null) {
+      onDelete === null || onDelete === void 0 || onDelete(confirmDelete);
+    }
+    setConfirmDelete(null);
+  };
+  return /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragCancel: handleDragCancel,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, /* @__PURE__ */React.createElement(SortableContext, {
+    items: images.map(function (image) {
+      return image.thumb;
+    }),
+    strategy: rectSortingStrategy
+  }, /* @__PURE__ */React.createElement(Gallery, {
+    loading: loading,
+    images: images,
+    infoText: infoText,
+    renderItem: function renderItem(image, i) {
+      return /* @__PURE__ */React.createElement(SortableGalleryImage, {
+        key: image.thumb,
+        src: image.thumb,
+        tag: i === 0 ? /* @__PURE__ */React.createElement(Tag, {
+          color: "white",
+          disableIcon: true,
+          label: "Cover image",
+          variant: "filled"
+        }) : void 0,
+        onDelete: function onDelete(e) {
+          return handleDelete(e, i);
+        },
+        uploading: !!image.uploading,
+        onClick: image.onClick
+      });
+    }
+  })), /* @__PURE__ */React.createElement(DragOverlay, {
+    adjustScale: false
+  }, activeId ? /* @__PURE__ */React.createElement(GalleryDragOverlay, {
+    src: String(activeId)
+  }) : null)), /* @__PURE__ */React.createElement(Dropzone, _objectSpread2(_objectSpread2({}, _objectSpread2({
+    disabled: loading
+  }, dropzoneProps)), {}, {
+    accept: {
+      "image/*": []
+    },
+    onDrop: handleUpload
+  }), function (_ref2) {
+    var getRootProps = _ref2.getRootProps,
+      getInputProps = _ref2.getInputProps;
+    return /* @__PURE__ */React.createElement(StyledDropzone, _objectSpread2({}, getRootProps()), /* @__PURE__ */React.createElement("input", _objectSpread2({}, getInputProps())), /* @__PURE__ */React.createElement(Stack, {
+      gap: 2,
+      alignItems: "center"
+    }, /* @__PURE__ */React.createElement(UploadIcon, {
+      size: 68
+    }), /* @__PURE__ */React.createElement(Text, {
+      variant: "body2",
+      weight: "400"
+    }, dropzoneText || /* @__PURE__ */React.createElement(React.Fragment, null, "Drag and drop image(s) here, or ", /* @__PURE__ */React.createElement("u", null, "choose image")))));
+  }), /* @__PURE__ */React.createElement(Confirmation, {
+    open: confirmDelete !== null,
+    severity: "destructive",
+    title: "Delete image?",
+    message: "Deleting this image will permanently remove it from the system. This action cannot be undone.",
+    onCancel: function onCancel() {
+      return setConfirmDelete(null);
+    },
+    onConfirm: handleDeleteConfirm,
+    confirmBtnText: "Delete"
+  }));
+}
+
+export { SortableGallery as default };

package/dist/esm/components/SortableGallery.styled.js

@@ -0,0 +1,12 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import { token } from '@tenancy.nz/ui';
+
+var _templateObject, _templateObject2;
+var StyledDropzone = styled("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 2px dashed ", ";\n    background: #fff;\n    margin: 24px 0 0 0;\n    padding: 32px 16px;\n    border-radius: ", "px;\n    color: ", ";\n    max-height: 176px;\n  "])), token("palette.semantic.border.accentColor"), theme.shape.borderRadius, token("palette.semantic.text.primaryColor"));
+});
+
+export { StyledDropzone as default };

package/dist/esm/components/SortableGalleryImage.js

@@ -0,0 +1,71 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import DeleteOutlinedIcon from '@tenancy.nz/icons/DeleteOutlined';
+import { AbsBox, IconButton } from '@tenancy.nz/ui';
+import GalleryDragHandle from './GalleryDragHandle.js';
+import GalleryImage from './GalleryImage.js';
+
+var _excluded = ["tag", "onDelete", "src", "uploading"];
+function SortableGalleryImage(_ref) {
+  var _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? void 0 : _ref$tag,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? void 0 : _ref$onDelete,
+    src = _ref.src,
+    _ref$uploading = _ref.uploading,
+    uploading = _ref$uploading === void 0 ? false : _ref$uploading,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useSortable = useSortable({
+      id: src
+    }),
+    attributes = _useSortable.attributes,
+    isDragging = _useSortable.isDragging,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    setDraggableNodeRef = _useSortable.setDraggableNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var styles = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition
+  };
+  var actions = function actions() {
+    if (!uploading && !isDragging) {
+      return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(AbsBox, {
+        display: "flex",
+        left: 8,
+        top: "50%",
+        sx: {
+          transform: "translateY(-50%)"
+        }
+      }, /* @__PURE__ */React.createElement(GalleryDragHandle, _objectSpread2(_objectSpread2(_objectSpread2({}, attributes), listeners), {}, {
+        ref: setDraggableNodeRef
+      }))), onDelete && /* @__PURE__ */React.createElement(AbsBox, {
+        display: "flex",
+        top: 8,
+        right: 8,
+        zIndex: 2
+      }, /* @__PURE__ */React.createElement(IconButton, {
+        onClick: onDelete,
+        color: "error",
+        variant: "contained"
+      }, /* @__PURE__ */React.createElement(DeleteOutlinedIcon, {
+        size: 20
+      }))));
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */React.createElement(GalleryImage, _objectSpread2({
+    ref: setNodeRef,
+    style: styles,
+    dragging: isDragging,
+    actions: actions(),
+    tag: tag,
+    src: src,
+    uploading: uploading
+  }, rest));
+}
+
+export { SortableGalleryImage as default };

package/dist/esm/index.js

@@ -1,4 +1,8 @@
 export { default as Gallery } from './components/Gallery.js';
+export { default as GalleryDragHandle } from './components/GalleryDragHandle.js';
+export { default as GalleryDragOverlay } from './components/GalleryDragOverlay.js';
 export { default as GalleryImage } from './components/GalleryImage.js';
 export { default as GalleryImageSkeleton } from './components/GalleryImageSkeleton.js';
 export { default as GalleryViewer } from './components/GalleryViewer.js';
+export { default as SortableGallery } from './components/SortableGallery.js';
+export { default as SortableGalleryImage } from './components/SortableGalleryImage.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tenancy.nz/gallery",
   "description": "React UI gallery components.",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "author": "TPS <https://www.tenancy.co.nz>",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -19,15 +19,21 @@
     "@mui/material": "^7.3.1",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@tenancy.nz/icons": "1.10.1",
-    "@tenancy.nz/ui": "1.10.1"
+    "@tenancy.nz/icons": "1.10.3",
+    "@tenancy.nz/ui": "1.10.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.3.1",
-    "@tenancy.nz/icons": "1.10.1",
-    "@tenancy.nz/ui": "1.10.1"
+    "@tenancy.nz/ui": "1.10.3",
+    "@tenancy.nz/icons": "1.10.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "react-dropzone": "^14.3.8"
   },
   "scripts": {
     "build": "tsx ../../scripts/build.js"