@frollo/frollo-web-ui 0.0.4 → 0.0.7

package/cjs/index.js

@@ -1259,7 +1259,7 @@ $$1({ target: 'Object', stat: true }, {
   entries: function entries(O) {
     return $entries(O);
   }
-});var script$1 = vue.defineComponent({
+});var script$2 = vue.defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -1274,29 +1274,57 @@ $$1({ target: 'Object', stat: true }, {
      */
     prefixTitle: {
       type: String
-    }
+    },
+
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+      type: [String, Object]
+    },
+
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: String
+  },
+  setup: function setup(props) {
+    var componentName = vue.computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'div';
+    });
+    return {
+      componentName: componentName
+    };
   }
 });var _hoisted_1$1 = {
-  "class": "fw-card shadow rounded-lg"
-};
-var _hoisted_2 = {
   key: 0,
   "class": "fw-card--header text-lg px-8 py-4 font-bold bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_3 = {
+var _hoisted_2$1 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_4 = {
+var _hoisted_3$1 = {
   key: 1
 };
-var _hoisted_5 = {
+var _hoisted_4$1 = {
   key: 1,
   "class": "p-8"
 };
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_2, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)]);
-}script$1.render = render$1;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS = descriptors;
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.componentName), {
+    to: _ctx.to ? _ctx.to : null,
+    href: _ctx.href ? _ctx.href : null,
+    "class": vue.normalizeClass(["fw-card shadow-card rounded-lg", _ctx.to || _ctx.href ? 'block focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1' : ''])
+  }, {
+    "default": vue.withCtx(function () {
+      return [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_1$1, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)];
+    }),
+    _: 3
+  }, 8, ["to", "href", "class"]);
+}script$2.render = render$2;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS = descriptors;
 var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
 var definePropertyModule$1 = objectDefineProperty;
 var anObject$1 = anObject$4;
@@ -1432,7 +1460,7 @@ $({ target: 'Array', proto: true }, {
 });
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('includes');var script = vue.defineComponent({
+addToUnscopables('includes');var script$1 = vue.defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -1467,7 +1495,7 @@ addToUnscopables('includes');var script = vue.defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1479,9 +1507,9 @@ addToUnscopables('includes');var script = vue.defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1497,6 +1525,11 @@ addToUnscopables('includes');var script = vue.defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = vue.ref({
@@ -1558,6 +1591,11 @@ addToUnscopables('includes');var script = vue.defineComponent({
       return ctx.emit('focusout', e);
     };
 
+    var tagName = vue.computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
     return {
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
@@ -1567,33 +1605,219 @@ addToUnscopables('includes');var script = vue.defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
-});var _hoisted_1 = ["to", "href"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("button", {
-    "class": vue.normalizeClass(["fw-button font-bold rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: "button",
-    to: _ctx.to,
-    href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
+});function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
+    "class": vue.normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
+    to: _ctx.to ? _ctx.to : null,
+    href: _ctx.href ? _ctx.href : null,
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.renderSlot(_ctx.$slots, "default")];
     }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+}function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}var css_248z$1 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+var stylesheet$1 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+styleInject(css_248z$1);script$1.render = render$1;var script = vue.defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = vue.ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/vue.createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
+};
+var _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = vue.resolveComponent("FwButton");
+
+  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [vue.createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [vue.createElementVNode("div", _hoisted_5, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+    return vue.openBlock(), vue.createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": vue.withCtx(function () {
+        return [vue.createTextVNode(vue.toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.createTextVNode(vue.toDisplayString(_ctx.actionLabel), 1)];
     }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_7, [vue.createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": vue.withCtx(function () {
+      return [_hoisted_8, (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9, [vue.createElementVNode("path", {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "2",
+        d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
+      }, null, 8, _hoisted_10)]))];
     }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick"])])]), vue.createVNode(vue.Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": vue.withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [vue.createElementVNode("div", _hoisted_12, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+        return vue.openBlock(), vue.createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": vue.withCtx(function () {
+            return [vue.createTextVNode(vue.toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (vue.openBlock(), vue.createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": vue.withCtx(function () {
+          return [vue.createTextVNode(vue.toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)];
     }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
-}script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$1,FwButton:script});var install = function install(app) {
+    _: 1
+  })]);
+}var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$2,FwButton:script$1,FwNavigationMenu:script});var install = function install(app) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         componentName = _ref2[0],
@@ -1601,7 +1825,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
     app.component(componentName, component);
   });
-};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$1,FwButton:script});Object.entries(components).forEach(function (_ref) {
+};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$2,FwButton:script$1,FwNavigationMenu:script});Object.entries(components).forEach(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       componentName = _ref2[0],
       component = _ref2[1];

package/esm/{index-758e7e1e.js → fw-button-6d5a9671.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1183,7 +1183,7 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1195,9 +1195,9 @@ var script = defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1213,6 +1213,11 @@ var script = defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = ref({
@@ -1274,6 +1279,11 @@ var script = defineComponent({
       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,
@@ -1283,36 +1293,62 @@ var script = defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
 });
 
-var _hoisted_1 = ["to", "href"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("button", {
-    "class": normalizeClass(["fw-button font-bold rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: "button",
-    to: _ctx.to,
-    href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
-    }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
-    }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
+    to: _ctx.to ? _ctx.to : null,
+    href: _ctx.href ? _ctx.href : null,
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default")];
     }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
-    }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
 }
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+var stylesheet = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+styleInject(css_248z);
+
 script.render = render;
 
-export { _export as _, aCallable$1 as a, functionBindNative as b, classofRaw as c, fails$7 as d, getBuiltIn$4 as e, functionUncurryThis as f, global$l as g, inspectSource$2 as h, isCallable$9 as i, isObject$5 as j, indexedObject as k, lengthOfArrayLike$1 as l, documentCreateElement$1 as m, createNonEnumerableProperty$3 as n, descriptors as o, objectKeys$1 as p, toIndexedObject$4 as q, redefine$2 as r, objectPropertyIsEnumerable as s, toObject$1 as t, script as u, wellKnownSymbol$2 as w };
+export { _export as _, aCallable$1 as a, functionBindNative as b, classofRaw as c, fails$7 as d, getBuiltIn$4 as e, functionUncurryThis as f, global$l as g, inspectSource$2 as h, isCallable$9 as i, isObject$5 as j, indexedObject as k, lengthOfArrayLike$1 as l, documentCreateElement$1 as m, createNonEnumerableProperty$3 as n, descriptors as o, objectKeys$1 as p, toIndexedObject$4 as q, redefine$2 as r, objectPropertyIsEnumerable as s, toObject$1 as t, script as u, styleInject as v, wellKnownSymbol$2 as w };

package/esm/fw-button.js

@@ -1,2 +1,2 @@
-export { u as FwButton } from './index-758e7e1e.js';
+export { u as FwButton } from './fw-button-6d5a9671.js';
 import 'vue';

package/esm/fw-card.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, toDisplayString, createCommentVNode, renderSlot } from 'vue';
 
 var script = defineComponent({
   name: 'FwCard',
@@ -15,30 +15,58 @@ var script = defineComponent({
      */
     prefixTitle: {
       type: String
-    }
+    },
+
+    /**
+     * A `router-link` path or object
+     */
+    to: {
+      type: [String, Object]
+    },
+
+    /**
+     * A URL to link to using a native anchor element
+     */
+    href: String
+  },
+  setup: function setup(props) {
+    var componentName = computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'div';
+    });
+    return {
+      componentName: componentName
+    };
   }
 });
 
 var _hoisted_1 = {
-  "class": "fw-card shadow rounded-lg"
-};
-var _hoisted_2 = {
   key: 0,
   "class": "fw-card--header text-lg px-8 py-4 font-bold bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_3 = {
+var _hoisted_2 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
   key: 1
 };
-var _hoisted_5 = {
+var _hoisted_4 = {
   key: 1,
   "class": "p-8"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_2, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]);
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.componentName), {
+    to: _ctx.to ? _ctx.to : null,
+    href: _ctx.href ? _ctx.href : null,
+    "class": normalizeClass(["fw-card shadow-card rounded-lg", _ctx.to || _ctx.href ? 'block focus:outline-none ring-offset-3 focus:ring focus:ring-primary transform-none transition-transform hover:-translate-y-1' : ''])
+  }, {
+    "default": withCtx(function () {
+      return [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_1, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)];
+    }),
+    _: 3
+  }, 8, ["to", "href", "class"]);
 }
 
 script.render = render;