@strands.gg/accui 2.10.8 → 2.11.0

package/dist/index.es.js

@@ -92,7 +92,7 @@ const _hoisted_4$G = {
   viewBox: "0 0 20 20",
   "aria-hidden": "true"
 };
-const _hoisted_5$B = ["d"];
+const _hoisted_5$A = ["d"];
 const _hoisted_6$v = { class: "alert-text-container" };
 const _hoisted_7$s = {
   key: 0,
@@ -146,7 +146,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
                   "fill-rule": "evenodd",
                   d: iconPath.value,
                   "clip-rule": "evenodd"
-                }, null, 8, _hoisted_5$B)
+                }, null, 8, _hoisted_5$A)
               ]))
             ]),
             createElementVNode("div", _hoisted_6$v, [
@@ -197,7 +197,7 @@ const _hoisted_1$S = {
 const _hoisted_2$K = ["width", "height"];
 const _hoisted_3$H = ["d"];
 const _hoisted_4$F = ["stroke-width"];
-const _hoisted_5$A = ["stroke-width"];
+const _hoisted_5$z = ["stroke-width"];
 const _hoisted_6$u = ["width", "height"];
 const _hoisted_7$r = {
   key: 3,
@@ -266,7 +266,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: "loader-animated-path"
-            }, null, 8, _hoisted_5$A)
+            }, null, 8, _hoisted_5$z)
           ], 8, _hoisted_2$K))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -807,7 +807,7 @@ const _hoisted_4$D = {
   key: 0,
   class: "ui-card-subtitle"
 };
-const _hoisted_5$z = { class: "ui-card-content" };
+const _hoisted_5$y = { class: "ui-card-content" };
 const _hoisted_6$t = {
   key: 1,
   class: "ui-card-footer"
@@ -852,7 +852,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "actions", {}, void 0, true)
           ], true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_5$z, [
+        createElementVNode("div", _hoisted_5$y, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_6$t, [
@@ -1429,7 +1429,7 @@ const _hoisted_4$C = {
   key: 2,
   class: "input-trailing-icon"
 };
-const _hoisted_5$y = {
+const _hoisted_5$x = {
   key: 3,
   class: "input-trailing-icon"
 };
@@ -1437,18 +1437,21 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Text",
   props: {
     type: { default: "text" },
-    modelValue: {},
-    placeholder: {},
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
     min: {},
     max: {},
     step: {},
     autocomplete: {},
     spellcheck: { type: Boolean, default: true },
+    label: {},
+    helpText: {},
+    modelValue: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
+    error: { type: [Boolean, String, Error], default: false },
     size: { default: "md" }
   },
   emits: ["update:modelValue", "blur", "focus", "keydown"],
@@ -1567,14 +1570,14 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })
-        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$y, [
+        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$x, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-9bb4478d"]]);
+const UiInputText = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-94fe77ac"]]);
 const _hoisted_1$M = {
   key: 0,
   class: "input-leading-icon"
@@ -1587,19 +1590,22 @@ const _hoisted_3$D = {
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Textarea",
   props: {
-    modelValue: {},
-    placeholder: {},
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
     rows: { default: 3 },
     cols: {},
     maxlength: {},
     autocomplete: {},
     spellcheck: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
+    label: {},
+    helpText: {},
+    modelValue: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
+    error: { type: [Boolean, String, Error], default: false },
     size: { default: "md" }
   },
   emits: ["update:modelValue", "blur", "focus", "keydown"],
@@ -1681,7 +1687,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-acf98514"]]);
+const UiInputTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-2f7d46c6"]]);
 function useFloatingPosition(options) {
   const {
     trigger,
@@ -1894,7 +1900,7 @@ const _hoisted_4$B = {
   key: 0,
   class: "input-select-text"
 };
-const _hoisted_5$x = {
+const _hoisted_5$w = {
   key: 1,
   class: "input-select-placeholder"
 };
@@ -1925,18 +1931,23 @@ const _hoisted_14$l = {
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Select",
   props: {
-    modelValue: {},
     options: { default: () => [] },
-    placeholder: {},
-    disabled: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
     searchable: { type: Boolean, default: false },
     allowInsert: { type: Boolean, default: false },
     maxDropdownHeight: { default: 400 },
     noOptionsText: { default: "No options available" },
     searchPlaceholder: { default: "" },
+    label: {},
+    helpText: {},
+    modelValue: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
+    error: { type: [Boolean, String, Error], default: false },
     size: { default: "md" }
   },
   emits: ["update:modelValue", "blur", "focus"],
@@ -2088,7 +2099,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }
     };
     const isOptionSelected = (option) => {
-      if (option.value.startsWith("__insert__")) {
+      if (option.value && typeof option.value === "string" && option.value.startsWith("__insert__")) {
         return false;
       }
       return selectedValues.value.includes(option.value);
@@ -2097,7 +2108,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       if (option.disabled) return;
       if (props.multiple) {
         const newValue = [...selectedValues.value];
-        if (option.value.startsWith("__insert__")) {
+        if (option.value && typeof option.value === "string" && option.value.startsWith("__insert__")) {
           const newItemValue = option.value.replace("__insert__", "");
           if (!newValue.includes(newItemValue)) {
             newValue.push(newItemValue);
@@ -2243,7 +2254,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             "aria-controls": dropdownId.value
           }, [
             createElementVNode("div", _hoisted_3$C, [
-              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$x, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
+              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$w, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
             ]),
             createElementVNode("div", {
               class: normalizeClass(["input-select-arrow", { "input-select-arrow-open": dropdownState.value.isOpen }])
@@ -2289,7 +2300,11 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
               class: "input-dropdown-options",
               style: normalizeStyle({ maxHeight: `${_ctx.maxDropdownHeight}px` })
             }, [
-              filteredOptions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_9$n, toDisplayString(_ctx.noOptionsText), 1)) : createCommentVNode("", true),
+              filteredOptions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_9$n, [
+                renderSlot(_ctx.$slots, "zero-state", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.noOptionsText), 1)
+                ], true)
+              ])) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(filteredOptions.value, (option, index) => {
                 return openBlock(), createElementBlock("div", {
                   key: option.value,
@@ -2297,7 +2312,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                     "input-dropdown-option--selected": isOptionSelected(option),
                     "input-dropdown-option--highlighted": index === dropdownState.value.highlightedIndex,
                     "input-dropdown-option--disabled": option.disabled,
-                    "input-dropdown-option--insert": option.value.startsWith("__insert__")
+                    "input-dropdown-option--insert": option.value && typeof option.value === "string" && option.value.startsWith("__insert__")
                   }]),
                   onClick: ($event) => selectOption(option),
                   onMouseenter: ($event) => dropdownState.value.highlightedIndex = index,
@@ -2320,12 +2335,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-8591f0ad"]]);
+const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-830c63a5"]]);
 const _hoisted_1$K = { class: "input-leading-icon" };
 const _hoisted_2$E = ["src"];
 const _hoisted_3$B = ["id", "accept", "multiple", "disabled", "required"];
 const _hoisted_4$A = { class: "input-file-content" };
-const _hoisted_5$w = {
+const _hoisted_5$v = {
   key: 0,
   class: "input-file-prompt"
 };
@@ -2353,16 +2368,21 @@ const _hoisted_14$k = {
 const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "UiInput.File",
   props: {
-    modelValue: {},
     accept: {},
     multiple: { type: Boolean, default: false },
     maxFileSize: { default: 10 * 1024 * 1024 },
     dragDropText: {},
     selectedText: {},
+    label: {},
+    helpText: {},
+    modelValue: {},
+    placeholder: {},
     disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean },
     required: { type: Boolean, default: false },
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
+    error: { type: [Boolean, String, Error], default: false },
     size: { default: "md" }
   },
   emits: ["update:modelValue", "file-error", "blur", "focus"],
@@ -2561,7 +2581,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             onFocus: handleFocus
           }, null, 40, _hoisted_3$B),
           createElementVNode("div", _hoisted_4$A, [
-            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$w, [
+            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$v, [
               createElementVNode("div", _hoisted_6$r, toDisplayString(_ctx.dragDropText || "Click to select or drag and drop"), 1),
               _ctx.accept ? (openBlock(), createElementBlock("div", _hoisted_7$p, toDisplayString(_ctx.accept), 1)) : createCommentVNode("", true)
             ])) : (openBlock(), createElementBlock("div", _hoisted_8$n, [
@@ -2596,7 +2616,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-1328dc4f"]]);
+const UiInputFile = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-249075fe"]]);
 const _hoisted_1$J = { class: "tabs-wrapper" };
 const _hoisted_2$D = {
   key: 0,
@@ -2607,7 +2627,7 @@ const _hoisted_4$z = {
   key: 1,
   class: "tabs-after"
 };
-const _hoisted_5$v = ["aria-labelledby"];
+const _hoisted_5$u = ["aria-labelledby"];
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "UiTabs",
   props: {
@@ -2992,7 +3012,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           id: "tabpanel"
         }, [
           renderSlot(_ctx.$slots, "content", { activeTab: activeTab.value }, void 0, true)
-        ], 10, _hoisted_5$v)) : createCommentVNode("", true)
+        ], 10, _hoisted_5$u)) : createCommentVNode("", true)
       ], 2);
     };
   }
@@ -3073,7 +3093,7 @@ const _hoisted_4$y = {
   key: 0,
   class: "datetime-picker-value"
 };
-const _hoisted_5$u = {
+const _hoisted_5$t = {
   key: 1,
   class: "datetime-picker-placeholder"
 };
@@ -3452,26 +3472,14 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             _ctx.type === "date" ? (openBlock(), createBlock(unref(Calendar), { key: 0 })) : _ctx.type === "time" ? (openBlock(), createBlock(unref(Clock), { key: 1 })) : (openBlock(), createBlock(unref(CalendarClock), { key: 2 }))
           ]),
           createElementVNode("div", _hoisted_3$z, [
-            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$u, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
+            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$t, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
           ]),
           _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "datetime-picker-trailing-icon",
             onClick: withModifiers(clearValue, ["stop"])
           }, [
-            createVNode(StrandsUiButton, {
-              color: "danger",
-              variant: "ghost",
-              size: "sm",
-              icon: "",
-              squircle: "",
-              "aria-label": "Clear value"
-            }, {
-              icon: withCtx(() => [
-                createVNode(unref(X))
-              ]),
-              _: 1
-            })
+            createVNode(unref(X))
           ])) : (openBlock(), createElementBlock("div", _hoisted_6$q, [
             createVNode(unref(ChevronDown))
           ]))
@@ -3707,21 +3715,24 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-10c66504"]]);
+const UiDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-f688c330"]]);
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Date",
   props: {
+    min: {},
+    max: {},
+    format: { default: "iso" },
+    label: {},
+    helpText: {},
     modelValue: {},
     placeholder: {},
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
-    min: {},
-    max: {},
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
-    size: { default: "md" },
-    format: { default: "iso" }
+    error: { type: [Boolean, String, Error], default: false },
+    size: { default: "md" }
   },
   emits: ["update:modelValue", "change", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -3742,7 +3753,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         required: _ctx.required,
         min: _ctx.min,
         max: _ctx.max,
-        error: _ctx.error,
+        error: Boolean(_ctx.error),
         size: _ctx.size,
         format: _ctx.format,
         "onUpdate:modelValue": handleUpdate,
@@ -3754,16 +3765,19 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Time",
   props: {
+    is24Hour: { type: Boolean, default: true },
+    minuteStep: { default: 1 },
+    label: {},
+    helpText: {},
     modelValue: {},
     placeholder: {},
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
-    size: { default: "md" },
-    is24Hour: { type: Boolean, default: true },
-    minuteStep: { default: 1 }
+    error: { type: [Boolean, String, Error], default: false },
+    size: { default: "md" }
   },
   emits: ["update:modelValue", "change", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -3782,7 +3796,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         disabled: _ctx.disabled,
         readonly: _ctx.readonly,
         required: _ctx.required,
-        error: _ctx.error,
+        error: Boolean(_ctx.error),
         size: _ctx.size,
         is24Hour: _ctx.is24Hour,
         minuteStep: _ctx.minuteStep,
@@ -3795,19 +3809,22 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
 const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "UiInput.DateTime",
   props: {
+    min: {},
+    max: {},
+    format: { default: "iso" },
+    is24Hour: { type: Boolean, default: true },
+    minuteStep: { default: 1 },
+    label: {},
+    helpText: {},
     modelValue: {},
     placeholder: {},
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
-    min: {},
-    max: {},
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
-    size: { default: "md" },
-    format: { default: "iso" },
-    is24Hour: { type: Boolean, default: true },
-    minuteStep: { default: 1 }
+    error: { type: [Boolean, String, Error], default: false },
+    size: { default: "md" }
   },
   emits: ["update:modelValue", "change", "blur", "focus", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -3828,7 +3845,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         required: _ctx.required,
         min: _ctx.min,
         max: _ctx.max,
-        error: _ctx.error,
+        error: Boolean(_ctx.error),
         size: _ctx.size,
         format: _ctx.format,
         is24Hour: _ctx.is24Hour,
@@ -24795,26 +24812,31 @@ const _hoisted_1$G = { class: "input-richtext-toolbar" };
 const _hoisted_2$B = { class: "input-richtext-group" };
 const _hoisted_3$y = { class: "input-richtext-group" };
 const _hoisted_4$x = { class: "input-richtext-group" };
-const _hoisted_5$t = { class: "input-richtext-group" };
+const _hoisted_5$s = { class: "input-richtext-group" };
 const _hoisted_6$p = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "UiInput.RichText",
   props: {
+    minHeight: { default: "200px" },
+    maxHeight: { default: "400px" },
+    label: {},
+    helpText: {},
     modelValue: {},
     placeholder: { default: "Start typing..." },
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
+    required: { type: Boolean },
+    fullWidth: { type: Boolean },
     inputId: {},
-    error: { type: Boolean, default: false },
-    minHeight: { default: "200px" },
-    maxHeight: { default: "400px" }
+    error: { type: [Boolean, String, Error], default: false },
+    size: {}
   },
   emits: ["update:modelValue", "blur", "focus"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "bbccab12": _ctx.minHeight,
-      "740e9409": _ctx.maxHeight
+      "653355e8": _ctx.minHeight,
+      "c14982c4": _ctx.maxHeight
     }));
     const props = __props;
     const emit = __emit;
@@ -25040,7 +25062,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_5$t, [
+          createElementVNode("div", _hoisted_5$s, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bulletList") ? "primary" : "secondary",
               size: "sm",
@@ -25159,7 +25181,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-1031412d"]]);
+const UiInputRichText = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-18a35d5d"]]);
 const _hoisted_1$F = { class: "pincode-inputs" };
 const _hoisted_2$A = {
   key: 0,
@@ -25170,22 +25192,27 @@ const _hoisted_4$w = {
   key: 1,
   class: "pincode-divider"
 };
-const _hoisted_5$s = {
+const _hoisted_5$r = {
   key: 1,
   class: "pincode-icon pincode-icon-trailing"
 };
 const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "UiInput.Pincode",
   props: {
-    modelValue: {},
     maxLength: { default: 6 },
     variant: { default: "numeric" },
     divider: {},
+    label: {},
+    helpText: {},
+    modelValue: {},
+    placeholder: {},
     disabled: { type: Boolean },
     readonly: { type: Boolean },
-    error: { type: [Boolean, String] },
-    size: { default: "md" },
-    inputId: {}
+    required: { type: Boolean },
+    fullWidth: { type: Boolean },
+    inputId: {},
+    error: { type: [Boolean, String, Error] },
+    size: { default: "md" }
   },
   emits: ["update:modelValue", "blur", "focus", "complete"],
   setup(__props, { emit: __emit }) {
@@ -25385,7 +25412,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               }, dividerProps.value, { class: "pincode-custom-divider" }), null, 16)) : shouldShowDivider(index) ? (openBlock(), createElementBlock("span", _hoisted_4$w, toDisplayString(dividerCharacter.value), 1)) : createCommentVNode("", true)
             ], 64);
           }), 128)),
-          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$s, [
+          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ])
@@ -25393,18 +25420,17 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiInputPincode = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-25372cfe"]]);
-const _hoisted_1$E = { class: "input-container" };
-const _hoisted_2$z = ["for"];
-const _hoisted_3$w = {
+const UiInputPincode = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-481de9a3"]]);
+const _hoisted_1$E = ["for"];
+const _hoisted_2$z = {
   key: 0,
   class: "input-required"
 };
-const _hoisted_4$v = {
+const _hoisted_3$w = {
   key: 10,
   class: "input-error-text"
 };
-const _hoisted_5$r = {
+const _hoisted_4$v = {
   key: 11,
   class: "input-help-text"
 };
@@ -25412,16 +25438,19 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "UiInput",
   props: {
     type: {},
-    modelValue: {},
-    placeholder: {},
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
-    required: { type: Boolean },
     min: {},
     max: {},
     step: {},
     autocomplete: {},
     spellcheck: { type: Boolean },
+    label: {},
+    helpText: {},
+    modelValue: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    fullWidth: { type: Boolean },
     inputId: {},
     error: { type: [Boolean, String, Error] },
     size: {},
@@ -25447,9 +25476,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     maxHeight: {},
     maxLength: {},
     variant: {},
-    divider: {},
-    label: {},
-    helpText: {}
+    divider: {}
   },
   emits: ["update:modelValue", "blur", "focus", "keydown", "file-error", "complete"],
   setup(__props, { emit: __emit }) {
@@ -25480,19 +25507,24 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       emit("complete", value);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$E, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["input-container", {
+          "input-container--full-width": props.fullWidth,
+          [`input-container--${props.size || "md"}`]: true
+        }])
+      }, [
         props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: inputId.value,
           class: "input-label"
         }, [
           createTextVNode(toDisplayString(props.label) + " ", 1),
-          props.required ? (openBlock(), createElementBlock("span", _hoisted_3$w, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$z)) : createCommentVNode("", true),
+          props.required ? (openBlock(), createElementBlock("span", _hoisted_2$z, "*")) : createCommentVNode("", true)
+        ], 8, _hoisted_1$E)) : createCommentVNode("", true),
         isTextInput.value ? (openBlock(), createBlock(UiInputText, {
           key: 1,
           "model-value": _ctx.modelValue,
-          type: _ctx.type || "text",
+          type: _ctx.type,
           placeholder: _ctx.placeholder,
           disabled: _ctx.disabled,
           readonly: _ctx.readonly,
@@ -25711,12 +25743,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             key: "1"
           } : void 0
         ]), 1032, ["model-value", "max-length", "variant", "divider", "disabled", "readonly", "input-id", "error", "size"])) : createCommentVNode("", true),
-        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$v, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$r, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
-      ]);
+        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_3$w, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_4$v, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
+      ], 2);
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-83ae8958"]]);
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-7c0f388a"]]);
 const _hoisted_1$D = ["disabled", "aria-disabled"];
 const _hoisted_2$y = ["href", "target", "rel", "aria-disabled"];
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
@@ -28059,12 +28091,12 @@ const _hoisted_20$9 = {
 };
 const _hoisted_21$9 = ["cx", "fill"];
 const _hoisted_22$7 = { class: "ui-color-picker-inputs" };
-const _hoisted_23$6 = {
+const _hoisted_23$5 = {
   key: 0,
   class: "ui-color-picker-input-row"
 };
-const _hoisted_24$6 = { class: "ui-color-picker-input-group" };
-const _hoisted_25$6 = { class: "ui-color-picker-button-wrapper" };
+const _hoisted_24$5 = { class: "ui-color-picker-input-group" };
+const _hoisted_25$5 = { class: "ui-color-picker-button-wrapper" };
 const _hoisted_26$5 = {
   key: 1,
   class: "ui-color-picker-input-row"
@@ -29918,8 +29950,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           }, null, 4)
         ], 544)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_22$7, [
-          currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$6, [
-            createElementVNode("div", _hoisted_24$6, [
+          currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$5, [
+            createElementVNode("div", _hoisted_24$5, [
               _cache[24] || (_cache[24] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hexInput.value = $event),
@@ -29933,7 +29965,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 [vModelText, hexInput.value]
               ])
             ]),
-            createElementVNode("div", _hoisted_25$6, [
+            createElementVNode("div", _hoisted_25$5, [
               createVNode(unref(CompoundUiButton), {
                 color: "secondary",
                 size: "xs",
@@ -30646,23 +30678,20 @@ const _hoisted_11$h = {
   key: 0,
   class: "ui-table-filter-input"
 };
-const _hoisted_12$h = ["onUpdate:modelValue", "placeholder"];
-const _hoisted_13$g = ["onUpdate:modelValue"];
-const _hoisted_14$g = { value: "" };
-const _hoisted_15$d = ["value"];
-const _hoisted_16$d = { class: "ui-table-body" };
-const _hoisted_17$c = { class: "ui-table-group-content" };
-const _hoisted_18$b = { class: "ui-table-group-name" };
-const _hoisted_19$a = { class: "ui-table-group-count" };
-const _hoisted_20$8 = ["onClick"];
-const _hoisted_21$8 = ["onClick"];
-const _hoisted_22$6 = { class: "ui-table-subrow-content" };
-const _hoisted_23$5 = { class: "ui-table-subrow-default" };
-const _hoisted_24$5 = {
+const _hoisted_12$h = { class: "ui-table-body" };
+const _hoisted_13$g = { class: "ui-table-group-content" };
+const _hoisted_14$g = { class: "ui-table-group-name" };
+const _hoisted_15$d = { class: "ui-table-group-count" };
+const _hoisted_16$d = ["onClick"];
+const _hoisted_17$c = ["onClick"];
+const _hoisted_18$b = { key: 1 };
+const _hoisted_19$a = { class: "ui-table-subrow-content" };
+const _hoisted_20$8 = { class: "ui-table-subrow-default" };
+const _hoisted_21$8 = {
   key: 0,
   class: "ui-table-empty"
 };
-const _hoisted_25$5 = {
+const _hoisted_22$6 = {
   key: 1,
   class: "ui-table-footer"
 };
@@ -30686,12 +30715,28 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     stickyHeader: { type: Boolean, default: false },
     stickyColumns: { default: () => [] }
   },
-  emits: ["rowClick", "rowSelect", "sort", "columnReorder"],
-  setup(__props, { emit: __emit }) {
+  emits: ["rowClick", "rowSelect", "sort", "columnReorder", "cellUpdate"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
     const tableRef = ref(null);
+    const internalData = ref([...props.data]);
+    const internalColumns = ref([...props.columns]);
+    watch(() => props.data, (newData) => {
+      internalData.value = [...newData];
+    }, { deep: true });
+    watch(() => props.columns, (newColumns) => {
+      internalColumns.value = [...newColumns];
+    }, { deep: true });
+    const restoreData = () => {
+      internalData.value = [...props.data];
+      modifiedCells.value.clear();
+      cellValues.value.clear();
+    };
+    const restoreColumns = () => {
+      internalColumns.value = [...props.columns];
+    };
     const sortKey = ref("");
     const sortOrder = ref("asc");
     const filters = ref({});
@@ -30699,6 +30744,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const groupBy = ref("");
     const expandedRows = ref(/* @__PURE__ */ new Set());
     const selectedRows = ref(/* @__PURE__ */ new Set());
+    const modifiedCells = ref(/* @__PURE__ */ new Set());
+    const cellValues = ref(/* @__PURE__ */ new Map());
     const draggedColumnIndex = ref(null);
     const dragOverColumnIndex = ref(null);
     const isDragging = ref(false);
@@ -30748,12 +30795,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       };
     };
     const processedRows = computed(() => {
-      let rows = [...props.data];
+      let rows = [...internalData.value];
       if (props.filterable && Object.keys(filters.value).length > 0) {
         rows = rows.filter((row) => {
           return Object.entries(filters.value).every(([key, filterValue]) => {
             if (!filterValue || filterValue === "") return true;
-            const column = props.columns.find((col) => col.key === key);
+            const column = internalColumns.value.find((col) => col.key === key);
             const cellValue = getCellValue(row, key, column);
             const cellStr = String(cellValue || "").toLowerCase();
             if (Array.isArray(filterValue)) {
@@ -30763,8 +30810,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           });
         });
       }
-      if (sortKey.value && (props.sortable || props.columns.find((col) => col.key === sortKey.value)?.sortable)) {
-        const sortColumn = props.columns.find((col) => col.key === sortKey.value);
+      if (sortKey.value && (props.sortable || internalColumns.value.find((col) => col.key === sortKey.value)?.sortable)) {
+        const sortColumn = internalColumns.value.find((col) => col.key === sortKey.value);
         rows.sort((a, b) => {
           const aVal = getCellValue(a, sortKey.value, sortColumn);
           const bVal = getCellValue(b, sortKey.value, sortColumn);
@@ -30828,13 +30875,18 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       return column.key === "actions" && hasSlot;
     };
     const getFilterOptions = (column) => {
-      if (column.filterOptions) return column.filterOptions;
+      if (column.filterOptions) {
+        if (Array.isArray(column.filterOptions) && column.filterOptions.length > 0 && typeof column.filterOptions[0] === "object" && column.filterOptions[0] !== null && "label" in column.filterOptions[0]) {
+          return column.filterOptions;
+        }
+        return column.filterOptions.map((value) => ({ label: String(value), value: String(value) }));
+      }
       const uniqueValues = /* @__PURE__ */ new Set();
-      props.data.forEach((row) => {
+      internalData.value.forEach((row) => {
         const value = getCellValue(row, column.key, column);
         if (value != null) uniqueValues.add(String(value));
       });
-      return Array.from(uniqueValues).sort();
+      return Array.from(uniqueValues).sort().map((value) => ({ label: value, value }));
     };
     const toggleFilter = (columnKey) => {
       showFilters.value[columnKey] = !showFilters.value[columnKey];
@@ -30861,6 +30913,28 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       emit("rowClick", row, index);
     };
+    const handleCellUpdate = (row, columnKey, newValue, rowIndex) => {
+      const actualIndex = internalData.value.findIndex((r) => r === row);
+      if (actualIndex === -1) return;
+      const cellKey = `${actualIndex}-${columnKey}`;
+      if (!cellValues.value.has(cellKey)) {
+        const originalValue2 = getCellValue(row, columnKey);
+        cellValues.value.set(cellKey, originalValue2);
+      }
+      const keys2 = columnKey.split(".");
+      let target = internalData.value[actualIndex];
+      for (let i = 0; i < keys2.length - 1; i++) {
+        target = target[keys2[i]];
+      }
+      target[keys2[keys2.length - 1]] = newValue;
+      const originalValue = cellValues.value.get(cellKey);
+      if (newValue !== originalValue) {
+        modifiedCells.value.add(cellKey);
+      } else {
+        modifiedCells.value.delete(cellKey);
+      }
+      emit("cellUpdate", row, columnKey, newValue, actualIndex);
+    };
     const handleDragStart = (event, columnIndex) => {
       if (!props.reorderable) return;
       draggedColumnIndex.value = columnIndex;
@@ -30904,9 +30978,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       if (!props.reorderable || draggedColumnIndex.value === null) return;
       const fromIndex = draggedColumnIndex.value;
       if (fromIndex !== targetIndex) {
-        const newColumns = [...props.columns];
+        const newColumns = [...internalColumns.value];
         const draggedColumn = newColumns.splice(fromIndex, 1)[0];
         newColumns.splice(targetIndex, 0, draggedColumn);
+        internalColumns.value = newColumns;
         emit("columnReorder", fromIndex, targetIndex, newColumns);
       }
       cleanupDragState();
@@ -30923,6 +30998,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       dragStartX.value = 0;
       currentDragX.value = 0;
     };
+    __expose({
+      internalData,
+      internalColumns,
+      restoreData,
+      restoreColumns,
+      modifiedCells,
+      cellValues
+    });
     const getGroupIndex = (rowIndex) => {
       let groupCount = 0;
       for (let i = 0; i <= rowIndex; i++) {
@@ -30949,8 +31032,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ]),
           style: normalizeStyle(tableStyle.value)
         }, [
-          _ctx.columns.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$r, [
-            (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.columns, (column, index) => {
+          internalColumns.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$r, [
+            (openBlock(true), createElementBlock(Fragment$1, null, renderList(internalColumns.value, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `header-${index}`,
                 class: normalizeClass([
@@ -30966,10 +31049,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                     "ui-table-cell--drag-target": isDragging.value && draggedColumnIndex.value !== index
                   }
                 ]),
-                onDragover: _cache[2] || (_cache[2] = withModifiers(() => {
+                onDragover: _cache[1] || (_cache[1] = withModifiers(() => {
                 }, ["prevent"])),
                 onDragenter: ($event) => handleDragEnter(index),
-                onDragleave: _cache[3] || (_cache[3] = ($event) => handleDragLeave()),
+                onDragleave: _cache[2] || (_cache[2] = ($event) => handleDragLeave()),
                 onDrop: ($event) => handleDrop($event, index),
                 style: normalizeStyle(getHeaderColumnTransform(index))
               }, [
@@ -31019,37 +31102,20 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 showFilters.value[column.key] ? (openBlock(), createElementBlock("div", _hoisted_11$h, [
-                  (column.filterType || "text") === "text" ? withDirectives((openBlock(), createElementBlock("input", {
-                    key: 0,
+                  createVNode(StrandsUiInput, {
+                    modelValue: filters.value[column.key],
                     "onUpdate:modelValue": ($event) => filters.value[column.key] = $event,
+                    type: column.filterType,
+                    options: column.filterType === "select" ? getFilterOptions(column) : void 0,
                     placeholder: `Filter ${column.label}...`,
-                    class: "ui-table-filter-field",
                     onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                     }, ["stop"]))
-                  }, null, 8, _hoisted_12$h)), [
-                    [vModelText, filters.value[column.key]]
-                  ]) : column.filterType === "select" ? withDirectives((openBlock(), createElementBlock("select", {
-                    key: 1,
-                    "onUpdate:modelValue": ($event) => filters.value[column.key] = $event,
-                    class: "ui-table-filter-field",
-                    onClick: _cache[1] || (_cache[1] = withModifiers(() => {
-                    }, ["stop"]))
-                  }, [
-                    createElementVNode("option", _hoisted_14$g, "All " + toDisplayString(column.label), 1),
-                    (openBlock(true), createElementBlock(Fragment$1, null, renderList(getFilterOptions(column), (option) => {
-                      return openBlock(), createElementBlock("option", {
-                        key: option,
-                        value: option
-                      }, toDisplayString(option), 9, _hoisted_15$d);
-                    }), 128))
-                  ], 8, _hoisted_13$g)), [
-                    [vModelSelect, filters.value[column.key]]
-                  ]) : createCommentVNode("", true)
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "type", "options", "placeholder"])
                 ])) : createCommentVNode("", true)
               ], 46, _hoisted_3$q);
             }), 128))
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_16$d, [
+          createElementVNode("div", _hoisted_12$h, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(processedRows.value, (row, rowIndex) => {
               return openBlock(), createElementBlock(Fragment$1, {
                 key: `row-${rowIndex}`
@@ -31059,10 +31125,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   class: "ui-table-group-header",
                   style: normalizeStyle({ "--group-index": getGroupIndex(rowIndex) })
                 }, [
-                  createElementVNode("div", _hoisted_17$c, [
+                  createElementVNode("div", _hoisted_13$g, [
                     createVNode(unref(Users), { size: 16 }),
-                    createElementVNode("span", _hoisted_18$b, toDisplayString(row._groupName), 1),
-                    createElementVNode("span", _hoisted_19$a, "(" + toDisplayString(row._groupCount) + " items)", 1)
+                    createElementVNode("span", _hoisted_14$g, toDisplayString(row._groupName), 1),
+                    createElementVNode("span", _hoisted_15$d, "(" + toDisplayString(row._groupCount) + " items)", 1)
                   ])
                 ], 4)) : (openBlock(), createElementBlock("div", {
                   key: 1,
@@ -31075,7 +31141,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   ]),
                   onClick: ($event) => handleRowClick(row, rowIndex)
                 }, [
-                  (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.columns, (column, colIndex) => {
+                  (openBlock(true), createElementBlock(Fragment$1, null, renderList(internalColumns.value, (column, colIndex) => {
                     return openBlock(), createElementBlock("div", {
                       key: `cell-${rowIndex}-${colIndex}`,
                       class: normalizeClass([
@@ -31083,6 +31149,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                         "ui-table-body-cell",
                         {
                           [`ui-table-cell--align-${column.align || "left"}`]: column.align,
+                          "ui-table-cell--editable": column.editable,
+                          "ui-table-cell--modified": modifiedCells.value.has(`${internalData.value.findIndex((r) => r === row)}-${column.key}`),
                           "ui-table-cell--sticky": column.sticky || stickyColumns.value.includes(column.key) || isActionsColumn(column),
                           "ui-table-cell--actions": isActionsColumn(column),
                           "ui-table-cell--dragging": draggedColumnIndex.value === colIndex,
@@ -31106,22 +31174,59 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                         rowIndex,
                         colIndex
                       }, () => [
-                        createTextVNode(toDisplayString(getCellValue(row, column.key, column)), 1)
+                        column.editable ? (openBlock(), createBlock(StrandsUiInput, {
+                          key: 0,
+                          modelValue: getCellValue(row, column.key, column),
+                          type: column.filterType || "text",
+                          size: "sm",
+                          options: column.filterType === "select" ? getFilterOptions(column) : void 0,
+                          "full-width": "",
+                          "onUpdate:modelValue": (newValue) => handleCellUpdate(row, column.key, newValue),
+                          onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                          }, ["stop"])),
+                          onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {
+                          }, ["stop"]))
+                        }, createSlots({ _: 2 }, [
+                          _ctx.$slots["input-leading-icon"] ? {
+                            name: "leading-icon",
+                            fn: withCtx(() => [
+                              renderSlot(_ctx.$slots, "input-leading-icon", {
+                                row,
+                                column,
+                                rowIndex,
+                                colIndex
+                              }, void 0, true)
+                            ]),
+                            key: "0"
+                          } : void 0,
+                          _ctx.$slots["input-trailing-icon"] ? {
+                            name: "trailing-icon",
+                            fn: withCtx(() => [
+                              renderSlot(_ctx.$slots, "input-trailing-icon", {
+                                row,
+                                column,
+                                rowIndex,
+                                colIndex
+                              }, void 0, true)
+                            ]),
+                            key: "1"
+                          } : void 0
+                        ]), 1032, ["modelValue", "type", "options", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("span", _hoisted_18$b, toDisplayString(getCellValue(row, column.key, column)), 1))
                       ], true)
-                    ], 14, _hoisted_21$8);
+                    ], 14, _hoisted_17$c);
                   }), 128))
-                ], 10, _hoisted_20$8)),
+                ], 10, _hoisted_16$d)),
                 expandedRows.value.has(rowIndex) ? (openBlock(), createElementBlock("div", {
                   key: 2,
                   class: "ui-table-subrow",
                   style: normalizeStyle(subrowStyle.value)
                 }, [
-                  createElementVNode("div", _hoisted_22$6, [
+                  createElementVNode("div", _hoisted_19$a, [
                     renderSlot(_ctx.$slots, "expanded-row", {
                       row,
                       rowIndex
                     }, () => [
-                      createElementVNode("div", _hoisted_23$5, [
+                      createElementVNode("div", _hoisted_20$8, [
                         createElementVNode("pre", null, toDisplayString(JSON.stringify(row, null, 2)), 1)
                       ])
                     ], true)
@@ -31129,16 +31234,16 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 ], 4)) : createCommentVNode("", true)
               ], 64);
             }), 128)),
-            processedRows.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_24$5, [
+            processedRows.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_21$8, [
               renderSlot(_ctx.$slots, "empty", {}, () => [
-                _cache[4] || (_cache[4] = createElementVNode("div", { class: "ui-table-empty-content" }, [
+                _cache[5] || (_cache[5] = createElementVNode("div", { class: "ui-table-empty-content" }, [
                   createElementVNode("span", null, "No data available")
                 ], -1))
               ], true)
             ])) : createCommentVNode("", true)
           ]),
-          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_25$5, [
-            (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.columns, (column, index) => {
+          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$6, [
+            (openBlock(true), createElementBlock(Fragment$1, null, renderList(internalColumns.value, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `footer-${index}`,
                 class: normalizeClass([
@@ -31164,7 +31269,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiTable = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-7910ac1d"]]);
+const UiTable = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-f4818507"]]);
 const _hoisted_1$u = { class: "ui-hero-content" };
 const _hoisted_2$q = {
   key: 0,