@frollo/frollo-web-ui 9.0.0 → 9.0.2

package/esm/fw-button-DZTHZLjk.js

@@ -0,0 +1,318 @@
+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-DHyRsKsZ.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var BASE_CLASS = "inline-block text-center whitespace-nowrap border\n   transition-colors duration-100 ease-in-out\n   focus:outline-0 focus-visible:outline-0 focus:ring-none ring-offset-1 focus-visible:ring";
+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,
+      "default": false
+    },
+    /**
+     * 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 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 isActive = computed(function () {
+      return props.loading || props.selected;
+    });
+    var roundedClass = computed(function () {
+      return props.rounded && props.variant !== 'link' ? 'rounded-full' : 'rounded';
+    });
+    var linkResetClass = computed(function () {
+      return props.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : '';
+    });
+    var animationClass = computed(function () {
+      return props.animation === 'fade' ? 'animation--fade' : 'animation--alternate';
+    });
+    var loadingClass = computed(function () {
+      return props.loading ? 'fw-button--loading cursor-progress pointer-events-none' : 'cursor-pointer';
+    });
+    var relativeClass = computed(function () {
+      return props.loading || !!ctx.slots.suffixIcon ? 'relative' : '';
+    });
+    var rootClasses = computed(function () {
+      return [BASE_CLASS, textColorClass.value, bgColorClass.value, sizeClass.value, borderClass.value, roundedClass.value, linkResetClass.value, animationClass.value, loadingClass.value, relativeClass.value, isActive.value ? 'selected' : ''];
+    });
+    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 {
+      textColorClass: textColorClass,
+      bgColorClass: bgColorClass,
+      sizeClass: sizeClass,
+      borderClass: borderClass,
+      onClick: onClick,
+      onMouseover: onMouseover,
+      onMouseout: onMouseout,
+      onFocusin: onFocusin,
+      onFocusout: onFocusout,
+      tagName: tagName,
+      iconSize: iconSize,
+      rootClasses: rootClasses
+    };
+  }
+});
+
+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.rootClasses]),
+    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{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,-webkit-transform .12s ease-in-out;transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,-webkit-transform .12s ease-in-out;-moz-transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,transform .12s ease-in-out,-moz-transform .12s ease-in-out;transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,transform .12s ease-in-out;transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,transform .12s ease-in-out,-webkit-transform .12s ease-in-out,-moz-transform .12s ease-in-out}.fw-button:hover:not(:disabled){-webkit-transform:translateY(-1px);-moz-transform:translateY(-1px);-ms-transform:translateY(-1px);transform:translateY(-1px);will-change:transform,background-color,border-color}.fw-button:active:not(:disabled){-webkit-transform:translateY(0) scale(.98);-moz-transform:translateY(0) scale(.98);-ms-transform:translateY(0) scale(.98);transform:translateY(0) scale(.98)}.fw-button--label-wrapper{-webkit-transition:-webkit-transform .12s ease-in-out;transition:-webkit-transform .12s ease-in-out;-moz-transition:transform .12s ease-in-out,-moz-transform .12s ease-in-out;transition:transform .12s ease-in-out;transition:transform .12s ease-in-out,-webkit-transform .12s ease-in-out,-moz-transform .12s 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!important;--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important;border-color:rgb(222 224 227/var(--tw-border-opacity))!important;color:var(--colorText3)!important}.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{-webkit-transition:-webkit-filter .12s ease-in-out;transition:-webkit-filter .12s ease-in-out;-moz-transition:filter .12s ease-in-out;transition:filter .12s ease-in-out;transition:filter .12s ease-in-out,-webkit-filter .12s ease-in-out}.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{--tw-border-opacity:1!important;--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important;border-color:rgb(222 224 227/var(--tw-border-opacity))!important;color:var(--colorText3)!important}.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{-webkit-transition:-webkit-filter .12s ease-in-out;transition:-webkit-filter .12s ease-in-out;-moz-transition:filter .12s ease-in-out;transition:filter .12s ease-in-out;transition:filter .12s ease-in-out,-webkit-filter .12s ease-in-out}.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{--tw-border-opacity:1!important;background-color:transparent!important;border-color:rgb(222 224 227/var(--tw-border-opacity))!important;color:var(--colorText3)!important}.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{-webkit-transition:-webkit-filter .12s ease-in-out;transition:-webkit-filter .12s ease-in-out;-moz-transition:filter .12s ease-in-out;transition:filter .12s ease-in-out;transition:filter .12s ease-in-out,-webkit-filter .12s ease-in-out}.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{background-color:transparent!important;border-color:var(--colorBorder1)!important;color:var(--colorText3)!important}.fw-button--quaternary:disabled.router-link-active,.fw-button--quaternary:disabled.selected{--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important}.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:background-size .4s ease,-webkit-transform .16s ease,-webkit-box-shadow .2s ease;transition:background-size .4s ease,-webkit-transform .16s ease,-webkit-box-shadow .2s ease;-moz-transition:background-size .4s ease,transform .16s ease,box-shadow .2s ease,-moz-transform .16s ease;transition:background-size .4s ease,transform .16s ease,box-shadow .2s ease;transition:background-size .4s ease,transform .16s ease,box-shadow .2s ease,-webkit-transform .16s ease,-moz-transform .16s ease,-webkit-box-shadow .2s ease}.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,.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-keyframes pulse{50%{opacity:.5}}@-moz-keyframes pulse{50%{opacity:.5}}@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,.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{--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important;background-image:none!important;border-color:var(--colorBorder1)!important;color:var(--colorText3)!important}.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;-webkit-filter:none;filter:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none}@media (prefers-reduced-motion:reduce){.fw-button,.fw-button *{-webkit-animation-duration:.01ms!important;-moz-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-transition-duration:.01ms!important;-moz-transition-duration:.01ms!important;transition-duration:.01ms!important}}";
+var stylesheet = ".fw-button{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,-webkit-transform .12s ease-in-out;transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,-webkit-transform .12s ease-in-out;-moz-transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,transform .12s ease-in-out,-moz-transform .12s ease-in-out;transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,transform .12s ease-in-out;transition:background-color .12s ease-in-out,border-color .12s ease-in-out,color .12s ease-in-out,transform .12s ease-in-out,-webkit-transform .12s ease-in-out,-moz-transform .12s ease-in-out}.fw-button:hover:not(:disabled){-webkit-transform:translateY(-1px);-moz-transform:translateY(-1px);-ms-transform:translateY(-1px);transform:translateY(-1px);will-change:transform,background-color,border-color}.fw-button:active:not(:disabled){-webkit-transform:translateY(0) scale(.98);-moz-transform:translateY(0) scale(.98);-ms-transform:translateY(0) scale(.98);transform:translateY(0) scale(.98)}.fw-button--label-wrapper{-webkit-transition:-webkit-transform .12s ease-in-out;transition:-webkit-transform .12s ease-in-out;-moz-transition:transform .12s ease-in-out,-moz-transform .12s ease-in-out;transition:transform .12s ease-in-out;transition:transform .12s ease-in-out,-webkit-transform .12s ease-in-out,-moz-transform .12s 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!important;--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important;border-color:rgb(222 224 227/var(--tw-border-opacity))!important;color:var(--colorText3)!important}.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{-webkit-transition:-webkit-filter .12s ease-in-out;transition:-webkit-filter .12s ease-in-out;-moz-transition:filter .12s ease-in-out;transition:filter .12s ease-in-out;transition:filter .12s ease-in-out,-webkit-filter .12s ease-in-out}.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{--tw-border-opacity:1!important;--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important;border-color:rgb(222 224 227/var(--tw-border-opacity))!important;color:var(--colorText3)!important}.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{-webkit-transition:-webkit-filter .12s ease-in-out;transition:-webkit-filter .12s ease-in-out;-moz-transition:filter .12s ease-in-out;transition:filter .12s ease-in-out;transition:filter .12s ease-in-out,-webkit-filter .12s ease-in-out}.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{--tw-border-opacity:1!important;background-color:transparent!important;border-color:rgb(222 224 227/var(--tw-border-opacity))!important;color:var(--colorText3)!important}.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{-webkit-transition:-webkit-filter .12s ease-in-out;transition:-webkit-filter .12s ease-in-out;-moz-transition:filter .12s ease-in-out;transition:filter .12s ease-in-out;transition:filter .12s ease-in-out,-webkit-filter .12s ease-in-out}.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{background-color:transparent!important;border-color:var(--colorBorder1)!important;color:var(--colorText3)!important}.fw-button--quaternary:disabled.router-link-active,.fw-button--quaternary:disabled.selected{--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important}.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:background-size .4s ease,-webkit-transform .16s ease,-webkit-box-shadow .2s ease;transition:background-size .4s ease,-webkit-transform .16s ease,-webkit-box-shadow .2s ease;-moz-transition:background-size .4s ease,transform .16s ease,box-shadow .2s ease,-moz-transform .16s ease;transition:background-size .4s ease,transform .16s ease,box-shadow .2s ease;transition:background-size .4s ease,transform .16s ease,box-shadow .2s ease,-webkit-transform .16s ease,-moz-transform .16s ease,-webkit-box-shadow .2s ease}.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,.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-keyframes pulse{50%{opacity:.5}}@-moz-keyframes pulse{50%{opacity:.5}}@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,.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{--tw-bg-opacity:1!important;background-color:rgb(222 224 227/var(--tw-bg-opacity))!important;background-image:none!important;border-color:var(--colorBorder1)!important;color:var(--colorText3)!important}.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;-webkit-filter:none;filter:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none}@media (prefers-reduced-motion:reduce){.fw-button,.fw-button *{-webkit-animation-duration:.01ms!important;-moz-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-transition-duration:.01ms!important;-moz-transition-duration:.01ms!important;transition-duration:.01ms!important}}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };

package/esm/fw-button.js

@@ -1,4 +1,4 @@
-export { s as FwButton } from './fw-button-CnQvA7oM.js';
+export { s as FwButton } from './fw-button-DZTHZLjk.js';
 import 'vue';
-import './index-BsEH8YYr.js';
+import './index-DHyRsKsZ.js';
 import './style-inject.es-tgCJW-Cu.js';

package/esm/{fw-card-D45R4kN-.js → fw-card-XGtsK2bM.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, useCssVars, pushScopeId, popScopeId, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, toDisplayString, renderSlot } from 'vue';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { defineComponent, computed, useCssVars, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, toDisplayString, renderSlot } from 'vue';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({
@@ -43,7 +43,7 @@ var __default__ = defineComponent({
     }
   },
   setup: function setup(props) {
-    var linkClass = ref("block cursor-pointer focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1");
+    var linkClass = "\n      block cursor-pointer focus:outline-none ring-offset-3 \n      focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1\n    ";
     var _useColours = useColours(),
       cardHeaderBg = _useColours.primaryFade5;
     var componentName = computed(function () {
@@ -61,7 +61,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "64253360": _ctx.cardHeaderBg
+      "v066a778c": _ctx.cardHeaderBg
     };
   });
 };
@@ -71,9 +71,6 @@ __default__.setup = __setup__ ? function (props, ctx) {
   return __setup__(props, ctx);
 } : __injectCSSVars__;
 
-var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-2a072d5e"), n = n(), popScopeId(), n;
-};
 var _hoisted_1 = {
   key: 0,
   "class": "fw-card--header px-8 py-4 rounded-t border-opacity-0"
@@ -104,11 +101,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["to", "href", "tabindex", "class"]);
 }
 
-var css_248z = ".fw-card--header[data-v-2a072d5e]{background-color:var(--64253360)}";
-var stylesheet = ".fw-card--header[data-v-2a072d5e]{background-color:var(--64253360)}";
+var css_248z = ".fw-card--header[data-v-cbcd19f2]{background-color:var(--v066a778c)}";
+var stylesheet = ".fw-card--header[data-v-cbcd19f2]{background-color:var(--v066a778c)}";
 styleInject(css_248z);
 
 __default__.render = render;
-__default__.__scopeId = "data-v-2a072d5e";
+__default__.__scopeId = "data-v-cbcd19f2";
 
 export { __default__ as _ };

package/esm/fw-card.js

@@ -1,4 +1,4 @@
-export { _ as FwCard } from './fw-card-D45R4kN-.js';
+export { _ as FwCard } from './fw-card-XGtsK2bM.js';
 import 'vue';
-import './get-root-colours-DCjlYelc.js';
+import './get-root-colours-DCCAnRF4.js';
 import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-checkbox.js

@@ -1,7 +1,7 @@
-import { defineComponent, useCssVars, pushScopeId, popScopeId, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createElementVNode, createCommentVNode, mergeProps, Transition, toDisplayString } from 'vue';
-import { a as Field } from './vee-validate.esm-3ptvCDR1.js';
-import { u as uniqueId } from './uniqueId-DZdGzBh8.js';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
+import { defineComponent, useCssVars, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createElementVNode, createCommentVNode, mergeProps, Transition, toDisplayString } from 'vue';
+import { a as Field } from './vee-validate-0dtT5GSQ.js';
+import { u as uniqueId } from './uniqueId-DK6xzFd8.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 
 var __default__ = defineComponent({
@@ -75,7 +75,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "9b4d156a": _ctx.primaryFade5
+      "v2c02006d": _ctx.primaryFade5
     };
   });
 };
@@ -85,9 +85,6 @@ __default__.setup = __setup__ ? function (props, ctx) {
   return __setup__(props, ctx);
 } : __injectCSSVars__;
 
-var _withScopeId = function _withScopeId(n) {
-  return pushScopeId("data-v-941e534e"), n = n(), popScopeId(), n;
-};
 var _hoisted_1 = {
   "class": "fw-checkbox w-full"
 };
@@ -161,11 +158,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["name", "value", "rules"])]);
 }
 
-var css_248z = ".fwFadeIn-enter-active[data-v-941e534e]{-webkit-animation:fwFadeIn-941e534e .35s;-moz-animation:fwFadeIn-941e534e .35s;animation:fwFadeIn-941e534e .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-941e534e]{animation:fwFadeIn-941e534e .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-941e534e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .15s ease-in;-moz-transition:background-color .15s ease-in;transition:background-color .15s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-941e534e]:hover{background-color:var(--9b4d156a);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-941e534e]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}";
-var stylesheet = ".fwFadeIn-enter-active[data-v-941e534e]{-webkit-animation:fwFadeIn-941e534e .35s;-moz-animation:fwFadeIn-941e534e .35s;animation:fwFadeIn-941e534e .35s;-webkit-transition:opacity .35s ease-in;-moz-transition:opacity .35s ease-in;transition:opacity .35s ease-in}.fwFadeIn-leave-active[data-v-941e534e]{animation:fwFadeIn-941e534e .35s reverse;-webkit-transition:opacity .35s ease-out;-moz-transition:opacity .35s ease-out;transition:opacity .35s ease-out}@-webkit-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@-moz-keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}@keyframes fwFadeIn-941e534e{0%{opacity:0}to{opacity:1}}.fw-checkbox input[data-v-941e534e]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .15s ease-in;-moz-transition:background-color .15s ease-in;transition:background-color .15s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-941e534e]:hover{background-color:var(--9b4d156a);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-941e534e]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}";
+var css_248z = ".fwFadeIn-enter-active[data-v-3c78e961],.fwFadeIn-leave-active[data-v-3c78e961]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-3c78e961],.fwFadeIn-leave-to[data-v-3c78e961]{opacity:0}.fwFadeIn-enter-to[data-v-3c78e961],.fwFadeIn-leave-from[data-v-3c78e961]{opacity:1}.fw-checkbox input[data-v-3c78e961]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-3c78e961]:hover{background-color:var(--v2c02006d);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-3c78e961]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}";
+var stylesheet = ".fwFadeIn-enter-active[data-v-3c78e961],.fwFadeIn-leave-active[data-v-3c78e961]{-webkit-transition:opacity .35s ease;-moz-transition:opacity .35s ease;transition:opacity .35s ease}.fwFadeIn-enter-from[data-v-3c78e961],.fwFadeIn-leave-to[data-v-3c78e961]{opacity:0}.fwFadeIn-enter-to[data-v-3c78e961],.fwFadeIn-leave-from[data-v-3c78e961]{opacity:1}.fw-checkbox input[data-v-3c78e961]{-ms-flex-negative:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-origin:border-box;background-size:60% 100%;display:inline-block;-webkit-flex-shrink:0;flex-shrink:0;-webkit-transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,-webkit-box-shadow .14s ease;-moz-transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,-webkit-box-shadow .14s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.fw-checkbox input[data-v-3c78e961]:hover{background-color:var(--v2c02006d);border-color:var(--colorPrimary)}.fw-checkbox input[data-v-3c78e961]:checked{background-color:var(--colorPrimary);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.753.219c.319.294.319.769 0 1.034l-8.25 8.25c-.266.319-.74.319-1.034 0l-4.25-4.25c-.292-.265-.292-.74 0-1.034a.754.754 0 0 1 1.061 0L5 7.94 12.719.219c.293-.292.769-.292 1.034 0Z' fill='%23F7F7F7'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:60%;border-color:var(--colorPrimary)}";
 styleInject(css_248z);
 
 __default__.render = render;
-__default__.__scopeId = "data-v-941e534e";
+__default__.__scopeId = "data-v-3c78e961";
 
 export { __default__ as FwCheckbox };