@frollo/frollo-web-ui 9.0.1 → 9.0.2

package/esm/fw-tag-BRxPc4zc.js

@@ -0,0 +1,199 @@
+import { defineComponent, ref, computed, useCssVars, resolveComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, toDisplayString, createVNode, vShow } from 'vue';
+import './fw-button.js';
+import { d as render$1 } from './index-DHyRsKsZ.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import { s as script } from './fw-button-DZTHZLjk.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var TAG_CLASSES = {
+  primary: {
+    text: 'text-button-primary-text',
+    background: 'bg-button-primary-bg',
+    iconButtonType: 'primary'
+  },
+  secondary: {
+    text: 'text-primary',
+    background: 'fw-tag--secondary-bg',
+    iconButtonType: 'tertiary'
+  },
+  tertiary: {
+    text: 'text-body',
+    background: 'bg-brand-bg4',
+    iconButtonType: 'tertiary'
+  },
+  quaternary: {
+    text: 'text-body',
+    background: 'bg-brand-bg3',
+    iconButtonType: 'tertiary'
+  },
+  alert: {
+    text: 'text-white',
+    background: 'bg-brand-warning-bg',
+    iconButtonType: 'error'
+  },
+  success: {
+    text: 'text-secondary',
+    background: 'bg-brand-success-new',
+    iconButtonType: 'success'
+  },
+  error: {
+    text: 'text-white',
+    background: 'bg-brand-error-text',
+    iconButtonType: 'error'
+  }
+};
+var SIZES = {
+  xs: 'px-2 py-px text-xs',
+  sm: 'px-4 py-1 text-sm',
+  md: 'px-4 py-3 h-6 text-md'
+};
+var ICON_SIZES = {
+  xs: 'w-4 h-4',
+  sm: 'w-5 h-5',
+  md: 'w-5 h-5'
+};
+var baseClass = 'inline-flex items-center justify-center text-center whitespace-nowrap rounded-full';
+var __default__ = defineComponent({
+  name: 'FwTag',
+  components: {
+    FwButton: script,
+    XMarkSvg: render$1
+  },
+  props: {
+    /**
+     * The label text of the tag.
+     * Overrides the default slot content.
+     */
+    label: {
+      type: String
+    },
+    /**
+     * The size of the tag. Accepts: 'xs', 'sm' & 'md'
+     */
+    size: {
+      type: String,
+      "default": 'xs',
+      validator: function validator(value) {
+        return ['xs', 'sm', 'md'].includes(value);
+      }
+    },
+    /**
+     * The colour variant of the tag. Accepts 'primary', 'secondary', 'alert', 'error', 'success'
+     */
+    variant: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'alert', 'error', 'success'].includes(value);
+      }
+    },
+    /**
+     * Whether the tag can be dismissed or closed.
+     */
+    dismissable: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  emits: [/** Fires when the tag is dismissed. */
+  'dismissed'],
+  setup: function setup(props, ctx) {
+    var visible = ref(true);
+    var variantDef = computed(function () {
+      return TAG_CLASSES[props.variant];
+    });
+    var _useColours = useColours(),
+      primaryFade5 = _useColours.primaryFade5;
+    var textColorClass = computed(function () {
+      return variantDef.value.text;
+    });
+    var bgColorClass = computed(function () {
+      return variantDef.value.background;
+    });
+    var iconButtonType = computed(function () {
+      return variantDef.value.iconButtonType;
+    });
+    var sizeClass = computed(function () {
+      return SIZES[props.size];
+    });
+    var iconSizeClass = computed(function () {
+      return ICON_SIZES[props.size];
+    });
+    var rootClasses = computed(function () {
+      return [baseClass, textColorClass.value, bgColorClass.value, sizeClass.value, props.dismissable ? 'shadow font-semibold' : 'font-normal'];
+    });
+    var onDismiss = function onDismiss() {
+      visible.value = false;
+      ctx.emit('dismissed');
+    };
+    return {
+      visible: visible,
+      baseClass: baseClass,
+      textColorClass: textColorClass,
+      bgColorClass: bgColorClass,
+      sizeClass: sizeClass,
+      iconSizeClass: iconSizeClass,
+      iconButtonType: iconButtonType,
+      primaryFade5: primaryFade5,
+      onDismiss: onDismiss,
+      rootClasses: rootClasses
+    };
+  }
+});
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "v1b4b8120": _ctx.primaryFade5
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+
+var _hoisted_1 = {
+  key: 0
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_XMarkSvg = resolveComponent("XMarkSvg");
+  var _component_FwButton = resolveComponent("FwButton");
+  return openBlock(), createBlock(Transition, {
+    name: "fw-tag-fade-scale",
+    appear: ""
+  }, {
+    "default": withCtx(function () {
+      return [withDirectives(createElementVNode("span", {
+        "class": normalizeClass(["fw-tag", _ctx.rootClasses]),
+        role: "status"
+      }, [_ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.label), 1)) : renderSlot(_ctx.$slots, "default", {
+        key: 1
+      }), _ctx.dismissable ? (openBlock(), createBlock(_component_FwButton, {
+        key: 2,
+        variant: _ctx.iconButtonType,
+        "class": normalizeClass([_ctx.iconSizeClass, "ml-1 !p-0 flex items-center justify-center border-none rounded-full"]),
+        tabindex: "0",
+        title: "Dismiss filter",
+        "aria-label": "Dismiss",
+        onClick: _ctx.onDismiss
+      }, {
+        "default": withCtx(function () {
+          return [createVNode(_component_XMarkSvg, {
+            "class": "w-3 h-3 font-semibold m-0"
+          })];
+        }),
+        _: 1
+      }, 8, ["variant", "class", "onClick"])) : createCommentVNode("", true)], 2), [[vShow, _ctx.visible]])];
+    }),
+    _: 3
+  });
+}
+
+var css_248z = ".fw-tag{line-height:normal;-webkit-transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease;will-change:transform,opacity}.fw-tag--secondary-bg{background:var(--v1b4b8120)}.fw-tag-fade-scale-enter-active,.fw-tag-fade-scale-leave-active{-webkit-transition:opacity .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease;transition:transform .18s ease,opacity .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease}.fw-tag-fade-scale-enter-from,.fw-tag-fade-scale-leave-to{opacity:0;-webkit-transform:scale(.96);-moz-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}";
+var stylesheet = ".fw-tag{line-height:normal;-webkit-transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease;transition:transform .18s ease,opacity .18s ease,xw background-color .18s ease,color .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease;will-change:transform,opacity}.fw-tag--secondary-bg{background:var(--v1b4b8120)}.fw-tag-fade-scale-enter-active,.fw-tag-fade-scale-leave-active{-webkit-transition:opacity .18s ease,-webkit-transform .18s ease;transition:opacity .18s ease,-webkit-transform .18s ease;-moz-transition:transform .18s ease,opacity .18s ease,-moz-transform .18s ease;transition:transform .18s ease,opacity .18s ease;transition:transform .18s ease,opacity .18s ease,-webkit-transform .18s ease,-moz-transform .18s ease}.fw-tag-fade-scale-enter-from,.fw-tag-fade-scale-leave-to{opacity:0;-webkit-transform:scale(.96);-moz-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}";
+styleInject(css_248z);
+
+__default__.render = render;
+
+export { __default__ as _ };

package/esm/fw-tag.js

@@ -1,7 +1,7 @@
-export { _ as FwTag } from './fw-tag-fDo50Nw7.js';
+export { _ as FwTag } from './fw-tag-BRxPc4zc.js';
 import 'vue';
 import './fw-button.js';
-import './fw-button-YMoW4x4c.js';
-import './index-BsEH8YYr.js';
+import './fw-button-DZTHZLjk.js';
+import './index-DHyRsKsZ.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './get-root-colours-DCjlYelc.js';
+import './get-root-colours-DCCAnRF4.js';

package/esm/fw-toast.js

@@ -1,6 +1,5 @@
-import { defineComponent, ref, computed, onMounted, watchEffect, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, Teleport, createVNode, TransitionGroup, Transition, withCtx, normalizeClass, createElementVNode, renderSlot, resolveDynamicComponent } from 'vue';
-import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
-import { t as render$1, l as render$2, m as render$3 } from './index-BsEH8YYr.js';
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, createBlock, createCommentVNode, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, normalizeClass, createElementVNode, renderSlot, resolveDynamicComponent } from 'vue';
+import { t as render$1, l as render$2, m as render$3 } from './index-DHyRsKsZ.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var script = defineComponent({
@@ -62,85 +61,77 @@ var script = defineComponent({
   },
   emits: ['update:modelValue', 'dismissed'],
   setup: function setup(props, ctx) {
+    var _globalThis$crypto$ra, _globalThis$crypto, _globalThis$crypto$ra2;
+    var typeClasses = {
+      success: 'bg-brand-success-text',
+      error: 'bg-brand-error-text',
+      warning: 'bg-brand-warning-text'
+    };
+    var svgComponent = {
+      success: 'SolidCheckSvg',
+      error: 'SolidXMarkSvg',
+      warning: 'ErrorFilledSvg'
+    };
     var isMounted = ref(false);
-    var uuid = uniqueId();
+    // cheaper + deterministic than lodash uniqueId
+    var uuid = (_globalThis$crypto$ra = (_globalThis$crypto = globalThis.crypto) === null || _globalThis$crypto === void 0 || (_globalThis$crypto$ra2 = _globalThis$crypto.randomUUID) === null || _globalThis$crypto$ra2 === void 0 ? void 0 : _globalThis$crypto$ra2.call(_globalThis$crypto)) !== null && _globalThis$crypto$ra !== void 0 ? _globalThis$crypto$ra : "toast-".concat(Math.random().toString(36).slice(2));
     var isOpen = computed({
       get: function get() {
-        return ref(props.modelValue);
+        return !!props.modelValue;
       },
       set: function set(state) {
-        ctx.emit('update:modelValue', state);
+        return ctx.emit('update:modelValue', state);
       }
     });
-    var mountContainer = ref(false);
     var containerEl = computed(function () {
       return "fw-toast--container-".concat(props.position);
     });
-    var isTop = computed(function () {
-      return props.position.includes('top');
-    });
-    var isLeftRightorCenter = computed(function () {
-      if (props.position.includes('right')) {
-        return 'Right';
-      }
-      if (props.position.includes('left')) {
-        return 'Left';
-      }
-      return 'Center';
-    });
-    var baseClass = "text-white flex min-w-[70%] max-w-[90%] md:min-w-[320px] md:max-w-[600px]\n     py-3.5 px-6";
-    var typeClasses = ref({
-      success: 'bg-brand-success-text',
-      error: 'bg-brand-error-text',
-      warning: 'bg-brand-warning-text'
-    });
-    var svgComponent = ref({
-      success: 'SolidCheckSvg',
-      error: 'SolidXMarkSvg',
-      warning: 'ErrorFilledSvg'
-    });
-    var negativePush = computed(function () {
-      return isTop.value ? '-' : '';
+    var transitionName = computed(function () {
+      if (props.position.includes('right')) return 'toastSlideInRight';
+      if (props.position.includes('left')) return 'toastSlideInLeft';
+      return 'toastSlideInCenter';
     });
+    var baseClass = 'text-white flex min-w-[70%] max-w-[90%] md:min-w-[320px] md:max-w-[600px] py-3.5 px-6';
+    var dismissTimer;
+    var ensureContainer = function ensureContainer() {
+      var _document$querySelect;
+      var el = document.getElementById(containerEl.value);
+      if (el) return;
+      var root = (_document$querySelect = document.querySelector(props.element)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
+      el = document.createElement('div');
+      el.id = containerEl.value;
+      el.className = "fw-toast--container fw-toast--container-".concat(props.position);
+      root.appendChild(el);
+    };
     onMounted(function () {
-      var positionContainer = document.querySelector("#".concat(containerEl.value));
-      if (!positionContainer) {
-        mountContainer.value = true;
-      } else if (positionContainer.children.length) {
-        var _positionContainer$ch;
-        var first = positionContainer === null || positionContainer === void 0 ? void 0 : positionContainer.clientHeight;
-        var toastHeight = (positionContainer === null || positionContainer === void 0 || (_positionContainer$ch = positionContainer.children[0]) === null || _positionContainer$ch === void 0 ? void 0 : _positionContainer$ch.clientHeight) || 52;
-        var last = first + toastHeight;
-        var invert = last - first;
-        positionContainer === null || positionContainer === void 0 || positionContainer.animate([{
-          transform: "translateY(".concat(negativePush.value).concat(invert, "px)")
-        }, {
-          transform: 'translateY(0)'
-        }], {
-          duration: 400,
-          easing: 'ease-in'
-        });
-      }
+      ensureContainer();
       isMounted.value = true;
     });
-    watchEffect(function () {
-      if (isOpen.value.value === true) {
-        setTimeout(function () {
-          isOpen.value.value = false;
+    watch(function () {
+      return props.modelValue;
+    }, function (open) {
+      if (dismissTimer) window.clearTimeout(dismissTimer);
+      if (open) {
+        dismissTimer = window.setTimeout(function () {
+          isOpen.value = false;
           ctx.emit('dismissed');
         }, props.timeout);
       }
+    }, {
+      immediate: true
+    });
+    onBeforeUnmount(function () {
+      if (dismissTimer) window.clearTimeout(dismissTimer);
     });
     return {
+      isMounted: isMounted,
+      isOpen: isOpen,
+      uuid: uuid,
       containerEl: containerEl,
       baseClass: baseClass,
       typeClasses: typeClasses,
       svgComponent: svgComponent,
-      isOpen: isOpen,
-      uuid: uuid,
-      isMounted: isMounted,
-      mountContainer: mountContainer,
-      isLeftRightorCenter: isLeftRightorCenter
+      transitionName: transitionName
     };
   }
 });
@@ -151,26 +142,17 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = ["innerHTML"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(Fragment, null, [_ctx.mountContainer ? (openBlock(), createBlock(Teleport, {
+  return _ctx.isMounted ? (openBlock(), createBlock(Teleport, {
     key: 0,
-    to: _ctx.element
-  }, [createVNode(TransitionGroup, {
-    id: _ctx.containerEl,
-    name: "toastAnimate",
-    tag: "div",
-    appear: "",
-    "class": "fw-toast--container"
-  }, null, 8, ["id"])], 8, ["to"])) : createCommentVNode("", true), _ctx.isMounted ? (openBlock(), createBlock(Teleport, {
-    key: 1,
-    to: '#' + _ctx.containerEl
+    to: "#".concat(_ctx.containerEl)
   }, [createVNode(Transition, {
-    name: "toastSlideIn".concat(_ctx.isLeftRightorCenter),
+    name: _ctx.transitionName,
     appear: ""
   }, {
     "default": withCtx(function () {
-      return [_ctx.isOpen.value ? (openBlock(), createElementBlock("output", {
+      return [_ctx.isOpen ? (openBlock(), createElementBlock("output", {
         id: "fw-toast-".concat(_ctx.uuid),
-        key: "fw-toast-".concat(_ctx.uuid),
+        key: _ctx.uuid,
         role: "status",
         "class": normalizeClass(["fw-toast shadow rounded", [_ctx.baseClass, _ctx.typeClasses[_ctx.type]]])
       }, [createElementVNode("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.svgComponent[_ctx.type]), {
@@ -185,11 +167,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       })])], 10, _hoisted_1)) : createCommentVNode("", true)];
     }),
     _: 3
-  }, 8, ["name"])], 8, ["to"])) : createCommentVNode("", true)], 64);
+  }, 8, ["name"])], 8, ["to"])) : createCommentVNode("", true);
 }
 
-var css_248z = ".fw-toast{will-change:transform}.fw-toast--container{-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;gap:15px;pointer-events:none;position:fixed;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}#fw-toast--container-bottom-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;bottom:50px;margin-left:20px;right:50px}#fw-toast--container-bottom-left{bottom:50px;left:50px;margin-right:20px}#fw-toast--container-bottom{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;bottom:50px;width:100%}#fw-toast--container-top-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;margin-left:20px;right:50px}#fw-toast--container-top-left,#fw-toast--container-top-right{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px}#fw-toast--container-top-left{left:50px;margin-right:20px}#fw-toast--container-top{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px;width:100%}.toastSlideInRight-enter-active{-webkit-animation:toastSlideInRight .4s;-moz-animation:toastSlideInRight .4s;animation:toastSlideInRight .4s}.toastSlideInRight-enter-active,.toastSlideInRight-leave-active{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.toastSlideInRight-leave-active{animation:toastSlideInRight .4s reverse}.toastSlideInLeft-enter-active{-webkit-animation:toastSlideInLeft .4s;-moz-animation:toastSlideInLeft .4s;animation:toastSlideInLeft .4s}.toastSlideInLeft-enter-active,.toastSlideInLeft-leave-active{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.toastSlideInLeft-leave-active{animation:toastSlideInLeft .4s reverse}.toastSlideInCenter-enter-active{-webkit-animation:toastSlideInCenter .4s;-moz-animation:toastSlideInCenter .4s;animation:toastSlideInCenter .4s}.toastSlideInCenter-enter-active,.toastSlideInCenter-leave-active{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.toastSlideInCenter-leave-active{animation:toastSlideInCenter .4s reverse}@-webkit-keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInRight{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-moz-transform:translateX(1%);transform:translateX(1%)}90%{-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInLeft{0%{opacity:0;-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-moz-transform:translateX(3%);transform:translateX(3%)}70%{-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-moz-transform:translateX(1%);transform:translateX(1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);-moz-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@-moz-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}";
-var stylesheet = ".fw-toast{will-change:transform}.fw-toast--container{-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;gap:15px;pointer-events:none;position:fixed;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}#fw-toast--container-bottom-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;bottom:50px;margin-left:20px;right:50px}#fw-toast--container-bottom-left{bottom:50px;left:50px;margin-right:20px}#fw-toast--container-bottom{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;bottom:50px;width:100%}#fw-toast--container-top-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;margin-left:20px;right:50px}#fw-toast--container-top-left,#fw-toast--container-top-right{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px}#fw-toast--container-top-left{left:50px;margin-right:20px}#fw-toast--container-top{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px;width:100%}.toastSlideInRight-enter-active{-webkit-animation:toastSlideInRight .4s;-moz-animation:toastSlideInRight .4s;animation:toastSlideInRight .4s}.toastSlideInRight-enter-active,.toastSlideInRight-leave-active{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.toastSlideInRight-leave-active{animation:toastSlideInRight .4s reverse}.toastSlideInLeft-enter-active{-webkit-animation:toastSlideInLeft .4s;-moz-animation:toastSlideInLeft .4s;animation:toastSlideInLeft .4s}.toastSlideInLeft-enter-active,.toastSlideInLeft-leave-active{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.toastSlideInLeft-leave-active{animation:toastSlideInLeft .4s reverse}.toastSlideInCenter-enter-active{-webkit-animation:toastSlideInCenter .4s;-moz-animation:toastSlideInCenter .4s;animation:toastSlideInCenter .4s}.toastSlideInCenter-enter-active,.toastSlideInCenter-leave-active{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease}.toastSlideInCenter-leave-active{animation:toastSlideInCenter .4s reverse}@-webkit-keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInRight{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-moz-transform:translateX(1%);transform:translateX(1%)}90%{-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInLeft{0%{opacity:0;-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-moz-transform:translateX(3%);transform:translateX(3%)}70%{-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-moz-transform:translateX(1%);transform:translateX(1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);-moz-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@-moz-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}";
+var css_248z = ".fw-toast{will-change:transform,opacity}.fw-toast--container{-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;gap:15px;pointer-events:none;position:fixed}.fw-toast--container-bottom-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;bottom:50px;margin-left:20px;right:50px}.fw-toast--container-bottom-left{bottom:50px;left:50px;margin-right:20px}.fw-toast--container-bottom{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;bottom:50px;width:100%}.fw-toast--container-top-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;margin-left:20px;right:50px}.fw-toast--container-top-left,.fw-toast--container-top-right{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px}.fw-toast--container-top-left{left:50px;margin-right:20px}.fw-toast--container-top{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px;width:100%}.toastSlideInRight-enter-active{-webkit-animation:toastSlideInRight .4s;-moz-animation:toastSlideInRight .4s;animation:toastSlideInRight .4s}.toastSlideInRight-leave-active{animation:toastSlideInRight .4s reverse}.toastSlideInLeft-enter-active{-webkit-animation:toastSlideInLeft .4s;-moz-animation:toastSlideInLeft .4s;animation:toastSlideInLeft .4s}.toastSlideInLeft-leave-active{animation:toastSlideInLeft .4s reverse}.toastSlideInCenter-enter-active{-webkit-animation:toastSlideInCenter .4s;-moz-animation:toastSlideInCenter .4s;animation:toastSlideInCenter .4s}.toastSlideInCenter-leave-active{animation:toastSlideInCenter .4s reverse}@-webkit-keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInRight{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-moz-transform:translateX(1%);transform:translateX(1%)}90%{-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInLeft{0%{opacity:0;-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-moz-transform:translateX(3%);transform:translateX(3%)}70%{-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-moz-transform:translateX(1%);transform:translateX(1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);-moz-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@-moz-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}";
+var stylesheet = ".fw-toast{will-change:transform,opacity}.fw-toast--container{-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;gap:15px;pointer-events:none;position:fixed}.fw-toast--container-bottom-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;bottom:50px;margin-left:20px;right:50px}.fw-toast--container-bottom-left{bottom:50px;left:50px;margin-right:20px}.fw-toast--container-bottom{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;bottom:50px;width:100%}.fw-toast--container-top-right{-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:end;align-items:end;margin-left:20px;right:50px}.fw-toast--container-top-left,.fw-toast--container-top-right{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px}.fw-toast--container-top-left{left:50px;margin-right:20px}.fw-toast--container-top{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:50px;width:100%}.toastSlideInRight-enter-active{-webkit-animation:toastSlideInRight .4s;-moz-animation:toastSlideInRight .4s;animation:toastSlideInRight .4s}.toastSlideInRight-leave-active{animation:toastSlideInRight .4s reverse}.toastSlideInLeft-enter-active{-webkit-animation:toastSlideInLeft .4s;-moz-animation:toastSlideInLeft .4s;animation:toastSlideInLeft .4s}.toastSlideInLeft-leave-active{animation:toastSlideInLeft .4s reverse}.toastSlideInCenter-enter-active{-webkit-animation:toastSlideInCenter .4s;-moz-animation:toastSlideInCenter .4s;animation:toastSlideInCenter .4s}.toastSlideInCenter-leave-active{animation:toastSlideInCenter .4s reverse}@-webkit-keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInRight{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-moz-transform:translateX(1%);transform:translateX(1%)}90%{-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInRight{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}40%{opacity:1;-webkit-transform:translateX(-3%);-moz-transform:translateX(-3%);transform:translateX(-3%)}70%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}90%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes toastSlideInLeft{0%{opacity:0;-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-moz-transform:translateX(3%);transform:translateX(3%)}70%{-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-moz-transform:translateX(1%);transform:translateX(1%)}to{-moz-transform:translateX(0);transform:translateX(0)}}@keyframes toastSlideInLeft{0%{opacity:0;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%)}40%{opacity:1;-webkit-transform:translateX(3%);-moz-transform:translateX(3%);transform:translateX(3%)}70%{-webkit-transform:translateX(-1%);-moz-transform:translateX(-1%);transform:translateX(-1%)}90%{-webkit-transform:translateX(1%);-moz-transform:translateX(1%);transform:translateX(1%)}to{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@-moz-keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@keyframes toastSlideInCenter{0%{opacity:0;scale:0}to{opacity:1;scale:1}}";
 styleInject(css_248z);
 
 script.render = render;

package/esm/fw-transactions-card.js

@@ -1,10 +1,11 @@
-import { defineComponent, createElementVNode, resolveComponent, createBlock, openBlock, withCtx, createCommentVNode, createElementBlock, toDisplayString } from 'vue';
-import { _ as __default__$1 } from './fw-card-D45R4kN-.js';
-import { _ as __default__ } from './fw-image-D-OHafdw.js';
-import './get-root-colours-DCjlYelc.js';
+import { defineComponent, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createCommentVNode, createElementBlock, toDisplayString } from 'vue';
+import { _ as __default__$1 } from './fw-card-XGtsK2bM.js';
+import { _ as __default__ } from './fw-image-A2lXYs0u.js';
+import './get-root-colours-DCCAnRF4.js';
 import './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-bar-DecYSBC_.js';
-import './index-BsEH8YYr.js';
+import './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import './fw-loading-bar-3x4tkF1B.js';
+import './index-DHyRsKsZ.js';
 
 var script = defineComponent({
   name: 'FwTransactionsCard',
@@ -43,30 +44,27 @@ var script = defineComponent({
   }
 });
 
-var _hoisted_1 = /*#__PURE__*/createElementVNode("div", {
-  "class": "absolute top-0 left-0 w-full h-full rounded-lg bg-primary opacity-5 pointer-events-none"
-}, null, -1);
-var _hoisted_2 = {
+var _hoisted_1 = {
   "class": "flex flex-row w-full items-center py-3 px-4"
 };
-var _hoisted_3 = {
+var _hoisted_2 = {
   "class": "flex flex-col w-full flex-1 ml-2"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
   "class": "flex flex-row justify-between gap-x-2 items-center w-full"
 };
-var _hoisted_5 = {
+var _hoisted_4 = {
   "class": "text-left"
 };
-var _hoisted_6 = {
+var _hoisted_5 = {
   "class": "text-p2 font-semibold mb-0"
 };
-var _hoisted_7 = ["innerHTML"];
-var _hoisted_8 = {
+var _hoisted_6 = ["innerHTML"];
+var _hoisted_7 = {
   key: 0,
   "class": "text-right"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   "class": "text-p2 font-semibold mb-0"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -77,17 +75,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "slot-padding": false
   }, {
     "default": withCtx(function () {
-      return [_hoisted_1, createElementVNode("div", _hoisted_2, [_ctx.imageUrl ? (openBlock(), createBlock(_component_FwImage, {
+      return [_cache[0] || (_cache[0] = createElementVNode("div", {
+        "class": "absolute top-0 left-0 w-full h-full rounded-lg bg-primary opacity-5 pointer-events-none"
+      }, null, -1)), createElementVNode("div", _hoisted_1, [_ctx.imageUrl ? (openBlock(), createBlock(_component_FwImage, {
         key: 0,
         src: _ctx.imageUrl,
         type: "background",
         rounded: true,
         "class": "w-9 h-9"
-      }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createElementVNode("p", _hoisted_6, toDisplayString(_ctx.title), 1), _ctx.subTitle ? (openBlock(), createElementBlock("p", {
+      }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("p", _hoisted_5, toDisplayString(_ctx.title), 1), _ctx.subTitle ? (openBlock(), createElementBlock("p", {
         key: 0,
         innerHTML: _ctx.subTitle,
         "class": "text-p-small text-grey-base mb-0"
-      }, null, 8, _hoisted_7)) : createCommentVNode("", true)]), _ctx.amount ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("p", _hoisted_9, toDisplayString(_ctx.amount), 1)])) : createCommentVNode("", true)])])])];
+      }, null, 8, _hoisted_6)) : createCommentVNode("", true)]), _ctx.amount ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("p", _hoisted_8, toDisplayString(_ctx.amount), 1)])) : createCommentVNode("", true)])])])];
     }),
     _: 1
   });

package/esm/{get-root-colours-DCjlYelc.js → get-root-colours-DCCAnRF4.js}

@@ -26,6 +26,7 @@ var useColours = function useColours() {
   var colorBody = style.getPropertyValue('--colorBody');
   var colorBrandBg1 = style.getPropertyValue('--colorBg1');
   var colorErrorText = style.getPropertyValue('--colorErrorText');
+  var colorSuccessNew = style.getPropertyValue('--colorSuccessNew');
   var primaryFade5 = getHexWithOpacity(colorPrimary, 5);
   var primaryFade10 = getHexWithOpacity(colorPrimary, 10);
   var primaryFade20 = getHexWithOpacity(colorPrimary, 20);
@@ -55,7 +56,8 @@ var useColours = function useColours() {
     primaryFade80: primaryFade80,
     primaryFade90: primaryFade90,
     brandBg1Fade95: brandBg1Fade95,
-    colorErrorTextFade5: colorErrorTextFade5
+    colorErrorTextFade5: colorErrorTextFade5,
+    colorSuccessNew: colorSuccessNew
   };
 };