@frollo/frollo-web-ui 1.2.4 → 1.2.6

package/cjs/index.js

@@ -4738,8 +4738,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 = {
@@ -4763,7 +4763,7 @@ var _hoisted_9$4 = /*#__PURE__*/vue.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"
 };
@@ -4797,7 +4797,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2 font-medium"
-      }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$d)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
+      }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$c)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6$5, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
@@ -4818,7 +4818,7 @@ function render$K(_ctx, _cache, $props, $setup, $data, $options) {
           }, _hoisted_10$4, 2)) : vue.createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024), _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$2, [vue.renderSlot(_ctx.$slots, "suffix")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_12, [vue.createVNode(vue.Transition, {
+      }, 1024), _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [vue.renderSlot(_ctx.$slots, "suffix")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_12, [vue.createVNode(vue.Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -4903,8 +4903,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]"
 };
@@ -4937,11 +4937,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 ? (vue.openBlock(), vue.createElementBlock("span", {
+      }), null, 16, _hoisted_4$b), _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", {
         key: 0,
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_5$7)) : vue.createCommentVNode("", true)], 8, _hoisted_3$C), vue.createElementVNode("div", _hoisted_6$4, [vue.createVNode(vue.Transition, {
+      }, null, 8, _hoisted_5$6)) : vue.createCommentVNode("", true)], 8, _hoisted_3$C), vue.createElementVNode("div", _hoisted_6$4, [vue.createVNode(vue.Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -5031,13 +5031,13 @@ function render$F(_ctx, _cache) {
 };
 const _hoisted_2$z = /*#__PURE__*/vue.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__*/vue.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$D, _hoisted_4$b))
+  return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$D, _hoisted_4$a))
 }const _hoisted_1$C = {
   viewBox: "0 0 24 24",
   fill: "currentColor",
@@ -5069,13 +5069,13 @@ function render$C(_ctx, _cache) {
 };
 const _hoisted_2$w = /*#__PURE__*/vue.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__*/vue.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$A, _hoisted_4$a))
+  return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$A, _hoisted_4$9))
 }const _hoisted_1$z = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg",
@@ -5095,13 +5095,13 @@ function render$A(_ctx, _cache) {
 };
 const _hoisted_2$u = /*#__PURE__*/vue.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__*/vue.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _hoisted_4$9))
+  return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _hoisted_4$8))
 }const _hoisted_1$x = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg",
@@ -5439,10 +5439,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"
 };
@@ -5472,7 +5472,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 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$8, vue.toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$6, vue.toDisplayString(_ctx.placeholder), 1)), vue.createVNode(_component_ChevronDownSvg, {
+  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$7, vue.toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$5, vue.toDisplayString(_ctx.placeholder), 1)), vue.createVNode(_component_ChevronDownSvg, {
     "class": vue.normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
   }, null, 8, ["class"])], 10, _hoisted_3$b), vue.createVNode(vue.Transition, {
     name: "slideUpDown"
@@ -5834,6 +5834,14 @@ styleInject(css_248z$8);script$e.render = render$g;var script$d = vue.defineComp
      */
     actionLabel: {
       type: String
+    },
+
+    /**
+     * The class for the container wrapper.
+     */
+    containerClass: {
+      type: String,
+      "default": 'max-w-6xl'
     }
   },
   setup: function setup(_props, ctx) {
@@ -5860,32 +5868,29 @@ styleInject(css_248z$8);script$e.render = render$g;var script$d = vue.defineComp
   "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__*/vue.createElementVNode("span", {
+var _hoisted_7$2 = /*#__PURE__*/vue.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",
@@ -5893,8 +5898,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) {
@@ -5902,7 +5907,9 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_FwButton = vue.resolveComponent("FwButton");
 
-  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$e, [vue.createElementVNode("div", _hoisted_2$b, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$7, [vue.createElementVNode("div", _hoisted_5$5, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$e, [vue.createElementVNode("div", {
+    "class": vue.normalizeClass(["px-6 flex-1 h-full flex bg-white items-stretch justify-between mx-auto", _ctx.containerClass])
+  }, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [vue.createElementVNode("div", _hoisted_4$6, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
     return vue.openBlock(), vue.createBlock(_component_FwButton, {
       key: i,
       variant: "text",
@@ -5916,7 +5923,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [vue.createVNode(_component_FwButton, {
+  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [vue.createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -5925,28 +5932,28 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       return [vue.createTextVNode(vue.toDisplayString(_ctx.actionLabel), 1)];
     }),
     _: 1
-  }, 8, ["onClick", "aria-label"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_7$2, [vue.createVNode(_component_FwButton, {
+  }, 8, ["onClick", "aria-label"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_6$2, [vue.createVNode(_component_FwButton, {
     variant: "text",
     size: "sm",
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": vue.withCtx(function () {
-      return [_hoisted_8$2, (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9$2, [vue.createElementVNode("path", {
+      return [_hoisted_7$2, (vue.openBlock(), vue.createElementBlock("svg", _hoisted_8$2, [vue.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"])])]), vue.createVNode(vue.Transition, {
+  }, 8, ["onClick"])])], 2), vue.createVNode(vue.Transition, {
     name: "slideInLeft"
   }, {
     "default": vue.withCtx(function () {
       return [_ctx.menuItems && _ctx.menuItems.length > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         "class": vue.normalizeClass(["fw-nav-menu--mobile", _ctx.mobileMenuClass])
-      }, [vue.createElementVNode("div", _hoisted_11$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+      }, [vue.createElementVNode("div", _hoisted_10$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
         return vue.openBlock(), vue.createBlock(_component_FwButton, {
           key: i,
           "class": "w-full rounded-md",
@@ -6634,8 +6641,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"
 };
@@ -6666,7 +6673,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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.renderSlot(_ctx.$slots, "icon")])) : vue.createCommentVNode("", true), _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h2", {
+      }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, [_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.renderSlot(_ctx.$slots, "icon")])) : vue.createCommentVNode("", true), _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h2", {
         key: 1,
         id: "modal_".concat(_ctx.uuid, "_header")
       }, [vue.renderSlot(_ctx.$slots, "header")], 8, _hoisted_7$1)) : _ctx.header ? (vue.openBlock(), vue.createElementBlock("h2", {
@@ -6708,7 +6715,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
           return [vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)], 8, _hoisted_4$6)])])])];
+      }, 8, ["variant", "aria-label"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)], 8, _hoisted_4$5)])])])];
     }),
     _: 3
   });
@@ -6773,11 +6780,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) {
@@ -6799,7 +6806,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
         'font-bold': step.position === _ctx.activeStep,
         'text-body': step.position > _ctx.activeStep
       }])
-    }, vue.toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [vue.createElementVNode("div", _hoisted_5$3, [vue.createElementVNode("div", {
+    }, vue.toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [vue.createElementVNode("div", _hoisted_5$2, [vue.createElementVNode("div", {
       "class": "bg-primary text-xs leading-none py-0.5 text-center rounded transition-all",
       style: vue.normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
     }, null, 4)])])) : vue.createCommentVNode("", true)], 2);
@@ -7081,7 +7088,7 @@ $$4({ target: 'Array', proto: true, forced: FORCED }, {
 });var script$7 = vue.defineComponent({
   name: 'FwLoadingBar'
 });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) {
@@ -7207,10 +7214,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 = {
@@ -7248,7 +7255,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return _ctx.sortColumn(column);
       }
-    }, [vue.createElementVNode("div", _hoisted_3$5, [vue.createElementVNode("span", _hoisted_4$4, vue.toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$2, [vue.createElementVNode("span", _hoisted_6, [vue.createVNode(_component_CaretDownSvg, {
+    }, [vue.createElementVNode("div", _hoisted_3$5, [vue.createElementVNode("span", _hoisted_4$3, vue.toDisplayString(column), 1), _ctx.isColumnSortable(column) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, [vue.createElementVNode("span", _hoisted_6, [vue.createVNode(_component_CaretDownSvg, {
       "class": vue.normalizeClass(["inline-block w-[12px] rotate-180", _ctx.sortedIcon('asc', column)])
     }, null, 8, ["class"]), vue.createVNode(_component_CaretDownSvg, {
       "class": vue.normalizeClass(["inline-block w-[12px] mt-[2px]", _ctx.sortedIcon('desc', column)])
@@ -7366,10 +7373,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"
 };
@@ -7381,7 +7388,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"
   }, [vue.createElementVNode("div", _hoisted_2$5, [vue.createElementVNode("div", _hoisted_3$3, [vue.createElementVNode("span", {
     "class": vue.normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
-  }, null, 2), vue.createElementVNode("span", _hoisted_4$3, vue.toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, vue.toDisplayString(_ctx.suffixTitle), 1)) : vue.createCommentVNode("", true)])]), vue.createVNode(vue.Transition, {
+  }, null, 2), vue.createElementVNode("span", _hoisted_4$2, vue.toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, vue.toDisplayString(_ctx.suffixTitle), 1)) : vue.createCommentVNode("", true)])]), vue.createVNode(vue.Transition, {
     name: "slideInOut",
     onBeforeEnter: _ctx.transitionEnter,
     onEnter: _ctx.transitionEnter,
@@ -7937,7 +7944,7 @@ $({ global: true, bind: true, forced: global$1.setTimeout !== setTimeout$1 }, {
     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);
@@ -7978,6 +7985,29 @@ $({ global: true, bind: true, forced: global$1.setTimeout !== setTimeout$1 }, {
       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) {
@@ -7990,17 +8020,11 @@ $({ global: true, bind: true, forced: global$1.setTimeout !== setTimeout$1 }, {
       isBackground: isBackground
     };
   }
-});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__*/vue.createElementVNode("p", null, "Image failed to load", -1);
-
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwLoadingBar = vue.resolveComponent("FwLoadingBar");
 
@@ -8011,8 +8035,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
     ref: "fwImageRef",
     type: _ctx.type,
+    threshold: _ctx.threshold,
     "class": vue.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);
@@ -8034,14 +8060,21 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, [vue.createElementVNode("img", {
     "data-url": _ctx.src,
-    alt: _ctx.alt
-  }, null, 8, _hoisted_2$4), vue.createVNode(_component_FwLoadingBar, {
-    "class": "fw-image--loading w-full h-full"
-  }), vue.createElementVNode("div", _hoisted_3$2, [vue.createElementVNode("div", _hoisted_4$2, [vue.createVNode(_component_FileExclamationSvg, {
-    "class": "w-10 h-10 text-alert mb-2"
-  }), _hoisted_5])]), vue.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}";
+    alt: _ctx.alt,
+    "class": vue.normalizeClass(_ctx.imageClass)
+  }, null, 10, _hoisted_2$4), vue.createVNode(_component_FwLoadingBar, {
+    "class": vue.normalizeClass(["fw-image--loading w-full h-full", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, null, 8, ["class"]), vue.createElementVNode("div", {
+    "class": vue.normalizeClass(["fw-image--error bg-grey-20", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, [vue.createElementVNode("div", _hoisted_3$2, [vue.createVNode(_component_FileExclamationSvg, {
+    "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
+  })])], 2), vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$4)), [[_directive_lazyload]]);
+}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;var script$1 = vue.defineComponent({
   name: 'FwLoadingCard',
   components: {

package/esm/fw-image.js

@@ -1,5 +1,6 @@
 import './es.array.includes-9a6e4066.js';
-import { defineComponent, computed, ref, createElementVNode, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createVNode, renderSlot } from 'vue';
+import { o as objectSetPrototypeOf } from './es.number.constructor-b7faae1f.js';
+import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, renderSlot } from 'vue';
 import './es.array.find-54b8f84b.js';
 import { a as documentCreateElement$1, g as global$4, b as functionCall, c as anObject$3, e as getMethod$2, w as wellKnownSymbol$6, h as aCallable$1, t as tryToString$1, i as toObject$2, f as functionUncurryThis, r as requireObjectCoercible$1, j as fails$2, k as hasOwnProperty_1, l as isCallable$4, m as isPure, o as objectDefineProperty, n as functionName, p as functionBindNative, q as engineUserAgent } from './function-name-c49146fc.js';
 import { _ as _export } from './object-keys-3c73c404.js';
@@ -9,8 +10,7 @@ import { a as arrayMethodIsStrict$1, c as createProperty$1 } from './create-prop
 import { c as classof$1 } from './classof-088c9833.js';
 import { t as toString$2 } from './to-string-c2bd1f4d.js';
 import { o as objectCreate } from './add-to-unscopables-a5032b1d.js';
-import { o as objectSetPrototypeOf } from './es.number.constructor-b7faae1f.js';
-import { s as script$1 } from './fw-loading-bar-525e9129.js';
+import { s as script$1 } from './fw-loading-bar-da7d53fb.js';
 import { r as render$1 } from './index-b3aa1664.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './check-94a5917a.js';
@@ -704,7 +704,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);
@@ -747,6 +747,29 @@ var script = 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) {
@@ -761,17 +784,11 @@ var script = defineComponent({
   }
 });
 
-var _hoisted_1 = ["type"];
+var _hoisted_1 = ["type", "threshold"];
 var _hoisted_2 = ["data-url", "alt"];
 var _hoisted_3 = {
-  "class": "fw-image--error bg-grey-20"
-};
-var _hoisted_4 = {
   "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(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
 
@@ -782,8 +799,10 @@ function render(_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);
@@ -805,16 +824,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, [createElementVNode("img", {
     "data-url": _ctx.src,
-    alt: _ctx.alt
-  }, null, 8, _hoisted_2), createVNode(_component_FwLoadingBar, {
-    "class": "fw-image--loading w-full h-full"
-  }), createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createVNode(_component_FileExclamationSvg, {
-    "class": "w-10 h-10 text-alert mb-2"
-  }), _hoisted_5])]), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
+    alt: _ctx.alt,
+    "class": normalizeClass(_ctx.imageClass)
+  }, null, 10, _hoisted_2), 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, [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)), [[_directive_lazyload]]);
 }
 
-var css_248z = ".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 = ".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 = ".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 = ".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);
 
 script.render = render;

package/esm/{fw-loading-bar-525e9129.js → fw-loading-bar-da7d53fb.js}

@@ -6,7 +6,7 @@ var script = defineComponent({
 });
 
 var _hoisted_1 = {
-  "class": "fw-loading-bar rounded shadow-md",
+  "class": "fw-loading-bar rounded",
   "aria-hidden": "true"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {

package/esm/fw-loading.js

@@ -1,5 +1,5 @@
-import { s as script$2 } from './fw-loading-bar-525e9129.js';
-export { s as FwLoadingBar } from './fw-loading-bar-525e9129.js';
+import { s as script$2 } from './fw-loading-bar-da7d53fb.js';
+export { s as FwLoadingBar } from './fw-loading-bar-da7d53fb.js';
 import { defineComponent, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, normalizeClass, Fragment, renderList } from 'vue';
 import './es.number.constructor-b7faae1f.js';
 import './style-inject.es-1f59c1d0.js';