@frollo/frollo-web-ui 8.5.4 → 9.0.0

package/esm/fw-switch.js

@@ -0,0 +1,147 @@
+import { defineComponent, ref, pushScopeId, popScopeId, createElementVNode, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createCommentVNode, normalizeClass, mergeProps, Transition, toDisplayString } from 'vue';
+import { a as Field } from './vee-validate.esm-3ptvCDR1.js';
+import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var script = defineComponent({
+  name: 'FwSwitch',
+  components: {
+    InputField: Field
+  },
+  props: {
+    /**
+     * The name of the switch input field.
+     * Multiple switches can use the same name with a unique value.
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * The value of the input field. Must be unique per name.
+     */
+    value: {
+      type: String,
+      required: false
+    },
+    /**
+     * Validation rules. Accepts an object, stringm schema or validation function.
+     */
+    rules: {
+      type: [Object, String, Function]
+    },
+    /**
+     * The hint text shown below the input
+     */
+    hint: {
+      type: String
+    },
+    /**
+     * Enable or disable the error hidden element
+     */
+    enableErrors: {
+      type: Boolean,
+      "default": true
+    },
+    /**
+     * Progmatically set the checked state of the input.
+     * Used outside a FwForm element
+     */
+    isChecked: {
+      type: Boolean,
+      required: false,
+      "default": false
+    }
+  },
+  emits: ['change'],
+  setup: function setup(props, ctx) {
+    var isSwitched = ref(props.isChecked);
+    var uuid = uniqueId();
+    var toggleSwitch = function toggleSwitch() {
+      isSwitched.value = !isSwitched.value;
+      ctx.emit('change', isSwitched.value);
+    };
+    return {
+      isSwitched: isSwitched,
+      toggleSwitch: toggleSwitch,
+      uuid: uuid
+    };
+  }
+});
+
+var _withScopeId = function _withScopeId(n) {
+  return pushScopeId("data-v-0adb13d4"), n = n(), popScopeId(), n;
+};
+var _hoisted_1 = {
+  "class": "flex flex-col"
+};
+var _hoisted_2 = /*#__PURE__*/_withScopeId(function () {
+  return /*#__PURE__*/createElementVNode("div", {
+    "class": "size-4 rounded-[50%] bg-white"
+  }, null, -1);
+});
+var _hoisted_3 = [_hoisted_2];
+var _hoisted_4 = ["for"];
+var _hoisted_5 = ["id", "value", "name", "checked"];
+var _hoisted_6 = {
+  key: 0,
+  "class": "italic text-sm font-medium min-h-[21px]"
+};
+var _hoisted_7 = {
+  key: 0,
+  "class": "text-brand-error-text"
+};
+var _hoisted_8 = {
+  key: 1
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_InputField = resolveComponent("InputField");
+  return openBlock(), createElementBlock("button", {
+    "class": "fw-switch rounded-full ring-primary ring-offset-1 focus:outline-0 focus:ring-none focus-visible:outline-0 focus-visible:ring-2",
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.toggleSwitch();
+    })
+  }, [createVNode(_component_InputField, {
+    name: _ctx.name,
+    value: _ctx.value ? _ctx.value : _ctx.name,
+    type: "checkbox",
+    rules: _ctx.rules
+  }, {
+    "default": withCtx(function (_ref) {
+      var field = _ref.field,
+        errors = _ref.errors,
+        errorMessage = _ref.errorMessage,
+        meta = _ref.meta;
+      return [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
+        "class": normalizeClass(["w-[40px] h-[24px] rounded-[20px] flex items-center py-1 box-border transition-all ease-out duration-300 hover:brightness-95", _ctx.isSwitched ? 'bg-brand-success-new justify-end pl-5 pr-1' : 'bg-brand-text2 pl-1 pr-5'])
+      }, _hoisted_3, 2), createElementVNode("label", {
+        "for": "fw-switch-".concat(_ctx.name, "-").concat(_ctx.uuid),
+        "class": "hidden"
+      }, [createElementVNode("input", mergeProps(field, {
+        id: "fw-switch-".concat(_ctx.name, "-").concat(_ctx.uuid),
+        value: _ctx.value ? _ctx.value : _ctx.name,
+        name: "fw-switch-".concat(_ctx.name, "-").concat(_ctx.uuid),
+        type: "checkbox",
+        checked: _ctx.isSwitched
+      }), null, 16, _hoisted_5)], 8, _hoisted_4), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(Transition, {
+        name: "fwFadeIn",
+        mode: "out-in"
+      }, {
+        "default": withCtx(function () {
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+        }),
+        _: 2
+      }, 1024)])) : createCommentVNode("", true)])];
+    }),
+    _: 1
+  }, 8, ["name", "value", "rules"])]);
+}
+
+var css_248z = ".fwFadeIn-enter-active[data-v-0adb13d4]{-webkit-animation:fwFadeIn-0adb13d4 .35s;-moz-animation:fwFadeIn-0adb13d4 .35s;animation:fwFadeIn-0adb13d4 .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-0adb13d4]{animation:fwFadeIn-0adb13d4 .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}";
+var stylesheet = ".fwFadeIn-enter-active[data-v-0adb13d4]{-webkit-animation:fwFadeIn-0adb13d4 .35s;-moz-animation:fwFadeIn-0adb13d4 .35s;animation:fwFadeIn-0adb13d4 .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-0adb13d4]{animation:fwFadeIn-0adb13d4 .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-0adb13d4{0%{opacity:0}to{opacity:1}}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-0adb13d4";
+
+export { script as FwSwitch };

package/esm/{fw-table-row-Db7951fr.js → fw-table-row-C61Bi8KB.js}

@@ -1,24 +1,23 @@
-import { m as render$3, n as render$4, o as render$5, l as render$6 } from './index-CzZMBMV_.js';
-import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, renderSlot, createCommentVNode, Fragment, renderList, normalizeClass, withKeys, toDisplayString, createBlock, createVNode, withCtx } from 'vue';
-import { u as useColours } from './get-root-colours-DYEoJPEb.js';
-import { s as script$2 } from './fw-loading-bar-DThRjdw1.js';
-import { s as script$3 } from './fw-button-DNozvo7B.js';
+import { b as _toConsumableArray } from './_rollupPluginBabelHelpers-DODWUb5N.js';
+import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, renderSlot, Fragment, renderList, withKeys, toDisplayString, createBlock, createVNode, withCtx } from 'vue';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import './fw-button.js';
+import { o as render$3, p as render$4, q as render$5, s as render$6 } from './index-BsEH8YYr.js';
+import './fw-loading.js';
+import { s as script$2 } from './fw-button-CnQvA7oM.js';
+import { _ as __default__$1 } from './fw-loading-bar-DecYSBC_.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({
   name: 'FwTable',
   components: {
-    ArrowSortSvg: render$3,
-    ArrowDownSvg: render$4,
-    ChevronLeftSvg: render$5,
-    ChevronRightSvg: render$6,
-    FwLoadingBar: script$2,
-    FwButton: script$3
+    FwLoadingBar: __default__$1,
+    FwButton: script$2,
+    ArrowDownSvg: render$6,
+    ArrowSortSvg: render$5,
+    ChevronLeftSvg: render$4,
+    ChevronRightSvg: render$3
   },
-  emits: [/** Fired when a row is clicked with row data */
-  'rowClicked', /** Fired when a column is sorted */
-  'columnSorted', /** Fired when a page number or arrow is clicked */
-  'pageChanged'],
   props: {
     items: {
       type: Array,
@@ -54,9 +53,11 @@ var __default__ = defineComponent({
       type: Number
     }
   },
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-      expose = _ref.expose;
+  emits: [/** Fired when a row is clicked with row data */
+  'rowClicked', /** Fired when a column is sorted */
+  'columnSorted', /** Fired when a page number or arrow is clicked */
+  'pageChanged'],
+  setup: function setup(props, ctx) {
     var columns = computed(function () {
       return Object.keys(props.items[0]);
     });
@@ -64,16 +65,14 @@ var __default__ = defineComponent({
     var sortDirection = ref('asc');
     var currentSortedColumn = ref('');
     var currentPage = ref(1);
-    var maxPageAmount = computed(function () {
-      if (props.totalAmount && props.pageSize) {
-        return Math.ceil(props.totalAmount / props.pageSize);
-      }
-      return undefined;
-    });
+    var maxPageAmount = ref();
     onMounted(function () {
       if (Number(props.autoSortColumn) >= 0) {
         sortColumn(columns.value[Number(props.autoSortColumn)], false);
       }
+      if (props.totalAmount && props.pageSize) {
+        maxPageAmount.value = Math.ceil(props.totalAmount / props.pageSize);
+      }
     });
     var _useColours = useColours(),
       bgHoverColor = _useColours.primaryFade5;
@@ -87,14 +86,15 @@ var __default__ = defineComponent({
         sortBy.value = column;
         sortDirection.value = columnInitSort(column);
       }
-      if (isAction) emit('columnSorted', column, sortDirection.value);
+      if (isAction) ctx.emit('columnSorted', column, sortDirection.value);
     };
     var sortedData = computed(function () {
+      var _props$options$sortBy;
       if (!sortBy.value) {
         return props.items;
       }
-      var data = props.items;
-      var customSort = props.options ? props.options[sortBy.value].sort : undefined;
+      var data = _toConsumableArray(props.items);
+      var customSort = props.options ? (_props$options$sortBy = props.options[sortBy.value]) === null || _props$options$sortBy === void 0 ? void 0 : _props$options$sortBy.sort : false;
       if (customSort) {
         return customSort(data, sortBy.value, sortDirection.value);
       } else {
@@ -146,19 +146,16 @@ var __default__ = defineComponent({
       return false;
     };
     var rowClicked = function rowClicked(row) {
-      if (props.clickableRows) emit('rowClicked', row);
+      if (props.clickableRows) ctx.emit('rowClicked', row);
     };
     var pageArrowClick = function pageArrowClick(next) {
       currentPage.value = currentPage.value + (next ? 1 : -1);
-      emit('pageChanged', next);
-    };
-    var resetPage = function resetPage() {
-      currentPage.value = 1;
-    };
-    var exposeApi = {
-      resetPage: resetPage
+      ctx.emit('pageChanged', next);
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
     };
-    expose(exposeApi);
     return {
       columns: columns,
       sortBy: sortBy,
@@ -181,7 +178,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "121d9c09": _ctx.bgHoverColor
+      "00d6962e": _ctx.bgHoverColor
     };
   });
 };
@@ -192,14 +189,14 @@ __default__.setup = __setup__ ? function (props, ctx) {
 } : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-5b704401"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-d847bfa2"), n = n(), popScopeId(), n;
 };
 var _hoisted_1$2 = {
   "class": "flex flex-col"
 };
 var _hoisted_2$1 = ["aria-busy"];
 var _hoisted_3$1 = {
-  "class": "text-p2 border-b border-grey-40"
+  "class": "text-base border-b border-grey-60"
 };
 var _hoisted_4 = ["tabindex", "onKeydown", "onClick"];
 var _hoisted_5 = {
@@ -210,7 +207,7 @@ var _hoisted_6 = {
   "class": "ml-1 flex items-center justify-center w-5"
 };
 var _hoisted_7 = {
-  "class": "text-p2 bg-white font-light"
+  "class": "text-base bg-white font-normal"
 };
 var _hoisted_8 = {
   key: 0,
@@ -220,7 +217,7 @@ var _hoisted_9 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_10 = ["onClick", "tabindex", "onKeydown"];
+var _hoisted_10 = ["tabindex", "onClick", "onKeydown"];
 var _hoisted_11 = ["innerHTML"];
 var _hoisted_12 = {
   key: 0,
@@ -233,18 +230,18 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ChevronLeftSvg = resolveComponent("ChevronLeftSvg");
   var _component_FwButton = resolveComponent("FwButton");
   var _component_ChevronRightSvg = resolveComponent("ChevronRightSvg");
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("table", mergeProps(_ctx.$attrs, {
-    "class": ["fw-table table-auto table-responsive rounded-md shadow-card flex-1", _ctx.loading ? 'cursor-wait' : ''],
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("table", {
+    "class": normalizeClass(["fw-table table-auto flex-1", _ctx.loading ? 'cursor-wait' : '']),
     "aria-live": "polite",
     "aria-busy": _ctx.loading
-  }), [createElementVNode("thead", _hoisted_3$1, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
+  }, [createElementVNode("thead", _hoisted_3$1, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
     key: 0
   }) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
     return openBlock(), createElementBlock(Fragment, {
       key: thKey
     }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("th", {
       key: 0,
-      "class": normalizeClass(["fw-table-head py-6 pl-5 pr-3 text-left font-medium", _ctx.isColumnSortable(column) ? 'cursor-pointer fw-table-head--sortable' : '']),
+      "class": normalizeClass(["fw-table-head py-6 pl-5 pr-3 text-left font-medium text-brand-text1", _ctx.isColumnSortable(column) ? 'cursor-pointer fw-table-head--sortable' : '']),
       tabindex: _ctx.isColumnSortable(column) ? 0 : -1,
       onKeydown: withKeys(function ($event) {
         return _ctx.sortColumn(column);
@@ -256,12 +253,15 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
     }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_6, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
       key: 0,
-      "class": "inline-block w-full text-grey-base"
+      name: "arrow-sort",
+      "class": "inline-block w-full text-brand-text2"
     })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
       key: 1,
+      name: "arrow-down",
       "class": "inline-block w-4 text-primary rotate-180"
     })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
       key: 2,
+      name: "arrow-down",
       "class": "inline-block w-4 text-primary"
     })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_4)) : createCommentVNode("", true)], 64);
   }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
@@ -284,15 +284,15 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1
   }, renderList(_ctx.sortedData, function (row, trKey) {
     return openBlock(), createElementBlock("tr", {
-      "class": normalizeClass(["fw-table-row border-b border-grey-40", _ctx.clickableRows ? 'cursor-pointer' : '']),
+      key: trKey,
+      "class": normalizeClass(["fw-table-row border-b last:border-b-0 border-grey-60", _ctx.clickableRows ? 'cursor-pointer' : '']),
+      tabindex: _ctx.clickableRows ? 0 : -1,
       onClick: function onClick($event) {
         return _ctx.rowClicked(row);
       },
-      tabindex: _ctx.clickableRows ? 0 : -1,
       onKeydown: withKeys(function ($event) {
         return _ctx.rowClicked(row);
-      }, ["enter", "space"]),
-      key: trKey
+      }, ["enter", "space"])
     }, [_ctx.$slots.preRow ? renderSlot(_ctx.$slots, "preRow", {
       key: 0,
       row: row
@@ -301,14 +301,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         key: colKey
       }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", {
         key: 0,
-        "class": "py-2 pl-5 pr-3 text-left",
+        "class": "py-5 pl-5 pr-3 text-left",
         innerHTML: _ctx.formattedText(row, column)
       }, null, 8, _hoisted_11)) : createCommentVNode("", true)], 64);
     }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
       key: 1,
       row: row
     }) : createCommentVNode("", true)], 42, _hoisted_10);
-  }), 128))])], 16, _hoisted_2$1), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(_component_FwButton, {
+  }), 128))])], 10, _hoisted_2$1), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(_component_FwButton, {
     variant: 'tertiary',
     disabled: _ctx.currentPage === 1,
     size: "sm",
@@ -319,6 +319,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     "default": withCtx(function () {
       return [createVNode(_component_ChevronLeftSvg, {
+        name: "chevron-left",
         "class": "h-4 w-4",
         "stroke-width": "3"
       })];
@@ -335,6 +336,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     "default": withCtx(function () {
       return [createVNode(_component_ChevronRightSvg, {
+        name: "chevron-right",
         "class": "h-4 w-4"
       })];
     }),
@@ -342,12 +344,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["disabled"])])) : createCommentVNode("", true)]);
 }
 
-var css_248z = ".fw-table-head--sortable[data-v-5b704401]:hover{background-color:var(--121d9c09)}.fw-table-row[data-v-5b704401]:hover{background-color:var(--121d9c09)}";
-var stylesheet = ".fw-table-head--sortable[data-v-5b704401]:hover{background-color:var(--121d9c09)}.fw-table-row[data-v-5b704401]:hover{background-color:var(--121d9c09)}";
+var css_248z = ".fw-table-head--sortable[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}.fw-table-row[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}";
+var stylesheet = ".fw-table-head--sortable[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}.fw-table-row[data-v-d847bfa2]:hover{background-color:var(--00d6962e)}";
 styleInject(css_248z);
 
 __default__.render = render$2;
-__default__.__scopeId = "data-v-5b704401";
+__default__.__scopeId = "data-v-d847bfa2";
 
 var script$1 = defineComponent({
   name: 'FwTableHead'

package/esm/fw-table.js

@@ -1,9 +1,10 @@
-export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-Db7951fr.js';
-import './index-CzZMBMV_.js';
+export { _ as FwTable, s as FwTableHead, a as FwTableRow } from './fw-table-row-C61Bi8KB.js';
+import './_rollupPluginBabelHelpers-DODWUb5N.js';
 import 'vue';
-import './check--YD4Ts6g.js';
-import './get-root-colours-DYEoJPEb.js';
-import './fw-loading-bar-DThRjdw1.js';
+import './get-root-colours-DCjlYelc.js';
+import './fw-button.js';
+import './fw-button-CnQvA7oM.js';
+import './index-BsEH8YYr.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './fw-button-DNozvo7B.js';
-import './fw-loading-spinner-BFpFFRJm.js';
+import './fw-loading.js';
+import './fw-loading-bar-DecYSBC_.js';

package/esm/fw-tabs.js

@@ -1,8 +1,7 @@
-import { defineComponent, reactive, computed, ref, provide, openBlock, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, getCurrentInstance, inject, watchEffect, withDirectives, vShow } from 'vue';
+import { defineComponent, reactive, ref, computed, provide, createElementBlock, openBlock, createCommentVNode, renderSlot, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, getCurrentInstance, inject, watchEffect, withDirectives, vShow } from 'vue';
 
 var script$1 = defineComponent({
   name: 'FwTabs',
-  emits: ['update:modelValue'],
   props: {
     /**
      * The active tab v-model
@@ -12,6 +11,7 @@ var script$1 = defineComponent({
       required: true
     }
   },
+  emits: ['update:modelValue'],
   setup: function setup(props, ctx) {
     var state = reactive({
       active: computed(function () {
@@ -35,20 +35,20 @@ var _hoisted_1$1 = {
 };
 var _hoisted_2 = {
   key: 0,
-  "class": "flex flex-wrap -mb-px border-b border-grey-light dark:text-grey-base dark:border-grey-base"
+  "class": "flex flex-wrap -mb-px border-b border-brand-border2"
 };
 var _hoisted_3 = ["onClick"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.state.tabs ? (openBlock(), createElementBlock("ul", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.state.tabs, function (tab, i) {
     return openBlock(), createElementBlock("li", {
-      "class": "mr-2",
-      key: i
+      key: i,
+      "class": "mr-2"
     }, [createElementVNode("button", {
       type: "button",
+      "class": normalizeClass(["inline-block p-4 outline-primary border-b-2 border-transparent transition ease-in", _ctx.state.active === i && '!border-primary']),
       onClick: function onClick($event) {
         return _ctx.selectTab(i);
-      },
-      "class": normalizeClass(["inline-block p-4 outline-primary border-b-2 border-transparent transition ease-in", _ctx.state.active === i ? '!font-semibold !border-body' : 'hover:bg-grey-lightest'])
+      }
     }, toDisplayString(tab.props.label), 11, _hoisted_3)]);
   }), 128))])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]);
 }

package/esm/{fw-tag-V0jMl-It.js → fw-tag-FWH6KttB.js}

@@ -1,8 +1,8 @@
-import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, renderSlot, createCommentVNode, createBlock, withCtx, createVNode } from 'vue';
+import { defineComponent, ref, computed, useCssVars, resolveComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createCommentVNode, createBlock, Fragment, createTextVNode, toDisplayString, withCtx, createVNode } from 'vue';
 import './fw-button.js';
-import { b as render$1 } from './index-CzZMBMV_.js';
-import { u as useColours } from './get-root-colours-DYEoJPEb.js';
-import { s as script } from './fw-button-DNozvo7B.js';
+import { d as render$1 } from './index-BsEH8YYr.js';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { s as script } from './fw-button-CnQvA7oM.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({
@@ -11,8 +11,6 @@ var __default__ = defineComponent({
     FwButton: script,
     XMarkSvg: render$1
   },
-  emits: [/** Fires when the tag is dismissed. */
-  'dismissed'],
   props: {
     /**
      * The label text of the tag.
@@ -38,7 +36,7 @@ var __default__ = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'alert', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'alert', 'error', 'success'].includes(value);
       }
     },
     /**
@@ -49,41 +47,53 @@ var __default__ = defineComponent({
       "default": false
     }
   },
+  emits: [/** Fires when the tag is dismissed. */
+  'dismissed'],
   setup: function setup(props) {
-    var baseClass = ref("\n      inline-flex items-center justify-center font-semibold text-center whitespace-nowrap rounded-full shadow\n    ");
+    var baseClass = ref("\n      inline-flex items-center justify-center text-center whitespace-nowrap rounded-full\n    ");
     var _useColours = useColours(),
       primaryFade5 = _useColours.primaryFade5;
     var tagClasses = ref({
       primary: {
         text: 'text-button-primary-text',
         background: 'bg-button-primary-bg',
-        iconType: 'primary'
+        iconButtonType: 'primary'
       },
       secondary: {
         text: 'text-primary',
         background: 'fw-tag--secondary-bg',
-        iconType: 'tertiary'
+        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-alert',
-        iconType: 'error'
+        background: 'bg-brand-warning-bg',
+        iconButtonType: 'error'
       },
       success: {
-        text: 'text-white',
-        background: 'bg-success',
-        iconType: 'success'
+        text: 'text-secondary',
+        background: 'bg-brand-success-new',
+        iconButtonType: 'success'
       },
       error: {
         text: 'text-white',
-        background: 'bg-error',
-        iconType: 'error'
+        background: 'bg-brand-error-text',
+        iconButtonType: 'error'
       }
     });
     var sizes = ref({
       xs: 'px-2 py-px text-xs',
       sm: 'px-4 py-1 text-xs',
-      md: 'px-3 py-[4.75px] text-xs'
+      md: 'px-4 py-3 h-6 text-sm'
     });
     var iconSizes = ref({
       xs: 'w-4 h-4',
@@ -97,7 +107,7 @@ var __default__ = defineComponent({
       return tagClasses.value[props.variant].background;
     });
     var iconButtonType = computed(function () {
-      return tagClasses.value[props.variant].iconType;
+      return tagClasses.value[props.variant].iconButtonType;
     });
     var sizeClass = computed(function () {
       return sizes.value[props.size];
@@ -119,7 +129,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "8d62bc46": _ctx.primaryFade5
+      "819938ae": _ctx.primaryFade5
     };
   });
 };
@@ -133,7 +143,7 @@ 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]])
+    "class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.dismissable ? 'shadow font-semibold' : 'font-normal']])
   }, [_ctx.label ? (openBlock(), createElementBlock(Fragment, {
     key: 0
   }, [createTextVNode(toDisplayString(_ctx.label), 1)], 64)) : _ctx.$slots["default"] ? renderSlot(_ctx.$slots, "default", {
@@ -141,24 +151,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }) : createCommentVNode("", true), _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: "",
     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"
+        name: "xmark",
+        "class": "w-3 h-3 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;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--8d62bc46)}";
-var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--8d62bc46)}";
+var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--819938ae)}";
+var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--819938ae)}";
 styleInject(css_248z);
 
 __default__.render = render;

package/esm/fw-tag.js

@@ -1,9 +1,7 @@
-export { _ as FwTag } from './fw-tag-V0jMl-It.js';
+export { _ as FwTag } from './fw-tag-FWH6KttB.js';
 import 'vue';
 import './fw-button.js';
-import './fw-button-DNozvo7B.js';
-import './fw-loading-spinner-BFpFFRJm.js';
-import './index-CzZMBMV_.js';
-import './check--YD4Ts6g.js';
+import './fw-button-CnQvA7oM.js';
+import './index-BsEH8YYr.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './get-root-colours-DYEoJPEb.js';
+import './get-root-colours-DCjlYelc.js';