@frollo/frollo-web-ui 8.5.4 → 9.0.0

package/esm/fw-accordion.js

@@ -1,16 +1,13 @@
-import { defineComponent, ref, watch, useCssVars, pushScopeId, popScopeId, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, toDisplayString, renderSlot, createVNode, Transition, withCtx, withDirectives, vShow } from 'vue';
-import { u as useColours } from './get-root-colours-DYEoJPEb.js';
-import { r as render$1 } from './index-CzZMBMV_.js';
+import { defineComponent, ref, watch, useCssVars, pushScopeId, popScopeId, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createCommentVNode, toDisplayString, renderSlot, Transition, withCtx, withDirectives, vShow } from 'vue';
+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';
-import './check--YD4Ts6g.js';
 
 var __default__ = defineComponent({
   name: 'FwAccordion',
   components: {
     ChevronDownSvg: render$1
   },
-  emits: [/** Fired when accordion is opened or closed */
-  'toggled'],
   props: {
     /**
      * The header title of the accordion
@@ -23,7 +20,7 @@ var __default__ = defineComponent({
      */
     titleClass: {
       type: String,
-      "default": 'h4'
+      "default": 'text-link h4'
     },
     /**
      * Title suffix of the accordion header
@@ -42,31 +39,33 @@ var __default__ = defineComponent({
      * Whether the accordion open icon should be at the start or end
      */
     iconPositionStart: {
-      type: Boolean,
-      "default": true
-    },
-    /**
-     * Icon type (arrow or plus)
-     */
-    isArrow: {
       type: Boolean,
       "default": false
     },
     /**
-     * Padding className for the accordion button
+     * Header className for the accordion button
      */
-    buttonPadding: {
+    headerClass: {
       type: String,
-      "default": 'px-8 py-4'
+      "default": 'p-1'
     },
     /**
      * Border style className for the accordion button
      */
     borderStyle: {
       type: String,
-      "default": 'rounded-sm border border-grey-40'
+      "default": ''
+    },
+    /**
+     * Secondary appearance of the accordion
+     */
+    secondary: {
+      type: Boolean,
+      "default": false
     }
   },
+  emits: [/** Fired when accordion is opened or closed */
+  'toggled'],
   setup: function setup(props, ctx) {
     var isOpen = ref(props.isOpened);
     watch(isOpen, function (newValue) {
@@ -75,16 +74,22 @@ var __default__ = defineComponent({
     var _useColours = useColours(),
       bgHoverColor = _useColours.primaryFade5;
     var beforeEnter = function beforeEnter(el) {
-      el.style.height = '0';
+      el.style.maxHeight = '0';
     };
     var enter = function enter(el) {
-      el.style.height = el.scrollHeight + 'px';
+      el.style.maxHeight = el.scrollHeight + 'px';
+      setTimeout(function () {
+        el.firstElementChild.style.opacity = '1';
+      }, 150);
     };
     var beforeLeave = function beforeLeave(el) {
-      el.style.height = el.scrollHeight + 'px';
+      el.style.maxHeight = el.scrollHeight + 'px';
     };
     var leave = function leave(el) {
-      el.style.height = '0';
+      setTimeout(function () {
+        el.firstElementChild.style.opacity = '0';
+      }, 100);
+      el.style.maxHeight = '0';
     };
     return {
       isOpen: isOpen,
@@ -99,7 +104,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "103fcbd6": _ctx.bgHoverColor
+      "73d2274d": _ctx.bgHoverColor
     };
   });
 };
@@ -110,74 +115,72 @@ __default__.setup = __setup__ ? function (props, ctx) {
 } : __injectCSSVars__;
 
 var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-15499edb"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-bbfff254"), n = n(), popScopeId(), n;
 };
 var _hoisted_1 = {
-  "class": "flex flex-row items-center justify-between w-full"
+  "class": "flex flex-row items-center"
 };
 var _hoisted_2 = {
-  "class": "flex flex-row items-center"
+  key: 0
 };
 var _hoisted_3 = {
-  key: 0
+  key: 1
 };
 var _hoisted_4 = {
-  key: 0
+  key: 0,
+  "class": "h4 mb-0"
 };
 var _hoisted_5 = {
   key: 1
 };
 var _hoisted_6 = {
-  key: 0,
-  "class": "h4"
-};
-var _hoisted_7 = {
-  key: 1
+  "class": "transition-all ease-in"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ChevronDownSvg = resolveComponent("ChevronDownSvg");
   return openBlock(), createElementBlock("div", {
     "class": normalizeClass(["fw-accordion", _ctx.borderStyle])
   }, [createElementVNode("button", {
+    type: "button",
+    "class": normalizeClass(["fw-accordion--header transition-all duration-100 ease-in focus:outline-primary", [_ctx.isOpen ? 'fw-accordion--header-open' : '', _ctx.headerClass, _ctx.secondary ? 'w-full px-8 py-4' : '']]),
     onClick: _cache[0] || (_cache[0] = function ($event) {
       return _ctx.isOpen = !_ctx.isOpen;
-    }),
-    type: "button",
-    "class": normalizeClass(["fw-accordion--header bg-white w-full transition-all duration-100 ease-in focus:outline-primary", [_ctx.isOpen ? 'fw-accordion--header-open' : '', _ctx.buttonPadding]])
-  }, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.iconPositionStart ? (openBlock(), createElementBlock("div", _hoisted_3, [_ctx.isArrow ? (openBlock(), createBlock(_component_ChevronDownSvg, {
-    key: 0,
-    "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
-  }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
-    key: 1,
-    "class": normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
-  }, null, 2))])) : createCommentVNode("", true), createElementVNode("div", {
-    "class": normalizeClass([_ctx.titleClass, _ctx.iconPositionStart ? 'ml-6' : 'ml-0'])
-  }, [_ctx.title ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.title), 1)) : _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true)], 2)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true), !_ctx.iconPositionStart ? (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.isArrow ? (openBlock(), createBlock(_component_ChevronDownSvg, {
+    })
+  }, [createElementVNode("div", {
+    "class": normalizeClass(["flex flex-row items-center text-left gap-1", _ctx.secondary ? 'justify-between' : 'justify-start'])
+  }, [createElementVNode("div", _hoisted_1, [_ctx.iconPositionStart ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_ChevronDownSvg, {
+    name: "chevron-down",
+    "class": normalizeClass(["w-6 transition-transform duration-300", [_ctx.isOpen ? 'rotate-180' : '', _ctx.secondary ? 'text-black' : 'text-link']])
+  }, null, 8, ["class"])])) : createCommentVNode("", true), createElementVNode("div", {
+    "class": normalizeClass([[_ctx.titleClass, _ctx.iconPositionStart ? 'ml-6' : 'ml-0'], "mb-0"])
+  }, [_ctx.title ? (openBlock(), createElementBlock("span", {
     key: 0,
-    "class": normalizeClass(["w-6 text-primary transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
-  }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
-    key: 1,
-    "class": normalizeClass(["fw-accordion--icon", _ctx.isOpen ? 'fw-accordion--icon-open' : ''])
-  }, null, 2))])) : createCommentVNode("", true)])], 2), createVNode(Transition, {
+    "class": normalizeClass(_ctx.secondary ? 'text-black' : 'text-link')
+  }, toDisplayString(_ctx.title), 3)) : _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true)], 2)]), _ctx.suffixTitle ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.suffixTitle), 1)) : createCommentVNode("", true), !_ctx.iconPositionStart ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_ChevronDownSvg, {
+    name: "chevron-down",
+    "class": normalizeClass(["w-6 text-link transition-transform duration-300", _ctx.isOpen ? 'rotate-180' : ''])
+  }, null, 8, ["class"])])) : createCommentVNode("", true)], 2)], 2), createVNode(Transition, {
     name: "fw-accordion-transition",
+    "class": "transition-all duration-300 ease-in overflow-hidden",
     onBeforeEnter: _ctx.beforeEnter,
     onEnter: _ctx.enter,
     onBeforeLeave: _ctx.beforeLeave,
-    onLeave: _ctx.leave,
-    "class": "transition-all duration-300 ease-in overflow-hidden"
+    onLeave: _ctx.leave
   }, {
     "default": withCtx(function () {
-      return [withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, _ctx.$slots["default"] && _ctx.isOpen]])];
+      return [withDirectives(createElementVNode("div", {
+        "class": normalizeClass(_ctx.secondary ? '' : 'my-2')
+      }, [createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "default")])], 2), [[vShow, _ctx.$slots["default"] && _ctx.isOpen]])];
     }),
     _: 3
   }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave"])], 2);
 }
 
-var css_248z = ".fw-accordion--header-open[data-v-15499edb],.fw-accordion--header[data-v-15499edb]:focus-visible,.fw-accordion--header[data-v-15499edb]:hover{background-color:var(--103fcbd6)}.fw-accordion--icon[data-v-15499edb]{position:relative}.fw-accordion--icon[data-v-15499edb]:after,.fw-accordion--icon[data-v-15499edb]:before{background:var(--colorBody);border-radius:3px;content:\"\";height:.2rem;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;width:1rem}.fw-accordion--icon[data-v-15499edb]:after{-webkit-transform:translate(-50%,-50%) rotate(90deg);-moz-transform:translate(-50%,-50%) rotate(90deg);-ms-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}.fw-accordion--icon-open[data-v-15499edb]:after{width:0}";
-var stylesheet = ".fw-accordion--header-open[data-v-15499edb],.fw-accordion--header[data-v-15499edb]:focus-visible,.fw-accordion--header[data-v-15499edb]:hover{background-color:var(--103fcbd6)}.fw-accordion--icon[data-v-15499edb]{position:relative}.fw-accordion--icon[data-v-15499edb]:after,.fw-accordion--icon[data-v-15499edb]:before{background:var(--colorBody);border-radius:3px;content:\"\";height:.2rem;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;width:1rem}.fw-accordion--icon[data-v-15499edb]:after{-webkit-transform:translate(-50%,-50%) rotate(90deg);-moz-transform:translate(-50%,-50%) rotate(90deg);-ms-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}.fw-accordion--icon-open[data-v-15499edb]:after{width:0}";
+var css_248z = ".fw-accordion--header-open[data-v-bbfff254],.fw-accordion--header[data-v-bbfff254]:focus-visible,.fw-accordion--header[data-v-bbfff254]:hover{background-color:var(--73d2274d)}";
+var stylesheet = ".fw-accordion--header-open[data-v-bbfff254],.fw-accordion--header[data-v-bbfff254]:focus-visible,.fw-accordion--header[data-v-bbfff254]:hover{background-color:var(--73d2274d)}";
 styleInject(css_248z);
 
 __default__.render = render;
-__default__.__scopeId = "data-v-15499edb";
+__default__.__scopeId = "data-v-bbfff254";
 
 export { __default__ as FwAccordion };

package/esm/fw-alert.js

@@ -0,0 +1,68 @@
+import { defineComponent, computed, ref, onMounted, resolveComponent, createElementBlock, openBlock, normalizeClass, createCommentVNode, renderSlot, Fragment, createBlock } from 'vue';
+import { a as render$1, b as render$2 } from './index-BsEH8YYr.js';
+
+var script = defineComponent({
+  name: 'FwAlert',
+  components: {
+    CheckSvg: render$2,
+    AlertSvg: render$1
+  },
+  props: {
+    /**
+     * The colour variant of the alert element.
+     * Accepts 'success', 'error'
+     */
+    variant: {
+      type: String,
+      required: true,
+      validator: function validator(value) {
+        return ['success', 'error'].includes(value);
+      }
+    },
+    /**
+     * Disables the icon element.
+     */
+    disableIcon: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  setup: function setup(props) {
+    var bgClass = computed(function () {
+      if (props.variant === 'error') return 'bg-brand-error-bg';
+      return 'bg-brand-success-bg';
+    });
+    var defaultScale = ref('scale-0');
+    onMounted(function () {
+      setTimeout(function () {
+        defaultScale.value = 'scale-100';
+      }, 50);
+    });
+    return {
+      bgClass: bgClass,
+      defaultScale: defaultScale
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_CheckSvg = resolveComponent("CheckSvg");
+  var _component_AlertSvg = resolveComponent("AlertSvg");
+  return openBlock(), createElementBlock("div", {
+    "class": normalizeClass(["w-full rounded-md flex flex-row items-start justify-start p-4 box-border gap-3 transition-all duration-300", [_ctx.bgClass, _ctx.defaultScale]])
+  }, [!_ctx.disableIcon ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [_ctx.variant === 'success' ? (openBlock(), createBlock(_component_CheckSvg, {
+    key: 0,
+    name: "check",
+    "class": "w-6 h-6 min-w-6 text-brand-success-text"
+  })) : createCommentVNode("", true), _ctx.variant === 'error' ? (openBlock(), createBlock(_component_AlertSvg, {
+    key: 1,
+    name: "alert",
+    "class": "w-6 h-6 min-w-6 text-brand-error-text"
+  })) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 2);
+}
+
+script.render = render;
+
+export { script as FwAlert };

package/esm/fw-bar-chart.js

@@ -1,7 +1,7 @@
-import { b as _toConsumableArray } from './_rollupPluginBabelHelpers-DpC_oIQV.js';
-import { version as version$1, isProxy, toRaw, defineComponent, ref, shallowRef, onMounted, onUnmounted, watch, nextTick, h, computed, resolveComponent, openBlock, createElementBlock, normalizeStyle, toDisplayString, createCommentVNode, createVNode } from 'vue';
-import { u as useColours } from './get-root-colours-DYEoJPEb.js';
-import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
+import { b as _toConsumableArray } from './_rollupPluginBabelHelpers-DODWUb5N.js';
+import { version as version$1, toRaw, isProxy, defineComponent, ref, shallowRef, onMounted, onUnmounted, watch, nextTick, h, computed, resolveComponent, createElementBlock, createCommentVNode, openBlock, normalizeStyle, createVNode, toDisplayString } from 'vue';
+import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
 
 /*!
  * @kurkle/color v0.3.2

package/esm/fw-button-CnQvA7oM.js

@@ -0,0 +1,296 @@
+import { defineComponent, ref, computed, resolveComponent, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, createElementVNode, renderSlot, Fragment, createTextVNode, toDisplayString } from 'vue';
+import { g as render$1 } from './index-BsEH8YYr.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var script = defineComponent({
+  name: 'FwButton',
+  components: {
+    LoadingSvg: render$1
+  },
+  props: {
+    /**
+     * The label text of the button.
+     * Overrides the default slot content.
+     */
+    label: {
+      type: String
+    },
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+      type: [String, Object]
+    },
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: String,
+    /**
+     * The size of the button. Accepts: 'sm', 'md', 'lg', 'xl', '2xl'
+     */
+    size: {
+      type: String,
+      "default": 'lg',
+      validator: function validator(value) {
+        return ['sm', 'md', 'lg', 'xl', '2xl'].includes(value);
+      }
+    },
+    /**
+     * The colour variant of the button.
+     * Accepts 'primary', 'secondary', 'tertiary', 'quaternary', 'error', 'success', 'link', 'text', 'transparent', 'gradient'
+     */
+    variant: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'quaternary', 'error', 'success', 'link', 'text', 'transparent', 'gradient'].includes(value);
+      }
+    },
+    /**
+     * The type attribute of the button
+     */
+    buttonType: {
+      type: String,
+      "default": 'button',
+      validator: function validator(value) {
+        return ['button', 'submit', 'reset'].includes(value);
+      }
+    },
+    /**
+     * The animation type of the hover & focus states.
+     * Accepts 'alternate' and 'fade'
+     */
+    animation: {
+      type: String,
+      "default": 'alternate',
+      validator: function validator(value) {
+        return ['alternate', 'fade'].includes(value);
+      }
+    },
+    /**
+     * Whether the button is rounded or not
+     */
+    rounded: {
+      type: Boolean,
+      "default": true
+    },
+    /**
+     * Whether the loading animation is shown or not
+     */
+    loading: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Whether the link should open in a new tab
+     */
+    external: {
+      type: Boolean
+    },
+    /**
+     * Whether the button selected state is active
+     */
+    selected: {
+      type: Boolean
+    },
+    /**
+     * Whether the button is disabled
+     */
+    disabled: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  emits: [/** Fired on native click */
+  'click', /** Fired on native hover in */
+  'mouseover', /** Fired on native hover out */
+  'mouseout', /** Fired on native focus in */
+  'focusin', /** Fired on native focus out */
+  'focusout'],
+  setup: function setup(props, ctx) {
+    var baseClass = ref("inline-block text-center transition-colors ease-in-out whitespace-nowrap\n      duration-200 focus:outline-0 border focus-visible:outline-0 focus:ring-none ring-offset-1 focus-visible:ring\n    ");
+    var buttonClasses = ref({
+      primary: {
+        text: '',
+        background: 'fw-button--primary',
+        border: ''
+      },
+      secondary: {
+        text: '',
+        background: 'fw-button--secondary',
+        border: ''
+      },
+      tertiary: {
+        text: '',
+        background: 'fw-button--tertiary',
+        border: ''
+      },
+      quaternary: {
+        text: '',
+        background: 'fw-button--quaternary',
+        border: ''
+      },
+      gradient: {
+        text: '',
+        background: 'fw-button--gradient',
+        border: ''
+      },
+      success: {
+        text: 'text-white hover:text-brand-success-text active:text-brand-success-new',
+        background: 'bg-brand-success-new hover:bg-white active:bg-white',
+        border: 'border-brand-success-new focus-visible:ring-brand-success-new'
+      },
+      error: {
+        text: 'text-white hover:text-brand-error-text active:text-brand-error-text',
+        background: 'bg-brand-error-text hover:bg-white active:bg-white',
+        border: 'border-brand-error-text focus-visible:ring-brand-error-text'
+      },
+      link: {
+        text: 'text-link font-normal no-underline hover:underline focus-visible:underline',
+        background: '',
+        border: 'border-none focus-visible:ring-2 focus-visible:ring-link'
+      },
+      text: {
+        text: 'text-body hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus-visible:ring-body'
+      },
+      transparent: {
+        text: '',
+        background: 'fw-button--transparent',
+        border: ''
+      }
+    });
+    var sizes = ref({
+      sm: 'px-3 py-1 text-sm',
+      md: 'px-6 py-2 text-p-small',
+      lg: 'px-7 py-2 text-p',
+      xl: 'px-12 py-3 text-p',
+      '2xl': 'px-16 py-4 text-2xl'
+    });
+    var iconSizes = ref({
+      sm: {
+        spacing: 'pr-7',
+        size: 'size-7 p-2'
+      },
+      md: {
+        spacing: 'pr-8',
+        size: 'size-8 p-2.5'
+      },
+      lg: {
+        spacing: 'pr-10',
+        size: 'size-10 p-3'
+      },
+      xl: {
+        spacing: 'pr-12',
+        size: 'size-12 p-3'
+      },
+      '2xl': {
+        spacing: 'pr-14',
+        size: 'size-14 p-3.5'
+      }
+    });
+    var textColorClass = computed(function () {
+      return buttonClasses.value[props.variant].text;
+    });
+    var bgColorClass = computed(function () {
+      return buttonClasses.value[props.variant].background;
+    });
+    var sizeClass = computed(function () {
+      return sizes.value[props.size];
+    });
+    var borderClass = computed(function () {
+      return buttonClasses.value[props.variant].border;
+    });
+    var iconSize = computed(function () {
+      return iconSizes.value[props.size];
+    });
+    var onClick = function onClick(e) {
+      return ctx.emit('click', e);
+    };
+    var onMouseover = function onMouseover(e) {
+      return ctx.emit('mouseover', e);
+    };
+    var onMouseout = function onMouseout(e) {
+      return ctx.emit('mouseout', e);
+    };
+    var onFocusin = function onFocusin(e) {
+      return ctx.emit('focusin', e);
+    };
+    var onFocusout = function onFocusout(e) {
+      return ctx.emit('focusout', e);
+    };
+    var tagName = computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
+    return {
+      baseClass: baseClass,
+      textColorClass: textColorClass,
+      bgColorClass: bgColorClass,
+      sizeClass: sizeClass,
+      borderClass: borderClass,
+      onClick: onClick,
+      onMouseover: onMouseover,
+      onMouseout: onMouseout,
+      onFocusin: onFocusin,
+      onFocusout: onFocusout,
+      tagName: tagName,
+      iconSize: iconSize
+    };
+  }
+});
+
+var _hoisted_1 = {
+  key: 0,
+  "class": "fw-button--label"
+};
+var _hoisted_2 = {
+  key: 1,
+  "class": "w-full h-full button-icon"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_LoadingSvg = resolveComponent("LoadingSvg");
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
+    "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : '', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate', _ctx.loading === true ? 'fw-button--loading cursor-progress pointer-events-none' : 'cursor-pointer', _ctx.loading || _ctx.$slots.suffixIcon ? 'relative' : '', _ctx.selected === true ? 'selected' : '']]),
+    type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
+    to: _ctx.to ? _ctx.to : null,
+    href: _ctx.href ? _ctx.href : null,
+    tabindex: _ctx.to ? 0 : null,
+    disabled: _ctx.disabled,
+    loading: _ctx.loading,
+    target: !!_ctx.external ? '_blank' : null,
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": withCtx(function () {
+      return [_ctx.$slots["default"] || _ctx.label ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+        "class": normalizeClass(["fw-button--label-wrapper", _ctx.loading || _ctx.$slots.suffixIcon ? _ctx.iconSize.spacing : 'pr-0 ml-0'])
+      }, [_ctx.label ? (openBlock(), createElementBlock(Fragment, {
+        key: 0
+      }, [createTextVNode(toDisplayString(_ctx.label), 1)], 64)) : _ctx.$slots["default"] ? renderSlot(_ctx.$slots, "default", {
+        key: 1
+      }) : createCommentVNode("", true)], 2), _ctx.loading || _ctx.$slots.suffixIcon ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "class": normalizeClass([_ctx.iconSize.size, "inline-flex absolute top-2/4 -translate-y-2/4 right-0 bg-black/20 rounded-full"])
+      }, [_ctx.loading ? (openBlock(), createBlock(_component_LoadingSvg, {
+        key: 0,
+        name: "loading",
+        "class": "w-full h-full animate-spin"
+      })) : _ctx.$slots.suffixIcon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "suffixIcon")])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true)];
+    }),
+    _: 3
+  }, 40, ["class", "type", "to", "href", "tabindex", "disabled", "loading", "target", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+}
+
+var css_248z = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background-color:var(--colorButtonPrimary);border-color:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary.router-link-active,.fw-button--primary.selected,.fw-button--primary:hover{background-color:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--primary:focus-visible{--tw-ring-color:var(--colorButtonPrimary)}.fw-button--primary:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));border-color:rgb(222 224 227/var(--tw-border-opacity));color:var(--colorText3)}.fw-button--secondary{background-color:var(--colorButtonSecondary);border-color:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate.router-link-active,.fw-button--secondary.animation--alternate.selected,.fw-button--secondary.animation--alternate:hover{background-color:var(--colorButtonSecondaryFade);border-color:var(--colorButtonSecondaryFade);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade.router-link-active,.fw-button--secondary.animation--fade.selected,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--secondary:focus-visible{--tw-ring-color:var(--colorButtonSecondary)}.fw-button--secondary:disabled{pointer-events:none}.fw-button--tertiary{background-color:transparent;border-color:var(--colorButtonTertiaryText);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate.router-link-active,.fw-button--tertiary.animation--alternate.selected,.fw-button--tertiary.animation--alternate:hover{background-color:var(--colorButtonTertiaryFade)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade.router-link-active,.fw-button--tertiary.animation--fade.selected,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary:focus-visible{--tw-ring-color:var(--colorButtonTertiaryText)}.fw-button--tertiary:disabled{pointer-events:none}.fw-button--quaternary{background-color:transparent;border-color:var(--colorButtonQuaternaryText);color:var(--colorButtonQuaternaryText)}.fw-button--quaternary.animation--alternate.fw-button--loading,.fw-button--quaternary.animation--alternate.router-link-active,.fw-button--quaternary.animation--alternate.selected,.fw-button--quaternary.animation--alternate:hover{background-color:var(--colorButtonQuaternary);border-color:var(--colorButtonQuaternaryText);color:var(--colorBody)}.fw-button--quaternary.animation--fade.fw-button--loading,.fw-button--quaternary.animation--fade.router-link-active,.fw-button--quaternary.animation--fade.selected,.fw-button--quaternary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--quaternary:focus-visible{--tw-ring-color:var(--colorButtonQuaternaryText)}.fw-button--quaternary:disabled{border-color:var(--colorBorder1);color:var(--colorText3)}.fw-button--quaternary:disabled.router-link-active,.fw-button--quaternary:disabled.selected{--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity))}.fw-button--gradient{background-image:var(--colorButtonGradient);background-size:135% auto;border:none;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.15),0 0 40px rgba(142,125,255,.3);box-shadow:0 2px 4px rgba(0,0,0,.15),0 0 40px rgba(142,125,255,.3);color:var(--colorButtonGradientText);-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}.fw-button--gradient.animation--alternate.fw-button--loading,.fw-button--gradient.animation--alternate.router-link-active,.fw-button--gradient.animation--alternate.selected,.fw-button--gradient.animation--alternate:hover{background-size:120% auto;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}@-webkit-keyframes pulse{50%{opacity:.5}}@-moz-keyframes pulse{50%{opacity:.5}}.fw-button--gradient.animation--alternate.fw-button--loading .button-icon,.fw-button--gradient.animation--alternate.router-link-active .button-icon,.fw-button--gradient.animation--alternate.selected .button-icon,.fw-button--gradient.animation--alternate:hover .button-icon{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;-moz-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.fw-button--gradient.animation--fade.fw-button--loading,.fw-button--gradient.animation--fade.router-link-active,.fw-button--gradient.animation--fade.selected,.fw-button--gradient.animation--fade:hover{background-size:120% auto;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}@keyframes pulse{50%{opacity:.5}}.fw-button--gradient.animation--fade.fw-button--loading .button-icon,.fw-button--gradient.animation--fade.router-link-active .button-icon,.fw-button--gradient.animation--fade.selected .button-icon,.fw-button--gradient.animation--fade:hover .button-icon{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;-moz-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.fw-button--gradient:focus-visible{--tw-ring-color:var(--colorButtonQuaternaryText)}.fw-button--gradient:disabled{border-color:var(--colorBorder1);color:var(--colorText3)}.fw-button--gradient:disabled.router-link-active,.fw-button--gradient:disabled.selected{--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity))}.fw-button--transparent{border-color:transparent;color:var(--colorBody);-webkit-text-decoration-line:none;-moz-text-decoration-line:none;text-decoration-line:none}.fw-button--transparent:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 -webkit-calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 -moz-calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--colorPrimary);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.fw-button--transparent.fw-button--loading,.fw-button--transparent.router-link-active,.fw-button--transparent.selected,.fw-button--transparent:hover{background-color:var(--colorButtonTertiaryFade);color:var(--colorPrimary);-webkit-text-decoration-line:underline;-moz-text-decoration-line:underline;text-decoration-line:underline}.fw-button:disabled{cursor:not-allowed}";
+var stylesheet = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background-color:var(--colorButtonPrimary);border-color:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary.router-link-active,.fw-button--primary.selected,.fw-button--primary:hover{background-color:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--primary:focus-visible{--tw-ring-color:var(--colorButtonPrimary)}.fw-button--primary:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity));border-color:rgb(222 224 227/var(--tw-border-opacity));color:var(--colorText3)}.fw-button--secondary{background-color:var(--colorButtonSecondary);border-color:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate.router-link-active,.fw-button--secondary.animation--alternate.selected,.fw-button--secondary.animation--alternate:hover{background-color:var(--colorButtonSecondaryFade);border-color:var(--colorButtonSecondaryFade);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade.router-link-active,.fw-button--secondary.animation--fade.selected,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--secondary:focus-visible{--tw-ring-color:var(--colorButtonSecondary)}.fw-button--secondary:disabled{pointer-events:none}.fw-button--tertiary{background-color:transparent;border-color:var(--colorButtonTertiaryText);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate.router-link-active,.fw-button--tertiary.animation--alternate.selected,.fw-button--tertiary.animation--alternate:hover{background-color:var(--colorButtonTertiaryFade)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade.router-link-active,.fw-button--tertiary.animation--fade.selected,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary:focus-visible{--tw-ring-color:var(--colorButtonTertiaryText)}.fw-button--tertiary:disabled{pointer-events:none}.fw-button--quaternary{background-color:transparent;border-color:var(--colorButtonQuaternaryText);color:var(--colorButtonQuaternaryText)}.fw-button--quaternary.animation--alternate.fw-button--loading,.fw-button--quaternary.animation--alternate.router-link-active,.fw-button--quaternary.animation--alternate.selected,.fw-button--quaternary.animation--alternate:hover{background-color:var(--colorButtonQuaternary);border-color:var(--colorButtonQuaternaryText);color:var(--colorBody)}.fw-button--quaternary.animation--fade.fw-button--loading,.fw-button--quaternary.animation--fade.router-link-active,.fw-button--quaternary.animation--fade.selected,.fw-button--quaternary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--quaternary:focus-visible{--tw-ring-color:var(--colorButtonQuaternaryText)}.fw-button--quaternary:disabled{border-color:var(--colorBorder1);color:var(--colorText3)}.fw-button--quaternary:disabled.router-link-active,.fw-button--quaternary:disabled.selected{--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity))}.fw-button--gradient{background-image:var(--colorButtonGradient);background-size:135% auto;border:none;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.15),0 0 40px rgba(142,125,255,.3);box-shadow:0 2px 4px rgba(0,0,0,.15),0 0 40px rgba(142,125,255,.3);color:var(--colorButtonGradientText);-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}.fw-button--gradient.animation--alternate.fw-button--loading,.fw-button--gradient.animation--alternate.router-link-active,.fw-button--gradient.animation--alternate.selected,.fw-button--gradient.animation--alternate:hover{background-size:120% auto;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}@-webkit-keyframes pulse{50%{opacity:.5}}@-moz-keyframes pulse{50%{opacity:.5}}.fw-button--gradient.animation--alternate.fw-button--loading .button-icon,.fw-button--gradient.animation--alternate.router-link-active .button-icon,.fw-button--gradient.animation--alternate.selected .button-icon,.fw-button--gradient.animation--alternate:hover .button-icon{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;-moz-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.fw-button--gradient.animation--fade.fw-button--loading,.fw-button--gradient.animation--fade.router-link-active,.fw-button--gradient.animation--fade.selected,.fw-button--gradient.animation--fade:hover{background-size:120% auto;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}@keyframes pulse{50%{opacity:.5}}.fw-button--gradient.animation--fade.fw-button--loading .button-icon,.fw-button--gradient.animation--fade.router-link-active .button-icon,.fw-button--gradient.animation--fade.selected .button-icon,.fw-button--gradient.animation--fade:hover .button-icon{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;-moz-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.fw-button--gradient:focus-visible{--tw-ring-color:var(--colorButtonQuaternaryText)}.fw-button--gradient:disabled{border-color:var(--colorBorder1);color:var(--colorText3)}.fw-button--gradient:disabled.router-link-active,.fw-button--gradient:disabled.selected{--tw-bg-opacity:1;background-color:rgb(222 224 227/var(--tw-bg-opacity))}.fw-button--transparent{border-color:transparent;color:var(--colorBody);-webkit-text-decoration-line:none;-moz-text-decoration-line:none;text-decoration-line:none}.fw-button--transparent:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 -webkit-calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 -moz-calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--colorPrimary);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.fw-button--transparent.fw-button--loading,.fw-button--transparent.router-link-active,.fw-button--transparent.selected,.fw-button--transparent:hover{background-color:var(--colorButtonTertiaryFade);color:var(--colorPrimary);-webkit-text-decoration-line:underline;-moz-text-decoration-line:underline;text-decoration-line:underline}.fw-button:disabled{cursor:not-allowed}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };

package/esm/fw-button.js

@@ -1,6 +1,4 @@
-export { s as FwButton } from './fw-button-DNozvo7B.js';
+export { s as FwButton } from './fw-button-CnQvA7oM.js';
 import 'vue';
-import './fw-loading-spinner-BFpFFRJm.js';
-import './index-CzZMBMV_.js';
-import './check--YD4Ts6g.js';
+import './index-BsEH8YYr.js';
 import './style-inject.es-tgCJW-Cu.js';