@frollo/frollo-web-ui 0.0.11 → 0.0.12

package/cjs/index.js

@@ -1539,7 +1539,7 @@ 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'
       },
@@ -1753,7 +1753,7 @@ 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) {
@@ -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",
@@ -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) {
@@ -5068,21 +5075,23 @@ if (DESCRIPTORS && !FUNCTION_NAME_EXISTS) {
 var _hoisted_2 = {
   "class": "flex flex-col"
 };
-var _hoisted_3 = ["for"];
-var _hoisted_4 = {
-  "class": "relative"
+var _hoisted_3 = {
+  "class": "flex flex-row justify-between"
 };
+var _hoisted_4 = ["for"];
 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"
+  key: 1
+};
+var _hoisted_6 = {
+  "class": "relative"
 };
-var _hoisted_6 = ["placeholder", "type", "readonly", "disabled"];
 var _hoisted_7 = {
   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 = ["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,12 +5102,20 @@ 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"
+};
+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(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = vue.resolveComponent("InputField");
@@ -5116,38 +5133,43 @@ 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, [vue.createElementVNode("div", _hoisted_3, [_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)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [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), 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}}";
+}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}}";
+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}}";
 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) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),

package/esm/{fw-button-430c8529.js → fw-button-54999a6e.js}

@@ -79,7 +79,7 @@ var script = 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'
       },

package/esm/fw-button.js

@@ -1,3 +1,3 @@
-export { s as FwButton } from './fw-button-430c8529.js';
+export { s as FwButton } from './fw-button-54999a6e.js';
 import './style-inject.es-da8f7768.js';
 import 'vue';

package/esm/fw-input.js

@@ -1,5 +1,5 @@
 import { o as descriptors, v as functionName, f as functionUncurryThis, x as objectDefineProperty, u as styleInject } from './style-inject.es-da8f7768.js';
-import { defineComponent, computed, createElementVNode, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition } from 'vue';
+import { defineComponent, computed, createElementVNode, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition, normalizeClass } from 'vue';
 import { a as Field } from './vee-validate.esm-028c6424.js';
 
 var script = defineComponent({
@@ -64,6 +64,13 @@ var script = defineComponent({
     readonly: {
       type: Boolean,
       "default": false
+    },
+
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+      type: String
     }
   },
   setup: function setup(props, ctx) {
@@ -115,21 +122,23 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   "class": "flex flex-col"
 };
-var _hoisted_3 = ["for"];
-var _hoisted_4 = {
-  "class": "relative"
+var _hoisted_3 = {
+  "class": "flex flex-row justify-between"
 };
+var _hoisted_4 = ["for"];
 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"
+  key: 1
+};
+var _hoisted_6 = {
+  "class": "relative"
 };
-var _hoisted_6 = ["placeholder", "type", "readonly", "disabled"];
 var _hoisted_7 = {
   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 = ["placeholder", "type", "readonly", "disabled"];
 
-var _hoisted_8 = /*#__PURE__*/createElementVNode("svg", {
+var _hoisted_9 = /*#__PURE__*/createElementVNode("svg", {
   fill: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
@@ -140,12 +149,20 @@ 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"
+};
+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(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
@@ -163,30 +180,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, [createElementVNode("div", _hoisted_3, [_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)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7, [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), 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)])])];
@@ -195,8 +217,8 @@ 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 = ".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 = ".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);
 
 script.render = render;

package/esm/fw-navigation-menu.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
-import { s as script$1 } from './fw-button-430c8529.js';
+import { s as script$1 } from './fw-button-54999a6e.js';
 import { u as styleInject } from './style-inject.es-da8f7768.js';
 
 var script = defineComponent({

package/esm/index.js

@@ -7,8 +7,8 @@ export { FwNavigationMenu } from './fw-navigation-menu.js';
 import './fw-form.js';
 import { FwInput as script$3 } from './fw-input.js';
 export { FwInput } from './fw-input.js';
-import { s as script$1 } from './fw-button-430c8529.js';
-export { s as FwButton } from './fw-button-430c8529.js';
+import { s as script$1 } from './fw-button-54999a6e.js';
+export { s as FwButton } from './fw-button-54999a6e.js';
 import { F as Form } from './vee-validate.esm-028c6424.js';
 export { F as FwForm } from './vee-validate.esm-028c6424.js';
 import 'vue';

package/frollo-web-ui.esm.js

@@ -1759,7 +1759,7 @@ 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'
       },
@@ -1985,7 +1985,7 @@ 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) {
@@ -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",
@@ -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) {
@@ -5322,21 +5329,23 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   "class": "flex flex-col"
 };
-var _hoisted_3 = ["for"];
-var _hoisted_4 = {
-  "class": "relative"
+var _hoisted_3 = {
+  "class": "flex flex-row justify-between"
 };
+var _hoisted_4 = ["for"];
 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"
+  key: 1
+};
+var _hoisted_6 = {
+  "class": "relative"
 };
-var _hoisted_6 = ["placeholder", "type", "readonly", "disabled"];
 var _hoisted_7 = {
   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 = ["placeholder", "type", "readonly", "disabled"];
 
-var _hoisted_8 = /*#__PURE__*/createElementVNode("svg", {
+var _hoisted_9 = /*#__PURE__*/createElementVNode("svg", {
   fill: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
@@ -5347,12 +5356,20 @@ 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"
+};
+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(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
@@ -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, [createElementVNode("div", _hoisted_3, [_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)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7, [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), 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,8 +5424,8 @@ 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 = ".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 = ".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);
 
 script.render = render;

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/index.ts

@@ -5,6 +5,8 @@ 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';
 
 export {
   ViewSvg,
@@ -13,5 +15,7 @@ export {
   NotFoundSvg,
   EmailFilledSvg,
   AlertSvg,
-  LockSvg
+  LockSvg,
+  EyeSvg,
+  EyeCrossedSvg
 };

package/index.d.ts

@@ -220,6 +220,7 @@ interface FwInputProps {
     placeholder?: string;
     rules?: string | object | Function;
     readonly?: boolean;
+    hint?: string;
 }
 declare const _default: vue.DefineComponent<{
     /**
@@ -270,6 +271,12 @@ declare const _default: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
 }, {
     inputValue: vue.WritableComputedRef<string>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
@@ -321,6 +328,12 @@ declare const _default: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",

package/types/components/fw-input/fw-input.vue.d.ts

@@ -8,6 +8,7 @@ export interface FwInputProps {
     placeholder?: string;
     rules?: string | object | Function;
     readonly?: boolean;
+    hint?: string;
 }
 declare const _default: import("vue").DefineComponent<{
     /**
@@ -58,6 +59,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
 }, {
     inputValue: import("vue").WritableComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -109,6 +116,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {

package/types/icons/index.d.ts

@@ -5,4 +5,6 @@ import NotFoundSvg from './not-found.svg';
 import EmailFilledSvg from './email-filled.svg';
 import AlertSvg from './alert.svg';
 import LockSvg from './lock.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg };
+import EyeSvg from './eye.svg';
+import EyeCrossedSvg from './eye-crossed.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg };