@frollo/frollo-web-ui 4.0.1 → 5.0.0

package/esm/fw-accordion.js

@@ -1,7 +1,8 @@
-import { defineComponent, ref, pushScopeId, popScopeId, openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, createVNode, Transition, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, useCssVars, pushScopeId, popScopeId, openBlock, createElementBlock, createElementVNode, normalizeClass, createCommentVNode, toDisplayString, createVNode, Transition, withCtx, withDirectives, renderSlot, vShow } from 'vue';
+import { u as useColours } from './get-root-colours-e2a1cb28.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwAccordion',
   props: {
     /**
@@ -22,29 +23,59 @@ var script = defineComponent({
     isOpened: {
       type: Boolean,
       "default": false
+    },
+    /**
+     * Whether the accordion open icon should be at the start or end
+     */
+    iconPositionStart: {
+      type: Boolean,
+      "default": true
     }
   },
   setup: function setup(props) {
     var isOpen = ref(props.isOpened);
-    var transitionEnter = function transitionEnter(el) {
+    var _useColours = useColours(),
+      bgHoverColor = _useColours.primaryFade5;
+    var beforeEnter = function beforeEnter(el) {
+      el.style.height = '0';
+    };
+    var enter = function enter(el) {
       el.style.height = el.scrollHeight + 'px';
     };
-    var transitionLeave = function transitionLeave(el) {
+    var beforeLeave = function beforeLeave(el) {
+      el.style.height = el.scrollHeight + 'px';
+    };
+    var leave = function leave(el) {
       el.style.height = '0';
     };
     return {
       isOpen: isOpen,
-      transitionEnter: transitionEnter,
-      transitionLeave: transitionLeave
+      beforeEnter: beforeEnter,
+      enter: enter,
+      beforeLeave: beforeLeave,
+      leave: leave,
+      bgHoverColor: bgHoverColor
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "0ec0724b": _ctx.bgHoverColor
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-c9209c42"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-5123413b"), n = n(), popScopeId(), n;
 };
 var _hoisted_1 = {
-  "class": "fw-accordion rounded border border-grey-40"
+  "class": "fw-accordion rounded-sm border border-grey-40"
 };
 var _hoisted_2 = {
   "class": "flex flex-row items-center justify-between w-full"
@@ -53,9 +84,6 @@ var _hoisted_3 = {
   "class": "flex flex-row items-center"
 };
 var _hoisted_4 = {
-  "class": "h4 mb-0 ml-6"
-};
-var _hoisted_5 = {
   key: 0,
   "class": "h4"
 };
@@ -64,31 +92,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[0] || (_cache[0] = function ($event) {
       return _ctx.isOpen = !_ctx.isOpen;
     }),
-    "class": "fw-accordion--header px-8 py-4 bg-grey-lightest w-full border-opacity-0 hover:bg-grey-20"
-  }, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("span", {
+    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, [createElementVNode("div", _hoisted_3, [_ctx.iconPositionStart ? (openBlock(), createElementBlock("span", {
+    key: 0,
+    "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, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true), !_ctx.iconPositionStart ? (openBlock(), createElementBlock("span", {
+    key: 1,
     "class": normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
-  }, null, 2), createElementVNode("span", _hoisted_4, toDisplayString(_ctx.title), 1)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true)])]), createVNode(Transition, {
-    name: "slideInOut",
-    onBeforeEnter: _ctx.transitionEnter,
-    onEnter: _ctx.transitionEnter,
-    onBeforeLeave: _ctx.transitionLeave,
-    onLeave: _ctx.transitionLeave,
-    "class": "transition-all duration-300 ease-in-out overflow-hidden"
+  }, null, 2)) : createCommentVNode("", true)])], 2), createVNode(Transition, {
+    name: "fw-accordion-transition",
+    onBeforeEnter: _ctx.beforeEnter,
+    onEnter: _ctx.enter,
+    onBeforeLeave: _ctx.beforeLeave,
+    onLeave: _ctx.leave,
+    "class": "transition-all duration-300 ease-in overflow-hidden"
   }, {
     "default": withCtx(function () {
-      return [_ctx.$slots["default"] && _ctx.isOpen ? renderSlot(_ctx.$slots, "default", {
-        key: 0
-      }) : createCommentVNode("", true)];
+      return [withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, _ctx.$slots["default"] && _ctx.isOpen]])];
     }),
     _: 3
   }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave"])]);
 }
 
-var css_248z = ".fw-accordion--icon[data-v-c9209c42]{position:relative}.fw-accordion--icon[data-v-c9209c42]:after,.fw-accordion--icon[data-v-c9209c42]: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-c9209c42]: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-c9209c42]:after{width:0}";
-var stylesheet = ".fw-accordion--icon[data-v-c9209c42]{position:relative}.fw-accordion--icon[data-v-c9209c42]:after,.fw-accordion--icon[data-v-c9209c42]: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-c9209c42]: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-c9209c42]:after{width:0}";
+var css_248z = ".fw-accordion--header-open[data-v-5123413b],.fw-accordion--header[data-v-5123413b]:focus-visible,.fw-accordion--header[data-v-5123413b]:hover{background-color:var(--0ec0724b)}.fw-accordion--icon[data-v-5123413b]{position:relative}.fw-accordion--icon[data-v-5123413b]:after,.fw-accordion--icon[data-v-5123413b]: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-5123413b]: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-5123413b]:after{width:0}";
+var stylesheet = ".fw-accordion--header-open[data-v-5123413b],.fw-accordion--header[data-v-5123413b]:focus-visible,.fw-accordion--header[data-v-5123413b]:hover{background-color:var(--0ec0724b)}.fw-accordion--icon[data-v-5123413b]{position:relative}.fw-accordion--icon[data-v-5123413b]:after,.fw-accordion--icon[data-v-5123413b]: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-5123413b]: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-5123413b]:after{width:0}";
 styleInject(css_248z);
 
-script.render = render;
-script.__scopeId = "data-v-c9209c42";
+__default__.render = render;
+__default__.__scopeId = "data-v-5123413b";
 
-export { script as FwAccordion };
+export { __default__ as FwAccordion };

package/esm/fw-animations.js

@@ -1,10 +1,10 @@
 import './es.number.constructor-d6ff8874.js';
 import { defineComponent, useCssVars, pushScopeId, popScopeId, createElementVNode, openBlock, createElementBlock, createStaticVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-export { s as FwLoadingSpinner } from './fw-loading-spinner-7462e0b2.js';
+export { s as FwLoadingSpinner } from './fw-loading-spinner-51deaa3d.js';
 import './is-forced-752b5893.js';
 import './classof-39c30bd5.js';
-import './index-dbe0534d.js';
+import './index-3624f1c9.js';
 import './check-94a5917a.js';
 
 var __default__$1 = defineComponent({

package/esm/fw-bar-chart.js

@@ -1,4 +1,4 @@
-export { s as FwBarChart } from './index-f0510452.js';
+export { s as FwBarChart } from './index-2766bfe4.js';
 import './es.number.constructor-d6ff8874.js';
 import './is-forced-752b5893.js';
 import './classof-39c30bd5.js';
@@ -15,4 +15,5 @@ import './array-method-has-species-support-3d413468.js';
 import './es.function.name-557cb1f9.js';
 import './does-not-exceed-safe-integer-31d08811.js';
 import 'vue';
+import './get-root-colours-e2a1cb28.js';
 import './uniqueId-fe08534a.js';

package/esm/{fw-button-7902ae9e.js → fw-button-beaf20f4.js}

@@ -1,6 +1,6 @@
 import './es.array.includes-91be7771.js';
 import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createElementVNode, renderSlot, createVNode, createCommentVNode } from 'vue';
-import { s as script$1 } from './fw-loading-spinner-7462e0b2.js';
+import { s as script$1 } from './fw-loading-spinner-51deaa3d.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var script = defineComponent({

package/esm/fw-button.js

@@ -1,4 +1,4 @@
-export { s as FwButton } from './fw-button-7902ae9e.js';
+export { s as FwButton } from './fw-button-beaf20f4.js';
 import './es.array.includes-91be7771.js';
 import './is-forced-752b5893.js';
 import './export-a37ba078.js';
@@ -6,7 +6,7 @@ import './add-to-unscopables-2400f45b.js';
 import './object-create-f6f3a673.js';
 import './object-keys-4f5bf4e7.js';
 import 'vue';
-import './fw-loading-spinner-7462e0b2.js';
-import './index-dbe0534d.js';
+import './fw-loading-spinner-51deaa3d.js';
+import './index-3624f1c9.js';
 import './check-94a5917a.js';
 import './style-inject.es-1f59c1d0.js';

package/esm/fw-checkbox.js

@@ -19,12 +19,20 @@ var script = defineComponent({
   },
   props: {
     /**
-     * The name of the input field. Must be unique per form.
+     * The name of the checkbox input field.
+     * Multiple checkboxes can use the same name with a unique value.
      */
     name: {
       type: String,
       required: true
     },
+    /**
+     * The value of the input field. Must be unique per name.
+     */
+    value: {
+      type: String,
+      required: false
+    },
     /**
      * Label for the input. Also renders to an aria-label attribute
      */
@@ -42,6 +50,13 @@ var script = defineComponent({
      */
     hint: {
       type: String
+    },
+    /**
+     * Enable or disable the error hidden element
+     */
+    enableErrors: {
+      type: Boolean,
+      "default": true
     }
   },
   setup: function setup() {
@@ -53,7 +68,7 @@ var script = defineComponent({
 });
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-3370ec5a"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-9ac45436"), n = n(), popScopeId(), n;
 };
 var _hoisted_1 = {
   "class": "fw-checkbox w-full"
@@ -65,6 +80,7 @@ var _hoisted_3 = ["for"];
 var _hoisted_4 = ["value", "name", "id"];
 var _hoisted_5 = ["innerHTML"];
 var _hoisted_6 = {
+  key: 0,
   "class": "italic text-sm font-medium min-h-[21px]"
 };
 var _hoisted_7 = {
@@ -78,7 +94,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
   return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_InputField, {
     name: _ctx.name,
-    value: _ctx.name,
+    value: _ctx.value ? _ctx.value : _ctx.name,
     type: "checkbox",
     rules: _ctx.rules
   }, {
@@ -91,7 +107,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "for": "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
         "class": "inline-flex items-center mb-3"
       }, [createElementVNode("input", mergeProps(field, {
-        value: _ctx.name,
+        value: _ctx.value ? _ctx.value : _ctx.name,
         name: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
         id: "fw-checkbox-".concat(_ctx.name, "-").concat(_ctx.uuid),
         type: "checkbox",
@@ -100,7 +116,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "class": "ml-2",
         innerHTML: _ctx.label
-      }, null, 8, _hoisted_5)) : createCommentVNode("", true)], 8, _hoisted_3), createElementVNode("div", _hoisted_6, [createVNode(Transition, {
+      }, null, 8, _hoisted_5)) : createCommentVNode("", true)], 8, _hoisted_3), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(Transition, {
         name: "fwFadeIn",
         mode: "out-in"
       }, {
@@ -108,17 +124,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
         }),
         _: 2
-      }, 1024)])])];
+      }, 1024)])) : createCommentVNode("", true)])];
     }),
     _: 1
   }, 8, ["name", "value", "rules"])]);
 }
 
-var css_248z = ".fwFadeIn-enter-active[data-v-3370ec5a]{-webkit-animation:fwFadeIn-3370ec5a .35s;animation:fwFadeIn-3370ec5a .35s;-webkit-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-3370ec5a]{animation:fwFadeIn-3370ec5a .35s reverse;-webkit-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-3370ec5a{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-3370ec5a{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-3370ec5a]{-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;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-3370ec5a]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
-var stylesheet = ".fwFadeIn-enter-active[data-v-3370ec5a]{-webkit-animation:fwFadeIn-3370ec5a .35s;animation:fwFadeIn-3370ec5a .35s;-webkit-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-3370ec5a]{animation:fwFadeIn-3370ec5a .35s reverse;-webkit-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-3370ec5a{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-3370ec5a{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-3370ec5a]{-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;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-3370ec5a]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
+var css_248z = ".fwFadeIn-enter-active[data-v-9ac45436]{-webkit-animation:fwFadeIn-9ac45436 .35s;animation:fwFadeIn-9ac45436 .35s;-webkit-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-9ac45436]{animation:fwFadeIn-9ac45436 .35s reverse;-webkit-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-9ac45436{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-9ac45436{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-9ac45436]{-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;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-9ac45436]:checked{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='3 3 10 10' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}";
+var stylesheet = ".fwFadeIn-enter-active[data-v-9ac45436]{-webkit-animation:fwFadeIn-9ac45436 .35s;animation:fwFadeIn-9ac45436 .35s;-webkit-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-9ac45436]{animation:fwFadeIn-9ac45436 .35s reverse;-webkit-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-9ac45436{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-9ac45436{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-9ac45436]{-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;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-9ac45436]: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);
 
 script.render = render;
-script.__scopeId = "data-v-3370ec5a";
+script.__scopeId = "data-v-9ac45436";
 
 export { script as FwCheckbox };

package/esm/fw-drawer.js

@@ -0,0 +1,225 @@
+import './es.array.includes-91be7771.js';
+import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString } from 'vue';
+import { s as script$1 } from './fw-button-beaf20f4.js';
+import { u as uniqueId } from './uniqueId-fe08534a.js';
+import { b as render$1 } from './index-3624f1c9.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import './is-forced-752b5893.js';
+import './export-a37ba078.js';
+import './add-to-unscopables-2400f45b.js';
+import './object-create-f6f3a673.js';
+import './object-keys-4f5bf4e7.js';
+import './fw-loading-spinner-51deaa3d.js';
+import './check-94a5917a.js';
+
+var script = defineComponent({
+  name: 'FwDrawer',
+  components: {
+    FwButton: script$1,
+    XMarkSvg: render$1
+  },
+  emits: ['update:modelValue', 'cancel', 'confirm'],
+  props: {
+    /**
+     * The drawer's v-model. Controls the visibility of the drawer.
+     */
+    modelValue: {
+      type: Boolean
+    },
+    /**
+     * The header title of the drawer
+     */
+    header: {
+      type: String
+    },
+    /**
+     * The body description of the drawer
+     */
+    body: {
+      type: String
+    },
+    /**
+     * The aria role of the drawer container. Defaults to `dialog`
+     */
+    role: {
+      type: String,
+      "default": 'dialog'
+    },
+    /**
+     * Whether to show the cancel button
+     */
+    showCancel: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Whether to show the confirm button
+     */
+    showConfirm: {
+      type: Boolean,
+      "default": true
+    },
+    /**
+     * Custom text for the cancel button
+     */
+    cancelButtonText: {
+      type: String,
+      "default": 'Cancel'
+    },
+    /**
+     * Button variant for the cancel button
+     */
+    cancelButtonType: {
+      type: String,
+      "default": 'secondary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text', 'transparent'].includes(value);
+      }
+    },
+    /**
+     * Custom text for the confirm button
+     */
+    confirmButtonText: {
+      type: String,
+      "default": 'Confirm'
+    },
+    /**
+     * Button variant for the confirm button
+     */
+    confirmButtonType: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text', 'transparent'].includes(value);
+      }
+    }
+  },
+  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 isMounted = ref(false);
+    var uuid = uniqueId();
+    var isOpen = computed({
+      get: function get() {
+        return props.modelValue;
+      },
+      set: function set(state) {
+        return ctx.emit('update:modelValue', state);
+      }
+    });
+    var onConfirmed = function onConfirmed() {
+      ctx.emit('confirm');
+      isOpen.value = false;
+    };
+    var onCancelled = function onCancelled() {
+      ctx.emit('cancel');
+      isOpen.value = false;
+    };
+    onMounted(function () {
+      isMounted.value = true;
+    });
+    return {
+      baseDrawerClass: baseDrawerClass,
+      drawerFooterClass: drawerFooterClass,
+      isOpen: isOpen,
+      uuid: uuid,
+      isMounted: isMounted,
+      onConfirmed: onConfirmed,
+      onCancelled: onCancelled
+    };
+  }
+});
+
+var _hoisted_1 = ["id"];
+var _hoisted_2 = {
+  "class": "flex flex-row justify-between items-center p-4"
+};
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["id"];
+var _hoisted_5 = {
+  key: 0,
+  "class": "flex items-center"
+};
+var _hoisted_6 = {
+  key: 1,
+  "class": "flex items-center space-x-2"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_XMarkSvg = resolveComponent("XMarkSvg");
+  var _component_FwButton = resolveComponent("FwButton");
+  return openBlock(), createBlock(Transition, {
+    name: "drawerSlideInOut",
+    appear: ""
+  }, {
+    "default": withCtx(function () {
+      return [_ctx.isOpen ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        id: "fw-drawer-".concat(_ctx.uuid),
+        "class": normalizeClass(["fw-drawer", _ctx.baseDrawerClass]),
+        tabindex: "-1",
+        "aria-labelledby": "drawer-label"
+      }, [createElementVNode("div", _hoisted_2, [_ctx.$slots.header ? (openBlock(), createElementBlock("h3", {
+        key: 0,
+        id: "drawer_".concat(_ctx.uuid, "_header"),
+        "class": "inline-flex items-center mb-0 text-body font-semibold"
+      }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_3)) : createCommentVNode("", true), createVNode(_component_FwButton, {
+        variant: "primary",
+        tabindex: "",
+        title: "Close drawer",
+        onClick: _cache[0] || (_cache[0] = function ($event) {
+          return _ctx.onCancelled();
+        }),
+        "class": "inline-block w-9 h-9 !p-0 shadow inline-flex items-center justify-center rounded-full"
+      }, {
+        "default": withCtx(function () {
+          return [createVNode(_component_XMarkSvg, {
+            "class": "w-6 h-6 inline-block m-0 transition-rotate duration-200"
+          })];
+        }),
+        _: 1
+      })]), _ctx.$slots.body ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "class": "fw-drawer-body h-screen overflow-y-scroll pb-[155px]",
+        id: "drawer_".concat(_ctx.uuid, "_body")
+      }, [renderSlot(_ctx.$slots, "body")], 8, _hoisted_4)) : createCommentVNode("", true), _ctx.$slots.footer || _ctx.showConfirm || _ctx.showCancel ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        "class": normalizeClass(["fw-drawer-footer", _ctx.drawerFooterClass])
+      }, [_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "footer")])) : (openBlock(), createElementBlock("div", _hoisted_6, [_ctx.showCancel ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        "class": "basis-1/2",
+        variant: _ctx.cancelButtonType,
+        "aria-label": _ctx.cancelButtonText,
+        onClick: _cache[1] || (_cache[1] = function ($event) {
+          return _ctx.onCancelled();
+        })
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.cancelButtonText), 1)];
+        }),
+        _: 1
+      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true), _ctx.showConfirm ? (openBlock(), createBlock(_component_FwButton, {
+        key: 1,
+        "class": "basis-1/2",
+        variant: _ctx.confirmButtonType,
+        "aria-label": _ctx.confirmButtonText,
+        onClick: _cache[2] || (_cache[2] = function ($event) {
+          return _ctx.onConfirmed();
+        })
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
+        }),
+        _: 1
+      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)]))], 2)) : createCommentVNode("", true)], 10, _hoisted_1)) : createCommentVNode("", true)];
+    }),
+    _: 3
+  });
+}
+
+var css_248z = ".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 = ".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);
+
+script.render = render;
+
+export { script as FwDrawer };

package/esm/fw-dropdown.js

@@ -1,7 +1,7 @@
 import './es.array.find-dfa1f42f.js';
 import { defineComponent, toRef, ref, computed, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, createVNode, Transition, withCtx, Fragment, renderList } from 'vue';
 import { u as useField } from './vee-validate.esm-a17a23c3.js';
-import { a as render$1 } from './index-dbe0534d.js';
+import { a as render$1 } from './index-3624f1c9.js';
 import './es.function.name-557cb1f9.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './is-forced-752b5893.js';