@frollo/frollo-web-ui 0.2.3 → 0.2.4

package/cjs/index.js

@@ -4733,7 +4733,7 @@ var _hoisted_4$7 = ["for"];
 var _hoisted_5$4 = {
   key: 1
 };
-var _hoisted_6$4 = {
+var _hoisted_6$3 = {
   "class": "relative"
 };
 var _hoisted_7$3 = {
@@ -4788,7 +4788,7 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2"
-      }, 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, {
+      }, 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$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, {
         placeholder: _ctx.placeholder,
         type: _ctx.type,
         readonly: _ctx.readonly,
@@ -4895,7 +4895,7 @@ var _hoisted_2$7 = {
 var _hoisted_3$6 = ["for"];
 var _hoisted_4$6 = ["value", "name"];
 var _hoisted_5$3 = ["innerHTML"];
-var _hoisted_6$3 = {
+var _hoisted_6$2 = {
   "class": "italic text-sm font-medium min-h-[21px]"
 };
 var _hoisted_7$2 = {
@@ -4931,7 +4931,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
       }), null, 16, _hoisted_4$6), vue.createElementVNode("span", {
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_5$3)], 8, _hoisted_3$6)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_6$3, [vue.createVNode(vue.Transition, {
+      }, null, 8, _hoisted_5$3)], 8, _hoisted_3$6)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_6$2, [vue.createVNode(vue.Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -5268,7 +5268,7 @@ var _hoisted_4$4 = {
 var _hoisted_5$2 = {
   "class": "flex space-x-2"
 };
-var _hoisted_6$2 = {
+var _hoisted_6$1 = {
   key: 2,
   "class": "hidden sm:flex items-center justify-start sm:ml-6"
 };
@@ -5311,7 +5311,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [vue.createVNode(_component_FwButton, {
+  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [vue.createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -6034,7 +6034,7 @@ var _hoisted_5$1 = {
   key: 0,
   "class": "fw-modal--header text-center"
 };
-var _hoisted_6$1 = {
+var _hoisted_6 = {
   key: 0,
   id: "modal-logo",
   "class": "flex justify-center"
@@ -6061,7 +6061,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         "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$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", {
+      }, [_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, [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", {
@@ -6110,8 +6110,11 @@ 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);script$1.render = render$3;
-script$1.__scopeId = "data-v-003a6fba";var script = vue.defineComponent({
+script$1.__scopeId = "data-v-003a6fba";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";var script = vue.defineComponent({
   name: 'FwProgressBar',
+  components: {
+    CheckSvg: CheckSvg
+  },
   props: {
     /**
      * An array of menu progress steps.
@@ -6162,19 +6165,19 @@ var _hoisted_2$2 = {
   "class": "flex pb-3"
 };
 var _hoisted_3$1 = {
-  "class": "text-white text-center w-full"
+  key: 1,
+  "class": "text-base font-medium 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 = {
+var _hoisted_5 = {
   "class": "w-full bg-grey-light rounded flex-1"
 };
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_CheckSvg = vue.resolveComponent("CheckSvg");
+
   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]']),
@@ -6182,9 +6185,17 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, [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",
+      "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 text-tertiary' : 'bg-grey-light text-grey-base'])
+    }, [step.position < _ctx.activeStep ? (vue.openBlock(), vue.createBlock(_component_CheckSvg, {
+      key: 0,
+      "class": "w-[18px]"
+    })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString(step.position), 1))], 2), vue.createElementVNode("span", {
+      "class": vue.normalizeClass(["text-sm md:text-base", {
+        'font-bold': step.position === _ctx.activeStep,
+        'text-grey-base': step.position > _ctx.activeStep
+      }])
+    }, vue.toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.createElementVNode("div", _hoisted_5, [vue.createElementVNode("div", {
+      "class": "bg-primary text-xs leading-none py-0.5 text-center rounded transition-all",
       style: vue.normalizeStyle(step.position < _ctx.activeStep ? 'width:100%;' : _ctx.calculatedProgressBar(step))
     }, null, 4)])])) : vue.createCommentVNode("", true)], 2);
   }), 128))])]);

package/esm/fw-progress-bar.js

@@ -1,10 +1,15 @@
 import './es.number.constructor-f646730f.js';
-import { defineComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, toDisplayString, normalizeStyle, createCommentVNode } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, createBlock, toDisplayString, normalizeStyle, createCommentVNode } from 'vue';
 import './function-name-3bda6320.js';
 import './is-forced-3323c994.js';
 
+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";
+
 var script = defineComponent({
   name: 'FwProgressBar',
+  components: {
+    CheckSvg: CheckSvg
+  },
   props: {
     /**
      * An array of menu progress steps.
@@ -57,19 +62,19 @@ var _hoisted_2 = {
   "class": "flex pb-3"
 };
 var _hoisted_3 = {
-  "class": "text-white text-center w-full"
+  key: 1,
+  "class": "text-base font-medium 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 = {
+var _hoisted_5 = {
   "class": "w-full bg-grey-light rounded flex-1"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_CheckSvg = resolveComponent("CheckSvg");
+
   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]']),
@@ -77,9 +82,17 @@ function render(_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' : '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",
+      "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, 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, [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))])]);

package/frollo-web-ui.esm.js

@@ -4969,7 +4969,7 @@ var _hoisted_4$7 = ["for"];
 var _hoisted_5$4 = {
   key: 1
 };
-var _hoisted_6$4 = {
+var _hoisted_6$3 = {
   "class": "relative"
 };
 var _hoisted_7$3 = {
@@ -5024,7 +5024,7 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": _ctx.name,
         "class": "block mb-2"
-      }, 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$4, [_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,
@@ -5141,7 +5141,7 @@ var _hoisted_2$7 = {
 var _hoisted_3$6 = ["for"];
 var _hoisted_4$6 = ["value", "name"];
 var _hoisted_5$3 = ["innerHTML"];
-var _hoisted_6$3 = {
+var _hoisted_6$2 = {
   "class": "italic text-sm font-medium min-h-[21px]"
 };
 var _hoisted_7$2 = {
@@ -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$3, [createVNode(Transition, {
+      }, null, 8, _hoisted_5$3)], 8, _hoisted_3$6)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$2, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -5536,7 +5536,7 @@ var _hoisted_4$4 = {
 var _hoisted_5$2 = {
   "class": "flex space-x-2"
 };
-var _hoisted_6$2 = {
+var _hoisted_6$1 = {
   key: 2,
   "class": "hidden sm:flex items-center justify-start sm:ml-6"
 };
@@ -5579,7 +5579,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to"]);
-  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6$2, [createVNode(_component_FwButton, {
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6$1, [createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -6370,7 +6370,7 @@ var _hoisted_5$1 = {
   key: 0,
   "class": "fw-modal--header text-center"
 };
-var _hoisted_6$1 = {
+var _hoisted_6 = {
   key: 0,
   id: "modal-logo",
   "class": "flex justify-center"
@@ -6397,7 +6397,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         "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$1, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [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", {
@@ -6452,8 +6452,13 @@ styleInject(css_248z$2);
 script$1.render = render$3;
 script$1.__scopeId = "data-v-003a6fba";
 
+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";
+
 var script = defineComponent({
   name: 'FwProgressBar',
+  components: {
+    CheckSvg: CheckSvg
+  },
   props: {
     /**
      * An array of menu progress steps.
@@ -6506,19 +6511,19 @@ var _hoisted_2$2 = {
   "class": "flex pb-3"
 };
 var _hoisted_3$1 = {
-  "class": "text-white text-center w-full"
+  key: 1,
+  "class": "text-base font-medium 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 = {
+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]']),
@@ -6526,9 +6531,17 @@ 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' : 'bg-grey-light'])
-    }, [createElementVNode("span", _hoisted_3$1, toDisplayString(step.position), 1)], 2), createElementVNode("span", _hoisted_4$2, 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",
+      "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))])]);

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",
@@ -84,6 +84,7 @@
     "vee-validate": "^4.5.9",
     "vue-loader": "^16.8.3",
     "vue-style-loader": "^4.1.3",
+    "vue-svg-loader": "^0.17.0-beta.2",
     "yup": "^0.32.11"
   },
   "homepage": "https://github.com/frollous/frollo-web-ui#readme",

package/types/icons/index.d.ts

@@ -13,4 +13,5 @@ import InfoCircleSvg from './info-circle.svg';
 import FileExclamationSvg from './file-exclamation.svg';
 import HourglassClockSvg from './hourglass-clock.svg';
 import EnvelopeSvg from './envelope.svg';
-export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg };
+import CheckSvg from './check.svg';
+export { ViewSvg, GenerateSvg, ManageSvg, NotFoundSvg, EmailFilledSvg, AlertSvg, LockSvg, EyeSvg, EyeCrossedSvg, DownloadSvg, IdCardSvg, InfoCircleSvg, FileExclamationSvg, HourglassClockSvg, EnvelopeSvg, CheckSvg };