@frollo/frollo-web-ui 4.0.1 → 5.0.1

package/esm/{fw-image-c829ed20.js → fw-image-4787a8bd.js}

@@ -1,15 +1,15 @@
 import './es.array.includes-91be7771.js';
 import './es.number.constructor-d6ff8874.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-590198a8.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 './es.array.find-dfa1f42f.js';
+import './es.string.iterator-590198a8.js';
+import './web.timers-0f117224.js';
 import { s as script$1 } from './fw-loading-bar-f5ca605c.js';
-import { r as render$1 } from './index-dbe0534d.js';
+import { r as render$1 } from './index-e4a2f8b0.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var es_array_forEach = {};
@@ -107,62 +107,67 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype);
 
+var handleIntersect = function handleIntersect(entries, observer) {
+  entries.forEach(function (entry) {
+    if (entry.isIntersecting) {
+      loadImage(entry.target);
+      observer.unobserve(entry.target);
+    }
+  });
+};
+var createObserver = function createObserver(el) {
+  var options = {
+    root: null,
+    threshold: Number(el.getAttribute('threshold')) || 0
+  };
+  var observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(el);
+};
+var loadImage = function loadImage(el) {
+  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;
+    var setImgError = function setImgError() {
+      setTimeout(function () {
+        return el.classList.add('fw-image--loaded-error');
+      }, 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;
+    } else {
+      setImgError();
+    }
+    imageElement.addEventListener('load', function () {
+      setTimeout(function () {
+        return el.classList.add('fw-image--loaded');
+      }, 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);
+    });
+    imageElement.addEventListener('error', function () {
+      setImgError();
+    });
+    if (type === 'background') {
+      el.style.backgroundImage = "url('".concat(url, "')");
+      imageElement.remove();
+    }
+  }
+};
 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();
+      createObserver(el);
     } else {
-      loadImage();
+      loadImage(el);
     }
   }
 };
@@ -266,17 +271,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("img", {
     "data-url": _ctx.src,
     alt: _ctx.alt,
-    "class": normalizeClass(_ctx.imageClass)
+    loading: "lazy",
+    "class": normalizeClass([_ctx.rounded ? 'rounded-full' : '', _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", {
+    "class": normalizeClass(["fw-image--error rounded 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]"
+    "class": "w-full h-full scale-[0.25] opacity-40 text-alert max-w-[150px]"
   })])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
 }
 

package/esm/fw-image.js

@@ -1,4 +1,4 @@
-export { s as FwImage } from './fw-image-c829ed20.js';
+export { s as FwImage } from './fw-image-4787a8bd.js';
 import './es.array.includes-91be7771.js';
 import './is-forced-752b5893.js';
 import './export-a37ba078.js';
@@ -8,15 +8,15 @@ import './object-keys-4f5bf4e7.js';
 import './es.number.constructor-d6ff8874.js';
 import './classof-39c30bd5.js';
 import 'vue';
-import './es.array.find-dfa1f42f.js';
 import './array-iteration-107f927f.js';
 import './array-species-create-a5f5503b.js';
+import './array-method-is-strict-055b1830.js';
+import './es.array.find-dfa1f42f.js';
 import './es.string.iterator-590198a8.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-dbe0534d.js';
+import './index-e4a2f8b0.js';
 import './check-94a5917a.js';

package/esm/fw-input.js

@@ -1,5 +1,7 @@
 import './es.array.includes-91be7771.js';
-import { defineComponent, ref, computed, createElementVNode, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, createBlock, Transition, normalizeClass } from 'vue';
+import './es.number.constructor-d6ff8874.js';
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, createBlock, Transition, normalizeClass } from 'vue';
+import { a as render$1 } from './index-e4a2f8b0.js';
 import { a as Field } from './vee-validate.esm-a17a23c3.js';
 import { u as uniqueId } from './uniqueId-fe08534a.js';
 import './es.function.name-557cb1f9.js';
@@ -10,8 +12,9 @@ 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 './check-94a5917a.js';
+import './array-species-create-a5f5503b.js';
 import './does-not-exceed-safe-integer-31d08811.js';
 import './create-property-534611fd.js';
 import './array-method-has-species-support-3d413468.js';
@@ -20,7 +23,8 @@ var script = defineComponent({
   name: 'FwInput',
   emits: ['update:modelValue'],
   components: {
-    InputField: Field
+    InputField: Field,
+    ErrorFilledSvg: render$1
   },
   props: {
     /**
@@ -57,8 +61,7 @@ var script = defineComponent({
      * The placeholder text of the input
      */
     placeholder: {
-      type: String,
-      "default": ''
+      type: String
     },
     /**
      * Validation rules. Accepts an object, string schema or validation function.
@@ -87,11 +90,11 @@ var script = defineComponent({
     },
     /**
      * The logical tab order of the input.
-     * Defaults to 1
+     * Defaults to 0
      */
     tabindex: {
       type: String,
-      "default": '1'
+      "default": '0'
     },
     /**
      * Whether the input is rounded.
@@ -108,6 +111,12 @@ var script = defineComponent({
     enableErrors: {
       type: Boolean,
       "default": true
+    },
+    /**
+     * The inputs `maxlength` attribute.
+     */
+    maxLength: {
+      type: Number
     }
   },
   setup: function setup(props, ctx) {
@@ -149,34 +158,24 @@ 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 = ["id", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete"];
-var _hoisted_9 = /*#__PURE__*/createElementVNode("svg", {
-  fill: "currentColor",
-  "aria-hidden": "true",
-  focusable: "false",
-  role: "img",
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 512 512"
-}, [/*#__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 = {
+var _hoisted_8 = ["id", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
+var _hoisted_9 = {
   key: 2,
   "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
 };
-var _hoisted_12 = {
+var _hoisted_10 = {
   key: 0,
   "class": "italic text-right text-sm font-medium mt-2 min-h-[21px]"
 };
-var _hoisted_13 = {
+var _hoisted_11 = {
   key: 0,
   "class": "text-error"
 };
-var _hoisted_14 = {
+var _hoisted_12 = {
   key: 1
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ErrorFilledSvg = resolveComponent("ErrorFilledSvg");
   var _component_InputField = resolveComponent("InputField");
   return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
@@ -184,7 +183,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return _ctx.inputValue = $event;
     }),
     name: _ctx.name,
-    rules: _ctx.rules
+    rules: _ctx.rules,
+    "validate-on-input": true
   }, {
     "default": withCtx(function (_ref) {
       var field = _ref.field,
@@ -203,6 +203,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         tabindex: _ctx.tabindex,
         disabled: _ctx.readonly,
         autocomplete: _ctx.autocomplete,
+        maxlength: _ctx.maxLength,
         "class": [{
           'pl-10': !!_ctx.$slots.prefix,
           'pr-20': !!_ctx.$slots.suffix
@@ -215,15 +216,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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)];
+          }, [createVNode(_component_ErrorFilledSvg, {
+            "aria-hidden": "true",
+            focusable: "false",
+            role: "img"
+          })], 2)) : createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024)) : createCommentVNode("", true), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(Transition, {
+      }, 1024)) : createCommentVNode("", true), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
         "default": withCtx(function () {
-          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)];
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])) : createCommentVNode("", true)])];

package/esm/{fw-loading-spinner-7462e0b2.js → fw-loading-spinner-c394fafc.js}

@@ -1,4 +1,4 @@
-import { h as render$1 } from './index-dbe0534d.js';
+import { i as render$1 } from './index-e4a2f8b0.js';
 import { defineComponent, resolveComponent, openBlock, createBlock } from 'vue';
 
 var script = defineComponent({

package/esm/fw-modal.js

@@ -1,6 +1,6 @@
 import './es.array.includes-91be7771.js';
 import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createElementVNode, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from 'vue';
-import { s as script$1 } from './fw-button-7902ae9e.js';
+import { s as script$1 } from './fw-button-8d131219.js';
 import { u as uniqueId } from './uniqueId-fe08534a.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './is-forced-752b5893.js';
@@ -8,8 +8,8 @@ import './export-a37ba078.js';
 import './add-to-unscopables-2400f45b.js';
 import './object-create-f6f3a673.js';
 import './object-keys-4f5bf4e7.js';
-import './fw-loading-spinner-7462e0b2.js';
-import './index-dbe0534d.js';
+import './fw-loading-spinner-c394fafc.js';
+import './index-e4a2f8b0.js';
 import './check-94a5917a.js';
 
 var script = defineComponent({

package/esm/fw-navigation-menu.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
-import { s as script$1 } from './fw-button-7902ae9e.js';
+import { s as script$1 } from './fw-button-8d131219.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './es.array.includes-91be7771.js';
 import './is-forced-752b5893.js';
@@ -7,8 +7,8 @@ import './export-a37ba078.js';
 import './add-to-unscopables-2400f45b.js';
 import './object-create-f6f3a673.js';
 import './object-keys-4f5bf4e7.js';
-import './fw-loading-spinner-7462e0b2.js';
-import './index-dbe0534d.js';
+import './fw-loading-spinner-c394fafc.js';
+import './index-e4a2f8b0.js';
 import './check-94a5917a.js';
 
 var script = defineComponent({

package/esm/fw-sidebar-menu.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, Transition, renderSlot, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from 'vue';
-import { s as script$1 } from './fw-button-7902ae9e.js';
-import { g as render$1 } from './index-dbe0534d.js';
+import { s as script$1 } from './fw-button-8d131219.js';
+import { h as render$1 } from './index-e4a2f8b0.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './es.array.includes-91be7771.js';
 import './is-forced-752b5893.js';
@@ -8,7 +8,7 @@ import './export-a37ba078.js';
 import './add-to-unscopables-2400f45b.js';
 import './object-create-f6f3a673.js';
 import './object-keys-4f5bf4e7.js';
-import './fw-loading-spinner-7462e0b2.js';
+import './fw-loading-spinner-c394fafc.js';
 import './check-94a5917a.js';
 
 var script = defineComponent({

package/esm/fw-table.js

@@ -4,8 +4,9 @@ import { i as toAbsoluteIndex$1, l as lengthOfArrayLike$2, j as engineUserAgent,
 import { _ as _export } from './export-a37ba078.js';
 import { c as createProperty$1 } from './create-property-534611fd.js';
 import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
-import { b as render$3, c as render$4 } from './index-dbe0534d.js';
+import { d as render$3, e as render$4 } from './index-e4a2f8b0.js';
 import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode } from 'vue';
+import { u as useColours } from './get-root-colours-e2a1cb28.js';
 import { s as script$2 } from './fw-loading-bar-f5ca605c.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './classof-39c30bd5.js';
@@ -244,9 +245,8 @@ var __default__ = defineComponent({
         sortColumn(columns.value[Number(props.autoSortColumn)]);
       }
     });
-    var style = getComputedStyle(document.body);
-    var colorPrimary = style.getPropertyValue('--colorPrimary');
-    var bgHoverColor = "".concat(colorPrimary, "0d"); // Adds 5% transparency
+    var _useColours = useColours(),
+      bgHoverColor = _useColours.primaryFade5;
     var sortColumn = function sortColumn(column) {
       if (!isColumnSortable(column)) return;
       currentSortedColumn.value = column;
@@ -330,7 +330,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "015ddfb2": _ctx.bgHoverColor
+      "14adfc52": _ctx.bgHoverColor
     };
   });
 };
@@ -341,7 +341,7 @@ __default__.setup = __setup__ ? function (props, ctx) {
 } : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-29e0d2d4"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-7670383f"), n = n(), popScopeId(), n;
 };
 var _hoisted_1$2 = ["aria-busy"];
 var _hoisted_2$1 = {
@@ -445,12 +445,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }), 128))])], 10, _hoisted_1$2);
 }
 
-var css_248z = ".fw-table-head--sortable[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}.fw-table-row[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}";
-var stylesheet = ".fw-table-head--sortable[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}.fw-table-row[data-v-29e0d2d4]:hover{background-color:var(--015ddfb2)}";
+var css_248z = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
+var stylesheet = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
 styleInject(css_248z);
 
 __default__.render = render$2;
-__default__.__scopeId = "data-v-29e0d2d4";
+__default__.__scopeId = "data-v-7670383f";
 
 var script$1 = defineComponent({
   name: 'FwTableHead'

package/esm/fw-tag.js

@@ -1,60 +1,96 @@
 import './es.array.includes-91be7771.js';
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, withCtx, createVNode, createCommentVNode } from 'vue';
+import './fw-button.js';
+import { c as render$1 } from './index-e4a2f8b0.js';
+import { u as useColours } from './get-root-colours-e2a1cb28.js';
+import { s as script } from './fw-button-8d131219.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.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 './check-94a5917a.js';
+import './fw-loading-spinner-c394fafc.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwTag',
+  components: {
+    FwButton: script,
+    XMarkSvg: render$1
+  },
+  emits: ['dismissed'],
   props: {
     /**
-     * The size of the tag. Accepts: 'xs' & 'sm'
+     * The size of the tag. Accepts: 'xs', 'sm' & 'md'
      */
     size: {
       type: String,
       "default": 'xs',
       validator: function validator(value) {
-        return ['xs', 'sm'].includes(value);
+        return ['xs', 'sm', 'md'].includes(value);
       }
     },
     /**
      * The colour variant of the tag.
-     * Accepts 'primary', 'alert', 'error', 'success'
+     * Accepts 'primary', 'secondary', 'alert', 'error', 'success'
      */
     variant: {
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'alert', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'alert', 'error', 'success'].includes(value);
       }
+    },
+    /**
+     * Whether the tag can be dismissed or closed.
+     * Emits the @dismissed event
+     */
+    dismissable: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props) {
-    var baseClass = ref('inline-block font-semibold text-center whitespace-nowrap rounded-full');
+    var baseClass = ref("\n      inline-flex items-center justify-center font-semibold text-center whitespace-nowrap rounded-full shadow\n    ");
+    var _useColours = useColours(),
+      primaryFade5 = _useColours.primaryFade5;
     var tagClasses = ref({
       primary: {
         text: 'text-button-primary-text',
-        background: 'bg-button-primary-bg'
+        background: 'bg-button-primary-bg',
+        iconType: 'primary'
+      },
+      secondary: {
+        text: 'text-primary',
+        background: 'fw-tag--secondary-bg',
+        iconType: 'tertiary'
       },
       alert: {
         text: 'text-white',
-        background: 'bg-alert'
+        background: 'bg-alert',
+        iconType: 'error'
       },
       success: {
         text: 'text-white',
-        background: 'bg-success'
+        background: 'bg-success',
+        iconType: 'success'
       },
       error: {
         text: 'text-white',
-        background: 'bg-error'
+        background: 'bg-error',
+        iconType: 'error'
       }
     });
     var sizes = ref({
       xs: 'px-2 py-px text-xs',
-      sm: 'px-4 py-1 text-xs'
+      sm: 'px-4 py-1 text-xs',
+      md: 'px-3 py-[4.75px] text-xs'
+    });
+    var iconSizes = ref({
+      xs: 'w-4 h-4',
+      sm: 'w-5 h-5',
+      md: 'w-6 h-6'
     });
     var textColorClass = computed(function () {
       return tagClasses.value[props.variant].text;
@@ -62,28 +98,67 @@ var script = defineComponent({
     var bgColorClass = computed(function () {
       return tagClasses.value[props.variant].background;
     });
+    var iconButtonType = computed(function () {
+      return tagClasses.value[props.variant].iconType;
+    });
     var sizeClass = computed(function () {
       return sizes.value[props.size];
     });
+    var iconSizeClass = computed(function () {
+      return iconSizes.value[props.size];
+    });
     return {
       baseClass: baseClass,
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
-      sizeClass: sizeClass
+      sizeClass: sizeClass,
+      iconSizeClass: iconSizeClass,
+      iconButtonType: iconButtonType,
+      primaryFade5: primaryFade5
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "f1e3ea3e": _ctx.primaryFade5
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_XMarkSvg = resolveComponent("XMarkSvg");
+  var _component_FwButton = resolveComponent("FwButton");
   return openBlock(), createElementBlock("span", {
     "class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass]])
-  }, [renderSlot(_ctx.$slots, "default")], 2);
+  }, [renderSlot(_ctx.$slots, "default"), _ctx.dismissable ? (openBlock(), createBlock(_component_FwButton, {
+    key: 0,
+    variant: _ctx.iconButtonType,
+    tabindex: "",
+    title: "Dismiss filter",
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('dismissed');
+    }),
+    "class": normalizeClass([_ctx.iconSizeClass, "ml-1 !p-0 flex items-center justify-center border-none rounded-full"])
+  }, {
+    "default": withCtx(function () {
+      return [createVNode(_component_XMarkSvg, {
+        "class": "w-full h-full font-semibold m-0"
+      })];
+    }),
+    _: 1
+  }, 8, ["variant", "class"])) : createCommentVNode("", true)], 2);
 }
 
-var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
-var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
+var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
 styleInject(css_248z);
 
-script.render = render;
+__default__.render = render;
 
-export { script as FwTag };
+export { __default__ as FwTag };

package/esm/fw-toast.js

@@ -6,7 +6,7 @@ import './es.array.concat-987938be.js';
 import './web.timers-0f117224.js';
 import { defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, TransitionGroup, createCommentVNode, Transition, withCtx, normalizeClass, createElementVNode, resolveDynamicComponent, toDisplayString, renderSlot } from 'vue';
 import { u as uniqueId } from './uniqueId-fe08534a.js';
-import { d as render$1, e as render$2, f as render$3 } from './index-dbe0534d.js';
+import { f as render$1, g as render$2, a as render$3 } from './index-e4a2f8b0.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './add-to-unscopables-2400f45b.js';
 import './object-create-f6f3a673.js';