@frollo/frollo-web-ui 0.2.2 → 0.3.0

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
 });

package/frollo-web-ui.esm.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, inject, warn as warn$1, ref, unref, computed, reactive, watch, nextTick, onUnmounted, onMounted, provide, isRef, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, markRaw, watchEffect, readonly, createElementVNode, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition, normalizeClass, pushScopeId, popScopeId, createBlock, Fragment, renderList, createTextVNode, useCssVars, createStaticVNode, createApp } from 'vue';
+import { getCurrentInstance, inject, warn as warn$1, ref, unref, computed, reactive, watch, nextTick, onUnmounted, onMounted, provide, isRef, onBeforeUnmount, defineComponent, toRef, resolveDynamicComponent, h, markRaw, watchEffect, readonly, createElementVNode, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, Transition, normalizeClass, pushScopeId, popScopeId, createBlock, Fragment, renderList, createTextVNode, normalizeStyle, useCssVars, createStaticVNode, createApp } from 'vue';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -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$7 = defineComponent({
+var script$8 = defineComponent({
   name: 'FwInput',
   emits: ['update:modelValue'],
   components: {
@@ -4956,17 +4956,17 @@ if (DESCRIPTORS$1 && !FUNCTION_NAME_EXISTS) {
   });
 }
 
-var _hoisted_1$8 = {
+var _hoisted_1$a = {
   "class": "fw-input w-full"
 };
-var _hoisted_2$7 = {
+var _hoisted_2$9 = {
   "class": "flex flex-col"
 };
-var _hoisted_3$6 = {
+var _hoisted_3$8 = {
   "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 = {
@@ -5004,10 +5004,10 @@ var _hoisted_13 = {
 var _hoisted_14 = {
   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$a, [createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.inputValue = $event;
@@ -5020,11 +5020,11 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [createElementVNode("div", _hoisted_2$7, [createElementVNode("div", _hoisted_3$6, [_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"
-      }, toDisplayString(_ctx.label), 9, _hoisted_4$6)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$3, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$3, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$3, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
+      }, toDisplayString(_ctx.label), 9, _hoisted_4$7)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$3, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$3, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
@@ -5089,9 +5089,9 @@ var css_248z$6 = ".fwFadeIn-enter-active{-webkit-animation:fwFadeIn .35s;animati
 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;
+script$8.render = render$b;
 
-var script$6 = defineComponent({
+var script$7 = defineComponent({
   name: 'FwCheckbox',
   components: {
     InputField: Field
@@ -5132,15 +5132,15 @@ var _withScopeId$3 = function _withScopeId(n) {
   return pushScopeId("data-v-7423717e"), n = n(), popScopeId(), n;
 };
 
-var _hoisted_1$7 = {
+var _hoisted_1$9 = {
   "class": "fw-checkbox w-full"
 };
-var _hoisted_2$6 = {
+var _hoisted_2$8 = {
   "class": "flex flex-col"
 };
-var _hoisted_3$5 = ["for"];
-var _hoisted_4$5 = ["value", "name"];
-var _hoisted_5$2 = ["innerHTML"];
+var _hoisted_3$7 = ["for"];
+var _hoisted_4$6 = ["value", "name"];
+var _hoisted_5$3 = ["innerHTML"];
 var _hoisted_6$2 = {
   "class": "italic text-sm font-medium min-h-[21px]"
 };
@@ -5151,10 +5151,10 @@ var _hoisted_7$2 = {
 var _hoisted_8$2 = {
   key: 1
 };
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
 
-  return openBlock(), createElementBlock("div", _hoisted_1$7, [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$8(_ctx, _cache, $props, $setup, $data, $options) {
           errors = _ref.errors,
           errorMessage = _ref.errorMessage,
           meta = _ref.meta;
-      return [createElementVNode("div", _hoisted_2$6, [_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"
@@ -5174,10 +5174,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), createElementVNode("span", {
+      }), null, 16, _hoisted_4$6), createElementVNode("span", {
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_5$2)], 8, _hoisted_3$5)) : 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"
       }, {
@@ -5195,10 +5195,10 @@ var css_248z$5 = ".fwFadeIn-enter-active[data-v-7423717e]{-webkit-animation:fwFa
 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";
+script$7.render = render$a;
+script$7.__scopeId = "data-v-7423717e";
 
-var script$5 = defineComponent({
+var script$6 = defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -5242,22 +5242,22 @@ var script$5 = defineComponent({
   }
 });
 
-var _hoisted_1$6 = {
+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$5 = {
+var _hoisted_2$7 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_3$4 = {
+var _hoisted_3$6 = {
   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$9(_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$7(_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$6, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3$4, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_4$4, [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$5.render = render$7;
+script$6.render = render$9;
 
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -5448,7 +5448,7 @@ var script$4 = defineComponent({
   }
 });
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_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,
@@ -5472,13 +5472,13 @@ var css_248z$4 = ".fw-button{line-height:normal;-webkit-transition:all .25s ease
 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;
+script$5.render = render$8;
 
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'FwNavigationMenu',
   emits: ['action'],
   components: {
-    FwButton: script$4
+    FwButton: script$5
   },
   props: {
     /**
@@ -5519,21 +5519,21 @@ var script$3 = defineComponent({
   }
 });
 
-var _hoisted_1$5 = {
+var _hoisted_1$7 = {
   "class": "fw-nav-menu relative z-50 h-20 shadow-md"
 };
-var _hoisted_2$4 = {
+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$3 = {
+var _hoisted_3$5 = {
   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 = {
@@ -5560,12 +5560,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$7(_ctx, _cache, $props, $setup, $data, $options) {
   var _ctx$menuItems;
 
   var _component_FwButton = resolveComponent("FwButton");
 
-  return openBlock(), createElementBlock("nav", _hoisted_1$5, [createElementVNode("div", _hoisted_2$4, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3$3, [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$3, [createElementVNode("div", _hoisted_5$1, [(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",
@@ -5643,7 +5643,7 @@ var css_248z$3 = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInL
 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;
+script$4.render = render$7;
 
 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$2 = defineComponent({
+var script$3 = defineComponent({
   name: 'FwTabs',
   emits: ['update:modelValue'],
   props: {
@@ -5880,16 +5880,16 @@ var script$2 = defineComponent({
   }
 });
 
-var _hoisted_1$4 = {
+var _hoisted_1$6 = {
   "class": "fw-tabs"
 };
-var _hoisted_2$3 = {
+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$2 = ["onClick"];
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$4, [_ctx.tabs ? (openBlock(), createElementBlock("ul", _hoisted_2$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, function (tab, i) {
+var _hoisted_3$4 = ["onClick"];
+function render$6(_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$4(_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$2)]);
+    }, toDisplayString(tab.props.label), 11, _hoisted_3$4)]);
   }), 128))])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]);
 }
 
-script$2.render = render$4;
+script$3.render = render$6;
 
 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$1 = defineComponent({
+var script$2 = defineComponent({
   name: 'FwTab',
   props: {
     /**
@@ -5973,15 +5973,15 @@ var script$1 = defineComponent({
   }
 });
 
-var _hoisted_1$3 = {
+var _hoisted_1$5 = {
   key: 0,
   "class": "fw-tab w-full"
 };
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.isActive ? (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true);
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.isActive ? (openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true);
 }
 
-script$1.render = render$3;
+script$2.render = render$5;
 
 /** 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 = defineComponent({
+var script$1 = defineComponent({
   name: 'FwModal',
   components: {
-    FwButton: script$4
+    FwButton: script$5
   },
   emits: ['cancel', 'confirm'],
   props: {
@@ -6356,17 +6356,17 @@ var _withScopeId$2 = function _withScopeId(n) {
   return pushScopeId("data-v-003a6fba"), n = n(), popScopeId(), n;
 };
 
-var _hoisted_1$2 = {
+var _hoisted_1$4 = {
   "class": "fw-modal"
 };
-var _hoisted_2$2 = {
+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$1 = {
+var _hoisted_3$3 = {
   "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"
 };
@@ -6383,7 +6383,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$4(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwButton = resolveComponent("FwButton");
 
   return openBlock(), createBlock(Transition, {
@@ -6391,13 +6391,13 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     appear: ""
   }, {
     "default": withCtx(function () {
-      return [createElementVNode("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$2, [createElementVNode("div", _hoisted_3$1, [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",
         "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 ? (openBlock(), createElementBlock("div", _hoisted_5, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
+      }, [_ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", _hoisted_5$1, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), _ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
         key: 1,
         id: "modal_".concat(_ctx.uuid, "_header")
       }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_7)) : _ctx.header ? (openBlock(), createElementBlock("h2", {
@@ -6439,7 +6439,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$2)])])])];
+      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$3)])])])];
     }),
     _: 3
   });
@@ -6449,8 +6449,117 @@ var css_248z$2 = ".modalFadeIn-enter-active[data-v-003a6fba]{-webkit-animation:m
 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$1.render = render$4;
+script$1.__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
+];
+
+function render$3(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$2))
+}
+
+var script = defineComponent({
+  name: 'FwProgressBar',
+  components: {
+    CheckSvg: render$3
+  },
+  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 = {
+  key: 1,
+  "class": "text-base font-medium text-center w-full"
+};
+var _hoisted_4$2 = {
+  key: 0,
+  "class": "w-full flex items-start mt-[13px] mx-[-15px]"
+};
+var _hoisted_5 = {
+  "class": "w-full bg-grey-light rounded flex-1"
+};
+function render$2(_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) {
+    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 text-tertiary' : 'bg-grey-light text-grey-base'])
+    }, [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", {
+        'font-bold': step.position === _ctx.activeStep,
+        'text-grey-base': 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",
+      style: normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
+    }, null, 4)])])) : createCommentVNode("", true)], 2);
+  }), 128))])]);
+}
+
 script.render = render$2;
-script.__scopeId = "data-v-003a6fba";
 
 var __default__$1 = defineComponent({
   name: 'FwEmailPulse',
@@ -6586,14 +6695,15 @@ __default__.__scopeId = "data-v-c32112d4";
 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,
+  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__
 });
@@ -6728,7 +6838,7 @@ var modalService = function modalService(options, element) {
   var open = function open() {
     var _modalVNode;
 
-    modalVNode = createApp(script, _objectSpread2({}, options));
+    modalVNode = 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);
   };
@@ -6764,4 +6874,4 @@ var install = function install(app) {
   });
 };
 
-export { script$4 as FwButton, script$5 as FwCard, script$6 as FwCheckbox, __default__$1 as FwEmailPulse, Form as FwForm, script$7 as FwInput, script as FwModal, script$3 as FwNavigationMenu, __default__ as FwSuccessPulse, script$1 as FwTab, script$2 as FwTabs, install as default, modalService };
+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 };

package/icons/check.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 17 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.8473 0.621086C16.2059 0.951555 16.2059 1.48593 15.8473 1.78476L6.56602 11.066C6.26719 11.4246 5.73281 11.4246 5.40234 11.066L0.622113 6.28476C0.292629 5.98593 0.292629 5.45156 0.622113 5.12109C0.951563 4.79413 1.48594 4.79413 1.81535 5.12109L6 9.3082L14.6836 0.621086C15.0141 0.292727 15.5484 0.292727 15.8473 0.621086Z" />
+</svg>

package/icons/index.ts

@@ -13,6 +13,7 @@ import InfoCircleSvg from './info-circle.svg';
 import FileExclamationSvg from './file-exclamation.svg';
 import HourglassClockSvg from './hourglass-clock.svg';
 import EnvelopeSvg from './envelope.svg';
+import CheckSvg from './check.svg';
 
 export {
   ViewSvg,
@@ -29,5 +30,6 @@ export {
   InfoCircleSvg,
   FileExclamationSvg,
   HourglassClockSvg,
-  EnvelopeSvg
+  EnvelopeSvg,
+  CheckSvg
 };