@quintoandar-tokko/gridimagepicker 1.0.17

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 One Loop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/ImageItem.js

@@ -0,0 +1,201 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+var _box = require("@quintoandar-tokko/box");
+var _icons = require("@quintoandar-tokko/icons");
+var _useSize3 = _interopRequireDefault(require("./hooks/useSize"));
+var _useAspectRatio3 = _interopRequireDefault(require("./hooks/useAspectRatio"));
+var _getTooltipErrorText = require("./utils/getTooltipErrorText");
+var _manageItem = require("./utils/manageItem");
+require("../styles/ImageItem.css");
+require("../styles/ImageItemBlanket.css");
+require("../styles/ImageItemCover.css");
+require("../styles/ImageItemSmallElements.css");
+require("../styles/ImageItemTooltip.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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 _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; } }
+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 _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 = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var ImageItem = function ImageItem(_ref) {
+  var item = _ref.item,
+    handleClick = _ref.handleClick,
+    handleUpdateItem = _ref.handleUpdateItem,
+    onEdit = _ref.onEdit,
+    status = _ref.status,
+    config = _ref.config,
+    texts = _ref.texts,
+    sizeFetcher = _ref.sizeFetcher;
+  var _useSortable = (0, _sortable.useSortable)({
+      id: item.id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var _useSize = (0, _useSize3["default"])(item.src, sizeFetcher),
+    _useSize2 = _slicedToArray(_useSize, 3),
+    size = _useSize2[0],
+    isLoadingSize = _useSize2[1],
+    isErrorSize = _useSize2[2];
+  var _useAspectRatio = (0, _useAspectRatio3["default"])(item.src),
+    _useAspectRatio2 = _slicedToArray(_useAspectRatio, 5),
+    height = _useAspectRatio2[0],
+    width = _useAspectRatio2[1],
+    aspectRatio = _useAspectRatio2[2],
+    isLoadingAspectRatio = _useAspectRatio2[3],
+    isErrorAspectRatio = _useAspectRatio2[4];
+  var wrapperRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)({
+      left: 0,
+      top: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipPosition = _useState2[0],
+    setTooltipPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isTooltipShowable = _useState4[0],
+    setIsTooltipShowable = _useState4[1];
+  var isDraggingActive = status.isDraggingActive,
+    isMaxSelectableReached = status.isMaxSelectableReached,
+    itemsAreReady = status.itemsAreReady;
+  var maxSizeInMB = config.maxSizeInMB,
+    minAspectRatio = config.minAspectRatio,
+    maxAspectRatio = config.maxAspectRatio;
+  var isLoading = item.loading;
+  var isError = item.sizeError || item.aspectRatioError || item.fetchError;
+  var isFizableError = !item.fetchError && onEdit;
+  var tooltipErrorText = (0, _getTooltipErrorText.getTooltipErrorText)(item, texts, onEdit);
+  var backgroundImage = item.loading || item.fetchError ? '' : "url(".concat(item.src, ")");
+  var unclickable = !(0, _manageItem.isItemClickable)(item, isMaxSelectableReached, itemsAreReady);
+  var disabled = (0, _manageItem.isDisabledCheckbox)(item, isMaxSelectableReached);
+  (0, _react.useEffect)(function () {
+    var handleHideTooltip = function handleHideTooltip() {
+      setIsTooltipShowable(false);
+    };
+    document.addEventListener('wheel', handleHideTooltip);
+    document.addEventListener('scroll', handleHideTooltip);
+    return function () {
+      document.removeEventListener('wheel', handleHideTooltip);
+      document.removeEventListener('scroll', handleHideTooltip);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var id = item.id;
+    var sizeError = !isNaN(maxSizeInMB) && size > maxSizeInMB;
+    var aspectRatioError = !isNaN(maxAspectRatio) && aspectRatio > maxAspectRatio || !isNaN(minAspectRatio) && aspectRatio < minAspectRatio;
+    var fetchError = isErrorSize || isErrorAspectRatio;
+    var loading = isLoadingSize || isLoadingAspectRatio;
+    handleUpdateItem({
+      id: id,
+      size: size,
+      sizeError: sizeError,
+      height: height,
+      width: width,
+      aspectRatio: aspectRatio,
+      aspectRatioError: aspectRatioError,
+      fetchError: fetchError,
+      loading: loading
+    });
+  }, [size, isLoadingSize, isErrorSize, aspectRatio, isLoadingAspectRatio, isErrorAspectRatio]);
+  var calculateTooltipPosition = function calculateTooltipPosition() {
+    var parent = document.querySelector('.gridImagePickerContainer');
+    var parentRects = parent.getBoundingClientRect();
+    var imageRects = wrapperRef.current.getBoundingClientRect();
+    var left = imageRects.left - parentRects.left + imageRects.width / 2;
+    var top = imageRects.top - parentRects.top;
+    setTooltipPosition({
+      left: left,
+      top: top
+    });
+  };
+  var handleMouseMove = function handleMouseMove() {
+    var shouldShowTooltip = Boolean(tooltipErrorText);
+    calculateTooltipPosition();
+    setIsTooltipShowable(shouldShowTooltip);
+  };
+  var handleEdit = function handleEdit(e) {
+    e.stopPropagation();
+    onEdit(item);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemOuterWrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+    ref: function ref(node) {
+      setNodeRef(node);
+      wrapperRef.current = node;
+    },
+    as: "button",
+    className: "imageItemWrapper",
+    onClick: function onClick() {
+      return isFizableError && isError ? onEdit(item) : handleClick(item);
+    },
+    onMouseMove: handleMouseMove,
+    "data-dragging": isDraggingActive,
+    __css: {
+      backgroundImage: backgroundImage
+    },
+    style: {
+      transform: _utilities.CSS.Transform.toString(transform),
+      transition: transition
+    }
+  }, attributes, listeners), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemBlanket",
+    "data-light": unclickable,
+    "data-dark": item.checked,
+    "data-grey": isError
+  }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemCount",
+    "data-visible": item.checked
+  }, item.position), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemCover",
+    "data-visible": item.position === 1
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemCoverText"
+  }, " ", texts.cover, " ")), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemCheckbox",
+    "data-active": item.checked,
+    "data-disabled": disabled,
+    "data-visible": !unclickable
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Check, {
+    className: "imageItemIconCheck",
+    color: "white"
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemError",
+    "data-visible": isError && !isLoading
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: "icon-error",
+    className: "imageItemIconError"
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemEdit",
+    "data-visible": isFizableError && !isLoading,
+    onClick: function onClick(e) {
+      return handleEdit(e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: "icon-editar",
+    className: "imageItemIconEdit"
+  }))), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "imageItemTooltip",
+    "data-showable": isTooltipShowable,
+    __css: {
+      left: tooltipPosition.left,
+      top: tooltipPosition.top
+    }
+  }, tooltipErrorText));
+};
+var _default = exports["default"] = ImageItem;

package/lib/hooks/useAspectRatio.js

@@ -0,0 +1,94 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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 _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; } }
+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 _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 = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function useAspectRatio(src) {
+  var _useState = (0, _react.useState)({
+      height: 0,
+      width: 0,
+      aspectRatio: 0,
+      loading: true,
+      error: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var fetchAspectRatio = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
+        var img;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              try {
+                setData({
+                  height: 0,
+                  width: 0,
+                  aspectRatio: 0,
+                  loading: true,
+                  error: false
+                });
+                img = new window.Image();
+                img.src = src;
+                img.onload = function () {
+                  var height = img.height;
+                  var width = img.width;
+                  var aspectRatio = img.width / img.height;
+                  setData({
+                    height: height,
+                    width: width,
+                    aspectRatio: aspectRatio,
+                    loading: false,
+                    error: false
+                  });
+                };
+                img.onerror = function (error) {
+                  console.error(error);
+                  setData({
+                    height: 0,
+                    width: 0,
+                    aspectRatio: 0,
+                    loading: false,
+                    error: true
+                  });
+                };
+              } catch (error) {
+                console.error(error);
+                setData({
+                  height: 0,
+                  width: 0,
+                  aspectRatio: 0,
+                  loading: false,
+                  error: true
+                });
+              }
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetchAspectRatio(_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    if (src) {
+      fetchAspectRatio(src);
+    }
+  }, [src]);
+  return [data.height, data.width, data.aspectRatio, data.loading, data.error];
+}
+var _default = exports["default"] = useAspectRatio;

package/lib/hooks/useGridImagePicker.js

@@ -0,0 +1,152 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _sortable = require("@dnd-kit/sortable");
+var _manageItem = require("../utils/manageItem");
+var _manageListOfItems = require("../utils/manageListOfItems");
+var _excluded = ["id"];
+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 _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(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 (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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 _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; } }
+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 _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 = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function useGridImagePicker(_ref) {
+  var listOfSrc = _ref.listOfSrc,
+    maxSelectablePreferenceByUser = _ref.maxSelectablePreferenceByUser,
+    maxSizeInMB = _ref.maxSizeInMB,
+    minAspectRatio = _ref.minAspectRatio,
+    maxAspectRatio = _ref.maxAspectRatio,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDraggingActive = _useState2[0],
+    setIsDraggingActive = _useState2[1];
+  var _useState3 = (0, _react.useState)(listOfSrc),
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialUrlList = _useState4[0],
+    setInitialUrlList = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    itemNewUrl = _useState6[0],
+    setItemNewUrl = _useState6[1];
+  var _useState7 = (0, _react.useState)(function () {
+      return (0, _manageListOfItems.getItemsInitialState)(listOfSrc);
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    items = _useState8[0],
+    setItems = _useState8[1];
+  (0, _react.useEffect)(function () {
+    setItemNewUrl((0, _manageListOfItems.getItemChanged)(initialUrlList, listOfSrc));
+  }, [listOfSrc]);
+  (0, _react.useEffect)(function () {
+    if (!itemNewUrl) return;
+    setItems(function (prevItems) {
+      return (0, _manageListOfItems.getItemsWithNewUrl)(prevItems, itemNewUrl);
+    });
+    setInitialUrlList(listOfSrc);
+    setItemNewUrl(null);
+  }, [itemNewUrl]);
+  var maxSelectable = Math.min(maxSelectablePreferenceByUser, items.filter(function (item) {
+    return !item.sizeError && !item.aspectRatioError && !item.fetchError;
+  }).length);
+  var numberOfCheckedItems = items.filter(function (item) {
+    return item.checked;
+  }).length;
+  var isMaxSelectableReached = numberOfCheckedItems >= maxSelectable;
+  var itemsAreReady = items.every(function (item) {
+    return !item.loading;
+  });
+  var config = {
+    maxSizeInMB: maxSizeInMB,
+    minAspectRatio: minAspectRatio,
+    maxAspectRatio: maxAspectRatio,
+    maxSelectable: maxSelectable
+  };
+  var status = {
+    isDraggingActive: isDraggingActive,
+    isMaxSelectableReached: isMaxSelectableReached,
+    itemsAreReady: itemsAreReady,
+    numberOfCheckedItems: numberOfCheckedItems
+  };
+  (0, _react.useEffect)(function () {
+    if (!onChange) return;
+    onChange(items);
+  }, [items]);
+  (0, _react.useEffect)(function () {
+    if (!itemsAreReady) return;
+    var updatedItems = (0, _manageListOfItems.fillCheckedItems)(items, maxSelectable);
+    setItems(updatedItems);
+  }, [itemsAreReady]);
+  var handleClickItem = function handleClickItem(targetItem) {
+    var isUnclickable = !(0, _manageItem.isItemClickable)(targetItem, isMaxSelectableReached, itemsAreReady);
+    if (isUnclickable) return;
+    var updatedItems = targetItem.checked ? (0, _manageListOfItems.getUpdatedItemsWithDecrement)(items, targetItem) : (0, _manageListOfItems.getUpdatedItemsWithIncrement)(items, targetItem);
+    var refreshedItems = (0, _manageListOfItems.refreshItemsPosition)(updatedItems);
+    setItems(refreshedItems);
+  };
+  var handleSelectAll = function handleSelectAll() {
+    var newItems = (0, _manageListOfItems.getSelectAllItems)(items, maxSelectable);
+    var refreshedItems = (0, _manageListOfItems.refreshItemsPosition)(newItems);
+    setItems(refreshedItems);
+  };
+  var handleDeselectAll = function handleDeselectAll() {
+    var newItems = (0, _manageListOfItems.getDeselectAllItems)(items);
+    setItems(newItems);
+  };
+  var handleUpdateItem = function handleUpdateItem(_ref2) {
+    var id = _ref2.id,
+      restOfKeys = _objectWithoutProperties(_ref2, _excluded);
+    setItems(function (prevItems) {
+      return prevItems.map(function (item) {
+        return item.id === id ? _objectSpread(_objectSpread({}, item), restOfKeys) : item;
+      });
+    });
+  };
+  var handleDragStart = function handleDragStart() {
+    setIsDraggingActive(true);
+  };
+  var handleDragEnd = function handleDragEnd(_ref3) {
+    var active = _ref3.active,
+      over = _ref3.over;
+    setIsDraggingActive(false);
+    if (active.id === over.id) return;
+    var oldIndex = items.findIndex(function (item) {
+      return item.id === active.id;
+    });
+    var newIndex = items.findIndex(function (item) {
+      return item.id === over.id;
+    });
+    var reorderedItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
+    var refreshedItems = (0, _manageListOfItems.refreshItemsPosition)(reorderedItems);
+    setItems(refreshedItems);
+  };
+  return {
+    attributes: {
+      items: items,
+      config: config,
+      status: status
+    },
+    methods: {
+      handleClickItem: handleClickItem,
+      handleUpdateItem: handleUpdateItem,
+      handleDeselectAll: handleDeselectAll,
+      handleSelectAll: handleSelectAll,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd
+    }
+  };
+}
+var _default = exports["default"] = useGridImagePicker;

package/lib/hooks/useSize.js

@@ -0,0 +1,98 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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 _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; } }
+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 _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 = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var defaultFetcher = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", window.fetch(url));
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function defaultFetcher(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+function useSize(src) {
+  var sizeFetcher = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultFetcher;
+  var _useState = (0, _react.useState)({
+      size: 0,
+      loading: true,
+      error: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var fetchImageSize = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(src) {
+        var response, blob, sizeInMegaBytes;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              setData({
+                size: 0,
+                loading: true,
+                error: false
+              });
+              _context2.next = 4;
+              return sizeFetcher(src);
+            case 4:
+              response = _context2.sent;
+              _context2.next = 7;
+              return response.blob();
+            case 7:
+              blob = _context2.sent;
+              sizeInMegaBytes = blob.size / 1024 / 1024;
+              setData({
+                size: sizeInMegaBytes,
+                loading: false,
+                error: false
+              });
+              _context2.next = 16;
+              break;
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](0);
+              console.error(_context2.t0);
+              setData({
+                size: 0,
+                loading: false,
+                error: true
+              });
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[0, 12]]);
+      }));
+      return function fetchImageSize(_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    if (src) {
+      fetchImageSize(src);
+    }
+  }, [src]);
+  return [data.size, data.loading, data.error];
+}
+var _default = exports["default"] = useSize;

package/lib/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.GridImagePicker = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _box = require("@quintoandar-tokko/box");
+var _ImageItem = _interopRequireDefault(require("./ImageItem"));
+var _useGridImagePicker2 = _interopRequireDefault(require("./hooks/useGridImagePicker"));
+require("../styles/GridImagePicker.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * A grid-based image picker component with sortable and selectable images.
+ *
+ * @param {Object} props - The props for GridImagePicker.
+ * @param {string[]} props.listOfSrc - Array of image URLs to display in the grid.
+ * @param {number} [props.maxSelectablePreferenceByUser=10] - Maximum number of images that can be selected by the user.
+ *        Default is 10. This value is a preference; if there are fewer images available than this number, it will adjust accordingly.
+ * @param {number} [props.maxSizeInMB=8] - Maximum size in megabytes for each image. Default is 8 MB. Images exceeding this limit will be marked as an error.
+ * @param {number} [props.minAspectRatio] - Minimum aspect ratio allowed for the images. Images that don't meet this ratio will be marked as an error.
+ * @param {number} [props.maxAspectRatio] - Maximum aspect ratio allowed for the images. Images that exceed this ratio will be marked as an error.
+ * @param {Function} [props.onChange] - Optional callback function invoked whenever the internal state of images changes.
+ *        Called with the updated list of items as `(items) => onChange(items)`.
+ * @param {Function} [props.sizeFetcher] - Optional fetch function to get the size of the images. Default: (src) => fetch(src)
+ * @param {Object} props.texts - Nested texts
+ */
+var GridImagePicker = exports.GridImagePicker = function GridImagePicker(_ref) {
+  var listOfSrc = _ref.listOfSrc,
+    _ref$maxSelectablePre = _ref.maxSelectablePreferenceByUser,
+    maxSelectablePreferenceByUser = _ref$maxSelectablePre === void 0 ? 10 : _ref$maxSelectablePre,
+    _ref$maxSizeInMB = _ref.maxSizeInMB,
+    maxSizeInMB = _ref$maxSizeInMB === void 0 ? 8 : _ref$maxSizeInMB,
+    minAspectRatio = _ref.minAspectRatio,
+    maxAspectRatio = _ref.maxAspectRatio,
+    onChange = _ref.onChange,
+    _ref$onEdit = _ref.onEdit,
+    onEdit = _ref$onEdit === void 0 ? null : _ref$onEdit,
+    texts = _ref.texts,
+    sizeFetcher = _ref.sizeFetcher;
+  var _useGridImagePicker = (0, _useGridImagePicker2["default"])({
+      listOfSrc: listOfSrc,
+      maxSelectablePreferenceByUser: maxSelectablePreferenceByUser,
+      maxSizeInMB: maxSizeInMB,
+      minAspectRatio: minAspectRatio,
+      maxAspectRatio: maxAspectRatio,
+      onChange: onChange
+    }),
+    attributes = _useGridImagePicker.attributes,
+    methods = _useGridImagePicker.methods;
+  var items = attributes.items,
+    config = attributes.config,
+    status = attributes.status;
+  var handleClickItem = methods.handleClickItem,
+    handleUpdateItem = methods.handleUpdateItem,
+    handleDeselectAll = methods.handleDeselectAll,
+    handleSelectAll = methods.handleSelectAll,
+    handleDragStart = methods.handleDragStart,
+    handleDragEnd = methods.handleDragEnd;
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  }));
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "gridImagePickerContainer"
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    className: "gridButtonsWrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    as: "button",
+    className: "gridButton gridButtonSelect",
+    onClick: handleSelectAll,
+    disabled: status.numberOfCheckedItems === config.maxSelectable || !status.itemsAreReady
+  }, "Seleccionar ", status.itemsAreReady ? config.maxSelectable : 0), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    as: "button",
+    className: "gridButton gridButtonDeselect",
+    onClick: handleDeselectAll,
+    disabled: status.numberOfCheckedItems === 0
+  }, "Deseleccionar todos")), /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
+    sensors: sensors,
+    collisionDetection: _core.closestCenter,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    autoScroll: false
+  }, /*#__PURE__*/_react["default"].createElement(_sortable.SortableContext, {
+    items: items,
+    strategy: _sortable.rectSortingStrategy
+  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    as: "section",
+    className: "gridImagePicker"
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_ImageItem["default"], {
+      key: item.id,
+      item: item,
+      status: status,
+      config: config,
+      handleClick: handleClickItem,
+      onEdit: onEdit,
+      handleUpdateItem: handleUpdateItem,
+      texts: texts,
+      sizeFetcher: sizeFetcher
+    });
+  })))));
+};
+var _default = exports["default"] = GridImagePicker;

package/lib/utils/getTooltipErrorText.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTooltipErrorText = void 0;
+var tooltipSizeErrorDefaultText = 'The file size exceeds the allowed limit';
+var tooltipAspectRatioErrorDefaultText = 'The aspect ratio of this image is not within the allowed range';
+var tooltipFetchErrorDefaultText = 'The image cannot be loaded';
+var tooltipImageEditionSuggestionText = 'Crop the image to publish it';
+var getTooltipErrorText = exports.getTooltipErrorText = function getTooltipErrorText(item, texts, editable) {
+  if (item.fetchError) {
+    var _texts$fetchError;
+    return (_texts$fetchError = texts.fetchError) !== null && _texts$fetchError !== void 0 ? _texts$fetchError : tooltipFetchErrorDefaultText;
+  }
+  if (item.sizeError && !editable) {
+    var _texts$sizeError;
+    return (_texts$sizeError = texts.sizeError) !== null && _texts$sizeError !== void 0 ? _texts$sizeError : tooltipSizeErrorDefaultText;
+  }
+  if (item.aspectRatioError && !editable) {
+    var _texts$aspectRatioErr;
+    return (_texts$aspectRatioErr = texts.aspectRatioError) !== null && _texts$aspectRatioErr !== void 0 ? _texts$aspectRatioErr : tooltipAspectRatioErrorDefaultText;
+  }
+  if ((item.aspectRatioError || item.sizeError) && editable) {
+    var _texts$cropImageSugge;
+    return (_texts$cropImageSugge = texts.cropImageSuggestion) !== null && _texts$cropImageSugge !== void 0 ? _texts$cropImageSugge : tooltipImageEditionSuggestionText;
+  }
+  return null;
+};

package/lib/utils/manageItem.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isItemClickable = exports.isDisabledCheckbox = void 0;
+var isItemClickable = exports.isItemClickable = function isItemClickable(item, isMaxSelectableReached, itemsAreReady) {
+  var loading = item.loading,
+    sizeError = item.sizeError,
+    fetchError = item.fetchError,
+    aspectRatioError = item.aspectRatioError,
+    checked = item.checked;
+  // easier to corroborate the opposite
+  var isUnclickable = loading || sizeError || fetchError || aspectRatioError || !checked && isMaxSelectableReached || !itemsAreReady;
+  return !isUnclickable;
+};
+var isDisabledCheckbox = exports.isDisabledCheckbox = function isDisabledCheckbox(item, isMaxSelectableReached) {
+  var sizeError = item.sizeError,
+    fetchError = item.fetchError,
+    aspectRatioError = item.aspectRatioError,
+    checked = item.checked;
+  var isDisabled = !sizeError && !fetchError && !aspectRatioError && !checked && isMaxSelectableReached;
+  return isDisabled;
+};

package/lib/utils/manageListOfItems.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.refreshItemsPosition = exports.getUpdatedItemsWithIncrement = exports.getUpdatedItemsWithDecrement = exports.getSelectAllItems = exports.getItemsWithNewUrl = exports.getItemsInitialState = exports.getItemChanged = exports.getDeselectAllItems = exports.fillCheckedItems = void 0;
+var _manageItem = require("./manageItem");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 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 _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var getItemsInitialState = exports.getItemsInitialState = function getItemsInitialState(listOfSrc) {
+  var initializedItem = listOfSrc.map(function (src, index) {
+    return {
+      id: index + 1,
+      src: src,
+      checked: false,
+      position: 0,
+      height: 0,
+      width: 0,
+      size: 0,
+      sizeError: false,
+      aspectRatio: 0,
+      aspectRatioError: false,
+      fetchError: false,
+      loading: true
+    };
+  });
+  return initializedItem;
+};
+var getItemsWithNewUrl = exports.getItemsWithNewUrl = function getItemsWithNewUrl(listOfItems, newUrlItem) {
+  var oldUrl = newUrlItem.oldUrl,
+    newUrl = newUrlItem.newUrl;
+  var updatedItems = listOfItems.map(function (item) {
+    if (item.src === oldUrl) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        src: newUrl,
+        hasNewUrl: true
+      });
+    }
+    return _objectSpread(_objectSpread({}, item), {}, {
+      hasNewUrl: false
+    });
+  });
+  return updatedItems;
+};
+var getUpdatedItemsWithIncrement = exports.getUpdatedItemsWithIncrement = function getUpdatedItemsWithIncrement(listOfItems, targetItem) {
+  var maxPosition = Math.max.apply(Math, _toConsumableArray(listOfItems.map(function (item) {
+    return item.position;
+  })));
+  var newItems = listOfItems.map(function (item) {
+    return item.id === targetItem.id ? _objectSpread(_objectSpread({}, targetItem), {}, {
+      checked: true,
+      position: maxPosition + 1
+    }) : item;
+  });
+  return newItems;
+};
+var getUpdatedItemsWithDecrement = exports.getUpdatedItemsWithDecrement = function getUpdatedItemsWithDecrement(listOfItems, targetItem) {
+  var targetItemPosition = targetItem.position;
+  var newItems = listOfItems.map(function (item) {
+    return item.id === targetItem.id ? _objectSpread(_objectSpread({}, item), {}, {
+      checked: false,
+      position: 0
+    }) : item.position > targetItemPosition ? _objectSpread(_objectSpread({}, item), {}, {
+      position: item.position - 1
+    }) : item;
+  });
+  return newItems;
+};
+var fillCheckedItems = exports.fillCheckedItems = function fillCheckedItems(listOfItems, maxSelectable) {
+  var items = _toConsumableArray(listOfItems);
+  var changed = false;
+
+  // Obtención de cambios de url y handleo en item afectado
+  items = items.map(function (item) {
+    if (item.hasNewUrl) {
+      changed = true;
+
+      // Deseleción de items con nueva url
+      if (item.checked) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          checked: false,
+          position: 0,
+          hasNewUrl: false
+        });
+      }
+      return _objectSpread(_objectSpread({}, item), {}, {
+        hasNewUrl: false
+      });
+    }
+    return item;
+  });
+
+  // Auto check en items cuando no hubo cambio de url
+  if (!changed) {
+    var updatedItems = [];
+    var nextPosition = 1;
+    var checkedCount = 0;
+    for (var index = 0; index < listOfItems.length; index++) {
+      var item = items[index];
+      var isSomeError = item.fetchError || item.sizeError || item.aspectRatioError;
+      var checked = checkedCount < maxSelectable && !isSomeError;
+      var position = 0;
+      if (checked) {
+        position = nextPosition;
+        nextPosition++;
+        checkedCount++;
+      }
+      updatedItems.push(_objectSpread(_objectSpread({}, item), {}, {
+        checked: checked,
+        position: position
+      }));
+    }
+    return updatedItems;
+  }
+
+  // Reorden de items en estado check cuando hubo cambios de url
+  var currentPosition = 1;
+  var reorderedItems = items.map(function (item) {
+    if (item.checked) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        position: currentPosition++
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        position: 0
+      });
+    }
+  });
+  return reorderedItems;
+};
+var refreshItemsPosition = exports.refreshItemsPosition = function refreshItemsPosition(items) {
+  var currentPosition = 1;
+  return items.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      position: item.checked ? currentPosition++ : 0
+    });
+  });
+};
+var getSelectAllItems = exports.getSelectAllItems = function getSelectAllItems(listOfItems, maxSelectable) {
+  var numberOfItemsAlreadyChecked = listOfItems.filter(function (item) {
+    return item.checked;
+  }).length;
+  var newMaxPosition = Math.max.apply(Math, _toConsumableArray(listOfItems.map(function (item) {
+    return item.position;
+  }))) + 1;
+  var isMaxSelectableReached = numberOfItemsAlreadyChecked >= maxSelectable;
+  var newItems = listOfItems.map(function (item) {
+    if (item.checked) return item;
+    if (isMaxSelectableReached) return item;
+    if (!(0, _manageItem.isItemClickable)(item, isMaxSelectableReached, true)) return item;
+    var newItem = _objectSpread(_objectSpread({}, item), {}, {
+      checked: true,
+      position: newMaxPosition
+    });
+    newMaxPosition++;
+    numberOfItemsAlreadyChecked++;
+    isMaxSelectableReached = numberOfItemsAlreadyChecked >= maxSelectable;
+    return newItem;
+  });
+  return newItems;
+};
+var getDeselectAllItems = exports.getDeselectAllItems = function getDeselectAllItems(listOfItems) {
+  return listOfItems.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      checked: false,
+      position: 0
+    });
+  });
+};
+var getItemChanged = exports.getItemChanged = function getItemChanged(originalList, newList) {
+  var length = Math.min(originalList.length, newList.length);
+  for (var i = 0; i < length; i++) {
+    if (originalList[i] !== newList[i]) {
+      return {
+        oldUrl: originalList[i],
+        newUrl: newList[i]
+      };
+    }
+  }
+  return null;
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@quintoandar-tokko/gridimagepicker",
+  "version": "1.0.17",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "lib",
+    "styles",
+    "hooks",
+    "utils"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@quintoandar-tokko/box": "^1.2.286",
+    "@quintoandar-tokko/icons": "^1.2.317"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "d33e426a17c29e62c8ea591ae6afa96300d55ad9"
+}

package/styles/GridImagePicker.css

@@ -0,0 +1,87 @@
+:root {
+  --gap-between-images: 16px;
+}
+
+.gridImagePickerContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+}
+
+.gridImagePicker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-between-images);
+  max-width: 550px;
+  min-width: unset !important;
+  width: 100%;
+}
+
+.gridButtonsWrapper {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.gridButton {
+  background-color: #FFF;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: "Nunito Sans";
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  outline: none;
+  padding: 8px 12px;
+  transition:
+    background-color 100ms linear,
+    border-color 100ms linear,
+    color 100ms linear,
+    filter 100ms linear
+  ;
+}
+
+.gridButtonSelect {
+  border-color: #1A4958;
+  color: #1A4958;
+}
+
+.gridButtonSelect:hover:not(:disabled),
+.gridButtonSelect:active {
+  background-color: #1A4958;
+  color: white;
+}
+
+.gridButtonSelect:focus {
+  border-color: #1B90D2;
+  color: #1A4958;
+}
+
+.gridButtonSelect:disabled {
+  border-color: #EAEEF1;
+  color: #94A2AB;
+  cursor: default;
+}
+
+.gridButtonDeselect {
+  color: #2E393F;
+}
+
+.gridButtonDeselect:hover:not(:disabled) {
+  background-color: #EAEEF1;
+  color: #2E393F;
+}
+
+.gridButtonDeselect:focus-visible:not(:disabled) {
+  background-color: #F3F6F8;
+  border-color: #1B90D2;
+  color: #2E393F;
+}
+
+.gridButtonDeselect:disabled {
+  background-color: #EAEEF1;
+  color: #94A2AB;
+  cursor: default;
+}

package/styles/ImageItem.css

@@ -0,0 +1,24 @@
+.imageItemWrapper {
+  align-items: center;
+  background-color: #EAEEF1;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  display: flex;
+  height: 120px;
+  justify-content: center;
+  padding: 0;
+  position: relative;
+  width: 120px;
+}
+
+.imageItemWrapper * {
+  pointer-events: none;
+}
+
+.imageItemWrapper[data-dragging="true"] {
+  cursor: grabbing;
+}

package/styles/ImageItemBlanket.css

@@ -0,0 +1,29 @@
+.imageItemBlanket {
+  border: 2px solid transparent;
+  border-radius: inherit;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  transition: opacity 100ms linear, background-color 100ms linear, border-color 100ms linear;
+  width: 100%
+}
+
+.imageItemBlanket[data-light="true"] {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-color: rgba(255, 255, 255, 0.5);
+  opacity: 1;
+}
+
+.imageItemBlanket[data-dark="true"] {
+  background-color: #1D23274D;
+  border-color: #1A4958;
+  opacity: 1;
+}
+
+.imageItemBlanket[data-grey="true"] {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-color: transparent;
+  opacity: 1;
+}

package/styles/ImageItemCover.css

@@ -0,0 +1,36 @@
+.imageItemCover {
+  align-items: flex-end;
+  background-color: transparent;
+  border: 2px solid transparent;
+  border-radius: 9px;
+  display: flex;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  transition: opacity 100ms linear;
+  width: 100%;
+  z-index: 1;
+}
+
+.imageItemCover[data-visible="true"] {
+  opacity: 1;
+}
+
+.imageItemCover[data-visible="true"] .imageItemCoverText {
+  color: #FFF;
+}
+
+.imageItemCoverText {
+  background-color: #1A4958;
+  border-radius: 0 0 6px 6px;
+  color: transparent;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 16px;
+  padding: 3px 0 5px;
+  transition: color 100ms linear 50ms;
+  width: 100%;
+  z-index: 1;
+}

package/styles/ImageItemSmallElements.css

@@ -0,0 +1,122 @@
+.imageItemCount {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 50%;
+  color: transparent;
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  height: 24px;
+  justify-content: center;
+  left: 8px;
+  line-height: 16px;
+  opacity: 0;
+  position: absolute;
+  top: 8px;
+  width: 24px;
+  z-index: 1;
+}
+
+.imageItemCount[data-visible='true'] {
+  color: #1d2327;
+  opacity: 1;
+}
+
+.imageItemCheckboxWrapper {
+  align-items: center;
+  background-color: #fff;
+  border-radius: 3px;
+  display: flex;
+  height: 16px;
+  justify-content: center;
+  width: 16px;
+  z-index: 1;
+}
+
+.imageItemCheckbox {
+  align-items: center;
+  background-color: #FFF;
+  border: 1px solid #C2CCD3;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px #FFF;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  opacity: 0;
+  padding: 2px;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  transition: background-color 100ms linear;
+  width: 20px;
+}
+
+.imageItemCheckbox[data-active="true"] {
+  background-color: #1B90D2;
+  border-color: #1B90D2;
+}
+
+.imageItemCheckbox[data-visible="true"] {
+  opacity: 1;
+}
+
+.imageItemCheckbox[data-disabled="true"] {
+  opacity: 0.5;
+  background-color: #F3F6F8;
+}
+
+.imageItemError {
+  align-items: center;
+  background-color: #DF1517;
+  border-radius: 8px;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  opacity: 0;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  transition: opacity 150ms ease-in;
+  width: 24px;
+  z-index: 1;
+}
+
+.imageItemError[data-visible="true"] {
+  opacity: 1;
+}
+
+.imageItemIconCheck {
+  color: #FFFFFF;
+  font-size: 14px;
+  min-width: unset!important;
+}
+
+.imageItemIconError {
+  color: #FFFFFF;
+  font-size: 20px;
+  min-width: unset !important;
+}
+.imageItemIconEdit {
+  font-size: 16px;
+  min-width: unset !important;
+}
+.imageItemEdit {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 8px;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  opacity: 0;
+  position: absolute;
+  right: 8px;
+  top: 36px;
+  transition: opacity 150ms ease-in;
+  width: 24px;
+  pointer-events: auto;
+  z-index: 1;
+}
+
+.imageItemEdit[data-visible='true'] {
+  opacity: 1;
+}

package/styles/ImageItemTooltip.css

@@ -0,0 +1,29 @@
+.imageItemTooltip {
+  background-color: #1D2327;
+  border-radius: 4px;
+  color: #FFFFFF;
+  display: flex;
+  font-family: "Nunito Sans";
+  font-size: 12px;
+  left: 50%;
+  line-height: 16px;
+  max-width: 240px;
+  opacity: 0;
+  padding: 4px 8px;
+  pointer-events: none;
+  position: absolute;
+  text-align: left;
+  top: 0;
+  transform: translate(-50%, -85%);
+  transition: opacity 100ms ease-out;
+  width: max-content;
+  z-index: 2;
+}
+
+.imageItemTooltip[data-showable="false"] {
+  display: none;
+}
+
+.imageItemOuterWrapper:hover .imageItemWrapper[data-dragging="false"] + .imageItemTooltip {
+  opacity: 1;
+}