@frollo/frollo-web-ui 9.0.0 → 9.0.2

package/esm/fw-button-CnQvA7oM.js

@@ -1,296 +0,0 @@
-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-image-D-OHafdw.js

@@ -1,217 +0,0 @@
-import { defineComponent, computed, ref, useCssVars, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, withKeys, normalizeClass, createElementVNode, createVNode, renderSlot, createBlock, createCommentVNode } from 'vue';
-import { _ as __default__$1 } from './fw-loading-bar-DecYSBC_.js';
-import { u as render$1 } from './index-BsEH8YYr.js';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var handleIntersect = function handleIntersect(entries, observer) {
-  entries.forEach(function (entry) {
-    if (entry.isIntersecting) {
-      loadImage(entry.target);
-      observer.unobserve(entry.target);
-    }
-  });
-};
-var createObserver = function createObserver(el) {
-  var options = {
-    root: null,
-    threshold: Number(el.getAttribute('threshold')) || 0
-  };
-  var observer = new IntersectionObserver(handleIntersect, options);
-  observer.observe(el);
-};
-var loadImage = function loadImage(el) {
-  var imageElement = Array.from(el.children).find(function (element) {
-    return element.nodeName === 'IMG';
-  });
-  if (imageElement) {
-    var type = el.getAttribute('type');
-    var url = imageElement.dataset.url;
-    var setImgError = function setImgError() {
-      setTimeout(function () {
-        return el.classList.add('fw-image--loaded-error');
-      }, 100);
-      setTimeout(function () {
-        var _el$querySelector;
-        return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
-      }, 600);
-    };
-    if (url) {
-      imageElement.src = url;
-    } else {
-      setImgError();
-    }
-    imageElement.addEventListener('load', function () {
-      setTimeout(function () {
-        return el.classList.add('fw-image--loaded');
-      }, 100);
-      setTimeout(function () {
-        var _el$querySelector2;
-        return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
-      }, 600);
-    });
-    imageElement.addEventListener('error', function () {
-      setImgError();
-    });
-    if (type === 'background') {
-      el.style.backgroundImage = "url('".concat(url, "')");
-      imageElement.classList.add('!invisible');
-    }
-  }
-};
-var lazyLoadDirective = {
-  mounted: function mounted(el) {
-    if (window.IntersectionObserver) {
-      createObserver(el);
-    } else {
-      loadImage(el);
-    }
-  }
-};
-
-var __default__ = defineComponent({
-  name: 'FwImage',
-  directives: {
-    lazyload: lazyLoadDirective
-  },
-  components: {
-    FwLoadingBar: __default__$1,
-    FileExclamationSvg: render$1
-  },
-  props: {
-    /**
-     * The src attribute of the image
-     */
-    src: String,
-    /**
-     * The alt attribute of the image
-     */
-    alt: String,
-    /**
-     * The type of component. Accepts 'background' and defaults to the native html5 element.
-     */
-    type: {
-      type: String,
-      "default": 'native',
-      validator: function validator(value) {
-        return ['native', 'background'].includes(value);
-      }
-    },
-    /**
-     * Whether the loading bar and error state are rounded.
-     */
-    rounded: {
-      type: Boolean,
-      "default": false
-    },
-    /**
-     * The class for the native image element
-     */
-    imageClass: {
-      type: String
-    },
-    /**
-     * Controls the threshold before the component triggers the src url.
-     */
-    threshold: {
-      type: Number,
-      "default": 0
-    },
-    /**
-     * Controls the error UI when an image src is unavailable.
-     */
-    enableErrors: {
-      type: Boolean,
-      "default": true
-    }
-  },
-  emits: ['click', 'mouseover', 'mouseout'],
-  setup: function setup(props) {
-    var isBackground = computed(function () {
-      return props.type === 'background';
-    });
-    var fwImageRef = ref(null);
-    var _useColours = useColours(),
-      colorErrorTextFade5 = _useColours.colorErrorTextFade5;
-    return {
-      fwImageRef: fwImageRef,
-      isBackground: isBackground,
-      colorErrorTextFade5: colorErrorTextFade5
-    };
-  }
-});
-var __injectCSSVars__ = function __injectCSSVars__() {
-  useCssVars(function (_ctx) {
-    return {
-      "eb5c76bc": _ctx.colorErrorTextFade5
-    };
-  });
-};
-var __setup__ = __default__.setup;
-__default__.setup = __setup__ ? function (props, ctx) {
-  __injectCSSVars__();
-  return __setup__(props, ctx);
-} : __injectCSSVars__;
-
-var _hoisted_1 = ["type", "threshold"];
-var _hoisted_2 = ["data-url", "alt"];
-var _hoisted_3 = {
-  "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
-  var _component_FileExclamationSvg = resolveComponent("FileExclamationSvg");
-  var _directive_lazyload = resolveDirective("lazyload");
-  return withDirectives((openBlock(), createElementBlock("div", {
-    ref: "fwImageRef",
-    type: _ctx.type,
-    threshold: _ctx.threshold,
-    "class": normalizeClass(["fw-image", {
-      'fw-image--background': _ctx.isBackground,
-      'rounded-full': _ctx.rounded
-    }]),
-    onClick: _cache[0] || (_cache[0] = function ($event) {
-      return _ctx.$emit('click', $event);
-    }),
-    onKeyup: _cache[1] || (_cache[1] = withKeys(function ($event) {
-      return _ctx.$emit('click', $event);
-    }, ["enter"])),
-    onMouseover: _cache[2] || (_cache[2] = function ($event) {
-      return _ctx.$emit('mouseover');
-    }),
-    onMouseout: _cache[3] || (_cache[3] = function ($event) {
-      return _ctx.$emit('mouseout');
-    }),
-    onFocusin: _cache[4] || (_cache[4] = function ($event) {
-      return _ctx.$emit('mouseover');
-    }),
-    onFocusout: _cache[5] || (_cache[5] = function ($event) {
-      return _ctx.$emit('mouseout');
-    })
-  }, [createElementVNode("img", {
-    "data-url": _ctx.src,
-    alt: _ctx.alt,
-    loading: "lazy",
-    "class": normalizeClass([_ctx.rounded ? 'rounded-full' : '', _ctx.imageClass])
-  }, null, 10, _hoisted_2), createVNode(_component_FwLoadingBar, {
-    "class": normalizeClass(["fw-image--loading w-full h-full", {
-      'rounded-full': _ctx.rounded
-    }])
-  }, null, 8, ["class"]), createElementVNode("div", {
-    "class": normalizeClass(["fw-image--error rounded", {
-      'rounded-full': _ctx.rounded
-    }])
-  }, [createElementVNode("div", _hoisted_3, [_ctx.enableErrors ? (openBlock(), createBlock(_component_FileExclamationSvg, {
-    key: 0,
-    name: "file-exclamation",
-    "class": "w-full h-full scale-[0.25] opacity-40 text-brand-warning-text max-w-[150px]"
-  })) : createCommentVNode("", true)])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
-}
-
-var css_248z = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{background-color:var(--eb5c76bc);height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-moz-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
-var stylesheet = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{background-color:var(--eb5c76bc);height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;-moz-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
-styleInject(css_248z);
-
-__default__.render = render;
-
-export { __default__ as _ };

package/esm/fw-loading-bar-DecYSBC_.js

@@ -1,45 +0,0 @@
-import { defineComponent, useCssVars, createElementBlock, openBlock } from 'vue';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var __default__ = defineComponent({
-  name: 'FwLoadingBar',
-  setup: function setup() {
-    var _useColours = useColours(),
-      primaryFade5 = _useColours.primaryFade5,
-      primaryFade20 = _useColours.primaryFade20;
-    return {
-      primaryFade5: primaryFade5,
-      primaryFade20: primaryFade20
-    };
-  }
-});
-var __injectCSSVars__ = function __injectCSSVars__() {
-  useCssVars(function (_ctx) {
-    return {
-      "96bc2d4c": _ctx.primaryFade20,
-      "57716cce": _ctx.primaryFade5
-    };
-  });
-};
-var __setup__ = __default__.setup;
-__default__.setup = __setup__ ? function (props, ctx) {
-  __injectCSSVars__();
-  return __setup__(props, ctx);
-} : __injectCSSVars__;
-
-var _hoisted_1 = {
-  "class": "fw-loading-bar rounded",
-  "aria-hidden": "true"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1);
-}
-
-var css_248z = ".fw-loading-bar{-webkit-animation:fwSkeletonLoading 1.5s linear infinite running;-moz-animation:fwSkeletonLoading 1.5s linear infinite running;animation:fwSkeletonLoading 1.5s linear infinite running;background-image:-webkit-linear-gradient(350deg,var(--96bc2d4c),var(--57716cce),var(--96bc2d4c));background-image:-moz-linear-gradient(350deg,var(--96bc2d4c),var(--57716cce),var(--96bc2d4c));background-image:linear-gradient(100deg,var(--96bc2d4c),var(--57716cce),var(--96bc2d4c));background-size:200% 200%}@-webkit-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@-moz-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}";
-var stylesheet = ".fw-loading-bar{-webkit-animation:fwSkeletonLoading 1.5s linear infinite running;-moz-animation:fwSkeletonLoading 1.5s linear infinite running;animation:fwSkeletonLoading 1.5s linear infinite running;background-image:-webkit-linear-gradient(350deg,var(--96bc2d4c),var(--57716cce),var(--96bc2d4c));background-image:-moz-linear-gradient(350deg,var(--96bc2d4c),var(--57716cce),var(--96bc2d4c));background-image:linear-gradient(100deg,var(--96bc2d4c),var(--57716cce),var(--96bc2d4c));background-size:200% 200%}@-webkit-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@-moz-keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}@keyframes fwSkeletonLoading{0%{background-position-x:200%}50%{background-position-x:100%}to{background-position-x:0}}";
-styleInject(css_248z);
-
-__default__.render = render;
-
-export { __default__ as _ };