@frollo/frollo-web-ui 9.0.9 → 9.0.11

package/esm/{fw-input-Bo2gQcvM.js → fw-input-HqJer3qu.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
+      "v027ca7bd": _ctx.primaryFade5,
+      "v6423b1fe": _ctx.colorErrorTextFade5
     };
   });
 };
@@ -208,30 +239,47 @@ 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", "name", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
-var _hoisted_10 = {
+var _hoisted_9 = {
+  "class": "flex flex-row items-center flex-wrap"
+};
+var _hoisted_10 = ["id", "name", "type", "readonly", "tabindex", "disabled", "autocomplete", "placeholder", "maxlength"];
+var _hoisted_11 = {
   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_12 = {
+  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_13 = ["id", "name", "placeholder", "type", "readonly", "tabindex", "disabled", "autocomplete", "maxlength"];
+var _hoisted_14 = {
+  key: 1,
+  "class": "flex text-black absolute w-10 h-full inset-y-0 right-0 items-center pr-3"
+};
+var _hoisted_15 = {
   key: 0,
   "class": "text-left text-p-small mt-2 min-h-[21px]"
 };
-var _hoisted_12 = {
+var _hoisted_16 = {
   key: 0,
   "class": "text-brand-error-text"
 };
-var _hoisted_13 = {
+var _hoisted_17 = {
   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 +293,49 @@ 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", {
+        key: 0,
+        "class": normalizeClass([{
+          '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, 'fw-input__tagged'])
+      }, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "prefix", {
+        "class": "h-full"
+      })])) : createCommentVNode("", true), createElementVNode("div", _hoisted_9, [(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,
+        placeholder: _ctx.placeholder,
+        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_10)]), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "suffix", {
+        "class": "h-full"
+      })])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), !_ctx.enableTags ? (openBlock(), createElementBlock(Fragment, {
+        key: 1
+      }, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_12, [renderSlot(_ctx.$slots, "prefix", {
         "class": "h-full"
       })])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         id: _ctx.inputId || "fw-input-".concat(_ctx.name),
@@ -261,30 +351,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_13), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_14, [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_15, [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_16, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_17, 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(--v027ca7bd)}.fw-input input.input--error-state{background-color:var(--v6423b1fe)}.fw-input__tagged:focus-within{background-color:var(--v027ca7bd)}.fw-input__tagged.input--error-state{background-color:var(--v6423b1fe)}";
+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(--v027ca7bd)}.fw-input input.input--error-state{background-color:var(--v6423b1fe)}.fw-input__tagged:focus-within{background-color:var(--v027ca7bd)}.fw-input__tagged.input--error-state{background-color:var(--v6423b1fe)}";
 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-HqJer3qu.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-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-HqJer3qu.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 };

package/esm/index.js

@@ -11,7 +11,7 @@ import { FwNavigationMenu as script$8 } from './fw-navigation-menu.js';
 import { FwTab as script$e, FwTabs as script$h } from './fw-tabs.js';
 import { FwModal as __default__$8 } from './fw-modal.js';
 import { FwProgressBar as script$9 } from './fw-progress-bar.js';
-import './fw-tag.js';
+import { FwTag as __default__$c } from './fw-tag.js';
 import './fw-table.js';
 import { FwAccordion as __default__ } from './fw-accordion.js';
 import './fw-image.js';
@@ -33,11 +33,10 @@ import { _ as __default__$1 } from './fw-card-DJXjRPUR.js';
 import { _ as __default__$5 } from './fw-dropdown-UJDWtWjF.js';
 import { F as Form } from './vee-validate-0dtT5GSQ.js';
 import { _ as __default__$6 } from './fw-image-fzUvzmLv.js';
-import { _ as __default__$7 } from './fw-input-Bo2gQcvM.js';
+import { _ as __default__$7 } from './fw-input-HqJer3qu.js';
 import { s as script$3 } from './fw-loading-bar-CPzE92BH.js';
 import { _ as __default__$9 } from './fw-popover-BFiv7Ich.js';
 import { _ as __default__$b, s as script$f, a as script$g } from './fw-table-row-Be4_T3Ai.js';
-import { _ as __default__$c } from './fw-tag-B0fVslEZ.js';
 import { reactive, createApp, h } from 'vue';
 export { g as getHexWithOpacity, u as useColours } from './get-root-colours-DCCAnRF4.js';
 import './uniqueId-DK6xzFd8.js';