@bagelink/vue 0.0.196 → 0.0.200

package/dist/components/Btn.vue.d.ts

@@ -15,7 +15,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     to?: string | undefined;
     round?: boolean | undefined;
     is?: string | undefined;
-    borderColor?: string | undefined;
 }>, {
     loading: boolean;
     round: boolean;
@@ -39,7 +38,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     to?: string | undefined;
     round?: boolean | undefined;
     is?: string | undefined;
-    borderColor?: string | undefined;
 }>, {
     loading: boolean;
     round: boolean;

package/dist/components/Btn.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Btn.vue.d.ts","sourceRoot":"","sources":["../../src/components/Btn.vue"],"names":[],"mappings":"AAuCA;AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoT9D,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Btn.vue.d.ts","sourceRoot":"","sources":["../../src/components/Btn.vue"],"names":[],"mappings":"AAuCA;AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4T9D,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/formkit/MiscFields.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiscFields.vue.d.ts","sourceRoot":"","sources":["../../../src/components/formkit/MiscFields.vue"],"names":[],"mappings":"AAiBA;;aAgHW,OAAO,MAAM,EAAE,GAAG,CAAC;iBACf,MAAM;;aADV,OAAO,MAAM,EAAE,GAAG,CAAC;iBACf,MAAM;;AAPrB,wBASG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"MiscFields.vue.d.ts","sourceRoot":"","sources":["../../../src/components/formkit/MiscFields.vue"],"names":[],"mappings":"AAiBA;;aAgHU,OAAO,MAAM,EAAE,GAAG,CAAC;iBACf,MAAM;;aADV,OAAO,MAAM,EAAE,GAAG,CAAC;iBACf,MAAM;;AAPpB,wBASG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/index.cjs

@@ -14681,30 +14681,39 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     value: {},
     to: {},
     round: { type: Boolean, default: false },
-    is: { default: "button" },
-    borderColor: {}
+    is: { default: "button" }
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "7d77cfe0": computedBackgroundColor.value,
-      "44b26a2a": cumputedTextColor.value
+      "e0356e0a": computedBackgroundColor.value,
+      "458dc816": cumputedTextColor.value
     }));
     const slots = vue.useSlots();
     const props2 = __props;
-    const computedTheme = vue.computed(() => (props2 == null ? void 0 : props2.color) || (props2 == null ? void 0 : props2.theme));
+    const computedTheme = vue.computed(
+      () => (props2 == null ? void 0 : props2.color) || (props2 == null ? void 0 : props2.theme)
+    );
     const computedDefaultColors = vue.computed(
       () => ({
         backgroundColor: "var(--bgl-primary)",
         color: props2.flat ? "var(--bgl-black)" : "var(--bgl-white)"
       })
     );
+    function getThemeColors(theme) {
+      return {
+        ...computedDefaultColors.value,
+        ...theme,
+        color: props2.flat ? theme.backgroundColor : theme.color
+      };
+    }
     const themes = {
-      red: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-red)" },
-      black: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-black)" },
-      green: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
-      gray: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
-      light: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
-      "gray-light": { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
+      red: getThemeColors({ backgroundColor: "var(--bgl-red)" }),
+      black: getThemeColors({ backgroundColor: "var(--bgl-black)" }),
+      green: getThemeColors({ backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" }),
+      blue: getThemeColors({ backgroundColor: "var(--bgl-blue)", color: "var(--bgl-white)" }),
+      gray: getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" }),
+      light: getThemeColors({ backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" }),
+      "gray-light": getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" })
     };
     const cumputedTextColor = vue.computed(
       () => {
@@ -14729,7 +14738,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
           btn: !_ctx.icon || vue.unref(slots)["default"] || _ctx.value,
           thin: _ctx.thin,
           round: _ctx.round,
-          "btn-txt": _ctx.flat,
+          "flatBtn": _ctx.flat,
           "btn-border": _ctx.border
         })
       }, {
@@ -14761,7 +14770,7 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-86c248d5"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-718ff632"]]);
 const _hoisted_1$X = { class: "tool-bar" };
 const _hoisted_2$P = { class: "modal-title" };
 const _hoisted_3$I = { class: "modal-footer mt-3" };
@@ -17286,7 +17295,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ContactArrayFormKit = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-61e13dd7"]]);
+const ContactArrayFormKit = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-f93bb259"]]);
 const _hoisted_1$H = { class: "bagel-input" };
 const _hoisted_2$C = { class: "mt-1" };
 const _hoisted_3$y = {
@@ -17470,7 +17479,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AddressArray = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-01e485e2"]]);
+const AddressArray = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-77d03b04"]]);
 const _hoisted_1$G = { class: "bagel-input" };
 const _hoisted_2$B = { class: "mt-1" };
 const _hoisted_3$x = {
@@ -17687,7 +17696,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BankDetailsArray = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-c63408c1"]]);
+const BankDetailsArray = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-a0d366d4"]]);
 const _hoisted_1$F = { class: "misc-wrap" };
 const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "MiscFields",
@@ -17734,7 +17743,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const MiscFieldsBtns = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-91b04350"]]);
+const MiscFieldsBtns = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-a096417d"]]);
 const _withScopeId$1 = (n) => (vue.pushScopeId("data-v-d0543d4b"), n = n(), vue.popScopeId(), n);
 const _hoisted_1$E = ["title"];
 const _hoisted_2$A = { class: "switch" };
@@ -21995,7 +22004,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-b01223bc"]]);
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1d1376d2"]]);
 const _hoisted_1$k = ["title"];
 const _hoisted_2$h = { key: 0 };
 const _hoisted_3$f = ["value", "title", "placeholder"];

package/dist/index.mjs

@@ -14679,30 +14679,39 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     value: {},
     to: {},
     round: { type: Boolean, default: false },
-    is: { default: "button" },
-    borderColor: {}
+    is: { default: "button" }
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "7d77cfe0": computedBackgroundColor.value,
-      "44b26a2a": cumputedTextColor.value
+      "e0356e0a": computedBackgroundColor.value,
+      "458dc816": cumputedTextColor.value
     }));
     const slots = useSlots();
     const props2 = __props;
-    const computedTheme = computed(() => (props2 == null ? void 0 : props2.color) || (props2 == null ? void 0 : props2.theme));
+    const computedTheme = computed(
+      () => (props2 == null ? void 0 : props2.color) || (props2 == null ? void 0 : props2.theme)
+    );
     const computedDefaultColors = computed(
       () => ({
         backgroundColor: "var(--bgl-primary)",
         color: props2.flat ? "var(--bgl-black)" : "var(--bgl-white)"
       })
     );
+    function getThemeColors(theme) {
+      return {
+        ...computedDefaultColors.value,
+        ...theme,
+        color: props2.flat ? theme.backgroundColor : theme.color
+      };
+    }
     const themes = {
-      red: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-red)" },
-      black: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-black)" },
-      green: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
-      gray: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
-      light: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
-      "gray-light": { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
+      red: getThemeColors({ backgroundColor: "var(--bgl-red)" }),
+      black: getThemeColors({ backgroundColor: "var(--bgl-black)" }),
+      green: getThemeColors({ backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" }),
+      blue: getThemeColors({ backgroundColor: "var(--bgl-blue)", color: "var(--bgl-white)" }),
+      gray: getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" }),
+      light: getThemeColors({ backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" }),
+      "gray-light": getThemeColors({ backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" })
     };
     const cumputedTextColor = computed(
       () => {
@@ -14727,7 +14736,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
           btn: !_ctx.icon || unref(slots)["default"] || _ctx.value,
           thin: _ctx.thin,
           round: _ctx.round,
-          "btn-txt": _ctx.flat,
+          "flatBtn": _ctx.flat,
           "btn-border": _ctx.border
         })
       }, {
@@ -14759,7 +14768,7 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-86c248d5"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-718ff632"]]);
 const _hoisted_1$X = { class: "tool-bar" };
 const _hoisted_2$P = { class: "modal-title" };
 const _hoisted_3$I = { class: "modal-footer mt-3" };
@@ -17284,7 +17293,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ContactArrayFormKit = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-61e13dd7"]]);
+const ContactArrayFormKit = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-f93bb259"]]);
 const _hoisted_1$H = { class: "bagel-input" };
 const _hoisted_2$C = { class: "mt-1" };
 const _hoisted_3$y = {
@@ -17468,7 +17477,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AddressArray = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-01e485e2"]]);
+const AddressArray = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-77d03b04"]]);
 const _hoisted_1$G = { class: "bagel-input" };
 const _hoisted_2$B = { class: "mt-1" };
 const _hoisted_3$x = {
@@ -17685,7 +17694,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BankDetailsArray = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-c63408c1"]]);
+const BankDetailsArray = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-a0d366d4"]]);
 const _hoisted_1$F = { class: "misc-wrap" };
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "MiscFields",
@@ -17732,7 +17741,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MiscFieldsBtns = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-91b04350"]]);
+const MiscFieldsBtns = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-a096417d"]]);
 const _withScopeId$1 = (n) => (pushScopeId("data-v-d0543d4b"), n = n(), popScopeId(), n);
 const _hoisted_1$E = ["title"];
 const _hoisted_2$A = { class: "switch" };
@@ -21993,7 +22002,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-b01223bc"]]);
+const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1d1376d2"]]);
 const _hoisted_1$k = ["title"];
 const _hoisted_2$h = { key: 0 };
 const _hoisted_3$f = ["value", "title", "placeholder"];

package/dist/style.css

@@ -306,16 +306,16 @@
 }
 }
 
-.loading[data-v-86c248d5] {
+.loading[data-v-718ff632] {
 	border: 1px solid var(--bgl-white);
 	border-bottom: 2px solid var(--bgl-white);
-	animation: spin-86c248d5 1s linear infinite;
+	animation: spin-718ff632 1s linear infinite;
 	border-radius: 100px;
 	width: 1rem;
 	height: 1rem;
 	margin: auto;
 }
-@keyframes spin-86c248d5 {
+@keyframes spin-718ff632 {
 0% {
 		transform: rotate(0deg);
 }
@@ -323,7 +323,7 @@
 		transform: rotate(360deg);
 }
 }
-.btn-icon[data-v-86c248d5] {
+.btn-icon[data-v-718ff632] {
 	height: var(--btn-height);
 	width: var(--btn-height);
 	border-radius: 100%;
@@ -333,101 +333,97 @@
 	flex-shrink: 0;
 	transition: var(--bgl-transition);
 }
-.btn[data-v-86c248d5] {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
+.btn[data-v-718ff632] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
 	text-decoration: none;
 }
-.btn[disabled="true"][data-v-86c248d5] {
+.btn[disabled="true"][data-v-718ff632] {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
-.btn-flex[data-v-86c248d5] {
+.btn-flex[data-v-718ff632] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	justify-content: center;
 }
-.btn .icon-font[data-v-86c248d5] {
+.btn .icon-font[data-v-718ff632] {
 	font-size: calc(var(--input-font-size) * 1.3);
 }
-.btn[data-v-86c248d5]:hover,
-.btn-icon[data-v-86c248d5]:hover {
+.btn[data-v-718ff632],
+.btn-icon[data-v-718ff632] {
+	background-color: var(--e0356e0a);
+	color: var(--458dc816);
+}
+.btn[data-v-718ff632]:hover,
+.btn-icon[data-v-718ff632]:hover {
 	filter: var(--bgl-hover-filter);
 }
-.btn[data-v-86c248d5]:active,
-.btn-icon[data-v-86c248d5]:active {
+.btn[data-v-718ff632]:active,
+.btn-icon[data-v-718ff632]:active {
 	filter: var(--bgl-active-filter);
 }
-.btn[data-v-86c248d5],
-.btn-icon[data-v-86c248d5] {
-	background-color: var(--7d77cfe0);
-	color: var(--44b26a2a);
-}
-.btn.btn-txt[data-v-86c248d5] {
-	color: var(--bgl-primary);
+.btn.flatBtn[data-v-718ff632] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
-.btn-icon.btn-txt[data-v-86c248d5] {
-	color: var(--bgl-primary);
+.btn-icon.flatBtn[data-v-718ff632] {
 	background: transparent;
 }
-.btn.btn-txt[data-v-86c248d5]:hover,
-.btn-icon.btn-txt[data-v-86c248d5]:hover {
+.btn.flatBtn[data-v-718ff632]:hover,
+.btn-icon.flatBtn[data-v-718ff632]:hover {
 	filter: var(--bgl-active-filter);
 }
-.btn.btn-txt[data-v-86c248d5]:active,
-.btn-icon.btn-txt[data-v-86c248d5]:active {
+.btn.flatBtn[data-v-718ff632]:active,
+.btn-icon.flatBtn[data-v-718ff632]:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
-.btn.btn-txt.red[data-v-86c248d5],
-.btn-icon.btn-txt.red[data-v-86c248d5] {
+.btn.flatBtn.red[data-v-718ff632],
+.btn-icon.flatBtn.red[data-v-718ff632] {
 	color: var(--bgl-red);
 }
-.btn.btn-txt.light[data-v-86c248d5],
-.btn-icon.btn-txt.light[data-v-86c248d5] {
+.btn.flatBtn.light[data-v-718ff632],
+.btn-icon.flatBtn.light[data-v-718ff632] {
 	color: var(--bgl-primary-tint);
 }
-.btn.btn-txt.black[data-v-86c248d5],
-.btn-icon.btn-txt.black[data-v-86c248d5] {
+.btn.flatBtn.black[data-v-718ff632],
+.btn-icon.flatBtn.black[data-v-718ff632] {
 	color: var(--bgl-black);
 }
-.btn.btn-txt.gray[data-v-86c248d5],
-.btn-icon.btn-txt.gray[data-v-86c248d5] {
+.btn.flatBtn.gray[data-v-718ff632],
+.btn-icon.flatBtn.gray[data-v-718ff632] {
 	color: var(--bgl-gray);
 }
-.btn.thin[data-v-86c248d5] {
+.btn.thin[data-v-718ff632] {
 	padding-left: calc(var(--btn-padding) / 2);
 	padding-right: calc(var(--btn-padding) / 2);
 }
-.btn.round[data-v-86c248d5] {
+.btn.round[data-v-718ff632] {
 	border-radius: calc(var(--btn-border-radius) * 2);
 }
-.btn-icon.thin[data-v-86c248d5] {
+.btn-icon.thin[data-v-718ff632] {
 	height: calc(var(--btn-height) / 1.5);
 	width: calc(var(--btn-height) / 1.5);
 	line-height: 1;
 }
-[dir="rtl"] .icon-font[data-v-86c248d5] {
+[dir="rtl"] .icon-font[data-v-718ff632] {
 	transform: rotateY(180deg);
 }
-.btn-border[data-v-86c248d5] {
-	outline: 1px solid var(--7d77cfe0);
-	color: var(--7d77cfe0);
-	background: var(--bgl-white);
+.btn-border[data-v-718ff632] {
+	outline: 1px solid var(--e0356e0a);
+	color: var(--e0356e0a);
+	background: transparent;
 }
-.btn-border[data-v-86c248d5]:hover {
-	color: var(--44b26a2a);
-	background: var(--7d77cfe0);
+.btn-border[data-v-718ff632]:hover {
+	color: var(--bgl-white);
+	background: var(--e0356e0a);
 	filter: brightness(100%);
 }
-.btn-border[data-v-86c248d5]:active {
+.btn-border[data-v-718ff632]:active {
 	filter: brightness(80%);
 }
 .bg-dark {
@@ -1140,34 +1136,34 @@ th[data-v-f3a410c2] {
   border: none;
 }
 
-.bglform-contact[data-v-61e13dd7] {
+.bglform-contact[data-v-f93bb259] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	max-width: 700px;
 	position: relative;
 }
-.bglform-contact-label[data-v-61e13dd7] {
+.bglform-contact-label[data-v-f93bb259] {
 	flex-basis: 140px;
 }
-.bglform-contact input[type="checkbox"][data-v-61e13dd7] {
+.bglform-contact input[type="checkbox"][data-v-f93bb259] {
 	width: 30px;
 	min-width: 0;
 }
-.light.thin.btn-txt.btn[data-v-61e13dd7] {
+.light.thin.flatBtn.btn[data-v-f93bb259] {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
-.add-btn[data-v-61e13dd7] {
+.add-btn[data-v-f93bb259] {
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;
 	margin-inline-start: 1rem;
 }
-.add-btn[data-v-61e13dd7]:active {
+.add-btn[data-v-f93bb259]:active {
 	background: none !important;
 }
-.add-btn[data-v-61e13dd7]::before {
+.add-btn[data-v-f93bb259]::before {
 	content: "+";
 	font-size: 10px;
 	background: var(--bgl-blue-light);
@@ -1179,15 +1175,16 @@ th[data-v-f3a410c2] {
 	justify-content: center;
 	color: var(--bgl-primary);
 }
-.add-btn[data-v-61e13dd7]:hover::before {
+.add-btn[data-v-f93bb259]:hover::before {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
 @media screen and (max-width: 910px) {
-.bglform-contact-label[data-v-61e13dd7] {
+.bglform-contact-label[data-v-f93bb259] {
 		min-width: 0;
 }
 }
+
 .bglform-contact-confirm {
 	position: absolute;
 	background: rgba(255, 255, 255, 0.5);
@@ -1200,45 +1197,45 @@ th[data-v-f3a410c2] {
 	backdrop-filter: blur(1px);
 }
 
-.bglform-contact[data-v-01e485e2] {
+.bglform-contact[data-v-77d03b04] {
 	display: flex;
 	gap: 0.5rem;
 	max-width: 700px;
 	position: relative;
 }
-.bglform-contact-label[data-v-01e485e2] {
+.bglform-contact-label[data-v-77d03b04] {
 	flex-basis: 140px;
 }
-.bglform-contact-address[data-v-01e485e2] {
+.bglform-contact-address[data-v-77d03b04] {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
-.bglform-contact input[type="checkbox"][data-v-01e485e2] {
+.bglform-contact input[type="checkbox"][data-v-77d03b04] {
 	width: 30px;
 	min-width: 0;
 }
-.light.thin.btn-txt.btn[data-v-01e485e2] {
+.light.thin.flatBtn.btn[data-v-77d03b04] {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
-.bglform-address-del[data-v-01e485e2] {
+.bglform-address-del[data-v-77d03b04] {
 	margin-top: 6px;
 }
-.bglform-contact-address-flex[data-v-01e485e2] {
+.bglform-contact-address-flex[data-v-77d03b04] {
 	display: flex;
 	gap: 0.5rem;
 }
-.add-btn[data-v-01e485e2] {
+.add-btn[data-v-77d03b04] {
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;
 	margin-inline-start: 1rem;
 }
-.add-btn[data-v-01e485e2]:active {
+.add-btn[data-v-77d03b04]:active {
 	background: none !important;
 }
-.add-btn[data-v-01e485e2]::before {
+.add-btn[data-v-77d03b04]::before {
 	content: "+";
 	font-size: 10px;
 	background: var(--bgl-blue-light);
@@ -1250,18 +1247,19 @@ th[data-v-f3a410c2] {
 	justify-content: center;
 	color: var(--bgl-primary);
 }
-.add-btn[data-v-01e485e2]:hover::before {
+.add-btn[data-v-77d03b04]:hover::before {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
 @media screen and (max-width: 910px) {
-.bglform-contact-address-flex[data-v-01e485e2] {
+.bglform-contact-address-flex[data-v-77d03b04] {
 		flex-wrap: wrap;
 }
-.bglform-contact-label[data-v-01e485e2] {
+.bglform-contact-label[data-v-77d03b04] {
 		min-width: 0;
 }
 }
+
 .bglform-contact-confirm {
 	position: absolute;
 	background: rgba(255, 255, 255, 0.5);
@@ -1274,45 +1272,45 @@ th[data-v-f3a410c2] {
 	backdrop-filter: blur(1px);
 }
 
-.bglform-contact[data-v-c63408c1] {
+.bglform-contact[data-v-a0d366d4] {
 	display: flex;
 	gap: 0.5rem;
 	max-width: 700px;
 	position: relative;
 }
-.bglform-contact-label[data-v-c63408c1] {
+.bglform-contact-label[data-v-a0d366d4] {
 	flex-basis: 140px;
 }
-.bglform-contact-address[data-v-c63408c1] {
+.bglform-contact-address[data-v-a0d366d4] {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
-.bglform-contact input[type="checkbox"][data-v-c63408c1] {
+.bglform-contact input[type="checkbox"][data-v-a0d366d4] {
 	width: 30px;
 	min-width: 0;
 }
-.light.thin.btn-txt.btn[data-v-c63408c1] {
+.light.thin.flatBtn.btn[data-v-a0d366d4] {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
-.bglform-address-del[data-v-c63408c1] {
+.bglform-address-del[data-v-a0d366d4] {
 	margin-top: 6px;
 }
-.bglform-contact-address-flex[data-v-c63408c1] {
+.bglform-contact-address-flex[data-v-a0d366d4] {
 	display: flex;
 	gap: 0.5rem;
 }
-.add-btn[data-v-c63408c1] {
+.add-btn[data-v-a0d366d4] {
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;
 	margin-inline-start: 1rem;
 }
-.add-btn[data-v-c63408c1]:active {
+.add-btn[data-v-a0d366d4]:active {
 	background: none !important;
 }
-.add-btn[data-v-c63408c1]::before {
+.add-btn[data-v-a0d366d4]::before {
 	content: "+";
 	font-size: 10px;
 	background: var(--bgl-blue-light);
@@ -1324,51 +1322,52 @@ th[data-v-f3a410c2] {
 	justify-content: center;
 	color: var(--bgl-primary);
 }
-.add-btn[data-v-c63408c1]:hover::before {
+.add-btn[data-v-a0d366d4]:hover::before {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
 @media screen and (max-width: 910px) {
-.bglform-contact-address-flex[data-v-c63408c1] {
+.bglform-contact-address-flex[data-v-a0d366d4] {
 		flex-wrap: wrap;
 }
-.bglform-contact-label[data-v-c63408c1] {
+.bglform-contact-label[data-v-a0d366d4] {
 		min-width: 0;
 }
 }
-.misc-wrap[data-v-91b04350] {
-  display: flex;
-  gap: 1rem;
-  border-top: 1px solid var(--border-color);
-  padding-top: 0.5rem;
-  margin-bottom: auto;
+
+.misc-wrap[data-v-a096417d] {
+	display: flex;
+	gap: 1rem;
+	border-top: 1px solid var(--border-color);
+	padding-top: 0.5rem;
+	margin-bottom: auto;
 }
-.gray.thin.btn-txt.btn.add-btn[data-v-91b04350] {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  padding-left: 0;
-  padding-right: 0;
-  transition: var(--bgl-transition);
+.gray.thin.flatBtn.btn.add-btn[data-v-a096417d] {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	padding-left: 0;
+	padding-right: 0;
+	transition: var(--bgl-transition);
 }
-.add-btn[data-v-91b04350]:active {
-  background: none !important;
+.add-btn[data-v-a096417d]:active {
+	background: none !important;
 }
-.add-btn[data-v-91b04350]::before {
-  content: "+";
-  font-size: 10px;
-  background: var(--bgl-gray-light);
-  border-radius: 100%;
-  height: 14px;
-  width: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--bgl-gray);
+.add-btn[data-v-a096417d]::before {
+	content: "+";
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	border-radius: 100%;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
 }
-.add-btn[data-v-91b04350]:hover::before {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+.add-btn[data-v-a096417d]:hover::before {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .checkbox-label {
@@ -2028,87 +2027,87 @@ input[type='email'][data-v-ed81a514] {
 	background: transparent;
 }
 
-.table-side-scroll[data-v-b01223bc] {
+.table-side-scroll[data-v-1d1376d2] {
 	overflow: auto;
 	margin-inline-start: -1rem;
 	padding-inline-start: 1rem;
 	padding-bottom: 1rem;
 }
-.table-field-wrap[data-v-b01223bc] {
+.table-field-wrap[data-v-1d1376d2] {
 	margin-bottom: -1rem;
 }
-.table-cell[data-v-b01223bc] {
+.table-cell[data-v-1d1376d2] {
 	border-inline-end: 1px solid var(--border-color);
 	border-bottom: 1px solid var(--border-color);
 }
-.table-row[data-v-b01223bc] {
+.table-row[data-v-1d1376d2] {
 	transition: var(--bgl-transition);
 	position: relative;
 	width: max-content;
 }
-.table-row[data-v-b01223bc]:hover {
+.table-row[data-v-1d1376d2]:hover {
 	background: var(--bgl-gray-light);
 }
-.table-reorder[data-v-b01223bc] {
+.table-reorder[data-v-1d1376d2] {
 	opacity: 0;
 	width: 2rem;
 	text-align: center;
 	position: absolute;
 	margin-inline-start: -2rem;
 }
-.table-row:hover .table-reorder[data-v-b01223bc] {
+.table-row:hover .table-reorder[data-v-1d1376d2] {
 	opacity: 1;
 	cursor: grab;
 }
-.table-reorder[data-v-b01223bc]:active {
+.table-reorder[data-v-1d1376d2]:active {
 	opacity: 1;
 	cursor: grab;
 }
-.btn.thin.btn-txt[data-v-b01223bc] {
+.btn.thin.flatBtn[data-v-1d1376d2] {
 	margin-inline-start: -1rem;
 	margin-top: 1rem;
 }
-.table-header[data-v-b01223bc] {
+.table-header[data-v-1d1376d2] {
 	display: flex;
 	width: max-content;
 }
-.header-col[data-v-b01223bc] {
+.header-col[data-v-1d1376d2] {
 	min-width: calc(var(--input-height) * 3);
 	font-size: 13px;
 	color: var(--input-color);
 	padding: 10px 0;
 	border-bottom: 1px solid var(--border-color);
 }
-.table-cell[data-v-b01223bc],
-.header-col[data-v-b01223bc] {
+.table-cell[data-v-1d1376d2],
+.header-col[data-v-1d1376d2] {
 	width: 160px;
 }
-.table-cell.check[data-v-b01223bc],
-.header-col.check[data-v-b01223bc] {
+.table-cell.check[data-v-1d1376d2],
+.header-col.check[data-v-1d1376d2] {
 	width: 100px;
 }
-.table-cell.date[data-v-b01223bc],
-.header-col.date[data-v-b01223bc] {
+.table-cell.date[data-v-1d1376d2],
+.header-col.date[data-v-1d1376d2] {
 	width: 140px;
 }
-.header-col.small-text[data-v-b01223bc],
-.header-col.text[data-v-b01223bc],
-.header-col.long-text[data-v-b01223bc],
-.header-col.json[data-v-b01223bc],
-.table-cell.small-text[data-v-b01223bc],
-.table-cell.text[data-v-b01223bc],
-.table-cell.long-text[data-v-b01223bc],
-.table-cell.json[data-v-b01223bc] {
+.header-col.small-text[data-v-1d1376d2],
+.header-col.text[data-v-1d1376d2],
+.header-col.long-text[data-v-1d1376d2],
+.header-col.json[data-v-1d1376d2],
+.table-cell.small-text[data-v-1d1376d2],
+.table-cell.text[data-v-1d1376d2],
+.table-cell.long-text[data-v-1d1376d2],
+.table-cell.json[data-v-1d1376d2] {
 	width: 240px;
 }
-.table-cell.small-text .bagel-input[data-v-b01223bc],
-.table-cell.text .bagel-input[data-v-b01223bc],
-.table-cell.long-text .bagel-input[data-v-b01223bc],
-.table-cell.json .bagel-input[data-v-b01223bc] {
+.table-cell.small-text .bagel-input[data-v-1d1376d2],
+.table-cell.text .bagel-input[data-v-1d1376d2],
+.table-cell.long-text .bagel-input[data-v-1d1376d2],
+.table-cell.json .bagel-input[data-v-1d1376d2] {
 	height: 40px;
 	overflow: auto;
 }
-.table-action[data-v-b01223bc] {
+.table-action[data-v-1d1376d2] {
 	text-align: center;
 	position: sticky;
 	opacity: 0;
@@ -2118,19 +2117,19 @@ input[type='email'][data-v-ed81a514] {
 	margin-top: -1px;
 	background: var(--border-color);
 }
-.table-action>.icon-font[data-v-b01223bc] {
+.table-action>.icon-font[data-v-1d1376d2] {
 	padding: 11.4px;
 	cursor: pointer;
 	transition: var(--bgl-transition);
 }
-.table-action:hover>.icon-font[data-v-b01223bc] {
+.table-action:hover>.icon-font[data-v-1d1376d2] {
 	background: var(--bgl-red);
 	color: var(--bgl-white);
 }
-.table-action:active>.icon-font[data-v-b01223bc] {
+.table-action:active>.icon-font[data-v-1d1376d2] {
 	filter: brightness(90%);
 }
-.table-row:hover .table-action[data-v-b01223bc] {
+.table-row:hover .table-action[data-v-1d1376d2] {
 	opacity: 1;
 }
 
@@ -3026,11 +3025,11 @@ label.active {
 .label-count-0 label {
     display: none;
 }
-.label-count-0 button.btn.btn-txt {
+.label-count-0 button.btn.flatBtn {
     /* background: var(--bgl-blue-light); */
     margin-right: 5px;
 }
-.label-count-0 button.btn.btn-txt:hover {
+.label-count-0 button.btn.flatBtn:hover {
     background: var(--bgl-hover-filter);
 }
 .formkit-outer.label-count-0 {
@@ -3081,7 +3080,7 @@ input[type="color"]::-moz-color-swatch:hover {
 }
 button,
 .btn,
-.btn-txt,
+.flatBtn,
 .btn-icon {
     font-family: inherit;
     white-space: nowrap;

package/dist/types/index.d.ts

@@ -4,5 +4,5 @@ export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
 export * from './BagelField';
 export * from './BtnOptions';
-export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
+export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'blue';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,GAAE,MAAM,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.196",
+  "version": "0.0.200",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -10,7 +10,7 @@
 			btn: !icon || slots['default'] || value,
 			thin,
 			round,
-			'btn-txt': flat,
+			'flatBtn': flat,
 			'btn-border': border
 		}"
 	>
@@ -62,7 +62,6 @@ const props = withDefaults(
 		to?: string;
 		round?: boolean;
 		is?: string;
-		borderColor?: string
 	}>(),
 	{
 		loading: false,
@@ -74,23 +73,35 @@ const props = withDefaults(
 	},
 );
 
-const computedTheme = $computed(() => (props?.color || props?.theme));
+const computedTheme = $computed(
+	() => (props?.color || props?.theme)
+);
 
 const computedDefaultColors = $computed(
 	() => ({
 		backgroundColor: 'var(--bgl-primary)',
 		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)'
-	}
-	)
+	})
 )
 
+function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
+	return ({
+		...computedDefaultColors,
+		...theme,
+		color: props.flat
+			? theme.backgroundColor as string
+			: theme.color as string,
+	})
+}
+
 const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
-	red: { ...computedDefaultColors, backgroundColor: 'var(--bgl-red)', },
-	black: { ...computedDefaultColors, backgroundColor: 'var(--bgl-black)' },
-	green: { ...computedDefaultColors, backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' },
-	gray: { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' },
-	light: { ...computedDefaultColors, backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' },
-	'gray-light': { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' },
+	red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
+	black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
+	green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
+	blue: getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
+	gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
+	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
 };
 
 const cumputedTextColor = $computed(
@@ -135,8 +146,6 @@ const computedBackgroundColor = $computed(
 }
 
 .btn {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
@@ -159,6 +168,12 @@ const computedBackgroundColor = $computed(
 	font-size: calc(var(--input-font-size) * 1.3);
 }
 
+.btn,
+.btn-icon {
+	background-color: v-bind(computedBackgroundColor);
+	color: v-bind(cumputedTextColor);
+}
+
 .btn:hover,
 .btn-icon:hover {
 	filter: var(--bgl-hover-filter);
@@ -169,53 +184,45 @@ const computedBackgroundColor = $computed(
 	filter: var(--bgl-active-filter);
 }
 
-.btn,
-.btn-icon {
-	background-color: v-bind(computedBackgroundColor);
-	color: v-bind(cumputedTextColor);
 
-}
-
-.btn.btn-txt {
-	color: var(--bgl-primary);
+.btn.flatBtn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
 
-.btn-icon.btn-txt {
-	color: var(--bgl-primary);
+.btn-icon.flatBtn {
 	background: transparent;
 }
 
-.btn.btn-txt:hover,
-.btn-icon.btn-txt:hover {
+.btn.flatBtn:hover,
+.btn-icon.flatBtn:hover {
 	filter: var(--bgl-active-filter);
 }
 
-.btn.btn-txt:active,
-.btn-icon.btn-txt:active {
+.btn.flatBtn:active,
+.btn-icon.flatBtn:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
 
-.btn.btn-txt.red,
-.btn-icon.btn-txt.red {
+.btn.flatBtn.red,
+.btn-icon.flatBtn.red {
 	color: var(--bgl-red);
 }
 
-.btn.btn-txt.light,
-.btn-icon.btn-txt.light {
+.btn.flatBtn.light,
+.btn-icon.flatBtn.light {
 	color: var(--bgl-primary-tint);
 }
 
-.btn.btn-txt.black,
-.btn-icon.btn-txt.black {
+.btn.flatBtn.black,
+.btn-icon.flatBtn.black {
 	color: var(--bgl-black);
 }
 
-.btn.btn-txt.gray,
-.btn-icon.btn-txt.gray {
+.btn.flatBtn.gray,
+.btn-icon.flatBtn.gray {
 	color: var(--bgl-gray);
 }
 
@@ -241,11 +248,11 @@ const computedBackgroundColor = $computed(
 .btn-border {
 	outline: 1px solid v-bind(computedBackgroundColor);
 	color: v-bind(computedBackgroundColor);
-	background: var(--bgl-white);
+	background: transparent;
 }
 
 .btn-border:hover {
-	color: v-bind(cumputedTextColor);
+	color: var(--bgl-white);
 	background: v-bind(computedBackgroundColor);
 	filter: brightness(100%);
 }

package/src/components/form/inputs/TableField.vue

@@ -193,7 +193,7 @@ onMounted(() => {
 	cursor: grab;
 }
 
-.btn.thin.btn-txt {
+.btn.thin.flatBtn {
 	margin-inline-start: -1rem;
 	margin-top: 1rem;
 }

package/src/components/formkit/AddressArray.vue

@@ -195,7 +195,7 @@ watch(
 	min-width: 0;
 }
 
-.light.thin.btn-txt.btn {
+.light.thin.flatBtn.btn {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
@@ -246,4 +246,5 @@ watch(
 	.bglform-contact-label {
 		min-width: 0;
 	}
-}</style>
+}
+</style>

package/src/components/formkit/BankDetailsArray.vue

@@ -219,7 +219,7 @@ watch(
 	min-width: 0;
 }
 
-.light.thin.btn-txt.btn {
+.light.thin.flatBtn.btn {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
@@ -270,4 +270,5 @@ watch(
 	.bglform-contact-label {
 		min-width: 0;
 	}
-}</style>
+}
+</style>

package/src/components/formkit/ContactArrayFormKit.vue

@@ -161,7 +161,7 @@ watch(
 	min-width: 0;
 }
 
-.light.thin.btn-txt.btn {
+.light.thin.flatBtn.btn {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
@@ -199,4 +199,5 @@ watch(
 	.bglform-contact-label {
 		min-width: 0;
 	}
-}</style>
+}
+</style>

package/src/components/formkit/MiscFields.vue

@@ -1,74 +1,74 @@
 <template>
-  <div class="misc-wrap">
-    <Btn
-      class="add-btn"
-      color="gray"
-      flat
-      @click="addToField(field)"
-      v-for="(field, i) in fields.filter(
+	<div class="misc-wrap">
+		<Btn
+			class="add-btn"
+			color="gray"
+			flat
+			@click="addToField(field)"
+			v-for="(field, i) in fields.filter(
 				(field: any) => field.value?.length === 0,
 			)"
-      :key="i"
-      thin
-    >
-      {{ addBtnLabel }} {{ field.context?.label }}
-    </Btn>
-  </div>
+			:key="i"
+			thin
+		>
+			{{ addBtnLabel }} {{ field.context?.label }}
+		</Btn>
+	</div>
 </template>
 
 <script lang="ts" setup>
 import { Btn } from "@bagelink/vue";
 
 const props = defineProps<{
-  context: Record<string, any>;
-  addBtnLabel: string;
+	context: Record<string, any>;
+	addBtnLabel: string;
 }>();
 
 const fields = $computed(() => props.context?.node?.parent?.children || []);
 
 const addToField = (field: any) => {
-  field.input([{}]);
-  console.log(fields);
+	field.input([{}]);
+	console.log(fields);
 };
 </script>
 
 <style scoped>
 .misc-wrap {
-  display: flex;
-  gap: 1rem;
-  border-top: 1px solid var(--border-color);
-  padding-top: 0.5rem;
-  margin-bottom: auto;
+	display: flex;
+	gap: 1rem;
+	border-top: 1px solid var(--border-color);
+	padding-top: 0.5rem;
+	margin-bottom: auto;
 }
 
-.gray.thin.btn-txt.btn.add-btn {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  padding-left: 0;
-  padding-right: 0;
-  transition: var(--bgl-transition);
+.gray.thin.flatBtn.btn.add-btn {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	padding-left: 0;
+	padding-right: 0;
+	transition: var(--bgl-transition);
 }
 
 .add-btn:active {
-  background: none !important;
+	background: none !important;
 }
 
 .add-btn::before {
-  content: "+";
-  font-size: 10px;
-  background: var(--bgl-gray-light);
-  border-radius: 100%;
-  height: 14px;
-  width: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--bgl-gray);
+	content: "+";
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	border-radius: 100%;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
 }
 
 .add-btn:hover::before {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 </style>

package/src/styles/buttons.css

@@ -1,6 +1,6 @@
 button,
 .btn,
-.btn-txt,
+.flatBtn,
 .btn-icon {
     font-family: inherit;
     white-space: nowrap;

package/src/styles/inputs.css

@@ -291,12 +291,12 @@ label.active {
     display: none;
 }
 
-.label-count-0 button.btn.btn-txt {
+.label-count-0 button.btn.flatBtn {
     /* background: var(--bgl-blue-light); */
     margin-right: 5px;
 }
 
-.label-count-0 button.btn.btn-txt:hover {
+.label-count-0 button.btn.flatBtn:hover {
     background: var(--bgl-hover-filter);
 }
 

package/src/types/index.ts

@@ -5,4 +5,4 @@ export type { StorageFile } from './file';
 export * from './BagelField';
 export * from './BtnOptions';
 
-export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
+export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green'| 'blue';