@frollo/frollo-web-ui 3.0.0 → 3.0.2

package/esm/fw-dropdown.js

@@ -1,16 +1,17 @@
-import './es.array.find-36d8f2f0.js';
+import './es.array.find-dfa1f42f.js';
 import { defineComponent, toRef, ref, computed, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, createVNode, Transition, withCtx, Fragment, renderList } from 'vue';
 import { u as useField } from './vee-validate.esm-a17a23c3.js';
-import { a as render$1 } from './index-4605e00e.js';
-import './es.function.name-b642b74f.js';
+import { a as render$1 } from './index-692e4d19.js';
+import './es.function.name-557cb1f9.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import './function-name-e2f6ea36.js';
-import './classof-a45668b6.js';
-import './is-forced-ddf227e6.js';
-import './object-keys-6a890c6f.js';
-import './array-iteration-98e2cf9a.js';
-import './array-species-create-5fc23c89.js';
-import './add-to-unscopables-3f461c07.js';
+import './is-forced-752b5893.js';
+import './classof-39c30bd5.js';
+import './export-a37ba078.js';
+import './array-iteration-107f927f.js';
+import './array-species-create-a5f5503b.js';
+import './add-to-unscopables-2400f45b.js';
+import './object-create-f6f3a673.js';
+import './object-keys-4f5bf4e7.js';
 import './check-94a5917a.js';
 
 var script = defineComponent({
@@ -25,7 +26,6 @@ var script = defineComponent({
     modelValue: {
       type: String
     },
-
     /**
      * The name of the input field. Must be unique per form.
      */
@@ -33,21 +33,18 @@ var script = defineComponent({
       type: String,
       required: true
     },
-
     /**
      * Label for the input. Also renders to an aria-label attribute
      */
     label: {
       type: String
     },
-
     /**
      * Validation rules. Accepts an object, string schema or validation function.
      */
     rules: {
       type: [Object, String, Function]
     },
-
     /**
      * An array of options for the dropdown menu.
      */
@@ -55,14 +52,12 @@ var script = defineComponent({
       type: Array,
       required: true
     },
-
     /**
      * The hint text shown below the input
      */
     hint: {
       type: String
     },
-
     /**
      * Custom placeholder text
      */
@@ -77,13 +72,11 @@ var script = defineComponent({
     var menuClass = "absolute left-0 mt-1 w-full text-left z-10 origin-top-left rounded-md bg-grey-20 drop-shadow-lg\n      ring-1 ring-black ring-opacity-5 focus:outline-none";
     var menuItemClass = "block px-4 py-3 my-1 cursor-pointer hover:bg-white first:rounded-t-md last:rounded-b-md\n      first:mt-0 last:mb-0";
     var nameRef = toRef(props, 'name');
-
     var _useField = useField(nameRef, props.rules),
-        errors = _useField.errors,
-        errorMessage = _useField.errorMessage,
-        meta = _useField.meta,
-        fieldVal = _useField.value;
-
+      errors = _useField.errors,
+      errorMessage = _useField.errorMessage,
+      meta = _useField.meta,
+      fieldVal = _useField.value;
     var selectedOption = ref();
     var selectValue = computed({
       get: function get() {
@@ -95,29 +88,23 @@ var script = defineComponent({
       }
     });
     var isOpen = ref(false);
-
     var selectOption = function selectOption(option) {
       selectValue.value = option.value;
       selectedOption.value = option;
       isOpen.value = false;
     };
-
     var onEscape = function onEscape(e) {
       if (e.key === 'Esc' || e.key === 'Escape') {
         isOpen.value = false;
       }
     };
-
     var menuItemActiveClass = function menuItemActiveClass(option) {
       var _selectedOption$value;
-
       if (((_selectedOption$value = selectedOption.value) === null || _selectedOption$value === void 0 ? void 0 : _selectedOption$value.value) === option.value) {
         return 'bg-white';
       }
-
       return 'bg-none';
     };
-
     onMounted(function () {
       if (selectValue.value) {
         selectedOption.value = props.options.find(function (option) {
@@ -125,7 +112,6 @@ var script = defineComponent({
         });
         if (selectedOption.value) selectOption(selectedOption.value);
       }
-
       document.addEventListener('keydown', onEscape);
     });
     onBeforeUnmount(function () {
@@ -151,7 +137,6 @@ var script = defineComponent({
 var _withScopeId = function _withScopeId(n) {
   return pushScopeId("data-v-1467a810"), n = n(), popScopeId(), n;
 };
-
 var _hoisted_1 = {
   "class": "fw-dropdown relative"
 };
@@ -181,9 +166,7 @@ var _hoisted_10 = {
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _ctx$selectedOption, _ctx$selectedOption2;
-
   var _component_ChevronDownSvg = resolveComponent("ChevronDownSvg");
-
   return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true), createElementVNode("button", {
     type: "button",
     "class": normalizeClass([_ctx.menuButtonClass, _ctx.isOpen ? 'border-primary' : 'border-grey-40 hover:border-grey-60']),
@@ -230,8 +213,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })])]);
 }
 
-var css_248z = ".slideUpDown-enter-active[data-v-1467a810]{-webkit-animation:slideUpDown-1467a810 .3s;animation:slideUpDown-1467a810 .3s;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-1467a810]{animation:slideUpDown-1467a810 .3s reverse;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}";
-var stylesheet = ".slideUpDown-enter-active[data-v-1467a810]{-webkit-animation:slideUpDown-1467a810 .3s;animation:slideUpDown-1467a810 .3s;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-1467a810]{animation:slideUpDown-1467a810 .3s reverse;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}";
+var css_248z = ".slideUpDown-enter-active[data-v-1467a810]{-webkit-animation:slideUpDown-1467a810 .3s;animation:slideUpDown-1467a810 .3s;-webkit-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-1467a810]{animation:slideUpDown-1467a810 .3s reverse;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}";
+var stylesheet = ".slideUpDown-enter-active[data-v-1467a810]{-webkit-animation:slideUpDown-1467a810 .3s;animation:slideUpDown-1467a810 .3s;-webkit-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-1467a810]{animation:slideUpDown-1467a810 .3s reverse;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-1467a810{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}";
 styleInject(css_248z);
 
 script.render = render;

package/esm/fw-image-03f85465.js

@@ -0,0 +1,289 @@
+import './es.array.includes-91be7771.js';
+import './es.number.constructor-1249bd78.js';
+import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, renderSlot } from 'vue';
+import './es.array.find-dfa1f42f.js';
+import './es.string.iterator-284b31d4.js';
+import './web.timers-0f117224.js';
+import { a as documentCreateElement$1, g as global$1, c as createNonEnumerableProperty$1 } from './is-forced-752b5893.js';
+import { _ as _export } from './export-a37ba078.js';
+import { a as arrayIteration } from './array-iteration-107f927f.js';
+import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
+import { s as script$1 } from './fw-loading-bar-f5ca605c.js';
+import { r as render$1 } from './index-692e4d19.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var es_array_forEach = {};
+
+'use strict';
+var $forEach = arrayIteration.forEach;
+var arrayMethodIsStrict = arrayMethodIsStrict$1;
+
+var STRICT_METHOD = arrayMethodIsStrict('forEach');
+
+// `Array.prototype.forEach` method implementation
+// https://tc39.es/ecma262/#sec-array.prototype.foreach
+var arrayForEach = !STRICT_METHOD ? function forEach(callbackfn /* , thisArg */) {
+  return $forEach(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);
+// eslint-disable-next-line es-x/no-array-prototype-foreach -- safe
+} : [].forEach;
+
+'use strict';
+var $ = _export;
+var forEach$1 = arrayForEach;
+
+// `Array.prototype.forEach` method
+// https://tc39.es/ecma262/#sec-array.prototype.foreach
+// eslint-disable-next-line es-x/no-array-prototype-foreach -- safe
+$({ target: 'Array', proto: true, forced: [].forEach != forEach$1 }, {
+  forEach: forEach$1
+});
+
+var web_domCollections_forEach = {};
+
+// iterable DOM collections
+// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
+var domIterables = {
+  CSSRuleList: 0,
+  CSSStyleDeclaration: 0,
+  CSSValueList: 0,
+  ClientRectList: 0,
+  DOMRectList: 0,
+  DOMStringList: 0,
+  DOMTokenList: 1,
+  DataTransferItemList: 0,
+  FileList: 0,
+  HTMLAllCollection: 0,
+  HTMLCollection: 0,
+  HTMLFormElement: 0,
+  HTMLSelectElement: 0,
+  MediaList: 0,
+  MimeTypeArray: 0,
+  NamedNodeMap: 0,
+  NodeList: 1,
+  PaintRequestList: 0,
+  Plugin: 0,
+  PluginArray: 0,
+  SVGLengthList: 0,
+  SVGNumberList: 0,
+  SVGPathSegList: 0,
+  SVGPointList: 0,
+  SVGStringList: 0,
+  SVGTransformList: 0,
+  SourceBufferList: 0,
+  StyleSheetList: 0,
+  TextTrackCueList: 0,
+  TextTrackList: 0,
+  TouchList: 0
+};
+
+// in old WebKit versions, `element.classList` is not an instance of global `DOMTokenList`
+var documentCreateElement = documentCreateElement$1;
+
+var classList = documentCreateElement('span').classList;
+var DOMTokenListPrototype$1 = classList && classList.constructor && classList.constructor.prototype;
+
+var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
+
+var global = global$1;
+var DOMIterables = domIterables;
+var DOMTokenListPrototype = domTokenListPrototype;
+var forEach = arrayForEach;
+var createNonEnumerableProperty = createNonEnumerableProperty$1;
+
+var handlePrototype = function (CollectionPrototype) {
+  // some Chrome versions have non-configurable methods on DOMTokenList
+  if (CollectionPrototype && CollectionPrototype.forEach !== forEach) try {
+    createNonEnumerableProperty(CollectionPrototype, 'forEach', forEach);
+  } catch (error) {
+    CollectionPrototype.forEach = forEach;
+  }
+};
+
+for (var COLLECTION_NAME in DOMIterables) {
+  if (DOMIterables[COLLECTION_NAME]) {
+    handlePrototype(global[COLLECTION_NAME] && global[COLLECTION_NAME].prototype);
+  }
+}
+
+handlePrototype(DOMTokenListPrototype);
+
+var lazyLoadDirective = {
+  mounted: function mounted(el) {
+    var loadImage = function loadImage() {
+      var imageElement = Array.from(el.children).find(function (element) {
+        return element.nodeName === 'IMG';
+      });
+      if (imageElement) {
+        var type = el.getAttribute('type');
+        var url = imageElement.dataset.url;
+        imageElement.addEventListener('load', function () {
+          setTimeout(function () {
+            return el.classList.add('fw-image--loaded');
+          }, 100);
+          setTimeout(function () {
+            var _el$querySelector;
+            return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
+          }, 600);
+        });
+        if (url) {
+          imageElement.src = url;
+        }
+        if (type === 'background') {
+          el.style.backgroundImage = "url('".concat(url, "')");
+          imageElement.remove();
+        }
+        imageElement.addEventListener('error', function () {
+          setTimeout(function () {
+            return el.classList.add('fw-image--loaded-error');
+          }, 100);
+          setTimeout(function () {
+            var _el$querySelector2;
+            return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
+          }, 600);
+        });
+      }
+    };
+    var handleIntersect = function handleIntersect(entries, observer) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          loadImage();
+          observer.unobserve(el);
+        }
+      });
+    };
+    var createObserver = function createObserver() {
+      var options = {
+        root: null,
+        threshold: Number(el.getAttribute('threshold')) || 0
+      };
+      var observer = new IntersectionObserver(handleIntersect, options);
+      observer.observe(el);
+    };
+    if (window.IntersectionObserver) {
+      createObserver();
+    } else {
+      loadImage();
+    }
+  }
+};
+
+var script = defineComponent({
+  name: 'FwImage',
+  directives: {
+    lazyload: lazyLoadDirective
+  },
+  components: {
+    FwLoadingBar: script$1,
+    FileExclamationSvg: render$1
+  },
+  props: {
+    /**
+     * The src attribute of the image
+     */
+    src: String,
+    /**
+     * The alt attribute of the image
+     */
+    alt: String,
+    /**
+     * The type of component. Accepts 'background' and defaults to the native html5 element.
+     */
+    type: {
+      type: String,
+      "default": 'native',
+      validator: function validator(value) {
+        return ['native', 'background'].includes(value);
+      }
+    },
+    /**
+     * Whether the loading bar and error state are rounded.
+     */
+    rounded: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * The class for the native image element
+     */
+    imageClass: {
+      type: String
+    },
+    /**
+     * Controls the threshold before the component triggers the src url.
+     */
+    threshold: {
+      type: Number,
+      "default": 0
+    }
+  },
+  setup: function setup(props) {
+    var isBackground = computed(function () {
+      return props.type === 'background';
+    });
+    var fwImageRef = ref(null);
+    return {
+      fwImageRef: fwImageRef,
+      isBackground: isBackground
+    };
+  }
+});
+
+var _hoisted_1 = ["type", "threshold"];
+var _hoisted_2 = ["data-url", "alt"];
+var _hoisted_3 = {
+  "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
+  var _component_FileExclamationSvg = resolveComponent("FileExclamationSvg");
+  var _directive_lazyload = resolveDirective("lazyload");
+  return withDirectives((openBlock(), createElementBlock("div", {
+    ref: "fwImageRef",
+    type: _ctx.type,
+    threshold: _ctx.threshold,
+    "class": normalizeClass(["fw-image", {
+      'fw-image--background': _ctx.isBackground,
+      'rounded-full': _ctx.rounded
+    }]),
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('click', $event);
+    }),
+    onKeyup: _cache[1] || (_cache[1] = withKeys(function ($event) {
+      return _ctx.$emit('click', $event);
+    }, ["enter"])),
+    onMouseover: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onMouseout: _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.$emit('mouseout');
+    }),
+    onFocusin: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onFocusout: _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.$emit('mouseout');
+    })
+  }, [createElementVNode("img", {
+    "data-url": _ctx.src,
+    alt: _ctx.alt,
+    "class": normalizeClass(_ctx.imageClass)
+  }, null, 10, _hoisted_2), createVNode(_component_FwLoadingBar, {
+    "class": normalizeClass(["fw-image--loading w-full h-full", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, null, 8, ["class"]), createElementVNode("div", {
+    "class": normalizeClass(["fw-image--error bg-grey-20", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, [createElementVNode("div", _hoisted_3, [createVNode(_component_FileExclamationSvg, {
+    "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
+  })])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
+}
+
+var css_248z = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+var stylesheet = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };

package/esm/fw-image.js

@@ -1,20 +1,23 @@
-export { s as FwImage } from './fw-image-ec7b02c5.js';
-import './es.array.includes-df8e6e35.js';
-import './function-name-e2f6ea36.js';
-import './object-keys-6a890c6f.js';
-import './is-forced-ddf227e6.js';
-import './add-to-unscopables-3f461c07.js';
-import './es.number.constructor-f279ce82.js';
-import './to-string-685748aa.js';
-import './classof-a45668b6.js';
+export { s as FwImage } from './fw-image-03f85465.js';
+import './es.array.includes-91be7771.js';
+import './is-forced-752b5893.js';
+import './export-a37ba078.js';
+import './add-to-unscopables-2400f45b.js';
+import './object-create-f6f3a673.js';
+import './object-keys-4f5bf4e7.js';
+import './es.number.constructor-1249bd78.js';
+import './to-string-12728fd2.js';
+import './classof-39c30bd5.js';
 import 'vue';
-import './es.array.find-36d8f2f0.js';
-import './array-iteration-98e2cf9a.js';
-import './array-species-create-5fc23c89.js';
-import './create-property-558a3c24.js';
-import './web.timers-4a6aaab8.js';
-import './array-method-is-strict-544b103f.js';
-import './fw-loading-bar-da7d53fb.js';
+import './es.array.find-dfa1f42f.js';
+import './array-iteration-107f927f.js';
+import './array-species-create-a5f5503b.js';
+import './es.string.iterator-284b31d4.js';
+import './create-property-534611fd.js';
+import './web.timers-0f117224.js';
+import './function-apply-ce251590.js';
+import './array-method-is-strict-055b1830.js';
+import './fw-loading-bar-f5ca605c.js';
 import './style-inject.es-1f59c1d0.js';
-import './index-4605e00e.js';
+import './index-692e4d19.js';
 import './check-94a5917a.js';

package/esm/fw-input.js

@@ -1,12 +1,20 @@
-import './es.array.includes-df8e6e35.js';
+import './es.array.includes-91be7771.js';
 import { defineComponent, ref, computed, createElementVNode, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition, normalizeClass } from 'vue';
 import { a as Field } from './vee-validate.esm-a17a23c3.js';
-import './es.function.name-b642b74f.js';
+import { u as uniqueId } from './uniqueId-fe08534a.js';
+import './es.function.name-557cb1f9.js';
+import './es.array.concat-987938be.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import './function-name-e2f6ea36.js';
-import './object-keys-6a890c6f.js';
-import './is-forced-ddf227e6.js';
-import './add-to-unscopables-3f461c07.js';
+import './is-forced-752b5893.js';
+import './export-a37ba078.js';
+import './add-to-unscopables-2400f45b.js';
+import './object-create-f6f3a673.js';
+import './object-keys-4f5bf4e7.js';
+import './array-species-create-a5f5503b.js';
+import './classof-39c30bd5.js';
+import './does-not-exceed-safe-integer-31d08811.js';
+import './create-property-534611fd.js';
+import './array-method-has-species-support-3d413468.js';
 
 var script = defineComponent({
   name: 'FwInput',
@@ -22,7 +30,6 @@ var script = defineComponent({
       type: String,
       "default": ''
     },
-
     /**
      * The name of the input field. Must be unique per form.
      */
@@ -30,7 +37,6 @@ var script = defineComponent({
       type: String,
       required: true
     },
-
     /**
      * The input type. Accepts `text` | `password`
      */
@@ -41,14 +47,12 @@ var script = defineComponent({
         return ['text', 'password', 'email', 'tel', 'time', 'url', 'week', 'month'].includes(value);
       }
     },
-
     /**
      * Label for the input. Also renders to an aria-label attribute
      */
     label: {
       type: String
     },
-
     /**
      * The placeholder text of the input
      */
@@ -56,14 +60,12 @@ var script = defineComponent({
       type: String,
       "default": ''
     },
-
     /**
      * Validation rules. Accepts an object, string schema or validation function.
      */
     rules: {
       type: [Object, String, Function]
     },
-
     /**
      * Converts the input into a readonly disabled field
      */
@@ -71,21 +73,18 @@ var script = defineComponent({
       type: Boolean,
       "default": false
     },
-
     /**
      * The hint text shown below the input
      */
     hint: {
       type: String
     },
-
     /**
      * The autocomplete input attribute
      */
     autocomplete: {
       type: String
     },
-
     /**
      * The logical tab order of the input.
      * Defaults to 1
@@ -96,6 +95,7 @@ var script = defineComponent({
     }
   },
   setup: function setup(props, ctx) {
+    var uuid = uniqueId();
     var inputBaseClass = ref("border-2 border-grey-40 rounded focus:outline-none focus:ring-2 focus:ring-primary block w-full p-2.5");
     var inputValue = computed({
       get: function get() {
@@ -106,6 +106,7 @@ var script = defineComponent({
       }
     });
     return {
+      uuid: uuid,
       inputBaseClass: inputBaseClass,
       inputValue: inputValue
     };
@@ -132,8 +133,7 @@ var _hoisted_7 = {
   key: 0,
   "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", "tabindex", "disabled", "autocomplete"];
-
+var _hoisted_8 = ["id", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete"];
 var _hoisted_9 = /*#__PURE__*/createElementVNode("svg", {
   fill: "currentColor",
   "aria-hidden": "true",
@@ -144,7 +144,6 @@ var _hoisted_9 = /*#__PURE__*/createElementVNode("svg", {
 }, [/*#__PURE__*/createElementVNode("path", {
   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_10 = [_hoisted_9];
 var _hoisted_11 = {
   key: 1,
@@ -162,7 +161,6 @@ var _hoisted_14 = {
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
-
   return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
@@ -173,14 +171,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     "default": withCtx(function (_ref) {
       var field = _ref.field,
-          errors = _ref.errors,
-          errorMessage = _ref.errorMessage,
-          meta = _ref.meta;
+        errors = _ref.errors,
+        errorMessage = _ref.errorMessage,
+        meta = _ref.meta;
       return [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [_ctx.label ? (openBlock(), createElementBlock("label", {
         key: 0,
-        "for": _ctx.name,
+        "for": "fw-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
         "class": "block mb-2 font-medium"
       }, 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, {
+        id: "fw-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
@@ -215,8 +214,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["modelValue", "name", "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}}";
-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}}";
+var css_248z = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-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;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-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;