@tenancy.nz/gallery 1.10.1

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.cjs

@@ -0,0 +1,131 @@
+'use strict';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+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 ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+exports.arrayLikeToArray = _arrayLikeToArray;
+exports.arrayWithHoles = _arrayWithHoles;
+exports.defineProperty = _defineProperty;
+exports.iterableToArrayLimit = _iterableToArrayLimit;
+exports.nonIterableRest = _nonIterableRest;
+exports.objectSpread2 = _objectSpread2;
+exports.objectWithoutProperties = _objectWithoutProperties;
+exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+exports.slicedToArray = _slicedToArray;
+exports.taggedTemplateLiteral = _taggedTemplateLiteral;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;
+exports.unsupportedIterableToArray = _unsupportedIterableToArray;

package/dist/cjs/components/Gallery.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var GalleryImage = require('./GalleryImage.cjs');
+var GalleryImageSkeleton = require('./GalleryImageSkeleton.cjs');
+var GalleryViewer = require('./GalleryViewer.cjs');
+var Gallery_styled = require('./Gallery.styled.cjs');
+
+function Gallery(_ref) {
+  var _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$infoText = _ref.infoText,
+    infoText = _ref$infoText === void 0 ? void 0 : _ref$infoText,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? void 0 : _ref$renderItem;
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    viewing = _useState2[0],
+    setViewing = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    viewingIndex = _useState4[0],
+    setViewingIndex = _useState4[1];
+  var handleImagePreview = function handleImagePreview(index) {
+    setViewingIndex(index);
+    setViewing(true);
+  };
+  var handleImagePreviewClose = function handleImagePreviewClose() {
+    setViewingIndex(0);
+    setViewing(false);
+  };
+  var handleImagePreviewChange = function handleImagePreviewChange(index) {
+    setViewingIndex(index);
+  };
+  return /* @__PURE__ */React.createElement(ui.Box, null, /* @__PURE__ */React.createElement(Gallery_styled.default, null, renderItem && images.map(function (image, i) {
+    return renderItem(_rollupPluginBabelHelpers.objectSpread2({
+      onClick: function onClick() {
+        return handleImagePreview(i);
+      }
+    }, image), i);
+  }), !renderItem && images.map(function (image, i) {
+    return /* @__PURE__ */React.createElement(GalleryImage.default, {
+      key: "".concat(image.path, "-").concat(i),
+      src: image.thumb,
+      onClick: function onClick() {
+        return handleImagePreview(i);
+      }
+    });
+  })), loading && /* @__PURE__ */React.createElement(Gallery_styled.default, null, /* @__PURE__ */React.createElement(GalleryImageSkeleton.default, {
+    amount: 7
+  })), infoText && /* @__PURE__ */React.createElement(ui.Alert, {
+    color: "warning",
+    sx: {
+      mt: 6
+    }
+  }, infoText), /* @__PURE__ */React.createElement(GalleryViewer.default, {
+    images: images,
+    open: viewing,
+    currentIndex: viewingIndex,
+    onClose: handleImagePreviewClose,
+    onChange: handleImagePreviewChange
+  }));
+}
+
+exports.default = Gallery;

package/dist/cjs/components/Gallery.styled.cjs

@@ -0,0 +1,15 @@
+'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 StyledGalleryGrid = styles.styled("div")(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-gap: 16px;\n\n    ", " {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    ", " {\n      grid-template-columns: repeat(6, 1fr);\n    }\n  "])), theme.breakpoints.up("sm"), theme.breakpoints.up("md"));
+});
+
+exports.default = StyledGalleryGrid;

package/dist/cjs/components/GalleryImage.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+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 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$dragging = _ref.dragging,
+    dragging = _ref$dragging === void 0 ? void 0 : _ref$dragging,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
+    src = _ref.src,
+    _ref$uploading = _ref.uploading,
+    uploading = _ref$uploading === void 0 ? false : _ref$uploading,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(GalleryImage_styled.default, _rollupPluginBabelHelpers.objectSpread2({
+    ref: ref,
+    dragging: dragging
+  }, rest), /* @__PURE__ */React.createElement(ui.Media, {
+    src: src
+  }), uploading && /* @__PURE__ */React.createElement(GalleryImage_styled.StyledGalleryImageOverlay, {
+    visible: true
+  }, /* @__PURE__ */React.createElement(ui.CircularProgress, {
+    color: "inherit",
+    size: 40
+  })), !uploading && (onClick || actions) && /* @__PURE__ */React.createElement(GalleryImage_styled.StyledGalleryImageOverlay, {
+    className: GalleryImage_styled.galleryImageOverlayClassName,
+    onClick: onClick
+  }, actions, onClick && /* @__PURE__ */React.createElement(ZoomInIcon, {
+    size: "inherit"
+  })), !uploading && caption && /* @__PURE__ */React.createElement(GalleryImage_styled.StyledGalleryImageText, null, caption));
+});
+
+exports.default = GalleryImage;

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

@@ -0,0 +1,35 @@
+'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, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var galleryImageOverlayClassName = "tps-gallery-image-overlay";
+var IMAGE_NO_FORWARD_PROPS = ["dragging"];
+var OVERLAY_NO_FORWARD_PROPS = ["visible"];
+var StyledGalleryImage = styles.styled("div", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !IMAGE_NO_FORWARD_PROPS.includes(prop);
+  }
+})(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var dragging = _ref.dragging,
+    theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n    height: 162px;\n    transform-origin: 50% 50%;\n    border-radius: 8px;\n    cursor: zoom-in;\n\n    &:first-child {\n      height: 156px;\n      grid-row-start: span 2;\n      grid-column-start: span 2;\n    }\n\n    ", " {\n      &:first-child {\n        height: 340px;\n      }\n    }\n\n    ", " {\n      &:nth-child(4n + 10) {\n        grid-column-start: 3;\n      }\n    }\n\n    ", "\n\n    &:hover .", " {\n      opacity: 1;\n      visibility: visible;\n      backface-visibility: visible;\n    }\n  "])), theme.breakpoints.up("sm"), theme.breakpoints.up("md"), dragging && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      opacity: 0.5;\n      transform-origin: 0 0;\n    "]))), galleryImageOverlayClassName);
+});
+var StyledGalleryImageOverlay = styles.styled("div", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !OVERLAY_NO_FORWARD_PROPS.includes(prop);
+  }
+})(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  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"])));
+
+exports.StyledGalleryImageOverlay = StyledGalleryImageOverlay;
+exports.StyledGalleryImageText = StyledGalleryImageText;
+exports.default = StyledGalleryImage;
+exports.galleryImageOverlayClassName = galleryImageOverlayClassName;

package/dist/cjs/components/GalleryImageSkeleton.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var GalleryImage_styled = require('./GalleryImage.styled.cjs');
+
+function GalleryImageSkeleton(_ref) {
+  var _ref$amount = _ref.amount,
+    amount = _ref$amount === void 0 ? 1 : _ref$amount;
+  return /* @__PURE__ */React.createElement(React.Fragment, null, Array(amount).fill(1).map(function (_, i) {
+    return /* @__PURE__ */React.createElement(GalleryImage_styled.default, {
+      key: "gallery-loading-image-".concat(i)
+    }, /* @__PURE__ */React.createElement(ui.Skeleton, {
+      width: "100%",
+      height: "100%",
+      variant: "rectangular"
+    }));
+  }));
+}
+
+exports.default = GalleryImageSkeleton;

package/dist/cjs/components/GalleryViewer.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var Modal = require('@mui/material/Modal');
+var ChevronLeftIcon = require('@tenancy.nz/icons/ChevronLeftOutlined');
+var ChevronRightIcon = require('@tenancy.nz/icons/ChevronRightOutlined');
+var CloseIcon = require('@tenancy.nz/icons/CloseOutlined');
+var GalleryViewer_styled = require('./GalleryViewer.styled.cjs');
+
+var _excluded = ["currentIndex", "images", "open", "onChange", "onClose"];
+function GalleryViewer(_ref) {
+  var _ref$currentIndex = _ref.currentIndex,
+    currentIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
+    images = _ref.images,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    onChange = _ref.onChange,
+    onClose = _ref.onClose,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var count = images.length;
+  var image = images[currentIndex];
+  var hasPrev = currentIndex > 0;
+  var hasNext = currentIndex < count - 1;
+  var handleNext = function handleNext() {
+    onChange(currentIndex + 1);
+  };
+  var handlePrev = function handlePrev() {
+    onChange(currentIndex - 1);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "ArrowRight" && hasNext) {
+      handleNext();
+    }
+    if (event.key === "ArrowLeft" && hasPrev) {
+      handlePrev();
+    }
+  };
+  var handleBackdropClick = function handleBackdropClick(event) {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */React.createElement(Modal, _rollupPluginBabelHelpers.objectSpread2({
+    open: open,
+    onClose: onClose,
+    onKeyDown: handleKeyDown,
+    hideBackdrop: true
+  }, rest), /* @__PURE__ */React.createElement(GalleryViewer_styled.StyledGalleryViewer, {
+    onClick: handleBackdropClick
+  }, /* @__PURE__ */React.createElement(GalleryViewer_styled.StyledGalleryViewerClose, {
+    type: "button",
+    "aria-label": "Close",
+    onClick: onClose
+  }, /* @__PURE__ */React.createElement(CloseIcon, {
+    size: "inherit"
+  })), hasPrev && /* @__PURE__ */React.createElement(GalleryViewer_styled.StyledGalleryViewerPrev, {
+    type: "button",
+    "aria-label": "Previous image",
+    onClick: handlePrev
+  }, /* @__PURE__ */React.createElement(ChevronLeftIcon, {
+    size: "inherit"
+  })), image && /* @__PURE__ */React.createElement(GalleryViewer_styled.StyledGalleryViewerFigure, null, /* @__PURE__ */React.createElement(GalleryViewer_styled.StyledGalleryViewerImage, {
+    src: image.path,
+    alt: image.caption || image.name || ""
+  }), /* @__PURE__ */React.createElement(GalleryViewer_styled.StyledGalleryViewerCaption, null, count > 1 && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", null, currentIndex + 1), /* @__PURE__ */React.createElement("span", null, "/"), /* @__PURE__ */React.createElement("div", null, count)))), hasNext && /* @__PURE__ */React.createElement(GalleryViewer_styled.StyledGalleryViewerNext, {
+    type: "button",
+    "aria-label": "Next image",
+    onClick: handleNext
+  }, /* @__PURE__ */React.createElement(ChevronRightIcon, {
+    size: "inherit"
+  }))));
+}
+
+exports.default = GalleryViewer;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+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, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var StyledGalleryViewer = styles.styled("div")(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 56px;\n  background: rgba(24, 27, 37, 0.85);\n  outline: none;\n"])));
+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 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);
+
+exports.StyledGalleryViewer = StyledGalleryViewer;
+exports.StyledGalleryViewerCaption = StyledGalleryViewerCaption;
+exports.StyledGalleryViewerClose = StyledGalleryViewerClose;
+exports.StyledGalleryViewerFigure = StyledGalleryViewerFigure;
+exports.StyledGalleryViewerImage = StyledGalleryViewerImage;
+exports.StyledGalleryViewerNext = StyledGalleryViewerNext;
+exports.StyledGalleryViewerPrev = StyledGalleryViewerPrev;

package/dist/cjs/index.cjs

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

package/dist/esm/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,117 @@
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+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 ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+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 };

package/dist/esm/components/Gallery.js

@@ -0,0 +1,67 @@
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useState } from 'react';
+import { Box, Alert } from '@tenancy.nz/ui';
+import GalleryImage from './GalleryImage.js';
+import GalleryImageSkeleton from './GalleryImageSkeleton.js';
+import GalleryViewer from './GalleryViewer.js';
+import StyledGalleryGrid from './Gallery.styled.js';
+
+function Gallery(_ref) {
+  var _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$infoText = _ref.infoText,
+    infoText = _ref$infoText === void 0 ? void 0 : _ref$infoText,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? void 0 : _ref$renderItem;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewing = _useState2[0],
+    setViewing = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    viewingIndex = _useState4[0],
+    setViewingIndex = _useState4[1];
+  var handleImagePreview = function handleImagePreview(index) {
+    setViewingIndex(index);
+    setViewing(true);
+  };
+  var handleImagePreviewClose = function handleImagePreviewClose() {
+    setViewingIndex(0);
+    setViewing(false);
+  };
+  var handleImagePreviewChange = function handleImagePreviewChange(index) {
+    setViewingIndex(index);
+  };
+  return /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(StyledGalleryGrid, null, renderItem && images.map(function (image, i) {
+    return renderItem(_objectSpread2({
+      onClick: function onClick() {
+        return handleImagePreview(i);
+      }
+    }, image), i);
+  }), !renderItem && images.map(function (image, i) {
+    return /* @__PURE__ */React.createElement(GalleryImage, {
+      key: "".concat(image.path, "-").concat(i),
+      src: image.thumb,
+      onClick: function onClick() {
+        return handleImagePreview(i);
+      }
+    });
+  })), loading && /* @__PURE__ */React.createElement(StyledGalleryGrid, null, /* @__PURE__ */React.createElement(GalleryImageSkeleton, {
+    amount: 7
+  })), infoText && /* @__PURE__ */React.createElement(Alert, {
+    color: "warning",
+    sx: {
+      mt: 6
+    }
+  }, infoText), /* @__PURE__ */React.createElement(GalleryViewer, {
+    images: images,
+    open: viewing,
+    currentIndex: viewingIndex,
+    onClose: handleImagePreviewClose,
+    onChange: handleImagePreviewChange
+  }));
+}
+
+export { Gallery as default };

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

@@ -0,0 +1,11 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+
+var _templateObject, _templateObject2;
+var StyledGalleryGrid = styled("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-gap: 16px;\n\n    ", " {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    ", " {\n      grid-template-columns: repeat(6, 1fr);\n    }\n  "])), theme.breakpoints.up("sm"), theme.breakpoints.up("md"));
+});
+
+export { StyledGalleryGrid as default };

package/dist/esm/components/GalleryImage.js

@@ -0,0 +1,39 @@
+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';
+
+var _excluded = ["actions", "caption", "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$dragging = _ref.dragging,
+    dragging = _ref$dragging === void 0 ? void 0 : _ref$dragging,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
+    src = _ref.src,
+    _ref$uploading = _ref.uploading,
+    uploading = _ref$uploading === void 0 ? false : _ref$uploading,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(StyledGalleryImage, _objectSpread2({
+    ref: ref,
+    dragging: dragging
+  }, rest), /* @__PURE__ */React.createElement(Media, {
+    src: src
+  }), uploading && /* @__PURE__ */React.createElement(StyledGalleryImageOverlay, {
+    visible: true
+  }, /* @__PURE__ */React.createElement(CircularProgress, {
+    color: "inherit",
+    size: 40
+  })), !uploading && (onClick || actions) && /* @__PURE__ */React.createElement(StyledGalleryImageOverlay, {
+    className: galleryImageOverlayClassName,
+    onClick: onClick
+  }, actions, onClick && /* @__PURE__ */React.createElement(ZoomInIcon, {
+    size: "inherit"
+  })), !uploading && caption && /* @__PURE__ */React.createElement(StyledGalleryImageText, null, caption));
+});
+
+export { GalleryImage as default };

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

@@ -0,0 +1,28 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var galleryImageOverlayClassName = "tps-gallery-image-overlay";
+var IMAGE_NO_FORWARD_PROPS = ["dragging"];
+var OVERLAY_NO_FORWARD_PROPS = ["visible"];
+var StyledGalleryImage = styled("div", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !IMAGE_NO_FORWARD_PROPS.includes(prop);
+  }
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var dragging = _ref.dragging,
+    theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n    height: 162px;\n    transform-origin: 50% 50%;\n    border-radius: 8px;\n    cursor: zoom-in;\n\n    &:first-child {\n      height: 156px;\n      grid-row-start: span 2;\n      grid-column-start: span 2;\n    }\n\n    ", " {\n      &:first-child {\n        height: 340px;\n      }\n    }\n\n    ", " {\n      &:nth-child(4n + 10) {\n        grid-column-start: 3;\n      }\n    }\n\n    ", "\n\n    &:hover .", " {\n      opacity: 1;\n      visibility: visible;\n      backface-visibility: visible;\n    }\n  "])), theme.breakpoints.up("sm"), theme.breakpoints.up("md"), dragging && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n      transform-origin: 0 0;\n    "]))), galleryImageOverlayClassName);
+});
+var StyledGalleryImageOverlay = styled("div", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !OVERLAY_NO_FORWARD_PROPS.includes(prop);
+  }
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  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"])));
+
+export { StyledGalleryImageOverlay, StyledGalleryImageText, StyledGalleryImage as default, galleryImageOverlayClassName };

package/dist/esm/components/GalleryImageSkeleton.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Skeleton } from '@tenancy.nz/ui';
+import StyledGalleryImage from './GalleryImage.styled.js';
+
+function GalleryImageSkeleton(_ref) {
+  var _ref$amount = _ref.amount,
+    amount = _ref$amount === void 0 ? 1 : _ref$amount;
+  return /* @__PURE__ */React.createElement(React.Fragment, null, Array(amount).fill(1).map(function (_, i) {
+    return /* @__PURE__ */React.createElement(StyledGalleryImage, {
+      key: "gallery-loading-image-".concat(i)
+    }, /* @__PURE__ */React.createElement(Skeleton, {
+      width: "100%",
+      height: "100%",
+      variant: "rectangular"
+    }));
+  }));
+}
+
+export { GalleryImageSkeleton as default };

package/dist/esm/components/GalleryViewer.js

@@ -0,0 +1,73 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import Modal from '@mui/material/Modal';
+import ChevronLeftIcon from '@tenancy.nz/icons/ChevronLeftOutlined';
+import ChevronRightIcon from '@tenancy.nz/icons/ChevronRightOutlined';
+import CloseIcon from '@tenancy.nz/icons/CloseOutlined';
+import { StyledGalleryViewer, StyledGalleryViewerClose, StyledGalleryViewerPrev, StyledGalleryViewerFigure, StyledGalleryViewerImage, StyledGalleryViewerCaption, StyledGalleryViewerNext } from './GalleryViewer.styled.js';
+
+var _excluded = ["currentIndex", "images", "open", "onChange", "onClose"];
+function GalleryViewer(_ref) {
+  var _ref$currentIndex = _ref.currentIndex,
+    currentIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
+    images = _ref.images,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    onChange = _ref.onChange,
+    onClose = _ref.onClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var count = images.length;
+  var image = images[currentIndex];
+  var hasPrev = currentIndex > 0;
+  var hasNext = currentIndex < count - 1;
+  var handleNext = function handleNext() {
+    onChange(currentIndex + 1);
+  };
+  var handlePrev = function handlePrev() {
+    onChange(currentIndex - 1);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "ArrowRight" && hasNext) {
+      handleNext();
+    }
+    if (event.key === "ArrowLeft" && hasPrev) {
+      handlePrev();
+    }
+  };
+  var handleBackdropClick = function handleBackdropClick(event) {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */React.createElement(Modal, _objectSpread2({
+    open: open,
+    onClose: onClose,
+    onKeyDown: handleKeyDown,
+    hideBackdrop: true
+  }, rest), /* @__PURE__ */React.createElement(StyledGalleryViewer, {
+    onClick: handleBackdropClick
+  }, /* @__PURE__ */React.createElement(StyledGalleryViewerClose, {
+    type: "button",
+    "aria-label": "Close",
+    onClick: onClose
+  }, /* @__PURE__ */React.createElement(CloseIcon, {
+    size: "inherit"
+  })), hasPrev && /* @__PURE__ */React.createElement(StyledGalleryViewerPrev, {
+    type: "button",
+    "aria-label": "Previous image",
+    onClick: handlePrev
+  }, /* @__PURE__ */React.createElement(ChevronLeftIcon, {
+    size: "inherit"
+  })), image && /* @__PURE__ */React.createElement(StyledGalleryViewerFigure, null, /* @__PURE__ */React.createElement(StyledGalleryViewerImage, {
+    src: image.path,
+    alt: image.caption || image.name || ""
+  }), /* @__PURE__ */React.createElement(StyledGalleryViewerCaption, null, count > 1 && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", null, currentIndex + 1), /* @__PURE__ */React.createElement("span", null, "/"), /* @__PURE__ */React.createElement("div", null, count)))), hasNext && /* @__PURE__ */React.createElement(StyledGalleryViewerNext, {
+    type: "button",
+    "aria-label": "Next image",
+    onClick: handleNext
+  }, /* @__PURE__ */React.createElement(ChevronRightIcon, {
+    size: "inherit"
+  }))));
+}
+
+export { GalleryViewer as default };

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

@@ -0,0 +1,16 @@
+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, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var StyledGalleryViewer = styled("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 56px;\n  background: rgba(24, 27, 37, 0.85);\n  outline: none;\n"])));
+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 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);
+
+export { StyledGalleryViewer, StyledGalleryViewerCaption, StyledGalleryViewerClose, StyledGalleryViewerFigure, StyledGalleryViewerImage, StyledGalleryViewerNext, StyledGalleryViewerPrev };

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export { default as Gallery } from './components/Gallery.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';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@tenancy.nz/gallery",
+  "description": "React UI gallery components.",
+  "version": "1.10.1",
+  "author": "TPS <https://www.tenancy.co.nz>",
+  "type": "module",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@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"
+  },
+  "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"
+  },
+  "scripts": {
+    "build": "tsx ../../scripts/build.js"
+  }
+}