@aotearoan/neon 23.2.2 → 23.2.4

package/dist/common/enums/NeonLayoutSize.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e=(r=>(r.Zero="z",r.Small="s",r.Medium="m",r.Large="l",r))(e||{});exports.NeonLayoutSize=e;
+//# sourceMappingURL=NeonLayoutSize.cjs.js.map

package/dist/common/enums/NeonLayoutSize.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonLayoutSize.cjs.js","sources":["../../../src/common/enums/NeonLayoutSize.ts"],"sourcesContent":["/**\n * Describes the available gap options for the NeonInline & Neon Stack components, expanding on NeonSize to add a Zero\n * gap option.\n */\nexport enum NeonLayoutSize {\n  Zero = 'z',\n  Small = 's',\n  Medium = 'm',\n  Large = 'l',\n}\n"],"names":["NeonLayoutSize"],"mappings":"gFAIO,IAAKA,GAAAA,IACVA,EAAA,KAAO,IACPA,EAAA,MAAQ,IACRA,EAAA,OAAS,IACTA,EAAA,MAAQ,IAJEA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/common/enums/NeonLayoutSize.es.js

@@ -0,0 +1,5 @@
+var l = /* @__PURE__ */ ((r) => (r.Zero = "z", r.Small = "s", r.Medium = "m", r.Large = "l", r))(l || {});
+export {
+  l as NeonLayoutSize
+};
+//# sourceMappingURL=NeonLayoutSize.es.js.map

package/dist/common/enums/NeonLayoutSize.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonLayoutSize.es.js","sources":["../../../src/common/enums/NeonLayoutSize.ts"],"sourcesContent":["/**\n * Describes the available gap options for the NeonInline & Neon Stack components, expanding on NeonSize to add a Zero\n * gap option.\n */\nexport enum NeonLayoutSize {\n  Zero = 'z',\n  Small = 's',\n  Medium = 'm',\n  Large = 'l',\n}\n"],"names":["NeonLayoutSize"],"mappings":"AAIO,IAAKA,sBAAAA,OACVA,EAAA,OAAO,KACPA,EAAA,QAAQ,KACRA,EAAA,SAAS,KACTA,EAAA,QAAQ,KAJEA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/layout/inline/NeonInline.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),n=require("../../../common/enums/NeonSize.cjs.js"),o=require("../../../common/enums/NeonResponsive.cjs.js"),i=e.defineComponent({name:"NeonInline",props:{gap:{type:String,default:()=>n.NeonSize.Large},breakpoint:{type:String,default:()=>o.NeonResponsive.MobileLarge}}});module.exports=i;
+"use strict";const e=require("vue"),n=require("../../../common/enums/NeonLayoutSize.cjs.js"),t=e.defineComponent({name:"NeonInline",props:{gap:{type:String,default:()=>n.NeonLayoutSize.Large},breakpoint:{type:String}}});module.exports=t;
 //# sourceMappingURL=NeonInline.cjs.js.map

package/dist/components/layout/inline/NeonInline.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInline.cjs.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonResponsive } from '@/common/enums/NeonResponsive';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n    /**\n     * Breakpoint at which to layout switches to vertical. TIP: Pass <em>breakpoint=\"\"</em> to override the default\n     * breakpoint & prevent switching to a vertical layout.\n     */\n    breakpoint: { type: String as () => NeonSize, default: () => NeonResponsive.MobileLarge },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize","NeonResponsive"],"mappings":"gJAQAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,IAAK,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,KAAA,EAK/D,WAAY,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,eAAe,WAAA,CAAY,CAE5F,CAAC"}
+{"version":3,"file":"NeonInline.cjs.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport type { NeonResponsive } from '@/common/enums/NeonResponsive';\nimport { NeonLayoutSize } from '@/common/enums/NeonLayoutSize';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonLayoutSize, default: () => NeonLayoutSize.Large },\n    /**\n     * Breakpoint at which to layout switches to vertical column layout. If no breakpoint is provided there is no\n     * responsive switch.\n     */\n    breakpoint: { type: String as () => NeonResponsive },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLayoutSize"],"mappings":"6FAQAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,IAAK,CAAE,KAAM,OAAgC,QAAS,IAAMC,EAAAA,eAAe,KAAA,EAK3E,WAAY,CAAE,KAAM,MAAA,CAA+B,CAEvD,CAAC"}

package/dist/components/layout/inline/NeonInline.es.js

@@ -1,18 +1,17 @@
 import { defineComponent as e } from "vue";
-import { NeonSize as o } from "../../../common/enums/NeonSize.es.js";
-import { NeonResponsive as n } from "../../../common/enums/NeonResponsive.es.js";
+import { NeonLayoutSize as n } from "../../../common/enums/NeonLayoutSize.es.js";
 const p = e({
   name: "NeonInline",
   props: {
     /**
      * Size of the gap between items
      */
-    gap: { type: String, default: () => o.Large },
+    gap: { type: String, default: () => n.Large },
     /**
-     * Breakpoint at which to layout switches to vertical. TIP: Pass <em>breakpoint=""</em> to override the default
-     * breakpoint & prevent switching to a vertical layout.
+     * Breakpoint at which to layout switches to vertical column layout. If no breakpoint is provided there is no
+     * responsive switch.
      */
-    breakpoint: { type: String, default: () => n.MobileLarge }
+    breakpoint: { type: String }
   }
 });
 export {

package/dist/components/layout/inline/NeonInline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInline.es.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonResponsive } from '@/common/enums/NeonResponsive';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n    /**\n     * Breakpoint at which to layout switches to vertical. TIP: Pass <em>breakpoint=\"\"</em> to override the default\n     * breakpoint & prevent switching to a vertical layout.\n     */\n    breakpoint: { type: String as () => NeonSize, default: () => NeonResponsive.MobileLarge },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize","NeonResponsive"],"mappings":";;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,KAAK,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/D,YAAY,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAe,YAAA;AAAA,EAAY;AAE5F,CAAC;"}
+{"version":3,"file":"NeonInline.es.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport type { NeonResponsive } from '@/common/enums/NeonResponsive';\nimport { NeonLayoutSize } from '@/common/enums/NeonLayoutSize';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonLayoutSize, default: () => NeonLayoutSize.Large },\n    /**\n     * Breakpoint at which to layout switches to vertical column layout. If no breakpoint is provided there is no\n     * responsive switch.\n     */\n    breakpoint: { type: String as () => NeonResponsive },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLayoutSize"],"mappings":";;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,KAAK,EAAE,MAAM,QAAgC,SAAS,MAAMC,EAAe,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3E,YAAY,EAAE,MAAM,OAAA;AAAA,EAA+B;AAEvD,CAAC;"}

package/dist/components/layout/inline/NeonInline.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./NeonInline.cjs.js"),e=require("vue"),o=require("../../../_virtual/_plugin-vue_export-helper.cjs.js");function t(n,s,l,p,a,c){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-inline--gap-${n.gap}`,`neon-inline--breakpoint-${n.breakpoint}`],"neon-inline"])},[e.renderSlot(n.$slots,"default")],2)}const i=o(r,[["render",t]]);module.exports=i;
+"use strict";const r=require("./NeonInline.cjs.js"),n=require("vue"),o=require("../../../_virtual/_plugin-vue_export-helper.cjs.js");function t(e,s,l,p,a,u){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[`neon-inline--gap-${e.gap}`,e.breakpoint&&`neon-inline--breakpoint-${e.breakpoint}`],"neon-inline"])},[n.renderSlot(e.$slots,"default")],2)}const i=o(r,[["render",t]]);module.exports=i;
 //# sourceMappingURL=NeonInline.vue.cjs.js.map

package/dist/components/layout/inline/NeonInline.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInline.vue.cjs.js","sources":["../../../../src/components/layout/inline/NeonInline.vue"],"sourcesContent":["<template>\n  <div :class=\"[`neon-inline--gap-${gap}`, `neon-inline--breakpoint-${breakpoint}`]\" class=\"neon-inline\">\n    <!-- @slot stack contents -->\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInline.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":"kLACEA,EAAAA,mBAGM,MAAA,CAHA,MAAKC,EAAAA,eAAA,CAAA,CAAA,oBAAuBC,EAAA,GAAG,GAAA,2BAA+BA,EAAA,UAAU,IAAW,aAAa,CAAA,IAEpGC,aAAaD,EAAA,OAAA,SAAA"}
+{"version":3,"file":"NeonInline.vue.cjs.js","sources":["../../../../src/components/layout/inline/NeonInline.vue"],"sourcesContent":["<template>\n  <div :class=\"[`neon-inline--gap-${gap}`, breakpoint && `neon-inline--breakpoint-${breakpoint}`]\" class=\"neon-inline\">\n    <!-- @slot inline contents -->\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInline.ts\"></script>\n"],"names":["_createElementBlock","_ctx","_renderSlot"],"mappings":"kLACEA,EAAAA,mBAGM,MAAA,CAHA,6CAA4BC,EAAA,GAAG,GAAIA,cAAU,2BAA+BA,EAAA,UAAU,IAAW,aAAa,CAAA,IAElHC,aAAaD,EAAA,OAAA,SAAA"}

package/dist/components/layout/inline/NeonInline.vue.es.js

@@ -1,15 +1,15 @@
 import n from "./NeonInline.es.js";
 import { openBlock as o, createElementBlock as r, normalizeClass as i, renderSlot as t } from "vue";
 import a from "../../../_virtual/_plugin-vue_export-helper.es.js";
-function l(e, p, s, c, f, m) {
+function p(e, l, s, f, m, c) {
   return o(), r("div", {
-    class: i([[`neon-inline--gap-${e.gap}`, `neon-inline--breakpoint-${e.breakpoint}`], "neon-inline"])
+    class: i([[`neon-inline--gap-${e.gap}`, e.breakpoint && `neon-inline--breakpoint-${e.breakpoint}`], "neon-inline"])
   }, [
     t(e.$slots, "default")
   ], 2);
 }
-const _ = /* @__PURE__ */ a(n, [["render", l]]);
+const u = /* @__PURE__ */ a(n, [["render", p]]);
 export {
-  _ as default
+  u as default
 };
 //# sourceMappingURL=NeonInline.vue.es.js.map

package/dist/components/layout/inline/NeonInline.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInline.vue.es.js","sources":["../../../../src/components/layout/inline/NeonInline.vue"],"sourcesContent":["<template>\n  <div :class=\"[`neon-inline--gap-${gap}`, `neon-inline--breakpoint-${breakpoint}`]\" class=\"neon-inline\">\n    <!-- @slot stack contents -->\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInline.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":";;;;cACEA,EAGM,OAAA;AAAA,IAHA,OAAKC,EAAA,CAAA,CAAA,oBAAuBC,EAAA,GAAG,IAAA,2BAA+BA,EAAA,UAAU,KAAW,aAAa,CAAA;AAAA;IAEpGC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;"}
+{"version":3,"file":"NeonInline.vue.es.js","sources":["../../../../src/components/layout/inline/NeonInline.vue"],"sourcesContent":["<template>\n  <div :class=\"[`neon-inline--gap-${gap}`, breakpoint && `neon-inline--breakpoint-${breakpoint}`]\" class=\"neon-inline\">\n    <!-- @slot inline contents -->\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInline.ts\"></script>\n"],"names":["_createElementBlock","_ctx","_renderSlot"],"mappings":";;;;cACEA,EAGM,OAAA;AAAA,IAHA,+BAA4BC,EAAA,GAAG,IAAIA,gBAAU,2BAA+BA,EAAA,UAAU,KAAW,aAAa,CAAA;AAAA;IAElHC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;"}

package/dist/components/layout/stack/NeonStack.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),n=require("../../../common/enums/NeonSize.cjs.js"),t=e.defineComponent({name:"NeonStack",props:{gap:{type:String,default:()=>n.NeonSize.Large}}});module.exports=t;
+"use strict";const e=require("vue"),t=require("../../../common/enums/NeonLayoutSize.cjs.js"),n=e.defineComponent({name:"NeonStack",props:{gap:{type:String,default:()=>t.NeonLayoutSize.Large}}});module.exports=n;
 //# sourceMappingURL=NeonStack.cjs.js.map

package/dist/components/layout/stack/NeonStack.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonStack.cjs.js","sources":["../../../../src/components/layout/stack/NeonStack.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\n\n/**\n * A vertical layout component. NeonStack provides a way of laying out it's contents with standard gaps at each\n * breakpoint. For cases where the gap needs to be different it is recommended to just use a <em>div</em> & apply a gap\n * using CSS. Alternatively, NeonStack could be used by also applying a gap in CSS.\n */\nexport default defineComponent({\n  name: 'NeonStack',\n  props: {\n    /** Size of the gap between items */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize"],"mappings":"uFAQAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,MAAO,CAEL,IAAK,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,KAAA,CAAM,CAEzE,CAAC"}
+{"version":3,"file":"NeonStack.cjs.js","sources":["../../../../src/components/layout/stack/NeonStack.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonLayoutSize } from '@/common/enums/NeonLayoutSize';\n\n/**\n * A vertical layout component. NeonStack provides a way of laying out it's contents with standard gaps at each\n * breakpoint. For cases where the gap needs to be different it is recommended to just use a <em>div</em> & apply a gap\n * using CSS. Alternatively, NeonStack could be used by also applying a gap in CSS.\n */\nexport default defineComponent({\n  name: 'NeonStack',\n  props: {\n    /** Size of the gap between items */\n    gap: { type: String as () => NeonLayoutSize, default: () => NeonLayoutSize.Large },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLayoutSize"],"mappings":"6FAQAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,MAAO,CAEL,IAAK,CAAE,KAAM,OAAgC,QAAS,IAAMC,EAAAA,eAAe,KAAA,CAAM,CAErF,CAAC"}

package/dist/components/layout/stack/NeonStack.es.js

@@ -1,6 +1,6 @@
 import { defineComponent as e } from "vue";
-import { NeonSize as o } from "../../../common/enums/NeonSize.es.js";
-const a = e({
+import { NeonLayoutSize as o } from "../../../common/enums/NeonLayoutSize.es.js";
+const n = e({
   name: "NeonStack",
   props: {
     /** Size of the gap between items */
@@ -8,6 +8,6 @@ const a = e({
   }
 });
 export {
-  a as default
+  n as default
 };
 //# sourceMappingURL=NeonStack.es.js.map

package/dist/components/layout/stack/NeonStack.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonStack.es.js","sources":["../../../../src/components/layout/stack/NeonStack.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\n\n/**\n * A vertical layout component. NeonStack provides a way of laying out it's contents with standard gaps at each\n * breakpoint. For cases where the gap needs to be different it is recommended to just use a <em>div</em> & apply a gap\n * using CSS. Alternatively, NeonStack could be used by also applying a gap in CSS.\n */\nexport default defineComponent({\n  name: 'NeonStack',\n  props: {\n    /** Size of the gap between items */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize"],"mappings":";;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA,IAEL,KAAK,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,MAAA;AAAA,EAAM;AAEzE,CAAC;"}
+{"version":3,"file":"NeonStack.es.js","sources":["../../../../src/components/layout/stack/NeonStack.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonLayoutSize } from '@/common/enums/NeonLayoutSize';\n\n/**\n * A vertical layout component. NeonStack provides a way of laying out it's contents with standard gaps at each\n * breakpoint. For cases where the gap needs to be different it is recommended to just use a <em>div</em> & apply a gap\n * using CSS. Alternatively, NeonStack could be used by also applying a gap in CSS.\n */\nexport default defineComponent({\n  name: 'NeonStack',\n  props: {\n    /** Size of the gap between items */\n    gap: { type: String as () => NeonLayoutSize, default: () => NeonLayoutSize.Large },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLayoutSize"],"mappings":";;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA,IAEL,KAAK,EAAE,MAAM,QAAgC,SAAS,MAAMC,EAAe,MAAA;AAAA,EAAM;AAErF,CAAC;"}

package/dist/components/user-input/field/NeonField.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("../../../common/enums/NeonFunctionalColor.cjs.js"),o=e.defineComponent({name:"NeonField",props:{label:{type:String,required:!0},labelFor:{type:String,default:null},optional:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},optionalLabel:{type:String,default:"Optional"},message:{type:String,default:null},messageColor:{type:String,default:t.NeonFunctionalColor.LowContrast}}});module.exports=o;
+"use strict";const e=require("vue"),t=require("../../../common/enums/NeonFunctionalColor.cjs.js"),o=e.defineComponent({name:"NeonField",props:{label:{type:String,required:!0},labelFor:{type:String,default:null},optional:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},optionalLabel:{type:String,default:"Optional"},noMessage:{type:Boolean,default:!1},message:{type:String,default:""},messageColor:{type:String,default:t.NeonFunctionalColor.LowContrast}}});module.exports=o;
 //# sourceMappingURL=NeonField.cjs.js.map

package/dist/components/user-input/field/NeonField.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: null },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor"],"mappings":"kGAOAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,OAAQ,QAAS,IAAA,EAInC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAIxC,QAAS,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIlC,aAAc,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,CAAY,CAExG,CAAC"}
+{"version":3,"file":"NeonField.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Remove empty message space below input. By default, a blank message will be displayed below each input which\n     * helps simplify form layouts.\n     */\n    noMessage: { type: Boolean, default: false },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: '' },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor"],"mappings":"kGAOAA,EAAeC,kBAAgB,CAC7B,KAAM,YACN,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,OAAQ,QAAS,IAAA,EAInC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAKxC,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,QAAS,CAAE,KAAM,OAAQ,QAAS,EAAA,EAIlC,aAAc,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,CAAY,CAExG,CAAC"}

package/dist/components/user-input/field/NeonField.es.js

@@ -1,6 +1,6 @@
 import { defineComponent as e } from "vue";
 import { NeonFunctionalColor as t } from "../../../common/enums/NeonFunctionalColor.es.js";
-const a = e({
+const l = e({
   name: "NeonField",
   props: {
     /**
@@ -23,10 +23,15 @@ const a = e({
      * The default "optional" label text.
      */
     optionalLabel: { type: String, default: "Optional" },
+    /**
+     * Remove empty message space below input. By default, a blank message will be displayed below each input which
+     * helps simplify form layouts.
+     */
+    noMessage: { type: Boolean, default: !1 },
     /**
      * Message to display below the input field.
      */
-    message: { type: String, default: null },
+    message: { type: String, default: "" },
     /**
      * The color of message displayed under input. Can be any functional color.
      */
@@ -34,6 +39,6 @@ const a = e({
   }
 });
 export {
-  a as default
+  l as default
 };
 //# sourceMappingURL=NeonField.es.js.map

package/dist/components/user-input/field/NeonField.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.es.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: null },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor"],"mappings":";;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAInC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,eAAe,EAAE,MAAM,QAAQ,SAAS,WAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,cAAc,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA,EAAY;AAExG,CAAC;"}
+{"version":3,"file":"NeonField.es.js","sources":["../../../../src/components/user-input/field/NeonField.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input\n * or using the label alongside the input.\n */\nexport default defineComponent({\n  name: 'NeonField',\n  props: {\n    /**\n     * The label text to render.\n     */\n    label: { type: String, required: true },\n    /**\n     * The equivalent of the <em>for</em> attribute on an HTML label.\n     */\n    labelFor: { type: String, default: null },\n    /**\n     * Display an \"optional\" indicator with the label.\n     */\n    optional: { type: Boolean, default: false },\n    /**\n     * Display label with disabled state.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The default \"optional\" label text.\n     */\n    optionalLabel: { type: String, default: 'Optional' },\n    /**\n     * Remove empty message space below input. By default, a blank message will be displayed below each input which\n     * helps simplify form layouts.\n     */\n    noMessage: { type: Boolean, default: false },\n    /**\n     * Message to display below the input field.\n     */\n    message: { type: String, default: '' },\n    /**\n     * The color of message displayed under input. Can be any functional color.\n     */\n    messageColor: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFunctionalColor"],"mappings":";;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAInC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,eAAe,EAAE,MAAM,QAAQ,SAAS,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxC,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,cAAc,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA,EAAY;AAExG,CAAC;"}

package/dist/components/user-input/field/NeonField.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("./NeonField.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t=["for"],a={class:"neon-field__label-wrapper"},r={class:"neon-field__label"},i={key:0,class:"neon-field__optional"},d={class:"neon-field__contents"};function p(o,n,_,m,u,f){return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass([{"neon-field--optional":o.optional,"neon-field--disabled":o.disabled,"neon-field--with-message":o.message!==null},"neon-field"]),for:o.labelFor},[e.createElementVNode("span",a,[e.createElementVNode("span",r,e.toDisplayString(o.label),1),o.optional?(e.openBlock(),e.createElementBlock("span",i,e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",d,[e.renderSlot(o.$slots,"default"),o.message!==null?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-${o.messageColor}`,"neon-field__message"]),onClick:n[0]||(n[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(o.message),3)):e.createCommentVNode("",!0)])],10,t)}const c=s(l,[["render",p]]);module.exports=c;
+"use strict";const l=require("./NeonField.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t={class:"neon-field__label-wrapper"},a=["for"],r={key:0,class:"neon-field__optional"},i={class:"neon-field__contents"};function d(o,n,c,_,m,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-field--optional":o.optional,"neon-field--disabled":o.disabled,"neon-field--with-message":o.message!==null},"neon-field"])},[e.createElementVNode("span",t,[e.createElementVNode("label",{for:o.labelFor,class:"neon-field__label"},e.toDisplayString(o.label),9,a),o.optional?(e.openBlock(),e.createElementBlock("span",r,e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",i,[e.renderSlot(o.$slots,"default"),o.noMessage?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-${o.messageColor}`,"neon-field__message"]),onClick:n[0]||(n[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(o.message),3))])],2)}const p=s(l,[["render",d]]);module.exports=p;
 //# sourceMappingURL=NeonField.vue.cjs.js.map

package/dist/components/user-input/field/NeonField.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.vue.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    :for=\"labelFor\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <span class=\"neon-field__label\">{{ label }}</span>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span\n        v-if=\"message !== null\"\n        :class=\"`neon-color-${messageColor}`\"\n        class=\"neon-field__message\"\n        @click.prevent.stop=\"\"\n      >\n        {{ message }}\n      </span>\n    </div>\n  </label>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_3","_hoisted_5","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_hoisted_4","_renderSlot"],"mappings":"8IAUUA,EAAA,CAAA,MAAM,2BAA2B,EAC/BC,EAAA,CAAA,MAAM,mBAAmB,WACT,MAAM,wBAEzBC,EAAA,CAAA,MAAM,sBAAsB,+CAbnCC,EAAAA,mBAyBQ,QAAA,CAxBL,MAAKC,EAAAA,eAAA,CAAA,wBAAkCC,EAAA,gCAAwCA,EAAA,oCAA4CA,EAAA,UAAO,MAM7H,YAAY,CAAA,EADjB,IAAKA,EAAA,WAGNC,EAAAA,mBAGO,OAHPN,EAGO,CAFLM,EAAAA,mBAAkD,OAAlDL,EAAkDM,EAAAA,gBAAfF,EAAA,KAAK,EAAA,CAAA,EAC5BA,EAAA,wBAAZF,EAAAA,mBAA6E,OAA7EK,EAA6ED,EAAAA,gBAAvBF,EAAA,aAAa,EAAA,CAAA,iCAErEC,EAAAA,mBAWM,MAXNJ,EAWM,CATJO,aAAaJ,EAAA,OAAA,SAAA,EAELA,EAAA,UAAO,oBADfF,EAAAA,mBAOO,OAAA,OALJ,MAAKC,EAAAA,eAAA,CAAA,cAAgBC,EAAA,YAAY,GAC5B,qBAAqB,CAAA,EAC1B,oCAAD,IAAA,CAAA,EAAsB,CAAA,UAAA,MAAA,CAAA,sBAEnBA,EAAA,OAAO,EAAA,CAAA"}
+{"version":3,"file":"NeonField.vue.cjs.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <label :for=\"labelFor\" class=\"neon-field__label\">{{ label }}</label>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span v-if=\"!noMessage\" :class=\"`neon-color-${messageColor}`\" class=\"neon-field__message\" @click.prevent.stop=\"\">\n        {{ message }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_renderSlot"],"mappings":"oIASUA,EAAA,CAAA,MAAM,2BAA2B,qBAEf,MAAM,wBAEzBC,EAAA,CAAA,MAAM,sBAAsB,+CAZnCC,EAAAA,mBAmBM,MAAA,CAlBH,MAAKC,EAAAA,eAAA,CAAA,wBAAkCC,EAAA,gCAAwCA,EAAA,oCAA4CA,EAAA,UAAO,MAK7H,YAAY,CAAA,IAElBC,EAAAA,mBAGO,OAHPL,EAGO,CAFLK,EAAAA,mBAAoE,QAAA,CAA5D,IAAKD,EAAA,SAAU,MAAM,uCAAuBA,EAAA,KAAK,EAAA,EAAAE,CAAA,EAC7CF,EAAA,wBAAZF,EAAAA,mBAA6E,OAA7EK,EAA6EC,EAAAA,gBAAvBJ,EAAA,aAAa,EAAA,CAAA,iCAErEC,EAAAA,mBAMM,MANNJ,EAMM,CAJJQ,aAAaL,EAAA,OAAA,SAAA,EACAA,EAAA,qDAAbF,EAAAA,mBAEO,OAAA,OAFkB,MAAKC,EAAAA,eAAA,CAAA,cAAgBC,EAAA,YAAY,GAAU,qBAAqB,CAAA,EAAE,oCAAD,IAAA,CAAA,EAAsB,CAAA,UAAA,MAAA,CAAA,sBAC3GA,EAAA,OAAO,EAAA,CAAA"}

package/dist/components/user-input/field/NeonField.vue.es.js

@@ -1,36 +1,38 @@
 import r from "./NeonField.es.js";
 import { openBlock as o, createElementBlock as n, normalizeClass as i, createElementVNode as s, toDisplayString as l, createCommentVNode as t, renderSlot as d, withModifiers as p } from "vue";
 import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const m = ["for"], _ = { class: "neon-field__label-wrapper" }, c = { class: "neon-field__label" }, u = {
+const m = { class: "neon-field__label-wrapper" }, _ = ["for"], c = {
   key: 0,
   class: "neon-field__optional"
 }, b = { class: "neon-field__contents" };
-function g(e, a, h, $, k, C) {
-  return o(), n("label", {
+function u(e, a, g, $, h, k) {
+  return o(), n("div", {
     class: i([{
       "neon-field--optional": e.optional,
       "neon-field--disabled": e.disabled,
       "neon-field--with-message": e.message !== null
-    }, "neon-field"]),
-    for: e.labelFor
+    }, "neon-field"])
   }, [
-    s("span", _, [
-      s("span", c, l(e.label), 1),
-      e.optional ? (o(), n("span", u, l(e.optionalLabel), 1)) : t("", !0)
+    s("span", m, [
+      s("label", {
+        for: e.labelFor,
+        class: "neon-field__label"
+      }, l(e.label), 9, _),
+      e.optional ? (o(), n("span", c, l(e.optionalLabel), 1)) : t("", !0)
     ]),
     s("div", b, [
       d(e.$slots, "default"),
-      e.message !== null ? (o(), n("span", {
+      e.noMessage ? t("", !0) : (o(), n("span", {
         key: 0,
         class: i([`neon-color-${e.messageColor}`, "neon-field__message"]),
         onClick: a[0] || (a[0] = p(() => {
         }, ["prevent", "stop"]))
-      }, l(e.message), 3)) : t("", !0)
+      }, l(e.message), 3))
     ])
-  ], 10, m);
+  ], 2);
 }
-const v = /* @__PURE__ */ f(r, [["render", g]]);
+const y = /* @__PURE__ */ f(r, [["render", u]]);
 export {
-  v as default
+  y as default
 };
 //# sourceMappingURL=NeonField.vue.es.js.map

package/dist/components/user-input/field/NeonField.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonField.vue.es.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    :for=\"labelFor\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <span class=\"neon-field__label\">{{ label }}</span>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span\n        v-if=\"message !== null\"\n        :class=\"`neon-color-${messageColor}`\"\n        class=\"neon-field__message\"\n        @click.prevent.stop=\"\"\n      >\n        {{ message }}\n      </span>\n    </div>\n  </label>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_3","_hoisted_5","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_toDisplayString","_hoisted_4","_renderSlot"],"mappings":";;;mBAUUA,IAAA,EAAA,OAAM,4BAA2B,GAC/BC,IAAA,EAAA,OAAM,oBAAmB;;EACT,OAAM;GAEzBC,IAAA,EAAA,OAAM,uBAAsB;;cAbnCC,EAyBQ,SAAA;AAAA,IAxBL,OAAKC,EAAA,CAAA;AAAA,8BAAkCC,EAAA;AAAA,8BAAwCA,EAAA;AAAA,kCAA4CA,EAAA,YAAO;AAAA,OAM7H,YAAY,CAAA;AAAA,IADjB,KAAKA,EAAA;AAAA;IAGNC,EAGO,QAHPN,GAGO;AAAA,MAFLM,EAAkD,QAAlDL,GAAkDM,EAAfF,EAAA,KAAK,GAAA,CAAA;AAAA,MAC5BA,EAAA,iBAAZF,EAA6E,QAA7EK,GAA6ED,EAAvBF,EAAA,aAAa,GAAA,CAAA;;IAErEC,EAWM,OAXNJ,GAWM;AAAA,MATJO,EAAaJ,EAAA,QAAA,SAAA;AAAA,MAELA,EAAA,YAAO,aADfF,EAOO,QAAA;AAAA;QALJ,OAAKC,EAAA,CAAA,cAAgBC,EAAA,YAAY,IAC5B,qBAAqB,CAAA;AAAA,QAC1B,2BAAD,MAAA;AAAA,QAAA,GAAsB,CAAA,WAAA,MAAA,CAAA;AAAA,WAEnBA,EAAA,OAAO,GAAA,CAAA;;;;;"}
+{"version":3,"file":"NeonField.vue.es.js","sources":["../../../../src/components/user-input/field/NeonField.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-field--optional': optional,\n      'neon-field--disabled': disabled,\n      'neon-field--with-message': message !== null,\n    }\"\n    class=\"neon-field\"\n  >\n    <span class=\"neon-field__label-wrapper\">\n      <label :for=\"labelFor\" class=\"neon-field__label\">{{ label }}</label>\n      <span v-if=\"optional\" class=\"neon-field__optional\">{{ optionalLabel }}</span>\n    </span>\n    <div class=\"neon-field__contents\">\n      <!-- @slot optionally wrap the field with the label -->\n      <slot></slot>\n      <span v-if=\"!noMessage\" :class=\"`neon-color-${messageColor}`\" class=\"neon-field__message\" @click.prevent.stop=\"\">\n        {{ message }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonField.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_4","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_renderSlot"],"mappings":";;;AASU,MAAAA,IAAA,EAAA,OAAM,4BAA2B;;EAEf,OAAM;GAEzBC,IAAA,EAAA,OAAM,uBAAsB;;cAZnCC,EAmBM,OAAA;AAAA,IAlBH,OAAKC,EAAA,CAAA;AAAA,8BAAkCC,EAAA;AAAA,8BAAwCA,EAAA;AAAA,kCAA4CA,EAAA,YAAO;AAAA,OAK7H,YAAY,CAAA;AAAA;IAElBC,EAGO,QAHPL,GAGO;AAAA,MAFLK,EAAoE,SAAA;AAAA,QAA5D,KAAKD,EAAA;AAAA,QAAU,OAAM;AAAA,WAAuBA,EAAA,KAAK,GAAA,GAAAE,CAAA;AAAA,MAC7CF,EAAA,iBAAZF,EAA6E,QAA7EK,GAA6EC,EAAvBJ,EAAA,aAAa,GAAA,CAAA;;IAErEC,EAMM,OANNJ,GAMM;AAAA,MAJJQ,EAAaL,EAAA,QAAA,SAAA;AAAA,MACAA,EAAA,8BAAbF,EAEO,QAAA;AAAA;QAFkB,OAAKC,EAAA,CAAA,cAAgBC,EAAA,YAAY,IAAU,qBAAqB,CAAA;AAAA,QAAE,2BAAD,MAAA;AAAA,QAAA,GAAsB,CAAA,WAAA,MAAA,CAAA;AAAA,WAC3GA,EAAA,OAAO,GAAA,CAAA;AAAA;;;;"}

package/dist/components/user-input/file/NeonFile.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("vue"),p=require("../../../common/enums/NeonSize.cjs.js"),m=require("../../../common/enums/NeonFunctionalColor.cjs.js"),y=require("../../../common/enums/NeonState.cjs.js"),g=require("../button/NeonButton.vue.cjs.js"),S=require("../input/NeonInput.vue.cjs.js"),N=require("../list/NeonList.vue.cjs.js"),v=a.defineComponent({name:"NeonFile",components:{NeonButton:g,NeonInput:S,NeonList:N},props:{disabled:{type:Boolean,default:!1},directUpload:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},id:{type:String,default:null},size:{type:String,default:p.NeonSize.Medium},state:{type:String,default:y.NeonState.Ready},color:{type:String,default:m.NeonFunctionalColor.Primary},circular:{type:Boolean,default:null},label:{type:String,default:null},icon:{type:String,default:null},title:{type:String,default:"Upload"}},emits:["update:modelValue"],setup(n,{emit:r}){const i=a.ref(null),t=a.ref([]),s=a.ref(""),c=a.computed(()=>t.value.map(e=>({key:e.name,label:e.name}))),o=()=>{r("update:modelValue",n.multiple?t.value:t.value[0]),n.directUpload&&(t.value=[])};return{fileInput:i,files:t,fileList:c,fileInputModel:s,remove:e=>{n.disabled||(t.value=t.value.filter(l=>l.name!==e),o())},clearAll:()=>{n.disabled||(t.value=[],o())},openFileDialog:()=>{var e,l;(l=(e=i.value)==null?void 0:e.neonInput)==null||l.click()},onInput:e=>{if(e!=null&&e.target){const l=e.target.files,u=l?Array.from(l).filter(d=>!t.value.find(f=>f.name===d.name)):[];t.value=n.multiple?[...t.value,...u]:u,o()}}}}});module.exports=v;
+"use strict";const o=require("vue"),p=require("../../../common/enums/NeonSize.cjs.js"),m=require("../../../common/enums/NeonFunctionalColor.cjs.js"),y=require("../../../common/enums/NeonState.cjs.js"),S=require("../button/NeonButton.vue.cjs.js"),g=require("../input/NeonInput.vue.cjs.js"),N=require("../list/NeonList.vue.cjs.js"),v=require("../../../common/enums/NeonButtonStyle.cjs.js"),q=o.defineComponent({name:"NeonFile",components:{NeonButton:S,NeonInput:g,NeonList:N},props:{disabled:{type:Boolean,default:!1},directUpload:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},id:{type:String,default:null},size:{type:String,default:p.NeonSize.Medium},state:{type:String,default:y.NeonState.Ready},color:{type:String,default:m.NeonFunctionalColor.Primary},buttonStyle:{type:String,default:v.NeonButtonStyle.Solid},circular:{type:Boolean,default:null},label:{type:String,default:null},icon:{type:String,default:null},title:{type:String,default:"Upload"}},emits:["update:modelValue"],setup(n,{emit:r}){const u=o.ref(null),t=o.ref([]),s=o.ref(""),c=o.computed(()=>t.value.map(e=>({key:e.name,label:e.name}))),a=()=>{r("update:modelValue",n.multiple?t.value:t.value[0]),n.directUpload&&(t.value=[])};return{fileInput:u,files:t,fileList:c,fileInputModel:s,remove:e=>{n.disabled||(t.value=t.value.filter(l=>l.name!==e),a())},clearAll:()=>{n.disabled||(t.value=[],a())},openFileDialog:()=>{var e,l;(l=(e=u.value)==null?void 0:e.neonInput)==null||l.click()},onInput:e=>{if(e!=null&&e.target){const l=e.target.files,i=l?Array.from(l).filter(d=>!t.value.find(f=>f.name===d.name)):[];t.value=n.multiple?[...t.value,...i]:i,a()}}}}});module.exports=q;
 //# sourceMappingURL=NeonFile.cjs.js.map

package/dist/components/user-input/file/NeonFile.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":"0UAYAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,WAAAC,EACA,UAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,aAAc,CAAE,KAAM,QAAS,QAAS,EAAA,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAKpC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAKjC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAA,EAI7D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,SAAU,CAAE,KAAM,QAAS,QAAS,IAAA,EAIpC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,MAAO,CAAE,KAAM,OAAQ,QAAS,QAAA,CAAS,EAE3C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAYC,EAAAA,IAA2C,IAAI,EAC3DC,EAAQD,EAAAA,IAAiB,EAAE,EAC3BE,EAAiBF,EAAAA,IAAI,EAAE,EAEvBG,EAAWC,EAAAA,SAAS,IACjBH,EAAM,MAAM,IAAKI,IAAU,CAAE,IAAKA,EAAK,KAAM,MAAOA,EAAK,IAAA,EAAO,CACxE,EAEKC,EAAY,IAAM,CACtBR,EAAK,oBAAqBD,EAAM,SAAWI,EAAM,MAAQA,EAAM,MAAM,CAAC,CAAC,EACnEJ,EAAM,eACRI,EAAM,MAAQ,CAAA,EAElB,EA+BA,MAAO,CACL,UAAAF,EACA,MAAAE,EACA,SAAAE,EACA,eAAAD,EACA,OAlCcK,GAAqB,CAC9BV,EAAM,WACTI,EAAM,MAAQA,EAAM,MAAM,OAAQO,GAAMA,EAAE,OAASD,CAAQ,EAC3DD,EAAA,EAEJ,EA8BE,SA5Be,IAAM,CAChBT,EAAM,WACTI,EAAM,MAAQ,CAAA,EACdK,EAAA,EAEJ,EAwBE,eAtBqB,IAAM,UAC3BG,GAAAC,EAAAX,EAAU,QAAV,YAAAW,EAAiB,YAAjB,MAAAD,EAA4B,OAC9B,EAqBE,QAnBeE,GAAiB,CAChC,GAAIA,GAAA,MAAAA,EAAO,OAAQ,CACjB,MAAMC,EAAYD,EAAM,OAA4B,MAC9CE,EAAWD,EACb,MAAM,KAAKA,CAAQ,EAAE,OAAQP,GAAS,CAACJ,EAAM,MAAM,KAAM,GAAM,EAAE,OAASI,EAAK,IAAI,CAAC,EACpF,CAAA,EACJJ,EAAM,MAAQJ,EAAM,SAAW,CAAC,GAAGI,EAAM,MAAO,GAAGY,CAAQ,EAAIA,EAC/DP,EAAA,CACF,CACF,CAUE,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonFile.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The style of button to use for the upload\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","NeonButtonStyle","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":"oYAaAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,WAAAC,EACA,UAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,aAAc,CAAE,KAAM,QAAS,QAAS,EAAA,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAKpC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAKjC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAA,EAI7D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,YAAa,CAAE,KAAM,OAAiC,QAASC,EAAAA,gBAAgB,KAAA,EAI/E,SAAU,CAAE,KAAM,QAAS,QAAS,IAAA,EAIpC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,MAAO,CAAE,KAAM,OAAQ,QAAS,QAAA,CAAS,EAE3C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAYC,EAAAA,IAA2C,IAAI,EAC3DC,EAAQD,EAAAA,IAAiB,EAAE,EAC3BE,EAAiBF,EAAAA,IAAI,EAAE,EAEvBG,EAAWC,EAAAA,SAAS,IACjBH,EAAM,MAAM,IAAKI,IAAU,CAAE,IAAKA,EAAK,KAAM,MAAOA,EAAK,IAAA,EAAO,CACxE,EAEKC,EAAY,IAAM,CACtBR,EAAK,oBAAqBD,EAAM,SAAWI,EAAM,MAAQA,EAAM,MAAM,CAAC,CAAC,EACnEJ,EAAM,eACRI,EAAM,MAAQ,CAAA,EAElB,EA+BA,MAAO,CACL,UAAAF,EACA,MAAAE,EACA,SAAAE,EACA,eAAAD,EACA,OAlCcK,GAAqB,CAC9BV,EAAM,WACTI,EAAM,MAAQA,EAAM,MAAM,OAAQO,GAAMA,EAAE,OAASD,CAAQ,EAC3DD,EAAA,EAEJ,EA8BE,SA5Be,IAAM,CAChBT,EAAM,WACTI,EAAM,MAAQ,CAAA,EACdK,EAAA,EAEJ,EAwBE,eAtBqB,IAAM,UAC3BG,GAAAC,EAAAX,EAAU,QAAV,YAAAW,EAAiB,YAAjB,MAAAD,EAA4B,OAC9B,EAqBE,QAnBeE,GAAiB,CAChC,GAAIA,GAAA,MAAAA,EAAO,OAAQ,CACjB,MAAMC,EAAYD,EAAM,OAA4B,MAC9CE,EAAWD,EACb,MAAM,KAAKA,CAAQ,EAAE,OAAQP,GAAS,CAACJ,EAAM,MAAM,KAAM,GAAM,EAAE,OAASI,EAAK,IAAI,CAAC,EACpF,CAAA,EACJJ,EAAM,MAAQJ,EAAM,SAAW,CAAC,GAAGI,EAAM,MAAO,GAAGY,CAAQ,EAAIA,EAC/DP,EAAA,CACF,CACF,CAUE,CAEJ,CACF,CAAC"}

package/dist/components/user-input/file/NeonFile.es.js

@@ -1,16 +1,17 @@
-import { defineComponent as s, ref as n, computed as c } from "vue";
+import { defineComponent as s, ref as a, computed as c } from "vue";
 import { NeonSize as y } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as g } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonState as S } from "../../../common/enums/NeonState.es.js";
+import { NeonFunctionalColor as S } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { NeonState as g } from "../../../common/enums/NeonState.es.js";
 import v from "../button/NeonButton.vue.es.js";
-import F from "../input/NeonInput.vue.es.js";
-import N from "../list/NeonList.vue.es.js";
-const V = s({
+import N from "../input/NeonInput.vue.es.js";
+import F from "../list/NeonList.vue.es.js";
+import { NeonButtonStyle as b } from "../../../common/enums/NeonButtonStyle.es.js";
+const h = s({
   name: "NeonFile",
   components: {
     NeonButton: v,
-    NeonInput: F,
-    NeonList: N
+    NeonInput: N,
+    NeonList: F
   },
   props: {
     /**
@@ -42,11 +43,15 @@ const V = s({
     /**
      * The state of the input, used to indicate loading, success and error states
      */
-    state: { type: String, default: S.Ready },
+    state: { type: String, default: g.Ready },
     /**
      * The file component color
      */
-    color: { type: String, default: g.Primary },
+    color: { type: String, default: S.Primary },
+    /**
+     * The style of button to use for the upload
+     */
+    buttonStyle: { type: String, default: b.Solid },
     /**
      * Make the button circular. NOTE: This is only for icon only buttons.
      */
@@ -72,34 +77,34 @@ const V = s({
     "update:modelValue"
   ],
   setup(o, { emit: r }) {
-    const i = n(null), l = n([]), f = n(""), m = c(() => l.value.map((e) => ({ key: e.name, label: e.name }))), a = () => {
-      r("update:modelValue", o.multiple ? l.value : l.value[0]), o.directUpload && (l.value = []);
+    const i = a(null), t = a([]), f = a(""), m = c(() => t.value.map((e) => ({ key: e.name, label: e.name }))), n = () => {
+      r("update:modelValue", o.multiple ? t.value : t.value[0]), o.directUpload && (t.value = []);
     };
     return {
       fileInput: i,
-      files: l,
+      files: t,
       fileList: m,
       fileInputModel: f,
       remove: (e) => {
-        o.disabled || (l.value = l.value.filter((t) => t.name !== e), a());
+        o.disabled || (t.value = t.value.filter((l) => l.name !== e), n());
       },
       clearAll: () => {
-        o.disabled || (l.value = [], a());
+        o.disabled || (t.value = [], n());
       },
       openFileDialog: () => {
-        var e, t;
-        (t = (e = i.value) == null ? void 0 : e.neonInput) == null || t.click();
+        var e, l;
+        (l = (e = i.value) == null ? void 0 : e.neonInput) == null || l.click();
       },
       onInput: (e) => {
         if (e != null && e.target) {
-          const t = e.target.files, u = t ? Array.from(t).filter((p) => !l.value.find((d) => d.name === p.name)) : [];
-          l.value = o.multiple ? [...l.value, ...u] : u, a();
+          const l = e.target.files, u = l ? Array.from(l).filter((p) => !t.value.find((d) => d.name === p.name)) : [];
+          t.value = o.multiple ? [...t.value, ...u] : u, n();
         }
       }
     };
   }
 });
 export {
-  V as default
+  h as default
 };
 //# sourceMappingURL=NeonFile.es.js.map

package/dist/components/user-input/file/NeonFile.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.es.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":";;;;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,cAAc,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAA2B,SAASC,EAAU,MAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,UAAU,EAAE,MAAM,SAAS,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,OAAO,EAAE,MAAM,QAAQ,SAAS,SAAA;AAAA,EAAS;AAAA,EAE3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAYC,EAA2C,IAAI,GAC3DC,IAAQD,EAAiB,EAAE,GAC3BE,IAAiBF,EAAI,EAAE,GAEvBG,IAAWC,EAAS,MACjBH,EAAM,MAAM,IAAI,CAACI,OAAU,EAAE,KAAKA,EAAK,MAAM,OAAOA,EAAK,KAAA,EAAO,CACxE,GAEKC,IAAY,MAAM;AACtB,MAAAR,EAAK,qBAAqBD,EAAM,WAAWI,EAAM,QAAQA,EAAM,MAAM,CAAC,CAAC,GACnEJ,EAAM,iBACRI,EAAM,QAAQ,CAAA;AAAA,IAElB;AA+BA,WAAO;AAAA,MACL,WAAAF;AAAA,MACA,OAAAE;AAAA,MACA,UAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,QAlCa,CAACK,MAAqB;AACnC,QAAKV,EAAM,aACTI,EAAM,QAAQA,EAAM,MAAM,OAAO,CAACO,MAAMA,EAAE,SAASD,CAAQ,GAC3DD,EAAA;AAAA,MAEJ;AAAA,MA8BE,UA5Be,MAAM;AACrB,QAAKT,EAAM,aACTI,EAAM,QAAQ,CAAA,GACdK,EAAA;AAAA,MAEJ;AAAA,MAwBE,gBAtBqB,MAAM;;AAC3B,SAAAG,KAAAC,IAAAX,EAAU,UAAV,gBAAAW,EAAiB,cAAjB,QAAAD,EAA4B;AAAA,MAC9B;AAAA,MAqBE,SAnBc,CAACE,MAAiB;AAChC,YAAIA,KAAA,QAAAA,EAAO,QAAQ;AACjB,gBAAMC,IAAYD,EAAM,OAA4B,OAC9CE,IAAWD,IACb,MAAM,KAAKA,CAAQ,EAAE,OAAO,CAACP,MAAS,CAACJ,EAAM,MAAM,KAAK,CAACO,MAAMA,EAAE,SAASH,EAAK,IAAI,CAAC,IACpF,CAAA;AACJ,UAAAJ,EAAM,QAAQJ,EAAM,WAAW,CAAC,GAAGI,EAAM,OAAO,GAAGY,CAAQ,IAAIA,GAC/DP,EAAA;AAAA,QACF;AAAA,MACF;AAAA,IAUE;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonFile.es.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The style of button to use for the upload\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","NeonButtonStyle","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":";;;;;;;;AAaA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,cAAc,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAA2B,SAASC,EAAU,MAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,aAAa,EAAE,MAAM,QAAiC,SAASC,EAAgB,MAAA;AAAA;AAAA;AAAA;AAAA,IAI/E,UAAU,EAAE,MAAM,SAAS,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,OAAO,EAAE,MAAM,QAAQ,SAAS,SAAA;AAAA,EAAS;AAAA,EAE3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAYC,EAA2C,IAAI,GAC3DC,IAAQD,EAAiB,EAAE,GAC3BE,IAAiBF,EAAI,EAAE,GAEvBG,IAAWC,EAAS,MACjBH,EAAM,MAAM,IAAI,CAACI,OAAU,EAAE,KAAKA,EAAK,MAAM,OAAOA,EAAK,KAAA,EAAO,CACxE,GAEKC,IAAY,MAAM;AACtB,MAAAR,EAAK,qBAAqBD,EAAM,WAAWI,EAAM,QAAQA,EAAM,MAAM,CAAC,CAAC,GACnEJ,EAAM,iBACRI,EAAM,QAAQ,CAAA;AAAA,IAElB;AA+BA,WAAO;AAAA,MACL,WAAAF;AAAA,MACA,OAAAE;AAAA,MACA,UAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,QAlCa,CAACK,MAAqB;AACnC,QAAKV,EAAM,aACTI,EAAM,QAAQA,EAAM,MAAM,OAAO,CAACO,MAAMA,EAAE,SAASD,CAAQ,GAC3DD,EAAA;AAAA,MAEJ;AAAA,MA8BE,UA5Be,MAAM;AACrB,QAAKT,EAAM,aACTI,EAAM,QAAQ,CAAA,GACdK,EAAA;AAAA,MAEJ;AAAA,MAwBE,gBAtBqB,MAAM;;AAC3B,SAAAG,KAAAC,IAAAX,EAAU,UAAV,gBAAAW,EAAiB,cAAjB,QAAAD,EAA4B;AAAA,MAC9B;AAAA,MAqBE,SAnBc,CAACE,MAAiB;AAChC,YAAIA,KAAA,QAAAA,EAAO,QAAQ;AACjB,gBAAMC,IAAYD,EAAM,OAA4B,OAC9CE,IAAWD,IACb,MAAM,KAAKA,CAAQ,EAAE,OAAO,CAACP,MAAS,CAACJ,EAAM,MAAM,KAAK,CAACO,MAAMA,EAAE,SAASH,EAAK,IAAI,CAAC,IACpF,CAAA;AACJ,UAAAJ,EAAM,QAAQJ,EAAM,WAAW,CAAC,GAAGI,EAAM,OAAO,GAAGY,CAAQ,IAAIA,GAC/DP,EAAA;AAAA,QACF;AAAA,MACF;AAAA,IAUE;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/user-input/file/NeonFile.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonFile.cjs.js"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],u={class:"neon-button-group neon-file__actions"};function p(e,o,b,m,f,C){const s=l.resolveComponent("neon-list"),d=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(d,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",u,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",color:"low-contrast",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,circular:e.circular,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,title:e.title,onClick:e.openFileDialog},null,8,["aria-controls","circular","color","disabled","icon","label","size","state","title","onClick"])])],10,r)}const c=t(a,[["render",p]]);module.exports=c;
+"use strict";const d=require("./NeonFile.cjs.js"),l=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],u={class:"neon-button-group neon-file__actions"};function p(e,o,c,m,f,C){const s=l.resolveComponent("neon-list"),t=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(t,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",u,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",color:"low-contrast",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,"button-style":e.buttonStyle,circular:e.circular,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,title:e.title,onClick:e.openFileDialog},null,8,["aria-controls","button-style","circular","color","disabled","icon","label","size","state","title","onClick"])])],10,r)}const b=a(d,[["render",p]]);module.exports=b;
 //# sourceMappingURL=NeonFile.vue.cjs.js.map

package/dist/components/user-input/file/NeonFile.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :circular=\"circular\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        :title=\"title\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAoDM,MAAA,CAnDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAsBM,MAtBNT,EAsBM,CApBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAQEM,EAAA,OANC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,eACN,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YAWEI,EAAA,CAVC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,MAAOA,EAAA,MACP,QAAOA,EAAA"}
+{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :button-style=\"buttonStyle\"\n        :circular=\"circular\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        :title=\"title\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAqDM,MAAA,CApDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAuBM,MAvBNT,EAuBM,CArBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAQEM,EAAA,OANC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,eACN,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YAYEI,EAAA,CAXC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,eAAcA,EAAA,YACd,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,MAAOA,EAAA,MACP,QAAOA,EAAA"}