@frollo/frollo-web-ui 4.0.0 → 5.0.0

package/esm/fw-table.js

@@ -1,15 +1,16 @@
+import { t as toString$1 } from './es.number.constructor-d6ff8874.js';
 import { d as deletePropertyOrThrow$1 } from './delete-property-or-throw-8032646c.js';
 import { i as toAbsoluteIndex$1, l as lengthOfArrayLike$2, j as engineUserAgent, f as functionUncurryThis, k as aCallable$1, e as toObject$1, h as fails$1, m as engineV8Version } from './is-forced-752b5893.js';
 import { _ as _export } from './export-a37ba078.js';
-import { t as toString$1 } from './to-string-12728fd2.js';
 import { c as createProperty$1 } from './create-property-534611fd.js';
 import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
-import { b as render$3, c as render$4 } from './index-c6458115.js';
-import { defineComponent, computed, ref, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode } from 'vue';
+import { c as render$3, d as render$4 } from './index-3624f1c9.js';
+import { defineComponent, computed, ref, onMounted, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, withKeys, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode } from 'vue';
+import { u as useColours } from './get-root-colours-e2a1cb28.js';
 import { s as script$2 } from './fw-loading-bar-f5ca605c.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import './object-keys-4f5bf4e7.js';
 import './classof-39c30bd5.js';
+import './object-keys-4f5bf4e7.js';
 import './check-94a5917a.js';
 
 var es_array_sort = {};
@@ -220,9 +221,16 @@ var __default__ = defineComponent({
       type: Boolean,
       "default": false
     },
+    /**
+     * Enable click events on rows.
+     * Emits row data when clicked
+     */
     clickableRows: {
       type: Boolean,
       "default": false
+    },
+    autoSortColumn: {
+      type: Number
     }
   },
   setup: function setup(props, ctx) {
@@ -232,9 +240,13 @@ var __default__ = defineComponent({
     var sortBy = ref('');
     var sortDirection = ref('asc');
     var currentSortedColumn = ref('');
-    var style = getComputedStyle(document.body);
-    var colorPrimary = style.getPropertyValue('--colorPrimary');
-    var bgHoverColor = "".concat(colorPrimary, "0d"); // Adds 5% transparency
+    onMounted(function () {
+      if (Number(props.autoSortColumn) >= 0) {
+        sortColumn(columns.value[Number(props.autoSortColumn)]);
+      }
+    });
+    var _useColours = useColours(),
+      bgHoverColor = _useColours.primaryFade5;
     var sortColumn = function sortColumn(column) {
       if (!isColumnSortable(column)) return;
       currentSortedColumn.value = column;
@@ -242,7 +254,7 @@ var __default__ = defineComponent({
         sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
       } else {
         sortBy.value = column;
-        sortDirection.value = 'asc';
+        sortDirection.value = columnInitSort(column);
       }
     };
     var sortedData = computed(function () {
@@ -282,9 +294,16 @@ var __default__ = defineComponent({
       }
       return false;
     };
+    var columnInitSort = function columnInitSort(column) {
+      if (props.options && props.options[column]) {
+        var _props$options$column4;
+        return ((_props$options$column4 = props.options[column]) === null || _props$options$column4 === void 0 ? void 0 : _props$options$column4.initSortOrder) || 'asc';
+      }
+      return 'asc';
+    };
     var isDisabled = function isDisabled(column) {
-      var _props$options$column4;
-      if (props.options && (_props$options$column4 = props.options[column]) !== null && _props$options$column4 !== void 0 && _props$options$column4.disabled) {
+      var _props$options$column5;
+      if (props.options && (_props$options$column5 = props.options[column]) !== null && _props$options$column5 !== void 0 && _props$options$column5.disabled) {
         return true;
       }
       return false;
@@ -311,7 +330,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "1172a117": _ctx.bgHoverColor
+      "14adfc52": _ctx.bgHoverColor
     };
   });
 };
@@ -322,44 +341,47 @@ __default__.setup = __setup__ ? function (props, ctx) {
 } : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-1f477224"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-7670383f"), n = n(), popScopeId(), n;
 };
-var _hoisted_1$2 = {
+var _hoisted_1$2 = ["aria-busy"];
+var _hoisted_2$1 = {
   "class": "text-p2 border-b border-grey-40"
 };
-var _hoisted_2$1 = ["tabindex", "onKeydown", "onClick"];
-var _hoisted_3$1 = {
+var _hoisted_3$1 = ["tabindex", "onKeydown", "onClick"];
+var _hoisted_4 = {
   "class": "flex flex-row items-center"
 };
-var _hoisted_4 = {
+var _hoisted_5 = {
   key: 0,
   "class": "ml-1 flex items-center justify-center w-5"
 };
-var _hoisted_5 = {
+var _hoisted_6 = {
   "class": "text-p2 bg-white font-light"
 };
-var _hoisted_6 = {
+var _hoisted_7 = {
   key: 0,
-  "class": "py-4 px-5 text-left whitespace-nowrap"
+  "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   key: 0,
-  "class": "py-4 px-5 text-left whitespace-nowrap"
+  "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_8 = ["onClick", "tabindex", "onKeydown"];
-var _hoisted_9 = ["innerHTML"];
+var _hoisted_9 = ["onClick", "tabindex", "onKeydown"];
+var _hoisted_10 = ["innerHTML"];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ArrowSortSvg = resolveComponent("ArrowSortSvg");
   var _component_ArrowDownSvg = resolveComponent("ArrowDownSvg");
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
   return openBlock(), createElementBlock("table", {
-    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : ''])
-  }, [createElementVNode("thead", _hoisted_1$2, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
+    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : '']),
+    "aria-live": "polite",
+    "aria-busy": _ctx.loading
+  }, [createElementVNode("thead", _hoisted_2$1, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
     return openBlock(), createElementBlock(Fragment, {
       key: thKey
     }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("th", {
       key: 0,
-      "class": normalizeClass(["fw-table-head py-6 px-5 text-left font-medium", _ctx.isColumnSortable(column) ? 'cursor-pointer fw-table-head--sortable' : '']),
+      "class": normalizeClass(["fw-table-head py-6 pl-5 pr-3 text-left font-medium", _ctx.isColumnSortable(column) ? 'cursor-pointer fw-table-head--sortable' : '']),
       tabindex: _ctx.isColumnSortable(column) ? 0 : -1,
       onKeydown: withKeys(function ($event) {
         return _ctx.sortColumn(column);
@@ -367,21 +389,21 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return _ctx.sortColumn(column);
       }
-    }, [createElementVNode("div", _hoisted_3$1, [createElementVNode("span", {
+    }, [createElementVNode("div", _hoisted_4, [createElementVNode("span", {
       "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
-    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_4, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
+    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5, [!_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('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
+    })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
       key: 1,
       "class": "inline-block w-4 text-primary rotate-180"
-    })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
+    })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
       key: 2,
       "class": "inline-block w-4 text-primary"
-    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_2$1)) : createCommentVNode("", true)], 64);
+    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_3$1)) : createCommentVNode("", true)], 64);
   }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
     key: 0
-  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_5, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
+  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_6, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
   }, renderList(_ctx.sortedData, function (row, trKey) {
     return openBlock(), createElementBlock("tr", {
@@ -389,10 +411,10 @@ function render$2(_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_6, [createVNode(_component_FwLoadingBar, {
+      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_7, [createVNode(_component_FwLoadingBar, {
         "class": "w-full h-7"
       })])) : createCommentVNode("", true)], 64);
-    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_7, [createVNode(_component_FwLoadingBar, {
+    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_8, [createVNode(_component_FwLoadingBar, {
       "class": "w-full h-7"
     })])) : createCommentVNode("", true)]);
   }), 128)) : (openBlock(true), createElementBlock(Fragment, {
@@ -413,22 +435,22 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         key: colKey
       }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", {
         key: 0,
-        "class": "py-4 px-5 text-left whitespace-nowrap",
+        "class": "py-2 pl-5 pr-3 text-left",
         innerHTML: _ctx.formattedText(row, column)
-      }, null, 8, _hoisted_9)) : createCommentVNode("", true)], 64);
+      }, null, 8, _hoisted_10)) : createCommentVNode("", true)], 64);
     }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
       key: 0,
       row: row
-    }) : createCommentVNode("", true)], 42, _hoisted_8);
-  }), 128))])], 2);
+    }) : createCommentVNode("", true)], 42, _hoisted_9);
+  }), 128))])], 10, _hoisted_1$2);
 }
 
-var css_248z = ".fw-table-head--sortable[data-v-1f477224]:hover{background-color:var(--1172a117)}.fw-table-row[data-v-1f477224]:hover{background-color:var(--1172a117)}";
-var stylesheet = ".fw-table-head--sortable[data-v-1f477224]:hover{background-color:var(--1172a117)}.fw-table-row[data-v-1f477224]:hover{background-color:var(--1172a117)}";
+var css_248z = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
+var stylesheet = ".fw-table-head--sortable[data-v-7670383f]:hover{background-color:var(--14adfc52)}.fw-table-row[data-v-7670383f]:hover{background-color:var(--14adfc52)}";
 styleInject(css_248z);
 
 __default__.render = render$2;
-__default__.__scopeId = "data-v-1f477224";
+__default__.__scopeId = "data-v-7670383f";
 
 var script$1 = defineComponent({
   name: 'FwTableHead'

package/esm/fw-tabs.js

@@ -1,11 +1,10 @@
-import './es.number.constructor-1249bd78.js';
+import './es.number.constructor-d6ff8874.js';
 import { defineComponent, computed, ref, provide, openBlock, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, getCurrentInstance, inject, watchEffect } from 'vue';
 import { e as toObject$1, l as lengthOfArrayLike$1, h as fails$1 } from './is-forced-752b5893.js';
 import { _ as _export } from './export-a37ba078.js';
 import { a as arrayIteration } from './array-iteration-107f927f.js';
 import { a as addToUnscopables$1 } from './add-to-unscopables-2400f45b.js';
 import { d as doesNotExceedSafeInteger$1 } from './does-not-exceed-safe-integer-31d08811.js';
-import './to-string-12728fd2.js';
 import './classof-39c30bd5.js';
 import './array-species-create-a5f5503b.js';
 import './object-create-f6f3a673.js';

package/esm/fw-tag.js

@@ -1,60 +1,96 @@
 import './es.array.includes-91be7771.js';
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { defineComponent, ref, computed, useCssVars, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, withCtx, createVNode, createCommentVNode } from 'vue';
+import './fw-button.js';
+import { b as render$1 } from './index-3624f1c9.js';
+import { u as useColours } from './get-root-colours-e2a1cb28.js';
+import { s as script } from './fw-button-beaf20f4.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 './check-94a5917a.js';
+import './fw-loading-spinner-51deaa3d.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwTag',
+  components: {
+    FwButton: script,
+    XMarkSvg: render$1
+  },
+  emits: ['dismissed'],
   props: {
     /**
-     * The size of the tag. Accepts: 'xs' & 'sm'
+     * The size of the tag. Accepts: 'xs', 'sm' & 'md'
      */
     size: {
       type: String,
       "default": 'xs',
       validator: function validator(value) {
-        return ['xs', 'sm'].includes(value);
+        return ['xs', 'sm', 'md'].includes(value);
       }
     },
     /**
      * The colour variant of the tag.
-     * Accepts 'primary', 'alert', 'error', 'success'
+     * Accepts 'primary', 'secondary', 'alert', 'error', 'success'
      */
     variant: {
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'alert', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'alert', 'error', 'success'].includes(value);
       }
+    },
+    /**
+     * Whether the tag can be dismissed or closed.
+     * Emits the @dismissed event
+     */
+    dismissable: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props) {
-    var baseClass = ref('inline-block font-semibold text-center whitespace-nowrap rounded-full');
+    var baseClass = ref("\n      inline-flex items-center justify-center font-semibold text-center whitespace-nowrap rounded-full shadow\n    ");
+    var _useColours = useColours(),
+      primaryFade5 = _useColours.primaryFade5;
     var tagClasses = ref({
       primary: {
         text: 'text-button-primary-text',
-        background: 'bg-button-primary-bg'
+        background: 'bg-button-primary-bg',
+        iconType: 'primary'
+      },
+      secondary: {
+        text: 'text-primary',
+        background: 'fw-tag--secondary-bg',
+        iconType: 'tertiary'
       },
       alert: {
         text: 'text-white',
-        background: 'bg-alert'
+        background: 'bg-alert',
+        iconType: 'error'
       },
       success: {
         text: 'text-white',
-        background: 'bg-success'
+        background: 'bg-success',
+        iconType: 'success'
       },
       error: {
         text: 'text-white',
-        background: 'bg-error'
+        background: 'bg-error',
+        iconType: 'error'
       }
     });
     var sizes = ref({
       xs: 'px-2 py-px text-xs',
-      sm: 'px-4 py-1 text-xs'
+      sm: 'px-4 py-1 text-xs',
+      md: 'px-3 py-[4.75px] text-xs'
+    });
+    var iconSizes = ref({
+      xs: 'w-4 h-4',
+      sm: 'w-5 h-5',
+      md: 'w-6 h-6'
     });
     var textColorClass = computed(function () {
       return tagClasses.value[props.variant].text;
@@ -62,28 +98,67 @@ var script = defineComponent({
     var bgColorClass = computed(function () {
       return tagClasses.value[props.variant].background;
     });
+    var iconButtonType = computed(function () {
+      return tagClasses.value[props.variant].iconType;
+    });
     var sizeClass = computed(function () {
       return sizes.value[props.size];
     });
+    var iconSizeClass = computed(function () {
+      return iconSizes.value[props.size];
+    });
     return {
       baseClass: baseClass,
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
-      sizeClass: sizeClass
+      sizeClass: sizeClass,
+      iconSizeClass: iconSizeClass,
+      iconButtonType: iconButtonType,
+      primaryFade5: primaryFade5
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "f1e3ea3e": _ctx.primaryFade5
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_XMarkSvg = resolveComponent("XMarkSvg");
+  var _component_FwButton = resolveComponent("FwButton");
   return openBlock(), createElementBlock("span", {
     "class": normalizeClass(["fw-tag", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass]])
-  }, [renderSlot(_ctx.$slots, "default")], 2);
+  }, [renderSlot(_ctx.$slots, "default"), _ctx.dismissable ? (openBlock(), createBlock(_component_FwButton, {
+    key: 0,
+    variant: _ctx.iconButtonType,
+    tabindex: "",
+    title: "Dismiss filter",
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('dismissed');
+    }),
+    "class": normalizeClass([_ctx.iconSizeClass, "ml-1 !p-0 flex items-center justify-center border-none rounded-full"])
+  }, {
+    "default": withCtx(function () {
+      return [createVNode(_component_XMarkSvg, {
+        "class": "w-full h-full font-semibold m-0"
+      })];
+    }),
+    _: 1
+  }, 8, ["variant", "class"])) : createCommentVNode("", true)], 2);
 }
 
-var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
-var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}";
+var css_248z = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
+var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.fw-tag--secondary-bg{background:var(--f1e3ea3e)}";
 styleInject(css_248z);
 
-script.render = render;
+__default__.render = render;
 
-export { script as FwTag };
+export { __default__ as FwTag };

package/esm/fw-toast.js

@@ -1,13 +1,12 @@
 import './es.array.includes-91be7771.js';
-import './es.number.constructor-1249bd78.js';
+import { t as toString$1 } from './es.number.constructor-d6ff8874.js';
 import { n as isObject$1, p as classofRaw, w as wellKnownSymbol$2, f as functionUncurryThis, r as requireObjectCoercible$1 } from './is-forced-752b5893.js';
 import { _ as _export } from './export-a37ba078.js';
-import { t as toString$1 } from './to-string-12728fd2.js';
 import './es.array.concat-987938be.js';
 import './web.timers-0f117224.js';
 import { defineComponent, ref, computed, onMounted, watchEffect, openBlock, createElementBlock, Fragment, createBlock, Teleport, createVNode, TransitionGroup, createCommentVNode, Transition, withCtx, normalizeClass, createElementVNode, resolveDynamicComponent, toDisplayString, renderSlot } from 'vue';
 import { u as uniqueId } from './uniqueId-fe08534a.js';
-import { d as render$1, e as render$2, f as render$3 } from './index-c6458115.js';
+import { e as render$1, f as render$2, g as render$3 } from './index-3624f1c9.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './add-to-unscopables-2400f45b.js';
 import './object-create-f6f3a673.js';

package/esm/fw-transactions-card.js

@@ -1,26 +1,25 @@
 import { defineComponent, createElementVNode, resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, toDisplayString, createElementBlock } from 'vue';
 import { s as script$1 } from './fw-card-1b6a67fe.js';
-import { s as script$2 } from './fw-image-3fa960e1.js';
+import { s as script$2 } from './fw-image-161b667a.js';
 import './es.array.includes-91be7771.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 './es.number.constructor-1249bd78.js';
-import './to-string-12728fd2.js';
+import './es.number.constructor-d6ff8874.js';
 import './classof-39c30bd5.js';
-import './es.array.find-dfa1f42f.js';
 import './array-iteration-107f927f.js';
 import './array-species-create-a5f5503b.js';
-import './es.string.iterator-284b31d4.js';
+import './array-method-is-strict-055b1830.js';
+import './es.array.find-dfa1f42f.js';
+import './es.string.iterator-590198a8.js';
 import './create-property-534611fd.js';
 import './web.timers-0f117224.js';
 import './function-apply-ce251590.js';
-import './array-method-is-strict-055b1830.js';
 import './fw-loading-bar-f5ca605c.js';
 import './style-inject.es-1f59c1d0.js';
-import './index-c6458115.js';
+import './index-3624f1c9.js';
 import './check-94a5917a.js';
 
 var script = defineComponent({

package/esm/get-root-colours-e2a1cb28.js

@@ -0,0 +1,21 @@
+var useColours = function useColours() {
+  var style = getComputedStyle(document.body);
+  var colorPrimary = style.getPropertyValue('--colorPrimary');
+  var colorSecondary = style.getPropertyValue('--colorSecondary');
+  var colorTertiary = style.getPropertyValue('--colorTertiary');
+  var fontFamily = style.getPropertyValue('--fontFamily');
+  var colorBody = style.getPropertyValue('--colorBody');
+  var primaryFade40 = "".concat(colorPrimary, "66"); // Adds 40% transparency
+  var primaryFade5 = "".concat(colorPrimary, "0d"); // Adds 5% transparency
+  return {
+    colorPrimary: colorPrimary,
+    colorSecondary: colorSecondary,
+    colorTertiary: colorTertiary,
+    fontFamily: fontFamily,
+    colorBody: colorBody,
+    primaryFade5: primaryFade5,
+    primaryFade40: primaryFade40
+  };
+};
+
+export { useColours as u };

package/esm/{index-1a41e7bf.js → index-2766bfe4.js}

@@ -1,10 +1,9 @@
-import './es.number.constructor-1249bd78.js';
+import { t as toString$2 } from './es.number.constructor-d6ff8874.js';
 import { q as anObject$3, h as fails$5, g as global$3, s as functionCall, f as functionUncurryThis, u as shared$1, v as internalState, b as defineBuiltIn$1, w as wellKnownSymbol$2, c as createNonEnumerableProperty$1, e as toObject$2, x as isCallable$2, p as classofRaw, y as toIntegerOrInfinity$2, z as toLength$1, r as requireObjectCoercible$1, A as getMethod$1, i as toAbsoluteIndex$1, l as lengthOfArrayLike$1 } from './is-forced-752b5893.js';
 import { _ as _export } from './export-a37ba078.js';
-import { t as toString$2 } from './to-string-12728fd2.js';
 import { o as objectCreate } from './object-create-f6f3a673.js';
 import { f as functionApply } from './function-apply-ce251590.js';
-import { s as stringMultibyte } from './es.string.iterator-284b31d4.js';
+import { s as stringMultibyte } from './es.string.iterator-590198a8.js';
 import { d as deletePropertyOrThrow$1 } from './delete-property-or-throw-8032646c.js';
 import { a as arrayIteration } from './array-iteration-107f927f.js';
 import { a as arrayMethodHasSpeciesSupport$2 } from './array-method-has-species-support-3d413468.js';
@@ -13,6 +12,7 @@ import { d as doesNotExceedSafeInteger$1 } from './does-not-exceed-safe-integer-
 import { a as arraySpeciesCreate$1 } from './array-species-create-a5f5503b.js';
 import { c as createProperty$1 } from './create-property-534611fd.js';
 import { version as version$1, isProxy, toRaw, defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, watch, h, computed, resolveComponent, openBlock, createElementBlock, normalizeStyle, toDisplayString, createCommentVNode, createVNode } from 'vue';
+import { u as useColours } from './get-root-colours-e2a1cb28.js';
 import { u as uniqueId } from './uniqueId-fe08534a.js';
 
 function _arrayLikeToArray(arr, len) {
@@ -3376,9 +3376,9 @@ function capBezierPoints(points, area) {
     }
     return valueInPixels;
 }
-const getComputedStyle$1 = (element)=>element.ownerDocument.defaultView.getComputedStyle(element, null);
+const getComputedStyle = (element)=>element.ownerDocument.defaultView.getComputedStyle(element, null);
 function getStyle(el, property) {
-    return getComputedStyle$1(el).getPropertyValue(property);
+    return getComputedStyle(el).getPropertyValue(property);
 }
 const positions = [
     'top',
@@ -3433,7 +3433,7 @@ const useOffsetPos = (x, y, target)=>(x > 0 || y > 0) && (!target || !target.sha
         return event;
     }
     const { canvas , currentDevicePixelRatio  } = chart;
-    const style = getComputedStyle$1(canvas);
+    const style = getComputedStyle(canvas);
     const borderBox = style.boxSizing === 'border-box';
     const paddings = getPositionedStyle(style, 'padding');
     const borders = getPositionedStyle(style, 'border', 'width');
@@ -3459,7 +3459,7 @@ function getContainerSize(canvas, width, height) {
             height = canvas.clientHeight;
         } else {
             const rect = container.getBoundingClientRect(); // this is the border box of the container
-            const containerStyle = getComputedStyle$1(container);
+            const containerStyle = getComputedStyle(container);
             const containerBorder = getPositionedStyle(containerStyle, 'border', 'width');
             const containerPadding = getPositionedStyle(containerStyle, 'padding');
             width = rect.width - containerPadding.width - containerBorder.width;
@@ -3478,7 +3478,7 @@ function getContainerSize(canvas, width, height) {
 const round1 = (v)=>Math.round(v * 10) / 10;
 // eslint-disable-next-line complexity
 function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
-    const style = getComputedStyle$1(canvas);
+    const style = getComputedStyle(canvas);
     const margins = getPositionedStyle(style, 'margin');
     const maxWidth = parseMaxStyle(style.maxWidth, canvas, 'clientWidth') || INFINITY;
     const maxHeight = parseMaxStyle(style.maxHeight, canvas, 'clientHeight') || INFINITY;
@@ -15681,12 +15681,12 @@ var script = defineComponent({
         return strToNumber(singleY);
       })) || [];
     });
-    var style = getComputedStyle(document.body);
-    var colorPrimary = style.getPropertyValue('--colorPrimary');
-    var fontFamily = style.getPropertyValue('--fontFamily');
-    var colorBody = style.getPropertyValue('--colorBody');
-    var primaryFade = "".concat(colorPrimary, "66"); // Adds 40% transparency
-    var bgColor = "".concat(colorPrimary, "0d"); // Adds 5% transparency
+    var _useColours = useColours(),
+      colorPrimary = _useColours.colorPrimary,
+      colorBody = _useColours.colorBody,
+      fontFamily = _useColours.fontFamily,
+      bgColor = _useColours.primaryFade5,
+      primaryFade = _useColours.primaryFade40;
     var maxY = computed(function () {
       return Math.max.apply(Math, _toConsumableArray(yModel.value));
     });