@bagelink/vue 1.2.115 → 1.2.121

package/dist/index.cjs

@@ -14190,6 +14190,59 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-722373de"]]);
+function useHighlight() {
+  const hljs = vue.ref(null);
+  const loaded = vue.ref(false);
+  const loadHighlight = async () => {
+    if (loaded.value) return;
+    try {
+      await appendScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js", { id: "hljs-cdn" });
+      await appendStyle("https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css");
+      if (window.hljs) {
+        hljs.value = window.hljs;
+        loaded.value = true;
+      } else {
+        console.error("Failed to load highlight.js");
+      }
+    } catch (error) {
+      console.error("Error loading highlight.js:", error);
+    }
+  };
+  const escapeHtml = (unsafe) => {
+    return unsafe.replace(/[&<>"']/g, (m2) => {
+      const replacements = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#039;"
+      };
+      return replacements[m2] || "";
+    });
+  };
+  const highlightCode = (code, language, autodetect = true, ignoreIllegals = true) => {
+    if (!hljs.value) return escapeHtml(code);
+    try {
+      const lang = language || "";
+      if (lang && !autodetect && !hljs.value.getLanguage(lang)) {
+        console.warn(`The language "${lang}" is not available.`);
+        return escapeHtml(code);
+      }
+      const result2 = autodetect ? hljs.value.highlightAuto(code) : hljs.value.highlight(code, { language: lang, ignoreIllegals });
+      return result2.value || escapeHtml(code);
+    } catch (error) {
+      console.error("Highlighting error:", error);
+      return escapeHtml(code);
+    }
+  };
+  return {
+    hljs,
+    loaded,
+    loadHighlight,
+    escapeHtml,
+    highlightCode
+  };
+}
 const _hoisted_1$L = {
   key: 0,
   class: "label"
@@ -14218,39 +14271,19 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const code = vue.ref(props2.modelValue || "");
     const editorRef = vue.ref();
-    const loaded = vue.ref(false);
-    const hljs = vue.ref(null);
+    const { loaded, loadHighlight, highlightCode } = useHighlight();
     const maxHeight = vue.computed(() => {
       const h2 = props2.height ?? "240px";
       return h2.match(/^\d+$/) ? `${h2}px` : h2;
     });
     const formattedCode = vue.computed(() => {
-      if (!hljs.value) return escapeHtml(code.value);
-      try {
-        const lang = props2.language || "";
-        if (lang && !props2.autodetect && !hljs.value.getLanguage(lang)) {
-          console.warn(`The language "${lang}" is not available.`);
-          return escapeHtml(code.value);
-        }
-        const result2 = props2.autodetect ? hljs.value.highlightAuto(code.value) : hljs.value.highlight(code.value, { language: lang, ignoreIllegals: props2.ignoreIllegals });
-        return result2.value || escapeHtml(code.value);
-      } catch (error) {
-        console.error("Highlighting error:", error);
-        return escapeHtml(code.value);
-      }
-    });
-    function escapeHtml(unsafe) {
-      return unsafe.replace(/[&<>"']/g, (m2) => {
-        const replacements = {
-          "&": "&amp;",
-          "<": "&lt;",
-          ">": "&gt;",
-          '"': "&quot;",
-          "'": "&#039;"
-        };
-        return replacements[m2] || "";
-      });
-    }
+      return highlightCode(
+        code.value,
+        props2.language,
+        props2.autodetect,
+        props2.ignoreIllegals
+      );
+    });
     function handleInput(e) {
       const target = e.target;
       code.value = target.value;
@@ -14270,18 +14303,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       }, 0);
     }
     vue.onMounted(async () => {
-      try {
-        await appendScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js", { id: "hljs-cdn" });
-        await appendStyle("https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css");
-        if (window.hljs) {
-          hljs.value = window.hljs;
-          loaded.value = true;
-        } else {
-          console.error("Failed to load highlight.js");
-        }
-      } catch (error) {
-        console.error("Error loading highlight.js:", error);
-      }
+      await loadHighlight();
     });
     vue.watch(() => props2.modelValue, (newVal) => {
       if (newVal !== void 0 && newVal !== code.value) {
@@ -14294,7 +14316,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         style: vue.normalizeStyle({ maxHeight: maxHeight.value })
       }, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$L, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
-        loaded.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
           ref_key: "editorRef",
           ref: editorRef,
@@ -14321,7 +14343,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-6ab9613f"]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-de01e351"]]);
 const _hoisted_1$K = ["title"];
 const _hoisted_2$y = { class: "flex bg-input rounded px-025 colorInputPickWrap" };
 const _hoisted_3$t = ["id", "placeholder", "required"];
@@ -32848,53 +32870,65 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
 const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-2f5e271c"]]);
 const _hoisted_1$m = ["textContent"];
 const _hoisted_2$d = {
+  key: 0,
+  class: "h-100p flex column justify-content-center"
+};
+const _hoisted_3$a = {
   key: 1,
   class: "loading-container"
 };
-const _hoisted_3$a = { class: "overflow h-100p" };
-const _hoisted_4$6 = {
+const _hoisted_4$6 = { class: "overflow h-100p" };
+const _hoisted_5$6 = {
   key: 0,
-  class: "config-section flex gap-05 pb-2"
+  class: "config-section flex gap-05 pb-2 m_flex-wrap"
 };
-const _hoisted_5$6 = { key: 1 };
-const _hoisted_6$5 = { class: "mapping-table" };
-const _hoisted_7$4 = { class: "field-label" };
-const _hoisted_8$3 = { key: 0 };
-const _hoisted_9$2 = { key: 2 };
-const _hoisted_10$2 = { key: 3 };
-const _hoisted_11$2 = {
+const _hoisted_6$5 = { key: 1 };
+const _hoisted_7$4 = { class: "mapping-table" };
+const _hoisted_8$3 = { class: "field-label" };
+const _hoisted_9$2 = { class: "grid-span-2 input-size line-height-1 inline-block" };
+const _hoisted_10$2 = { key: 0 };
+const _hoisted_11$2 = { key: 2 };
+const _hoisted_12$2 = { key: 3 };
+const _hoisted_13$1 = {
   key: 0,
   class: "field-disabled-reason"
 };
-const _hoisted_12$2 = { key: 1 };
-const _hoisted_13$1 = { class: "fileColSelect" };
-const _hoisted_14$1 = { class: "default-value-container hideLabel" };
-const _hoisted_15 = { class: "flex gap-05" };
-const _hoisted_16 = {
+const _hoisted_14$1 = { key: 1 };
+const _hoisted_15 = { class: "fileColSelect" };
+const _hoisted_16 = { class: "default-value-container hideLabel" };
+const _hoisted_17 = { class: "flex gap-05 my-05" };
+const _hoisted_18 = {
   key: 0,
   class: "action-buttons"
 };
-const _hoisted_17 = {
+const _hoisted_19 = {
   key: 1,
   class: "action-buttons"
 };
-const _hoisted_18 = { key: 0 };
-const _hoisted_19 = { class: "flex space-between gap-1 mb-1" };
-const _hoisted_20 = { class: "flex pt-05" };
-const _hoisted_21 = { key: 0 };
-const _hoisted_22 = { class: "pb-05" };
-const _hoisted_23 = {
+const _hoisted_20 = { key: 0 };
+const _hoisted_21 = { class: "flex space-between gap-1 mb-1 border-bottom pb-05 m_flex-wrap" };
+const _hoisted_22 = { class: "grid-span-2 input-size line-height-1" };
+const _hoisted_23 = { class: "grid-span-4 input-size line-height-1 ellipsis-1" };
+const _hoisted_24 = { class: "grid grid-wrap-7 gap-1 align-items-center m_gap-025 m_pb-1-5" };
+const _hoisted_25 = { class: "grid-span-2" };
+const _hoisted_26 = { class: "grid-span-4" };
+const _hoisted_27 = { class: "flex pt-05" };
+const _hoisted_28 = { key: 0 };
+const _hoisted_29 = { class: "pb-05" };
+const _hoisted_30 = {
   key: 0,
   class: "mb-05"
 };
-const _hoisted_24 = { key: 1 };
-const _hoisted_25 = { class: "mb-1" };
-const _hoisted_26 = { key: 0 };
-const _hoisted_27 = { class: "flex gap-1" };
-const _hoisted_28 = { class: "default-value-container" };
-const _hoisted_29 = { class: "action-buttons-cell" };
-const _hoisted_30 = { class: "flex pt-05" };
-const _hoisted_31 = { key: 0 };
+const _hoisted_31 = { key: 1 };
+const _hoisted_32 = { class: "mb-1" };
+const _hoisted_33 = { key: 0 };
+const _hoisted_34 = { class: "flex gap-1" };
+const _hoisted_35 = { class: "default-value-container" };
+const _hoisted_36 = { class: "action-buttons-cell" };
+const _hoisted_37 = { class: "flex pt-05" };
+const _hoisted_38 = { class: "mt-1" };
+const _hoisted_39 = { class: "flex gap-1 mt-1 space-between" };
+const _hoisted_40 = { key: 0 };
 const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "ImportData",
   props: {
@@ -33920,41 +33954,51 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             class: "line-height-1 m-0 pb-2 txt-center",
             textContent: vue.toDisplayString(props2.title || "Upload and Map Data")
           }, null, 8, _hoisted_1$m),
-          !file.value ? (vue.openBlock(), vue.createBlock(vue.unref(DragOver), {
-            key: 0,
-            accept: ".csv,.xls,.xlsx",
-            onAddFiles: vue.unref(addFile),
-            onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(browse)(false))
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(_sfc_main$15), { class: "flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center" }, {
+          !file.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
+            vue.createVNode(vue.unref(DragOver), {
+              accept: ".csv,.xls,.xlsx",
+              class: "max-h300px w-500px",
+              onAddFiles: vue.unref(addFile),
+              onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(browse)(false))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(_sfc_main$15), { class: "flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center txt-center" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(_sfc_main$v), {
+                      name: "upload",
+                      size: "5"
+                    }),
+                    _cache[30] || (_cache[30] = vue.createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
+                    _cache[31] || (_cache[31] = vue.createElementVNode("u", null, "or click to select a file", -1)),
+                    _cache[32] || (_cache[32] = vue.createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["onAddFiles"])
+          ])) : vue.createCommentVNode("", true),
+          isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, _cache[33] || (_cache[33] = [
+            vue.createElementVNode("div", { class: "spinner" }, null, -1),
+            vue.createElementVNode("p", null, "Processing your file...", -1)
+          ]))) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_4$6, [
+            file.value && !isLoading.value && sheetNames.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
+              vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+                class: "px-1",
+                color: "gray",
+                onClick: _cache[1] || (_cache[1] = ($event) => file.value = null)
+              }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(_sfc_main$v), {
-                    name: "upload",
-                    size: "5"
+                    icon: "draft",
+                    size: "1.5",
+                    weight: "300"
                   }),
-                  _cache[30] || (_cache[30] = vue.createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
-                  _cache[31] || (_cache[31] = vue.createElementVNode("p", null, "or click to select a file", -1)),
-                  _cache[32] || (_cache[32] = vue.createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
+                  vue.createElementVNode("p", null, vue.toDisplayString(file.value.name), 1)
                 ]),
                 _: 1
-              })
-            ]),
-            _: 1
-          }, 8, ["onAddFiles"])) : vue.createCommentVNode("", true),
-          isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, _cache[33] || (_cache[33] = [
-            vue.createElementVNode("div", { class: "spinner" }, null, -1),
-            vue.createElementVNode("p", null, "Processing your file...", -1)
-          ]))) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_3$a, [
-            file.value && !isLoading.value && sheetNames.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
-              vue.withDirectives(vue.createVNode(vue.unref(Btn), {
-                value: file.value.name,
-                thin: "",
-                round: "",
-                iconEnd: "edit",
-                onClick: _cache[1] || (_cache[1] = ($event) => file.value = null)
-              }, null, 8, ["value"]), [
+              })), [
                 [_directive_tooltip, "Change File"]
               ]),
               sheetNames.value.length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(SelectInput), {
@@ -33968,13 +34012,14 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                 modelValue: hasHeaders.value,
                 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hasHeaders.value = $event),
                 label: "Mark this if file has a header row",
-                class: "m-0"
+                class: "m-0",
+                style: { "--bgl-accent-color": "var(--bgl-black)", "--bgl-primary": "var(--bgl-black)" }
               }, null, 8, ["modelValue"])
             ])) : vue.createCommentVNode("", true),
-            file.value && !isLoading.value && fileHeaders.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
+            file.value && !isLoading.value && fileHeaders.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$5, [
               _cache[37] || (_cache[37] = vue.createElementVNode("p", { class: "label pb-1 border-bottom mb-1" }, " Match each required field to a column from your file, set default values, or configure transformations ", -1)),
-              vue.createElementVNode("div", _hoisted_6$5, [
-                _cache[34] || (_cache[34] = vue.createElementVNode("div", { class: "grid grid-wrap-5 gap-1 bold pb-1" }, [
+              vue.createElementVNode("div", _hoisted_7$4, [
+                _cache[34] || (_cache[34] = vue.createElementVNode("div", { class: "grid grid-wrap-5 gap-1 bold pb-1 m_none" }, [
                   vue.createElementVNode("p", null, "Schema Field"),
                   vue.createElementVNode("p", null, "Column from File"),
                   vue.createElementVNode("p", null, "Default Value"),
@@ -33984,12 +34029,12 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(schemaFields.value, (field) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: field.id,
-                    class: vue.normalizeClass(["grid grid-wrap-5 gap-1", { "array-field-row": field.isArrayField || field.$el === "array" }])
+                    class: vue.normalizeClass(["grid grid-wrap-5 gap-1 m_gap-025 m_pb-1-5", { "array-field-row": field.isArrayField || field.$el === "array" }])
                   }, [
                     vue.createElementVNode("div", null, [
-                      vue.createElementVNode("div", _hoisted_7$4, [
-                        vue.createTextVNode(vue.toDisplayString(field.label) + " ", 1),
-                        field.isArrayField ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$3, "↳")) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("div", _hoisted_8$3, [
+                        vue.createElementVNode("p", _hoisted_9$2, vue.toDisplayString(field.label), 1),
+                        field.isArrayField ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$2, "↳")) : vue.createCommentVNode("", true),
                         field.$el === "array" ? (vue.openBlock(), vue.createBlock(vue.unref(Pill), {
                           key: 1,
                           class: "txt10 ms-05",
@@ -33997,13 +34042,13 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                           thin: "",
                           value: "Array"
                         })) : vue.createCommentVNode("", true),
-                        isFieldRequired(field) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9$2, "*")) : vue.createCommentVNode("", true),
-                        getFieldDescription(field).isConditional ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$2, "†")) : vue.createCommentVNode("", true)
+                        isFieldRequired(field) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$2, "*")) : vue.createCommentVNode("", true),
+                        getFieldDescription(field).isConditional ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12$2, "†")) : vue.createCommentVNode("", true)
                       ]),
-                      field.disabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$2, vue.toDisplayString(field.disabledReason), 1)) : vue.createCommentVNode("", true),
-                      getFieldDescription(field).isConditional ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, vue.toDisplayString(getFieldDescription(field).description), 1)) : vue.createCommentVNode("", true)
+                      field.disabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, vue.toDisplayString(field.disabledReason), 1)) : vue.createCommentVNode("", true),
+                      getFieldDescription(field).isConditional ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$1, vue.toDisplayString(getFieldDescription(field).description), 1)) : vue.createCommentVNode("", true)
                     ]),
-                    vue.createElementVNode("div", _hoisted_13$1, [
+                    vue.createElementVNode("div", _hoisted_15, [
                       vue.createVNode(vue.unref(SelectInput), {
                         modelValue: fieldMapping[field.id],
                         "onUpdate:modelValue": ($event) => fieldMapping[field.id] = $event,
@@ -34015,7 +34060,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       }, null, 8, ["modelValue", "onUpdate:modelValue", "options", "required", "disabled", "onChange"])
                     ]),
                     vue.createElementVNode("div", null, [
-                      vue.createElementVNode("div", _hoisted_14$1, [
+                      vue.createElementVNode("div", _hoisted_16, [
                         vue.createTextVNode(vue.toDisplayString(initDefaultValue(field.id)) + " ", 1),
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(renderField)(getFieldWithDefaults(field)))))
                       ])
@@ -34029,7 +34074,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
                     ]),
                     vue.createElementVNode("div", null, [
-                      vue.createElementVNode("div", _hoisted_15, [
+                      vue.createElementVNode("div", _hoisted_17, [
                         vue.withDirectives(vue.createVNode(vue.unref(Btn), {
                           thin: "",
                           disabled: field.disabled,
@@ -34052,14 +34097,14 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                   ], 2);
                 }), 128))
               ]),
-              mappingComplete.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
+              mappingComplete.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18, [
                 vue.createVNode(vue.unref(Btn), { onClick: showPreview }, {
                   default: vue.withCtx(() => _cache[35] || (_cache[35] = [
                     vue.createTextVNode(" Preview Data ")
                   ])),
                   _: 1
                 })
-              ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, _cache[36] || (_cache[36] = [
+              ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, _cache[36] || (_cache[36] = [
                 vue.createElementVNode("div", { class: "mapping-incomplete-message" }, " Please map the required fields to continue ", -1)
               ])))
             ])) : vue.createCommentVNode("", true)
@@ -34071,8 +34116,8 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             width: "800"
           }, {
             default: vue.withCtx(() => [
-              selectedTransformField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18, [
-                vue.createElementVNode("div", _hoisted_19, [
+              selectedTransformField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
+                vue.createElementVNode("div", _hoisted_21, [
                   vue.createElementVNode("p", null, [
                     _cache[38] || (_cache[38] = vue.createTextVNode("Create transformations for ")),
                     vue.createElementVNode("strong", null, vue.toDisplayString(selectedTransformField.value.label), 1)
@@ -34084,33 +34129,33 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                     onClick: _cache[4] || (_cache[4] = ($event) => autoPopulateTransformations(selectedTransformField.value.id))
                   })
                 ]),
-                vue.createElementVNode("table", null, [
-                  _cache[39] || (_cache[39] = vue.createElementVNode("thead", null, [
-                    vue.createElementVNode("tr", null, [
-                      vue.createElementVNode("th", null, "Source Value"),
-                      vue.createElementVNode("th", null, "Target Value"),
-                      vue.createElementVNode("th", null, "Action")
-                    ])
+                vue.createElementVNode("div", null, [
+                  _cache[39] || (_cache[39] = vue.createElementVNode("div", { class: "grid grid-wrap-7 gap-1 bold pb-05 m_none" }, [
+                    vue.createElementVNode("p", { class: "grid-span-2" }, " Source Value "),
+                    vue.createElementVNode("p", { class: "grid-span-4" }, " Target Value "),
+                    vue.createElementVNode("p", null, "Action")
                   ], -1)),
-                  vue.createElementVNode("tbody", null, [
+                  vue.createElementVNode("div", null, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(transformations[selectedTransformField.value.id] || [], (transform, index2) => {
-                      return vue.openBlock(), vue.createElementBlock("tr", { key: index2 }, [
-                        vue.createElementVNode("td", null, vue.toDisplayString(transform.sourceValue), 1),
-                        vue.createElementVNode("td", null, vue.toDisplayString(transform.targetValue), 1),
-                        vue.createElementVNode("td", null, [
-                          vue.withDirectives(vue.createVNode(vue.unref(Btn), {
-                            thin: "",
-                            icon: "delete",
-                            color: "red",
-                            onClick: ($event) => removeTransformation(selectedTransformField.value.id, index2)
-                          }, null, 8, ["onClick"]), [
-                            [_directive_tooltip, "Remove"]
-                          ])
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: index2,
+                        class: "grid grid-wrap-7 gap-1 align-items-center m_gap-025 m_pb-1-5"
+                      }, [
+                        vue.createElementVNode("p", _hoisted_22, vue.toDisplayString(transform.sourceValue), 1),
+                        vue.createElementVNode("p", _hoisted_23, vue.toDisplayString(transform.targetValue), 1),
+                        vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+                          class: "mb-05",
+                          thin: "",
+                          icon: "delete",
+                          color: "red",
+                          onClick: ($event) => removeTransformation(selectedTransformField.value.id, index2)
+                        }, null, 8, ["onClick"]), [
+                          [_directive_tooltip, "Remove"]
                         ])
                       ]);
                     }), 128)),
-                    vue.createElementVNode("tr", null, [
-                      vue.createElementVNode("td", null, [
+                    vue.createElementVNode("div", _hoisted_24, [
+                      vue.createElementVNode("div", _hoisted_25, [
                         fieldMapping[selectedTransformField.value.id] ? (vue.openBlock(), vue.createBlock(vue.unref(SelectInput), {
                           key: 0,
                           modelValue: selectedSourceValue.value,
@@ -34118,16 +34163,15 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                           searchable: "",
                           options: sourceValueOptions.value,
                           placeholder: "Select source value"
-                        }, null, 8, ["modelValue", "options"])) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+                        }, null, 8, ["modelValue", "options"])) : (vue.openBlock(), vue.createBlock(TextInput, {
                           key: 1,
+                          modelValue: selectedSourceValue.value,
                           "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectedSourceValue.value = $event),
                           type: "text",
                           placeholder: "Source value"
-                        }, null, 512)), [
-                          [vue.vModelText, selectedSourceValue.value]
-                        ])
+                        }, null, 8, ["modelValue"]))
                       ]),
-                      vue.createElementVNode("td", null, [
+                      vue.createElementVNode("div", _hoisted_26, [
                         selectedTransformField.value.options && selectedTransformField.value.options.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(SelectInput), {
                           key: 0,
                           modelValue: selectedTargetValue.value,
@@ -34135,29 +34179,27 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                           searchable: "",
                           options: selectedTransformField.value.options,
                           placeholder: "Select target value"
-                        }, null, 8, ["modelValue", "options"])) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+                        }, null, 8, ["modelValue", "options"])) : (vue.openBlock(), vue.createBlock(TextInput, {
                           key: 1,
+                          modelValue: selectedTargetValue.value,
                           "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => selectedTargetValue.value = $event),
                           type: "text",
                           placeholder: "Target value"
-                        }, null, 512)), [
-                          [vue.vModelText, selectedTargetValue.value]
-                        ])
+                        }, null, 8, ["modelValue"]))
                       ]),
-                      vue.createElementVNode("td", null, [
-                        vue.withDirectives(vue.createVNode(vue.unref(Btn), {
-                          thin: "",
-                          icon: "add",
-                          color: "primary",
-                          onClick: _cache[9] || (_cache[9] = ($event) => addTransformation(selectedTransformField.value.id))
-                        }, null, 512), [
-                          [_directive_tooltip, "Add"]
-                        ])
+                      vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+                        class: "mb-05",
+                        thin: "",
+                        icon: "add",
+                        color: "primary",
+                        onClick: _cache[9] || (_cache[9] = ($event) => addTransformation(selectedTransformField.value.id))
+                      }, null, 512), [
+                        [_directive_tooltip, "Add"]
                       ])
                     ])
                   ])
                 ]),
-                vue.createElementVNode("div", _hoisted_20, [
+                vue.createElementVNode("div", _hoisted_27, [
                   vue.createVNode(vue.unref(Btn), {
                     class: "ms-auto",
                     value: "Close",
@@ -34177,9 +34219,9 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             default: vue.withCtx(() => {
               var _a;
               return [
-                selectedRelationField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21, [
-                  vue.createElementVNode("p", _hoisted_22, " Upload a file with related data for " + vue.toDisplayString(selectedRelationField.value.label), 1),
-                  !relatedFiles[selectedRelationField.value.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_23, [
+                selectedRelationField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
+                  vue.createElementVNode("p", _hoisted_29, " Upload a file with related data for " + vue.toDisplayString(selectedRelationField.value.label), 1),
+                  !relatedFiles[selectedRelationField.value.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30, [
                     vue.createVNode(vue.unref(DragOver), {
                       accept: ".csv,.xls,.xlsx",
                       onAddFiles: _cache[12] || (_cache[12] = (files2) => {
@@ -34202,8 +34244,8 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       ]),
                       _: 1
                     })
-                  ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_24, [
-                    vue.createElementVNode("div", _hoisted_25, [
+                  ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
+                    vue.createElementVNode("div", _hoisted_32, [
                       vue.createVNode(vue.unref(Pill), null, {
                         default: vue.withCtx(() => [
                           vue.createTextVNode(vue.toDisplayString(relatedFiles[selectedRelationField.value.id].name), 1)
@@ -34217,9 +34259,9 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         onClick: _cache[13] || (_cache[13] = ($event) => relatedFiles[selectedRelationField.value.id] = null)
                       })
                     ]),
-                    relatedFileData[selectedRelationField.value.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
+                    relatedFileData[selectedRelationField.value.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, [
                       _cache[45] || (_cache[45] = vue.createElementVNode("h4", null, "Configure Relationship", -1)),
-                      vue.createElementVNode("div", _hoisted_27, [
+                      vue.createElementVNode("div", _hoisted_34, [
                         vue.createVNode(vue.unref(SelectInput), {
                           modelValue: parentKeyField[selectedRelationField.value.id],
                           "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => parentKeyField[selectedRelationField.value.id] = $event),
@@ -34260,7 +34302,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                                 }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
                               ]),
                               vue.createElementVNode("td", null, [
-                                vue.createElementVNode("div", _hoisted_28, [
+                                vue.createElementVNode("div", _hoisted_35, [
                                   vue.createTextVNode(vue.toDisplayString(initRelatedDefaultValue(selectedRelationField.value.id, schemaItem.id)) + " ", 1),
                                   (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(renderField)(getRelatedFieldWithDefaults(selectedRelationField.value.id, schemaItem)))))
                                 ])
@@ -34274,7 +34316,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
                               ]),
                               vue.createElementVNode("td", null, [
-                                vue.createElementVNode("div", _hoisted_29, [
+                                vue.createElementVNode("div", _hoisted_36, [
                                   vue.createVNode(vue.unref(Btn), {
                                     thin: "",
                                     icon: "transform",
@@ -34293,7 +34335,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       ])
                     ])) : vue.createCommentVNode("", true)
                   ])),
-                  vue.createElementVNode("div", _hoisted_30, [
+                  vue.createElementVNode("div", _hoisted_37, [
                     vue.createVNode(vue.unref(Btn), {
                       class: "ms-auto",
                       value: "Close",
@@ -34309,21 +34351,24 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             visible: showPreviewModal.value,
             "onUpdate:visible": _cache[21] || (_cache[21] = ($event) => showPreviewModal.value = $event),
             title: "Data Preview & Edit",
-            width: "1200"
+            width: "90vw"
           }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", null, [
-                vue.createVNode(vue.unref(Spreadsheet), {
+                vue.createVNode(vue.unref(_sfc_main$5), {
                   modelValue: previewData.value,
                   "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => previewData.value = $event),
+                  class: "popupPreviewSpreadsheet",
                   "column-config": spreadsheetColumns.value,
                   "allow-add-row": ""
                 }, null, 8, ["modelValue", "column-config"])
               ]),
               vue.createElementVNode("div", null, [
-                vue.createElementVNode("div", null, " Showing all " + vue.toDisplayString(previewData.value.length) + " records. You can edit values directly. ", 1),
-                vue.createElementVNode("div", null, [
+                vue.createElementVNode("p", _hoisted_38, " Showing all " + vue.toDisplayString(previewData.value.length) + " records. You can edit values directly. ", 1),
+                vue.createElementVNode("div", _hoisted_39, [
                   vue.createVNode(vue.unref(Btn), {
+                    flat: "",
+                    thin: "",
                     value: "Cancel",
                     onClick: _cache[19] || (_cache[19] = ($event) => showPreviewModal.value = false)
                   }),
@@ -34345,7 +34390,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             default: vue.withCtx(() => {
               var _a, _b, _c;
               return [
-                selectedRelatedTransformField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
+                selectedRelatedTransformField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
                   vue.createElementVNode("p", null, [
                     _cache[47] || (_cache[47] = vue.createTextVNode("Create transformations for ")),
                     vue.createElementVNode("strong", null, vue.toDisplayString(selectedRelatedTransformField.value.field.label), 1),
@@ -34508,7 +34553,7 @@ const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data
 const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "Layout",
   props: {
-    gap: { default: 1 },
+    gap: { default: 0.5 },
     h100: { type: Boolean, default: false },
     columns: { default: () => [] },
     mColumns: { default: () => [] },
@@ -34518,12 +34563,12 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "ff4aa016": gapSize.value,
-      "3683119b": gridTemplateRows.value,
-      "f6f04e4a": gridTemplateColumns.value,
-      "fa53dae8": mGapSize.value,
-      "0307a8e4": mGridTemplateRows.value,
-      "7e4910f2": mGridTemplateColumns.value
+      "3438906a": gapSize.value,
+      "32967a85": gridTemplateRows.value,
+      "4974609e": gridTemplateColumns.value,
+      "6323f514": mGapSize.value,
+      "ed3d458c": mGridTemplateRows.value,
+      "016c1648": mGridTemplateColumns.value
     }));
     const props2 = __props;
     const gridTemplateRows = vue.computed(() => props2.rows.length > 0 ? props2.rows.join(" ") : "auto");
@@ -34549,7 +34594,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-a0f4895c"]]);
+const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-7835674f"]]);
 const _hoisted_1$k = { key: 0 };
 const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
@@ -36821,7 +36866,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-857ccb8b"]]);
+const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-72033517"]]);
 const _hoisted_1$3 = { class: "flex gap-05 py-05 justify-content-end m_flex-wrap" };
 const _hoisted_2$1 = {
   key: 0,
@@ -37471,7 +37516,6 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Spreadsheet = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-81050b79"]]);
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {
@@ -38849,13 +38893,13 @@ function bindingToItem(binding, el) {
 const youtubeRegex = /youtube\.com|youtu\.be/;
 const vimeoRegex = /vimeo\.com/;
 function urlToName(url) {
-  if (!url) return "";
+  if (!url || typeof url !== "string") return "";
   const name = url.split("/").pop() || "";
   return name.replace(/\.[^/.]+$/, "");
 }
 function determineFileType(url) {
   var _a;
-  if (!url) return "unknown";
+  if (typeof url !== "string" || !url) return "unknown";
   const extension = (url.split(".").pop() || "").toLowerCase();
   const altExtension = ((_a = url.split("?")[0].split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
   if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) return "image";
@@ -40004,7 +40048,7 @@ exports.SidebarMenu = SidebarMenu;
 exports.SignaturePad = _sfc_main$B;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
-exports.Spreadsheet = Spreadsheet;
+exports.Spreadsheet = _sfc_main$5;
 exports.TabbedLayout = TabbedLayout;
 exports.TableField = TableField;
 exports.TableSchema = DataTable;