@frollo/frollo-web-ui 6.0.4 → 7.0.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, openBlock, createElementBlock, resolveComponent, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, createBlock, Transition, normalizeClass, pushScopeId, popScopeId, Fragment, renderList, createTextVNode, Teleport, normalizeStyle, useCssVars, withKeys, withDirectives, vShow, resolveDirective, TransitionGroup, version as version$2, isProxy, toRaw, shallowRef, toRefs, normalizeProps, toHandlers, withModifiers, guardReactiveProps, onUpdated, 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, openBlock, createElementBlock, resolveComponent, createVNode, withCtx, toDisplayString, createCommentVNode, renderSlot, mergeProps, createBlock, Transition, normalizeClass, pushScopeId, popScopeId, Fragment, renderList, createTextVNode, withDirectives, vShow, Teleport, normalizeStyle, useCssVars, withKeys, resolveDirective, TransitionGroup, version as version$2, isProxy, toRaw, shallowRef, toRefs, normalizeProps, toHandlers, withModifiers, guardReactiveProps, onUpdated, createStaticVNode, createApp } from 'vue';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -6134,13 +6134,13 @@ var _hoisted_3$s = {
   "class": "flex flex-row justify-between"
 };
 var _hoisted_4$g = ["for"];
-var _hoisted_5$d = {
+var _hoisted_5$e = {
   key: 1
 };
-var _hoisted_6$a = {
+var _hoisted_6$b = {
   "class": "relative"
 };
-var _hoisted_7$9 = {
+var _hoisted_7$a = {
   key: 0,
   "class": "flex text-black absolute w-9 h-full inset-y-0 left-0 items-center pl-3 pointer-events-none"
 };
@@ -6181,7 +6181,9 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": "fw-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
         "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.label), 9, _hoisted_4$g)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$d, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$a, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$9, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
+      }, toDisplayString(_ctx.label), 9, _hoisted_4$g)) : createCommentVNode("", true), _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$e, [renderSlot(_ctx.$slots, "action")])) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_6$b, [_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_7$a, [renderSlot(_ctx.$slots, "prefix", {
+        "class": "h-full"
+      })])) : createCommentVNode("", true), createElementVNode("input", mergeProps(field, {
         id: "fw-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
         placeholder: _ctx.placeholder,
         type: _ctx.type,
@@ -6209,7 +6211,9 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
           })], 2)) : createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024)) : createCommentVNode("", true), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_9$9, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_10$6, [createVNode(Transition, {
+      }, 1024)) : createCommentVNode("", true), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_9$9, [renderSlot(_ctx.$slots, "suffix", {
+        "class": "h-full"
+      })])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_10$6, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -6331,9 +6335,9 @@ var _hoisted_2$v = {
 };
 var _hoisted_3$r = ["for"];
 var _hoisted_4$f = ["value", "name", "id"];
-var _hoisted_5$c = ["value", "name", "id", "checked"];
-var _hoisted_6$9 = ["innerHTML"];
-var _hoisted_7$8 = {
+var _hoisted_5$d = ["value", "name", "id", "checked"];
+var _hoisted_6$a = ["innerHTML"];
+var _hoisted_7$9 = {
   key: 0,
   "class": "italic text-sm font-medium min-h-[21px]"
 };
@@ -6377,11 +6381,11 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
         type: "checkbox",
         checked: _ctx.isChecked,
         "class": "text-link w-6 h-6 cursor-pointer bg-white border-grey-light border rounded"
-      }), null, 16, _hoisted_5$c)), _ctx.label ? (openBlock(), createElementBlock("span", {
+      }), null, 16, _hoisted_5$d)), _ctx.label ? (openBlock(), createElementBlock("span", {
         key: 2,
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_6$9)) : createCommentVNode("", true)], 8, _hoisted_3$r), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_7$8, [createVNode(Transition, {
+      }, null, 8, _hoisted_6$a)) : createCommentVNode("", true)], 8, _hoisted_3$r), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_7$9, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -6568,12 +6572,12 @@ var _hoisted_3$q = ["id", "aria-expanded"];
 var _hoisted_4$e = {
   key: 0
 };
-var _hoisted_5$b = {
+var _hoisted_5$c = {
   key: 1,
   "class": "text-grey-base"
 };
-var _hoisted_6$8 = ["aria-labelledby"];
-var _hoisted_7$7 = ["onClick"];
+var _hoisted_6$9 = ["aria-labelledby"];
+var _hoisted_7$8 = ["onClick"];
 var _hoisted_8$7 = {
   key: 1,
   "class": "italic text-right text-sm font-medium min-h-[21px]"
@@ -6597,7 +6601,7 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
     id: "".concat(_ctx.name, "-fw-dropdown--button"),
     "aria-expanded": _ctx.isOpen,
     "aria-haspopup": "true"
-  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("span", _hoisted_4$e, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$b, toDisplayString(_ctx.placeholder), 1)), createVNode(_component_ChevronDownSvg, {
+  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("span", _hoisted_4$e, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$c, toDisplayString(_ctx.placeholder), 1)), createVNode(_component_ChevronDownSvg, {
     "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
   }, null, 8, ["class"])], 10, _hoisted_3$q), createVNode(Transition, {
     name: "slideUpDown"
@@ -6619,8 +6623,8 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: function onClick($event) {
             return _ctx.selectOption(option);
           }
-        }, toDisplayString(option.label), 11, _hoisted_7$7);
-      }), 128))], 10, _hoisted_6$8)) : createCommentVNode("", true)];
+        }, toDisplayString(option.label), 11, _hoisted_7$8);
+      }), 128))], 10, _hoisted_6$9)) : createCommentVNode("", true)];
     }),
     _: 1
   }), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_8$7, [createVNode(Transition, {
@@ -7066,14 +7070,14 @@ var _hoisted_3$o = {
 var _hoisted_4$d = {
   "class": "flex space-x-2"
 };
-var _hoisted_5$a = {
+var _hoisted_5$b = {
   key: 2,
   "class": "hidden sm:flex items-center justify-start sm:ml-6"
 };
-var _hoisted_6$7 = {
+var _hoisted_6$8 = {
   "class": "flex items-center sm:hidden"
 };
-var _hoisted_7$6 = /*#__PURE__*/createElementVNode("span", {
+var _hoisted_7$7 = /*#__PURE__*/createElementVNode("span", {
   "class": "sr-only"
 }, "Open main menu", -1);
 var _hoisted_8$6 = {
@@ -7109,7 +7113,7 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to", "external", "onClick"]);
-  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_5$a, [createVNode(_component_FwButton, {
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_5$b, [createVNode(_component_FwButton, {
     onClick: _ctx.actionClicked,
     size: "md",
     "aria-label": _ctx.actionLabel
@@ -7118,13 +7122,13 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
       return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
     }),
     _: 1
-  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$7, [createVNode(_component_FwButton, {
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6$8, [createVNode(_component_FwButton, {
     variant: "text",
     size: "sm",
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": withCtx(function () {
-      return [_hoisted_7$6, (openBlock(), createElementBlock("svg", _hoisted_8$6, [createElementVNode("path", {
+      return [_hoisted_7$7, (openBlock(), createElementBlock("svg", _hoisted_8$6, [createElementVNode("path", {
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "stroke-width": "2",
@@ -7343,11 +7347,10 @@ var script$e = defineComponent({
 });
 
 var _hoisted_1$u = {
-  key: 0,
   "class": "fw-tab w-full"
 };
 function render$l(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.isActive ? (openBlock(), createElementBlock("div", _hoisted_1$u, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true);
+  return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$u, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.isActive]]);
 }
 
 script$e.render = render$l;
@@ -7465,16 +7468,16 @@ var _hoisted_3$m = {
   "class": "fw-modal--wrapper text-center overflow-auto flex justify-center items-center h-full"
 };
 var _hoisted_4$c = ["role", "aria-labelledby", "aria-describedby"];
-var _hoisted_5$9 = {
+var _hoisted_5$a = {
   key: 0,
   "class": "fw-modal--header text-center"
 };
-var _hoisted_6$6 = {
+var _hoisted_6$7 = {
   key: 0,
   id: "modal-logo",
   "class": "flex justify-center"
 };
-var _hoisted_7$5 = ["id"];
+var _hoisted_7$6 = ["id"];
 var _hoisted_8$5 = ["id", "innerHTML"];
 var _hoisted_9$5 = ["id"];
 var _hoisted_10$3 = ["innerHTML", "id"];
@@ -7492,8 +7495,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
     appear: ""
   }, {
     "default": withCtx(function () {
-      return [_ctx.isOpen ? (openBlock(), createElementBlock("div", {
-        key: 0,
+      return [withDirectives(createElementVNode("div", {
         "class": "fw-modal z-[9999] relative",
         id: "fw-modal-".concat(_ctx.uuid)
       }, [createElementVNode("div", _hoisted_2$q, [createElementVNode("div", _hoisted_3$m, [createElementVNode("div", {
@@ -7502,10 +7504,10 @@ function render$k(_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$9, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6$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$a, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_6$7, [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$5)) : _ctx.header ? (openBlock(), createElementBlock("h2", {
+      }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_7$6)) : _ctx.header ? (openBlock(), createElementBlock("h2", {
         key: 2,
         id: "modal_".concat(_ctx.uuid, "_header"),
         innerHTML: _ctx.header
@@ -7544,7 +7546,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
           return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$c)])])], 8, _hoisted_1$t)) : createCommentVNode("", true)];
+      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)])) : createCommentVNode("", true)], 8, _hoisted_4$c)])])], 8, _hoisted_1$t), [[vShow, _ctx.isOpen]])];
     }),
     _: 3
   })], 8, ["to"])) : createCommentVNode("", true);
@@ -7615,7 +7617,7 @@ var _hoisted_4$b = {
   key: 0,
   "class": "w-full flex items-start mt-[13px] mx-[-15px]"
 };
-var _hoisted_5$8 = {
+var _hoisted_5$9 = {
   "class": "w-full bg-grey-40 rounded flex-1"
 };
 function render$j(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7636,7 +7638,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
         'font-bold': step.position === _ctx.activeStep,
         'text-body': step.position > _ctx.activeStep
       }])
-    }, toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_4$b, [createElementVNode("div", _hoisted_5$8, [createElementVNode("div", {
+    }, toDisplayString(step.label), 3)], 2), step.position !== _ctx.steps.length ? (openBlock(), createElementBlock("div", _hoisted_4$b, [createElementVNode("div", _hoisted_5$9, [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);
@@ -8346,14 +8348,14 @@ var _hoisted_3$k = ["tabindex", "onKeydown", "onClick"];
 var _hoisted_4$a = {
   "class": "flex flex-row items-center"
 };
-var _hoisted_5$7 = {
+var _hoisted_5$8 = {
   key: 0,
   "class": "ml-1 flex items-center justify-center w-5"
 };
-var _hoisted_6$5 = {
+var _hoisted_6$6 = {
   "class": "text-p2 bg-white font-light"
 };
-var _hoisted_7$4 = {
+var _hoisted_7$5 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
@@ -8388,7 +8390,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
       }
     }, [createElementVNode("div", _hoisted_4$a, [createElementVNode("span", {
       "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
-    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5$7, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
+    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5$8, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
       key: 0,
       "class": "inline-block w-full text-grey-base"
     })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
@@ -8400,7 +8402,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_3$k)) : createCommentVNode("", true)], 64);
   }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
     key: 1
-  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_6$5, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
+  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_6$6, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
   }, renderList(_ctx.sortedData, function (row, trKey) {
     return openBlock(), createElementBlock("tr", {
@@ -8408,7 +8410,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
     }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, colKey) {
       return openBlock(), createElementBlock(Fragment, {
         key: colKey
-      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_7$4, [createVNode(_component_FwLoadingBar, {
+      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_7$5, [createVNode(_component_FwLoadingBar, {
         "class": "w-full h-7"
       })])) : createCommentVNode("", true)], 64);
     }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_8$4, [createVNode(_component_FwLoadingBar, {
@@ -8489,6 +8491,9 @@ script$9.render = render$e;
 
 var __default__$5 = defineComponent({
   name: 'FwAccordion',
+  components: {
+    ChevronDownSvg: render$Q
+  },
   emits: ['toggled'],
   props: {
     /**
@@ -8497,6 +8502,13 @@ var __default__$5 = defineComponent({
     title: {
       type: String
     },
+    /**
+     * Classname for the title
+     */
+    titleClass: {
+      type: String,
+      "default": 'h4'
+    },
     /**
      * Title suffix of the accordion header
      */
@@ -8516,6 +8528,27 @@ var __default__$5 = defineComponent({
     iconPositionStart: {
       type: Boolean,
       "default": true
+    },
+    /**
+     * Icon type (arrow or plus)
+     */
+    isArrow: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Padding className for the accordion button
+     */
+    buttonPadding: {
+      type: String,
+      "default": 'px-8 py-4'
+    },
+    /**
+     * Border style className for the accordion button
+     */
+    borderStyle: {
+      type: String,
+      "default": 'rounded-sm border border-grey-40'
     }
   },
   setup: function setup(props, ctx) {
@@ -8550,7 +8583,7 @@ var __default__$5 = defineComponent({
 var __injectCSSVars__$4 = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "5f2b9a00": _ctx.bgHoverColor
+      "5f8da0f6": _ctx.bgHoverColor
     };
   });
 };
@@ -8561,37 +8594,55 @@ __default__$5.setup = __setup__$4 ? function (props, ctx) {
 } : __injectCSSVars__$4;
 
 var _withScopeId$3 = function _withScopeId(n) {
-  return pushScopeId("data-v-a62b48c8"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-3eea01a5"), n = n(), popScopeId(), n;
 };
 var _hoisted_1$n = {
-  "class": "fw-accordion rounded-sm border border-grey-40"
+  "class": "flex flex-row items-center justify-between w-full"
 };
 var _hoisted_2$m = {
-  "class": "flex flex-row items-center justify-between w-full"
+  "class": "flex flex-row items-center"
 };
 var _hoisted_3$i = {
-  "class": "flex flex-row items-center"
+  key: 0
 };
 var _hoisted_4$9 = {
+  key: 0
+};
+var _hoisted_5$7 = {
+  key: 1
+};
+var _hoisted_6$5 = {
   key: 0,
   "class": "h4"
 };
+var _hoisted_7$4 = {
+  key: 1
+};
 function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$n, [createElementVNode("button", {
+  var _component_ChevronDownSvg = resolveComponent("ChevronDownSvg");
+  return openBlock(), createElementBlock("div", {
+    "class": normalizeClass(["fw-accordion", _ctx.borderStyle])
+  }, [createElementVNode("button", {
     onClick: _cache[0] || (_cache[0] = function ($event) {
       return _ctx.isOpen = !_ctx.isOpen;
     }),
     type: "button",
-    "class": normalizeClass(["fw-accordion--header px-8 py-4 bg-white w-full transition-all duration-100 ease-in focus:outline-primary", _ctx.isOpen ? 'fw-accordion--header-open' : ''])
-  }, [createElementVNode("div", _hoisted_2$m, [createElementVNode("div", _hoisted_3$i, [_ctx.iconPositionStart ? (openBlock(), createElementBlock("span", {
+    "class": normalizeClass(["fw-accordion--header bg-white w-full transition-all duration-100 ease-in focus:outline-primary", [_ctx.isOpen ? 'fw-accordion--header-open' : '', _ctx.buttonPadding]])
+  }, [createElementVNode("div", _hoisted_1$n, [createElementVNode("div", _hoisted_2$m, [_ctx.iconPositionStart ? (openBlock(), createElementBlock("div", _hoisted_3$i, [_ctx.isArrow ? (openBlock(), createBlock(_component_ChevronDownSvg, {
     key: 0,
+    "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
+  }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
+    key: 1,
     "class": normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
-  }, null, 2)) : createCommentVNode("", true), createElementVNode("span", {
-    "class": normalizeClass(["h4 mb-0", _ctx.iconPositionStart ? 'ml-6' : 'ml-0'])
-  }, toDisplayString(_ctx.title), 3)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_4$9, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true), !_ctx.iconPositionStart ? (openBlock(), createElementBlock("span", {
+  }, null, 2))])) : createCommentVNode("", true), createElementVNode("div", {
+    "class": normalizeClass([_ctx.titleClass, _ctx.iconPositionStart ? 'ml-6' : 'ml-0'])
+  }, [_ctx.title ? (openBlock(), createElementBlock("span", _hoisted_4$9, toDisplayString(_ctx.title), 1)) : _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_5$7, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true)], 2)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_6$5, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true), !_ctx.iconPositionStart ? (openBlock(), createElementBlock("div", _hoisted_7$4, [_ctx.isArrow ? (openBlock(), createBlock(_component_ChevronDownSvg, {
+    key: 0,
+    "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
+  }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
     key: 1,
     "class": normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
-  }, null, 2)) : createCommentVNode("", true)])], 2), createVNode(Transition, {
+  }, null, 2))])) : createCommentVNode("", true)])], 2), createVNode(Transition, {
     name: "fw-accordion-transition",
     onBeforeEnter: _ctx.beforeEnter,
     onEnter: _ctx.enter,
@@ -8603,15 +8654,15 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
       return [withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, _ctx.$slots["default"] && _ctx.isOpen]])];
     }),
     _: 3
-  }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave"])]);
+  }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave"])], 2);
 }
 
-var css_248z$a = ".fw-accordion--header-open[data-v-a62b48c8],.fw-accordion--header[data-v-a62b48c8]:focus-visible,.fw-accordion--header[data-v-a62b48c8]:hover{background-color:var(--5f2b9a00)}.fw-accordion--icon[data-v-a62b48c8]{position:relative}.fw-accordion--icon[data-v-a62b48c8]:after,.fw-accordion--icon[data-v-a62b48c8]:before{background:var(--colorBody);border-radius:3px;content:\"\";height:.2rem;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;width:1rem}.fw-accordion--icon[data-v-a62b48c8]:after{-webkit-transform:translate(-50%,-50%) rotate(90deg);-ms-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}.fw-accordion--icon-open[data-v-a62b48c8]:after{width:0}";
-var stylesheet$a = ".fw-accordion--header-open[data-v-a62b48c8],.fw-accordion--header[data-v-a62b48c8]:focus-visible,.fw-accordion--header[data-v-a62b48c8]:hover{background-color:var(--5f2b9a00)}.fw-accordion--icon[data-v-a62b48c8]{position:relative}.fw-accordion--icon[data-v-a62b48c8]:after,.fw-accordion--icon[data-v-a62b48c8]:before{background:var(--colorBody);border-radius:3px;content:\"\";height:.2rem;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;width:1rem}.fw-accordion--icon[data-v-a62b48c8]:after{-webkit-transform:translate(-50%,-50%) rotate(90deg);-ms-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}.fw-accordion--icon-open[data-v-a62b48c8]:after{width:0}";
+var css_248z$a = ".fw-accordion--header-open[data-v-3eea01a5],.fw-accordion--header[data-v-3eea01a5]:focus-visible,.fw-accordion--header[data-v-3eea01a5]:hover{background-color:var(--5f8da0f6)}.fw-accordion--icon[data-v-3eea01a5]{position:relative}.fw-accordion--icon[data-v-3eea01a5]:after,.fw-accordion--icon[data-v-3eea01a5]:before{background:var(--colorBody);border-radius:3px;content:\"\";height:.2rem;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;width:1rem}.fw-accordion--icon[data-v-3eea01a5]:after{-webkit-transform:translate(-50%,-50%) rotate(90deg);-ms-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}.fw-accordion--icon-open[data-v-3eea01a5]:after{width:0}";
+var stylesheet$a = ".fw-accordion--header-open[data-v-3eea01a5],.fw-accordion--header[data-v-3eea01a5]:focus-visible,.fw-accordion--header[data-v-3eea01a5]:hover{background-color:var(--5f8da0f6)}.fw-accordion--icon[data-v-3eea01a5]{position:relative}.fw-accordion--icon[data-v-3eea01a5]:after,.fw-accordion--icon[data-v-3eea01a5]:before{background:var(--colorBody);border-radius:3px;content:\"\";height:.2rem;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;width:1rem}.fw-accordion--icon[data-v-3eea01a5]:after{-webkit-transform:translate(-50%,-50%) rotate(90deg);-ms-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}.fw-accordion--icon-open[data-v-3eea01a5]:after{width:0}";
 styleInject(css_248z$a);
 
 __default__$5.render = render$d;
-__default__$5.__scopeId = "data-v-a62b48c8";
+__default__$5.__scopeId = "data-v-3eea01a5";
 
 var es_array_from = {};
 
@@ -25599,7 +25650,6 @@ var script$2 = defineComponent({
 });
 
 var _hoisted_1$g = {
-  key: 0,
   "class": "flex flex-col px-4 py-8"
 };
 var _hoisted_2$f = {
@@ -25636,7 +25686,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     name: "sidebarMenuSlide"
   }, {
     "default": withCtx(function () {
-      return [_ctx.isMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_1$g, [_ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_2$f, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$d, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+      return [withDirectives(createElementVNode("div", _hoisted_1$g, [_ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_2$f, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$d, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
         return openBlock(), createElementBlock(Fragment, {
           key: i
         }, [!item.disabled ? (openBlock(), createBlock(_component_FwButton, {
@@ -25656,7 +25706,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
           }),
           _: 2
         }, 1032, ["href", "to", "external", "onClick"])) : createCommentVNode("", true)], 64);
-      }), 128))])])) : createCommentVNode("", true)];
+      }), 128))])], 512), [[vShow, _ctx.isMenuOpen]])];
     }),
     _: 3
   })], 2)) : createCommentVNode("", true);
@@ -25752,7 +25802,7 @@ var script$1 = defineComponent({
   },
   setup: function setup(props, ctx) {
     var baseDrawerClass = "fixed shadow-card top-0 right-0 z-40 h-screen bg-white";
-    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-card bg-white p-4\n    ";
+    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-card bg-white p-4 clip-top-shadow\n    ";
     var isMounted = ref(false);
     var uuid = uniqueId();
     var isOpen = computed({
@@ -25808,8 +25858,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     appear: ""
   }, {
     "default": withCtx(function () {
-      return [_ctx.isOpen ? (openBlock(), createElementBlock("div", {
-        key: 0,
+      return [withDirectives(createElementVNode("div", {
         id: "fw-drawer-".concat(_ctx.uuid),
         "class": normalizeClass(["fw-drawer", _ctx.baseDrawerClass]),
         tabindex: "-1",
@@ -25835,7 +25884,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       })]), _ctx.$slots.body ? (openBlock(), createElementBlock("div", {
         key: 0,
-        "class": "fw-drawer-body h-screen overflow-y-scroll pb-[155px]",
+        "class": "fw-drawer-body h-[calc(100vh-155px)] overflow-y-scroll",
         id: "drawer_".concat(_ctx.uuid, "_body")
       }, [renderSlot(_ctx.$slots, "body")], 8, _hoisted_4$6)) : createCommentVNode("", true), _ctx.$slots.footer || _ctx.showConfirm || _ctx.showCancel ? (openBlock(), createElementBlock("div", {
         key: 1,
@@ -25866,14 +25915,14 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
           return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
         }),
         _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)]))], 2)) : createCommentVNode("", true)], 10, _hoisted_1$f)) : createCommentVNode("", true)];
+      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)]))], 2)) : createCommentVNode("", true)], 10, _hoisted_1$f), [[vShow, _ctx.isOpen]])];
     }),
     _: 3
   });
 }
 
-var css_248z$6 = ".drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}";
-var stylesheet$6 = ".drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}";
+var css_248z$6 = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}";
+var stylesheet$6 = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}";
 styleInject(css_248z$6);
 
 script$1.render = render$5;
@@ -36391,14 +36440,14 @@ var __default__$3 = defineComponent({
 var __injectCSSVars__$3 = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "0edfc838": _ctx.primaryFade5,
-      "65cd8308": _ctx.primaryFade10,
-      "65cd82ca": _ctx.primaryFade20,
-      "65cd828c": _ctx.primaryFade30,
-      "65cd824e": _ctx.primaryFade40,
-      "65cd8210": _ctx.primaryFade50,
-      "65cd8194": _ctx.primaryFade70,
-      "65cd8156": _ctx.primaryFade80
+      "c68f2272": _ctx.primaryFade5,
+      "0b552c66": _ctx.primaryFade10,
+      "0b552c28": _ctx.primaryFade20,
+      "0b552bea": _ctx.primaryFade30,
+      "0b552bac": _ctx.primaryFade40,
+      "0b552b6e": _ctx.primaryFade50,
+      "0b552af2": _ctx.primaryFade70,
+      "0b552ab4": _ctx.primaryFade80
     };
   });
 };
@@ -36480,7 +36529,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": "fw-date-picker-input-start-".concat(_ctx.name, "-").concat(_ctx.uuid),
         "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.startLabel), 9, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createVNode(_component_CalendarDaySvg)]), createElementVNode("input", mergeProps({
+      }, toDisplayString(_ctx.startLabel), 9, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createVNode(_component_CalendarDaySvg, {
+        "class": "h-full"
+      })]), createElementVNode("input", mergeProps({
         value: inputValue.start
       }, toHandlers(inputEvents.start), {
         id: "fw-date-picker-input-start-".concat(_ctx.name, "-").concat(_ctx.uuid),
@@ -36494,7 +36545,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": "fw-date-picker-input-end-".concat(_ctx.name, "-").concat(_ctx.uuid),
         "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.endLabel), 9, _hoisted_10)) : createCommentVNode("", true), createElementVNode("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [createVNode(_component_CalendarDaySvg)]), createElementVNode("input", mergeProps({
+      }, toDisplayString(_ctx.endLabel), 9, _hoisted_10)) : createCommentVNode("", true), createElementVNode("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [createVNode(_component_CalendarDaySvg, {
+        "class": "h-full"
+      })]), createElementVNode("input", mergeProps({
         value: inputValue.end
       }, toHandlers(inputEvents.end), {
         id: "fw-date-picker-input-end-".concat(_ctx.name, "-").concat(_ctx.uuid),
@@ -36508,7 +36561,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "for": "fw-date-picker-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
         "class": "block mb-2 font-medium"
-      }, toDisplayString(_ctx.label), 9, _hoisted_15)) : createCommentVNode("", true), createElementVNode("div", _hoisted_16, [createElementVNode("div", _hoisted_17, [createVNode(_component_CalendarDaySvg)]), createElementVNode("input", mergeProps({
+      }, toDisplayString(_ctx.label), 9, _hoisted_15)) : createCommentVNode("", true), createElementVNode("div", _hoisted_16, [createElementVNode("div", _hoisted_17, [createVNode(_component_CalendarDaySvg, {
+        "class": "h-full"
+      })]), createElementVNode("input", mergeProps({
         value: inputValue
       }, toHandlers(inputEvents), {
         id: "fw-date-picker-input-".concat(_ctx.name, "-").concat(_ctx.uuid),
@@ -36525,8 +36580,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["modelValue", "model-modifiers", "max-date"])]);
 }
 
-var css_248z$3 = ".fw-date-picker .vc-primary{--vc-accent-50:var(--0edfc838);--vc-accent-100:var(--65cd8308);--vc-accent-200:var(--65cd82ca);--vc-accent-300:var(--65cd828c);--vc-accent-400:var(--65cd824e);--vc-accent-500:var(--65cd8210);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--65cd8194);--vc-accent-800:var(--65cd8156);--vc-accent-900:var(--colorBody)}";
-var stylesheet$3 = ".fw-date-picker .vc-primary{--vc-accent-50:var(--0edfc838);--vc-accent-100:var(--65cd8308);--vc-accent-200:var(--65cd82ca);--vc-accent-300:var(--65cd828c);--vc-accent-400:var(--65cd824e);--vc-accent-500:var(--65cd8210);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--65cd8194);--vc-accent-800:var(--65cd8156);--vc-accent-900:var(--colorBody)}";
+var css_248z$3 = ".fw-date-picker .vc-primary{--vc-accent-50:var(--c68f2272);--vc-accent-100:var(--0b552c66);--vc-accent-200:var(--0b552c28);--vc-accent-300:var(--0b552bea);--vc-accent-400:var(--0b552bac);--vc-accent-500:var(--0b552b6e);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--0b552af2);--vc-accent-800:var(--0b552ab4);--vc-accent-900:var(--colorBody)}";
+var stylesheet$3 = ".fw-date-picker .vc-primary{--vc-accent-50:var(--c68f2272);--vc-accent-100:var(--0b552c66);--vc-accent-200:var(--0b552c28);--vc-accent-300:var(--0b552bea);--vc-accent-400:var(--0b552bac);--vc-accent-500:var(--0b552b6e);--vc-accent-600:var(--colorPrimary);--vc-accent-700:var(--0b552af2);--vc-accent-800:var(--0b552ab4);--vc-accent-900:var(--colorBody)}";
 styleInject(css_248z$3);
 
 __default__$3.render = render$3;