@frollo/frollo-web-ui 8.5.3 → 9.0.0

package/esm/fw-drawer.js

@@ -1,20 +1,16 @@
-import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString, vShow } from 'vue';
-import { s as script$1 } from './fw-button-DNozvo7B.js';
-import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
-import { b as render$1 } from './index-CzZMBMV_.js';
+import { defineComponent, ref, computed, onMounted, useCssVars, resolveComponent, createBlock, createCommentVNode, openBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
+import { s as script } from './fw-button-CnQvA7oM.js';
+import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { d as render$1 } from './index-BsEH8YYr.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-spinner-BFpFFRJm.js';
-import './check--YD4Ts6g.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwDrawer',
   components: {
-    FwButton: script$1,
+    FwButton: script,
     XMarkSvg: render$1
   },
-  emits: ['update:modelValue', /** Fired when cancel button is clicked */
-  'cancel', /** Fired when confirm button is clicked */
-  'confirm'],
   props: {
     /**
      * The drawer's v-model. Controls the visibility of the drawer.
@@ -41,6 +37,13 @@ var script = defineComponent({
       type: String,
       "default": 'dialog'
     },
+    /**
+     * The element to attach the modal too. Defaults to `#app` element.
+     */
+    element: {
+      type: String,
+      "default": '#app'
+    },
     /**
      * Whether to show the cancel button
      */
@@ -69,7 +72,7 @@ var script = defineComponent({
       type: String,
       "default": 'secondary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text', 'transparent'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'error', 'success', 'link', 'text', 'transparent', 'gradient'].includes(value);
       }
     },
     /**
@@ -86,15 +89,20 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'link', 'text', 'transparent'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'error', 'success', 'link', 'text', 'transparent', 'gradient'].includes(value);
       }
     }
   },
+  emits: ['update:modelValue', /** Fired when cancel button is clicked */
+  'cancel', /** Fired when confirm button is clicked */
+  'confirm'],
   setup: function setup(props, ctx) {
-    var baseDrawerClass = "fixed shadow-card top-0 right-0 z-40 h-screen bg-white";
-    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-card bg-white p-6 clip-top-shadow\n    ";
+    var baseDrawerClass = "fixed top-0 right-0 z-40 h-screen bg-brand-appBg w-full md:w-2/3 lg:w-1/2 xl:w-1/3";
+    var drawerFooterClass = "\n      sticky bottom-0 w-full shadow-top bg-brand-appBg p-6 clip-top-shadow\n    ";
     var isMounted = ref(false);
     var uuid = uniqueId();
+    var _useColours = useColours(),
+      drawerBgColour = _useColours.brandBg1Fade95;
     var isOpen = computed({
       get: function get() {
         return props.modelValue;
@@ -121,100 +129,128 @@ var script = defineComponent({
       uuid: uuid,
       isMounted: isMounted,
       onConfirmed: onConfirmed,
-      onCancelled: onCancelled
+      onCancelled: onCancelled,
+      drawerBgColour: drawerBgColour
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "699c0493": _ctx.drawerBgColour
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
-var _hoisted_1 = ["id"];
-var _hoisted_2 = {
+var _hoisted_1 = {
+  "class": "fw-drawer-bg fixed z-[9999] top-0 left-0 w-full h-full"
+};
+var _hoisted_2 = ["id"];
+var _hoisted_3 = {
   "class": "flex flex-row justify-between items-center p-6"
 };
-var _hoisted_3 = ["id"];
 var _hoisted_4 = ["id"];
-var _hoisted_5 = {
+var _hoisted_5 = ["id"];
+var _hoisted_6 = {
   key: 0,
   "class": "flex items-center"
 };
-var _hoisted_6 = {
+var _hoisted_7 = {
   key: 1,
   "class": "flex items-center space-x-2"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_XMarkSvg = resolveComponent("XMarkSvg");
   var _component_FwButton = resolveComponent("FwButton");
-  return openBlock(), createBlock(Transition, {
-    name: "drawerSlideInOut",
+  return _ctx.isMounted ? (openBlock(), createBlock(Teleport, {
+    key: 0,
+    to: _ctx.element
+  }, [createVNode(Transition, {
+    name: "drawerBgFadeIn",
     appear: ""
   }, {
     "default": withCtx(function () {
-      return [withDirectives(createElementVNode("div", {
-        id: "fw-drawer-".concat(_ctx.uuid),
-        "class": normalizeClass(["fw-drawer", _ctx.baseDrawerClass]),
-        tabindex: "-1",
-        "aria-labelledby": "drawer-label"
-      }, [createElementVNode("div", _hoisted_2, [_ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
-        key: 0,
-        id: "drawer_".concat(_ctx.uuid, "_header"),
-        "class": "inline-flex items-center mb-0 text-body font-bold"
-      }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_3)) : createCommentVNode("", true), createVNode(_component_FwButton, {
-        variant: "transparent",
-        tabindex: "",
-        title: "Close drawer",
-        onClick: _cache[0] || (_cache[0] = function ($event) {
-          return _ctx.onCancelled();
-        }),
-        "class": "inline-block w-9 h-9 !p-0 inline-flex items-center justify-center"
-      }, {
-        "default": withCtx(function () {
-          return [createVNode(_component_XMarkSvg, {
-            "class": "w-6 h-6 inline-block m-0 p-[3px] transition-rotate duration-200"
-          })];
-        }),
-        _: 1
-      })]), _ctx.$slots.body ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        "class": "fw-drawer-body h-[calc(100vh-155px)] overflow-y-scroll",
-        id: "drawer_".concat(_ctx.uuid, "_body")
-      }, [renderSlot(_ctx.$slots, "body")], 8, _hoisted_4)) : createCommentVNode("", true), _ctx.$slots.footer || _ctx.showConfirm || _ctx.showCancel ? (openBlock(), createElementBlock("div", {
-        key: 1,
-        "class": normalizeClass(["fw-drawer-footer", _ctx.drawerFooterClass])
-      }, [_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "footer")])) : (openBlock(), createElementBlock("div", _hoisted_6, [_ctx.showCancel ? (openBlock(), createBlock(_component_FwButton, {
-        key: 0,
-        "class": "basis-1/2",
-        variant: _ctx.cancelButtonType,
-        "aria-label": _ctx.cancelButtonText,
-        onClick: _cache[1] || (_cache[1] = function ($event) {
-          return _ctx.onCancelled();
-        })
-      }, {
-        "default": withCtx(function () {
-          return [createTextVNode(toDisplayString(_ctx.cancelButtonText), 1)];
-        }),
-        _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true), _ctx.showConfirm ? (openBlock(), createBlock(_component_FwButton, {
-        key: 1,
-        "class": "basis-1/2",
-        variant: _ctx.confirmButtonType,
-        "aria-label": _ctx.confirmButtonText,
-        onClick: _cache[2] || (_cache[2] = function ($event) {
-          return _ctx.onConfirmed();
-        })
+      return [withDirectives(createElementVNode("div", _hoisted_1, [createVNode(Transition, {
+        name: "drawerSlideInOut",
+        appear: ""
       }, {
         "default": withCtx(function () {
-          return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
+          return [withDirectives(createElementVNode("div", {
+            id: "fw-drawer-".concat(_ctx.uuid),
+            "class": normalizeClass(["fw-drawer", _ctx.baseDrawerClass]),
+            tabindex: "-1",
+            "aria-labelledby": "drawer-label"
+          }, [createElementVNode("div", _hoisted_3, [_ctx.$slots.header ? (openBlock(), createElementBlock("h2", {
+            key: 0,
+            id: "drawer_".concat(_ctx.uuid, "_header"),
+            "class": "inline-flex items-center mb-0 text-body font-bold"
+          }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_4)) : createCommentVNode("", true), createVNode(_component_FwButton, {
+            variant: "transparent",
+            tabindex: "",
+            title: "Close drawer",
+            "class": "inline-block w-9 h-9 !p-0 inline-flex items-center justify-center",
+            onClick: _cache[0] || (_cache[0] = function ($event) {
+              return _ctx.onCancelled();
+            })
+          }, {
+            "default": withCtx(function () {
+              return [createVNode(_component_XMarkSvg, {
+                name: "xmark",
+                "class": "w-6 h-6 inline-block m-0 p-[3px] transition-rotate duration-200"
+              })];
+            }),
+            _: 1
+          })]), _ctx.$slots.body ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            id: "drawer_".concat(_ctx.uuid, "_body"),
+            "class": "fw-drawer-body h-[calc(100vh-155px)] overflow-y-scroll"
+          }, [renderSlot(_ctx.$slots, "body")], 8, _hoisted_5)) : createCommentVNode("", true), _ctx.$slots.footer || _ctx.showConfirm || _ctx.showCancel ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            "class": normalizeClass(["fw-drawer-footer", _ctx.drawerFooterClass])
+          }, [_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer")])) : (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.showCancel ? (openBlock(), createBlock(_component_FwButton, {
+            key: 0,
+            "class": "basis-1/2",
+            variant: _ctx.cancelButtonType,
+            "aria-label": _ctx.cancelButtonText,
+            onClick: _cache[1] || (_cache[1] = function ($event) {
+              return _ctx.onCancelled();
+            })
+          }, {
+            "default": withCtx(function () {
+              return [createTextVNode(toDisplayString(_ctx.cancelButtonText), 1)];
+            }),
+            _: 1
+          }, 8, ["variant", "aria-label"])) : createCommentVNode("", true), _ctx.showConfirm ? (openBlock(), createBlock(_component_FwButton, {
+            key: 1,
+            "class": "basis-1/2",
+            variant: _ctx.confirmButtonType,
+            "aria-label": _ctx.confirmButtonText,
+            onClick: _cache[2] || (_cache[2] = function ($event) {
+              return _ctx.onConfirmed();
+            })
+          }, {
+            "default": withCtx(function () {
+              return [createTextVNode(toDisplayString(_ctx.confirmButtonText), 1)];
+            }),
+            _: 1
+          }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)]))], 2)) : createCommentVNode("", true)], 10, _hoisted_2), [[vShow, _ctx.isOpen]])];
         }),
-        _: 1
-      }, 8, ["variant", "aria-label"])) : createCommentVNode("", true)]))], 2)) : createCommentVNode("", true)], 10, _hoisted_1), [[vShow, _ctx.isOpen]])];
+        _: 3
+      })], 512), [[vShow, _ctx.isOpen]])];
     }),
     _: 3
-  });
+  })], 8, ["to"])) : createCommentVNode("", true);
 }
 
-var css_248z = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;-moz-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes drawerSlideInOut{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-moz-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}";
-var stylesheet = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;-moz-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes drawerSlideInOut{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-moz-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}";
+var css_248z = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;-moz-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes drawerSlideInOut{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-moz-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}.drawerBgFadeIn-enter-active{-webkit-animation:drawerBgFadeIn .3s;-moz-animation:drawerBgFadeIn .3s;animation:drawerBgFadeIn .3s;-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;transition:opacity .3s ease-in}.drawerBgFadeIn-leave-active{animation:drawerBgFadeIn .3s reverse;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}@-webkit-keyframes drawerBgFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes drawerBgFadeIn{0%{opacity:0}to{opacity:1}}@keyframes drawerBgFadeIn{0%{opacity:0}to{opacity:1}}.fw-drawer-bg{background-color:var(--699c0493)}";
+var stylesheet = ".clip-top-shadow{-webkit-clip-path:inset(-4px 0 0 0);clip-path:inset(-4px 0 0 0)}.drawerSlideInOut-enter-active{-webkit-animation:drawerSlideInOut .4s;-moz-animation:drawerSlideInOut .4s;animation:drawerSlideInOut .4s;-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;transition:all .4s ease-in}.drawerSlideInOut-leave-active{animation:drawerSlideInOut .4s reverse;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out}@-webkit-keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes drawerSlideInOut{0%{opacity:0;-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-moz-transform:translateX(0);transform:translateX(0)}}@keyframes drawerSlideInOut{0%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}to{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0)}}.drawerBgFadeIn-enter-active{-webkit-animation:drawerBgFadeIn .3s;-moz-animation:drawerBgFadeIn .3s;animation:drawerBgFadeIn .3s;-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;transition:opacity .3s ease-in}.drawerBgFadeIn-leave-active{animation:drawerBgFadeIn .3s reverse;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}@-webkit-keyframes drawerBgFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes drawerBgFadeIn{0%{opacity:0}to{opacity:1}}@keyframes drawerBgFadeIn{0%{opacity:0}to{opacity:1}}.fw-drawer-bg{background-color:var(--699c0493)}";
 styleInject(css_248z);
 
-script.render = render;
+__default__.render = render;
 
-export { script as FwDrawer };
+export { __default__ as FwDrawer };

package/esm/{fw-dropdown-CbgOvgOt.js → fw-dropdown-58wyuzsW.js}

@@ -1,15 +1,15 @@
-import { defineComponent, toRef, ref, computed, watch, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, createBlock, renderSlot, createVNode, Transition, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
+import { defineComponent, toRef, ref, computed, watch, onMounted, onBeforeUnmount, useCssVars, pushScopeId, popScopeId, resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, createVNode, normalizeClass, createTextVNode, toDisplayString, createBlock, renderSlot, Transition, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
 import { u as useField } from './vee-validate.esm-3ptvCDR1.js';
-import { r as render$1 } from './index-CzZMBMV_.js';
-import { s as script$1 } from './fw-image-Dl96Dc27.js';
+import { _ as __default__$1 } from './fw-image-D-OHafdw.js';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { r as render$1 } from './index-BsEH8YYr.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
-var script = defineComponent({
+var __default__ = defineComponent({
   name: 'FwDropdown',
-  emits: ['update:modelValue'],
   components: {
     ChevronDownSvg: render$1,
-    FwImage: script$1
+    FwImage: __default__$1
   },
   props: {
     /**
@@ -75,16 +75,20 @@ var script = defineComponent({
       "default": false
     }
   },
+  emits: ['update:modelValue'],
   setup: function setup(props, ctx) {
-    var menuButtonClass = "inline-flex w-full justify-between items-center rounded-md border-2 bg-white px-4 py-3\n      shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
-    var menuClass = "absolute left-0 mt-1 w-full text-left z-10 origin-top-left rounded-md bg-grey-20 drop-shadow-lg\n      ring-1 ring-black ring-opacity-5 focus:outline-none";
-    var menuItemClass = "block px-4 py-3 my-1 cursor-pointer hover:bg-white first:rounded-t-md last:rounded-b-md\n      first:mt-0 last:mb-0";
+    var menuButtonClass = "inline-flex w-full justify-between items-center rounded-lg border bg-white border-grey-100 \n    hover:border-brand-text3 focus:border-brand-text3 px-4 py-3 outline-none";
+    var menuClass = "absolute left-0 mt-2 w-full text-left z-10 origin-top-left rounded-lg border bg-white border-grey-100 shadow-dropdown\n      ring-1 ring-black ring-opacity-5 focus:outline-none";
+    var menuItemClass = "fw-dropdown--menu-item block px-4 py-3 my-1 cursor-pointer first:rounded-t-lg last:rounded-b-lg\n      first:mt-0 last:mb-0";
     var nameRef = toRef(props, 'name');
     var _useField = useField(nameRef, props.rules),
       errors = _useField.errors,
       errorMessage = _useField.errorMessage,
       meta = _useField.meta,
       fieldVal = _useField.value;
+    var _useColours = useColours(),
+      primaryFade5 = _useColours.primaryFade5,
+      colorErrorTextFade5 = _useColours.colorErrorTextFade5;
     var selectedOption = ref(null);
     var selectValue = computed({
       get: function get() {
@@ -109,7 +113,7 @@ var script = defineComponent({
     var menuItemActiveClass = function menuItemActiveClass(option) {
       var _selectedOption$value;
       if (((_selectedOption$value = selectedOption.value) === null || _selectedOption$value === void 0 ? void 0 : _selectedOption$value.value) === option.value) {
-        return 'bg-white';
+        return 'fw-dropdown--open';
       }
       return 'bg-none';
     };
@@ -143,93 +147,108 @@ var script = defineComponent({
       isOpen: isOpen,
       selectValue: selectValue,
       selectOption: selectOption,
-      selectedOption: selectedOption
+      selectedOption: selectedOption,
+      primaryFade5: primaryFade5,
+      colorErrorTextFade5: colorErrorTextFade5
     };
   }
 });
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "5e0ab1b5": _ctx.primaryFade5,
+      "f95113ee": _ctx.colorErrorTextFade5
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-72f0ebf0"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-d941ca80"), n = n(), popScopeId(), n;
 };
 var _hoisted_1 = {
   "class": "fw-dropdown relative"
 };
 var _hoisted_2 = {
   key: 0,
-  "class": "block mb-1 font-medium text-left"
+  "class": "text-brand-error-text ml-0.5"
 };
-var _hoisted_3 = {
+var _hoisted_3 = ["id", "aria-expanded"];
+var _hoisted_4 = {
   key: 0,
-  "class": "text-error ml-0.5"
+  "class": "flex items-center gap-x-2"
 };
-var _hoisted_4 = ["id", "aria-expanded"];
 var _hoisted_5 = {
-  key: 0,
-  "class": "flex items-center gap-x-2"
+  "class": "flex flex-col text-left"
 };
 var _hoisted_6 = {
-  "class": "flex flex-col text-left"
+  "class": "text-p text-body leading-none"
 };
 var _hoisted_7 = {
-  "class": "font-medium"
-};
-var _hoisted_8 = {
   key: 0,
-  "class": "text-p-small"
+  "class": "text-p-small leading-none text-body"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   key: 1,
-  "class": "flex flex-row items-center gap-x-2 text-grey-light"
-};
-var _hoisted_10 = {
-  "class": ""
+  "class": "flex flex-row items-center gap-x-2 text-grey-100 text-p leading-none"
 };
-var _hoisted_11 = ["aria-labelledby"];
-var _hoisted_12 = ["onClick"];
-var _hoisted_13 = {
+var _hoisted_9 = ["aria-labelledby"];
+var _hoisted_10 = ["onClick"];
+var _hoisted_11 = {
   "class": "flex items-center gap-x-2"
 };
-var _hoisted_14 = {
+var _hoisted_12 = {
   "class": "flex flex-col text-left"
 };
-var _hoisted_15 = {
+var _hoisted_13 = {
+  "class": "text-p text-body leading-none"
+};
+var _hoisted_14 = {
   key: 0,
-  "class": "text-p-small"
+  "class": "text-p-small text-body leading-none"
 };
-var _hoisted_16 = {
+var _hoisted_15 = {
   key: 1,
-  "class": "text-left text-sm min-h-[21px]"
+  "class": "text-left text-p-small mt-2 min-h-[21px]"
 };
-var _hoisted_17 = {
+var _hoisted_16 = {
   key: 0,
-  "class": "text-error"
+  "class": "text-brand-error-text"
 };
-var _hoisted_18 = {
+var _hoisted_17 = {
   key: 1,
-  "class": "text-grey-base"
+  "class": "text-brand-text2"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _ctx$selectedOption, _ctx$selectedOption2, _ctx$selectedOption3, _ctx$selectedOption4;
   var _component_FwImage = resolveComponent("FwImage");
   var _component_ChevronDownSvg = resolveComponent("ChevronDownSvg");
-  return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true), createElementVNode("button", {
+  return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.label ? (openBlock(), createElementBlock("label", {
+    key: 0,
+    "class": normalizeClass([[(_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? 'text-brand-error-text' : 'text-brand-text2'], "block mb-1 text-base text-left"])
+  }, [createTextVNode(toDisplayString(_ctx.label) + " ", 1), _ctx.required ? (openBlock(), createElementBlock("span", _hoisted_2, "*")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("button", {
+    id: "".concat(_ctx.name, "-fw-dropdown--button"),
     type: "button",
-    "class": normalizeClass([_ctx.menuButtonClass, _ctx.isOpen ? 'border-primary' : 'border-grey-40 hover:border-grey-60']),
+    "class": normalizeClass([_ctx.menuButtonClass, _ctx.isOpen ? 'fw-dropdown--open !border-primary' : '', (_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? 'fw-dropdown-error-state border-brand-error-text' : '']),
+    "aria-expanded": _ctx.isOpen,
+    "aria-haspopup": "true",
     onClick: _cache[0] || (_cache[0] = function ($event) {
       return _ctx.isOpen = !_ctx.isOpen;
-    }),
-    id: "".concat(_ctx.name, "-fw-dropdown--button"),
-    "aria-expanded": _ctx.isOpen,
-    "aria-haspopup": "true"
-  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("div", _hoisted_5, [_ctx.selectedOption.image_url ? (openBlock(), createBlock(_component_FwImage, {
+    })
+  }, [(_ctx$selectedOption = _ctx.selectedOption) !== null && _ctx$selectedOption !== void 0 && _ctx$selectedOption.label ? (openBlock(), createElementBlock("div", _hoisted_4, [_ctx.selectedOption.image_url ? (openBlock(), createBlock(_component_FwImage, {
     key: 0,
     src: _ctx.selectedOption.image_url,
     "class": "w-6 h-6"
-  }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1), (_ctx$selectedOption3 = _ctx.selectedOption) !== null && _ctx$selectedOption3 !== void 0 && _ctx$selectedOption3.description ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString((_ctx$selectedOption4 = _ctx.selectedOption) === null || _ctx$selectedOption4 === void 0 ? void 0 : _ctx$selectedOption4.description), 1)) : createCommentVNode("", true)])])) : (openBlock(), createElementBlock("div", _hoisted_9, [_ctx.$slots.placeholderIcon ? renderSlot(_ctx.$slots, "placeholderIcon", {
+  }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString((_ctx$selectedOption2 = _ctx.selectedOption) === null || _ctx$selectedOption2 === void 0 ? void 0 : _ctx$selectedOption2.label), 1), (_ctx$selectedOption3 = _ctx.selectedOption) !== null && _ctx$selectedOption3 !== void 0 && _ctx$selectedOption3.description ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString((_ctx$selectedOption4 = _ctx.selectedOption) === null || _ctx$selectedOption4 === void 0 ? void 0 : _ctx$selectedOption4.description), 1)) : createCommentVNode("", true)])])) : (openBlock(), createElementBlock("div", _hoisted_8, [_ctx.$slots.placeholderIcon ? renderSlot(_ctx.$slots, "placeholderIcon", {
     key: 0
-  }) : createCommentVNode("", true), createElementVNode("span", _hoisted_10, toDisplayString(_ctx.placeholder), 1)])), createVNode(_component_ChevronDownSvg, {
-    "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
-  }, null, 8, ["class"])], 10, _hoisted_4), createVNode(Transition, {
+  }) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(_ctx.placeholder), 1)])), createVNode(_component_ChevronDownSvg, {
+    "class": normalizeClass(["w-6 text-body transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : '']),
+    name: "chevron-down"
+  }, null, 8, ["class"])], 10, _hoisted_3), createVNode(Transition, {
     name: "slideUpDown"
   }, {
     "default": withCtx(function () {
@@ -248,30 +267,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: function onClick($event) {
             return _ctx.selectOption(option);
           }
-        }, [createElementVNode("div", _hoisted_13, [option.image_url ? (openBlock(), createBlock(_component_FwImage, {
+        }, [createElementVNode("div", _hoisted_11, [option.image_url ? (openBlock(), createBlock(_component_FwImage, {
           key: 0,
           src: option.image_url,
           "class": "w-[20px] h-[20px]"
-        }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14, [createElementVNode("span", null, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])], 10, _hoisted_12);
-      }), 128))], 10, _hoisted_11), [[vShow, _ctx.isOpen]])];
+        }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_12, [createElementVNode("span", _hoisted_13, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])], 10, _hoisted_10);
+      }), 128))], 10, _hoisted_9), [[vShow, _ctx.isOpen]])];
     }),
     _: 1
-  }), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_16, [createVNode(Transition, {
+  }), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_15, [createVNode(Transition, {
     name: "fwFadeIn",
     mode: "out-in"
   }, {
     "default": withCtx(function () {
-      return [(_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(_ctx.errorMessage || _ctx.errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+      return [(_ctx.errorMessage || _ctx.errors[0]) && _ctx.meta.touched ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(_ctx.errorMessage || _ctx.errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
     }),
     _: 1
   })])) : createCommentVNode("", true)]);
 }
 
-var css_248z = ".slideUpDown-enter-active[data-v-72f0ebf0]{-webkit-animation:slideUpDown-72f0ebf0 .3s;-moz-animation:slideUpDown-72f0ebf0 .3s;animation:slideUpDown-72f0ebf0 .3s;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-72f0ebf0]{animation:slideUpDown-72f0ebf0 .3s reverse;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-moz-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-moz-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}}";
-var stylesheet = ".slideUpDown-enter-active[data-v-72f0ebf0]{-webkit-animation:slideUpDown-72f0ebf0 .3s;-moz-animation:slideUpDown-72f0ebf0 .3s;animation:slideUpDown-72f0ebf0 .3s;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-72f0ebf0]{animation:slideUpDown-72f0ebf0 .3s reverse;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-moz-keyframes slideUpDown-72f0ebf0{0%{opacity:0;-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-moz-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-72f0ebf0{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}}";
+var css_248z = ".slideUpDown-enter-active[data-v-d941ca80]{-webkit-animation:slideUpDown-d941ca80 .3s;-moz-animation:slideUpDown-d941ca80 .3s;animation:slideUpDown-d941ca80 .3s;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-d941ca80]{animation:slideUpDown-d941ca80 .3s reverse;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-d941ca80{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-moz-keyframes slideUpDown-d941ca80{0%{opacity:0;-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-moz-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-d941ca80{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}}.fw-dropdown--open[data-v-d941ca80]{background-color:var(--5e0ab1b5)}.fw-dropdown-error-state[data-v-d941ca80]{background-color:var(--f95113ee)}.fw-dropdown--menu-item[data-v-d941ca80]:hover{background-color:var(--5e0ab1b5)}";
+var stylesheet = ".slideUpDown-enter-active[data-v-d941ca80]{-webkit-animation:slideUpDown-d941ca80 .3s;-moz-animation:slideUpDown-d941ca80 .3s;animation:slideUpDown-d941ca80 .3s;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}.slideUpDown-leave-active[data-v-d941ca80]{animation:slideUpDown-d941ca80 .3s reverse;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@-webkit-keyframes slideUpDown-d941ca80{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-moz-keyframes slideUpDown-d941ca80{0%{opacity:0;-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-moz-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideUpDown-d941ca80{0%{opacity:0;-webkit-transform:translate3d(0,-3%,0);-moz-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}to{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0)}}.fw-dropdown--open[data-v-d941ca80]{background-color:var(--5e0ab1b5)}.fw-dropdown-error-state[data-v-d941ca80]{background-color:var(--f95113ee)}.fw-dropdown--menu-item[data-v-d941ca80]:hover{background-color:var(--5e0ab1b5)}";
 styleInject(css_248z);
 
-script.render = render;
-script.__scopeId = "data-v-72f0ebf0";
+__default__.render = render;
+__default__.__scopeId = "data-v-d941ca80";
 
-export { script as s };
+export { __default__ as _ };

package/esm/fw-dropdown.js

@@ -1,8 +1,8 @@
-export { s as FwDropdown } from './fw-dropdown-CbgOvgOt.js';
+export { _ as FwDropdown } from './fw-dropdown-58wyuzsW.js';
 import 'vue';
 import './vee-validate.esm-3ptvCDR1.js';
-import './index-CzZMBMV_.js';
-import './check--YD4Ts6g.js';
-import './fw-image-Dl96Dc27.js';
-import './fw-loading-bar-DThRjdw1.js';
+import './fw-image-D-OHafdw.js';
+import './fw-loading-bar-DecYSBC_.js';
+import './get-root-colours-DCjlYelc.js';
 import './style-inject.es-tgCJW-Cu.js';
+import './index-BsEH8YYr.js';

package/esm/fw-icons.js

@@ -0,0 +1,34 @@
+import { defineComponent, createElementVNode, createElementBlock, openBlock } from 'vue';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var script = defineComponent({
+  name: 'FwSuccessAnimation'
+});
+
+var _hoisted_1 = {
+  viewBox: "0 0 100 100",
+  fill: "currentColor",
+  xmlns: "http://www.w3.org/2000/svg",
+  "class": "fw-success-animation text-brand-success-text"
+};
+var _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
+  d: "M67,93 A46.5,46.5 0,1,0 7,32 L43,67 L88,19",
+  fill: "none",
+  "class": "stroke-brand-success-text",
+  "stroke-width": "6",
+  "stroke-linecap": "round",
+  "stroke-dasharray": "80 1000",
+  "stroke-dashoffset": "-220"
+}, null, -1);
+var _hoisted_3 = [_hoisted_2];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+
+var css_248z = ".fw-success-animation path{-webkit-animation:dash .75s linear both;-moz-animation:dash .75s linear both;animation:dash .75s linear both;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes dash{0%{stroke-dashoffset:210}75%{stroke-dashoffset:-220}to{stroke-dashoffset:-205}}@-moz-keyframes dash{0%{stroke-dashoffset:210}75%{stroke-dashoffset:-220}to{stroke-dashoffset:-205}}@keyframes dash{0%{stroke-dashoffset:210}75%{stroke-dashoffset:-220}to{stroke-dashoffset:-205}}";
+var stylesheet = ".fw-success-animation path{-webkit-animation:dash .75s linear both;-moz-animation:dash .75s linear both;animation:dash .75s linear both;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes dash{0%{stroke-dashoffset:210}75%{stroke-dashoffset:-220}to{stroke-dashoffset:-205}}@-moz-keyframes dash{0%{stroke-dashoffset:210}75%{stroke-dashoffset:-220}to{stroke-dashoffset:-205}}@keyframes dash{0%{stroke-dashoffset:210}75%{stroke-dashoffset:-220}to{stroke-dashoffset:-205}}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as FwSuccessAnimation };