@frollo/frollo-web-ui 0.2.2 → 0.2.3

package/cjs/index.js

@@ -4603,7 +4603,7 @@ $$3({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
 });
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables$1('includes');var script$7 = vue.defineComponent({
+addToUnscopables$1('includes');var script$8 = vue.defineComponent({
   name: 'FwInput',
   emits: ['update:modelValue'],
   components: {
@@ -4720,20 +4720,20 @@ if (DESCRIPTORS$1 && !FUNCTION_NAME_EXISTS) {
       }
     }
   });
-}var _hoisted_1$8 = {
+}var _hoisted_1$9 = {
   "class": "fw-input w-full"
 };
-var _hoisted_2$7 = {
+var _hoisted_2$8 = {
   "class": "flex flex-col"
 };
-var _hoisted_3$6 = {
+var _hoisted_3$7 = {
   "class": "flex flex-row justify-between"
 };
-var _hoisted_4$6 = ["for"];
-var _hoisted_5$3 = {
+var _hoisted_4$7 = ["for"];
+var _hoisted_5$4 = {
   key: 1
 };
-var _hoisted_6$3 = {
+var _hoisted_6$4 = {
   "class": "relative"
 };
 var _hoisted_7$3 = {
@@ -4768,10 +4768,10 @@ var _hoisted_13 = {
 var _hoisted_14 = {
   key: 1
 };
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = vue.resolveComponent("InputField");
 
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [vue.createVNode(_component_InputField, {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [vue.createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.inputValue = $event;
@@ -4784,11 +4784,11 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [vue.createElementVNode("div", _hoisted_2$7, [vue.createElementVNode("div", _hoisted_3$6, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
+      return [vue.createElementVNode("div", _hoisted_2$8, [vue.createElementVNode("div", _hoisted_3$7, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2"
-      }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$6)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6$3, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
+      }, vue.toDisplayString(_ctx.label), 9, _hoisted_4$7)) : vue.createCommentVNode("", true), _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [vue.renderSlot(_ctx.$slots, "action")])) : vue.createCommentVNode("", true)]), vue.createElementVNode("div", _hoisted_6$4, [_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [vue.renderSlot(_ctx.$slots, "prefix")])) : vue.createCommentVNode("", true), vue.createElementVNode("input", vue.mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
@@ -4847,7 +4847,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   }
 }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);script$7.render = render$9;var script$6 = vue.defineComponent({
+styleInject(css_248z$6);script$8.render = render$a;var script$7 = vue.defineComponent({
   name: 'FwCheckbox',
   components: {
     InputField: Field
@@ -4886,16 +4886,16 @@ styleInject(css_248z$6);script$7.render = render$9;var script$6 = vue.defineComp
   return vue.pushScopeId("data-v-7423717e"), n = n(), vue.popScopeId(), n;
 };
 
-var _hoisted_1$7 = {
+var _hoisted_1$8 = {
   "class": "fw-checkbox w-full"
 };
-var _hoisted_2$6 = {
+var _hoisted_2$7 = {
   "class": "flex flex-col"
 };
-var _hoisted_3$5 = ["for"];
-var _hoisted_4$5 = ["value", "name"];
-var _hoisted_5$2 = ["innerHTML"];
-var _hoisted_6$2 = {
+var _hoisted_3$6 = ["for"];
+var _hoisted_4$6 = ["value", "name"];
+var _hoisted_5$3 = ["innerHTML"];
+var _hoisted_6$3 = {
   "class": "italic text-sm font-medium min-h-[21px]"
 };
 var _hoisted_7$2 = {
@@ -4905,10 +4905,10 @@ var _hoisted_7$2 = {
 var _hoisted_8$2 = {
   key: 1
 };
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = vue.resolveComponent("InputField");
 
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [vue.createVNode(_component_InputField, {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [vue.createVNode(_component_InputField, {
     name: _ctx.name,
     value: _ctx.name,
     type: "checkbox",
@@ -4919,7 +4919,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [vue.createElementVNode("div", _hoisted_2$6, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
+      return [vue.createElementVNode("div", _hoisted_2$7, [_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
         key: 0,
         "for": _ctx.name,
         "class": "inline-flex items-center mb-3"
@@ -4928,10 +4928,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
         name: _ctx.name,
         type: "checkbox",
         "class": "text-primary w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
-      }), null, 16, _hoisted_4$5), vue.createElementVNode("span", {
+      }), null, 16, _hoisted_4$6), vue.createElementVNode("span", {
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_5$2)], 8, _hoisted_3$5)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_6$2, [vue.createVNode(vue.Transition, {
+      }, null, 8, _hoisted_5$3)], 8, _hoisted_3$6)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_6$3, [vue.createVNode(vue.Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -4945,8 +4945,8 @@ function render$8(_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);script$6.render = render$8;
-script$6.__scopeId = "data-v-7423717e";var script$5 = vue.defineComponent({
+styleInject(css_248z$5);script$7.render = render$9;
+script$7.__scopeId = "data-v-7423717e";var script$6 = vue.defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -4988,22 +4988,22 @@ script$6.__scopeId = "data-v-7423717e";var script$5 = vue.defineComponent({
       linkClass: linkClass
     };
   }
-});var _hoisted_1$6 = {
+});var _hoisted_1$7 = {
   key: 0,
   "class": "fw-card--header px-8 py-4 bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_2$5 = {
+var _hoisted_2$6 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_3$4 = {
+var _hoisted_3$5 = {
   key: 1
 };
-var _hoisted_4$4 = {
+var _hoisted_4$5 = {
   key: 1,
   "class": "p-8"
 };
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.componentName), {
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
@@ -5011,11 +5011,11 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     "class": vue.normalizeClass(["fw-card shadow-card rounded-lg", _ctx.to || _ctx.href || !!_ctx.$attrs.onClick ? _ctx.linkClass : ''])
   }, {
     "default": vue.withCtx(function () {
-      return [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_1$6, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$5, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$4, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)];
+      return [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_1$7, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$6, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$5, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)];
     }),
     _: 3
   }, 8, ["to", "href", "tabindex", "class"]);
-}script$5.render = render$7;var script$4 = vue.defineComponent({
+}script$6.render = render$8;var script$5 = vue.defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -5188,7 +5188,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       tagName: tagName
     };
   }
-});function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+});function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
     "class": vue.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,
@@ -5208,11 +5208,11 @@ 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);script$4.render = render$6;var script$3 = vue.defineComponent({
+styleInject(css_248z$4);script$5.render = render$7;var script$4 = vue.defineComponent({
   name: 'FwNavigationMenu',
   emits: ['action'],
   components: {
-    FwButton: script$4
+    FwButton: script$5
   },
   props: {
     /**
@@ -5251,24 +5251,24 @@ styleInject(css_248z$4);script$4.render = render$6;var script$3 = vue.defineComp
       actionClicked: actionClicked
     };
   }
-});var _hoisted_1$5 = {
+});var _hoisted_1$6 = {
   "class": "fw-nav-menu relative z-50 h-20 shadow-md"
 };
-var _hoisted_2$4 = {
+var _hoisted_2$5 = {
   "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between max-w-6xl mx-auto"
 };
-var _hoisted_3$3 = {
+var _hoisted_3$4 = {
   key: 0,
   "class": "flex-shrink-0 flex items-center"
 };
-var _hoisted_4$3 = {
+var _hoisted_4$4 = {
   key: 1,
   "class": "container hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_5$1 = {
+var _hoisted_5$2 = {
   "class": "flex space-x-2"
 };
-var _hoisted_6$1 = {
+var _hoisted_6$2 = {
   key: 2,
   "class": "hidden sm:flex items-center justify-start sm:ml-6"
 };
@@ -5292,12 +5292,12 @@ var _hoisted_10$1 = ["d"];
 var _hoisted_11$1 = {
   "class": "w-full flex flex-col"
 };
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   var _ctx$menuItems;
 
   var _component_FwButton = vue.resolveComponent("FwButton");
 
-  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$5, [vue.createElementVNode("div", _hoisted_2$4, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [vue.createElementVNode("div", _hoisted_5$1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$6, [vue.createElementVNode("div", _hoisted_2$5, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [vue.createElementVNode("div", _hoisted_5$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
     return vue.openBlock(), vue.createBlock(_component_FwButton, {
       key: i,
       variant: "text",
@@ -5311,7 +5311,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.createVNode(_component_FwButton, {
+  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [vue.createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -5371,7 +5371,7 @@ function render$5(_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);script$3.render = render$5;var es_number_constructor = {};var isCallable$2 = isCallable$g;
+styleInject(css_248z$3);script$4.render = render$6;var es_number_constructor = {};var isCallable$2 = isCallable$g;
 
 var $String$1 = String;
 var $TypeError$1 = TypeError;
@@ -5553,7 +5553,7 @@ if (isForced(NUMBER, !NativeNumber(' 0o1') || !NativeNumber('0b1') || NativeNumb
   NumberWrapper.prototype = NumberPrototype;
   NumberPrototype.constructor = NumberWrapper;
   defineBuiltIn(global$4, NUMBER, NumberWrapper, { constructor: true });
-}var script$2 = vue.defineComponent({
+}var script$3 = vue.defineComponent({
   name: 'FwTabs',
   emits: ['update:modelValue'],
   props: {
@@ -5586,16 +5586,16 @@ if (isForced(NUMBER, !NativeNumber(' 0o1') || !NativeNumber('0b1') || NativeNumb
       selectTab: selectTab
     };
   }
-});var _hoisted_1$4 = {
+});var _hoisted_1$5 = {
   "class": "fw-tabs"
 };
-var _hoisted_2$3 = {
+var _hoisted_2$4 = {
   key: 0,
   "class": "flex flex-wrap -mb-px border-b border-grey-light dark:text-grey-base dark:border-grey-base"
 };
-var _hoisted_3$2 = ["onClick"];
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [_ctx.tabs ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2$3, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, function (tab, i) {
+var _hoisted_3$3 = ["onClick"];
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [_ctx.tabs ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2$4, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabs, function (tab, i) {
     return vue.openBlock(), vue.createElementBlock("li", {
       "class": "mr-2",
       key: i
@@ -5605,9 +5605,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         return _ctx.selectTab(i);
       },
       "class": vue.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'])
-    }, vue.toDisplayString(tab.props.label), 11, _hoisted_3$2)]);
+    }, vue.toDisplayString(tab.props.label), 11, _hoisted_3$3)]);
   }), 128))])) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default")]);
-}script$2.render = render$4;var es_array_findIndex = {};'use strict';
+}script$3.render = render$5;var es_array_findIndex = {};'use strict';
 var $$2 = _export;
 var $findIndex = arrayIteration.findIndex;
 var addToUnscopables = addToUnscopables$2;
@@ -5627,7 +5627,7 @@ $$2({ target: 'Array', proto: true, forced: SKIPS_HOLES }, {
 });
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables(FIND_INDEX);var script$1 = vue.defineComponent({
+addToUnscopables(FIND_INDEX);var script$2 = vue.defineComponent({
   name: 'FwTab',
   props: {
     /**
@@ -5669,13 +5669,13 @@ addToUnscopables(FIND_INDEX);var script$1 = vue.defineComponent({
       props: props
     };
   }
-});var _hoisted_1$3 = {
+});var _hoisted_1$4 = {
   key: 0,
   "class": "fw-tab w-full"
 };
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.isActive ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true);
-}script$1.render = render$3;/** Detect free variable `global` from Node.js. */
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.isActive ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true);
+}script$2.render = render$4;/** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;/** Detect free variable `self`. */
 var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
@@ -5927,10 +5927,10 @@ var idCounter = 0;
 function uniqueId(prefix) {
   var id = ++idCounter;
   return toString(prefix) + id;
-}var script = vue.defineComponent({
+}var script$1 = vue.defineComponent({
   name: 'FwModal',
   components: {
-    FwButton: script$4
+    FwButton: script$5
   },
   emits: ['cancel', 'confirm'],
   props: {
@@ -6020,21 +6020,21 @@ function uniqueId(prefix) {
   return vue.pushScopeId("data-v-003a6fba"), n = n(), vue.popScopeId(), n;
 };
 
-var _hoisted_1$2 = {
+var _hoisted_1$3 = {
   "class": "fw-modal"
 };
-var _hoisted_2$2 = {
+var _hoisted_2$3 = {
   "class": "fw-modal--mask fixed z-[9999] top-0 left-0 w-full h-full bg-black bg-opacity-50"
 };
-var _hoisted_3$1 = {
+var _hoisted_3$2 = {
   "class": "fw-modal--wrapper text-center overflow-auto flex justify-center items-center h-full"
 };
-var _hoisted_4$2 = ["role", "aria-labelledby", "aria-describedby"];
-var _hoisted_5 = {
+var _hoisted_4$3 = ["role", "aria-labelledby", "aria-describedby"];
+var _hoisted_5$1 = {
   key: 0,
   "class": "fw-modal--header text-center"
 };
-var _hoisted_6 = {
+var _hoisted_6$1 = {
   key: 0,
   id: "modal-logo",
   "class": "flex justify-center"
@@ -6047,7 +6047,7 @@ var _hoisted_11 = {
   key: 3,
   "class": "modal-footer flex space-x-4 pt-4 justify-center"
 };
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwButton = vue.resolveComponent("FwButton");
 
   return vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -6055,13 +6055,13 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     appear: ""
   }, {
     "default": vue.withCtx(function () {
-      return [vue.createElementVNode("div", _hoisted_1$2, [vue.createElementVNode("div", _hoisted_2$2, [vue.createElementVNode("div", _hoisted_3$1, [vue.createElementVNode("div", {
+      return [vue.createElementVNode("div", _hoisted_1$3, [vue.createElementVNode("div", _hoisted_2$3, [vue.createElementVNode("div", _hoisted_3$2, [vue.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",
         "aria-labelledby": _ctx.$slots.header || _ctx.header ? "modal_".concat(_ctx.uuid, "_header") : undefined,
         "aria-describedby": _ctx.$slots.body ? "modal_".concat(_ctx.uuid, "_body") : undefined
-      }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "icon")])) : vue.createCommentVNode("", true), _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h2", {
+      }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [_ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.renderSlot(_ctx.$slots, "icon")])) : vue.createCommentVNode("", true), _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("h2", {
         key: 1,
         id: "modal_".concat(_ctx.uuid, "_header")
       }, [vue.renderSlot(_ctx.$slots, "header")], 8, _hoisted_7)) : _ctx.header ? (vue.openBlock(), vue.createElementBlock("h2", {
@@ -6103,14 +6103,92 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           return [vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)], 8, _hoisted_4$2)])])])];
+      }, 8, ["variant", "aria-label"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)], 8, _hoisted_4$3)])])])];
     }),
     _: 3
   });
 }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);script.render = render$2;
-script.__scopeId = "data-v-003a6fba";var __default__$1 = vue.defineComponent({
+styleInject(css_248z$2);script$1.render = render$3;
+script$1.__scopeId = "data-v-003a6fba";var script = vue.defineComponent({
+  name: 'FwProgressBar',
+  props: {
+    /**
+     * An array of menu progress steps.
+     * `{ label: string; position: number; subSteps: number; }`
+     */
+    steps: {
+      type: Array,
+      required: true
+    },
+
+    /**
+     * An current active step.
+     */
+    activeStep: {
+      type: Number,
+      required: true
+    },
+
+    /**
+     * An current active sub-step.
+     */
+    activeSubStep: {
+      type: Number,
+      required: true
+    }
+  },
+  setup: function setup(props) {
+    var calculatedProgressBar = function calculatedProgressBar(step) {
+      var numOfSubSteps = step.subSteps;
+      var equalPercentageWidths = 100 / numOfSubSteps;
+
+      if (props.activeStep === step.position && props.activeSubStep) {
+        var width = equalPercentageWidths * props.activeSubStep;
+        return "width: ".concat(width, "%");
+      }
+
+      return 'width: 0%;';
+    };
+
+    return {
+      calculatedProgressBar: calculatedProgressBar
+    };
+  }
+});var _hoisted_1$2 = {
+  "class": "fw-progress-bar w-full mx-auto my-4"
+};
+var _hoisted_2$2 = {
+  "class": "flex pb-3"
+};
+var _hoisted_3$1 = {
+  "class": "text-white text-center w-full"
+};
+var _hoisted_4$2 = {
+  "class": "text-sm md:text-base"
+};
+var _hoisted_5 = {
+  key: 0,
+  "class": "w-full flex items-start mt-[13px] mx-[-15px]"
+};
+var _hoisted_6 = {
+  "class": "w-full bg-grey-light rounded flex-1"
+};
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [vue.createElementVNode("div", _hoisted_2$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.steps, function (step) {
+    return vue.openBlock(), vue.createElementBlock("div", {
+      "class": vue.normalizeClass(["flex", step.position !== _ctx.steps.length ? 'flex-1' : 'w-[70px] md:w-[96px]']),
+      key: step.position
+    }, [vue.createElementVNode("div", {
+      "class": vue.normalizeClass(["text-center", step.position !== _ctx.steps.length ? 'min-w-[70px] w-[70px] md:min-w-[96px] md:w-[96px]' : 'w-full'])
+    }, [vue.createElementVNode("div", {
+      "class": vue.normalizeClass(["w-[30px] h-[30px] mx-auto mb-2 flex items-center justify-center text-center rounded-full", step.position <= _ctx.activeStep ? 'bg-primary' : 'bg-grey-light'])
+    }, [vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString(step.position), 1)], 2), vue.createElementVNode("span", _hoisted_4$2, vue.toDisplayString(step.label), 1)], 2), step.position !== _ctx.steps.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.createElementVNode("div", _hoisted_6, [vue.createElementVNode("div", {
+      "class": "bg-primary text-xs leading-none py-0.5 text-center text-grey-darkest rounded transition-all",
+      style: vue.normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
+    }, null, 4)])])) : vue.createCommentVNode("", true)], 2);
+  }), 128))])]);
+}script.render = render$2;var __default__$1 = vue.defineComponent({
   name: 'FwEmailPulse',
   props: {
     /**
@@ -6224,7 +6302,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 var stylesheet = ".fw-success-pulse[data-v-c32112d4]{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100px;position:relative;width:100px}.fw-success-pulse--checkmark__circle[data-v-c32112d4]{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--colorPrimary);fill:none;-webkit-animation:fwSuccessStroke-c32112d4 .6s cubic-bezier(.65,0,.45,1) forwards;animation:fwSuccessStroke-c32112d4 .6s cubic-bezier(.65,0,.45,1) forwards}.fw-success-pulse--checkmark[data-v-c32112d4]{stroke-width:4;stroke:#fff;stroke-miterlimit:10;-webkit-animation:fwSuccessScaleFill-c32112d4 .6s ease-in-out .4s forwards,fwSuccessScale-c32112d4 .3s ease-in-out .9s both;animation:fwSuccessScaleFill-c32112d4 .6s ease-in-out .4s forwards,fwSuccessScale-c32112d4 .3s ease-in-out .9s both;border-radius:50%;-webkit-box-shadow:inset 0 0 0 var(--colorPrimary);box-shadow:inset 0 0 0 var(--colorPrimary);display:block;height:70px;margin:10% auto;width:70px}.fw-success-pulse--checkmark__check[data-v-c32112d4]{stroke-dasharray:48;stroke-dashoffset:48;stroke-linecap:round;-webkit-animation:fwSuccessStroke-c32112d4 .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:fwSuccessStroke-c32112d4 .3s cubic-bezier(.65,0,.45,1) .8s forwards;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwSuccessStroke-c32112d4{to{stroke-dashoffset:0}}@keyframes fwSuccessStroke-c32112d4{to{stroke-dashoffset:0}}@-webkit-keyframes fwSuccessScale-c32112d4{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@keyframes fwSuccessScale-c32112d4{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fwSuccessScaleFill-c32112d4{to{-webkit-box-shadow:inset 0 0 0 70px var(--colorPrimary);box-shadow:inset 0 0 0 70px var(--colorPrimary)}}@keyframes fwSuccessScaleFill-c32112d4{to{-webkit-box-shadow:inset 0 0 0 70px var(--colorPrimary);box-shadow:inset 0 0 0 70px var(--colorPrimary)}}.fw-success-pulse--circle[data-v-c32112d4]{stroke-width:4px;stroke-opacity:1;fill:none;fill-opacity:0;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:var(--22e0894f);animation-iteration-count:var(--22e0894f);-webkit-animation-name:fwSuccessPulse-c32112d4;animation-name:fwSuccessPulse-c32112d4;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes fwSuccessPulse-c32112d4{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes fwSuccessPulse-c32112d4{0%{stroke:var(--colorPrimary);stroke-width:5px;stroke-opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{stroke:transparent;stroke-width:0;stroke-opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}";
 styleInject(css_248z);__default__.render = render;
 __default__.__scopeId = "data-v-c32112d4";// Form components
-var Components=/*#__PURE__*/Object.freeze({__proto__:null,FwForm:Form,FwInput:script$7,FwCheckbox:script$6,FwCard:script$5,FwButton:script$4,FwNavigationMenu:script$3,FwTabs:script$2,FwTab:script$1,FwModal:script,FwEmailPulse:__default__$1,FwSuccessPulse:__default__});function _defineProperty(obj, key, value) {
+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,FwEmailPulse:__default__$1,FwSuccessPulse:__default__});function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -6332,7 +6410,7 @@ $({ global: true, bind: true, forced: global$1.setTimeout !== setTimeout$1 }, {
   var open = function open() {
     var _modalVNode;
 
-    modalVNode = vue.createApp(script, _objectSpread2({}, options));
+    modalVNode = vue.createApp(script$1, _objectSpread2({}, options));
     elAppend === null || elAppend === void 0 ? void 0 : elAppend.appendChild(elementToMount);
     (_modalVNode = modalVNode) === null || _modalVNode === void 0 ? void 0 : _modalVNode.mount(elementToMount);
   };

package/esm/fw-progress-bar.js

@@ -0,0 +1,90 @@
+import './es.number.constructor-f646730f.js';
+import { defineComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, toDisplayString, normalizeStyle, createCommentVNode } from 'vue';
+import './function-name-3bda6320.js';
+import './is-forced-3323c994.js';
+
+var script = defineComponent({
+  name: 'FwProgressBar',
+  props: {
+    /**
+     * An array of menu progress steps.
+     * `{ label: string; position: number; subSteps: number; }`
+     */
+    steps: {
+      type: Array,
+      required: true
+    },
+
+    /**
+     * An current active step.
+     */
+    activeStep: {
+      type: Number,
+      required: true
+    },
+
+    /**
+     * An current active sub-step.
+     */
+    activeSubStep: {
+      type: Number,
+      required: true
+    }
+  },
+  setup: function setup(props) {
+    var calculatedProgressBar = function calculatedProgressBar(step) {
+      var numOfSubSteps = step.subSteps;
+      var equalPercentageWidths = 100 / numOfSubSteps;
+
+      if (props.activeStep === step.position && props.activeSubStep) {
+        var width = equalPercentageWidths * props.activeSubStep;
+        return "width: ".concat(width, "%");
+      }
+
+      return 'width: 0%;';
+    };
+
+    return {
+      calculatedProgressBar: calculatedProgressBar
+    };
+  }
+});
+
+var _hoisted_1 = {
+  "class": "fw-progress-bar w-full mx-auto my-4"
+};
+var _hoisted_2 = {
+  "class": "flex pb-3"
+};
+var _hoisted_3 = {
+  "class": "text-white text-center w-full"
+};
+var _hoisted_4 = {
+  "class": "text-sm md:text-base"
+};
+var _hoisted_5 = {
+  key: 0,
+  "class": "w-full flex items-start mt-[13px] mx-[-15px]"
+};
+var _hoisted_6 = {
+  "class": "w-full bg-grey-light rounded flex-1"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.steps, function (step) {
+    return openBlock(), createElementBlock("div", {
+      "class": normalizeClass(["flex", step.position !== _ctx.steps.length ? 'flex-1' : 'w-[70px] md:w-[96px]']),
+      key: step.position
+    }, [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' : 'bg-grey-light'])
+    }, [createElementVNode("span", _hoisted_3, toDisplayString(step.position), 1)], 2), createElementVNode("span", _hoisted_4, toDisplayString(step.label), 1)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createElementVNode("div", {
+      "class": "bg-primary text-xs leading-none py-0.5 text-center text-grey-darkest rounded transition-all",
+      style: normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
+    }, null, 4)])])) : createCommentVNode("", true)], 2);
+  }), 128))])]);
+}
+
+script.render = render;
+
+export { script as FwProgressBar };

package/esm/index.js

@@ -16,6 +16,8 @@ import { FwNavigationMenu as script$4 } from './fw-navigation-menu.js';
 export { FwNavigationMenu } from './fw-navigation-menu.js';
 import { s as script$7, u as uniqueId } from './index-59d76908.js';
 export { s as FwModal } from './index-59d76908.js';
+import { FwProgressBar as script$8 } from './fw-progress-bar.js';
+export { FwProgressBar } from './fw-progress-bar.js';
 import { FwEmailPulse as __default__, FwSuccessPulse as __default__$1 } from './fw-animations.js';
 export { FwEmailPulse, FwSuccessPulse } from './fw-animations.js';
 import { F as Form } from './vee-validate.esm-b64acab1.js';
@@ -279,6 +281,7 @@ var components = /*#__PURE__*/Object.freeze({
   FwTabs: script$5,
   FwTab: script$6,
   FwModal: script$7,
+  FwProgressBar: script$8,
   FwEmailPulse: __default__,
   FwSuccessPulse: __default__$1
 });