@frollo/frollo-web-ui 0.0.11 → 0.0.14

package/frollo-web-ui.esm.js

@@ -1459,7 +1459,7 @@ $$1({ target: 'Object', stat: true }, {
   }
 });
 
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -1500,22 +1500,22 @@ var script$3 = defineComponent({
   }
 });
 
-var _hoisted_1$2 = {
+var _hoisted_1$3 = {
   key: 0,
   "class": "fw-card--header text-lg px-8 py-4 font-bold bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_2$2 = {
+var _hoisted_2$3 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_3$2 = {
+var _hoisted_3$3 = {
   key: 1
 };
-var _hoisted_4$2 = {
+var _hoisted_4$3 = {
   key: 1,
   "class": "p-8"
 };
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.componentName), {
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
@@ -1523,13 +1523,13 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     "class": normalizeClass(["fw-card shadow-card rounded-lg", _ctx.to || _ctx.href ? 'block cursor-pointer focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1' : ''])
   }, {
     "default": withCtx(function () {
-      return [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_1$2, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_4$2, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)];
+      return [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_1$3, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3$3, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)];
     }),
     _: 3
   }, 8, ["to", "href", "tabindex", "class"]);
 }
 
-script$3.render = render$3;
+script$4.render = render$4;
 
 var es_array_includes = {};
 
@@ -1681,7 +1681,7 @@ $({ target: 'Array', proto: true }, {
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 addToUnscopables('includes');
 
-var script$2 = defineComponent({
+var script$3 = defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -1759,9 +1759,9 @@ var script$2 = defineComponent({
         border: 'border-error focus-visible:ring-error'
       },
       link: {
-        text: 'text-primary underline hover:no-underline active:no-underline focus-visible:no-underline',
+        text: 'text-primary font-normal underline hover:no-underline active:no-underline focus-visible:no-underline',
         background: '',
-        border: 'border-none rounded-none focus-visible:ring-primary'
+        border: 'border-none focus-visible:ring-primary'
       },
       text: {
         text: 'text-body font-medium hover:text-white active:text-white',
@@ -1848,9 +1848,9 @@ var script$2 = defineComponent({
   }
 });
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
-    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0' : '']]),
+    "class": normalizeClass(["fw-button cursor-pointer whitespace-nowrap border-2 focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-2 focus-visible:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 rounded-none font-normal' : 'font-bold rounded-full']]),
     type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
@@ -1895,17 +1895,17 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$2 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
-var stylesheet$2 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
-styleInject(css_248z$2);
+var css_248z$3 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+var stylesheet$3 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+styleInject(css_248z$3);
 
-script$2.render = render$2;
+script$3.render = render$3;
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   name: 'FwNavigationMenu',
   emits: ['action'],
   components: {
-    FwButton: script$2
+    FwButton: script$3
   },
   props: {
     /**
@@ -1943,32 +1943,32 @@ var script$1 = defineComponent({
   }
 });
 
-var _hoisted_1$1 = {
+var _hoisted_1$2 = {
   "class": "fw-nav-menu relative z-50 h-20 shadow-md"
 };
-var _hoisted_2$1 = {
+var _hoisted_2$2 = {
   "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
 };
-var _hoisted_3$1 = {
+var _hoisted_3$2 = {
   key: 0,
   "class": "flex-shrink-0 flex items-center"
 };
-var _hoisted_4$1 = {
+var _hoisted_4$2 = {
   key: 1,
   "class": "container hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_5$1 = {
+var _hoisted_5$2 = {
   "class": "flex space-x-2"
 };
-var _hoisted_6$1 = {
+var _hoisted_6$2 = {
   key: 2,
   "class": "hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_7$1 = {
+var _hoisted_7$2 = {
   "class": "flex items-center sm:hidden"
 };
 
-var _hoisted_8$1 = /*#__PURE__*/createElementVNode("span", {
+var _hoisted_8$2 = /*#__PURE__*/createElementVNode("span", {
   "class": "sr-only"
 }, "Open main menu", -1);
 
@@ -1985,15 +1985,15 @@ var _hoisted_11$1 = {
   key: 0,
   "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
 };
-var _hoisted_12 = {
+var _hoisted_12$1 = {
   "class": "w-full flex flex-col"
 };
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _ctx$menuItems;
 
   var _component_FwButton = resolveComponent("FwButton");
 
-  return openBlock(), createElementBlock("nav", _hoisted_1$1, [createElementVNode("div", _hoisted_2$1, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$1, [createElementVNode("div", _hoisted_5$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+  return openBlock(), createElementBlock("nav", _hoisted_1$2, [createElementVNode("div", _hoisted_2$2, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$2, [createElementVNode("div", _hoisted_5$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
     return openBlock(), createBlock(_component_FwButton, {
       key: i,
       variant: "text",
@@ -2007,7 +2007,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6$1, [createVNode(_component_FwButton, {
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6$2, [createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -2016,13 +2016,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
     }),
     _: 1
-  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7$1, [createVNode(_component_FwButton, {
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7$2, [createVNode(_component_FwButton, {
     variant: "text",
     size: "sm",
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": withCtx(function () {
-      return [_hoisted_8$1, (openBlock(), createElementBlock("svg", _hoisted_9$1, [createElementVNode("path", {
+      return [_hoisted_8$2, (openBlock(), createElementBlock("svg", _hoisted_9$1, [createElementVNode("path", {
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "stroke-width": "2",
@@ -2036,7 +2036,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     "default": withCtx(function () {
       var _ctx$menuItems2;
 
-      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_11$1, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_11$1, [createElementVNode("div", _hoisted_12$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
         return openBlock(), createBlock(_component_FwButton, {
           key: i,
           "class": "w-full rounded-md px-2",
@@ -2067,11 +2067,11 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   })]);
 }
 
-var css_248z$1 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
-var stylesheet$1 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
-styleInject(css_248z$1);
+var css_248z$2 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet$2 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z$2);
 
-script$1.render = render$1;
+script$2.render = render$2;
 
 function getDevtoolsGlobalHook() {
     return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
@@ -5209,7 +5209,7 @@ function useSubmitForm(cb) {
     };
 }
 
-var script = defineComponent({
+var script$1 = defineComponent({
   name: 'FwInput',
   emits: ['update:modelValue'],
   components: {
@@ -5271,6 +5271,13 @@ var script = defineComponent({
     readonly: {
       type: Boolean,
       "default": false
+    },
+
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+      type: String
     }
   },
   setup: function setup(props, ctx) {
@@ -5316,27 +5323,29 @@ if (DESCRIPTORS && !FUNCTION_NAME_EXISTS) {
   });
 }
 
-var _hoisted_1 = {
+var _hoisted_1$1 = {
   "class": "fw-input w-full"
 };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
   "class": "flex flex-col"
 };
-var _hoisted_3 = ["for"];
-var _hoisted_4 = {
-  "class": "relative"
+var _hoisted_3$1 = {
+  "class": "flex flex-row justify-between"
 };
-var _hoisted_5 = {
-  key: 0,
-  "class": "flex text-grey-base absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
+var _hoisted_4$1 = ["for"];
+var _hoisted_5$1 = {
+  key: 1
 };
-var _hoisted_6 = ["placeholder", "type", "readonly", "disabled"];
-var _hoisted_7 = {
+var _hoisted_6$1 = {
+  "class": "relative"
+};
+var _hoisted_7$1 = {
   key: 0,
-  "class": "flex text-error absolute w-9 h-full inset-y-0 right-0 items-center pr-3 pointer-events-none"
+  "class": "flex text-black absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
+var _hoisted_8$1 = ["placeholder", "type", "readonly", "disabled"];
 
-var _hoisted_8 = /*#__PURE__*/createElementVNode("svg", {
+var _hoisted_9 = /*#__PURE__*/createElementVNode("svg", {
   fill: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
@@ -5347,17 +5356,25 @@ var _hoisted_8 = /*#__PURE__*/createElementVNode("svg", {
   d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8\n                  242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36\n                  0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4\n                  400 256 400z"
 })], -1);
 
-var _hoisted_9 = [_hoisted_8];
-var _hoisted_10 = {
-  "class": "text-error italic text-right text-sm font-medium mt-2 min-h-[21px]"
-};
+var _hoisted_10 = [_hoisted_9];
 var _hoisted_11 = {
-  key: 0
+  key: 1,
+  "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
 };
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+var _hoisted_12 = {
+  "class": "italic text-right text-sm font-medium mt-2 min-h-[21px]"
+};
+var _hoisted_13 = {
+  key: 0,
+  "class": "text-error"
+};
+var _hoisted_14 = {
+  key: 1
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
 
-  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_InputField, {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.inputValue = $event;
@@ -5370,30 +5387,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [createElementVNode("div", _hoisted_2, [_ctx.label ? (openBlock(), createElementBlock("label", {
+      return [createElementVNode("div", _hoisted_2$1, [createElementVNode("div", _hoisted_3$1, [_ctx.label ? (openBlock(), createElementBlock("label", {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2"
-      }, toDisplayString(_ctx.label), 9, _hoisted_3)) : createCommentVNode("", true), createElementVNode("div", _hoisted_4, [_ctx.$slots.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "prefixIcon")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
+      }, toDisplayString(_ctx.label), 9, _hoisted_4$1)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$1, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
         disabled: _ctx.readonly,
         "class": ["border-2 border-grey-lightest rounded-lg focus:outline-none focus:ring-2 focus:ring-primary block w-full p-2.5", {
-          'pl-10': !!_ctx.$slots.prefixIcon
+          'pl-10': !!_ctx.$slots.prefix,
+          'pr-20': !!_ctx.$slots.suffix
         }]
-      }), null, 16, _hoisted_6), createVNode(Transition, {
-        name: "errorFadeIn"
+      }), null, 16, _hoisted_8$1), createVNode(Transition, {
+        name: "fwFadeIn"
       }, {
         "default": withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("div", _hoisted_7, _hoisted_9)) : createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "class": normalizeClass(["flex text-error absolute w-9 h-full inset-y-0 right-0 items-center pr-3 pointer-events-none", _ctx.$slots.suffix ? 'mr-8' : ''])
+          }, _hoisted_10, 2)) : createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024)]), createElementVNode("div", _hoisted_10, [createVNode(Transition, {
-        name: "errorFadeIn"
+      }, 1024), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_12, [createVNode(Transition, {
+        name: "fwFadeIn",
+        mode: "out-in"
       }, {
         "default": withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(errorMessage || errors[0]), 1)) : createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])])];
@@ -5402,19 +5424,122 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["modelValue", "name", "rules"])]);
 }
 
-var css_248z = ".errorFadeIn-enter-active{-webkit-animation:errorFadeIn .35s;animation:errorFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.errorFadeIn-leave-active{animation:errorFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}@keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}";
-var stylesheet = ".errorFadeIn-enter-active{-webkit-animation:errorFadeIn .35s;animation:errorFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.errorFadeIn-leave-active{animation:errorFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}@keyframes errorFadeIn{0%{opacity:0}to{opacity:1}}";
+var css_248z$1 = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+var stylesheet$1 = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+styleInject(css_248z$1);
+
+script$1.render = render$1;
+
+var script = defineComponent({
+  name: 'FwCheckbox',
+  components: {
+    InputField: Field
+  },
+  props: {
+    /**
+     * The name of the input field. Must be unique per form.
+     */
+    name: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Label for the input. Also renders to an aria-label attribute
+     */
+    label: {
+      type: String
+    },
+
+    /**
+     * Validation rules. Accepts a string, object, function or schema.
+     */
+    rules: {
+      type: [String, Object, Function]
+    },
+
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+      type: String
+    }
+  }
+});
+
+var _hoisted_1 = {
+  "class": "fw-checkbox w-full"
+};
+var _hoisted_2 = {
+  "class": "flex flex-col"
+};
+var _hoisted_3 = ["for"];
+var _hoisted_4 = ["value", "name"];
+var _hoisted_5 = ["innerHTML"];
+var _hoisted_6 = {
+  "class": "italic text-sm font-medium min-h-[21px]"
+};
+var _hoisted_7 = {
+  key: 0,
+  "class": "text-error"
+};
+var _hoisted_8 = {
+  key: 1
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_InputField = resolveComponent("InputField");
+
+  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_InputField, {
+    name: _ctx.name,
+    value: _ctx.name,
+    type: "checkbox",
+    rules: _ctx.rules
+  }, {
+    "default": withCtx(function (_ref) {
+      var field = _ref.field,
+          errors = _ref.errors,
+          errorMessage = _ref.errorMessage,
+          meta = _ref.meta;
+      return [createElementVNode("div", _hoisted_2, [_ctx.label ? (openBlock(), createElementBlock("label", {
+        key: 0,
+        "for": _ctx.name,
+        "class": "inline-flex items-center mb-3"
+      }, [createElementVNode("input", mergeProps(field, {
+        value: _ctx.name,
+        name: _ctx.name,
+        type: "checkbox",
+        "class": "text-primary w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
+      }), null, 16, _hoisted_4), createElementVNode("span", {
+        "class": "ml-2",
+        innerHTML: _ctx.label
+      }, null, 8, _hoisted_5)], 8, _hoisted_3)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createVNode(Transition, {
+        name: "fwFadeIn",
+        mode: "out-in"
+      }, {
+        "default": withCtx(function () {
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+        }),
+        _: 2
+      }, 1024)])])];
+    }),
+    _: 1
+  }, 8, ["name", "value", "rules"])]);
+}
+
+var css_248z = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}.fw-checkbox input{-webkit-print-color-adjust:exact;-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;color-adjust:exact;display:inline-block;flex-shrink:0;-webkit-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
+var stylesheet = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}.fw-checkbox input{-webkit-print-color-adjust:exact;-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;color-adjust:exact;display:inline-block;flex-shrink:0;-webkit-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
 styleInject(css_248z);
 
 script.render = render;
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  FwCard: script$3,
-  FwButton: script$2,
-  FwNavigationMenu: script$1,
+  FwCard: script$4,
+  FwButton: script$3,
+  FwNavigationMenu: script$2,
   FwForm: Form,
-  FwInput: script
+  FwInput: script$1,
+  FwCheckbox: script
 });
 
 var install = function install(app) {
@@ -5427,4 +5552,4 @@ var install = function install(app) {
   });
 };
 
-export { script$2 as FwButton, script$3 as FwCard, Form as FwForm, script as FwInput, script$1 as FwNavigationMenu, install as default };
+export { script$3 as FwButton, script$4 as FwCard, script as FwCheckbox, Form as FwForm, script$1 as FwInput, script$2 as FwNavigationMenu, install as default };

package/icons/download.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 13H11.8281L10.4141 14.4141C10.0375 14.7906 9.53438 15 9 15C8.46562 15 7.96375 14.792 7.58594 14.4141L6.17188 13H2C1.44781 13 1 13.4478 1 14V17C1 17.5522 1.44781 18 2 18H16C16.5522 18 17 17.5522 17 17V14C17 13.4469 16.5531 13 16 13ZM14.5 16.25C14.0875 16.25 13.75 15.9125 13.75 15.5C13.75 15.0875 14.0875 14.75 14.5 14.75C14.9125 14.75 15.25 15.0875 15.25 15.5C15.25 15.9125 14.9125 16.25 14.5 16.25Z" />
+<path d="M4.29273 8.70625C3.90242 8.31563 3.90242 7.68281 4.29273 7.29219C4.68336 6.90156 5.31648 6.90156 5.7068 7.29219L7.99898 9.5875V2C7.99898 1.44781 8.4468 1 8.99898 1C9.55117 1 9.99898 1.44781 9.99898 2V9.5875L12.2921 7.29437C12.6824 6.90375 13.3155 6.90375 13.7062 7.29437C14.0965 7.685 14.0965 8.31781 13.7062 8.70844L9.70617 12.7084C9.51148 12.9031 9.25523 13 8.99898 13C8.74273 13 8.48711 12.9023 8.29211 12.707L4.29273 8.70625Z" />
+</svg>

package/icons/eye-crossed.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -64 640 640">
+  <path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"/>
+</svg>

package/icons/eye.svg

@@ -0,0 +1,8 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
+  <g>
+    <g>
+      <path d="M609.608,315.426c3.19-5.874,3.19-12.979,0-18.853c-58.464-107.643-172.5-180.72-303.607-180.72    S60.857,188.931,2.393,296.573c-3.19,5.874-3.19,12.979,0,18.853C60.858,423.069,174.892,496.147,306,496.147    S551.143,423.069,609.608,315.426z M306,451.855c-80.554,0-145.855-65.302-145.855-145.855S225.446,160.144,306,160.144    S451.856,225.446,451.856,306S386.554,451.855,306,451.855z"/>
+      <path d="M306,231.67c-6.136,0-12.095,0.749-17.798,2.15c5.841,6.76,9.383,15.563,9.383,25.198c0,21.3-17.267,38.568-38.568,38.568    c-9.635,0-18.438-3.541-25.198-9.383c-1.401,5.703-2.15,11.662-2.15,17.798c0,41.052,33.279,74.33,74.33,74.33    s74.33-33.279,74.33-74.33S347.052,231.67,306,231.67z"/>
+    </g>
+  </g>
+</svg>

package/icons/id-card.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+  <path d="M528 32h-480C21.49 32 0 53.49 0 80V96h576V80C576 53.49 554.5 32 528 32zM0 432C0 458.5 21.49 480 48 480h480c26.51 0 48-21.49 48-48V128H0V432zM368 192h128C504.8 192 512 199.2 512 208S504.8 224 496 224h-128C359.2 224 352 216.8 352 208S359.2 192 368 192zM368 256h128C504.8 256 512 263.2 512 272S504.8 288 496 288h-128C359.2 288 352 280.8 352 272S359.2 256 368 256zM368 320h128c8.836 0 16 7.164 16 16S504.8 352 496 352h-128c-8.836 0-16-7.164-16-16S359.2 320 368 320zM176 192c35.35 0 64 28.66 64 64s-28.65 64-64 64s-64-28.66-64-64S140.7 192 176 192zM112 352h128c26.51 0 48 21.49 48 48c0 8.836-7.164 16-16 16h-192C71.16 416 64 408.8 64 400C64 373.5 85.49 352 112 352z"></path>
+</svg>

package/icons/index.ts

@@ -5,6 +5,11 @@ import NotFoundSvg from './not-found.svg';
 import EmailFilledSvg from './email-filled.svg';
 import AlertSvg from './alert.svg';
 import LockSvg from './lock.svg';
+import EyeSvg from './eye.svg';
+import EyeCrossedSvg from './eye-crossed.svg';
+import DownloadSvg from './download.svg';
+import IdCardSvg from './id-card.svg';
+import InfoCircleSvg from './info-circle.svg';
 
 export {
   ViewSvg,
@@ -13,5 +18,10 @@ export {
   NotFoundSvg,
   EmailFilledSvg,
   AlertSvg,
-  LockSvg
+  LockSvg,
+  EyeSvg,
+  EyeCrossedSvg,
+  DownloadSvg,
+  IdCardSvg,
+  InfoCircleSvg
 };

package/icons/info-circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 0C3.58125 0 0 3.58125 0 8C0 12.4187 3.58125 16 8 16C12.4187 16 16 12.4187 16 8C16 3.58125 12.4187 0 8 0ZM8 4C8.55219 4 9 4.44781 9 5C9 5.55219 8.55219 6 8 6C7.44781 6 7 5.55312 7 5C7 4.44688 7.44688 4 8 4ZM9.25 12H6.75C6.3375 12 6 11.6656 6 11.25C6 10.8344 6.33594 10.5 6.75 10.5H7.25V8.5H7C6.58594 8.5 6.25 8.16406 6.25 7.75C6.25 7.33594 6.5875 7 7 7H8C8.41406 7 8.75 7.33594 8.75 7.75V10.5H9.25C9.66406 10.5 10 10.8359 10 11.25C10 11.6641 9.66562 12 9.25 12Z" />
+</svg>