@frollo/frollo-web-ui 7.0.0 → 8.0.0

package/esm/fw-image.js

@@ -1,22 +1,6 @@
-export { s as FwImage } from './fw-image-aca2c61d.js';
-import './es.array.includes-08e25019.js';
-import './is-forced-7cb3ee8f.js';
-import './export-10c4adbc.js';
-import './add-to-unscopables-ee05b58f.js';
-import './object-create-51bf02dc.js';
-import './es.number.constructor-fb16fe05.js';
-import './classof-d44bf093.js';
+export { s as FwImage } from './fw-image-DOgM8i8X.js';
 import 'vue';
-import './array-iteration-8267bf22.js';
-import './array-species-create-1c67e297.js';
-import './array-method-is-strict-d313436f.js';
-import './es.object.to-string-4b07c4d1.js';
-import './es.array.find-1ded15d5.js';
-import './es.string.iterator-25db8cd2.js';
-import './create-property-eb329361.js';
-import './web.timers-e406c8e6.js';
-import './function-apply-e17cf65b.js';
-import './fw-loading-bar-f5ca605c.js';
-import './style-inject.es-1f59c1d0.js';
-import './index-bced3b35.js';
-import './check-94a5917a.js';
+import './fw-loading-bar-DThRjdw1.js';
+import './style-inject.es-tgCJW-Cu.js';
+import './index-CUPvK0Aa.js';
+import './check--YD4Ts6g.js';

package/esm/{fw-input-8969b226.js → fw-input-Qiy53nRk.js}

@@ -1,12 +1,8 @@
-import './es.array.includes-08e25019.js';
-import './es.number.constructor-fb16fe05.js';
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, createBlock, Transition, normalizeClass } from 'vue';
-import { a as render$1 } from './index-bced3b35.js';
-import { a as Field } from './vee-validate.esm-a17a23c3.js';
-import { u as uniqueId } from './uniqueId-fe08534a.js';
-import './es.function.name-6cafd747.js';
-import './es.array.concat-99b85557.js';
-import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, createBlock, Transition, normalizeClass } from 'vue';
+import { f as render$1 } from './index-CUPvK0Aa.js';
+import { a as Field } from './vee-validate.esm-3ptvCDR1.js';
+import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var script = defineComponent({
   name: 'FwInput',
@@ -16,22 +12,22 @@ var script = defineComponent({
     ErrorFilledSvg: render$1
   },
   props: {
-    /**
-     * The input v-model
+    /**
+     * The input v-model
      */
     modelValue: {
       type: String,
       "default": ''
     },
-    /**
-     * The name of the input field. Must be unique per form.
+    /**
+     * The name of the input field. Must be unique per form.
      */
     name: {
       type: String,
       required: true
     },
-    /**
-     * The input type. Accepts `text` | `password`
+    /**
+     * The input type. Accepts `text` | `password`
      */
     type: {
       type: String,
@@ -40,72 +36,80 @@ var script = defineComponent({
         return ['text', 'password', 'email', 'tel', 'time', 'url', 'week', 'month'].includes(value);
       }
     },
-    /**
-     * Label for the input. Also renders to an aria-label attribute
+    /**
+     * Label for the input. Also renders to an aria-label attribute
      */
     label: {
       type: String
     },
-    /**
-     * The placeholder text of the input
+    /**
+     * The placeholder text of the input
      */
     placeholder: {
       type: String
     },
-    /**
-     * Validation rules. Accepts an object, string schema or validation function.
+    /**
+     * Validation rules. Accepts an object, string schema or validation function.
      */
     rules: {
       type: [Object, String, Function]
     },
-    /**
-     * Converts the input into a readonly disabled field
+    /**
+     * Converts the input into a readonly disabled field
      */
     readonly: {
       type: Boolean,
       "default": false
     },
-    /**
-     * The hint text shown below the input
+    /**
+     * The hint text shown below the input
      */
     hint: {
       type: String
     },
-    /**
-     * The autocomplete input attribute
+    /**
+     * The autocomplete input attribute
      */
     autocomplete: {
       type: String
     },
-    /**
-     * The logical tab order of the input.
-     * Defaults to 0
+    /**
+     * The logical tab order of the input.
+     * Defaults to 0
      */
     tabindex: {
       type: String,
       "default": '0'
     },
-    /**
-     * Whether the input is rounded.
-     * Defaults to false
+    /**
+     * Whether the input is rounded.
+     * Defaults to false
      */
     rounded: {
       type: Boolean,
       "default": false
     },
-    /**
-     * Enable the error section UI.
-     * Defaults to true
+    /**
+     * Enable the error section UI.
+     * Defaults to true
      */
     enableErrors: {
       type: Boolean,
       "default": true
     },
-    /**
-     * The inputs `maxlength` attribute.
+    /**
+     * The inputs `maxlength` attribute.
      */
     maxLength: {
       type: Number
+    },
+    /**
+     * Enables the required asterisk. (UI only)
+     * Use the field validation rule to validate input.
+     */
+    required: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -138,29 +142,33 @@ var _hoisted_3 = {
 };
 var _hoisted_4 = ["for"];
 var _hoisted_5 = {
-  key: 1
+  key: 0,
+  "class": "text-error ml-0.5"
 };
 var _hoisted_6 = {
-  "class": "relative"
+  key: 1
 };
 var _hoisted_7 = {
+  "class": "relative"
+};
+var _hoisted_8 = {
   key: 0,
   "class": "flex text-black absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_8 = ["id", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
-var _hoisted_9 = {
+var _hoisted_9 = ["id", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
+var _hoisted_10 = {
   key: 2,
   "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
 };
-var _hoisted_10 = {
+var _hoisted_11 = {
   key: 0,
-  "class": "italic text-right text-sm font-medium mt-2 min-h-[21px]"
+  "class": "italic text-left text-sm font-medium mt-2 min-h-[21px]"
 };
-var _hoisted_11 = {
+var _hoisted_12 = {
   key: 0,
   "class": "text-error"
 };
-var _hoisted_12 = {
+var _hoisted_13 = {
   key: 1
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -184,7 +192,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": "fw-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
         "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.label), 9, _hoisted_4)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "prefix", {
+      }, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_5, "*")) : createCommentVNode("", true)], 8, _hoisted_4)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_7, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "prefix", {
         "class": "h-full"
       })])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         id: "fw-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
@@ -199,7 +207,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           'pl-10': !!_ctx.$slots.prefix,
           'pr-20': !!_ctx.$slots.suffix
         }, _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded']
-      }), null, 16, _hoisted_8), _ctx.enableErrors ? (openBlock(), createBlock(Transition, {
+      }), null, 16, _hoisted_9), _ctx.enableErrors ? (openBlock(), createBlock(Transition, {
         key: 1,
         name: "fwFadeIn"
       }, {
@@ -214,14 +222,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           })], 2)) : createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024)) : createCommentVNode("", true), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "suffix", {
+      }, 1024)) : createCommentVNode("", true), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "suffix", {
         "class": "h-full"
-      })])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(Transition, {
+      })])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_11, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
         "default": withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])) : createCommentVNode("", true)])];
@@ -230,8 +238,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["modelValue", "name", "rules"])]);
 }
 
-var css_248z = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
-var stylesheet = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+var css_248z = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;-moz-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+var stylesheet = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;-moz-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
 styleInject(css_248z);
 
 script.render = render;

package/esm/fw-input.js

@@ -1,20 +1,7 @@
-export { s as FwInput } from './fw-input-8969b226.js';
-import './es.array.includes-08e25019.js';
-import './is-forced-7cb3ee8f.js';
-import './export-10c4adbc.js';
-import './add-to-unscopables-ee05b58f.js';
-import './object-create-51bf02dc.js';
-import './es.number.constructor-fb16fe05.js';
-import './classof-d44bf093.js';
+export { s as FwInput } from './fw-input-Qiy53nRk.js';
 import 'vue';
-import './index-bced3b35.js';
-import './check-94a5917a.js';
-import './vee-validate.esm-a17a23c3.js';
-import './uniqueId-fe08534a.js';
-import './es.function.name-6cafd747.js';
-import './es.array.concat-99b85557.js';
-import './array-species-create-1c67e297.js';
-import './does-not-exceed-safe-integer-de37ce28.js';
-import './create-property-eb329361.js';
-import './array-method-has-species-support-6c675094.js';
-import './style-inject.es-1f59c1d0.js';
+import './index-CUPvK0Aa.js';
+import './check--YD4Ts6g.js';
+import './vee-validate.esm-3ptvCDR1.js';
+import './uniqueId-DK6xzFd8.js';
+import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-loading-bar-DThRjdw1.js

@@ -0,0 +1,22 @@
+import { defineComponent, openBlock, createElementBlock } from 'vue';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var script = defineComponent({
+  name: 'FwLoadingBar'
+});
+
+var _hoisted_1 = {
+  "class": "fw-loading-bar rounded",
+  "aria-hidden": "true"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1);
+}
+
+var css_248z = ".fw-loading-bar{-webkit-animation:fwSkeletonLoading 1.5s linear infinite;-moz-animation:fwSkeletonLoading 1.5s linear infinite;animation:fwSkeletonLoading 1.5s linear infinite;background:#e4e4e4;background-image:-webkit-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:-moz-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-size:200% 200%}@-webkit-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@-moz-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}";
+var stylesheet = ".fw-loading-bar{-webkit-animation:fwSkeletonLoading 1.5s linear infinite;-moz-animation:fwSkeletonLoading 1.5s linear infinite;animation:fwSkeletonLoading 1.5s linear infinite;background:#e4e4e4;background-image:-webkit-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:-moz-linear-gradient(350deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-image:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 60%);background-size:200% 200%}@-webkit-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@-moz-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };

package/esm/{fw-loading-spinner-72d70258.js → fw-loading-spinner-Dn52RI5h.js}

@@ -1,4 +1,4 @@
-import { k as render$1 } from './index-bced3b35.js';
+import { j as render$1 } from './index-CUPvK0Aa.js';
 import { defineComponent, resolveComponent, openBlock, createBlock } from 'vue';
 
 var script = defineComponent({

package/esm/fw-loading.js

@@ -1,10 +1,6 @@
-import { s as script$2 } from './fw-loading-bar-f5ca605c.js';
-export { s as FwLoadingBar } from './fw-loading-bar-f5ca605c.js';
+import { s as script$2 } from './fw-loading-bar-DThRjdw1.js';
 import { defineComponent, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, normalizeClass, normalizeStyle, Fragment, renderList } from 'vue';
-import './es.number.constructor-fb16fe05.js';
-import './style-inject.es-1f59c1d0.js';
-import './is-forced-7cb3ee8f.js';
-import './classof-d44bf093.js';
+import './style-inject.es-tgCJW-Cu.js';
 
 var script$1 = defineComponent({
   name: 'FwLoadingCard',
@@ -90,4 +86,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 script.render = render;
 
-export { script$1 as FwLoadingCard, script as FwLoadingTable };
+export { script$2 as FwLoadingBar, script$1 as FwLoadingCard, script as FwLoadingTable };

package/esm/fw-modal.js

@@ -1,78 +1,74 @@
-import './es.array.includes-08e25019.js';
-import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, createElementBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString, vShow } from 'vue';
-import { s as script$1 } from './fw-button-c8502414.js';
-import { u as uniqueId } from './uniqueId-fe08534a.js';
-import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import './is-forced-7cb3ee8f.js';
-import './export-10c4adbc.js';
-import './add-to-unscopables-ee05b58f.js';
-import './object-create-51bf02dc.js';
-import './fw-loading-spinner-72d70258.js';
-import './index-bced3b35.js';
-import './check-94a5917a.js';
+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-4QLZlu0U.js';
+import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
+import { b as render$1 } from './index-CUPvK0Aa.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import './fw-loading-spinner-Dn52RI5h.js';
+import './check--YD4Ts6g.js';
 
 var script = defineComponent({
   name: 'FwModal',
   components: {
-    FwButton: script$1
+    FwButton: script$1,
+    XMarkSvg: render$1
   },
   emits: ['cancel', 'confirm'],
   props: {
-    /**
-     * The modal's v-model. Controls the visibility of the modal.
+    /**
+     * The modal's v-model. Controls the visibility of the modal.
      */
     modelValue: {
       type: Boolean
     },
-    /**
-     * The header title of the modal
+    /**
+     * The header title of the modal
      */
     header: {
       type: String
     },
-    /**
-     * The element to attach the modal too. Defaults to `#app` element.
+    /**
+     * The element to attach the modal too. Defaults to `#app` element.
      */
     element: {
       type: String,
       "default": '#app'
     },
-    /**
-     * The body description of the modal
+    /**
+     * The body description of the modal
      */
     body: {
       type: String
     },
-    /**
-     * The aria role of the modal container. Defaults to `dialog`
+    /**
+     * The aria role of the modal container. Defaults to `dialog`
      */
     role: {
       type: String,
       "default": 'dialog'
     },
-    /**
-     * Whether to show the cancel button
+    /**
+     * Whether to show the cancel button
      */
     showCancel: {
       type: Boolean,
       "default": false
     },
-    /**
-     * Whether to show the confirm button
+    /**
+     * Whether to show the confirm button
      */
     showConfirm: {
       type: Boolean,
       "default": true
     },
-    /**
-     * Custom text for the cancel button
+    /**
+     * Custom text for the cancel button
      */
     cancelButtonText: {
       type: String,
       "default": 'Cancel'
     },
-    /**
-     * Button variant for the cancel button
+    /**
+     * Button variant for the cancel button
      */
     cancelButtonType: {
       type: String,
@@ -81,15 +77,15 @@ var script = defineComponent({
         return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
       }
     },
-    /**
-     * Custom text for the confirm button
+    /**
+     * Custom text for the confirm button
      */
     confirmButtonText: {
       type: String,
       "default": 'Confirm'
     },
-    /**
-     * Button variant for the confirm button
+    /**
+     * Button variant for the confirm button
      */
     confirmButtonType: {
       type: String,
@@ -97,6 +93,20 @@ var script = defineComponent({
       validator: function validator(value) {
         return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text'].includes(value);
       }
+    },
+    /**
+     * Controls the outer padding of the modal
+     */
+    padding: {
+      type: Boolean,
+      "default": true
+    },
+    /**
+     * Controls the visibility of the 'X' close button.
+     */
+    showCloseButton: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props) {
@@ -125,23 +135,23 @@ var _hoisted_3 = {
 };
 var _hoisted_4 = ["role", "aria-labelledby", "aria-describedby"];
 var _hoisted_5 = {
-  key: 0,
-  "class": "fw-modal--header text-center"
+  key: 1,
+  "class": "fw-modal--header"
 };
 var _hoisted_6 = {
   key: 0,
-  id: "modal-logo",
-  "class": "flex justify-center"
+  "class": "fw-modal--logo flex justify-center"
 };
 var _hoisted_7 = ["id"];
 var _hoisted_8 = ["id", "innerHTML"];
 var _hoisted_9 = ["id"];
 var _hoisted_10 = ["innerHTML", "id"];
 var _hoisted_11 = {
-  key: 3,
-  "class": "modal-footer flex space-x-4 pt-4 justify-center"
+  key: 4,
+  "class": "fw-modal--footer flex space-x-4 pt-4 justify-center"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_XMarkSvg = resolveComponent("XMarkSvg");
   var _component_FwButton = resolveComponent("FwButton");
   return _ctx.isMounted ? (openBlock(), createBlock(Teleport, {
     key: 0,
@@ -157,31 +167,47 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", {
         role: _ctx.role,
         "aria-modal": "true",
-        "class": "fw-modal--container p-12 m-8 inline-block w-full max-w-[540px] bg-white rounded-2xl shadow",
+        "class": normalizeClass([_ctx.padding ? 'p-12' : '', "fw-modal--container m-8 inline-block w-full max-w-[540px] bg-white rounded-lg shadow relative"]),
         "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.$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("h2", {
+      }, [_ctx.showCloseButton ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        onClick: _cache[0] || (_cache[0] = function ($event) {
+          return _ctx.$emit('cancel');
+        }),
+        variant: "text",
+        rounded: false,
+        size: "sm",
+        "class": "absolute top-[20px] right-[15px] !p-1.5"
+      }, {
+        "default": withCtx(function () {
+          return [createVNode(_component_XMarkSvg, {
+            "class": "w-4 h-4"
+          })];
+        }),
+        _: 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", {
         key: 1,
         id: "modal_".concat(_ctx.uuid, "_header")
-      }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_7)) : _ctx.header ? (openBlock(), createElementBlock("h2", {
+      }, [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", {
-        key: 1,
-        "class": "modal-body mt-4",
+        key: 2,
+        "class": "fw-modal--body mt-4",
         id: "modal_".concat(_ctx.uuid, "_body")
       }, [renderSlot(_ctx.$slots, "body")], 8, _hoisted_9)) : _ctx.body ? (openBlock(), createElementBlock("div", {
-        key: 2,
+        key: 3,
         innerHTML: _ctx.body,
-        "class": "modal-body mt-4",
+        "class": "fw-modal--body mt-4",
         id: "modal_".concat(_ctx.uuid, "_body")
       }, null, 8, _hoisted_10)) : createCommentVNode("", true), _ctx.showConfirm || _ctx.showCancel ? (openBlock(), createElementBlock("div", _hoisted_11, [_ctx.showCancel ? (openBlock(), createBlock(_component_FwButton, {
         key: 0,
         "class": "basis-1/2",
         variant: _ctx.cancelButtonType,
         "aria-label": _ctx.cancelButtonText,
-        onClick: _cache[0] || (_cache[0] = function ($event) {
+        onClick: _cache[1] || (_cache[1] = function ($event) {
           return _ctx.$emit('cancel');
         })
       }, {
@@ -194,7 +220,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": "basis-1/2",
         variant: _ctx.confirmButtonType,
         "aria-label": _ctx.confirmButtonText,
-        onClick: _cache[1] || (_cache[1] = function ($event) {
+        onClick: _cache[2] || (_cache[2] = function ($event) {
           return _ctx.$emit('confirm');
         })
       }, {
@@ -202,14 +228,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4)])])], 8, _hoisted_1), [[vShow, _ctx.isOpen]])];
+      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 10, _hoisted_4)])])], 8, _hoisted_1), [[vShow, _ctx.isOpen]])];
     }),
     _: 3
   })], 8, ["to"])) : createCommentVNode("", true);
 }
 
-var css_248z = ".modalFadeIn-enter-active{-webkit-animation:modalFadeIn .4s;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-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;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-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}}";
+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}}";
 styleInject(css_248z);
 
 script.render = render;