@frollo/frollo-web-ui 0.2.4 → 0.3.2

package/frollo-web-ui.esm.js

@@ -4833,7 +4833,7 @@ $$3({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 addToUnscopables$1('includes');
 
-var script$8 = defineComponent({
+var script$9 = defineComponent({
   name: 'FwInput',
   emits: ['update:modelValue'],
   components: {
@@ -4956,13 +4956,13 @@ if (DESCRIPTORS$1 && !FUNCTION_NAME_EXISTS) {
   });
 }
 
-var _hoisted_1$9 = {
+var _hoisted_1$a = {
   "class": "fw-input w-full"
 };
-var _hoisted_2$8 = {
+var _hoisted_2$9 = {
   "class": "flex flex-col"
 };
-var _hoisted_3$7 = {
+var _hoisted_3$8 = {
   "class": "flex flex-row justify-between"
 };
 var _hoisted_4$7 = ["for"];
@@ -5004,10 +5004,10 @@ var _hoisted_13 = {
 var _hoisted_14 = {
   key: 1
 };
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
 
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [createVNode(_component_InputField, {
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.inputValue = $event;
@@ -5020,7 +5020,7 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [createElementVNode("div", _hoisted_2$8, [createElementVNode("div", _hoisted_3$7, [_ctx.label ? (openBlock(), createElementBlock("label", {
+      return [createElementVNode("div", _hoisted_2$9, [createElementVNode("div", _hoisted_3$8, [_ctx.label ? (openBlock(), createElementBlock("label", {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2"
@@ -5085,13 +5085,13 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$6 = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
-var stylesheet$6 = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
-styleInject(css_248z$6);
+var css_248z$7 = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+var stylesheet$7 = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animation:fwFadeIn .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active{animation:fwFadeIn .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn{0%{opacity:0}to{opacity:1}}";
+styleInject(css_248z$7);
 
-script$8.render = render$a;
+script$9.render = render$c;
 
-var script$7 = defineComponent({
+var script$8 = defineComponent({
   name: 'FwCheckbox',
   components: {
     InputField: Field
@@ -5132,13 +5132,13 @@ var _withScopeId$3 = function _withScopeId(n) {
   return pushScopeId("data-v-7423717e"), n = n(), popScopeId(), n;
 };
 
-var _hoisted_1$8 = {
+var _hoisted_1$9 = {
   "class": "fw-checkbox w-full"
 };
-var _hoisted_2$7 = {
+var _hoisted_2$8 = {
   "class": "flex flex-col"
 };
-var _hoisted_3$6 = ["for"];
+var _hoisted_3$7 = ["for"];
 var _hoisted_4$6 = ["value", "name"];
 var _hoisted_5$3 = ["innerHTML"];
 var _hoisted_6$2 = {
@@ -5151,10 +5151,10 @@ var _hoisted_7$2 = {
 var _hoisted_8$2 = {
   key: 1
 };
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
 
-  return openBlock(), createElementBlock("div", _hoisted_1$8, [createVNode(_component_InputField, {
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [createVNode(_component_InputField, {
     name: _ctx.name,
     value: _ctx.name,
     type: "checkbox",
@@ -5165,7 +5165,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [createElementVNode("div", _hoisted_2$7, [_ctx.label ? (openBlock(), createElementBlock("label", {
+      return [createElementVNode("div", _hoisted_2$8, [_ctx.label ? (openBlock(), createElementBlock("label", {
         key: 0,
         "for": _ctx.name,
         "class": "inline-flex items-center mb-3"
@@ -5177,7 +5177,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
       }), null, 16, _hoisted_4$6), createElementVNode("span", {
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_5$3)], 8, _hoisted_3$6)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$2, [createVNode(Transition, {
+      }, null, 8, _hoisted_5$3)], 8, _hoisted_3$7)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$2, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -5191,14 +5191,14 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["name", "value", "rules"])]);
 }
 
-var css_248z$5 = ".fwFadeIn-enter-active[data-v-7423717e]{-webkit-animation:fwFadeIn-7423717e .35s;animation:fwFadeIn-7423717e .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-7423717e]{animation:fwFadeIn-7423717e .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-7423717e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;display:inline-block;flex-shrink:0;-webkit-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-7423717e]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
-var stylesheet$5 = ".fwFadeIn-enter-active[data-v-7423717e]{-webkit-animation:fwFadeIn-7423717e .35s;animation:fwFadeIn-7423717e .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-7423717e]{animation:fwFadeIn-7423717e .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-7423717e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;display:inline-block;flex-shrink:0;-webkit-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-7423717e]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
-styleInject(css_248z$5);
+var css_248z$6 = ".fwFadeIn-enter-active[data-v-7423717e]{-webkit-animation:fwFadeIn-7423717e .35s;animation:fwFadeIn-7423717e .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-7423717e]{animation:fwFadeIn-7423717e .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-7423717e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;display:inline-block;flex-shrink:0;-webkit-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-7423717e]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
+var stylesheet$6 = ".fwFadeIn-enter-active[data-v-7423717e]{-webkit-animation:fwFadeIn-7423717e .35s;animation:fwFadeIn-7423717e .35s;-webkit-transition:opacity .35s ease-in;-o-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-7423717e]{animation:fwFadeIn-7423717e .35s reverse;-webkit-transition:opacity .35s ease-out;-o-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-7423717e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-7423717e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;display:inline-block;flex-shrink:0;-webkit-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-7423717e]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
+styleInject(css_248z$6);
 
-script$7.render = render$9;
-script$7.__scopeId = "data-v-7423717e";
+script$8.render = render$b;
+script$8.__scopeId = "data-v-7423717e";
 
-var script$6 = defineComponent({
+var script$7 = defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -5242,22 +5242,22 @@ var script$6 = defineComponent({
   }
 });
 
-var _hoisted_1$7 = {
+var _hoisted_1$8 = {
   key: 0,
   "class": "fw-card--header px-8 py-4 bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_2$6 = {
+var _hoisted_2$7 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_3$5 = {
+var _hoisted_3$6 = {
   key: 1
 };
 var _hoisted_4$5 = {
   key: 1,
   "class": "p-8"
 };
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.componentName), {
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
@@ -5265,15 +5265,15 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     "class": normalizeClass(["fw-card shadow-card rounded-lg", _ctx.to || _ctx.href || !!_ctx.$attrs.onClick ? _ctx.linkClass : ''])
   }, {
     "default": withCtx(function () {
-      return [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_1$7, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2$6, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3$5, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_4$5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)];
+      return [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_1$8, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2$7, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3$6, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_4$5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)];
     }),
     _: 3
   }, 8, ["to", "href", "tabindex", "class"]);
 }
 
-script$6.render = render$8;
+script$7.render = render$a;
 
-var script$5 = defineComponent({
+var script$6 = defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -5448,7 +5448,7 @@ var script$5 = defineComponent({
   }
 });
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
     "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 rounded-none font-normal' : 'font-bold rounded-full']]),
     type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
@@ -5468,17 +5468,17 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   }, 40, ["class", "type", "to", "href", "tabindex", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
 }
 
-var css_248z$4 = ".fw-button{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
-var stylesheet$4 = ".fw-button{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
-styleInject(css_248z$4);
+var css_248z$5 = ".fw-button{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+var stylesheet$5 = ".fw-button{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+styleInject(css_248z$5);
 
-script$5.render = render$7;
+script$6.render = render$9;
 
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: 'FwNavigationMenu',
   emits: ['action'],
   components: {
-    FwButton: script$5
+    FwButton: script$6
   },
   props: {
     /**
@@ -5519,13 +5519,13 @@ var script$4 = defineComponent({
   }
 });
 
-var _hoisted_1$6 = {
+var _hoisted_1$7 = {
   "class": "fw-nav-menu relative z-50 h-20 shadow-md"
 };
-var _hoisted_2$5 = {
+var _hoisted_2$6 = {
   "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between max-w-6xl mx-auto"
 };
-var _hoisted_3$4 = {
+var _hoisted_3$5 = {
   key: 0,
   "class": "flex-shrink-0 flex items-center"
 };
@@ -5560,12 +5560,12 @@ var _hoisted_10$1 = ["d"];
 var _hoisted_11$1 = {
   "class": "w-full flex flex-col"
 };
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   var _ctx$menuItems;
 
   var _component_FwButton = resolveComponent("FwButton");
 
-  return openBlock(), createElementBlock("nav", _hoisted_1$6, [createElementVNode("div", _hoisted_2$5, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$4, [createElementVNode("div", _hoisted_5$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+  return openBlock(), createElementBlock("nav", _hoisted_1$7, [createElementVNode("div", _hoisted_2$6, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$5, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$4, [createElementVNode("div", _hoisted_5$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
     return openBlock(), createBlock(_component_FwButton, {
       key: i,
       variant: "text",
@@ -5639,11 +5639,11 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   })]);
 }
 
-var css_248z$3 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
-var stylesheet$3 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
-styleInject(css_248z$3);
+var css_248z$4 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet$4 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z$4);
 
-script$4.render = render$6;
+script$5.render = render$8;
 
 var es_number_constructor = {};
 
@@ -5845,7 +5845,7 @@ if (isForced(NUMBER, !NativeNumber(' 0o1') || !NativeNumber('0b1') || NativeNumb
   defineBuiltIn(global$4, NUMBER, NumberWrapper, { constructor: true });
 }
 
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'FwTabs',
   emits: ['update:modelValue'],
   props: {
@@ -5880,16 +5880,16 @@ var script$3 = defineComponent({
   }
 });
 
-var _hoisted_1$5 = {
+var _hoisted_1$6 = {
   "class": "fw-tabs"
 };
-var _hoisted_2$4 = {
+var _hoisted_2$5 = {
   key: 0,
   "class": "flex flex-wrap -mb-px border-b border-grey-light dark:text-grey-base dark:border-grey-base"
 };
-var _hoisted_3$3 = ["onClick"];
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$5, [_ctx.tabs ? (openBlock(), createElementBlock("ul", _hoisted_2$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, function (tab, i) {
+var _hoisted_3$4 = ["onClick"];
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$6, [_ctx.tabs ? (openBlock(), createElementBlock("ul", _hoisted_2$5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, function (tab, i) {
     return openBlock(), createElementBlock("li", {
       "class": "mr-2",
       key: i
@@ -5899,11 +5899,11 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         return _ctx.selectTab(i);
       },
       "class": normalizeClass(["inline-block p-4 outline-primary border-b-2 border-transparent transition ease-in", _ctx.active === i ? 'font-medium border-black' : 'hover:bg-grey-lightest'])
-    }, toDisplayString(tab.props.label), 11, _hoisted_3$3)]);
+    }, toDisplayString(tab.props.label), 11, _hoisted_3$4)]);
   }), 128))])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]);
 }
 
-script$3.render = render$5;
+script$4.render = render$7;
 
 var es_array_findIndex = {};
 
@@ -5929,7 +5929,7 @@ $$2({ target: 'Array', proto: true, forced: SKIPS_HOLES }, {
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 addToUnscopables(FIND_INDEX);
 
-var script$2 = defineComponent({
+var script$3 = defineComponent({
   name: 'FwTab',
   props: {
     /**
@@ -5973,15 +5973,15 @@ var script$2 = defineComponent({
   }
 });
 
-var _hoisted_1$4 = {
+var _hoisted_1$5 = {
   key: 0,
   "class": "fw-tab w-full"
 };
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.isActive ? (openBlock(), createElementBlock("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true);
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.isActive ? (openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true);
 }
 
-script$2.render = render$4;
+script$3.render = render$6;
 
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -6261,10 +6261,10 @@ function uniqueId(prefix) {
   return toString(prefix) + id;
 }
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   name: 'FwModal',
   components: {
-    FwButton: script$5
+    FwButton: script$6
   },
   emits: ['cancel', 'confirm'],
   props: {
@@ -6356,13 +6356,13 @@ var _withScopeId$2 = function _withScopeId(n) {
   return pushScopeId("data-v-003a6fba"), n = n(), popScopeId(), n;
 };
 
-var _hoisted_1$3 = {
+var _hoisted_1$4 = {
   "class": "fw-modal"
 };
-var _hoisted_2$3 = {
+var _hoisted_2$4 = {
   "class": "fw-modal--mask fixed z-[9999] top-0 left-0 w-full h-full bg-black bg-opacity-50"
 };
-var _hoisted_3$2 = {
+var _hoisted_3$3 = {
   "class": "fw-modal--wrapper text-center overflow-auto flex justify-center items-center h-full"
 };
 var _hoisted_4$3 = ["role", "aria-labelledby", "aria-describedby"];
@@ -6383,7 +6383,7 @@ var _hoisted_11 = {
   key: 3,
   "class": "modal-footer flex space-x-4 pt-4 justify-center"
 };
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwButton = resolveComponent("FwButton");
 
   return openBlock(), createBlock(Transition, {
@@ -6391,7 +6391,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     appear: ""
   }, {
     "default": withCtx(function () {
-      return [createElementVNode("div", _hoisted_1$3, [createElementVNode("div", _hoisted_2$3, [createElementVNode("div", _hoisted_3$2, [createElementVNode("div", {
+      return [createElementVNode("div", _hoisted_1$4, [createElementVNode("div", _hoisted_2$4, [createElementVNode("div", _hoisted_3$3, [createElementVNode("div", {
         role: _ctx.role,
         "aria-modal": "true",
         "class": "fw-modal--container p-12 m-8 inline-block w-full max-w-[540px] bg-white rounded-2xl shadow",
@@ -6445,19 +6445,31 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   });
 }
 
-var css_248z$2 = ".modalFadeIn-enter-active[data-v-003a6fba]{-webkit-animation:modalFadeIn-003a6fba .4s;animation:modalFadeIn-003a6fba .4s;-webkit-transition:opacity .4s ease-in;-o-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active[data-v-003a6fba]{animation:modalFadeIn-003a6fba .4s reverse;-webkit-transition:opacity .4s ease-out;-o-transition:opacity .4s ease-out;transition:opacity .4s ease-out}@-webkit-keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}";
-var stylesheet$2 = ".modalFadeIn-enter-active[data-v-003a6fba]{-webkit-animation:modalFadeIn-003a6fba .4s;animation:modalFadeIn-003a6fba .4s;-webkit-transition:opacity .4s ease-in;-o-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active[data-v-003a6fba]{animation:modalFadeIn-003a6fba .4s reverse;-webkit-transition:opacity .4s ease-out;-o-transition:opacity .4s ease-out;transition:opacity .4s ease-out}@-webkit-keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}";
-styleInject(css_248z$2);
+var css_248z$3 = ".modalFadeIn-enter-active[data-v-003a6fba]{-webkit-animation:modalFadeIn-003a6fba .4s;animation:modalFadeIn-003a6fba .4s;-webkit-transition:opacity .4s ease-in;-o-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active[data-v-003a6fba]{animation:modalFadeIn-003a6fba .4s reverse;-webkit-transition:opacity .4s ease-out;-o-transition:opacity .4s ease-out;transition:opacity .4s ease-out}@-webkit-keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}";
+var stylesheet$3 = ".modalFadeIn-enter-active[data-v-003a6fba]{-webkit-animation:modalFadeIn-003a6fba .4s;animation:modalFadeIn-003a6fba .4s;-webkit-transition:opacity .4s ease-in;-o-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active[data-v-003a6fba]{animation:modalFadeIn-003a6fba .4s reverse;-webkit-transition:opacity .4s ease-out;-o-transition:opacity .4s ease-out;transition:opacity .4s ease-out}@-webkit-keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn-003a6fba{0%{opacity:0}to{opacity:1}}";
+styleInject(css_248z$3);
 
-script$1.render = render$3;
-script$1.__scopeId = "data-v-003a6fba";
+script$2.render = render$5;
+script$2.__scopeId = "data-v-003a6fba";
+
+const _hoisted_1$3 = {
+  viewBox: "0 0 17 12",
+  fill: "currentColor",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$3 = /*#__PURE__*/createElementVNode("path", { d: "M15.847.621c.359.33.359.865 0 1.164l-9.281 9.281c-.299.359-.833.359-1.164 0L.622 6.285c-.33-.3-.33-.833 0-1.164a.848.848 0 011.193 0L6 9.308 14.684.621c.33-.328.864-.328 1.163 0z" }, null, -1);
+const _hoisted_3$2 = [
+  _hoisted_2$3
+];
 
-var CheckSvg = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2017%2012%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cpath%20d%3D%22M15.8473%200.621086C16.2059%200.951555%2016.2059%201.48593%2015.8473%201.78476L6.56602%2011.066C6.26719%2011.4246%205.73281%2011.4246%205.40234%2011.066L0.622113%206.28476C0.292629%205.98593%200.292629%205.45156%200.622113%205.12109C0.951563%204.79413%201.48594%204.79413%201.81535%205.12109L6%209.3082L14.6836%200.621086C15.0141%200.292727%2015.5484%200.292727%2015.8473%200.621086Z%22%20%2F%3E%3C%2Fsvg%3E";
+function render$4(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$2))
+}
 
-var script = defineComponent({
+var script$1 = defineComponent({
   name: 'FwProgressBar',
   components: {
-    CheckSvg: CheckSvg
+    CheckSvg: render$4
   },
   props: {
     /**
@@ -6519,9 +6531,9 @@ var _hoisted_4$2 = {
   "class": "w-full flex items-start mt-[13px] mx-[-15px]"
 };
 var _hoisted_5 = {
-  "class": "w-full bg-grey-light rounded flex-1"
+  "class": "w-full bg-grey-40 rounded flex-1"
 };
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckSvg = resolveComponent("CheckSvg");
 
   return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.steps, function (step) {
@@ -6531,14 +6543,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createElementVNode("div", {
       "class": normalizeClass(["text-center", step.position !== _ctx.steps.length ? 'min-w-[70px] w-[70px] md:min-w-[96px] md:w-[96px]' : 'w-full'])
     }, [createElementVNode("div", {
-      "class": normalizeClass(["w-[30px] h-[30px] mx-auto mb-2 flex items-center justify-center text-center rounded-full", step.position <= _ctx.activeStep ? 'bg-primary text-tertiary' : 'bg-grey-light text-grey-base'])
+      "class": normalizeClass(["w-[30px] h-[30px] mx-auto mb-2 flex items-center justify-center text-center rounded-full", step.position <= _ctx.activeStep ? 'bg-primary text-tertiary' : 'bg-grey-40 text-body'])
     }, [step.position < _ctx.activeStep ? (openBlock(), createBlock(_component_CheckSvg, {
       key: 0,
       "class": "w-[18px]"
-    })) : (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(step.position), 1))], 2), createElementVNode("span", {
-      "class": normalizeClass(["text-sm md:text-base", {
+    })) : (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(step.position), 1))], 2), createElementVNode("div", {
+      "class": normalizeClass(["m-0 md:leading-tight text-sm md:text-base", {
         'font-bold': step.position === _ctx.activeStep,
-        'text-grey-base': step.position > _ctx.activeStep
+        'text-body': step.position > _ctx.activeStep
       }])
     }, toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_4$2, [createElementVNode("div", _hoisted_5, [createElementVNode("div", {
       "class": "bg-primary text-xs leading-none py-0.5 text-center rounded transition-all",
@@ -6547,6 +6559,87 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }), 128))])]);
 }
 
+script$1.render = render$3;
+
+var script = defineComponent({
+  name: 'FwTag',
+  props: {
+    /**
+     * The size of the tag. Accepts: 'xs' & 'sm'
+     */
+    size: {
+      type: String,
+      "default": 'xs',
+      validator: function validator(value) {
+        return ['xs', 'sm'].includes(value);
+      }
+    },
+
+    /**
+     * The colour variant of the tag.
+     * Accepts 'primary', 'alert', 'error', 'success'
+     */
+    variant: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'alert', 'error', 'success'].includes(value);
+      }
+    }
+  },
+  setup: function setup(props) {
+    var baseClass = ref( // eslint-disable-next-line max-len
+    "inline-block font-medium text-center whitespace-nowrap rounded-full");
+    var tagClasses = ref({
+      primary: {
+        text: 'text-tertiary',
+        background: 'bg-primary'
+      },
+      alert: {
+        text: 'text-white',
+        background: 'bg-alert'
+      },
+      success: {
+        text: 'text-white',
+        background: 'bg-success'
+      },
+      error: {
+        text: 'text-white',
+        background: 'bg-error'
+      }
+    });
+    var sizes = ref({
+      xs: 'px-2 py-px text-xs',
+      sm: 'px-4 py-1 text-xs'
+    });
+    var textColorClass = computed(function () {
+      return tagClasses.value[props.variant].text;
+    });
+    var bgColorClass = computed(function () {
+      return tagClasses.value[props.variant].background;
+    });
+    var sizeClass = computed(function () {
+      return sizes.value[props.size];
+    });
+    return {
+      baseClass: baseClass,
+      textColorClass: textColorClass,
+      bgColorClass: bgColorClass,
+      sizeClass: sizeClass
+    };
+  }
+});
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", {
+    "class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass]])
+  }, [renderSlot(_ctx.$slots, "default")], 2);
+}
+
+var css_248z$2 = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+var stylesheet$2 = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+styleInject(css_248z$2);
+
 script.render = render$2;
 
 var __default__$1 = defineComponent({
@@ -6683,15 +6776,16 @@ __default__.__scopeId = "data-v-c32112d4";
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   FwForm: Form,
-  FwInput: script$8,
-  FwCheckbox: script$7,
-  FwCard: script$6,
-  FwButton: script$5,
-  FwNavigationMenu: script$4,
-  FwTabs: script$3,
-  FwTab: script$2,
-  FwModal: script$1,
-  FwProgressBar: script,
+  FwInput: script$9,
+  FwCheckbox: script$8,
+  FwCard: script$7,
+  FwButton: script$6,
+  FwNavigationMenu: script$5,
+  FwTabs: script$4,
+  FwTab: script$3,
+  FwModal: script$2,
+  FwProgressBar: script$1,
+  FwTag: script,
   FwEmailPulse: __default__$1,
   FwSuccessPulse: __default__
 });
@@ -6826,7 +6920,7 @@ var modalService = function modalService(options, element) {
   var open = function open() {
     var _modalVNode;
 
-    modalVNode = createApp(script$1, _objectSpread2({}, options));
+    modalVNode = createApp(script$2, _objectSpread2({}, options));
     elAppend === null || elAppend === void 0 ? void 0 : elAppend.appendChild(elementToMount);
     (_modalVNode = modalVNode) === null || _modalVNode === void 0 ? void 0 : _modalVNode.mount(elementToMount);
   };
@@ -6862,4 +6956,4 @@ var install = function install(app) {
   });
 };
 
-export { script$5 as FwButton, script$6 as FwCard, script$7 as FwCheckbox, __default__$1 as FwEmailPulse, Form as FwForm, script$8 as FwInput, script$1 as FwModal, script$4 as FwNavigationMenu, script as FwProgressBar, __default__ as FwSuccessPulse, script$2 as FwTab, script$3 as FwTabs, install as default, modalService };
+export { script$6 as FwButton, script$7 as FwCard, script$8 as FwCheckbox, __default__$1 as FwEmailPulse, Form as FwForm, script$9 as FwInput, script$2 as FwModal, script$5 as FwNavigationMenu, script$1 as FwProgressBar, __default__ as FwSuccessPulse, script$3 as FwTab, script$4 as FwTabs, script as FwTag, install as default, modalService };

package/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 56 56" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.9657 16.6572C4.30925 16.2853 4.77934 16.0009 5.25075 16.0009C5.67633 16.0009 6.10179 16.1547 6.43856 16.4658L27.9964 36.2736L49.5542 16.4658C50.2651 15.8095 51.3742 15.8505 52.0271 16.5649C52.6834 17.2758 52.639 18.3794 51.9297 19.0357L29.1797 40.0357C28.5064 40.6578 27.4779 40.6578 26.8041 40.0357L4.05412 19.0357C3.35386 18.4728 3.30945 17.3681 3.9657 16.6572Z" />
+</svg>

package/icons/index.ts

@@ -14,6 +14,7 @@ import FileExclamationSvg from './file-exclamation.svg';
 import HourglassClockSvg from './hourglass-clock.svg';
 import EnvelopeSvg from './envelope.svg';
 import CheckSvg from './check.svg';
+import ChevronDownSvg from './chevron-down.svg';
 
 export {
   ViewSvg,
@@ -31,5 +32,6 @@ export {
   FileExclamationSvg,
   HourglassClockSvg,
   EnvelopeSvg,
-  CheckSvg
+  CheckSvg,
+  ChevronDownSvg
 };