@frollo/frollo-web-ui 1.2.4 → 1.2.6

package/esm/fw-navigation-menu.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition, normalizeClass } from 'vue';
+import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
 import { s as script$1 } from './fw-button-d5d2cf19.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './es.array.includes-9a6e4066.js';
@@ -28,6 +28,14 @@ var script = defineComponent({
      */
     actionLabel: {
       type: String
+    },
+
+    /**
+     * The class for the container wrapper.
+     */
+    containerClass: {
+      type: String,
+      "default": 'max-w-6xl'
     }
   },
   setup: function setup(_props, ctx) {
@@ -56,32 +64,29 @@ var _hoisted_1 = {
   "class": "fw-nav-menu relative z-50 h-20 shadow-md"
 };
 var _hoisted_2 = {
-  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between max-w-6xl mx-auto"
-};
-var _hoisted_3 = {
   key: 0,
   "class": "flex-shrink-0 flex items-center"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
   key: 1,
   "class": "container hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_5 = {
+var _hoisted_4 = {
   "class": "flex space-x-2"
 };
-var _hoisted_6 = {
+var _hoisted_5 = {
   key: 2,
   "class": "hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_7 = {
+var _hoisted_6 = {
   "class": "flex items-center sm:hidden"
 };
 
-var _hoisted_8 = /*#__PURE__*/createElementVNode("span", {
+var _hoisted_7 = /*#__PURE__*/createElementVNode("span", {
   "class": "sr-only"
 }, "Open main menu", -1);
 
-var _hoisted_9 = {
+var _hoisted_8 = {
   "class": "block h-6 w-6",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -89,8 +94,8 @@ var _hoisted_9 = {
   stroke: "currentColor",
   "aria-hidden": "true"
 };
-var _hoisted_10 = ["d"];
-var _hoisted_11 = {
+var _hoisted_9 = ["d"];
+var _hoisted_10 = {
   "class": "w-full flex flex-col space-y-1"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -98,7 +103,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_FwButton = resolveComponent("FwButton");
 
-  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", {
+    "class": normalizeClass(["px-6 flex-1 h-full flex bg-white items-stretch justify-between mx-auto", _ctx.containerClass])
+  }, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
     return openBlock(), createBlock(_component_FwButton, {
       key: i,
       variant: "text",
@@ -112,7 +119,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -121,28 +128,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
     }),
     _: 1
-  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [createVNode(_component_FwButton, {
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createVNode(_component_FwButton, {
     variant: "text",
     size: "sm",
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": withCtx(function () {
-      return [_hoisted_8, (openBlock(), createElementBlock("svg", _hoisted_9, [createElementVNode("path", {
+      return [_hoisted_7, (openBlock(), createElementBlock("svg", _hoisted_8, [createElementVNode("path", {
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "stroke-width": "2",
         d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
-      }, null, 8, _hoisted_10)]))];
+      }, null, 8, _hoisted_9)]))];
     }),
     _: 1
-  }, 8, ["onClick"])])]), createVNode(Transition, {
+  }, 8, ["onClick"])])], 2), createVNode(Transition, {
     name: "slideInLeft"
   }, {
     "default": withCtx(function () {
       return [_ctx.menuItems && _ctx.menuItems.length > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", {
         key: 0,
         "class": normalizeClass(["fw-nav-menu--mobile", _ctx.mobileMenuClass])
-      }, [createElementVNode("div", _hoisted_11, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+      }, [createElementVNode("div", _hoisted_10, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
         return openBlock(), createBlock(_component_FwButton, {
           key: i,
           "class": "w-full rounded-md",

package/esm/fw-table.js

@@ -5,7 +5,7 @@ import { t as toString$1 } from './to-string-c2bd1f4d.js';
 import { c as createProperty$1, a as arrayMethodIsStrict$1 } from './create-property-da6d232b.js';
 import { b as render$3 } from './index-b3aa1664.js';
 import { defineComponent, computed, ref, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
-import { s as script$3 } from './fw-loading-bar-525e9129.js';
+import { s as script$3 } from './fw-loading-bar-da7d53fb.js';
 import './classof-088c9833.js';
 import './check-94a5917a.js';
 import './style-inject.es-1f59c1d0.js';

package/esm/index.js

@@ -36,16 +36,16 @@ import { F as Form } from './vee-validate.esm-a17a23c3.js';
 export { F as FwForm } from './vee-validate.esm-a17a23c3.js';
 import { s as script$4 } from './fw-button-d5d2cf19.js';
 export { s as FwButton } from './fw-button-d5d2cf19.js';
-import { s as script$g } from './fw-loading-bar-525e9129.js';
-export { s as FwLoadingBar } from './fw-loading-bar-525e9129.js';
+import { s as script$g } from './fw-loading-bar-da7d53fb.js';
+export { s as FwLoadingBar } from './fw-loading-bar-da7d53fb.js';
 import { createApp } from 'vue';
 import './es.array.includes-9a6e4066.js';
 import './add-to-unscopables-a5032b1d.js';
-import './array-iteration-4f83e223.js';
+import './es.number.constructor-b7faae1f.js';
+import './to-string-c2bd1f4d.js';
 import './classof-088c9833.js';
+import './array-iteration-4f83e223.js';
 import './create-property-da6d232b.js';
-import './to-string-c2bd1f4d.js';
-import './es.number.constructor-b7faae1f.js';
 import './index-b3aa1664.js';
 import './check-94a5917a.js';
 import './style-inject.es-1f59c1d0.js';

package/frollo-web-ui.esm.js

@@ -4974,8 +4974,8 @@ var _hoisted_2$F = {
 var _hoisted_3$D = {
   "class": "flex flex-row justify-between"
 };
-var _hoisted_4$d = ["for"];
-var _hoisted_5$8 = {
+var _hoisted_4$c = ["for"];
+var _hoisted_5$7 = {
   key: 1
 };
 var _hoisted_6$5 = {
@@ -4999,7 +4999,7 @@ var _hoisted_9$4 = /*#__PURE__*/createElementVNode("svg", {
 })], -1);
 
 var _hoisted_10$4 = [_hoisted_9$4];
-var _hoisted_11$2 = {
+var _hoisted_11$1 = {
   key: 1,
   "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
 };
@@ -5033,7 +5033,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.label), 9, _hoisted_4$d)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$8, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$5, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
+      }, toDisplayString(_ctx.label), 9, _hoisted_4$c)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$7, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$5, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
@@ -5054,7 +5054,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
           }, _hoisted_10$4, 2)) : createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_11$2, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_12, [createVNode(Transition, {
+      }, 1024), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_11$1, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_12, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -5149,8 +5149,8 @@ var _hoisted_2$E = {
   "class": "flex flex-col"
 };
 var _hoisted_3$C = ["for"];
-var _hoisted_4$c = ["value", "name"];
-var _hoisted_5$7 = ["innerHTML"];
+var _hoisted_4$b = ["value", "name"];
+var _hoisted_5$6 = ["innerHTML"];
 var _hoisted_6$4 = {
   "class": "italic text-sm font-medium min-h-[21px]"
 };
@@ -5183,11 +5183,11 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
         name: _ctx.name,
         type: "checkbox",
         "class": "text-link w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
-      }), null, 16, _hoisted_4$c), _ctx.label ? (openBlock(), createElementBlock("span", {
+      }), null, 16, _hoisted_4$b), _ctx.label ? (openBlock(), createElementBlock("span", {
         key: 0,
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_5$7)) : createCommentVNode("", true)], 8, _hoisted_3$C), createElementVNode("div", _hoisted_6$4, [createVNode(Transition, {
+      }, null, 8, _hoisted_5$6)) : createCommentVNode("", true)], 8, _hoisted_3$C), createElementVNode("div", _hoisted_6$4, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -5295,13 +5295,13 @@ const _hoisted_1$D = {
 };
 const _hoisted_2$z = /*#__PURE__*/createElementVNode("path", { d: "M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" }, null, -1);
 const _hoisted_3$x = /*#__PURE__*/createElementVNode("path", { d: "M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" }, null, -1);
-const _hoisted_4$b = [
+const _hoisted_4$a = [
   _hoisted_2$z,
   _hoisted_3$x
 ];
 
 function render$E(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$D, _hoisted_4$b))
+  return (openBlock(), createElementBlock("svg", _hoisted_1$D, _hoisted_4$a))
 }
 
 const _hoisted_1$C = {
@@ -5339,13 +5339,13 @@ const _hoisted_1$A = {
 };
 const _hoisted_2$w = /*#__PURE__*/createElementVNode("path", { d: "M609.608 315.426a19.767 19.767 0 000-18.853c-58.464-107.643-172.5-180.72-303.607-180.72S60.857 188.931 2.393 296.573a19.767 19.767 0 000 18.853C60.858 423.069 174.892 496.147 306 496.147s245.143-73.078 303.608-180.721zM306 451.855c-80.554 0-145.855-65.302-145.855-145.855S225.446 160.144 306 160.144 451.856 225.446 451.856 306 386.554 451.855 306 451.855z" }, null, -1);
 const _hoisted_3$u = /*#__PURE__*/createElementVNode("path", { d: "M306 231.67c-6.136 0-12.095.749-17.798 2.15 5.841 6.76 9.383 15.563 9.383 25.198 0 21.3-17.267 38.568-38.568 38.568-9.635 0-18.438-3.541-25.198-9.383a74.513 74.513 0 00-2.15 17.798c0 41.052 33.279 74.33 74.33 74.33s74.33-33.279 74.33-74.33S347.052 231.67 306 231.67z" }, null, -1);
-const _hoisted_4$a = [
+const _hoisted_4$9 = [
   _hoisted_2$w,
   _hoisted_3$u
 ];
 
 function render$B(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$A, _hoisted_4$a))
+  return (openBlock(), createElementBlock("svg", _hoisted_1$A, _hoisted_4$9))
 }
 
 const _hoisted_1$z = {
@@ -5369,13 +5369,13 @@ const _hoisted_1$y = {
 };
 const _hoisted_2$u = /*#__PURE__*/createElementVNode("path", { d: "M16 13h-4.172l-1.414 1.414A1.99 1.99 0 019 15a1.986 1.986 0 01-1.414-.586L6.172 13H2a1 1 0 00-1 1v3a1 1 0 001 1h14a1 1 0 001-1v-3c0-.553-.447-1-1-1zm-1.5 3.25a.752.752 0 01-.75-.75c0-.412.338-.75.75-.75s.75.338.75.75-.338.75-.75.75z" }, null, -1);
 const _hoisted_3$s = /*#__PURE__*/createElementVNode("path", { d: "M4.293 8.706a1 1 0 011.414-1.414l2.292 2.296V2a1 1 0 012 0v7.588l2.293-2.294a1 1 0 111.414 1.414l-4 4A.997.997 0 019 13a.995.995 0 01-.707-.293l-4-4z" }, null, -1);
-const _hoisted_4$9 = [
+const _hoisted_4$8 = [
   _hoisted_2$u,
   _hoisted_3$s
 ];
 
 function render$z(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$y, _hoisted_4$9))
+  return (openBlock(), createElementBlock("svg", _hoisted_1$y, _hoisted_4$8))
 }
 
 const _hoisted_1$x = {
@@ -5749,10 +5749,10 @@ var _hoisted_2$d = {
   "class": "block mb-2 font-medium text-left"
 };
 var _hoisted_3$b = ["id", "aria-expanded"];
-var _hoisted_4$8 = {
+var _hoisted_4$7 = {
   key: 0
 };
-var _hoisted_5$6 = {
+var _hoisted_5$5 = {
   key: 1,
   "class": "text-grey-base"
 };
@@ -5782,7 +5782,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
     id: "".concat(_ctx.name, "-fw-dropdown--button"),
     "aria-expanded": _ctx.isOpen,
     "aria-haspopup": "true"
-  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$6, toDisplayString(_ctx.placeholder), 1)), createVNode(_component_ChevronDownSvg, {
+  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("span", _hoisted_4$7, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$5, toDisplayString(_ctx.placeholder), 1)), createVNode(_component_ChevronDownSvg, {
     "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
   }, null, 8, ["class"])], 10, _hoisted_3$b), createVNode(Transition, {
     name: "slideUpDown"
@@ -6164,6 +6164,14 @@ var script$d = defineComponent({
      */
     actionLabel: {
       type: String
+    },
+
+    /**
+     * The class for the container wrapper.
+     */
+    containerClass: {
+      type: String,
+      "default": 'max-w-6xl'
     }
   },
   setup: function setup(_props, ctx) {
@@ -6192,32 +6200,29 @@ var _hoisted_1$e = {
   "class": "fw-nav-menu relative z-50 h-20 shadow-md"
 };
 var _hoisted_2$b = {
-  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between max-w-6xl mx-auto"
-};
-var _hoisted_3$9 = {
   key: 0,
   "class": "flex-shrink-0 flex items-center"
 };
-var _hoisted_4$7 = {
+var _hoisted_3$9 = {
   key: 1,
   "class": "container hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_5$5 = {
+var _hoisted_4$6 = {
   "class": "flex space-x-2"
 };
-var _hoisted_6$2 = {
+var _hoisted_5$4 = {
   key: 2,
   "class": "hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_7$2 = {
+var _hoisted_6$2 = {
   "class": "flex items-center sm:hidden"
 };
 
-var _hoisted_8$2 = /*#__PURE__*/createElementVNode("span", {
+var _hoisted_7$2 = /*#__PURE__*/createElementVNode("span", {
   "class": "sr-only"
 }, "Open main menu", -1);
 
-var _hoisted_9$2 = {
+var _hoisted_8$2 = {
   "class": "block h-6 w-6",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -6225,8 +6230,8 @@ var _hoisted_9$2 = {
   stroke: "currentColor",
   "aria-hidden": "true"
 };
-var _hoisted_10$2 = ["d"];
-var _hoisted_11$1 = {
+var _hoisted_9$2 = ["d"];
+var _hoisted_10$2 = {
   "class": "w-full flex flex-col space-y-1"
 };
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
@@ -6234,7 +6239,9 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_FwButton = resolveComponent("FwButton");
 
-  return openBlock(), createElementBlock("nav", _hoisted_1$e, [createElementVNode("div", _hoisted_2$b, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$9, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$7, [createElementVNode("div", _hoisted_5$5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+  return openBlock(), createElementBlock("nav", _hoisted_1$e, [createElementVNode("div", {
+    "class": normalizeClass(["px-6 flex-1 h-full flex bg-white items-stretch justify-between mx-auto", _ctx.containerClass])
+  }, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_2$b, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$9, [createElementVNode("div", _hoisted_4$6, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
     return openBlock(), createBlock(_component_FwButton, {
       key: i,
       variant: "text",
@@ -6248,7 +6255,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6$2, [createVNode(_component_FwButton, {
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_5$4, [createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -6257,28 +6264,28 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
     }),
     _: 1
-  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7$2, [createVNode(_component_FwButton, {
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$2, [createVNode(_component_FwButton, {
     variant: "text",
     size: "sm",
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": withCtx(function () {
-      return [_hoisted_8$2, (openBlock(), createElementBlock("svg", _hoisted_9$2, [createElementVNode("path", {
+      return [_hoisted_7$2, (openBlock(), createElementBlock("svg", _hoisted_8$2, [createElementVNode("path", {
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "stroke-width": "2",
         d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
-      }, null, 8, _hoisted_10$2)]))];
+      }, null, 8, _hoisted_9$2)]))];
     }),
     _: 1
-  }, 8, ["onClick"])])]), createVNode(Transition, {
+  }, 8, ["onClick"])])], 2), createVNode(Transition, {
     name: "slideInLeft"
   }, {
     "default": withCtx(function () {
       return [_ctx.menuItems && _ctx.menuItems.length > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", {
         key: 0,
         "class": normalizeClass(["fw-nav-menu--mobile", _ctx.mobileMenuClass])
-      }, [createElementVNode("div", _hoisted_11$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+      }, [createElementVNode("div", _hoisted_10$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
         return openBlock(), createBlock(_component_FwButton, {
           key: i,
           "class": "w-full rounded-md",
@@ -7034,8 +7041,8 @@ var _hoisted_2$9 = {
 var _hoisted_3$7 = {
   "class": "fw-modal--wrapper text-center overflow-auto flex justify-center items-center h-full"
 };
-var _hoisted_4$6 = ["role", "aria-labelledby", "aria-describedby"];
-var _hoisted_5$4 = {
+var _hoisted_4$5 = ["role", "aria-labelledby", "aria-describedby"];
+var _hoisted_5$3 = {
   key: 0,
   "class": "fw-modal--header text-center"
 };
@@ -7066,7 +7073,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
         "class": "fw-modal--container p-12 m-8 inline-block w-full max-w-[540px] bg-white rounded-2xl shadow",
         "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$4, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
+      }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", _hoisted_5$3, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
         key: 1,
         id: "modal_".concat(_ctx.uuid, "_header")
       }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_7$1)) : _ctx.header ? (openBlock(), createElementBlock("h2", {
@@ -7108,7 +7115,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
           return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$6)])])])];
+      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$5)])])])];
     }),
     _: 3
   });
@@ -7181,11 +7188,11 @@ var _hoisted_3$6 = {
   key: 1,
   "class": "text-base font-semibold text-center w-full"
 };
-var _hoisted_4$5 = {
+var _hoisted_4$4 = {
   key: 0,
   "class": "w-full flex items-start mt-[13px] mx-[-15px]"
 };
-var _hoisted_5$3 = {
+var _hoisted_5$2 = {
   "class": "w-full bg-grey-40 rounded flex-1"
 };
 function render$b(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7207,7 +7214,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
         'font-bold': step.position === _ctx.activeStep,
         'text-body': step.position > _ctx.activeStep
       }])
-    }, toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_4$5, [createElementVNode("div", _hoisted_5$3, [createElementVNode("div", {
+    }, toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_4$4, [createElementVNode("div", _hoisted_5$2, [createElementVNode("div", {
       "class": "bg-primary text-xs leading-none py-0.5 text-center rounded transition-all",
       style: normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
     }, null, 4)])])) : createCommentVNode("", true)], 2);
@@ -7525,7 +7532,7 @@ var script$7 = defineComponent({
 });
 
 var _hoisted_1$9 = {
-  "class": "fw-loading-bar rounded shadow-md",
+  "class": "fw-loading-bar rounded",
   "aria-hidden": "true"
 };
 function render$9(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7659,10 +7666,10 @@ var _hoisted_2$7 = ["tabindex", "onKeydown", "onClick"];
 var _hoisted_3$5 = {
   "class": "flex flex-row items-center space-x-1"
 };
-var _hoisted_4$4 = {
+var _hoisted_4$3 = {
   "class": "w-full"
 };
-var _hoisted_5$2 = {
+var _hoisted_5$1 = {
   key: 0
 };
 var _hoisted_6 = {
@@ -7700,7 +7707,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return _ctx.sortColumn(column);
       }
-    }, [createElementVNode("div", _hoisted_3$5, [createElementVNode("span", _hoisted_4$4, toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5$2, [createElementVNode("span", _hoisted_6, [createVNode(_component_CaretDownSvg, {
+    }, [createElementVNode("div", _hoisted_3$5, [createElementVNode("span", _hoisted_4$3, toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5$1, [createElementVNode("span", _hoisted_6, [createVNode(_component_CaretDownSvg, {
       "class": normalizeClass(["inline-block w-[12px] rotate-180", _ctx.sortedIcon('asc', column)])
     }, null, 8, ["class"]), createVNode(_component_CaretDownSvg, {
       "class": normalizeClass(["inline-block w-[12px] mt-[2px]", _ctx.sortedIcon('desc', column)])
@@ -7836,10 +7843,10 @@ var _hoisted_2$5 = {
 var _hoisted_3$3 = {
   "class": "flex flex-row items-center"
 };
-var _hoisted_4$3 = {
+var _hoisted_4$2 = {
   "class": "h4 mb-0 ml-6"
 };
-var _hoisted_5$1 = {
+var _hoisted_5 = {
   key: 0,
   "class": "h4"
 };
@@ -7851,7 +7858,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     "class": "fw-accordion--header px-8 py-4 bg-grey-lightest w-full border-opacity-0 hover:bg-grey-20"
   }, [createElementVNode("div", _hoisted_2$5, [createElementVNode("div", _hoisted_3$3, [createElementVNode("span", {
     "class": normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
-  }, null, 2), createElementVNode("span", _hoisted_4$3, toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true)])]), createVNode(Transition, {
+  }, null, 2), createElementVNode("span", _hoisted_4$2, toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true)])]), createVNode(Transition, {
     name: "slideInOut",
     onBeforeEnter: _ctx.transitionEnter,
     onEnter: _ctx.transitionEnter,
@@ -8469,7 +8476,7 @@ var lazyLoadDirective = {
     var createObserver = function createObserver() {
       var options = {
         root: null,
-        threshold: Number(el.getAttribute('threshold')) || 0.01
+        threshold: Number(el.getAttribute('threshold')) || 0
       };
       var observer = new IntersectionObserver(handleIntersect, options);
       observer.observe(el);
@@ -8512,6 +8519,29 @@ var script$2 = defineComponent({
       validator: function validator(value) {
         return ['native', 'background'].includes(value);
       }
+    },
+
+    /**
+     * Whether the loading bar and error state are rounded.
+     */
+    rounded: {
+      type: Boolean,
+      "default": false
+    },
+
+    /**
+     * The class for the native image element
+     */
+    imageClass: {
+      type: String
+    },
+
+    /**
+     * Controls the threshold before the component triggers the src url.
+     */
+    threshold: {
+      type: Number,
+      "default": 0
     }
   },
   setup: function setup(props) {
@@ -8526,17 +8556,11 @@ var script$2 = defineComponent({
   }
 });
 
-var _hoisted_1$4 = ["type"];
+var _hoisted_1$4 = ["type", "threshold"];
 var _hoisted_2$4 = ["data-url", "alt"];
 var _hoisted_3$2 = {
-  "class": "fw-image--error bg-grey-20"
-};
-var _hoisted_4$2 = {
   "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
 };
-
-var _hoisted_5 = /*#__PURE__*/createElementVNode("p", null, "Image failed to load", -1);
-
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
 
@@ -8547,8 +8571,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("div", {
     ref: "fwImageRef",
     type: _ctx.type,
+    threshold: _ctx.threshold,
     "class": normalizeClass(["fw-image", {
-      'fw-image--background': _ctx.isBackground
+      'fw-image--background': _ctx.isBackground,
+      'rounded-full': _ctx.rounded
     }]),
     onClick: _cache[0] || (_cache[0] = function ($event) {
       return _ctx.$emit('click', $event);
@@ -8570,16 +8596,23 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, [createElementVNode("img", {
     "data-url": _ctx.src,
-    alt: _ctx.alt
-  }, null, 8, _hoisted_2$4), createVNode(_component_FwLoadingBar, {
-    "class": "fw-image--loading w-full h-full"
-  }), createElementVNode("div", _hoisted_3$2, [createElementVNode("div", _hoisted_4$2, [createVNode(_component_FileExclamationSvg, {
-    "class": "w-10 h-10 text-alert mb-2"
-  }), _hoisted_5])]), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$4)), [[_directive_lazyload]]);
+    alt: _ctx.alt,
+    "class": normalizeClass(_ctx.imageClass)
+  }, null, 10, _hoisted_2$4), createVNode(_component_FwLoadingBar, {
+    "class": normalizeClass(["fw-image--loading w-full h-full", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, null, 8, ["class"]), createElementVNode("div", {
+    "class": normalizeClass(["fw-image--error bg-grey-20", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, [createElementVNode("div", _hoisted_3$2, [createVNode(_component_FileExclamationSvg, {
+    "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
+  })])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$4)), [[_directive_lazyload]]);
 }
 
-var css_248z$2 = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
-var stylesheet$2 = ".fw-image{position:relative}.fw-image img,.fw-image--error{opacity:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0}.fw-image--error-wrapper{font-size:20px;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--error-wrapper p{font-size:16px}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading,.fw-image--loaded img,.fw-image--loading{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+var css_248z$2 = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+var stylesheet$2 = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
 styleInject(css_248z$2);
 
 script$2.render = render$4;