@frollo/frollo-web-ui 0.0.11 → 0.0.14

package/cjs/index.js

@@ -1259,7 +1259,7 @@ $$1({ target: 'Object', stat: true }, {
   entries: function entries(O) {
     return $entries(O);
   }
-});var script$3 = vue.defineComponent({
+});var script$4 = vue.defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -1298,22 +1298,22 @@ $$1({ target: 'Object', stat: true }, {
       componentName: componentName
     };
   }
-});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 vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.componentName), {
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
@@ -1321,11 +1321,11 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     "class": vue.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": vue.withCtx(function () {
-      return [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_1$2, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)];
+      return [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_1$3, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$3, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$3, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)];
     }),
     _: 3
   }, 8, ["to", "href", "tabindex", "class"]);
-}script$3.render = render$3;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS$1 = descriptors;
+}script$4.render = render$4;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS$1 = descriptors;
 var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
 var definePropertyModule$1 = objectDefineProperty;
 var anObject$1 = anObject$4;
@@ -1461,7 +1461,7 @@ $({ target: 'Array', proto: true }, {
 });
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('includes');var script$2 = vue.defineComponent({
+addToUnscopables('includes');var script$3 = vue.defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -1539,9 +1539,9 @@ addToUnscopables('includes');var script$2 = vue.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',
@@ -1626,9 +1626,9 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
       tagName: tagName
     };
   }
-});function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+});function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
-    "class": vue.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": vue.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,
@@ -1669,13 +1669,13 @@ addToUnscopables('includes');var script$2 = vue.defineComponent({
   } else {
     style.appendChild(document.createTextNode(css));
   }
-}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);script$2.render = render$2;var script$1 = vue.defineComponent({
+}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$3.render = render$3;var script$2 = vue.defineComponent({
   name: 'FwNavigationMenu',
   emits: ['action'],
   components: {
-    FwButton: script$2
+    FwButton: script$3
   },
   props: {
     /**
@@ -1711,32 +1711,32 @@ styleInject(css_248z$2);script$2.render = render$2;var script$1 = vue.defineComp
       actionClicked: actionClicked
     };
   }
-});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__*/vue.createElementVNode("span", {
+var _hoisted_8$2 = /*#__PURE__*/vue.createElementVNode("span", {
   "class": "sr-only"
 }, "Open main menu", -1);
 
@@ -1753,15 +1753,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 = vue.resolveComponent("FwButton");
 
-  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$1, [vue.createElementVNode("div", _hoisted_2$1, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [vue.createElementVNode("div", _hoisted_5$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$2, [vue.createElementVNode("div", _hoisted_2$2, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.createElementVNode("div", _hoisted_5$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,
       variant: "text",
@@ -1775,7 +1775,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.createVNode(_component_FwButton, {
+  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [vue.createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -1784,13 +1784,13 @@ function render$1(_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$1, [vue.createVNode(_component_FwButton, {
+  }, 8, ["onClick", "aria-label"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_7$2, [vue.createVNode(_component_FwButton, {
     variant: "text",
     size: "sm",
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": vue.withCtx(function () {
-      return [_hoisted_8$1, (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9$1, [vue.createElementVNode("path", {
+      return [_hoisted_8$2, (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9$1, [vue.createElementVNode("path", {
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "stroke-width": "2",
@@ -1804,7 +1804,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     "default": vue.withCtx(function () {
       var _ctx$menuItems2;
 
-      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [vue.createElementVNode("div", _hoisted_12, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [vue.createElementVNode("div", _hoisted_12$1, [(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 px-2",
@@ -1833,9 +1833,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     _: 1
   })]);
-}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);script$1.render = render$1;function getDevtoolsGlobalHook() {
+}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$2.render = render$2;function getDevtoolsGlobalHook() {
     return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
 }
 function getTarget() {
@@ -4961,7 +4961,7 @@ function useSubmitForm(cb) {
         }
         return onSubmit(e);
     };
-}var script = vue.defineComponent({
+}var script$1 = vue.defineComponent({
   name: 'FwInput',
   emits: ['update:modelValue'],
   components: {
@@ -5023,6 +5023,13 @@ function useSubmitForm(cb) {
     readonly: {
       type: Boolean,
       "default": false
+    },
+
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+      type: String
     }
   },
   setup: function setup(props, ctx) {
@@ -5062,27 +5069,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__*/vue.createElementVNode("svg", {
+var _hoisted_9 = /*#__PURE__*/vue.createElementVNode("svg", {
   fill: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
@@ -5093,17 +5102,25 @@ var _hoisted_8 = /*#__PURE__*/vue.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 = vue.resolveComponent("InputField");
 
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.createVNode(_component_InputField, {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [vue.createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.inputValue = $event;
@@ -5116,39 +5133,138 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [vue.createElementVNode("div", _hoisted_2, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
+      return [vue.createElementVNode("div", _hoisted_2$1, [vue.createElementVNode("div", _hoisted_3$1, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2"
-      }, vue.toDisplayString(_ctx.label), 9, _hoisted_3)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_4, [_ctx.$slots.prefixIcon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "prefixIcon")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
+      }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$1)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6$1, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.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), vue.createVNode(vue.Transition, {
-        name: "errorFadeIn"
+      }), null, 16, _hoisted_8$1), vue.createVNode(vue.Transition, {
+        name: "fwFadeIn"
       }, {
         "default": vue.withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, _hoisted_9)) : vue.createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            "class": vue.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)) : vue.createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024)]), vue.createElementVNode("div", _hoisted_10, [vue.createVNode(vue.Transition, {
-        name: "errorFadeIn"
+      }, 1024), _ctx.$slots.suffix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [vue.renderSlot(_ctx.$slots, "suffix")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_12, [vue.createVNode(vue.Transition, {
+        name: "fwFadeIn",
+        mode: "out-in"
       }, {
         "default": vue.withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, vue.toDisplayString(errorMessage || errors[0]), 1)) : vue.createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_13, vue.toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(_ctx.hint), 1)) : vue.createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])])];
     }),
     _: 3
   }, 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}}";
-styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$3,FwButton:script$2,FwNavigationMenu:script$1,FwForm:Form,FwInput:script});var install = function install(app) {
+}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 = vue.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 = vue.resolveComponent("InputField");
+
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.createVNode(_component_InputField, {
+    name: _ctx.name,
+    value: _ctx.name,
+    type: "checkbox",
+    rules: _ctx.rules
+  }, {
+    "default": vue.withCtx(function (_ref) {
+      var field = _ref.field,
+          errors = _ref.errors,
+          errorMessage = _ref.errorMessage,
+          meta = _ref.meta;
+      return [vue.createElementVNode("div", _hoisted_2, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
+        key: 0,
+        "for": _ctx.name,
+        "class": "inline-flex items-center mb-3"
+      }, [vue.createElementVNode("input", vue.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), vue.createElementVNode("span", {
+        "class": "ml-2",
+        innerHTML: _ctx.label
+      }, null, 8, _hoisted_5)], 8, _hoisted_3)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_6, [vue.createVNode(vue.Transition, {
+        name: "fwFadeIn",
+        mode: "out-in"
+      }, {
+        "default": vue.withCtx(function () {
+          return [(errorMessage || errors[0]) && meta.touched ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(_ctx.hint), 1)) : vue.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$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$4,FwButton:script$3,FwNavigationMenu:script$2,FwForm:Form,FwInput:script$1,FwCheckbox:script});var install = function install(app) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         componentName = _ref2[0],
@@ -5156,7 +5272,7 @@ styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Objec
 
     app.component(componentName, component);
   });
-};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$3,FwButton:script$2,FwNavigationMenu:script$1,FwForm:Form,FwInput:script});Object.entries(components).forEach(function (_ref) {
+};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$4,FwButton:script$3,FwNavigationMenu:script$2,FwForm:Form,FwInput:script$1,FwCheckbox:script});Object.entries(components).forEach(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       componentName = _ref2[0],
       component = _ref2[1];