@frollo/frollo-web-ui 9.0.1 → 9.0.2

package/esm/index-eP2GMSdQ.js

@@ -0,0 +1,755 @@
+import { c as _asyncToGenerator, d as _regeneratorRuntime, a as _slicedToArray, b as _toConsumableArray } from './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import { h, render as render$1, defineComponent, ref, shallowRef, onBeforeUnmount, computed, watch, nextTick, resolveComponent, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, toDisplayString, withCtx, withModifiers, normalizeClass, createCommentVNode, createTextVNode } from 'vue';
+import { e as render$2, f as render$3, g as render$4, h as render$5, i as render$6, j as render$7 } from './index-DHyRsKsZ.js';
+import { FwModal as __default__ } from './fw-modal.js';
+import './fw-button.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import { s as script$1 } from './fw-button-DZTHZLjk.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var getVueComponentHtml = function getVueComponentHtml(component, props) {
+  var myVNode = h(component, props);
+  var tempElement = document.createElement('div'); // Create a temporary DOM element
+  render$1(myVNode, tempElement); // Render the VNode into the temporary element
+  var componentHtmlString = tempElement.innerHTML; // Get the HTML string
+  return componentHtmlString;
+};
+
+var script = defineComponent({
+  name: 'MediaPicker',
+  components: {
+    FwModal: __default__,
+    FwButton: script$1,
+    ArrowRotateSvg: render$7,
+    CloudArrowUpSvg: render$6,
+    GuideSvg: render$5,
+    LoadingSvg: render$4,
+    PenSvg: render$3,
+    PlusSvg: render$2
+  },
+  emits: [/** Fired when media is selected */
+  'selected'],
+  props: {
+    /**
+     * The accepted file types for the media picker
+     */
+    acceptedFileTypes: {
+      type: String,
+      "default": 'image/png, image/jpeg'
+    },
+    /**
+     * The maximum file size in bytes. Default 8 MB
+     */
+    maxFileSize: {
+      type: Number,
+      "default": 8 * 1024 * 1024
+    },
+    /**
+     * The title of the picker tile
+     */
+    title: {
+      type: String
+    },
+    /**
+     * The image URL to display in the media picker
+     */
+    imageUrl: {
+      type: String
+    },
+    /**
+     * The header text for the upload modal
+     */
+    uploadHeaderText: {
+      type: String,
+      "default": 'Upload Image'
+    },
+    /**
+     * The header text for the edit modal
+     */
+    editHeaderText: {
+      type: String,
+      "default": 'Edit Image'
+    }
+  },
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    // State
+    var isSelectMediaModalOpen = ref(false);
+    var isEditMediaModalOpen = ref(false);
+    var fileInput = ref(null);
+    var editorCanvas = ref(null);
+    var selectedFile = shallowRef(null);
+    var bitmap = shallowRef(null);
+    var dragging = ref(false);
+    var loading = ref(false);
+    var _useColours = useColours(),
+      colorSuccessNew = _useColours.colorSuccessNew;
+    // preview URL w/ cleanup
+    var previewUrl = ref(null);
+    onBeforeUnmount(function () {
+      var _bitmap$value, _bitmap$value$close;
+      if (previewUrl.value) URL.revokeObjectURL(previewUrl.value);
+      (_bitmap$value = bitmap.value) === null || _bitmap$value === void 0 || (_bitmap$value$close = _bitmap$value.close) === null || _bitmap$value$close === void 0 || _bitmap$value$close.call(_bitmap$value);
+    });
+    // File validation / display helpers
+    var acceptedTypes = computed(function () {
+      return props.acceptedFileTypes.split(',').map(function (t) {
+        return t.trim();
+      });
+    });
+    var isInvalidFile = computed(function () {
+      var f = selectedFile.value;
+      if (!f) return false;
+      return f.size > props.maxFileSize || !acceptedTypes.value.includes(f.type);
+    });
+    var previewImageUrl = computed(function () {
+      var _previewUrl$value;
+      return (_previewUrl$value = previewUrl.value) !== null && _previewUrl$value !== void 0 ? _previewUrl$value : undefined;
+    });
+    var acceptedFileTypesText = computed(function () {
+      return props.acceptedFileTypes.split(',').map(function (type) {
+        return type.replace('image/', '').toUpperCase().trim();
+      }).join(', ');
+    });
+    var maxFileSizeText = computed(function () {
+      var sizeInMB = Math.floor(props.maxFileSize / (1024 * 1024));
+      return "".concat(sizeInMB, "MB");
+    });
+    // File selection / drag drop
+    var openFilePicker = function openFilePicker() {
+      var _fileInput$value;
+      return (_fileInput$value = fileInput.value) === null || _fileInput$value === void 0 ? void 0 : _fileInput$value.click();
+    };
+    var setFile = function setFile(file) {
+      selectedFile.value = file;
+      // Revoke old preview URL, create new
+      if (previewUrl.value) URL.revokeObjectURL(previewUrl.value);
+      previewUrl.value = file ? URL.createObjectURL(file) : null;
+    };
+    var fileSelected = function fileSelected(event) {
+      var _target$files$, _target$files;
+      var target = event.target;
+      var file = (_target$files$ = (_target$files = target.files) === null || _target$files === void 0 ? void 0 : _target$files[0]) !== null && _target$files$ !== void 0 ? _target$files$ : null;
+      setFile(file);
+      if (file && !isInvalidFile.value) showEditor();
+    };
+    var dragDropFile = function dragDropFile(event) {
+      var _event$dataTransfer$f, _event$dataTransfer;
+      var file = (_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 || (_event$dataTransfer = _event$dataTransfer.files) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer[0]) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : null;
+      setFile(file);
+      dragging.value = false;
+      if (file && !isInvalidFile.value) showEditor();
+    };
+    //  Sync from imageUrl prop (watch the prop directly)
+    var fetchToken = 0;
+    watch(function () {
+      return props.imageUrl;
+    }, /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
+        var _bitmap$value2, _bitmap$value2$close, myToken, res, blob, mimeType, file;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (url) {
+                _context.next = 5;
+                break;
+              }
+              setFile(null);
+              (_bitmap$value2 = bitmap.value) === null || _bitmap$value2 === void 0 || (_bitmap$value2$close = _bitmap$value2.close) === null || _bitmap$value2$close === void 0 || _bitmap$value2$close.call(_bitmap$value2);
+              bitmap.value = null;
+              return _context.abrupt("return");
+            case 5:
+              myToken = ++fetchToken;
+              loading.value = true;
+              _context.prev = 7;
+              _context.next = 10;
+              return fetch(url);
+            case 10:
+              res = _context.sent;
+              _context.next = 13;
+              return res.blob();
+            case 13:
+              blob = _context.sent;
+              mimeType = res.headers.get('Content-Type') || blob.type;
+              file = new File([blob], 'image', {
+                type: mimeType
+              });
+              if (!(myToken !== fetchToken)) {
+                _context.next = 18;
+                break;
+              }
+              return _context.abrupt("return");
+            case 18:
+              // stale fetch
+              setFile(file);
+              _context.next = 24;
+              break;
+            case 21:
+              _context.prev = 21;
+              _context.t0 = _context["catch"](7);
+              console.error('Error fetching image:', _context.t0);
+            case 24:
+              _context.prev = 24;
+              if (myToken === fetchToken) loading.value = false;
+              return _context.finish(24);
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[7, 21, 24, 27]]);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), {
+      immediate: true
+    });
+    // Decode bitmap once per file
+    var decodeToken = 0;
+    watch(selectedFile, /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file) {
+        var _bitmap$value3, _bitmap$value3$close;
+        var myToken, bm, _bm$close;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              (_bitmap$value3 = bitmap.value) === null || _bitmap$value3 === void 0 || (_bitmap$value3$close = _bitmap$value3.close) === null || _bitmap$value3$close === void 0 || _bitmap$value3$close.call(_bitmap$value3);
+              bitmap.value = null;
+              if (file) {
+                _context2.next = 4;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 4:
+              myToken = ++decodeToken;
+              _context2.prev = 5;
+              _context2.next = 8;
+              return createImageBitmap(file);
+            case 8:
+              bm = _context2.sent;
+              if (!(myToken !== decodeToken)) {
+                _context2.next = 12;
+                break;
+              }
+              (_bm$close = bm.close) === null || _bm$close === void 0 || _bm$close.call(bm);
+              return _context2.abrupt("return");
+            case 12:
+              bitmap.value = bm;
+              if (isEditMediaModalOpen.value) scheduleDraw();
+              _context2.next = 19;
+              break;
+            case 16:
+              _context2.prev = 16;
+              _context2.t0 = _context2["catch"](5);
+              console.error('Error decoding bitmap:', _context2.t0);
+            case 19:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[5, 16]]);
+      }));
+      return function (_x2) {
+        return _ref3.apply(this, arguments);
+      };
+    }(), {
+      immediate: true
+    });
+    // Canvas editing logic
+    var imageX = ref(0);
+    var imageY = ref(0);
+    var scaledWidth = ref(0);
+    var scaledHeight = ref(0);
+    var interaction = ref({
+      type: null,
+      startX: 0,
+      startY: 0,
+      startImgX: 0,
+      startImgY: 0,
+      startW: 0,
+      startH: 0,
+      offsetX: 0,
+      offsetY: 0
+    });
+    var isEditingImage = ref(false);
+    var pointerType = {
+      'top-left': 'nwse-resize',
+      'top-right': 'nesw-resize',
+      'bottom-left': 'nesw-resize',
+      'bottom-right': 'nwse-resize',
+      inside: 'move'
+    };
+    var detectHandle = function detectHandle(px, py) {
+      var squareSize = 5;
+      var x = imageX.value;
+      var y = imageY.value;
+      var w = scaledWidth.value;
+      var h = scaledHeight.value;
+      if (px < x || px > x + w || py < y || py > y + h) return null;
+      if (px <= x + squareSize && py <= y + squareSize) return 'top-left';
+      if (px >= x + w - squareSize && py <= y + squareSize) return 'top-right';
+      if (px <= x + squareSize && py >= y + h - squareSize) return 'bottom-left';
+      if (px >= x + w - squareSize && py >= y + h - squareSize) return 'bottom-right';
+      return 'inside';
+    };
+    // RAF batching for pointermove redraws
+    var rafId = null;
+    var scheduleDraw = function scheduleDraw() {
+      var save = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              rafId = null;
+              _context3.next = 3;
+              return drawImageOnCanvas(save);
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      })));
+    };
+    var drawImageOnCanvas = /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        var save,
+          canvas,
+          bm,
+          ctx,
+          imgW,
+          imgH,
+          cW,
+          cH,
+          scale,
+          squareSize,
+          half,
+          corners,
+          _i,
+          _corners,
+          _corners$_i,
+          cx,
+          cy,
+          _args4 = arguments;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              save = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : false;
+              canvas = editorCanvas.value;
+              bm = bitmap.value;
+              if (!(!canvas || !bm)) {
+                _context4.next = 5;
+                break;
+              }
+              return _context4.abrupt("return");
+            case 5:
+              ctx = canvas.getContext('2d');
+              if (ctx) {
+                _context4.next = 8;
+                break;
+              }
+              return _context4.abrupt("return");
+            case 8:
+              imgW = bm.width, imgH = bm.height;
+              cW = canvas.width, cH = canvas.height;
+              ctx.clearRect(0, 0, cW, cH);
+              // initialize position/scale on first draw
+              if (imageX.value === 0 && imageY.value === 0 && scaledWidth.value === 0 && scaledHeight.value === 0) {
+                scale = Math.min(cW / imgW, cH / imgH);
+                scaledWidth.value = imgW * scale;
+                scaledHeight.value = imgH * scale;
+                imageX.value = cW / 2 - scaledWidth.value / 2;
+                imageY.value = cH / 2 - scaledHeight.value / 2;
+              }
+              ctx.drawImage(bm, imageX.value, imageY.value, scaledWidth.value, scaledHeight.value);
+              if (!save) {
+                ctx.strokeStyle = colorSuccessNew;
+                ctx.lineWidth = 2;
+                ctx.strokeRect(imageX.value, imageY.value, scaledWidth.value, scaledHeight.value);
+                squareSize = 5;
+                half = squareSize / 2;
+                corners = [[imageX.value - half, imageY.value - half], [imageX.value + scaledWidth.value - half, imageY.value - half], [imageX.value - half, imageY.value + scaledHeight.value - half], [imageX.value + scaledWidth.value - half, imageY.value + scaledHeight.value - half]];
+                ctx.fillStyle = colorSuccessNew;
+                for (_i = 0, _corners = corners; _i < _corners.length; _i++) {
+                  _corners$_i = _slicedToArray(_corners[_i], 2), cx = _corners$_i[0], cy = _corners$_i[1];
+                  ctx.fillRect(cx, cy, squareSize, squareSize);
+                }
+              }
+            case 14:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function drawImageOnCanvas() {
+        return _ref5.apply(this, arguments);
+      };
+    }();
+    var showEditor = function showEditor() {
+      isSelectMediaModalOpen.value = false;
+      isEditMediaModalOpen.value = true;
+      nextTick(function () {
+        return scheduleDraw();
+      });
+    };
+    var startEditImage = function startEditImage(e) {
+      if (e.button !== 0) return;
+      var canvas = editorCanvas.value;
+      if (!canvas) return;
+      var type = detectHandle(e.offsetX, e.offsetY);
+      if (!type) return;
+      isEditingImage.value = true;
+      interaction.value.type = type;
+      interaction.value.startX = e.offsetX;
+      interaction.value.startY = e.offsetY;
+      interaction.value.startImgX = imageX.value;
+      interaction.value.startImgY = imageY.value;
+      interaction.value.startW = scaledWidth.value;
+      interaction.value.startH = scaledHeight.value;
+      if (type === 'inside') {
+        interaction.value.offsetX = e.offsetX - imageX.value;
+        interaction.value.offsetY = e.offsetY - imageY.value;
+      }
+      canvas.setPointerCapture(e.pointerId);
+    };
+    var stopEditImage = function stopEditImage(e) {
+      var _editorCanvas$value;
+      isEditingImage.value = false;
+      interaction.value.type = null;
+      (_editorCanvas$value = editorCanvas.value) === null || _editorCanvas$value === void 0 || _editorCanvas$value.releasePointerCapture(e.pointerId);
+      if (editorCanvas.value) editorCanvas.value.style.cursor = 'default';
+    };
+    var editImage = function editImage(e) {
+      var canvas = editorCanvas.value;
+      if (!canvas) return;
+      if (!isEditingImage.value) {
+        var _type = detectHandle(e.offsetX, e.offsetY);
+        canvas.style.cursor = _type ? pointerType[_type] : 'default';
+        return;
+      }
+      var type = interaction.value.type;
+      if (!type) return;
+      if (type === 'inside') {
+        imageX.value = e.offsetX - interaction.value.offsetX;
+        imageY.value = e.offsetY - interaction.value.offsetY;
+      } else {
+        var dx = e.offsetX - interaction.value.startX;
+        var dy = e.offsetY - interaction.value.startY;
+        switch (type) {
+          case 'top-left':
+            imageX.value = interaction.value.startImgX + dx;
+            imageY.value = interaction.value.startImgY + dy;
+            scaledWidth.value = interaction.value.startW - dx;
+            scaledHeight.value = interaction.value.startH - dy;
+            break;
+          case 'top-right':
+            imageY.value = interaction.value.startImgY + dy;
+            scaledWidth.value = interaction.value.startW + dx;
+            scaledHeight.value = interaction.value.startH - dy;
+            break;
+          case 'bottom-left':
+            imageX.value = interaction.value.startImgX + dx;
+            scaledWidth.value = interaction.value.startW - dx;
+            scaledHeight.value = interaction.value.startH + dy;
+            break;
+          case 'bottom-right':
+            scaledWidth.value = interaction.value.startW + dx;
+            scaledHeight.value = interaction.value.startH + dy;
+            break;
+        }
+        var MIN_SIZE = 10;
+        scaledWidth.value = Math.max(scaledWidth.value, MIN_SIZE);
+        scaledHeight.value = Math.max(scaledHeight.value, MIN_SIZE);
+      }
+      scheduleDraw();
+    };
+    // Actions
+    var clearEdits = function clearEdits() {
+      imageX.value = 0;
+      imageY.value = 0;
+      scaledWidth.value = 0;
+      scaledHeight.value = 0;
+    };
+    var change = function change() {
+      clearEdits();
+      setFile(null);
+      isSelectMediaModalOpen.value = true;
+      isEditMediaModalOpen.value = false;
+    };
+    var reset = function reset() {
+      clearEdits();
+      scheduleDraw();
+    };
+    var save = /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+        var canvas;
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              canvas = editorCanvas.value;
+              if (canvas) {
+                _context5.next = 3;
+                break;
+              }
+              return _context5.abrupt("return");
+            case 3:
+              _context5.next = 5;
+              return drawImageOnCanvas(true);
+            case 5:
+              canvas.toBlob(function (blob) {
+                if (!blob) return;
+                var file = new File([blob], 'edited-image.png', {
+                  type: 'image/png'
+                });
+                setFile(file);
+                emit('selected', file);
+                isEditMediaModalOpen.value = false;
+                clearEdits();
+              }, 'image/png');
+            case 6:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }));
+      return function save() {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+    return {
+      previewImageUrl: previewImageUrl,
+      fileInput: fileInput,
+      editorCanvas: editorCanvas,
+      isSelectMediaModalOpen: isSelectMediaModalOpen,
+      isEditMediaModalOpen: isEditMediaModalOpen,
+      acceptedFileTypesText: acceptedFileTypesText,
+      maxFileSizeText: maxFileSizeText,
+      openFilePicker: openFilePicker,
+      fileSelected: fileSelected,
+      dragging: dragging,
+      loading: loading,
+      dragDropFile: dragDropFile,
+      isInvalidFile: isInvalidFile,
+      showEditor: showEditor,
+      change: change,
+      reset: reset,
+      save: save,
+      startEditImage: startEditImage,
+      stopEditImage: stopEditImage,
+      editImage: editImage
+    };
+  }
+});
+
+var _hoisted_1 = ["accept"];
+var _hoisted_2 = {
+  "class": "cursor-pointer w-[160px] h-[160px] bg-white"
+};
+var _hoisted_3 = ["src"];
+var _hoisted_4 = {
+  key: 1,
+  "class": "flex flex-col w-full h-full items-center justify-center gap-2 border border-grey-100 rounded"
+};
+var _hoisted_5 = {
+  "class": "text-brand-text3 group-hover:text-brand-text2"
+};
+var _hoisted_6 = {
+  "class": "pt-[23px] px-4 pb-2 mb-0 text-left"
+};
+var _hoisted_7 = {
+  "class": "h-[360px] px-10 pb-10"
+};
+var _hoisted_8 = {
+  key: 0,
+  "class": "text-error"
+};
+var _hoisted_9 = {
+  "class": "pt-[23px] px-4 pb-2 mb-0 text-left"
+};
+var _hoisted_10 = {
+  "class": "flex flex-col items-center justify-center p-10 bg-black gap-1"
+};
+var _hoisted_11 = {
+  "class": "w-[300px] h-[300px] rounded bg-white relative"
+};
+var _hoisted_12 = {
+  "class": "flex px-6 py-4 gap-2 w-full justify-between flex-col sm:flex-row"
+};
+var _hoisted_13 = {
+  "class": "flex justify-start gap-2 flex-col sm:flex-row"
+};
+var _hoisted_14 = {
+  "class": "flex flex-row items-center gap-2"
+};
+var _hoisted_15 = {
+  "class": "flex justify-end flex-col sm:flex-row"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_PenSvg = resolveComponent("PenSvg");
+  var _component_LoadingSvg = resolveComponent("LoadingSvg");
+  var _component_PlusSvg = resolveComponent("PlusSvg");
+  var _component_CloudArrowUpSvg = resolveComponent("CloudArrowUpSvg");
+  var _component_FwButton = resolveComponent("FwButton");
+  var _component_FwModal = resolveComponent("FwModal");
+  var _component_GuideSvg = resolveComponent("GuideSvg");
+  var _component_ArrowRotateSvg = resolveComponent("ArrowRotateSvg");
+  return openBlock(), createElementBlock(Fragment, null, [createElementVNode("input", {
+    ref: "fileInput",
+    type: "file",
+    accept: _ctx.acceptedFileTypes,
+    "class": "hidden",
+    onChange: _cache[0] || (_cache[0] = function () {
+      return _ctx.fileSelected && _ctx.fileSelected.apply(_ctx, arguments);
+    })
+  }, null, 40, _hoisted_1), createElementVNode("div", _hoisted_2, [_ctx.previewImageUrl ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    "class": "w-full h-full relative",
+    onClick: _cache[1] || (_cache[1] = function () {
+      return _ctx.showEditor && _ctx.showEditor.apply(_ctx, arguments);
+    })
+  }, [createVNode(_component_PenSvg, {
+    name: "pen",
+    "class": "absolute bottom-[-8px] right-[-8px] w-8 h-8 p-2 text-white bg-primary rounded-full"
+  }), createElementVNode("img", {
+    src: _ctx.previewImageUrl,
+    "class": "object-cover rounded w-full h-full"
+  }, null, 8, _hoisted_3)])) : _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(_component_LoadingSvg, {
+    name: "loading",
+    "class": "w-8 h-8 text-brand-text2 animate-spin"
+  })])) : (openBlock(), createElementBlock("div", {
+    key: 2,
+    "class": "fw-media-picker--empty group",
+    onClick: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.isSelectMediaModalOpen = true;
+    })
+  }, [createVNode(_component_PlusSvg, {
+    name: "plus",
+    "class": "w-8 h-8 p-1 text-brand-text3 rounded-full border border-brand-text3 group-hover:border-brand-text2 group-hover:text-brand-text2"
+  }), createElementVNode("p", _hoisted_5, toDisplayString(_ctx.title), 1)]))]), createVNode(_component_FwModal, {
+    modelValue: _ctx.isSelectMediaModalOpen,
+    "onUpdate:modelValue": _cache[7] || (_cache[7] = function ($event) {
+      return _ctx.isSelectMediaModalOpen = $event;
+    }),
+    "show-confirm": false,
+    "show-cancel": false,
+    "show-close-button": true,
+    padding: false,
+    "footer-class": "px-4 pb-8",
+    onCancel: _cache[8] || (_cache[8] = function ($event) {
+      return _ctx.isSelectMediaModalOpen = false;
+    })
+  }, {
+    header: withCtx(function () {
+      return [createElementVNode("h4", _hoisted_6, toDisplayString(_ctx.uploadHeaderText), 1)];
+    }),
+    body: withCtx(function () {
+      return [createElementVNode("div", _hoisted_7, [createElementVNode("div", {
+        "class": normalizeClass(["flex flex-col border border-1 border-dashed border-grey-40 rounded h-full items-center justify-center gap-1 bg-white", {
+          'border-primary !bg-grey-40/60': _ctx.dragging,
+          '!border-error': _ctx.isInvalidFile
+        }]),
+        onDragenter: _cache[3] || (_cache[3] = withModifiers(function ($event) {
+          return _ctx.dragging = true;
+        }, ["prevent"])),
+        onDragover: _cache[4] || (_cache[4] = withModifiers(function ($event) {
+          return _ctx.dragging = true;
+        }, ["prevent"])),
+        onDragleave: _cache[5] || (_cache[5] = withModifiers(function ($event) {
+          return _ctx.dragging = false;
+        }, ["prevent"])),
+        onDrop: _cache[6] || (_cache[6] = withModifiers(function () {
+          return _ctx.dragDropFile && _ctx.dragDropFile.apply(_ctx, arguments);
+        }, ["prevent"]))
+      }, [createVNode(_component_CloudArrowUpSvg, {
+        name: "cloud-arrow-up",
+        "class": "w-12 h-12 p-1 text-grey-80"
+      }), createElementVNode("p", null, [_cache[15] || (_cache[15] = createTextVNode(" Select file to ", -1)), createVNode(_component_FwButton, {
+        variant: "link",
+        onClick: withModifiers(_ctx.openFilePicker, ["prevent"])
+      }, {
+        "default": withCtx(function () {
+          return _toConsumableArray(_cache[14] || (_cache[14] = [createTextVNode("upload", -1)]));
+        }),
+        _: 1
+      }, 8, ["onClick"]), _cache[16] || (_cache[16] = createTextVNode(" or drag-and-drop a file. ", -1)), _cache[17] || (_cache[17] = createElementVNode("br", null, null, -1)), createElementVNode("span", null, toDisplayString(_ctx.acceptedFileTypesText) + " files only", 1), _cache[18] || (_cache[18] = createTextVNode(". ", -1)), _cache[19] || (_cache[19] = createElementVNode("br", null, null, -1)), createTextVNode(" Recommended 300 x 300 or larger. Max " + toDisplayString(_ctx.maxFileSizeText) + ". ", 1)]), _ctx.isInvalidFile ? (openBlock(), createElementBlock("p", _hoisted_8, "Please upload a valid file")) : createCommentVNode("", true)], 34)])];
+    }),
+    _: 1
+  }, 8, ["modelValue"]), createVNode(_component_FwModal, {
+    modelValue: _ctx.isEditMediaModalOpen,
+    "onUpdate:modelValue": _cache[12] || (_cache[12] = function ($event) {
+      return _ctx.isEditMediaModalOpen = $event;
+    }),
+    "show-confirm": false,
+    "show-cancel": false,
+    "show-close-button": true,
+    padding: false,
+    "container-class": "!bg-[#F7F7F7] w-full",
+    "footer-class": "px-4 pb-8",
+    onCancel: _cache[13] || (_cache[13] = function ($event) {
+      return _ctx.isEditMediaModalOpen = false;
+    })
+  }, {
+    header: withCtx(function () {
+      return [createElementVNode("h4", _hoisted_9, toDisplayString(_ctx.editHeaderText), 1)];
+    }),
+    body: withCtx(function () {
+      return [createElementVNode("div", _hoisted_10, [createElementVNode("div", _hoisted_11, [createVNode(_component_GuideSvg, {
+        name: "guide",
+        "class": "absolute pointer-events-none"
+      }), createElementVNode("canvas", {
+        ref: "editorCanvas",
+        width: "300",
+        height: "300",
+        onPointerdown: _cache[9] || (_cache[9] = function () {
+          return _ctx.startEditImage && _ctx.startEditImage.apply(_ctx, arguments);
+        }),
+        onPointerup: _cache[10] || (_cache[10] = function () {
+          return _ctx.stopEditImage && _ctx.stopEditImage.apply(_ctx, arguments);
+        }),
+        onPointermove: _cache[11] || (_cache[11] = function () {
+          return _ctx.editImage && _ctx.editImage.apply(_ctx, arguments);
+        })
+      }, null, 544)]), _cache[20] || (_cache[20] = createElementVNode("p", {
+        "class": "text-white text-sm"
+      }, "Drag to reposition or resize", -1))]), createElementVNode("div", _hoisted_12, [createElementVNode("div", _hoisted_13, [createVNode(_component_FwButton, {
+        variant: "tertiary",
+        size: "md",
+        onClick: _ctx.change
+      }, {
+        "default": withCtx(function () {
+          return _toConsumableArray(_cache[21] || (_cache[21] = [createTextVNode("Change", -1)]));
+        }),
+        _: 1
+      }, 8, ["onClick"]), createVNode(_component_FwButton, {
+        variant: "tertiary",
+        size: "md",
+        onClick: _ctx.reset
+      }, {
+        "default": withCtx(function () {
+          return [createElementVNode("div", _hoisted_14, [_cache[22] || (_cache[22] = createTextVNode(" Reset ", -1)), createVNode(_component_ArrowRotateSvg, {
+            name: "arrow-rotate",
+            "class": "inline-block ml-1 w-4 h-4"
+          })])];
+        }),
+        _: 1
+      }, 8, ["onClick"])]), createElementVNode("div", _hoisted_15, [createVNode(_component_FwButton, {
+        variant: "primary",
+        size: "md",
+        onClick: _ctx.save
+      }, {
+        "default": withCtx(function () {
+          return _toConsumableArray(_cache[23] || (_cache[23] = [createTextVNode("Save", -1)]));
+        }),
+        _: 1
+      }, 8, ["onClick"])])])];
+    }),
+    _: 1
+  }, 8, ["modelValue"])], 64);
+}
+
+var css_248z = ".fw-media-picker--empty{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;--tw-border-opacity:1;-webkit-align-items:center;align-items:center;border-color:rgb(200 203 208/var(--tw-border-opacity));border-radius:.25rem;border-width:1px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:.5rem;height:100%;-webkit-justify-content:center;justify-content:center;text-align:center;width:100%}.fw-media-picker--empty:hover{border-color:var(--colorText2);color:var(--colorText2)}";
+var stylesheet = ".fw-media-picker--empty{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;--tw-border-opacity:1;-webkit-align-items:center;align-items:center;border-color:rgb(200 203 208/var(--tw-border-opacity));border-radius:.25rem;border-width:1px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:.5rem;height:100%;-webkit-justify-content:center;justify-content:center;text-align:center;width:100%}.fw-media-picker--empty:hover{border-color:var(--colorText2);color:var(--colorText2)}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { getVueComponentHtml as g, script as s };