@frollo/frollo-web-ui 8.0.3 → 8.1.0

package/cjs/index.js

@@ -6974,6 +6974,10 @@ function uniqueId(prefix) {
     required: {
       type: Boolean,
       "default": false
+    },
+    centerAlignInput: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -7022,11 +7026,11 @@ var _hoisted_10$5 = {
   key: 0,
   "class": "text-left text-sm font-medium mt-2 min-h-[21px]"
 };
-var _hoisted_11$2 = {
+var _hoisted_11$3 = {
   key: 0,
   "class": "text-error"
 };
-var _hoisted_12$2 = {
+var _hoisted_12$3 = {
   key: 1
 };
 function render$17(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7066,7 +7070,9 @@ function render$17(_ctx, _cache, $props, $setup, $data, $options) {
         "class": ["border-blue-500", [{
           'pl-10': !!_ctx.$slots.prefix,
           'pr-20': !!_ctx.$slots.suffix
-        }, (errorMessage || errors[0]) && meta.touched ? 'border-error text-error' : 'border-grey-40', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded']]
+        }, (errorMessage || errors[0]) && meta.touched ? 'border-error text-error' : 'border-grey-40', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded', {
+          'text-center': _ctx.centerAlignInput
+        }]]
       }), null, 16, _hoisted_8$9), _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$8, [vue.renderSlot(_ctx.$slots, "suffix", {
         "class": "h-full"
       })])) : vue.createCommentVNode("", true)]), _ctx.enableErrors ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$5, [vue.createVNode(vue.Transition, {
@@ -7074,7 +7080,7 @@ function render$17(_ctx, _cache, $props, $setup, $data, $options) {
         mode: "out-in"
       }, {
         "default": vue.withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$2, vue.toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12$2, vue.toDisplayString(_ctx.hint), 1)) : vue.createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$3, vue.toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12$3, vue.toDisplayString(_ctx.hint), 1)) : vue.createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])) : vue.createCommentVNode("", true)])];
@@ -8130,12 +8136,12 @@ var _hoisted_9$6 = {
 var _hoisted_10$4 = {
   "class": ""
 };
-var _hoisted_11$1 = ["aria-labelledby"];
-var _hoisted_12$1 = ["onClick"];
-var _hoisted_13$1 = {
+var _hoisted_11$2 = ["aria-labelledby"];
+var _hoisted_12$2 = ["onClick"];
+var _hoisted_13$2 = {
   "class": "flex items-center gap-x-2"
 };
-var _hoisted_14$1 = {
+var _hoisted_14$2 = {
   "class": "flex flex-col text-left"
 };
 var _hoisted_15$1 = {
@@ -8194,12 +8200,12 @@ function render$p(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: function onClick($event) {
             return _ctx.selectOption(option);
           }
-        }, [vue.createElementVNode("div", _hoisted_13$1, [option.image_url ? (vue.openBlock(), vue.createBlock(_component_FwImage, {
+        }, [vue.createElementVNode("div", _hoisted_13$2, [option.image_url ? (vue.openBlock(), vue.createBlock(_component_FwImage, {
           key: 0,
           src: option.image_url,
           "class": "w-[20px] h-[20px]"
-        }, null, 8, ["src"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_14$1, [vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1), option.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15$1, vue.toDisplayString(option.description), 1)) : vue.createCommentVNode("", true)])])], 10, _hoisted_12$1);
-      }), 128))], 10, _hoisted_11$1), [[vue.vShow, _ctx.isOpen]])];
+        }, null, 8, ["src"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_14$2, [vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1), option.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15$1, vue.toDisplayString(option.description), 1)) : vue.createCommentVNode("", true)])])], 10, _hoisted_12$2);
+      }), 128))], 10, _hoisted_11$2), [[vue.vShow, _ctx.isOpen]])];
     }),
     _: 1
   }), _ctx.enableErrors ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [vue.createVNode(vue.Transition, {
@@ -9322,11 +9328,16 @@ styleInject(css_248z$b);__default__$7.render = render$g;var __default__$6 = vue.
   components: {
     ArrowSortSvg: render$B,
     ArrowDownSvg: render$A,
-    FwLoadingBar: script$k
+    ChevronLeftSvg: render$O,
+    ChevronRightSvg: render$P,
+    FwLoadingBar: script$k,
+    FwButton: script$f,
+    FwInput: script$m
   },
   emits: [/** Fired when a row is clicked with row data */
   'rowClicked', /** Fired when a column is sorted */
-  'columnSorted'],
+  'columnSorted', /** Fired when a page number or arrow is clicked */
+  'pageChanged'],
   props: {
     items: {
       type: Array,
@@ -9350,6 +9361,13 @@ styleInject(css_248z$b);__default__$7.render = render$g;var __default__$6 = vue.
     },
     autoSortColumn: {
       type: Number
+    },
+    enablePagination: {
+      type: Boolean,
+      "default": false
+    },
+    totalAmount: {
+      type: Number
     }
   },
   setup: function setup(props, ctx) {
@@ -9359,6 +9377,35 @@ styleInject(css_248z$b);__default__$7.render = render$g;var __default__$6 = vue.
     var sortBy = vue.ref('');
     var sortDirection = vue.ref('asc');
     var currentSortedColumn = vue.ref('');
+    var currentPage = vue.ref('1');
+    var maxDisplayedPages = 7;
+    var pages = vue.computed(function () {
+      if (!props.totalAmount) return;
+      var currentPageNumber = Number(currentPage.value);
+      var pageButtons = [];
+      var pageNumberLimit = currentPageNumber + maxDisplayedPages - 1;
+      var maxPageNumber = props.totalAmount - currentPageNumber < maxDisplayedPages ? props.totalAmount : pageNumberLimit + 1;
+      for (var i = currentPageNumber; i < maxPageNumber + 1; i++) {
+        pageButtons.push({
+          pageNumber: i.toString(),
+          selected: i.toString() === currentPage.value
+        });
+      }
+      if (props.totalAmount === maxDisplayedPages) {
+        return pageButtons;
+      }
+      if (props.totalAmount - currentPageNumber > maxDisplayedPages) {
+        pageButtons.push({
+          pageNumber: '...',
+          selected: false
+        }, {
+          pageNumber: props.totalAmount.toString(),
+          selected: false
+        });
+      }
+      ctx.emit('pageChanged', currentPage.value);
+      return pageButtons;
+    });
     vue.onMounted(function () {
       if (Number(props.autoSortColumn) >= 0) {
         sortColumn(columns.value[Number(props.autoSortColumn)], false);
@@ -9432,6 +9479,16 @@ styleInject(css_248z$b);__default__$7.render = render$g;var __default__$6 = vue.
     var rowClicked = function rowClicked(row) {
       if (props.clickableRows) ctx.emit('rowClicked', row);
     };
+    var pageNumberClick = function pageNumberClick(pageNumber) {
+      if (pageNumber === '...') {
+        currentPage.value = (Number(currentPage.value) + maxDisplayedPages + 1).toString();
+        return;
+      }
+      currentPage.value = pageNumber;
+    };
+    var pageArrowClick = function pageArrowClick(next) {
+      currentPage.value = Number(currentPage.value) + (next ? 1 : -1).toString();
+    };
     return {
       columns: columns,
       sortBy: sortBy,
@@ -9444,14 +9501,18 @@ styleInject(css_248z$b);__default__$7.render = render$g;var __default__$6 = vue.
       isColumnSortable: isColumnSortable,
       isDisabled: isDisabled,
       rowClicked: rowClicked,
-      bgHoverColor: bgHoverColor
+      bgHoverColor: bgHoverColor,
+      currentPage: currentPage,
+      pages: pages,
+      pageNumberClick: pageNumberClick,
+      pageArrowClick: pageArrowClick
     };
   }
 });
 var __injectCSSVars__$5 = function __injectCSSVars__() {
   vue.useCssVars(function (_ctx) {
     return {
-      "d606643a": _ctx.bgHoverColor
+      "c795d904": _ctx.bgHoverColor
     };
   });
 };
@@ -9460,42 +9521,62 @@ __default__$6.setup = __setup__$5 ? function (props, ctx) {
   __injectCSSVars__$5();
   return __setup__$5(props, ctx);
 } : __injectCSSVars__$5;var _withScopeId$4 = function _withScopeId(n) {
-  return vue.pushScopeId("data-v-46577d1a"), n = n(), vue.popScopeId(), n;
+  return vue.pushScopeId("data-v-84c515f0"), n = n(), vue.popScopeId(), n;
+};
+var _hoisted_1$p = {
+  "class": "flex flex-col"
 };
-var _hoisted_1$p = ["aria-busy"];
-var _hoisted_2$n = {
+var _hoisted_2$n = ["aria-busy"];
+var _hoisted_3$j = {
   "class": "text-p2 border-b border-grey-40"
 };
-var _hoisted_3$j = ["tabindex", "onKeydown", "onClick"];
-var _hoisted_4$a = {
+var _hoisted_4$a = ["tabindex", "onKeydown", "onClick"];
+var _hoisted_5$8 = {
   "class": "flex flex-row items-center"
 };
-var _hoisted_5$8 = {
+var _hoisted_6$6 = {
   key: 0,
   "class": "ml-1 flex items-center justify-center w-5"
 };
-var _hoisted_6$6 = {
+var _hoisted_7$5 = {
   "class": "text-p2 bg-white font-light"
 };
-var _hoisted_7$5 = {
+var _hoisted_8$4 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_8$4 = {
+var _hoisted_9$3 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_9$3 = ["onClick", "tabindex", "onKeydown"];
-var _hoisted_10$1 = ["innerHTML"];
+var _hoisted_10$1 = ["onClick", "tabindex", "onKeydown"];
+var _hoisted_11$1 = ["innerHTML"];
+var _hoisted_12$1 = {
+  key: 0,
+  "class": "flex flex-row h-[44px] mt-8 px-64 space-x-2"
+};
+var _hoisted_13$1 = {
+  "class": "h-4 w-4"
+};
+var _hoisted_14$1 = /*#__PURE__*/_withScopeId$4(function () {
+  return /*#__PURE__*/vue.createElementVNode("strong", {
+    "class": "whitespace-nowrap px-4 self-center"
+  }, "Go to", -1);
+});
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$options;
   var _component_ArrowSortSvg = vue.resolveComponent("ArrowSortSvg");
   var _component_ArrowDownSvg = vue.resolveComponent("ArrowDownSvg");
   var _component_FwLoadingBar = vue.resolveComponent("FwLoadingBar");
-  return vue.openBlock(), vue.createElementBlock("table", {
-    "class": vue.normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : '']),
+  var _component_ChevronLeftSvg = vue.resolveComponent("ChevronLeftSvg");
+  var _component_FwButton = vue.resolveComponent("FwButton");
+  var _component_ChevronRightSvg = vue.resolveComponent("ChevronRightSvg");
+  var _component_FwInput = vue.resolveComponent("FwInput");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [vue.createElementVNode("table", {
+    "class": vue.normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card flex-1", _ctx.loading ? 'cursor-wait' : '']),
     "aria-live": "polite",
     "aria-busy": _ctx.loading
-  }, [vue.createElementVNode("thead", _hoisted_2$n, [vue.createElementVNode("tr", null, [_ctx.$slots.preHead ? vue.renderSlot(_ctx.$slots, "preHead", {
+  }, [vue.createElementVNode("thead", _hoisted_3$j, [vue.createElementVNode("tr", null, [_ctx.$slots.preHead ? vue.renderSlot(_ctx.$slots, "preHead", {
     key: 0
   }) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, function (column, thKey) {
     return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -9510,9 +9591,9 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return _ctx.sortColumn(column);
       }
-    }, [vue.createElementVNode("div", _hoisted_4$a, [vue.createElementVNode("span", {
+    }, [vue.createElementVNode("div", _hoisted_5$8, [vue.createElementVNode("span", {
       "class": vue.normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
-    }, vue.toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$8, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (vue.openBlock(), vue.createBlock(_component_ArrowSortSvg, {
+    }, vue.toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$6, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (vue.openBlock(), vue.createBlock(_component_ArrowSortSvg, {
       key: 0,
       "class": "inline-block w-full text-grey-base"
     })) : vue.createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (vue.openBlock(), vue.createBlock(_component_ArrowDownSvg, {
@@ -9521,10 +9602,10 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
     })) : vue.createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (vue.openBlock(), vue.createBlock(_component_ArrowDownSvg, {
       key: 2,
       "class": "inline-block w-4 text-primary"
-    })) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)])], 42, _hoisted_3$j)) : vue.createCommentVNode("", true)], 64);
+    })) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)])], 42, _hoisted_4$a)) : vue.createCommentVNode("", true)], 64);
   }), 128)), _ctx.$slots.head ? vue.renderSlot(_ctx.$slots, "head", {
     key: 1
-  }) : vue.createCommentVNode("", true)])]), vue.createElementVNode("tbody", _hoisted_6$6, [_ctx.loading ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+  }) : vue.createCommentVNode("", true)])]), vue.createElementVNode("tbody", _hoisted_7$5, [_ctx.loading ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
     key: 0
   }, vue.renderList(_ctx.sortedData, function (row, trKey) {
     return vue.openBlock(), vue.createElementBlock("tr", {
@@ -9532,10 +9613,10 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
     }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, function (column, colKey) {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
         key: colKey
-      }, [!_ctx.isDisabled(column) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_7$5, [vue.createVNode(_component_FwLoadingBar, {
+      }, [!_ctx.isDisabled(column) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_8$4, [vue.createVNode(_component_FwLoadingBar, {
         "class": "w-full h-7"
       })])) : vue.createCommentVNode("", true)], 64);
-    }), 128)), _ctx.$slots.row ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_8$4, [vue.createVNode(_component_FwLoadingBar, {
+    }), 128)), _ctx.$slots.row ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_9$3, [vue.createVNode(_component_FwLoadingBar, {
       "class": "w-full h-7"
     })])) : vue.createCommentVNode("", true)]);
   }), 128)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
@@ -9561,16 +9642,75 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "class": "py-2 pl-5 pr-3 text-left",
         innerHTML: _ctx.formattedText(row, column)
-      }, null, 8, _hoisted_10$1)) : vue.createCommentVNode("", true)], 64);
+      }, null, 8, _hoisted_11$1)) : vue.createCommentVNode("", true)], 64);
     }), 128)), _ctx.$slots.row ? vue.renderSlot(_ctx.$slots, "row", {
       key: 1,
       row: row
-    }) : vue.createCommentVNode("", true)], 42, _hoisted_9$3);
-  }), 128))])], 10, _hoisted_1$p);
-}var css_248z$a = ".fw-table-head--sortable[data-v-46577d1a]:hover{background-color:var(--d606643a)}.fw-table-row[data-v-46577d1a]:hover{background-color:var(--d606643a)}";
-var stylesheet$a = ".fw-table-head--sortable[data-v-46577d1a]:hover{background-color:var(--d606643a)}.fw-table-row[data-v-46577d1a]:hover{background-color:var(--d606643a)}";
+    }) : vue.createCommentVNode("", true)], 42, _hoisted_10$1);
+  }), 128))])], 10, _hoisted_2$n), _ctx.enablePagination || (_ctx$options = _ctx.options) !== null && _ctx$options !== void 0 && _ctx$options.enablePagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [vue.createVNode(_component_FwButton, {
+    variant: 'tertiary',
+    disabled: _ctx.currentPage === '1',
+    size: "sm",
+    "class": "border-grey-40",
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.pageArrowClick(false);
+    })
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.createVNode(_component_ChevronLeftSvg, {
+        "class": "h-4 w-4 text-red-500",
+        "stroke-width": "3"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled"]), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.pages, function (page) {
+    return vue.openBlock(), vue.createBlock(_component_FwButton, {
+      rounded: "",
+      size: "sm",
+      key: page.pageNumber,
+      variant: page.selected ? 'tertiary' : 'secondary',
+      "class": vue.normalizeClass({
+        'border-none': !page.selected,
+        'bg-transparent': true
+      }),
+      onClick: function onClick($event) {
+        return _ctx.pageNumberClick(page.pageNumber);
+      }
+    }, {
+      "default": vue.withCtx(function () {
+        return [vue.createElementVNode("div", _hoisted_13$1, [vue.createElementVNode("strong", null, vue.toDisplayString(page.pageNumber), 1)])];
+      }),
+      _: 2
+    }, 1032, ["variant", "class", "onClick"]);
+  }), 128)), vue.createVNode(_component_FwButton, {
+    variant: 'tertiary',
+    disabled: _ctx.totalAmount && Number(_ctx.currentPage) === _ctx.totalAmount,
+    size: "sm",
+    "class": "border-grey-40",
+    onClick: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.pageArrowClick(true);
+    })
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.createVNode(_component_ChevronRightSvg, {
+        "class": "h-4 w-4"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled"]), _hoisted_14$1, vue.createVNode(_component_FwInput, {
+    "center-align-input": "",
+    "class": "max-w-[66px] p-0 text-center",
+    name: "page",
+    modelValue: _ctx.currentPage,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.currentPage = $event;
+    }),
+    type: "tel"
+  }, null, 8, ["modelValue"])])) : vue.createCommentVNode("", true)]);
+}var css_248z$a = ".fw-table-head--sortable[data-v-84c515f0]:hover{background-color:var(--c795d904)}.fw-table-row[data-v-84c515f0]:hover{background-color:var(--c795d904)}";
+var stylesheet$a = ".fw-table-head--sortable[data-v-84c515f0]:hover{background-color:var(--c795d904)}.fw-table-row[data-v-84c515f0]:hover{background-color:var(--c795d904)}";
 styleInject(css_248z$a);__default__$6.render = render$f;
-__default__$6.__scopeId = "data-v-46577d1a";var script$9 = vue.defineComponent({
+__default__$6.__scopeId = "data-v-84c515f0";var script$9 = vue.defineComponent({
   name: 'FwTableHead'
 });var _hoisted_1$o = {
   "class": "py-6 px-5 text-left font-medium"
@@ -25581,7 +25721,7 @@ styleInject(css_248z$7);script$2.render = render$6;var script$1 = vue.defineComp
   },
   setup: function setup(props, ctx) {
     var baseDrawerClass = "fixed shadow-card top-0 right-0 z-40 h-screen bg-white";
-    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-card bg-white p-4 clip-top-shadow\n    ";
+    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-card bg-white p-6 clip-top-shadow\n    ";
     var isMounted = vue.ref(false);
     var uuid = uniqueId();
     var isOpen = vue.computed({
@@ -25615,7 +25755,7 @@ styleInject(css_248z$7);script$2.render = render$6;var script$1 = vue.defineComp
   }
 });var _hoisted_1$f = ["id"];
 var _hoisted_2$e = {
-  "class": "flex flex-row justify-between items-center p-4"
+  "class": "flex flex-row justify-between items-center p-6"
 };
 var _hoisted_3$c = ["id"];
 var _hoisted_4$6 = ["id"];
@@ -25640,18 +25780,18 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         "class": vue.normalizeClass(["fw-drawer", _ctx.baseDrawerClass]),
         tabindex: "-1",
         "aria-labelledby": "drawer-label"
-      }, [vue.createElementVNode("div", _hoisted_2$e, [_ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h3", {
+      }, [vue.createElementVNode("div", _hoisted_2$e, [_ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h2", {
         key: 0,
         id: "drawer_".concat(_ctx.uuid, "_header"),
-        "class": "inline-flex items-center mb-0 text-body font-semibold"
+        "class": "inline-flex items-center mb-0 text-body font-bold"
       }, [vue.renderSlot(_ctx.$slots, "header")], 8, _hoisted_3$c)) : vue.createCommentVNode("", true), vue.createVNode(_component_FwButton, {
-        variant: "primary",
+        variant: "transparent",
         tabindex: "",
         title: "Close drawer",
         onClick: _cache[0] || (_cache[0] = function ($event) {
           return _ctx.onCancelled();
         }),
-        "class": "inline-block w-9 h-9 !p-0 shadow inline-flex items-center justify-center rounded-full"
+        "class": "inline-block w-9 h-9 !p-0 inline-flex items-center justify-center"
       }, {
         "default": vue.withCtx(function () {
           return [vue.createVNode(_component_XMarkSvg, {

package/esm/fw-accordion.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, watch, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, toDisplayString, renderSlot, createVNode, Transition, withCtx, withDirectives, vShow } from 'vue';
 import { u as useColours } from './get-root-colours-DYEoJPEb.js';
-import { r as render$1 } from './index-B-9TSbb0.js';
+import { r as render$1 } from './index-svDiDkSU.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import './check--YD4Ts6g.js';
 

package/esm/fw-animations.js

@@ -1,7 +1,7 @@
 import { defineComponent, useCssVars, pushScopeId, popScopeId, createElementVNode, openBlock, createElementBlock, createStaticVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-export { s as FwLoadingSpinner } from './fw-loading-spinner-AsWqai_A.js';
-import './index-B-9TSbb0.js';
+export { s as FwLoadingSpinner } from './fw-loading-spinner-BEzZf1xe.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';
 
 var __default__$1 = defineComponent({

package/esm/{fw-button-D8GUq_wg.js → fw-button-DdxvSBFa.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createElementVNode, Fragment, createTextVNode, toDisplayString, renderSlot, createCommentVNode, createVNode } from 'vue';
-import { s as script$1 } from './fw-loading-spinner-AsWqai_A.js';
+import { s as script$1 } from './fw-loading-spinner-BEzZf1xe.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var script = defineComponent({

package/esm/fw-button.js

@@ -1,6 +1,6 @@
-export { s as FwButton } from './fw-button-D8GUq_wg.js';
+export { s as FwButton } from './fw-button-DdxvSBFa.js';
 import 'vue';
-import './fw-loading-spinner-AsWqai_A.js';
-import './index-B-9TSbb0.js';
+import './fw-loading-spinner-BEzZf1xe.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';
 import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-date-picker.js

@@ -1,5 +1,5 @@
 import { reactive, computed, ref, watch, onUnmounted, provide, inject, onMounted, watchEffect, defineComponent, nextTick, toRefs, openBlock, createElementBlock, normalizeClass, createVNode, Transition, withCtx, mergeProps, renderSlot, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, unref, createBlock, resolveDynamicComponent, normalizeProps, Fragment, renderList, normalizeStyle, withKeys, withDirectives, toRef, resolveComponent, resolveDirective, toHandlers, withModifiers, isRef, guardReactiveProps, useCssVars } from 'vue';
-import { a as render$1 } from './index-B-9TSbb0.js';
+import { a as render$1 } from './index-svDiDkSU.js';
 import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
 import { c as createPopper } from './index-BVcOAKar.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';

package/esm/fw-drawer.js

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString, vShow } from 'vue';
-import { s as script$1 } from './fw-button-D8GUq_wg.js';
+import { s as script$1 } from './fw-button-DdxvSBFa.js';
 import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
-import { b as render$1 } from './index-B-9TSbb0.js';
+import { b as render$1 } from './index-svDiDkSU.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-spinner-AsWqai_A.js';
+import './fw-loading-spinner-BEzZf1xe.js';
 import './check--YD4Ts6g.js';
 
 var script = defineComponent({
@@ -92,7 +92,7 @@ var script = defineComponent({
   },
   setup: function setup(props, ctx) {
     var baseDrawerClass = "fixed shadow-card top-0 right-0 z-40 h-screen bg-white";
-    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-card bg-white p-4 clip-top-shadow\n    ";
+    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-card bg-white p-6 clip-top-shadow\n    ";
     var isMounted = ref(false);
     var uuid = uniqueId();
     var isOpen = computed({
@@ -128,7 +128,7 @@ var script = defineComponent({
 
 var _hoisted_1 = ["id"];
 var _hoisted_2 = {
-  "class": "flex flex-row justify-between items-center p-4"
+  "class": "flex flex-row justify-between items-center p-6"
 };
 var _hoisted_3 = ["id"];
 var _hoisted_4 = ["id"];
@@ -153,18 +153,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": normalizeClass(["fw-drawer", _ctx.baseDrawerClass]),
         tabindex: "-1",
         "aria-labelledby": "drawer-label"
-      }, [createElementVNode("div", _hoisted_2, [_ctx.$slots.header ? (openBlock(), createElementBlock("h3", {
+      }, [createElementVNode("div", _hoisted_2, [_ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
         key: 0,
         id: "drawer_".concat(_ctx.uuid, "_header"),
-        "class": "inline-flex items-center mb-0 text-body font-semibold"
+        "class": "inline-flex items-center mb-0 text-body font-bold"
       }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_3)) : createCommentVNode("", true), createVNode(_component_FwButton, {
-        variant: "primary",
+        variant: "transparent",
         tabindex: "",
         title: "Close drawer",
         onClick: _cache[0] || (_cache[0] = function ($event) {
           return _ctx.onCancelled();
         }),
-        "class": "inline-block w-9 h-9 !p-0 shadow inline-flex items-center justify-center rounded-full"
+        "class": "inline-block w-9 h-9 !p-0 inline-flex items-center justify-center"
       }, {
         "default": withCtx(function () {
           return [createVNode(_component_XMarkSvg, {

package/esm/{fw-dropdown-YXj5yyty.js → fw-dropdown-BcnKbaW1.js}

@@ -1,7 +1,7 @@
 import { defineComponent, toRef, ref, computed, watch, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, createBlock, renderSlot, createVNode, Transition, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
 import { u as useField } from './vee-validate.esm-3ptvCDR1.js';
-import { r as render$1 } from './index-B-9TSbb0.js';
-import { s as script$1 } from './fw-image-DAUZLkf4.js';
+import { r as render$1 } from './index-svDiDkSU.js';
+import { s as script$1 } from './fw-image-DedhILQL.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var script = defineComponent({

package/esm/fw-dropdown.js

@@ -1,8 +1,8 @@
-export { s as FwDropdown } from './fw-dropdown-YXj5yyty.js';
+export { s as FwDropdown } from './fw-dropdown-BcnKbaW1.js';
 import 'vue';
 import './vee-validate.esm-3ptvCDR1.js';
-import './index-B-9TSbb0.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';
-import './fw-image-DAUZLkf4.js';
+import './fw-image-DedhILQL.js';
 import './fw-loading-bar-DThRjdw1.js';
 import './style-inject.es-tgCJW-Cu.js';

package/esm/{fw-image-DAUZLkf4.js → fw-image-DedhILQL.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, createBlock, createCommentVNode, renderSlot } from 'vue';
 import { s as script$1 } from './fw-loading-bar-DThRjdw1.js';
-import { k as render$1 } from './index-B-9TSbb0.js';
+import { l as render$1 } from './index-svDiDkSU.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var handleIntersect = function handleIntersect(entries, observer) {

package/esm/fw-image.js

@@ -1,6 +1,6 @@
-export { s as FwImage } from './fw-image-DAUZLkf4.js';
+export { s as FwImage } from './fw-image-DedhILQL.js';
 import 'vue';
 import './fw-loading-bar-DThRjdw1.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './index-B-9TSbb0.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';

package/esm/{fw-input-CPU_C8IU.js → fw-input-BPFFMpc2.js}

@@ -108,6 +108,10 @@ var script = defineComponent({
     required: {
       type: Boolean,
       "default": false
+    },
+    centerAlignInput: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -202,7 +206,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": ["border-blue-500", [{
           'pl-10': !!_ctx.$slots.prefix,
           'pr-20': !!_ctx.$slots.suffix
-        }, (errorMessage || errors[0]) && meta.touched ? 'border-error text-error' : 'border-grey-40', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded']]
+        }, (errorMessage || errors[0]) && meta.touched ? 'border-error text-error' : 'border-grey-40', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded', {
+          'text-center': _ctx.centerAlignInput
+        }]]
       }), null, 16, _hoisted_8), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "suffix", {
         "class": "h-full"
       })])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(Transition, {

package/esm/fw-input.js

@@ -1,4 +1,4 @@
-export { s as FwInput } from './fw-input-CPU_C8IU.js';
+export { s as FwInput } from './fw-input-BPFFMpc2.js';
 import 'vue';
 import './vee-validate.esm-3ptvCDR1.js';
 import './uniqueId-DK6xzFd8.js';

package/esm/{fw-loading-spinner-AsWqai_A.js → fw-loading-spinner-BEzZf1xe.js}

@@ -1,4 +1,4 @@
-import { i as render$1 } from './index-B-9TSbb0.js';
+import { j as render$1 } from './index-svDiDkSU.js';
 import { defineComponent, resolveComponent, openBlock, createBlock } from 'vue';
 
 var script = defineComponent({

package/esm/fw-modal.js

@@ -1,9 +1,9 @@
 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-D8GUq_wg.js';
+import { s as script$1 } from './fw-button-DdxvSBFa.js';
 import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
-import { b as render$1 } from './index-B-9TSbb0.js';
+import { b as render$1 } from './index-svDiDkSU.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-spinner-AsWqai_A.js';
+import './fw-loading-spinner-BEzZf1xe.js';
 import './check--YD4Ts6g.js';
 
 var script = defineComponent({

package/esm/fw-navigation-menu.js

@@ -1,8 +1,8 @@
 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-D8GUq_wg.js';
+import { s as script$1 } from './fw-button-DdxvSBFa.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-spinner-AsWqai_A.js';
-import './index-B-9TSbb0.js';
+import './fw-loading-spinner-BEzZf1xe.js';
+import './index-svDiDkSU.js';
 import './check--YD4Ts6g.js';
 
 var script = defineComponent({