@frollo/frollo-web-ui 9.0.1 → 9.0.2

package/esm/fw-image-A2lXYs0u.js

@@ -0,0 +1,325 @@
+import { defineComponent, ref, computed, useCssVars, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, withKeys, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createVNode, vShow } from 'vue';
+import { f as _createForOfIteratorHelper } from './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import { s as script } from './fw-loading-bar-3x4tkF1B.js';
+import { u as render$1 } from './index-DHyRsKsZ.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var stateMap = new WeakMap();
+function getState(el) {
+  var s = stateMap.get(el);
+  if (!s) {
+    s = {};
+    stateMap.set(el, s);
+  }
+  return s;
+}
+function findImg(el, s) {
+  if (s.img && el.contains(s.img)) return s.img;
+  var img = el.querySelector('img');
+  s.img = img;
+  return img;
+}
+function loadImage(el, binding) {
+  var _ref, _binding$src, _binding$onStart;
+  var s = getState(el);
+  var img = findImg(el, s);
+  if (!img) return;
+  var url = (_ref = (_binding$src = binding === null || binding === void 0 ? void 0 : binding.src) !== null && _binding$src !== void 0 ? _binding$src : img.dataset.src) !== null && _ref !== void 0 ? _ref : img.dataset.url;
+  if (!url) {
+    var _binding$onError;
+    binding === null || binding === void 0 || (_binding$onError = binding.onError) === null || _binding$onError === void 0 || _binding$onError.call(binding);
+    return;
+  }
+  binding === null || binding === void 0 || (_binding$onStart = binding.onStart) === null || _binding$onStart === void 0 || _binding$onStart.call(binding);
+  // attach listeners BEFORE setting src to avoid missing cached loads
+  var handleLoad = function handleLoad() {
+    var _binding$onLoad;
+    binding === null || binding === void 0 || (_binding$onLoad = binding.onLoad) === null || _binding$onLoad === void 0 || _binding$onLoad.call(binding);
+    cleanup();
+  };
+  var handleError = function handleError() {
+    var _binding$onError2;
+    binding === null || binding === void 0 || (_binding$onError2 = binding.onError) === null || _binding$onError2 === void 0 || _binding$onError2.call(binding);
+    cleanup();
+  };
+  var cleanup = function cleanup() {
+    img.removeEventListener('load', handleLoad);
+    img.removeEventListener('error', handleError);
+  };
+  img.addEventListener('load', handleLoad, {
+    once: true
+  });
+  img.addEventListener('error', handleError, {
+    once: true
+  });
+  img.src = url;
+  s.lastSrc = url;
+}
+function createObserver(el, binding) {
+  var _s$observer, _binding$threshold, _binding$rootMargin;
+  var s = getState(el);
+  // disconnect any previous observer first
+  (_s$observer = s.observer) === null || _s$observer === void 0 || _s$observer.disconnect();
+  var threshold = (_binding$threshold = binding === null || binding === void 0 ? void 0 : binding.threshold) !== null && _binding$threshold !== void 0 ? _binding$threshold : 0;
+  var rootMargin = (_binding$rootMargin = binding === null || binding === void 0 ? void 0 : binding.rootMargin) !== null && _binding$rootMargin !== void 0 ? _binding$rootMargin : '0px';
+  var observer = new IntersectionObserver(function (entries, obs) {
+    var _iterator = _createForOfIteratorHelper(entries),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        if (entry.isIntersecting) {
+          loadImage(entry.target, binding);
+          obs.unobserve(entry.target);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }, {
+    root: null,
+    threshold: threshold,
+    rootMargin: rootMargin
+  });
+  s.observer = observer;
+  observer.observe(el);
+}
+function shouldReload(el, binding) {
+  var _ref2, _binding$src2;
+  var s = getState(el);
+  var img = findImg(el, s);
+  if (!img) return false;
+  var next = (_ref2 = (_binding$src2 = binding === null || binding === void 0 ? void 0 : binding.src) !== null && _binding$src2 !== void 0 ? _binding$src2 : img.dataset.src) !== null && _ref2 !== void 0 ? _ref2 : img.dataset.url;
+  if (!next) return false;
+  // only reload if src actually changed
+  return next !== s.lastSrc;
+}
+var lazyLoadDirective = {
+  mounted: function mounted(el, binding) {
+    if ('IntersectionObserver' in window) {
+      createObserver(el, binding.value);
+    } else {
+      loadImage(el, binding.value);
+    }
+  },
+  updated: function updated(el, binding) {
+    if (!shouldReload(el, binding.value)) return;
+    var s = getState(el);
+    var img = findImg(el, s);
+    if (img) {
+      // reset before re-observing
+      img.removeAttribute('src');
+      s.lastSrc = undefined;
+    }
+    if ('IntersectionObserver' in window) {
+      createObserver(el, binding.value);
+    } else {
+      loadImage(el, binding.value);
+    }
+  },
+  unmounted: function unmounted(el) {
+    var _s$observer2;
+    var s = stateMap.get(el);
+    s === null || s === void 0 || (_s$observer2 = s.observer) === null || _s$observer2 === void 0 || _s$observer2.disconnect();
+    stateMap["delete"](el);
+  }
+};
+
+var __default__ = defineComponent({
+  name: 'FwImage',
+  directives: {
+    lazyload: lazyLoadDirective
+  },
+  components: {
+    FwLoadingBar: script,
+    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
+    },
+    /**
+     * Controls the error UI when an image src is unavailable.
+     */
+    enableErrors: {
+      type: Boolean,
+      "default": true
+    }
+  },
+  emits: ['click', 'mouseover', 'mouseout'],
+  setup: function setup(props) {
+    var fwImageRef = ref(null);
+    var imgRef = ref(null);
+    var status = ref('idle');
+    var isBackground = computed(function () {
+      return props.type === 'background';
+    });
+    var _useColours = useColours(),
+      colorErrorTextFade5 = _useColours.colorErrorTextFade5;
+    var rootClasses = computed(function () {
+      return {
+        'fw-image--background': isBackground.value,
+        'rounded-full': props.rounded,
+        'fw-image--loaded': status.value === 'loaded',
+        'fw-image--error-state': status.value === 'error'
+      };
+    });
+    var onStart = function onStart() {
+      status.value = 'loading';
+    };
+    var onLoad = function onLoad() {
+      status.value = 'loaded';
+      if (isBackground.value && fwImageRef.value && props.src) {
+        fwImageRef.value.style.backgroundImage = "url('".concat(props.src, "')");
+      }
+    };
+    var onError = function onError() {
+      status.value = 'error';
+      if (isBackground.value && fwImageRef.value) {
+        fwImageRef.value.style.backgroundImage = '';
+      }
+    };
+    var handleLoad = function handleLoad() {
+      onLoad();
+    };
+    var handleError = function handleError() {
+      onError();
+    };
+    return {
+      fwImageRef: fwImageRef,
+      imgRef: imgRef,
+      status: status,
+      isBackground: isBackground,
+      rootClasses: rootClasses,
+      colorErrorTextFade5: colorErrorTextFade5,
+      onStart: onStart,
+      onLoad: onLoad,
+      onError: onError,
+      handleLoad: handleLoad,
+      handleError: handleError
+    };
+  }
+});
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "v9f14e934": _ctx.colorErrorTextFade5
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+
+var _hoisted_1 = ["data-src", "alt"];
+var _hoisted_2 = {
+  "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",
+    "class": normalizeClass(["fw-image", _ctx.rootClasses]),
+    onClick: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.$emit('click', $event);
+    }),
+    onKeyup: _cache[3] || (_cache[3] = withKeys(function ($event) {
+      return _ctx.$emit('click', $event);
+    }, ["enter"])),
+    onMouseover: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onMouseout: _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.$emit('mouseout');
+    }),
+    onFocusin: _cache[6] || (_cache[6] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onFocusout: _cache[7] || (_cache[7] = function ($event) {
+      return _ctx.$emit('mouseout');
+    })
+  }, [createElementVNode("img", {
+    ref: "imgRef",
+    "data-src": _ctx.src,
+    alt: _ctx.alt,
+    loading: "lazy",
+    decoding: "async",
+    fetchpriority: "auto",
+    "class": normalizeClass([_ctx.rounded ? 'rounded-full' : '', _ctx.imageClass, 'fw-image__img']),
+    onLoad: _cache[0] || (_cache[0] = function () {
+      return _ctx.onLoad && _ctx.onLoad.apply(_ctx, arguments);
+    }),
+    onError: _cache[1] || (_cache[1] = function () {
+      return _ctx.onError && _ctx.onError.apply(_ctx, arguments);
+    })
+  }, null, 42, _hoisted_1), withDirectives(createVNode(_component_FwLoadingBar, {
+    "class": normalizeClass(["fw-image__loading w-full h-full", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, null, 8, ["class"]), [[vShow, _ctx.status === 'loading']]), _ctx.enableErrors ? withDirectives((openBlock(), createElementBlock("div", {
+    key: 0,
+    "class": normalizeClass(["fw-image__error rounded", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, [createElementVNode("div", _hoisted_2, [createVNode(_component_FileExclamationSvg, {
+    name: "file-exclamation",
+    "class": "w-full h-full scale-[0.25] opacity-40 text-brand-warning-text max-w-[150px]"
+  })])], 2)), [[vShow, _ctx.status === 'error']]) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 34)), [[_directive_lazyload, {
+    src: _ctx.src,
+    type: _ctx.type,
+    threshold: _ctx.threshold,
+    onStart: _ctx.onStart,
+    onLoad: _ctx.onLoad,
+    onError: _ctx.onError
+  }]]);
+}
+
+var css_248z = ".fw-image{position:relative}.fw-image__img{opacity:0;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .32s ease,-webkit-transform .32s ease;transition:opacity .32s ease,-webkit-transform .32s ease;-moz-transition:opacity .32s ease,transform .32s ease,-moz-transform .32s ease;transition:opacity .32s ease,transform .32s ease;transition:opacity .32s ease,transform .32s ease,-webkit-transform .32s ease,-moz-transform .32s ease;visibility:hidden;width:100%}.fw-image__loading{opacity:1;position:absolute!important}.fw-image__error,.fw-image__loading{inset:0;-webkit-transition:opacity .22s ease;-moz-transition:opacity .22s ease;transition:opacity .22s ease}.fw-image__error{background-color:var(--v9f14e934);opacity:0;position:absolute;visibility:hidden}.fw-image__error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loaded .fw-image__img{opacity:1;visibility:visible}.fw-image--loaded .fw-image__loading{opacity:0;pointer-events:none}.fw-image--error-state .fw-image__img{opacity:0;visibility:hidden}.fw-image--error-state .fw-image__loading{opacity:0;pointer-events:none}.fw-image--error-state .fw-image__error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}.fw-image--background.fw-image--loaded .fw-image__img{display:none}@media (prefers-reduced-motion:reduce){.fw-image__error,.fw-image__img,.fw-image__loading{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}}";
+var stylesheet = ".fw-image{position:relative}.fw-image__img{opacity:0;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .32s ease,-webkit-transform .32s ease;transition:opacity .32s ease,-webkit-transform .32s ease;-moz-transition:opacity .32s ease,transform .32s ease,-moz-transform .32s ease;transition:opacity .32s ease,transform .32s ease;transition:opacity .32s ease,transform .32s ease,-webkit-transform .32s ease,-moz-transform .32s ease;visibility:hidden;width:100%}.fw-image__loading{opacity:1;position:absolute!important}.fw-image__error,.fw-image__loading{inset:0;-webkit-transition:opacity .22s ease;-moz-transition:opacity .22s ease;transition:opacity .22s ease}.fw-image__error{background-color:var(--v9f14e934);opacity:0;position:absolute;visibility:hidden}.fw-image__error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loaded .fw-image__img{opacity:1;visibility:visible}.fw-image--loaded .fw-image__loading{opacity:0;pointer-events:none}.fw-image--error-state .fw-image__img{opacity:0;visibility:hidden}.fw-image--error-state .fw-image__loading{opacity:0;pointer-events:none}.fw-image--error-state .fw-image__error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}.fw-image--background.fw-image--loaded .fw-image__img{display:none}@media (prefers-reduced-motion:reduce){.fw-image__error,.fw-image__img,.fw-image__loading{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}}";
+styleInject(css_248z);
+
+__default__.render = render;
+
+export { __default__ as _ };

package/esm/fw-image.js

@@ -1,6 +1,7 @@
-export { _ as FwImage } from './fw-image-D-OHafdw.js';
+export { _ as FwImage } from './fw-image-A2lXYs0u.js';
 import 'vue';
-import './fw-loading-bar-DecYSBC_.js';
-import './get-root-colours-DCjlYelc.js';
+import './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import './fw-loading-bar-3x4tkF1B.js';
+import './get-root-colours-DCCAnRF4.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './index-BsEH8YYr.js';
+import './index-DHyRsKsZ.js';

package/esm/{fw-input-C2-cZ-BY.js → fw-input-BiPWWfK3.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, useCssVars, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createElementVNode, createCommentVNode, normalizeClass, createTextVNode, toDisplayString, renderSlot, mergeProps, Transition } from 'vue';
-import { a as Field } from './vee-validate.esm-3ptvCDR1.js';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { a as Field } from './vee-validate-0dtT5GSQ.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({
@@ -109,8 +109,7 @@ var __default__ = defineComponent({
       "default": false
     }
   },
-  emits: ['update:modelValue', /** Fired on native input */
-  'input', /** Fired on native focus in */
+  emits: ['update:modelValue', /** Fired on native focus in */
   'focus', /** Fired on native input blur */
   'blur'],
   setup: function setup(props, ctx) {
@@ -123,9 +122,6 @@ var __default__ = defineComponent({
         return ctx.emit('update:modelValue', state);
       }
     });
-    var onInput = function onInput(e) {
-      return ctx.emit('input', e);
-    };
     var onFocus = function onFocus(e) {
       return ctx.emit('focus', e);
     };
@@ -138,7 +134,6 @@ var __default__ = defineComponent({
     return {
       inputBaseClass: inputBaseClass,
       inputValue: inputValue,
-      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       primaryFade5: primaryFade5,
@@ -149,8 +144,8 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "ce01af92": _ctx.primaryFade5,
-      "58eb0947": _ctx.colorErrorTextFade5
+      "v33aab865": _ctx.primaryFade5,
+      "v68d8ed4e": _ctx.colorErrorTextFade5
     };
   });
 };
@@ -184,7 +179,7 @@ var _hoisted_8 = {
   key: 0,
   "class": "flex text-body absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
-var _hoisted_9 = ["id", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
+var _hoisted_9 = ["id", "name", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
 var _hoisted_10 = {
   key: 1,
   "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
@@ -205,7 +200,7 @@ 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[3] || (_cache[3] = function ($event) {
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
       return _ctx.inputValue = $event;
     }),
     name: _ctx.name,
@@ -225,6 +220,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": "h-full"
       })])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         id: "fw-input-".concat(_ctx.name),
+        name: "fw-input-".concat(_ctx.name),
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
@@ -236,13 +232,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           'pl-10': !!_ctx.$slots.prefix,
           'pr-20': !!_ctx.$slots.suffix
         }, (errorMessage || errors[0]) && meta.touched ? 'input--error-state border-brand-error-text caret-brand-error-text' : 'caret-primary bg-white border-grey-100 hover:border-brand-text3 focus:border-brand-text3', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded-lg'],
-        onInput: _cache[0] || (_cache[0] = function () {
-          return _ctx.onInput && _ctx.onInput.apply(_ctx, arguments);
-        }),
-        onFocus: _cache[1] || (_cache[1] = function () {
+        onFocus: _cache[0] || (_cache[0] = function () {
           return _ctx.onFocus && _ctx.onFocus.apply(_ctx, arguments);
         }),
-        onBlur: _cache[2] || (_cache[2] = function () {
+        onBlur: _cache[1] || (_cache[1] = function () {
           return _ctx.onBlur && _ctx.onBlur.apply(_ctx, arguments);
         })
       }), null, 16, _hoisted_9), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "suffix", {
@@ -261,8 +254,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["modelValue", "name", "rules"])]);
 }
 
-var css_248z = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;-moz-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}.fw-input input:focus{background-color:var(--ce01af92)}.fw-input input.input--error-state{background-color:var(--58eb0947)}";
-var stylesheet = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;-moz-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}.fw-input input:focus{background-color:var(--ce01af92)}.fw-input input.input--error-state{background-color:var(--58eb0947)}";
+var css_248z = ".fwFadeIn-enter-active,.fwFadeIn-leave-active{-webkit-transition:opacity .12s ease,-webkit-transform .12s ease;transition:opacity .12s ease,-webkit-transform .12s ease;-moz-transition:opacity .12s ease,transform .12s ease,-moz-transform .12s ease;transition:opacity .12s ease,transform .12s ease;transition:opacity .12s ease,transform .12s ease,-webkit-transform .12s ease,-moz-transform .12s ease;will-change:opacity,transform}.fwFadeIn-enter-from,.fwFadeIn-leave-to{opacity:0;-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px)}.fw-input input:focus{background-color:var(--v33aab865)}.fw-input input.input--error-state{background-color:var(--v68d8ed4e)}";
+var stylesheet = ".fwFadeIn-enter-active,.fwFadeIn-leave-active{-webkit-transition:opacity .12s ease,-webkit-transform .12s ease;transition:opacity .12s ease,-webkit-transform .12s ease;-moz-transition:opacity .12s ease,transform .12s ease,-moz-transform .12s ease;transition:opacity .12s ease,transform .12s ease;transition:opacity .12s ease,transform .12s ease,-webkit-transform .12s ease,-moz-transform .12s ease;will-change:opacity,transform}.fwFadeIn-enter-from,.fwFadeIn-leave-to{opacity:0;-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px)}.fw-input input:focus{background-color:var(--v33aab865)}.fw-input input.input--error-state{background-color:var(--v68d8ed4e)}";
 styleInject(css_248z);
 
 __default__.render = render;

package/esm/fw-input.js

@@ -1,5 +1,5 @@
-export { _ as FwInput } from './fw-input-C2-cZ-BY.js';
+export { _ as FwInput } from './fw-input-BiPWWfK3.js';
 import 'vue';
-import './vee-validate.esm-3ptvCDR1.js';
-import './get-root-colours-DCjlYelc.js';
+import './vee-validate-0dtT5GSQ.js';
+import './get-root-colours-DCCAnRF4.js';
 import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-loading-bar-3x4tkF1B.js

@@ -0,0 +1,37 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle } from 'vue';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var script = defineComponent({
+  name: 'FwLoadingBar',
+  setup: function setup() {
+    var _useColours = useColours(),
+      primaryFade10 = _useColours.primaryFade10,
+      primaryFade20 = _useColours.primaryFade20;
+    var barVars = computed(function () {
+      return {
+        '--fw-bar-light': primaryFade10,
+        '--fw-bar-dark': primaryFade20
+      };
+    });
+    return {
+      barVars: barVars
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    "class": "fw-loading-bar rounded",
+    "aria-hidden": "true",
+    style: normalizeStyle(_ctx.barVars)
+  }, null, 4);
+}
+
+var css_248z = ".fw-loading-bar{background:var(--fw-bar-dark);contain:paint;overflow:hidden;position:relative}.fw-loading-bar:before{-webkit-animation:fwShimmer 1.1s ease-in-out infinite;-moz-animation:fwShimmer 1.1s ease-in-out infinite;animation:fwShimmer 1.1s ease-in-out infinite;background-image:-webkit-linear-gradient(350deg,transparent 0,var(--fw-bar-light) 50%,transparent 100%);background-image:-moz-linear-gradient(350deg,transparent 0,var(--fw-bar-light) 50%,transparent 100%);background-image:linear-gradient(100deg,transparent 0,var(--fw-bar-light) 50%,transparent 100%);background-repeat:no-repeat;background-size:60% 100%;content:\"\";inset:0;position:absolute;-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);will-change:transform}@-webkit-keyframes fwShimmer{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-moz-keyframes fwShimmer{to{-moz-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fwShimmer{to{-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@media (prefers-reduced-motion:reduce){.fw-loading-bar:before{-webkit-animation:none;-moz-animation:none;animation:none;opacity:.35}}";
+var stylesheet = ".fw-loading-bar{background:var(--fw-bar-dark);contain:paint;overflow:hidden;position:relative}.fw-loading-bar:before{-webkit-animation:fwShimmer 1.1s ease-in-out infinite;-moz-animation:fwShimmer 1.1s ease-in-out infinite;animation:fwShimmer 1.1s ease-in-out infinite;background-image:-webkit-linear-gradient(350deg,transparent 0,var(--fw-bar-light) 50%,transparent 100%);background-image:-moz-linear-gradient(350deg,transparent 0,var(--fw-bar-light) 50%,transparent 100%);background-image:linear-gradient(100deg,transparent 0,var(--fw-bar-light) 50%,transparent 100%);background-repeat:no-repeat;background-size:60% 100%;content:\"\";inset:0;position:absolute;-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);will-change:transform}@-webkit-keyframes fwShimmer{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-moz-keyframes fwShimmer{to{-moz-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fwShimmer{to{-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@media (prefers-reduced-motion:reduce){.fw-loading-bar:before{-webkit-animation:none;-moz-animation:none;animation:none;opacity:.35}}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };