@frollo/frollo-web-ui 9.0.1 → 9.0.3

package/esm/fw-provider-list.js

@@ -1,26 +1,41 @@
-import { e as _defineProperty, b as _toConsumableArray } from './_rollupPluginBabelHelpers-DODWUb5N.js';
-import { defineComponent, ref, computed, useCssVars, createElementVNode, resolveComponent, createElementBlock, openBlock, toDisplayString, createVNode, withCtx, createBlock, createCommentVNode, createTextVNode } from 'vue';
-import { a as script, s as script$1, _ as __default__$4 } from './fw-table-row-Cgi8871h.js';
-import { _ as __default__$3 } from './fw-input-C2-cZ-BY.js';
-import { _ as __default__$1 } from './fw-tag-fDo50Nw7.js';
-import { s as script$2 } from './fw-button-YMoW4x4c.js';
-import { _ as __default__$2 } from './fw-dropdown-58wyuzsW.js';
-import { l as render$1, m as render$2, n as render$3 } from './index-BsEH8YYr.js';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { f as _createForOfIteratorHelper, e as _defineProperty, b as _toConsumableArray } from './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import { ref, watch, defineComponent, shallowRef, computed, useCssVars, resolveComponent, createElementBlock, openBlock, createElementVNode, toDisplayString, createVNode, withCtx, createBlock, createCommentVNode, createTextVNode } from 'vue';
+import { a as script, s as script$1, _ as __default__$4 } from './fw-table-row-BU0xaybR.js';
+import { _ as __default__$3 } from './fw-input-BiPWWfK3.js';
+import { _ as __default__$1 } from './fw-tag-BRxPc4zc.js';
+import { s as script$2 } from './fw-button-DZTHZLjk.js';
+import { _ as __default__$2 } from './fw-dropdown-CSmYTm5O.js';
+import { l as render$1, m as render$2, n as render$3 } from './index-DHyRsKsZ.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import './fw-button.js';
 import './fw-loading.js';
-import './fw-loading-bar-DecYSBC_.js';
-import './vee-validate.esm-3ptvCDR1.js';
-import './fw-image-D-OHafdw.js';
+import './fw-loading-bar-3x4tkF1B.js';
+import './vee-validate-0dtT5GSQ.js';
+import './fw-image-A2lXYs0u.js';
 
+// tiny debounce helper (no deps)
+var useDebouncedRef = function useDebouncedRef(initial) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 150;
+  var state = ref(initial);
+  var debounced = ref(initial);
+  var timeNum;
+  watch(state, function (val) {
+    window.clearTimeout(timeNum);
+    timeNum = window.setTimeout(function () {
+      debounced.value = val;
+    }, delay);
+  }, {
+    flush: 'sync'
+  });
+  return {
+    state: state,
+    debounced: debounced
+  };
+};
 var __default__ = defineComponent({
   name: 'FwProviderList',
-  emits: [
-  /**
-   * Emits the number of filtered items the user sees.
-   */
-  'changed'],
+  emits: ['changed'],
   components: {
     FwTable: __default__$4,
     FwInput: __default__$3,
@@ -34,94 +49,101 @@ var __default__ = defineComponent({
     SolidXMarkSvg: render$1
   },
   props: {
-    /**
-     * The header heading of the list.
-     */
     heading: {
       type: String
     },
-    /**
-     * The list items of the table items.
-     */
     items: {
       type: Array,
       required: true
     },
-    /**
-     * The table header title.
-     */
     tableHeaderName: {
       type: String,
       "default": 'Name'
     },
-    /**
-     * The placeholder text for the search input.
-     */
     searchPlaceholder: {
       type: String,
       "default": 'Search'
     },
-    /**
-     * The label text for the search input.
-     */
     searchLabel: {
       type: String,
       "default": 'Search by provider name'
     },
-    /**
-     * The label text for the status filter dropdown.
-     */
     statusFilterLabel: {
       type: String,
       "default": 'Filter by status'
     }
   },
   setup: function setup(props, ctx) {
-    var searchFilterModel = ref('');
+    // Debounced search
+    var _useDebouncedRef = useDebouncedRef('', 150),
+      searchFilterModel = _useDebouncedRef.state,
+      debouncedSearch = _useDebouncedRef.debounced;
     var statusFilterModel = ref('all');
-    var parsedItems = computed(function () {
-      if (typeof props.items === 'string') {
-        return JSON.parse(props.items);
-      }
+    // Parse once per items change (avoid parsing on every reactive tick)
+    var parsedItems = shallowRef([]);
+    watch(function () {
       return props.items;
+    }, function (items) {
+      parsedItems.value = typeof items === 'string' ? JSON.parse(items) : items;
+    }, {
+      immediate: true
     });
-    var filteredTableItems = computed(function () {
-      var tempFilteredItems = parsedItems.value;
-      if (searchFilterModel.value) {
-        tempFilteredItems = tempFilteredItems.filter(function (item) {
-          return item.name.toString().toLowerCase().includes(searchFilterModel.value.toLowerCase());
-        });
-      }
-      if (statusFilterModel.value && statusFilterModel.value !== 'all') {
-        tempFilteredItems = tempFilteredItems.filter(function (item) {
-          return item.status === statusFilterModel.value;
-        });
-      }
-      return tempFilteredItems;
-    });
-    var options = _defineProperty(_defineProperty({}, 'status', {
-      disabled: true
-    }), props.tableHeaderName, {
-      isSortable: true,
-      initSortOrder: 'asc'
+    // Stable collator for fast locale-aware compare
+    var collator = new Intl.Collator(undefined, {
+      sensitivity: 'base',
+      numeric: true
     });
-    var tableItems = computed(function () {
-      var _filteredTableItems$v;
-      return (_filteredTableItems$v = filteredTableItems.value) === null || _filteredTableItems$v === void 0 ? void 0 : _filteredTableItems$v.map(function (item) {
-        return _defineProperty(_defineProperty({}, 'status', item.status), props.tableHeaderName, "\n            <div class=\"flex flex-row-reverse justify-end items-center\">\n              <p class=\"mb-0 font-medium\">".concat(item.name, "</p>\n              <img class=\"mr-2 w-[48px]\" alt=\"").concat(item.name, " logo\" src=\"").concat(item.image_url, "\" />\n            </div>\n          "));
+    // One pipeline: filter -> sort -> map to table format
+    var displayedTableItems = computed(function () {
+      var q = debouncedSearch.value.trim().toLowerCase();
+      var status = statusFilterModel.value;
+      // filter in a single pass
+      var filtered = [];
+      var _iterator = _createForOfIteratorHelper(parsedItems.value),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+          if (q && !item.name.toLowerCase().includes(q)) continue;
+          if (status !== 'all' && item.status !== status) continue;
+          filtered.push(item);
+        }
+        // sort BEFORE mapping; stable and correct
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      filtered.sort(function (a, b) {
+        if (a.status === 'outage' && b.status !== 'outage') return -1;
+        if (b.status === 'outage' && a.status !== 'outage') return 1;
+        return collator.compare(a.name, b.name);
+      });
+      // map once to the shape FwTable expects
+      return filtered.map(function (item) {
+        return _defineProperty(_defineProperty({
+          status: item.status
+        }, props.tableHeaderName, "\n          <div class=\"flex flex-row-reverse justify-end items-center\">\n            <p class=\"mb-0 font-medium\">".concat(item.name, "</p>\n            <img class=\"mr-2 w-[48px]\" alt=\"").concat(item.name, " logo\" src=\"").concat(item.image_url, "\" loading=\"lazy\" decoding=\"async\" />\n          </div>\n        ")), "id", item.name);
       });
     });
-    var sortedTableItems = computed(function () {
-      var tempItems = _toConsumableArray(tableItems.value);
-      var sortedItems = tempItems.sort(function (item1, item2) {
-        var _item1$name, _item2$name;
-        if (item1.status === 'outage') {
-          return -1;
+    // Emit changes as a watcher (no side effects in computed)
+    watch(displayedTableItems, function (items) {
+      return ctx.emit('changed', items.length);
+    }, {
+      immediate: true
+    });
+    var options = computed(function () {
+      return _defineProperty(_defineProperty({
+        status: {
+          disabled: true
         }
-        return (_item1$name = item1.name) === null || _item1$name === void 0 ? void 0 : _item1$name.toString().toLowerCase().localeCompare((_item2$name = item2.name) === null || _item2$name === void 0 ? void 0 : _item2$name.toString().toLowerCase());
+      }, props.tableHeaderName, {
+        isSortable: true,
+        initSortOrder: 'asc',
+        html: true
+      }), "id", {
+        disabled: true
       });
-      ctx.emit('changed', sortedItems.length);
-      return sortedItems;
     });
     var _useColours = useColours(),
       primaryFade5 = _useColours.primaryFade5,
@@ -129,7 +151,8 @@ var __default__ = defineComponent({
       primaryFade40 = _useColours.primaryFade40;
     return {
       options: options,
-      sortedTableItems: sortedTableItems,
+      sortedTableItems: displayedTableItems,
+      // keep template the same
       searchFilterModel: searchFilterModel,
       statusFilterModel: statusFilterModel,
       primaryFade5: primaryFade5,
@@ -141,9 +164,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "04475cb7": _ctx.primaryFade5,
-      "f6b78c08": _ctx.primaryFade20,
-      "f6b78b8c": _ctx.primaryFade40
+      "v1fe77e94": _ctx.primaryFade5
     };
   });
 };
@@ -172,10 +193,6 @@ var _hoisted_5 = {
 var _hoisted_6 = {
   key: 1
 };
-var _hoisted_7 = /*#__PURE__*/createElementVNode("h4", {
-  "class": "w-full font-medium text-center my-6"
-}, "Sorry, we could not find any results.", -1);
-var _hoisted_8 = [_hoisted_7];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_SearchSvg = resolveComponent("SearchSvg");
   var _component_SolidXMarkSvg = resolveComponent("SolidXMarkSvg");
@@ -247,16 +264,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       value: 'supported'
     }]
   }, null, 8, ["modelValue", "label"])])]), _ctx.sortedTableItems && _ctx.sortedTableItems.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_FwTable, {
-    "class": "w-full",
+    "class": "w-full fw-scrollable-horizontal",
     items: _ctx.sortedTableItems,
-    options: _ctx.options
+    options: _ctx.options,
+    "row-key": "id"
   }, {
     preHead: withCtx(function () {
       return [createVNode(_component_FwTableHead, {
         "class": "w-[150px] md:w-[200px]"
       }, {
         "default": withCtx(function () {
-          return [createTextVNode(" Status ")];
+          return _toConsumableArray(_cache[3] || (_cache[3] = [createTextVNode(" Status ", -1)]));
         }),
         _: 1
       })];
@@ -276,7 +294,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return [createVNode(_component_SolidXMarkSvg, {
                 name: "solid-xmark",
                 "class": "w-4 h-4 mr-1"
-              }), createTextVNode("Outage ")];
+              }), _cache[4] || (_cache[4] = createTextVNode("Outage ", -1))];
             }),
             _: 1
           })) : (openBlock(), createBlock(_component_FwTag, {
@@ -288,7 +306,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return [createVNode(_component_SolidCheckSvg, {
                 name: "solid-check",
                 "class": "w-4 h-4 mr-1"
-              }), createTextVNode(" Available ")];
+              }), _cache[5] || (_cache[5] = createTextVNode(" Available ", -1))];
             }),
             _: 1
           }))];
@@ -297,11 +315,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 1024)];
     }),
     _: 1
-  }, 8, ["items", "options"])])) : (openBlock(), createElementBlock("div", _hoisted_6, _hoisted_8))]);
+  }, 8, ["items", "options"])])) : (openBlock(), createElementBlock("div", _hoisted_6, _toConsumableArray(_cache[6] || (_cache[6] = [createElementVNode("h4", {
+    "class": "w-full font-medium text-center my-6"
+  }, "Sorry, we could not find any results.", -1)]))))]);
 }
 
-var css_248z = ".fw-provider-list--table{background-color:var(--04475cb7);overflow-x:auto}.fw-provider-list--table::-webkit-scrollbar{-webkit-appearance:none;height:8px}.fw-provider-list--table::-webkit-scrollbar-track{background-color:var(--f6b78c08);border-radius:12px}.fw-provider-list--table::-webkit-scrollbar-thumb{background-color:var(--f6b78b8c);border-radius:12px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.fw-provider-list--table::-webkit-scrollbar-thumb:hover{background-color:var(--colorBody);cursor:pointer}";
-var stylesheet = ".fw-provider-list--table{background-color:var(--04475cb7);overflow-x:auto}.fw-provider-list--table::-webkit-scrollbar{-webkit-appearance:none;height:8px}.fw-provider-list--table::-webkit-scrollbar-track{background-color:var(--f6b78c08);border-radius:12px}.fw-provider-list--table::-webkit-scrollbar-thumb{background-color:var(--f6b78b8c);border-radius:12px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.fw-provider-list--table::-webkit-scrollbar-thumb:hover{background-color:var(--colorBody);cursor:pointer}";
+var css_248z = ".fw-provider-list--table{background-color:var(--v1fe77e94)}";
+var stylesheet = ".fw-provider-list--table{background-color:var(--v1fe77e94)}";
 styleInject(css_248z);
 
 __default__.render = render;

package/esm/fw-sidebar-menu.js

@@ -1,6 +1,6 @@
-import { defineComponent, computed, resolveComponent, createElementBlock, createCommentVNode, openBlock, normalizeClass, createVNode, withCtx, Transition, withDirectives, createElementVNode, renderSlot, Fragment, renderList, createBlock, createTextVNode, toDisplayString, vShow } from 'vue';
-import { s as script$1 } from './fw-button-YMoW4x4c.js';
-import { o as render$1 } from './index-BsEH8YYr.js';
+import { defineComponent, computed, resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, withCtx, createCommentVNode, renderSlot, Fragment, renderList, createBlock, createTextVNode, toDisplayString, vShow } from 'vue';
+import { s as script$1 } from './fw-button-DZTHZLjk.js';
+import { o as render$1 } from './index-DHyRsKsZ.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var script = defineComponent({
@@ -58,7 +58,7 @@ var script = defineComponent({
     }
   },
   setup: function setup(props, ctx) {
-    var baseClass = "h-full shadow-md border-r border-grey-20 \n      fixed top-0 left-0 transition-all duration-300";
+    var baseClass = 'h-full shadow-md border-r border-grey-20 fixed top-0 left-0 ' + 'transition-[width] duration-300 ease-out';
     var isMenuOpen = computed({
       get: function get() {
         return props.modelValue;
@@ -67,84 +67,91 @@ var script = defineComponent({
         return ctx.emit('update:modelValue', state);
       }
     });
+    var hasItems = computed(function () {
+      return Array.isArray(props.menuItems) && props.menuItems.length > 0;
+    });
+    var enabledItems = computed(function () {
+      var _props$menuItems;
+      return ((_props$menuItems = props.menuItems) !== null && _props$menuItems !== void 0 ? _props$menuItems : []).filter(function (i) {
+        return !i.disabled;
+      });
+    });
+    var widthClass = computed(function () {
+      return isMenuOpen.value ? props.openWidth : props.closedWidth;
+    });
     var toggleMenu = function toggleMenu() {
-      isMenuOpen.value = !isMenuOpen.value;
-      ctx.emit('toggled', isMenuOpen.value ? props.openWidth : props.closedWidth);
+      var next = !isMenuOpen.value;
+      isMenuOpen.value = next;
+      ctx.emit('toggled', next ? props.openWidth : props.closedWidth);
     };
     return {
       baseClass: baseClass,
       isMenuOpen: isMenuOpen,
-      toggleMenu: toggleMenu
+      toggleMenu: toggleMenu,
+      enabledItems: enabledItems,
+      hasItems: hasItems,
+      widthClass: widthClass
     };
   }
 });
 
 var _hoisted_1 = {
-  "class": "flex flex-col px-4 py-8"
-};
-var _hoisted_2 = {
   key: 0,
   "class": "text-left px-4 pb-6"
 };
-var _hoisted_3 = {
+var _hoisted_2 = {
   "class": "flex flex-col space-y-1"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _ctx$menuItems;
   var _component_ChevronRightSvg = resolveComponent("ChevronRightSvg");
   var _component_FwButton = resolveComponent("FwButton");
-  return _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    "class": normalizeClass(["fw-sidebar-menu", [_ctx.baseClass, _ctx.isMenuOpen ? _ctx.openWidth : _ctx.closedWidth]]),
+  return withDirectives((openBlock(), createElementBlock("aside", {
+    "class": normalizeClass(["fw-sidebar-menu", [_ctx.baseClass, _ctx.widthClass]]),
     "aria-label": "Aside navigation menu"
   }, [createVNode(_component_FwButton, {
     variant: _ctx.toggleButtonVariant,
-    tabindex: "",
+    tabindex: "0",
     title: _ctx.isMenuOpen ? 'Close sidebar navigation menu' : 'Open sidebar navigation menu',
-    onClick: _cache[0] || (_cache[0] = function ($event) {
-      return _ctx.toggleMenu();
-    }),
-    "class": normalizeClass(["inline-block w-9 h-9 !p-0 shadow absolute top-4 -right-4 rounded-full", _ctx.toggleButtonClass])
+    onClick: _ctx.toggleMenu,
+    "class": normalizeClass(["inline-block w-9 h-9 !p-0 shadow !absolute top-4 -right-4 rounded-full z-[2]", _ctx.toggleButtonClass])
   }, {
     "default": withCtx(function () {
       return [createVNode(_component_ChevronRightSvg, {
         name: "chevron-right",
-        "class": normalizeClass(["size-6 inline-block m-0 transition-rotate duration-200", _ctx.isMenuOpen ? 'rotate-180' : ''])
+        "class": normalizeClass(["size-6 inline-block m-0 fw-sidebar-menu-toggle", {
+          'fw-sidebar-menu-toggle--open': _ctx.isMenuOpen
+        }])
       }, null, 8, ["class"])];
     }),
     _: 1
-  }, 8, ["variant", "title", "class"]), createVNode(Transition, {
-    name: "sidebarMenuSlide"
-  }, {
-    "default": withCtx(function () {
-      return [withDirectives(createElementVNode("div", _hoisted_1, [_ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
-        return openBlock(), createElementBlock(Fragment, {
-          key: i
-        }, [!item.disabled ? (openBlock(), createBlock(_component_FwButton, {
-          key: 0,
-          rounded: false,
-          "class": "!text-left !px-4 bg-transparent border-none !no-underline hover:!bg-brand-bg4 focus:bg-brand-bg4",
-          variant: "quaternary",
-          href: item.href,
-          to: item.to,
-          external: item.external,
-          size: "lg",
-          "aria-current": "page",
-          onClick: item.onClick
-        }, {
-          "default": withCtx(function () {
-            return [createTextVNode(toDisplayString(item.label), 1)];
-          }),
-          _: 2
-        }, 1032, ["href", "to", "external", "onClick"])) : createCommentVNode("", true)], 64);
-      }), 128))])], 512), [[vShow, _ctx.isMenuOpen]])];
-    }),
-    _: 3
-  })], 2)) : createCommentVNode("", true);
+  }, 8, ["variant", "title", "onClick", "class"]), createElementVNode("div", {
+    "class": normalizeClass(["fw-sidebar-menu-contents", {
+      'fw-sidebar-menu-contents--closed': !_ctx.isMenuOpen
+    }])
+  }, [_ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.enabledItems, function (item, i) {
+    var _ref, _ref2;
+    return openBlock(), createBlock(_component_FwButton, {
+      key: (_ref = (_ref2 = i !== null && i !== void 0 ? i : item.href) !== null && _ref2 !== void 0 ? _ref2 : item.to) !== null && _ref !== void 0 ? _ref : item.label,
+      rounded: false,
+      "class": "!text-left !px-4 bg-transparent border-none !no-underline hover:!bg-brand-bg4 focus:bg-brand-bg4",
+      variant: "quaternary",
+      href: item.href,
+      to: item.to,
+      external: item.external,
+      size: "lg",
+      "aria-current": "page",
+      onClick: item.onClick
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to", "external", "onClick"]);
+  }), 128))])], 2)], 2)), [[vShow, _ctx.hasItems]]);
 }
 
-var css_248z = ".sidebarMenuSlide-enter-active{-webkit-transition:all .6s ease-in;-moz-transition:all .6s ease-in;transition:all .6s ease-in}.sidebarMenuSlide-leave-active{-webkit-transition:opacity 10ms ease-in;-moz-transition:opacity 10ms ease-in;transition:opacity 10ms ease-in}.sidebarMenuSlide-enter-from,.sidebarMenuSlide-leave-to{opacity:0}.sidebarMenuSlide-enter-to,.sidebarMenuSlide-leave-from{opacity:1}.fw-sidebar-menu .fw-button--quaternary.router-link-active{background-color:var(--colorBg4)}";
-var stylesheet = ".sidebarMenuSlide-enter-active{-webkit-transition:all .6s ease-in;-moz-transition:all .6s ease-in;transition:all .6s ease-in}.sidebarMenuSlide-leave-active{-webkit-transition:opacity 10ms ease-in;-moz-transition:opacity 10ms ease-in;transition:opacity 10ms ease-in}.sidebarMenuSlide-enter-from,.sidebarMenuSlide-leave-to{opacity:0}.sidebarMenuSlide-enter-to,.sidebarMenuSlide-leave-from{opacity:1}.fw-sidebar-menu .fw-button--quaternary.router-link-active{background-color:var(--colorBg4)}";
+var css_248z = ".sidebarMenuSlide-enter-active,.sidebarMenuSlide-leave-active{-webkit-transition:opacity .18s ease,-webkit-transform .22s ease;transition:opacity .18s ease,-webkit-transform .22s ease;-moz-transition:transform .22s ease,opacity .18s ease,-moz-transform .22s ease;transition:transform .22s ease,opacity .18s ease;transition:transform .22s ease,opacity .18s ease,-webkit-transform .22s ease,-moz-transform .22s ease;will-change:transform,opacity}.sidebarMenuSlide-enter-from,.sidebarMenuSlide-leave-to{opacity:0;-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);-ms-transform:translateX(-8px);transform:translateX(-8px)}.fw-sidebar-menu-contents,.sidebarMenuSlide-enter-to,.sidebarMenuSlide-leave-from{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.fw-sidebar-menu-contents{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:2rem 1rem;-webkit-transition:opacity .16s ease,-webkit-transform .2s ease;transition:opacity .16s ease,-webkit-transform .2s ease;-moz-transition:opacity .16s ease,transform .2s ease,-moz-transform .2s ease;transition:opacity .16s ease,transform .2s ease;transition:opacity .16s ease,transform .2s ease,-webkit-transform .2s ease,-moz-transform .2s ease;-webkit-transition-delay:.16s;-moz-transition-delay:.16s;transition-delay:.16s;white-space:nowrap;will-change:opacity,transform}.fw-sidebar-menu-contents--closed{opacity:0;pointer-events:none;-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);-ms-transform:translateX(-8px);transform:translateX(-8px);-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms;visibility:hidden}.fw-sidebar-menu-toggle{-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;-moz-transition:transform .2s ease,-moz-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease,-moz-transform .2s ease;will-change:transform}.fw-sidebar-menu-toggle--open{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.fw-sidebar-menu-toggle,.sidebarMenuSlide-enter-active,.sidebarMenuSlide-leave-active{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}}.fw-sidebar-menu .fw-button--quaternary.router-link-active{background-color:var(--colorBg4)}";
+var stylesheet = ".sidebarMenuSlide-enter-active,.sidebarMenuSlide-leave-active{-webkit-transition:opacity .18s ease,-webkit-transform .22s ease;transition:opacity .18s ease,-webkit-transform .22s ease;-moz-transition:transform .22s ease,opacity .18s ease,-moz-transform .22s ease;transition:transform .22s ease,opacity .18s ease;transition:transform .22s ease,opacity .18s ease,-webkit-transform .22s ease,-moz-transform .22s ease;will-change:transform,opacity}.sidebarMenuSlide-enter-from,.sidebarMenuSlide-leave-to{opacity:0;-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);-ms-transform:translateX(-8px);transform:translateX(-8px)}.fw-sidebar-menu-contents,.sidebarMenuSlide-enter-to,.sidebarMenuSlide-leave-from{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.fw-sidebar-menu-contents{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:2rem 1rem;-webkit-transition:opacity .16s ease,-webkit-transform .2s ease;transition:opacity .16s ease,-webkit-transform .2s ease;-moz-transition:opacity .16s ease,transform .2s ease,-moz-transform .2s ease;transition:opacity .16s ease,transform .2s ease;transition:opacity .16s ease,transform .2s ease,-webkit-transform .2s ease,-moz-transform .2s ease;-webkit-transition-delay:.16s;-moz-transition-delay:.16s;transition-delay:.16s;white-space:nowrap;will-change:opacity,transform}.fw-sidebar-menu-contents--closed{opacity:0;pointer-events:none;-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);-ms-transform:translateX(-8px);transform:translateX(-8px);-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms;visibility:hidden}.fw-sidebar-menu-toggle{-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;-moz-transition:transform .2s ease,-moz-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease,-moz-transform .2s ease;will-change:transform}.fw-sidebar-menu-toggle--open{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.fw-sidebar-menu-toggle,.sidebarMenuSlide-enter-active,.sidebarMenuSlide-leave-active{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}}.fw-sidebar-menu .fw-button--quaternary.router-link-active{background-color:var(--colorBg4)}";
 styleInject(css_248z);
 
 script.render = render;