@frollo/frollo-web-ui 9.0.8 → 9.0.10

package/esm/{fw-input-Bo2gQcvM.js → fw-input-DTYzNw81.js}

@@ -1,12 +1,14 @@
-import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition } from 'vue';
+import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, createBlock, mergeProps, Transition } from 'vue';
 import { a as Field } from './vee-validate-0dtT5GSQ.js';
 import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import { FwTag as __default__$1 } from './fw-tag.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({
   name: 'FwInput',
   components: {
-    InputField: Field
+    InputField: Field,
+    FwTag: __default__$1
   },
   props: {
     /**
@@ -136,11 +138,24 @@ var __default__ = defineComponent({
     invalidate: {
       type: Boolean,
       required: false
+    },
+    /**
+     * Enable tags within the input borders
+     * Defaults to false
+     */
+    enableTags: {
+      type: Boolean,
+      "default": false
+    },
+    tags: {
+      type: Array,
+      required: false
     }
   },
   emits: ['update:modelValue', /** Fired on native focus in */
   'focus', /** Fired on native input blur */
-  'blur'],
+  'blur', /** v-model bindings for tags */
+  'update:tags'],
   setup: function setup(props, ctx) {
     var inputBaseClass = ref("text-p text-body placeholder:text-p placeholder:text-grey-100 border outline-none block w-full px-2.5 py-3");
     var inputValue = computed({
@@ -151,6 +166,20 @@ var __default__ = defineComponent({
         return ctx.emit('update:modelValue', state);
       }
     });
+    var tagsValue = computed({
+      get: function get() {
+        return props.tags;
+      },
+      set: function set(state) {
+        return ctx.emit('update:tags', state);
+      }
+    });
+    var handleTagDismiss = function handleTagDismiss(id) {
+      var _tagsValue$value;
+      tagsValue.value = (_tagsValue$value = tagsValue.value) === null || _tagsValue$value === void 0 ? void 0 : _tagsValue$value.filter(function (tag) {
+        return tag.id !== id;
+      });
+    };
     var onFocus = function onFocus(e) {
       return ctx.emit('focus', e);
     };
@@ -163,18 +192,20 @@ var __default__ = defineComponent({
     return {
       inputBaseClass: inputBaseClass,
       inputValue: inputValue,
+      tagsValue: tagsValue,
       onFocus: onFocus,
       onBlur: onBlur,
       primaryFade5: primaryFade5,
-      colorErrorTextFade5: colorErrorTextFade5
+      colorErrorTextFade5: colorErrorTextFade5,
+      handleTagDismiss: handleTagDismiss
     };
   }
 });
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "v13ee7f47": _ctx.primaryFade5,
-      "f122bf92": _ctx.colorErrorTextFade5
+      "v221768dc": _ctx.primaryFade5,
+      "v0b83798c": _ctx.colorErrorTextFade5
     };
   });
 };
@@ -205,33 +236,54 @@ var _hoisted_7 = {
   "class": "relative"
 };
 var _hoisted_8 = {
+  key: 0,
+  "class": "border border-grey-100 bg-white rounded-lg p-3"
+};
+var _hoisted_9 = {
   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", "name", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
 var _hoisted_10 = {
+  "class": "pl-9 flex flex-row items-center flex-wrap"
+};
+var _hoisted_11 = ["id", "name", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
+var _hoisted_12 = {
+  key: 1,
+  "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
+};
+var _hoisted_13 = {
+  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_14 = ["id", "name", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
+var _hoisted_15 = {
   key: 1,
   "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
 };
-var _hoisted_11 = {
+var _hoisted_16 = {
   key: 0,
   "class": "text-left text-p-small mt-2 min-h-[21px]"
 };
-var _hoisted_12 = {
+var _hoisted_17 = {
   key: 0,
   "class": "text-brand-error-text"
 };
-var _hoisted_13 = {
+var _hoisted_18 = {
   key: 1,
   "class": "text-brand-text2"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_FwTag = resolveComponent("FwTag");
   var _component_InputField = resolveComponent("InputField");
   return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
-    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
       return _ctx.inputValue = $event;
     }),
+    tags: _ctx.tagsValue,
+    "onUpdate:tags": _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.tagsValue = $event;
+    }),
     name: _ctx.name,
     rules: _ctx.rules,
     "validate-on-input": true
@@ -245,7 +297,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": _ctx.inputId || "fw-input-".concat(_ctx.name),
         "class": normalizeClass([[(errorMessage || errors[0]) && meta.touched || _ctx.invalidate ? 'text-brand-error-text' : 'text-brand-text2'], "block mb-2 text-base"])
-      }, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_5, "*")) : createCommentVNode("", true)], 10, _hoisted_4)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_7, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "prefix", {
+      }, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_5, "*")) : createCommentVNode("", true)], 10, _hoisted_4)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_7, [_ctx.enableTags && _ctx.tags ? (openBlock(), createElementBlock("div", _hoisted_8, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "prefix", {
+        "class": "h-full"
+      })])) : createCommentVNode("", true), createElementVNode("div", _hoisted_10, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tags, function (tag) {
+        return openBlock(), createBlock(_component_FwTag, {
+          key: tag.id,
+          label: tag.name,
+          dismissable: true,
+          rounded: false,
+          size: "md",
+          "class": "m-1",
+          variant: "secondary",
+          onDismissed: function onDismissed($event) {
+            return _ctx.handleTagDismiss(tag.id);
+          }
+        }, null, 8, ["label", "onDismissed"]);
+      }), 128)), createElementVNode("input", mergeProps(field, {
+        id: _ctx.inputId || "fw-input-".concat(_ctx.name),
+        name: _ctx.disableNamePrefix ? _ctx.name : "fw-input-".concat(_ctx.name),
+        type: _ctx.type,
+        readonly: _ctx.readonly,
+        tabindex: _ctx.tabindex,
+        disabled: _ctx.readonly,
+        autocomplete: _ctx.autocomplete,
+        maxlength: _ctx.maxLength,
+        "class": "border-none outline-none !bg-transparent flex-grow pl-1",
+        onFocus: _cache[0] || (_cache[0] = function () {
+          return _ctx.onFocus && _ctx.onFocus.apply(_ctx, arguments);
+        }),
+        onBlur: _cache[1] || (_cache[1] = function () {
+          return _ctx.onBlur && _ctx.onBlur.apply(_ctx, arguments);
+        })
+      }), null, 16, _hoisted_11)]), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_12, [renderSlot(_ctx.$slots, "suffix", {
+        "class": "h-full"
+      })])) : createCommentVNode("", true)])) : createCommentVNode("", true), !_ctx.enableTags ? (openBlock(), createElementBlock(Fragment, {
+        key: 1
+      }, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "prefix", {
         "class": "h-full"
       })])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         id: _ctx.inputId || "fw-input-".concat(_ctx.name),
@@ -261,30 +348,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           'pl-10': !!_ctx.$slots.prefix,
           'pr-20': !!_ctx.$slots.suffix
         }, (errorMessage || errors[0]) && meta.touched || _ctx.invalidate ? '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', _ctx.inputClass],
-        onFocus: _cache[0] || (_cache[0] = function () {
+        onFocus: _cache[2] || (_cache[2] = function () {
           return _ctx.onFocus && _ctx.onFocus.apply(_ctx, arguments);
         }),
-        onBlur: _cache[1] || (_cache[1] = function () {
+        onBlur: _cache[3] || (_cache[3] = 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", {
+      }), null, 16, _hoisted_14), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_15, [renderSlot(_ctx.$slots, "suffix", {
         "class": "h-full"
-      })])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_11, [createVNode(Transition, {
+      })])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_16, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
         "default": withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])) : createCommentVNode("", true)])];
     }),
     _: 3
-  }, 8, ["modelValue", "name", "rules"])]);
+  }, 8, ["modelValue", "tags", "name", "rules"])]);
 }
 
-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(--v13ee7f47)}.fw-input input.input--error-state{background-color:var(--f122bf92)}";
-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(--v13ee7f47)}.fw-input input.input--error-state{background-color:var(--f122bf92)}";
+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(--v221768dc)}.fw-input input.input--error-state{background-color:var(--v0b83798c)}";
+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(--v221768dc)}.fw-input input.input--error-state{background-color:var(--v0b83798c)}";
 styleInject(css_248z);
 
 __default__.render = render;

package/esm/fw-input.js

@@ -1,5 +1,9 @@
-export { _ as FwInput } from './fw-input-Bo2gQcvM.js';
+export { _ as FwInput } from './fw-input-DTYzNw81.js';
 import 'vue';
 import './vee-validate-0dtT5GSQ.js';
 import './get-root-colours-DCCAnRF4.js';
+import './fw-tag.js';
+import './fw-button.js';
+import './fw-button-ChYejNWD.js';
+import './index-v1DX6R2G.js';
 import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-navigation-menu.js

@@ -87,6 +87,12 @@ var script = defineComponent({
     reversedDesktopNavButton: {
       type: Boolean,
       "default": false
+    },
+    /**
+     * Whether to force the logo to be displayed (forced for mobile themes that don't need a menu)
+     */
+    forcedLogoSrc: {
+      type: String
     }
   },
   emits: ['action'],
@@ -134,26 +140,27 @@ var script = defineComponent({
   }
 });
 
-var _hoisted_1 = {
-  key: 0,
+var _hoisted_1 = ["src"];
+var _hoisted_2 = {
+  key: 1,
   "class": "hidden lg:!flex flex-shrink-0 items-center"
 };
-var _hoisted_2 = ["src"];
-var _hoisted_3 = {
-  "class": "flex space-x-1"
-};
+var _hoisted_3 = ["src"];
 var _hoisted_4 = {
-  key: 2,
-  "class": "hidden lg:flex items-center justify-center lg:ml-2"
+  "class": "flex space-x-1 ml-auto"
 };
 var _hoisted_5 = {
-  "class": "flex flex-col min-w-[180px] text-left"
+  key: 3,
+  "class": "hidden lg:flex items-center justify-center lg:ml-2"
 };
 var _hoisted_6 = {
-  key: 3,
-  "class": "flex items-center lg:hidden z-[53]"
+  "class": "flex flex-col min-w-[180px] text-left"
 };
 var _hoisted_7 = {
+  key: 4,
+  "class": "flex items-center lg:hidden z-[53]"
+};
+var _hoisted_8 = {
   "class": "block h-6 w-6",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -161,20 +168,20 @@ var _hoisted_7 = {
   stroke: "currentColor",
   "aria-hidden": "true"
 };
-var _hoisted_8 = ["d"];
-var _hoisted_9 = {
+var _hoisted_9 = ["d"];
+var _hoisted_10 = {
   key: 0,
   "class": "flex-none lg:hidden items-start flex-shrink-0 pl-4"
 };
-var _hoisted_10 = ["src"];
-var _hoisted_11 = {
+var _hoisted_11 = ["src"];
+var _hoisted_12 = {
   key: 1,
   "class": "w-full flex flex-col space-y-1 pt-6"
 };
-var _hoisted_12 = {
+var _hoisted_13 = {
   "class": "flex flex-col justify-between pt-6 h-full"
 };
-var _hoisted_13 = {
+var _hoisted_14 = {
   key: 0,
   "class": "w-full flex flex-col space-y-1"
 };
@@ -184,22 +191,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_UserSvg = resolveComponent("UserSvg");
   var _component_FwPopover = resolveComponent("FwPopover");
   return openBlock(), createElementBlock("nav", {
-    "class": normalizeClass(["fw-nav-menu z-50 h-[72px] bg-white shadow-bottom", [_ctx.transparent ? 'lg:bg-transparent lg:shadow-none' : 'lg:bg-brand-appBg lg:shadow-bottom', _ctx.isMobileMenuOpen ? 'bg-transparent' : '']])
+    "class": normalizeClass(["fw-nav-menu z-50 h-[72px] bg-white shadow-bottom", [_ctx.transparent ? 'lg:bg-transparent lg:shadow-none' : 'lg:bg-brand-appBg lg:shadow-bottom', _ctx.isMobileMenuOpen ? 'bg-transparent' : '', !!_ctx.forcedLogoSrc ? '!bg-transparent !shadow-none' : '']])
   }, [createElementVNode("div", {
     "class": normalizeClass(["px-6 lg:py-3 flex-1 h-full flex items-stretch justify-between mx-auto", [_ctx.containerClass, !_ctx.menuEnabled ? 'hidden lg:flex' : '']])
-  }, [_ctx.$slots.logo || _ctx.logoSrc ? (openBlock(), createElementBlock("div", _hoisted_1, [_ctx.$slots.logo ? renderSlot(_ctx.$slots, "logo", {
+  }, [!!_ctx.forcedLogoSrc ? (openBlock(), createElementBlock("img", {
+    key: 0,
+    src: _ctx.forcedLogoSrc,
+    "class": "w-[42px]"
+  }, null, 8, _hoisted_1)) : _ctx.$slots.logo || _ctx.logoSrc ? (openBlock(), createElementBlock("div", _hoisted_2, [_ctx.$slots.logo ? renderSlot(_ctx.$slots, "logo", {
     key: 0
   }) : _ctx.logoSrc ? (openBlock(), createElementBlock("img", {
     key: 1,
     src: _ctx.logoSrc,
     "class": "w-[42px]"
-  }, null, 8, _hoisted_2)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.parsedMenuItems && ((_ctx$parsedMenuItems = _ctx.parsedMenuItems) === null || _ctx$parsedMenuItems === void 0 ? void 0 : _ctx$parsedMenuItems.length) > 0 ? (openBlock(), createElementBlock("div", {
-    key: 1,
-    "class": normalizeClass(["container hidden lg:flex items-center justify-between", _ctx.paddingClasses])
+  }, null, 8, _hoisted_3)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.parsedMenuItems && ((_ctx$parsedMenuItems = _ctx.parsedMenuItems) === null || _ctx$parsedMenuItems === void 0 ? void 0 : _ctx$parsedMenuItems.length) > 0 ? (openBlock(), createElementBlock("div", {
+    key: 2,
+    "class": normalizeClass(["container items-center justify-between", [_ctx.paddingClasses, !!_ctx.forcedLogoSrc ? 'flex' : 'hidden lg:flex']])
   }, [_cache[1] || (_cache[1] = createElementVNode("div", {
     id: "menu-teleport",
     "class": "hidden lg:flex items-center gap-x-2"
-  }, null, -1)), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.parsedMenuItems, function (item, i) {
+  }, null, -1)), createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.parsedMenuItems, function (item, i) {
     return openBlock(), createBlock(_component_FwButton, {
       key: i,
       variant: "transparent",
@@ -217,13 +228,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["class", "href", "to", "external", "onClick"]);
-  }), 128))])], 2)) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.actionLabel && _ctx.authenticated ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(_component_FwPopover, {
+  }), 128))])], 2)) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.actionLabel && _ctx.authenticated ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_FwPopover, {
     placement: "bottom-start",
     "show-on-top": "",
     trigger: "click"
   }, {
     content: withCtx(function () {
-      return [createElementVNode("div", _hoisted_5, [createVNode(_component_FwButton, {
+      return [createElementVNode("div", _hoisted_6, [createVNode(_component_FwButton, {
         size: "lg",
         variant: "text",
         rounded: false,
@@ -253,7 +264,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       })];
     }),
     _: 1
-  })])) : createCommentVNode("", true), _ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+  })])) : createCommentVNode("", true), _ctx.menuEnabled && !_ctx.forcedLogoSrc ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(_component_FwButton, {
     variant: _ctx.isMobileMenuOpen ? 'primary' : 'tertiary',
     size: "sm",
     rounded: false,
@@ -263,18 +274,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "default": withCtx(function () {
       return [_cache[2] || (_cache[2] = createElementVNode("span", {
         "class": "sr-only"
-      }, "Open main menu", -1)), (openBlock(), createElementBlock("svg", _hoisted_7, [createElementVNode("path", {
+      }, "Open main menu", -1)), (openBlock(), createElementBlock("svg", _hoisted_8, [createElementVNode("path", {
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "stroke-width": "2",
         d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
-      }, null, 8, _hoisted_8)]))];
+      }, null, 8, _hoisted_9)]))];
     }),
     _: 1
   }, 8, ["variant", "class", "onClick"])])) : createCommentVNode("", true)], 2), _cache[4] || (_cache[4] = createElementVNode("div", {
     id: "menu-search-teleport",
     "class": "absolute top-0 left-0 w-full z-[54]"
-  }, null, -1)), _ctx.menuEnabled ? (openBlock(), createBlock(Transition, {
+  }, null, -1)), _ctx.menuEnabled && !_ctx.forcedLogoSrc ? (openBlock(), createBlock(Transition, {
     key: 0,
     name: "slideInRight"
   }, {
@@ -282,13 +293,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return [_ctx.parsedMenuItems && _ctx.parsedMenuItems.length > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", {
         key: 0,
         "class": normalizeClass(["fw-nav-menu--mobile pl-6 pb-12", _ctx.mobileMenuClass])
-      }, [_ctx.$slots.mobileLogo || _ctx.mobileLogoSrc ? (openBlock(), createElementBlock("div", _hoisted_9, [_ctx.$slots.mobileLogo ? renderSlot(_ctx.$slots, "mobileLogo", {
+      }, [_ctx.$slots.mobileLogo || _ctx.mobileLogoSrc ? (openBlock(), createElementBlock("div", _hoisted_10, [_ctx.$slots.mobileLogo ? renderSlot(_ctx.$slots, "mobileLogo", {
         key: 0
       }) : _ctx.mobileLogoSrc ? (openBlock(), createElementBlock("img", {
         key: 1,
         src: _ctx.mobileLogoSrc,
         "class": "w-[42px]"
-      }, null, 8, _hoisted_10)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.parsedAdditionalMenuItems ? (openBlock(), createElementBlock("div", _hoisted_11, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.parsedAdditionalMenuItems, function (item, i) {
+      }, null, 8, _hoisted_11)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.parsedAdditionalMenuItems ? (openBlock(), createElementBlock("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.parsedAdditionalMenuItems, function (item, i) {
         return openBlock(), createElementBlock(Fragment, {
           key: i
         }, [!item.disabled ? (openBlock(), createBlock(_component_FwButton, {
@@ -311,7 +322,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, 1032, ["href", "to", "external", "onClick"])) : createCommentVNode("", true)], 64);
       }), 128)), _cache[3] || (_cache[3] = createElementVNode("div", {
         "class": "w-[50px] relative bg-brand-border3 h-px !mt-6 ml-2"
-      }, null, -1))])) : createCommentVNode("", true), createElementVNode("div", _hoisted_12, [_ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.parsedMenuItems, function (item, i) {
+      }, null, -1))])) : createCommentVNode("", true), createElementVNode("div", _hoisted_13, [_ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.parsedMenuItems, function (item, i) {
         return openBlock(), createBlock(_component_FwButton, {
           key: i,
           "class": "w-full rounded-md !text-left !pl-2",

package/esm/fw-provider-list.js

@@ -1,8 +1,8 @@
 import { f as _createForOfIteratorHelper, e as _defineProperty, b as _toConsumableArray } from './_rollupPluginBabelHelpers-BKlDnZ7n.js';
 import { ref, watch, defineComponent, shallowRef, computed, useCssVars, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, withCtx, createBlock, createCommentVNode, createTextVNode } from 'vue';
 import { a as script, s as script$1, _ as __default__$4 } from './fw-table-row-Be4_T3Ai.js';
-import { _ as __default__$3 } from './fw-input-Bo2gQcvM.js';
-import { _ as __default__$1 } from './fw-tag-B0fVslEZ.js';
+import { _ as __default__$3 } from './fw-input-DTYzNw81.js';
+import { FwTag as __default__$1 } from './fw-tag.js';
 import { s as script$2 } from './fw-button-ChYejNWD.js';
 import { _ as __default__$2 } from './fw-dropdown-UJDWtWjF.js';
 import { l as render$1, m as render$2, n as render$3 } from './index-v1DX6R2G.js';

package/esm/fw-tag.js

@@ -1,7 +1,206 @@
-export { _ as FwTag } from './fw-tag-B0fVslEZ.js';
-import 'vue';
+import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, toDisplayString, renderSlot, createVNode, createCommentVNode, vShow } from 'vue';
 import './fw-button.js';
-import './fw-button-ChYejNWD.js';
-import './index-v1DX6R2G.js';
-import './style-inject.es-tgCJW-Cu.js';
-import './get-root-colours-DCCAnRF4.js';
+import { d as render$1 } from './index-v1DX6R2G.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import { s as script } from './fw-button-ChYejNWD.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var TAG_CLASSES = {
+  primary: {
+    text: 'text-button-primary-text',
+    background: 'bg-button-primary-bg',
+    iconButtonType: 'primary'
+  },
+  secondary: {
+    text: 'text-primary',
+    background: 'fw-tag--secondary-bg',
+    iconButtonType: 'tertiary'
+  },
+  tertiary: {
+    text: 'text-body',
+    background: 'bg-brand-bg4',
+    iconButtonType: 'tertiary'
+  },
+  quaternary: {
+    text: 'text-body',
+    background: 'bg-brand-bg3',
+    iconButtonType: 'tertiary'
+  },
+  alert: {
+    text: 'text-white',
+    background: 'bg-brand-warning-bg',
+    iconButtonType: 'error'
+  },
+  success: {
+    text: 'text-secondary',
+    background: 'bg-brand-success-new',
+    iconButtonType: 'success'
+  },
+  error: {
+    text: 'text-white',
+    background: 'bg-brand-error-text',
+    iconButtonType: 'error'
+  }
+};
+var SIZES = {
+  xs: 'px-2 py-px text-xs',
+  sm: 'px-4 py-1 text-sm',
+  md: 'px-4 py-3 h-6 text-md'
+};
+var ICON_SIZES = {
+  xs: 'w-4 h-4',
+  sm: 'w-5 h-5',
+  md: 'w-5 h-5'
+};
+var baseClass = 'inline-flex items-center justify-center text-center whitespace-nowrap';
+var __default__ = defineComponent({
+  name: 'FwTag',
+  components: {
+    FwButton: script,
+    XMarkSvg: render$1
+  },
+  props: {
+    /**
+     * The label text of the tag.
+     * Overrides the default slot content.
+     */
+    label: {
+      type: String
+    },
+    /**
+     * The size of the tag. Accepts: 'xs', 'sm' & 'md'
+     */
+    size: {
+      type: String,
+      "default": 'xs',
+      validator: function validator(value) {
+        return ['xs', 'sm', 'md'].includes(value);
+      }
+    },
+    /**
+     * The colour variant of the tag. Accepts 'primary', 'secondary', 'alert', 'error', 'success'
+     */
+    variant: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'alert', 'error', 'success'].includes(value);
+      }
+    },
+    /**
+     * Whether the tag can be dismissed or closed.
+     */
+    dismissable: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Whether the tag has round borders or not.
+     */
+    rounded: {
+      type: Boolean,
+      "default": true
+    }
+  },
+  emits: [/** Fires when the tag is dismissed. */
+  'dismissed'],
+  setup: function setup(props, ctx) {
+    var visible = ref(true);
+    var variantDef = computed(function () {
+      return TAG_CLASSES[props.variant];
+    });
+    var _useColours = useColours(),
+      primaryFade5 = _useColours.primaryFade5;
+    var textColorClass = computed(function () {
+      return variantDef.value.text;
+    });
+    var bgColorClass = computed(function () {
+      return variantDef.value.background;
+    });
+    var iconButtonType = computed(function () {
+      return variantDef.value.iconButtonType;
+    });
+    var sizeClass = computed(function () {
+      return SIZES[props.size];
+    });
+    var iconSizeClass = computed(function () {
+      return ICON_SIZES[props.size];
+    });
+    var rootClasses = computed(function () {
+      return [baseClass, textColorClass.value, bgColorClass.value, sizeClass.value, props.dismissable ? 'shadow font-semibold' : 'font-normal', props.rounded ? 'rounded-full' : ''];
+    });
+    var onDismiss = function onDismiss() {
+      visible.value = false;
+      ctx.emit('dismissed');
+    };
+    return {
+      visible: visible,
+      baseClass: baseClass,
+      textColorClass: textColorClass,
+      bgColorClass: bgColorClass,
+      sizeClass: sizeClass,
+      iconSizeClass: iconSizeClass,
+      iconButtonType: iconButtonType,
+      primaryFade5: primaryFade5,
+      onDismiss: onDismiss,
+      rootClasses: rootClasses
+    };
+  }
+});
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "d012dfb6": _ctx.primaryFade5
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+
+var _hoisted_1 = {
+  key: 0
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_XMarkSvg = resolveComponent("XMarkSvg");
+  var _component_FwButton = resolveComponent("FwButton");
+  return openBlock(), createBlock(Transition, {
+    name: "fw-tag-fade-scale",
+    appear: ""
+  }, {
+    "default": withCtx(function () {
+      return [withDirectives(createElementVNode("span", {
+        "class": normalizeClass(["fw-tag", _ctx.rootClasses]),
+        role: "status"
+      }, [_ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.label), 1)) : renderSlot(_ctx.$slots, "default", {
+        key: 1
+      }), _ctx.dismissable ? (openBlock(), createBlock(_component_FwButton, {
+        key: 2,
+        variant: _ctx.iconButtonType,
+        "class": normalizeClass([_ctx.iconSizeClass, "ml-1 !p-0 flex items-center justify-center border-none rounded-full"]),
+        tabindex: "0",
+        title: "Dismiss filter",
+        "aria-label": "Dismiss",
+        onClick: _ctx.onDismiss
+      }, {
+        "default": withCtx(function () {
+          return [createVNode(_component_XMarkSvg, {
+            "class": "w-3 h-3 font-semibold m-0"
+          })];
+        }),
+        _: 1
+      }, 8, ["variant", "class", "onClick"])) : createCommentVNode("", true)], 2), [[vShow, _ctx.visible]])];
+    }),
+    _: 3
+  });
+}
+
+var css_248z = ".fw-tag{line-height:normal;-webkit-transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease;will-change:transform,opacity}.fw-tag--secondary-bg{background:var(--d012dfb6)}.fw-tag-fade-scale-enter-active,.fw-tag-fade-scale-leave-active{-webkit-transition:opacity .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease;transition:transform .18s ease,opacity .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease}.fw-tag-fade-scale-enter-from,.fw-tag-fade-scale-leave-to{opacity:0;-webkit-transform:scale(.96);-moz-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}";
+var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease;will-change:transform,opacity}.fw-tag--secondary-bg{background:var(--d012dfb6)}.fw-tag-fade-scale-enter-active,.fw-tag-fade-scale-leave-active{-webkit-transition:opacity .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease;transition:transform .18s ease,opacity .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease}.fw-tag-fade-scale-enter-from,.fw-tag-fade-scale-leave-to{opacity:0;-webkit-transform:scale(.96);-moz-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}";
+styleInject(css_248z);
+
+__default__.render = render;
+
+export { __default__ as FwTag };