@frollo/frollo-web-ui 8.5.4 → 9.0.0

package/esm/fw-media-picker.js

@@ -1,25 +1,25 @@
-import { c as _asyncToGenerator, d as _regeneratorRuntime, a as _slicedToArray } from './_rollupPluginBabelHelpers-DpC_oIQV.js';
-import { defineComponent, ref, computed, watch, createElementVNode, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, toDisplayString, withCtx, normalizeClass, withModifiers, createTextVNode, createCommentVNode } from 'vue';
-import { c as render$1, d as render$2, e as render$3, f as render$4, g as render$5, h as render$6 } from './index-CzZMBMV_.js';
-import { FwModal as script$1 } from './fw-modal.js';
+import { c as _asyncToGenerator, d as _regeneratorRuntime, a as _slicedToArray } from './_rollupPluginBabelHelpers-DODWUb5N.js';
+import { defineComponent, ref, computed, watch, createElementVNode, resolveComponent, createElementBlock, openBlock, Fragment, createVNode, toDisplayString, withCtx, withModifiers, normalizeClass, createCommentVNode, createTextVNode } from 'vue';
+import { e as render$1, f as render$2, g as render$3, h as render$4, i as render$5, j as render$6 } from './index-BsEH8YYr.js';
+import { FwModal as __default__ } from './fw-modal.js';
 import './fw-button.js';
-import { s as script$2 } from './fw-button-DNozvo7B.js';
-import './check--YD4Ts6g.js';
-import './uniqueId-DK6xzFd8.js';
-import './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-spinner-BFpFFRJm.js';
+import { s as script$1 } from './fw-button-CnQvA7oM.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import './fw-image-D-OHafdw.js';
+import './fw-loading-bar-DecYSBC_.js';
+import './get-root-colours-DCjlYelc.js';
 
 var script = defineComponent({
   name: 'MediaPicker',
   components: {
-    PenSvg: render$1,
-    PlusSvg: render$2,
-    CloudArrowUpSvg: render$3,
+    FwModal: __default__,
+    FwButton: script$1,
+    ArrowRotateSvg: render$6,
+    CloudArrowUpSvg: render$5,
     GuideSvg: render$4,
-    ArrowsRotateSvg: render$5,
-    LoadingSvg: render$6,
-    FwModal: script$1,
-    FwButton: script$2
+    LoadingSvg: render$3,
+    PenSvg: render$2,
+    PlusSvg: render$1
   },
   emits: [/** Fired when media is selected */
   'selected'],
@@ -107,7 +107,7 @@ var script = defineComponent({
       return selectedFile.value && (selectedFile.value.size > props.maxFileSize || acceptedTypes.value.includes(selectedFile.value.type) === false);
     });
     watch(initialImageUrl, /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(newVal, oldVal) {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(newVal, oldVal) {
         var response, blob, mimeType;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -197,7 +197,7 @@ var script = defineComponent({
     var isEditingImage = ref(false);
     var interactionType = ref(null);
     var drawImageOnCanvas = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
         var save,
           ctx,
           imageBitmap,
@@ -377,7 +377,7 @@ var script = defineComponent({
       drawImageOnCanvas();
     };
     var save = /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -438,15 +438,15 @@ var script = defineComponent({
 
 var _hoisted_1 = ["accept"];
 var _hoisted_2 = {
-  "class": "cursor-pointer w-[160px] h-[160px]"
+  "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-2 border-grey-40 rounded"
+  "class": "flex flex-col w-full h-full items-center justify-center gap-2 border border-grey-100 rounded"
 };
 var _hoisted_5 = {
-  "class": "font-medium text-grey-80 group-hover:text-black transition-colors duration-300"
+  "class": "text-brand-text3 group-hover:text-brand-text2"
 };
 var _hoisted_6 = {
   "class": "pt-[23px] px-4 pb-2 mb-0 text-left"
@@ -479,6 +479,9 @@ var _hoisted_16 = {
   "class": "flex justify-start gap-2 flex-col sm:flex-row"
 };
 var _hoisted_17 = {
+  "class": "flex flex-row items-center gap-2"
+};
+var _hoisted_18 = {
   "class": "flex justify-end flex-col sm:flex-row"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -489,7 +492,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwButton = resolveComponent("FwButton");
   var _component_FwModal = resolveComponent("FwModal");
   var _component_GuideSvg = resolveComponent("GuideSvg");
-  var _component_ArrowsRotateSvg = resolveComponent("ArrowsRotateSvg");
+  var _component_ArrowRotateSvg = resolveComponent("ArrowRotateSvg");
   return openBlock(), createElementBlock(Fragment, null, [createElementVNode("input", {
     ref: "fileInput",
     type: "file",
@@ -505,20 +508,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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, {
-    "class": "w-8 h-8 text-grey-80 animate-spin"
+    name: "loading",
+    "class": "w-8 h-8 text-brand-text2 animate-spin"
   })])) : (openBlock(), createElementBlock("div", {
     key: 2,
-    "class": "group flex flex-col w-full h-full items-center justify-center gap-2 border-2 border-grey-40 rounded hover:text-primary hover:bg-grey-40/60 hover:border-primary transition-colors duration-300",
+    "class": "fw-media-picker--empty group",
     onClick: _cache[2] || (_cache[2] = function ($event) {
       return _ctx.isSelectMediaModalOpen = true;
     })
   }, [createVNode(_component_PlusSvg, {
-    "class": "w-8 h-8 p-1 text-grey-80 rounded-full border-2 border-grey-80 group-hover:border-primary group-hover:text-primary transition-colors duration-300"
+    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) {
@@ -528,7 +534,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "show-cancel": false,
     "show-close-button": true,
     padding: false,
-    "container-class": "!bg-[#F7F7F7]",
     "footer-class": "px-4 pb-8",
     onCancel: _cache[8] || (_cache[8] = function ($event) {
       return _ctx.isSelectMediaModalOpen = false;
@@ -556,6 +561,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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, [createTextVNode(" Select file to "), createVNode(_component_FwButton, {
         variant: "link",
@@ -577,7 +583,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "show-cancel": false,
     "show-close-button": true,
     padding: false,
-    "container-class": "!bg-[#F7F7F7]",
+    "container-class": "!bg-[#F7F7F7] w-full",
     "footer-class": "px-4 pb-8",
     onCancel: _cache[13] || (_cache[13] = function ($event) {
       return _ctx.isEditMediaModalOpen = false;
@@ -588,6 +594,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     body: withCtx(function () {
       return [createElementVNode("div", _hoisted_12, [createElementVNode("div", _hoisted_13, [createVNode(_component_GuideSvg, {
+        name: "guide",
         "class": "absolute pointer-events-none"
       }), createElementVNode("canvas", {
         ref: "editorCanvas",
@@ -617,12 +624,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _ctx.reset
       }, {
         "default": withCtx(function () {
-          return [createTextVNode(" Reset "), createVNode(_component_ArrowsRotateSvg, {
+          return [createElementVNode("div", _hoisted_17, [createTextVNode(" Reset "), createVNode(_component_ArrowRotateSvg, {
+            name: "arrow-rotate",
             "class": "inline-block ml-1 w-4 h-4"
-          })];
+          })])];
         }),
         _: 1
-      }, 8, ["onClick"])]), createElementVNode("div", _hoisted_17, [createVNode(_component_FwButton, {
+      }, 8, ["onClick"])]), createElementVNode("div", _hoisted_18, [createVNode(_component_FwButton, {
         variant: "primary",
         size: "md",
         onClick: _ctx.save
@@ -637,6 +645,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 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 { script as FwMediaPicker };

package/esm/fw-modal.js

@@ -1,18 +1,18 @@
-import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createCommentVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
-import { s as script$1 } from './fw-button-DNozvo7B.js';
-import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
-import { b as render$1 } from './index-CzZMBMV_.js';
+import { defineComponent, ref, computed, onMounted, useCssVars, resolveComponent, createBlock, createCommentVNode, openBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, createTextVNode, renderSlot, toDisplayString, vShow } from 'vue';
+import { s as script } from './fw-button-CnQvA7oM.js';
+import { _ as __default__$1 } from './fw-image-D-OHafdw.js';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { d as render$1 } from './index-BsEH8YYr.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-spinner-BFpFFRJm.js';
-import './check--YD4Ts6g.js';
+import './fw-loading-bar-DecYSBC_.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwModal',
   components: {
-    FwButton: script$1,
-    XMarkSvg: render$1
+    FwButton: script,
+    XMarkSvg: render$1,
+    FwImage: __default__$1
   },
-  emits: ['cancel', 'confirm'],
   props: {
     /**
      * The modal's v-model. Controls the visibility of the modal.
@@ -72,9 +72,9 @@ var script = defineComponent({
      */
     cancelButtonType: {
       type: String,
-      "default": 'secondary',
+      "default": 'tertiary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'error', 'success', 'link', 'text', 'transparent', 'gradient'].includes(value);
       }
     },
     /**
@@ -91,9 +91,22 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'error', 'success', 'link', 'text', 'transparent', 'gradient'].includes(value);
       }
     },
+    /**
+     * Icon name for the confirm button
+     */
+    confirmIconName: {
+      type: String
+    },
+    /**
+     * Whether the confirm button loading animation is showing or not
+     */
+    confirmLoading: {
+      type: Boolean,
+      "default": false
+    },
     /**
      * Controls the outer padding of the modal
      */
@@ -119,36 +132,57 @@ var script = defineComponent({
      */
     footerClass: {
       type: String
+    },
+    /**
+     * Banner Image Url source
+     */
+    bannerUrl: {
+      type: String
     }
   },
+  emits: ['cancel', 'confirm'],
   setup: function setup(props) {
     var isMounted = ref(false);
-    var uuid = uniqueId();
+    var uuid = globalThis.crypto.randomUUID();
     var isOpen = computed(function () {
       return props.modelValue;
     });
+    var _useColours = useColours(),
+      modalBgColour = _useColours.brandBg1Fade95;
     onMounted(function () {
       isMounted.value = true;
     });
     return {
       isOpen: isOpen,
       uuid: uuid,
-      isMounted: isMounted
+      isMounted: isMounted,
+      modalBgColour: modalBgColour
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "09c4fd1f": _ctx.modalBgColour
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
 var _hoisted_1 = ["id"];
 var _hoisted_2 = {
-  "class": "fw-modal--mask fixed z-[9999] top-0 left-0 w-full h-full bg-black bg-opacity-50"
+  "class": "fw-modal--mask fixed z-[9999] top-0 left-0 w-full h-full"
 };
 var _hoisted_3 = {
-  "class": "fw-modal--wrapper text-center overflow-auto flex justify-center items-center h-full"
+  "class": "fw-modal--wrapper overflow-auto flex justify-center items-center h-full"
 };
 var _hoisted_4 = ["role", "aria-labelledby", "aria-describedby"];
 var _hoisted_5 = {
-  key: 1,
-  "class": "fw-modal--header"
+  "class": "flex flex-row items-center gap-2"
 };
 var _hoisted_6 = {
   key: 0,
@@ -157,8 +191,9 @@ var _hoisted_6 = {
 var _hoisted_7 = ["id"];
 var _hoisted_8 = ["id", "innerHTML"];
 var _hoisted_9 = ["id"];
-var _hoisted_10 = ["innerHTML", "id"];
+var _hoisted_10 = ["id", "innerHTML"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_FwImage = resolveComponent("FwImage");
   var _component_XMarkSvg = resolveComponent("XMarkSvg");
   var _component_FwButton = resolveComponent("FwButton");
   return _ctx.isMounted ? (openBlock(), createBlock(Teleport, {
@@ -170,55 +205,72 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     "default": withCtx(function () {
       return [withDirectives(createElementVNode("div", {
-        "class": "fw-modal z-[9999] relative",
-        id: "fw-modal-".concat(_ctx.uuid)
+        id: "fw-modal-".concat(_ctx.uuid),
+        "class": "fw-modal z-[9999] relative"
       }, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", {
         role: _ctx.role,
         "aria-modal": "true",
-        "class": normalizeClass([[_ctx.containerClass, _ctx.padding ? 'p-12' : ''], "fw-modal--container m-8 inline-block w-full max-w-[540px] bg-white rounded-lg shadow relative"]),
+        "class": normalizeClass([[_ctx.containerClass && !_ctx.bannerUrl ? _ctx.containerClass : '', _ctx.padding && !_ctx.bannerUrl ? 'inline-block p-8 md:p-12' : 'flex flex-col md:flex-row', _ctx.bannerUrl ? 'max-w-[800px]' : 'max-w-[750px]'], "fw-modal--container m-8 w-full bg-brand-appBg rounded-lg shadow relative max-h-screen"]),
         "aria-labelledby": _ctx.$slots.header || _ctx.header ? "modal_".concat(_ctx.uuid, "_header") : undefined,
         "aria-describedby": _ctx.$slots.body ? "modal_".concat(_ctx.uuid, "_body") : undefined
-      }, [_ctx.showCloseButton ? (openBlock(), createBlock(_component_FwButton, {
+      }, [_ctx.bannerUrl ? (openBlock(), createElementBlock("div", {
         key: 0,
+        "class": "flex w-full md:w-1/2 h-[350px] md:h-full cursor-pointer hover:animate-pulse overflow-hidden",
         onClick: _cache[0] || (_cache[0] = function ($event) {
-          return _ctx.$emit('cancel');
-        }),
-        variant: "text",
+          return _ctx.$emit('confirm');
+        })
+      }, [createVNode(_component_FwImage, {
+        src: _ctx.bannerUrl,
+        "enable-errors": false,
+        type: "background",
+        "class": "w-full h-full"
+      }, null, 8, ["src"])])) : createCommentVNode("", true), createElementVNode("div", {
+        "class": normalizeClass([_ctx.containerClass && _ctx.bannerUrl ? _ctx.containerClass : 'w-full', _ctx.bannerUrl && _ctx.padding ? 'w-full md:w-1/2 min-h-[120px] md:min-h-[520px] p-8 relative' : ''])
+      }, [_ctx.showCloseButton ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        variant: "link",
         rounded: false,
         size: "sm",
-        "class": "absolute top-[20px] right-[15px] !p-1.5"
+        "class": "absolute top-[20px] right-[15px] !p-1.5",
+        onClick: _cache[1] || (_cache[1] = function ($event) {
+          return _ctx.$emit('cancel');
+        })
       }, {
         "default": withCtx(function () {
-          return [createVNode(_component_XMarkSvg, {
-            "class": "w-4 h-4"
-          })];
+          return [createElementVNode("div", _hoisted_5, [createVNode(_component_XMarkSvg, {
+            name: "xmark",
+            "class": "w-3.5 h-3.5"
+          }), createTextVNode(" Close ")])];
         }),
         _: 1
-      })) : createCommentVNode("", true), _ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", _hoisted_5, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+      })) : createCommentVNode("", true), _ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        "class": normalizeClass(["fw-modal--header", _ctx.showCloseButton ? 'pt-6' : ''])
+      }, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
         key: 1,
         id: "modal_".concat(_ctx.uuid, "_header")
       }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_7)) : _ctx.header ? (openBlock(), createElementBlock("div", {
         key: 2,
         id: "modal_".concat(_ctx.uuid, "_header"),
         innerHTML: _ctx.header
-      }, null, 8, _hoisted_8)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots.body ? (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_8)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), _ctx.$slots.body ? (openBlock(), createElementBlock("div", {
         key: 2,
-        "class": "fw-modal--body mt-4",
-        id: "modal_".concat(_ctx.uuid, "_body")
+        id: "modal_".concat(_ctx.uuid, "_body"),
+        "class": "fw-modal--body mt-6"
       }, [renderSlot(_ctx.$slots, "body")], 8, _hoisted_9)) : _ctx.body ? (openBlock(), createElementBlock("div", {
         key: 3,
-        innerHTML: _ctx.body,
-        "class": "fw-modal--body mt-4",
-        id: "modal_".concat(_ctx.uuid, "_body")
+        id: "modal_".concat(_ctx.uuid, "_body"),
+        "class": "fw-modal--body mt-6",
+        innerHTML: _ctx.body
       }, null, 8, _hoisted_10)) : createCommentVNode("", true), _ctx.showConfirm || _ctx.showCancel ? (openBlock(), createElementBlock("div", {
         key: 4,
-        "class": normalizeClass(["fw-modal--footer flex space-x-4 pt-4 justify-center", _ctx.footerClass])
+        "class": normalizeClass(["fw-modal--footer flex flex-col-reverse gap-4 md:flex-row pt-4 items-center justify-between mt-6", _ctx.footerClass])
       }, [_ctx.showCancel ? (openBlock(), createBlock(_component_FwButton, {
         key: 0,
-        "class": "basis-1/2",
+        "class": "w-full md:w-fit",
         variant: _ctx.cancelButtonType,
         "aria-label": _ctx.cancelButtonText,
-        onClick: _cache[1] || (_cache[1] = function ($event) {
+        onClick: _cache[2] || (_cache[2] = function ($event) {
           return _ctx.$emit('cancel');
         })
       }, {
@@ -228,10 +280,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["variant", "aria-label"])) : createCommentVNode("", true), _ctx.showConfirm ? (openBlock(), createBlock(_component_FwButton, {
         key: 1,
-        "class": "basis-1/2",
+        "class": "w-full md:w-fit",
         variant: _ctx.confirmButtonType,
         "aria-label": _ctx.confirmButtonText,
-        onClick: _cache[2] || (_cache[2] = function ($event) {
+        loading: _ctx.confirmLoading,
+        "icon-name": _ctx.confirmIconName,
+        onClick: _cache[3] || (_cache[3] = function ($event) {
           return _ctx.$emit('confirm');
         })
       }, {
@@ -239,16 +293,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 10, _hoisted_4)])])], 8, _hoisted_1), [[vShow, _ctx.isOpen]])];
+      }, 8, ["variant", "aria-label", "loading", "icon-name"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2)], 10, _hoisted_4)])])], 8, _hoisted_1), [[vShow, _ctx.isOpen]])];
     }),
     _: 3
   })], 8, ["to"])) : createCommentVNode("", true);
 }
 
-var css_248z = ".modalFadeIn-enter-active{-webkit-animation:modalFadeIn .4s;-moz-animation:modalFadeIn .4s;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;-moz-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}";
-var stylesheet = ".modalFadeIn-enter-active{-webkit-animation:modalFadeIn .4s;-moz-animation:modalFadeIn .4s;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;-moz-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}";
+var css_248z = ".modalFadeIn-enter-active{-webkit-animation:modalFadeIn .4s;-moz-animation:modalFadeIn .4s;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;-moz-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.fw-modal--mask{background-color:var(--09c4fd1f)}";
+var stylesheet = ".modalFadeIn-enter-active{-webkit-animation:modalFadeIn .4s;-moz-animation:modalFadeIn .4s;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;-moz-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.fw-modal--mask{background-color:var(--09c4fd1f)}";
 styleInject(css_248z);
 
-script.render = render;
+__default__.render = render;
 
-export { script as FwModal };
+export { __default__ as FwModal };