@onereach/ui-components 26.5.0 → 26.5.1-beta.5897.0

package/dist/esm/{OrDataGrid-CL9IRSow.mjs → OrDataGrid-CKuJloxA.mjs}

@@ -1,23 +1,23 @@
-import { O as se } from "./OrCheckbox-WPBzlvaV.mjs";
-import { O as ue } from "./OrPagination-BXzDa-Su.mjs";
-import { O as me } from "./OrSearch-CRFuNmg2.mjs";
-import { O as fe } from "./OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
-import { defineComponent as M, ref as S, computed as n, openBlock as r, createElementBlock as p, normalizeClass as f, renderSlot as c, createCommentVNode as y, resolveComponent as g, normalizeStyle as A, createBlock as O, watch as le, createElementVNode as ge, withModifiers as ne, createVNode as N, mergeProps as he, withCtx as b, onMounted as pe, createSlots as _, normalizeProps as ve, guardReactiveProps as ye, Fragment as Q, renderList as Y, createTextVNode as x, toDisplayString as ee } from "vue";
-import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-import { O as ke } from "./OrDatePicker-D-Do0tSf.mjs";
-import { O as be } from "./OrDateTimePicker-myqJkQxy.mjs";
+import { O as ie } from "./OrCheckbox-WPBzlvaV.mjs";
+import { O as fe } from "./OrPagination-BXzDa-Su.mjs";
+import { O as ge } from "./OrSearch-CRFuNmg2.mjs";
+import { O as he } from "./OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
+import { defineComponent as I, ref as G, computed as n, openBlock as r, createElementBlock as y, normalizeClass as m, renderSlot as c, createCommentVNode as k, resolveComponent as g, normalizeStyle as L, createBlock as $, watch as de, onUnmounted as pe, createElementVNode as ye, withModifiers as se, createVNode as z, mergeProps as ve, withCtx as O, reactive as le, onMounted as ke, createSlots as te, normalizeProps as be, guardReactiveProps as Oe, Fragment as Y, renderList as Z, createTextVNode as ae, toDisplayString as oe } from "vue";
+import { useElementSize as $e, useDebounceFn as we } from "@vueuse/core";
+import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { O as De } from "./OrDatePicker-D-Do0tSf.mjs";
+import { O as Se } from "./OrDateTimePicker-myqJkQxy.mjs";
 import "./OrDateTimePicker.vue_vue_type_script_lang-xnGNoSUB.mjs";
 import "@onereach/ui-components-common/types";
-import { O as Oe } from "./OrInput-nExtCSw8.mjs";
-import { O as $e } from "./OrRating-CAwz23JA.mjs";
-import { O as we } from "./OrSelect-BeL73iXu.mjs";
-import { O as De } from "./OrSwitch-BtoXDsZx.mjs";
-import { O as Se } from "./OrTagInput-B2U22gXE.mjs";
-import { O as Te } from "./OrTimePicker-QPUb8olp.mjs";
-import { O as Ce } from "./OrIcon-k8cyvh-D.mjs";
-import { useElementSize as Ge } from "@vueuse/core";
-import { O as Ve } from "./OrNotification-BkjmRseb.mjs";
-const Me = [
+import { O as Te } from "./OrInput-nExtCSw8.mjs";
+import { O as Ce } from "./OrRating-CAwz23JA.mjs";
+import { O as Ge } from "./OrSelect-BeL73iXu.mjs";
+import { O as Ve } from "./OrSwitch-BtoXDsZx.mjs";
+import { O as Me } from "./OrTagInput-B2U22gXE.mjs";
+import { O as Re } from "./OrTimePicker-QPUb8olp.mjs";
+import { O as Ie } from "./OrIcon-k8cyvh-D.mjs";
+import { O as We } from "./OrNotification-BkjmRseb.mjs";
+const Ee = [
   // Layout
   "layout-row",
   // Interactivity
@@ -31,20 +31,20 @@ const Me = [
   // Theme
   "theme-border-disabled border-t-1",
   "dark:theme-border-disabled-dark"
-], Re = [
+], Fe = [
   // Typography
   "typography-body-2-semibold"
-], Ie = M({
+], He = I({
   name: "OrDataGridFooter",
   expose: [
     "root"
   ],
   setup() {
-    const e = S(), t = n(() => [
+    const e = G(), t = n(() => [
       "or-data-grid-footer-v3",
-      ...Me
+      ...Ee
     ]), s = n(() => [
-      ...Re
+      ...Fe
     ]);
     return {
       root: e,
@@ -52,47 +52,47 @@ const Me = [
       statusStyles: s
     };
   }
-}), He = {
+}), ze = {
   key: 1,
-  class: /* @__PURE__ */ f(["grow"])
+  class: /* @__PURE__ */ m(["grow"])
 };
-function Ee(e, t, s, k, h, d) {
-  return r(), p("div", {
+function Pe(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
-    e.$slots.status ? (r(), p("div", {
+    e.$slots.status ? (r(), y("div", {
       key: 0,
-      class: f(e.statusStyles)
+      class: m(e.statusStyles)
     }, [
       c(e.$slots, "status")
-    ], 2)) : y("", !0),
+    ], 2)) : k("", !0),
     c(e.$slots, "actions"),
-    e.$slots.paging ? (r(), p("div", He)) : y("", !0),
+    e.$slots.paging ? (r(), y("div", ze)) : k("", !0),
     c(e.$slots, "paging")
   ], 2);
 }
-const We = /* @__PURE__ */ R(Ie, [["render", Ee]]), ze = [
+const Ne = /* @__PURE__ */ W(He, [["render", Pe]]), Ue = [
   // Layout
   "layout-row items-start gap-md",
   // Interactivity
   "interactivity-default",
   // Box
   "h-3xl"
-], Fe = [
+], je = [
   // Typography
   "typography-headline-2"
-], Ne = M({
+], Ae = I({
   name: "OrDataGridHeader",
   expose: [
     "root"
   ],
   setup() {
-    const e = S(), t = n(() => [
+    const e = G(), t = n(() => [
       "or-data-grid-header-v3",
-      ...ze
+      ...Ue
     ]), s = n(() => [
-      ...Fe
+      ...je
     ]);
     return {
       root: e,
@@ -100,29 +100,29 @@ const We = /* @__PURE__ */ R(Ie, [["render", Ee]]), ze = [
       titleStyles: s
     };
   }
-}), Pe = {
+}), Le = {
   key: 1,
-  class: /* @__PURE__ */ f(["grow"])
+  class: /* @__PURE__ */ m(["grow"])
 };
-function Ue(e, t, s, k, h, d) {
-  return r(), p("div", {
+function qe(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
-    e.$slots.title ? (r(), p("div", {
+    e.$slots.title ? (r(), y("div", {
       key: 0,
-      class: f(e.titleStyles)
+      class: m(e.titleStyles)
     }, [
       c(e.$slots, "title")
-    ], 2)) : y("", !0),
-    e.$slots.searching || e.$slots.extraActions ? (r(), p("div", Pe)) : y("", !0),
+    ], 2)) : k("", !0),
+    e.$slots.searching || e.$slots.extraActions ? (r(), y("div", Le)) : k("", !0),
     c(e.$slots, "searching"),
-    e.$slots.extraActions ? c(e.$slots, "extraActions", { key: 2 }) : y("", !0)
+    e.$slots.extraActions ? c(e.$slots, "extraActions", { key: 2 }) : k("", !0)
   ], 2);
 }
-const je = /* @__PURE__ */ R(Ne, [["render", Ue]]);
-var $ = /* @__PURE__ */ ((e) => (e.Standard = "standard", e.Comfortable = "comfortable", e.Compact = "compact", e.Dynamic = "dynamic", e))($ || {});
-const K = "52px", Z = "42px", Le = [
+const Be = /* @__PURE__ */ W(Ae, [["render", qe]]);
+var w = /* @__PURE__ */ ((e) => (e.Standard = "standard", e.Comfortable = "comfortable", e.Compact = "compact", e.Dynamic = "dynamic", e))(w || {});
+const K = "52px", _ = "42px", Ke = [
   // Layout
   "layout-row items-center",
   // Spacing
@@ -158,23 +158,23 @@ const K = "52px", Z = "42px", Le = [
   // Border (conditional override for last row/column)
   "group-last:border-b-0",
   "last:border-r-0"
-], Ae = [
+], Xe = [
   // interactivity
   "interactivity-select",
   // Typography
   "truncate"
-], qe = M({
+], Je = I({
   name: "OrDataGridTableContentCell",
   components: {
-    OrCheckbox: se,
-    OrDatePicker: ke,
-    OrDateTimePicker: be,
-    OrInput: Oe,
-    OrRating: $e,
-    OrSelect: we,
-    OrSwitch: De,
-    OrTagInput: Se,
-    OrTimePicker: Te
+    OrCheckbox: ie,
+    OrDatePicker: De,
+    OrDateTimePicker: Se,
+    OrInput: Te,
+    OrRating: Ce,
+    OrSelect: Ge,
+    OrSwitch: Ve,
+    OrTagInput: Me,
+    OrTimePicker: Re
   },
   model: {
     prop: "modelValue",
@@ -196,14 +196,14 @@ const K = "52px", Z = "42px", Le = [
     },
     variant: {
       type: String,
-      default: $.Standard
+      default: w.Standard
     },
     override: {
       type: Boolean,
       default: !1
     },
     stickyOffset: {
-      type: Number,
+      type: [Number, String],
       default: 0
     }
   },
@@ -214,164 +214,164 @@ const K = "52px", Z = "42px", Le = [
     "root"
   ],
   setup(e, t) {
-    const s = S(), k = n(() => {
-      var u, D, I, G, F, z, o, i, v;
+    const s = G(), b = n(() => {
+      var d, S, E, M, H, F, o, l, v;
       return [
         "or-data-grid-table-content-cell-v3",
-        ...Le,
-        ...(u = e.column) != null && u.stickiness ? ["overflow-hidden", `sticky-${e.column.stickiness}`] : [],
-        ...(D = e.features) != null && D.resizing && ((I = e.column) != null && I.name) && ((G = e.column) == null ? void 0 : G.resizing) !== !1 ? ["resizable"] : [],
-        ...((F = e.column) == null ? void 0 : F.stickiness) === "start" ? ["border-r-1"] : [],
-        ...((z = e.column) == null ? void 0 : z.stickiness) === "end" ? ["border-l-1"] : [],
-        ...(o = e.features) != null && o.resizing && ((i = e.column) != null && i.name) && ((v = e.column) == null ? void 0 : v.resizing) !== !1 ? ["border-r-1"] : []
+        ...Ke,
+        ...(d = e.column) != null && d.stickiness ? ["overflow-hidden", `sticky-${e.column.stickiness}`] : [],
+        ...(S = e.features) != null && S.resizing && ((E = e.column) != null && E.name) && ((M = e.column) == null ? void 0 : M.resizing) !== !1 ? ["resizable"] : [],
+        ...((H = e.column) == null ? void 0 : H.stickiness) === "start" ? ["border-r-1"] : [],
+        ...((F = e.column) == null ? void 0 : F.stickiness) === "end" ? ["border-l-1"] : [],
+        ...(o = e.features) != null && o.resizing && ((l = e.column) != null && l.name) && ((v = e.column) == null ? void 0 : v.resizing) !== !1 ? ["border-r-1"] : []
       ];
     }), h = n(() => {
-      var D;
-      const u = {
-        justifyContent: ((D = e.column) == null ? void 0 : D.alignment) || (e.column ? void 0 : "center")
+      var S;
+      const d = {
+        justifyContent: ((S = e.column) == null ? void 0 : S.alignment) || (e.column ? void 0 : "center")
       };
       if (e.column)
         switch (e.column.stickiness) {
           case "start":
-            Object.assign(u, {
+            Object.assign(d, {
               position: "sticky",
-              insetInlineStart: `${e.stickyOffset}px`,
+              insetInlineStart: e.stickyOffset,
               zIndex: "2"
             });
             break;
           case "end":
-            Object.assign(u, {
+            Object.assign(d, {
               position: "sticky",
-              insetInlineEnd: `${e.stickyOffset}px`,
+              insetInlineEnd: e.stickyOffset,
               zIndex: "2"
             });
             break;
         }
-      return u;
-    }), d = n(() => {
-      var G, F, z, o, i;
-      const u = ((G = e.column) == null ? void 0 : G.wrapping) ?? (e.variant === $.Dynamic && !((F = e.column) != null && F.control)), D = ((o = (z = e.column) == null ? void 0 : z.control) == null ? void 0 : o.type) === "tags", I = (i = e.column) == null ? void 0 : i.fitContent;
+      return d;
+    }), f = n(() => {
+      var M, H, F, o, l;
+      const d = ((M = e.column) == null ? void 0 : M.wrapping) ?? (e.variant === w.Dynamic && !((H = e.column) != null && H.control)), S = ((o = (F = e.column) == null ? void 0 : F.control) == null ? void 0 : o.type) === "tags", E = (l = e.column) == null ? void 0 : l.fitContent;
       return [
         "layout-row items-center w-full min-w-0",
-        ...D ? ["overflow-hidden"] : [],
-        ...Ae.filter((v) => v !== "truncate"),
-        ...u ? ["whitespace-pre-wrap break-words"] : I ? ["overflow-hidden"] : ["truncate"]
+        ...S ? ["overflow-hidden"] : [],
+        ...Xe.filter((v) => v !== "truncate"),
+        ...d ? ["whitespace-pre-wrap break-words"] : E ? ["overflow-hidden"] : ["truncate"]
       ];
     }), T = n(() => {
-      var u, D;
+      var d, S;
       return {
-        minWidth: e.column && e.column.minWidth || (((u = e.column) == null ? void 0 : u.name) === "_check" ? Z : K),
+        minWidth: e.column && e.column.minWidth || (((d = e.column) == null ? void 0 : d.name) === "_check" ? _ : K),
         maxWidth: e.column && e.column.maxWidth,
-        justifyContent: ((D = e.column) == null ? void 0 : D.alignment) || (e.column ? void 0 : "center")
+        justifyContent: ((S = e.column) == null ? void 0 : S.alignment) || (e.column ? void 0 : "center")
       };
-    }), W = n({
+    }), V = n({
       get: () => e.modelValue,
-      set: (u) => {
-        t.emit("input", u);
+      set: (d) => {
+        t.emit("input", d);
       }
     }), C = n(() => {
-      var u;
-      return (u = e.column) == null ? void 0 : u.control;
+      var d;
+      return (d = e.column) == null ? void 0 : d.control;
     });
     return {
       root: s,
-      rootStyles: k,
+      rootStyles: b,
       rootInlineStyles: h,
-      contentStyles: d,
+      contentStyles: f,
       contentInlineStyles: T,
-      model: W,
+      model: V,
       control: C,
       DATA_GRID_DEFAULT_MIN_WIDTH: K
     };
   }
 });
-function Be(e, t, s, k, h, d) {
-  const T = g("OrInput"), W = g("OrRating"), C = g("OrSelect"), u = g("OrCheckbox"), D = g("OrSwitch"), I = g("OrDatePicker"), G = g("OrTimePicker"), F = g("OrDateTimePicker"), z = g("OrTagInput");
-  return r(), p("div", {
+function Qe(e, t, s, b, h, f) {
+  const T = g("OrInput"), V = g("OrRating"), C = g("OrSelect"), d = g("OrCheckbox"), S = g("OrSwitch"), E = g("OrDatePicker"), M = g("OrTimePicker"), H = g("OrDateTimePicker"), F = g("OrTagInput");
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles),
-    style: A(e.rootInlineStyles)
+    class: m(e.rootStyles),
+    style: L(e.rootInlineStyles)
   }, [
-    e.override ? c(e.$slots, "default", { key: 0 }) : e.control ? (r(), p("div", {
+    e.override ? c(e.$slots, "default", { key: 0 }) : e.control ? (r(), y("div", {
       key: 1,
-      class: f(e.contentStyles),
-      style: A(e.contentInlineStyles)
+      class: m(e.contentStyles),
+      style: L(e.contentInlineStyles)
     }, [
-      e.control.type === "text" ? (r(), O(T, {
+      e.control.type === "text" ? (r(), $(T, {
         key: 0,
         modelValue: e.model,
         "onUpdate:modelValue": t[0] || (t[0] = (o) => e.model = o),
         type: "text",
         variant: "embedded"
-      }, null, 8, ["modelValue"])) : y("", !0),
-      e.control.type === "number" ? (r(), O(T, {
+      }, null, 8, ["modelValue"])) : k("", !0),
+      e.control.type === "number" ? (r(), $(T, {
         key: 1,
         modelValue: e.model,
         "onUpdate:modelValue": t[1] || (t[1] = (o) => e.model = o),
         type: "number",
         variant: "embedded"
-      }, null, 8, ["modelValue"])) : y("", !0),
-      e.control.type === "rating" ? (r(), O(W, {
+      }, null, 8, ["modelValue"])) : k("", !0),
+      e.control.type === "rating" ? (r(), $(V, {
         key: 2,
         modelValue: e.model,
         "onUpdate:modelValue": t[2] || (t[2] = (o) => e.model = o)
-      }, null, 8, ["modelValue"])) : y("", !0),
-      e.control.type === "select" ? (r(), O(C, {
+      }, null, 8, ["modelValue"])) : k("", !0),
+      e.control.type === "select" ? (r(), $(C, {
         key: 3,
         modelValue: e.model,
         "onUpdate:modelValue": t[3] || (t[3] = (o) => e.model = o),
         options: e.control.options,
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "options", "anchor"])) : y("", !0),
-      e.control.type === "checkbox" ? (r(), O(u, {
+      }, null, 8, ["modelValue", "options", "anchor"])) : k("", !0),
+      e.control.type === "checkbox" ? (r(), $(d, {
         key: 4,
         modelValue: e.model,
         "onUpdate:modelValue": t[4] || (t[4] = (o) => e.model = o)
-      }, null, 8, ["modelValue"])) : y("", !0),
-      e.control.type === "switch" ? (r(), O(D, {
+      }, null, 8, ["modelValue"])) : k("", !0),
+      e.control.type === "switch" ? (r(), $(S, {
         key: 5,
         modelValue: e.model,
         "onUpdate:modelValue": t[5] || (t[5] = (o) => e.model = o)
-      }, null, 8, ["modelValue"])) : y("", !0),
-      e.control.type === "date" ? (r(), O(I, {
+      }, null, 8, ["modelValue"])) : k("", !0),
+      e.control.type === "date" ? (r(), $(E, {
         key: 6,
         modelValue: e.model,
         "onUpdate:modelValue": t[6] || (t[6] = (o) => e.model = o),
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "anchor"])) : y("", !0),
-      e.control.type === "time" ? (r(), O(G, {
+      }, null, 8, ["modelValue", "anchor"])) : k("", !0),
+      e.control.type === "time" ? (r(), $(M, {
         key: 7,
         modelValue: e.model,
         "onUpdate:modelValue": t[7] || (t[7] = (o) => e.model = o),
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "anchor"])) : y("", !0),
-      e.control.type === "datetime" ? (r(), O(F, {
+      }, null, 8, ["modelValue", "anchor"])) : k("", !0),
+      e.control.type === "datetime" ? (r(), $(H, {
         key: 8,
         modelValue: e.model,
         "onUpdate:modelValue": t[8] || (t[8] = (o) => e.model = o),
         variant: "embedded",
         anchor: e.root
-      }, null, 8, ["modelValue", "anchor"])) : y("", !0),
-      e.control.type === "tags" ? (r(), O(z, {
+      }, null, 8, ["modelValue", "anchor"])) : k("", !0),
+      e.control.type === "tags" ? (r(), $(F, {
         key: 9,
         modelValue: e.model,
         "onUpdate:modelValue": t[9] || (t[9] = (o) => e.model = o),
         variant: "embedded",
-        class: f(["grow min-w-0"])
-      }, null, 8, ["modelValue"])) : y("", !0)
-    ], 6)) : (r(), p("div", {
+        class: m(["grow min-w-0"])
+      }, null, 8, ["modelValue"])) : k("", !0)
+    ], 6)) : (r(), y("div", {
       key: 2,
-      class: f(e.contentStyles),
-      style: A(e.contentInlineStyles)
+      class: m(e.contentStyles),
+      style: L(e.contentInlineStyles)
     }, [
       c(e.$slots, "default")
     ], 6))
   ], 6);
 }
-const Ke = /* @__PURE__ */ R(qe, [["render", Be]]), Xe = [
+const Ye = /* @__PURE__ */ W(Je, [["render", Qe]]), Ze = [
   // Layout
   "grid grid-cols-[subgrid] col-span-full",
   // Stacking context
@@ -392,24 +392,24 @@ const Ke = /* @__PURE__ */ R(qe, [["render", Be]]), Xe = [
   // Theme (selected + hover / children)
   "children:hover:selected:theme-background-surface-3",
   "dark:children:hover:selected:theme-background-surface-3-dark"
-], Je = {
-  [$.Standard]: [
+], _e = {
+  [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [$.Comfortable]: [
+  [w.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [$.Compact]: [
+  [w.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [$.Dynamic]: [
+  [w.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, Qe = M({
+}, xe = I({
   name: "OrDataGridTableContentRow",
   props: {
     variant: {
@@ -429,10 +429,10 @@ const Ke = /* @__PURE__ */ R(qe, [["render", Be]]), Xe = [
     "root"
   ],
   setup(e) {
-    const t = S(), s = n(() => [
+    const t = G(), s = n(() => [
       "or-data-grid-table-content-row-v3",
-      ...Xe,
-      ...Je[e.variant],
+      ...Ze,
+      ..._e[e.variant],
       ...e.interactive ? ["cursor-pointer"] : []
     ]);
     return {
@@ -440,28 +440,28 @@ const Ke = /* @__PURE__ */ R(qe, [["render", Be]]), Xe = [
       rootStyles: s
     };
   }
-}), Ye = ["selected"];
-function Ze(e, t, s, k, h, d) {
-  return r(), p("div", {
+}), et = ["selected"];
+function tt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles),
+    class: m(e.rootStyles),
     selected: e.selected
   }, [
     c(e.$slots, "default")
-  ], 10, Ye);
+  ], 10, et);
 }
-const _e = /* @__PURE__ */ R(Qe, [["render", Ze]]), xe = [
+const at = /* @__PURE__ */ W(xe, [["render", tt]]), ot = [
   // Layout
   "contents"
-], et = M({
+], rt = I({
   name: "OrDataGridTableContent",
   expose: [
     "root"
   ],
   setup() {
-    const e = S(), t = n(() => [
+    const e = G(), t = n(() => [
       "or-data-grid-table-content-v3",
-      ...xe
+      ...ot
     ]);
     return {
       root: e,
@@ -469,15 +469,15 @@ const _e = /* @__PURE__ */ R(Qe, [["render", Ze]]), xe = [
     };
   }
 });
-function tt(e, t, s, k, h, d) {
-  return r(), p("div", {
+function nt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const at = /* @__PURE__ */ R(et, [["render", tt]]), ot = [
+const st = /* @__PURE__ */ W(rt, [["render", nt]]), lt = [
   // Layout
   "layout-row",
   // Spacing
@@ -487,15 +487,15 @@ const at = /* @__PURE__ */ R(et, [["render", tt]]), ot = [
   // Theme
   "theme-border-transparent border-1",
   "dark:theme-border-transparent-dark"
-], rt = M({
+], it = I({
   name: "OrDataGridTableFooterCell",
   expose: [
     "root"
   ],
   setup() {
-    const e = S(), t = n(() => [
+    const e = G(), t = n(() => [
       "or-data-grid-table-footer-cell-v3",
-      ...ot
+      ...lt
     ]);
     return {
       root: e,
@@ -503,15 +503,15 @@ const at = /* @__PURE__ */ R(et, [["render", tt]]), ot = [
     };
   }
 });
-function nt(e, t, s, k, h, d) {
-  return r(), p("div", {
+function dt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const st = /* @__PURE__ */ R(rt, [["render", nt]]), lt = [
+const ct = /* @__PURE__ */ W(it, [["render", dt]]), ut = [
   // Layout
   "grid grid-cols-1",
   // Typography
@@ -524,24 +524,24 @@ const st = /* @__PURE__ */ R(rt, [["render", nt]]), lt = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-default",
   "dark:children:theme-background-default-dark"
-], it = {
-  [$.Standard]: [
+], mt = {
+  [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [$.Comfortable]: [
+  [w.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [$.Compact]: [
+  [w.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [$.Dynamic]: [
+  [w.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, dt = M({
+}, ft = I({
   name: "OrDataGridTableFooterRow",
   props: {
     variant: {
@@ -553,10 +553,10 @@ const st = /* @__PURE__ */ R(rt, [["render", nt]]), lt = [
     "root"
   ],
   setup(e) {
-    const t = S(), s = n(() => [
+    const t = G(), s = n(() => [
       "or-data-grid-table-footer-row-v3",
-      ...lt,
-      ...it[e.variant]
+      ...ut,
+      ...mt[e.variant]
     ]);
     return {
       root: t,
@@ -564,26 +564,26 @@ const st = /* @__PURE__ */ R(rt, [["render", nt]]), lt = [
     };
   }
 });
-function ct(e, t, s, k, h, d) {
-  return r(), p("div", {
+function gt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const ut = /* @__PURE__ */ R(dt, [["render", ct]]), mt = [
+const ht = /* @__PURE__ */ W(ft, [["render", gt]]), pt = [
   // Layout
   "contents"
-], ft = M({
+], yt = I({
   name: "OrDataGridTableFooter",
   expose: [
     "root"
   ],
   setup() {
-    const e = S(), t = n(() => [
+    const e = G(), t = n(() => [
       "or-data-grid-table-footer-v3",
-      ...mt
+      ...pt
     ]);
     return {
       root: e,
@@ -591,15 +591,15 @@ const ut = /* @__PURE__ */ R(dt, [["render", ct]]), mt = [
     };
   }
 });
-function gt(e, t, s, k, h, d) {
-  return r(), p("div", {
+function vt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const ht = /* @__PURE__ */ R(ft, [["render", gt]]), pt = [
+const kt = /* @__PURE__ */ W(yt, [["render", vt]]), bt = [
   // Layout
   "layout-row items-center",
   // Spacing
@@ -623,7 +623,7 @@ const ht = /* @__PURE__ */ R(ft, [["render", gt]]), pt = [
   "relative",
   // Border (conditional override for last column)
   "last:border-r-0"
-], vt = [
+], Ot = [
   // Position
   "absolute top-0 bottom-0 end-0 z-50",
   // Box
@@ -634,10 +634,10 @@ const ht = /* @__PURE__ */ R(ft, [["render", gt]]), pt = [
   "dark:hover:theme-background-primary-dark",
   "active:theme-background-primary",
   "dark:active:theme-background-primary-dark"
-], yt = M({
+], $t = I({
   name: "OrDataGridTableHeaderCell",
   components: {
-    OrIcon: Ce
+    OrIcon: Ie
   },
   model: {
     prop: "modelValue",
@@ -657,7 +657,7 @@ const ht = /* @__PURE__ */ R(ft, [["render", gt]]), pt = [
       default: void 0
     },
     stickyOffset: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
     override: {
@@ -675,183 +675,198 @@ const ht = /* @__PURE__ */ R(ft, [["render", gt]]), pt = [
     "root"
   ],
   setup(e, t) {
-    const s = S(), k = n(() => {
-      var o, i, v;
-      return !!((o = e.features) != null && o.sorting) && !!((i = e.column) != null && i.name) && ((v = e.column) == null ? void 0 : v.sorting) !== !1;
+    const s = G(), b = n(() => {
+      var o, l, v;
+      return !!((o = e.features) != null && o.sorting) && !!((l = e.column) != null && l.name) && ((v = e.column) == null ? void 0 : v.sorting) !== !1;
     }), h = n(() => {
-      var o, i, v;
-      return !!((o = e.features) != null && o.resizing) && !!((i = e.column) != null && i.name) && ((v = e.column) == null ? void 0 : v.resizing) !== !1;
-    }), d = n(() => {
-      var o, i, v;
+      var o, l, v;
+      return !!((o = e.features) != null && o.resizing) && !!((l = e.column) != null && l.name) && ((v = e.column) == null ? void 0 : v.resizing) !== !1;
+    }), f = n(() => {
+      var o, l, v;
       return [
         "or-data-grid-table-header-cell-v3",
         "relative",
-        ...pt,
+        ...bt,
         ...(o = e.column) != null && o.stickiness ? ["overflow-hidden", `sticky-${e.column.stickiness}`] : [],
         ...h.value ? ["resizable"] : [],
-        ...k.value ? ["interactivity-click"] : [],
-        ...((i = e.column) == null ? void 0 : i.stickiness) === "start" ? ["border-r-1"] : [],
+        ...b.value ? ["interactivity-click"] : [],
+        ...((l = e.column) == null ? void 0 : l.stickiness) === "start" ? ["border-r-1"] : [],
         ...((v = e.column) == null ? void 0 : v.stickiness) === "end" ? ["border-l-1"] : [],
         ...h.value ? ["border-r-1"] : []
       ];
     }), T = n(() => [
       "or-data-grid-table-header-cell-resize-handle-v3",
-      ...vt
-    ]), W = n(() => {
-      var o, i, v;
+      ...Ot
+    ]), V = n(() => {
+      var o, l, v;
       return {
-        minWidth: ((o = e.column) == null ? void 0 : o.minWidth) || (((i = e.column) == null ? void 0 : i.name) === "_check" ? Z : K),
+        minWidth: ((o = e.column) == null ? void 0 : o.minWidth) || (((l = e.column) == null ? void 0 : l.name) === "_check" ? _ : K),
         maxWidth: (v = e.column) == null ? void 0 : v.maxWidth,
         overflow: "hidden"
       };
     }), C = n(() => {
-      var i;
+      var l;
       const o = {
-        justifyContent: ((i = e.column) == null ? void 0 : i.alignment) || (e.column ? void 0 : "center")
+        justifyContent: ((l = e.column) == null ? void 0 : l.alignment) || (e.column ? void 0 : "center")
       };
       if (e.column)
         switch (e.column.stickiness) {
           case "start":
             Object.assign(o, {
               position: "sticky",
-              insetInlineStart: `${e.stickyOffset}px`,
+              insetInlineStart: e.stickyOffset,
               zIndex: "11"
             });
             break;
           case "end":
             Object.assign(o, {
               position: "sticky",
-              insetInlineEnd: `${e.stickyOffset}px`,
+              insetInlineEnd: e.stickyOffset,
               zIndex: "11"
             });
             break;
         }
       return o;
-    }), u = n({
+    }), d = n({
       get: () => {
-        var o, i;
-        if (k.value)
-          return ((o = e.modelValue) == null ? void 0 : o.column) === ((i = e.column) == null ? void 0 : i.name) ? e.modelValue : void 0;
+        var o, l;
+        if (b.value)
+          return ((o = e.modelValue) == null ? void 0 : o.column) === ((l = e.column) == null ? void 0 : l.name) ? e.modelValue : void 0;
       },
       set: (o) => {
         t.emit("update:modelValue", o);
       }
-    }), D = n(() => {
+    }), S = n(() => {
       var o;
       return [
         "layout-row items-center w-full min-w-0",
         ...((o = e.column) == null ? void 0 : o.alignment) === "end" ? ["flex-row-reverse"] : []
       ];
-    }), I = n(() => {
-      var o, i;
+    }), E = n(() => {
+      var o, l;
       return {
-        justifyContent: ((o = e.column) == null ? void 0 : o.alignment) === "end" || (i = e.column) == null ? void 0 : i.alignment
+        justifyContent: ((o = e.column) == null ? void 0 : o.alignment) === "end" || (l = e.column) == null ? void 0 : l.alignment
       };
     });
-    function G() {
+    function M() {
       var o;
-      if (k.value)
-        if (u.value)
-          u.value = {
-            ...u.value,
-            direction: u.value.direction === "asc" ? "desc" : "asc"
+      if (b.value)
+        if (d.value)
+          d.value = {
+            ...d.value,
+            direction: d.value.direction === "asc" ? "desc" : "asc"
           };
         else {
           if (!e.column)
             throw new Error("[OrDataGridTableHeaderCell]: `column` must be specified.");
-          u.value = {
+          d.value = {
             column: ((o = e.column) == null ? void 0 : o.name) || "_check",
             direction: "asc"
           };
         }
     }
-    function F(o) {
-      var q;
-      const i = o.pageX, v = ((q = s.value) == null ? void 0 : q.offsetWidth) || 0, V = (X) => {
-        var B, l, m;
-        const J = X.pageX - i;
-        let U = Math.max(0, v + J);
-        const L = ((B = e.column) == null ? void 0 : B.minWidth) || (((l = e.column) == null ? void 0 : l.name) === "_check" ? Z : K);
-        if (L && (L.endsWith("px") || !isNaN(Number(L)))) {
-          const j = parseInt(L, 10);
-          U = Math.max(U, j);
-        }
-        if ((m = e.column) != null && m.maxWidth && (e.column.maxWidth.endsWith("px") || !isNaN(Number(e.column.maxWidth)))) {
-          const j = parseInt(e.column.maxWidth, 10);
-          U = Math.min(U, j);
-        }
-        t.emit("update:column-width", U);
-      }, H = () => {
-        document.removeEventListener("mousemove", V), document.removeEventListener("mouseup", H);
+    function H(o) {
+      var B;
+      const l = o.pageX, v = ((B = s.value) == null ? void 0 : B.offsetWidth) || 0;
+      let R = null;
+      const P = (X) => {
+        R === null && (R = requestAnimationFrame(() => {
+          var i, u, A;
+          const J = X.pageX - l;
+          let U = Math.max(0, v + J);
+          const j = ((i = e.column) == null ? void 0 : i.minWidth) || (((u = e.column) == null ? void 0 : u.name) === "_check" ? _ : K);
+          if (j && (j.endsWith("px") || !isNaN(Number(j)))) {
+            const Q = parseInt(j, 10);
+            U = Math.max(U, Q);
+          }
+          if ((A = e.column) != null && A.maxWidth && (e.column.maxWidth.endsWith("px") || !isNaN(Number(e.column.maxWidth)))) {
+            const Q = parseInt(e.column.maxWidth, 10);
+            U = Math.min(U, Q);
+          }
+          t.emit("update:column-width", U), R = null;
+        }));
+      }, q = () => {
+        R !== null && (cancelAnimationFrame(R), R = null), document.removeEventListener("mousemove", P), document.removeEventListener("mouseup", q);
       };
-      document.addEventListener("mousemove", V), document.addEventListener("mouseup", H);
+      document.addEventListener("mousemove", P), document.addEventListener("mouseup", q);
     }
-    const { width: z } = Ge(s, void 0, { box: "border-box" });
-    return le([
+    const { width: F } = $e(s, void 0, { box: "border-box" });
+    return de([
       s,
-      z,
+      F,
       () => {
         var o;
         return (o = e.column) == null ? void 0 : o.stickiness;
+      },
+      () => {
+        var o;
+        return (o = e.column) == null ? void 0 : o.name;
       }
     ], ([
       o,
-      i
+      l
     ], [
+      ,
+      ,
+      ,
       v
     ]) => {
-      v && v !== o && t.emit("remove:scrollOffset", v), t.emit("update:scrollOffset", o, i, e.column);
+      var R;
+      v && v !== ((R = e.column) == null ? void 0 : R.name) && t.emit("remove:scrollOffset", v), t.emit("update:scrollOffset", o, l, e.column);
+    }), pe(() => {
+      var o;
+      (o = e.column) != null && o.name && t.emit("remove:scrollOffset", e.column.name);
     }), {
       root: s,
-      rootStyles: d,
+      rootStyles: f,
       rootInlineStyles: C,
-      headerContentStyles: D,
-      headerContentInlineStyles: I,
-      wrapInlineStyle: W,
+      headerContentStyles: S,
+      headerContentInlineStyles: E,
+      wrapInlineStyle: V,
       resizeHandleStyles: T,
-      isSortable: k,
+      isSortable: b,
       isResizable: h,
-      model: u,
-      toggleSorting: G,
-      onResizeStart: F,
+      model: d,
+      toggleSorting: M,
+      onResizeStart: H,
       DATA_GRID_DEFAULT_MIN_WIDTH: K
     };
   }
 });
-function kt(e, t, s, k, h, d) {
+function wt(e, t, s, b, h, f) {
   const T = g("OrIcon");
-  return r(), p("div", {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles),
-    style: A(e.rootInlineStyles),
-    onClick: t[2] || (t[2] = (W) => e.toggleSorting())
+    class: m(e.rootStyles),
+    style: L(e.rootInlineStyles),
+    onClick: t[2] || (t[2] = (V) => e.toggleSorting())
   }, [
-    e.override ? c(e.$slots, "default", { key: 0 }) : (r(), p("div", {
+    e.override ? c(e.$slots, "default", { key: 0 }) : (r(), y("div", {
       key: 1,
-      class: f(e.headerContentStyles),
-      style: A(e.headerContentInlineStyles)
+      class: m(e.headerContentStyles),
+      style: L(e.headerContentInlineStyles)
     }, [
-      ge("div", {
-        class: f(["truncate"]),
-        style: A(e.wrapInlineStyle)
+      ye("div", {
+        class: m(["truncate"]),
+        style: L(e.wrapInlineStyle)
       }, [
         c(e.$slots, "default")
       ], 4),
-      e.model ? (r(), O(T, {
+      e.model ? (r(), $(T, {
         key: 0,
         icon: e.model.direction === "asc" ? "arrow_upward" : "arrow_downward"
-      }, null, 8, ["icon"])) : y("", !0)
+      }, null, 8, ["icon"])) : k("", !0)
     ], 6)),
-    e.isResizable ? (r(), p("div", {
+    e.isResizable ? (r(), y("div", {
       key: 2,
-      class: f(e.resizeHandleStyles),
-      onMousedown: t[0] || (t[0] = ne((...W) => e.onResizeStart && e.onResizeStart(...W), ["stop", "prevent"])),
-      onClick: t[1] || (t[1] = ne(() => {
+      class: m(e.resizeHandleStyles),
+      onMousedown: t[0] || (t[0] = se((...V) => e.onResizeStart && e.onResizeStart(...V), ["stop", "prevent"])),
+      onClick: t[1] || (t[1] = se(() => {
       }, ["stop"]))
-    }, null, 34)) : y("", !0)
+    }, null, 34)) : k("", !0)
   ], 6);
 }
-const bt = /* @__PURE__ */ R(yt, [["render", kt]]), Ot = [
+const Dt = /* @__PURE__ */ W($t, [["render", wt]]), St = [
   // Position
   "sticky top-0 z-[10]",
   // Layout
@@ -863,24 +878,24 @@ const bt = /* @__PURE__ */ R(yt, [["render", kt]]), Ot = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-surface-variant-1",
   "dark:children:theme-background-surface-variant-1-dark"
-], $t = {
-  [$.Standard]: [
+], Tt = {
+  [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [$.Comfortable]: [
+  [w.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [$.Compact]: [
+  [w.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [$.Dynamic]: [
+  [w.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, wt = M({
+}, Ct = I({
   name: "OrDataGridTableHeaderRow",
   props: {
     variant: {
@@ -892,10 +907,10 @@ const bt = /* @__PURE__ */ R(yt, [["render", kt]]), Ot = [
     "root"
   ],
   setup(e) {
-    const t = S(), s = n(() => [
+    const t = G(), s = n(() => [
       "or-data-grid-table-header-row-v3",
-      ...Ot,
-      ...$t[e.variant]
+      ...St,
+      ...Tt[e.variant]
     ]);
     return {
       root: t,
@@ -903,26 +918,26 @@ const bt = /* @__PURE__ */ R(yt, [["render", kt]]), Ot = [
     };
   }
 });
-function Dt(e, t, s, k, h, d) {
-  return r(), p("div", {
+function Gt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const St = /* @__PURE__ */ R(wt, [["render", Dt]]), Tt = [
+const Vt = /* @__PURE__ */ W(Ct, [["render", Gt]]), Mt = [
   // Layout
   "contents"
-], Ct = M({
+], Rt = I({
   name: "OrDataGridTableHeader",
   expose: [
     "root"
   ],
   setup() {
-    const e = S(), t = n(() => [
+    const e = G(), t = n(() => [
       "or-data-grid-table-header-v3",
-      ...Tt
+      ...Mt
     ]);
     return {
       root: e,
@@ -930,15 +945,15 @@ const St = /* @__PURE__ */ R(wt, [["render", Dt]]), Tt = [
     };
   }
 });
-function Gt(e, t, s, k, h, d) {
-  return r(), p("div", {
+function It(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const Vt = /* @__PURE__ */ R(Ct, [["render", Gt]]), Mt = [
+const Wt = /* @__PURE__ */ W(Rt, [["render", It]]), Et = [
   // Layout
   "layout-row justify-center items-center",
   // Spacing
@@ -952,24 +967,24 @@ const Vt = /* @__PURE__ */ R(Ct, [["render", Gt]]), Mt = [
   "dark:theme-foreground-default-dark",
   "theme-background-default",
   "dark:theme-background-default-dark"
-], Rt = {
-  [$.Standard]: [
+], Ft = {
+  [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [$.Comfortable]: [
+  [w.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [$.Compact]: [
+  [w.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [$.Dynamic]: [
+  [w.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, It = M({
+}, Ht = I({
   name: "OrDataGridTablePlaceholder",
   props: {
     variant: {
@@ -981,10 +996,10 @@ const Vt = /* @__PURE__ */ R(Ct, [["render", Gt]]), Mt = [
     "root"
   ],
   setup(e) {
-    const t = S(), s = n(() => [
+    const t = G(), s = n(() => [
       "or-data-grid-table-placeholder-v3",
-      ...Mt,
-      ...Rt[e.variant]
+      ...Et,
+      ...Ft[e.variant]
     ]);
     return {
       root: t,
@@ -992,15 +1007,15 @@ const Vt = /* @__PURE__ */ R(Ct, [["render", Gt]]), Mt = [
     };
   }
 });
-function Ht(e, t, s, k, h, d) {
-  return r(), p("div", {
+function zt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const Et = /* @__PURE__ */ R(It, [["render", Ht]]), Wt = [
+const Pt = /* @__PURE__ */ W(Ht, [["render", zt]]), Nt = [
   // Layout
   "grid content-start",
   "w-full min-w-0 min-h-0",
@@ -1008,13 +1023,17 @@ const Et = /* @__PURE__ */ R(It, [["render", Ht]]), Wt = [
   "overflow-auto",
   // Interactivity
   "interactivity-default"
-], zt = M({
+], Ut = I({
   name: "OrDataGridTable",
   props: {
     columns: {
       type: Array,
       required: !0
     },
+    columnWidths: {
+      type: Object,
+      default: () => ({})
+    },
     features: {
       type: Object,
       required: !0
@@ -1024,50 +1043,51 @@ const Et = /* @__PURE__ */ R(It, [["render", Ht]]), Wt = [
     "root"
   ],
   setup(e) {
-    const t = S(), s = n(() => [
+    const t = G(), s = n(() => [
       "or-data-grid-table-v3",
-      ...Wt
-    ]), k = n(() => {
-      const h = e.columns.map((d) => {
-        if (d.width && (d.width.includes("minmax") || d.width.includes("calc")))
-          return d.width;
-        const T = d.width ?? "1fr", W = d.minWidth || (d.width ? K : d.fitContent || d.stickiness ? "max-content" : "120px"), C = d.maxWidth || (d.width ? T === "max-content" ? "max-content" : T : d.fitContent || d.minWidth || d.stickiness ? "max-content" : "1fr");
-        return d.fitContent ? "max-content" : T.endsWith("px") ? T : `minmax(${W}, ${C})`;
+      ...Nt
+    ]), b = n(() => {
+      const h = e.columns.map((f) => {
+        const T = e.columnWidths[f.name] || f.width;
+        if (T && (T.includes("minmax") || T.includes("calc")))
+          return T;
+        const V = T ?? "1fr", C = f.minWidth || (T ? K : f.fitContent || f.stickiness ? "max-content" : "120px"), d = f.maxWidth || (T ? V === "max-content" ? "max-content" : V : f.fitContent || f.minWidth || f.stickiness ? "max-content" : "1fr");
+        return f.fitContent ? "max-content" : V.endsWith("px") ? V : `minmax(${C}, ${d})`;
       });
-      return e.features.selecting ? { gridTemplateColumns: `${Z} ${h.join(" ")}` } : { gridTemplateColumns: h.join(" ") };
+      return e.features.selecting ? { gridTemplateColumns: `${_} ${h.join(" ")}` } : { gridTemplateColumns: h.join(" ") };
     });
     return {
       root: t,
       rootStyles: s,
-      rootInlineStyles: k
+      rootInlineStyles: b
     };
   }
 });
-function Ft(e, t, s, k, h, d) {
-  return r(), p("div", {
+function jt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles),
-    style: A(e.rootInlineStyles)
+    class: m(e.rootStyles),
+    style: L(e.rootInlineStyles)
   }, [
     c(e.$slots, "default")
   ], 6);
 }
-const Nt = /* @__PURE__ */ R(zt, [["render", Ft]]), Pt = [
+const At = /* @__PURE__ */ W(Ut, [["render", jt]]), Lt = [
   // Layout
   "layout-row",
   // Box
   "h-2xl",
   // Spacing
   "gap-xl"
-], Ut = M({
+], qt = I({
   name: "OrDataGridToolbar",
   expose: [
     "root"
   ],
   setup() {
-    const e = S(), t = n(() => [
+    const e = G(), t = n(() => [
       "or-data-grid-toolbar-v3",
-      ...Pt
+      ...Lt
     ]);
     return {
       root: e,
@@ -1075,39 +1095,39 @@ const Nt = /* @__PURE__ */ R(zt, [["render", Ft]]), Pt = [
     };
   }
 });
-function jt(e, t, s, k, h, d) {
-  return r(), p("div", {
+function Bt(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const Lt = /* @__PURE__ */ R(Ut, [["render", jt]]), At = [
+const Kt = /* @__PURE__ */ W(qt, [["render", Bt]]), Xt = [
   // Position
   "grid sticky z-10",
   // Layout
   "col-span-full"
-], qt = {
-  [$.Standard]: [
+], Jt = {
+  [w.Standard]: [
     // Position
     "top-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [$.Comfortable]: [
+  [w.Comfortable]: [
     // Position
     "top-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [$.Compact]: [
+  [w.Compact]: [
     // Position
     "top-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [$.Dynamic]: [
+  [w.Dynamic]: [
     // Position
     "top-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, Bt = M({
+}, Qt = I({
   components: {
-    OrNotification: Ve
+    OrNotification: We
   },
   props: {
     notification: {
@@ -1126,29 +1146,29 @@ const Lt = /* @__PURE__ */ R(Ut, [["render", jt]]), At = [
     return {
       rootStyles: n(() => [
         "or-data-grid-notification-v3",
-        ...At,
-        ...qt[e.variant]
+        ...Xt,
+        ...Jt[e.variant]
       ])
     };
   }
 });
-function Kt(e, t, s, k, h, d) {
+function Yt(e, t, s, b, h, f) {
   const T = g("OrNotification");
-  return r(), p("div", {
-    class: f(e.rootStyles)
+  return r(), y("div", {
+    class: m(e.rootStyles)
   }, [
-    N(T, he(e.notification, {
+    z(T, ve(e.notification, {
       class: "rounded-0 shadow-none",
-      onClose: t[0] || (t[0] = (W) => e.$emit("close-notification"))
+      onClose: t[0] || (t[0] = (V) => e.$emit("close-notification"))
     }), {
-      default: b(() => [
-        e.$slots.notification ? c(e.$slots, "notification", { key: 0 }) : y("", !0)
+      default: O(() => [
+        e.$slots.notification ? c(e.$slots, "notification", { key: 0 }) : k("", !0)
       ]),
       _: 3
     }, 16)
   ], 2);
 }
-const Xt = /* @__PURE__ */ R(Bt, [["render", Kt]]), Jt = [
+const Zt = /* @__PURE__ */ W(Qt, [["render", Yt]]), _t = [
   // Layout
   "grid col-span-full grid-cols-[subgrid]",
   // Typography
@@ -1161,24 +1181,24 @@ const Xt = /* @__PURE__ */ R(Bt, [["render", Kt]]), Jt = [
   "dark:children:theme-foreground-default-dark",
   "children:theme-background-default",
   "dark:children:theme-background-default-dark"
-], Qt = {
-  [$.Standard]: [
+], xt = {
+  [w.Standard]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ],
-  [$.Comfortable]: [
+  [w.Comfortable]: [
     // Box
     "min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]"
   ],
-  [$.Compact]: [
+  [w.Compact]: [
     // Box
     "min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]"
   ],
-  [$.Dynamic]: [
+  [w.Dynamic]: [
     // Box
     "min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]"
   ]
-}, Yt = M({
+}, ea = I({
   name: "OrDataGridTableExtraRow",
   props: {
     variant: {
@@ -1190,10 +1210,10 @@ const Xt = /* @__PURE__ */ R(Bt, [["render", Kt]]), Jt = [
     "root"
   ],
   setup(e) {
-    const t = S(), s = n(() => [
+    const t = G(), s = n(() => [
       "or-data-grid-table-extra-row-v3",
-      ...Jt,
-      ...Qt[e.variant]
+      ..._t,
+      ...xt[e.variant]
     ]);
     return {
       root: t,
@@ -1201,40 +1221,40 @@ const Xt = /* @__PURE__ */ R(Bt, [["render", Kt]]), Jt = [
     };
   }
 });
-function Zt(e, t, s, k, h, d) {
-  return r(), p("div", {
+function ta(e, t, s, b, h, f) {
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
+const aa = /* @__PURE__ */ W(ea, [["render", ta]]), oa = [
   // Layout
   "layout-column min-h-0"
-], ea = M({
+], ra = I({
   name: "OrDataGrid",
   components: {
-    OrCheckbox: se,
-    OrDataGridFooter: We,
-    OrDataGridHeader: je,
-    OrDataGridTable: Nt,
-    OrDataGridTableContent: at,
-    OrDataGridTableContentCell: Ke,
-    OrDataGridTableContentRow: _e,
-    OrDataGridTableFooter: ht,
-    OrDataGridTableFooterCell: st,
-    OrDataGridTableFooterRow: ut,
-    OrDataGridTableExtraRow: _t,
-    OrDataGridTableHeader: Vt,
-    OrDataGridTableHeaderCell: bt,
-    OrDataGridTableHeaderRow: St,
-    OrDataGridTablePlaceholder: Et,
-    OrDataGridToolbar: Lt,
-    OrDataGridNotification: Xt,
-    OrPagination: ue,
-    OrSearch: me,
-    OrSkeletonText: fe
+    OrCheckbox: ie,
+    OrDataGridFooter: Ne,
+    OrDataGridHeader: Be,
+    OrDataGridTable: At,
+    OrDataGridTableContent: st,
+    OrDataGridTableContentCell: Ye,
+    OrDataGridTableContentRow: at,
+    OrDataGridTableFooter: kt,
+    OrDataGridTableFooterCell: ct,
+    OrDataGridTableFooterRow: ht,
+    OrDataGridTableExtraRow: aa,
+    OrDataGridTableHeader: Wt,
+    OrDataGridTableHeaderCell: Dt,
+    OrDataGridTableHeaderRow: Vt,
+    OrDataGridTablePlaceholder: Pt,
+    OrDataGridToolbar: Kt,
+    OrDataGridNotification: Zt,
+    OrPagination: fe,
+    OrSearch: ge,
+    OrSkeletonText: he
   },
   model: {
     prop: "modelValue",
@@ -1255,7 +1275,7 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
     },
     variant: {
       type: String,
-      default: () => $.Standard
+      default: () => w.Standard
     },
     features: {
       type: Object,
@@ -1288,19 +1308,26 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
     "root"
   ],
   setup(e, t) {
-    const s = S(), k = S(), h = S(), d = n(() => [
+    const s = G(), b = G(), h = G(), f = n(() => [
       "or-data-grid-v3",
-      ...xt
-    ]), T = n(() => ({
-      scrollPaddingInlineStart: `${[...V.value.values()].reduce((a, w) => a + w, 0)}px`,
-      scrollPaddingInlineEnd: `${[...H.value.values()].reduce((a, w) => a + w, 0)}px`
-    })), W = n({
+      ...oa
+    ]), T = n(() => {
+      const a = {
+        scrollPaddingInlineStart: `${[...R.values()].reduce((p, D) => p + D, 0)}px`,
+        scrollPaddingInlineEnd: `${[...P.values()].reduce((p, D) => p + D, 0)}px`
+      };
+      return R.forEach((p, D) => {
+        a[`--or-dg-col-width-${D}`] = `${p}px`;
+      }), P.forEach((p, D) => {
+        a[`--or-dg-col-width-${D}`] = `${p}px`;
+      }), a;
+    }), V = n({
       get: () => !!e.items.length && e.items.every((a) => C.value.includes(a.id)),
       set: (a) => {
         a ? C.value = [
           .../* @__PURE__ */ new Set([
             ...C.value,
-            ...e.items.map((w) => w.id)
+            ...e.items.map((p) => p.id)
           ])
         ] : C.value = [];
       }
@@ -1312,13 +1339,13 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
       set: (a) => {
         t.emit("update:modelValue", {
           selecting: a,
-          filtering: u.value,
-          searching: D.value,
-          sorting: I.value,
-          paging: G.value
+          filtering: d.value,
+          searching: S.value,
+          sorting: E.value,
+          paging: M.value
         });
       }
-    }), u = n({
+    }), d = n({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.filtering;
@@ -1327,15 +1354,15 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
         t.emit("update:modelValue", {
           selecting: C.value,
           filtering: a,
-          searching: D.value,
-          sorting: I.value,
+          searching: S.value,
+          sorting: E.value,
           paging: {
-            ...G.value,
+            ...M.value,
             offset: 0
           }
         });
       }
-    }), D = n({
+    }), S = n({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.searching;
@@ -1343,16 +1370,16 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
       set: (a) => {
         t.emit("update:modelValue", {
           selecting: C.value,
-          filtering: u.value,
+          filtering: d.value,
           searching: a,
-          sorting: I.value,
+          sorting: E.value,
           paging: {
-            ...G.value,
+            ...M.value,
             offset: 0
           }
         });
       }
-    }), I = n({
+    }), E = n({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.sorting;
@@ -1360,16 +1387,16 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
       set: (a) => {
         t.emit("update:modelValue", {
           selecting: C.value,
-          filtering: u.value,
-          searching: D.value,
+          filtering: d.value,
+          searching: S.value,
           sorting: a,
           paging: {
-            ...G.value,
+            ...M.value,
             offset: 0
           }
         });
       }
-    }), G = n({
+    }), M = n({
       get: () => {
         var a;
         return (a = e.modelValue) == null ? void 0 : a.paging;
@@ -1377,16 +1404,16 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
       set: (a) => {
         t.emit("update:modelValue", {
           selecting: C.value,
-          filtering: u.value,
-          searching: D.value,
-          sorting: I.value,
+          filtering: d.value,
+          searching: S.value,
+          sorting: E.value,
           paging: a
         });
       }
     });
-    le(() => {
+    de(() => {
       var a;
-      return (a = G.value) == null ? void 0 : a.offset;
+      return (a = M.value) == null ? void 0 : a.offset;
     }, () => {
       var a;
       (a = h.value) != null && a.root && h.value.root.scrollTo({
@@ -1394,131 +1421,131 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
         behavior: "smooth"
       });
     });
-    const F = n(() => e.features.selecting && (typeof e.features.selecting == "object" ? e.features.selecting.showCounter !== !1 : !0)), z = n(() => e.items.length === 0 || e.loading || typeof e.features.selecting == "object" && e.features.selecting.disabled), o = n(() => {
+    const H = n(() => e.features.selecting && (typeof e.features.selecting == "object" ? e.features.selecting.showCounter !== !1 : !0)), F = n(() => e.items.length === 0 || e.loading || typeof e.features.selecting == "object" && e.features.selecting.disabled), o = n(() => {
       var a;
-      return ((a = k.value) == null ? void 0 : a.currentLimit) || 10;
-    }), i = S({}), v = n(() => e.columns.map((a) => ({
-      ...a,
-      width: i.value[a.name] || a.width
-    }))), V = S(/* @__PURE__ */ new Map()), H = S(/* @__PURE__ */ new Map()), q = n(() => {
-      const a = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Map(), E = [], ae = [];
-      e.features.selecting && E.push({
+      return ((a = b.value) == null ? void 0 : a.currentLimit) || 10;
+    }), l = G({}), v = n(() => e.columns), R = le(/* @__PURE__ */ new Map()), P = le(/* @__PURE__ */ new Map()), q = n(() => {
+      const a = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), D = [], ne = [];
+      e.features.selecting && D.push({
         name: "_check",
         stickiness: "start",
         alignment: "center"
-      }), v.value.forEach((P) => {
-        P.stickiness === "start" ? E.push(P) : P.stickiness === "end" && ae.push(P);
+      }), v.value.forEach((N) => {
+        N.stickiness === "start" ? D.push(N) : N.stickiness === "end" && ne.push(N);
       });
-      let oe = 0;
-      E.forEach((P) => {
-        a.set(P.name, oe), oe += V.value.get(P.name) || 0;
+      let x = "0px";
+      D.forEach((N) => {
+        a.set(N.name, x), x = `calc(${x} + var(--or-dg-col-width-${N.name}, 0px))`;
       });
-      let re = 0;
-      return [...ae].reverse().forEach((P) => {
-        w.set(P.name, re), re += H.value.get(P.name) || 0;
+      let ee = "0px";
+      return [...ne].reverse().forEach((N) => {
+        p.set(N.name, ee), ee = `calc(${ee} + var(--or-dg-col-width-${N.name}, 0px))`;
       }), {
         start: a,
-        end: w
+        end: p
       };
     });
-    function X(a) {
-      D.value = a;
+    function B(a) {
+      S.value = a;
     }
-    function J(a, w, E) {
-      switch (E.stickiness) {
+    function X(a, p, D) {
+      switch (D.stickiness) {
         case "start":
-          V.value.set(E.name, w), V.value = new Map(V.value), H.value.delete(E.name), H.value = new Map(H.value);
+          R.set(D.name, p), P.delete(D.name);
           break;
         case "end":
-          V.value.delete(E.name), V.value = new Map(V.value), H.value.set(E.name, w), H.value = new Map(H.value);
+          R.delete(D.name), P.set(D.name, p);
           break;
         default:
-          te(E.name);
+          re(D.name);
           break;
       }
     }
-    function U(a) {
+    function J(a) {
       e.interactiveRows && t.emit("hover:row", a);
     }
-    function L(a) {
+    function U(a) {
       e.interactiveRows && t.emit("blur:row", a);
     }
-    function B(a, w, E) {
+    function j(a, p, D) {
       e.interactiveRows && t.emit("hover:cell", {
         item: a,
-        columnName: w,
-        value: E
+        columnName: p,
+        value: D
       });
     }
-    function l(a, w, E) {
+    function i(a, p, D) {
       e.interactiveRows && t.emit("blur:cell", {
         item: a,
-        columnName: w,
-        value: E
+        columnName: p,
+        value: D
       });
     }
-    function m(a) {
+    function u(a) {
       e.interactiveRows && t.emit("click:row", a);
     }
-    function j(a, w) {
-      i.value = {
-        ...i.value,
-        [a.name]: `${w}px`
-      }, e.features.storageKey && ie();
+    const A = we(ce, 500);
+    function Q(a, p) {
+      l.value = {
+        ...l.value,
+        [a.name]: `${p}px`
+      }, e.features.storageKey && A();
     }
-    function ie() {
+    function ce() {
       if (typeof window > "u" || !e.features.storageKey) return;
       const a = {};
-      v.value.forEach((w) => {
-        w.name && w.width && (a[w.name] = w.width);
+      v.value.forEach((p) => {
+        const D = l.value[p.name] || p.width;
+        p.name && D && (a[p.name] = D);
       }), localStorage.setItem(`or-data-grid-v3-widths-${e.features.storageKey}`, JSON.stringify(a));
     }
-    function de() {
+    function ue() {
       if (!(typeof window > "u" || !e.features.storageKey))
         try {
           const a = localStorage.getItem(`or-data-grid-v3-widths-${e.features.storageKey}`);
           if (a) {
-            const w = JSON.parse(a);
-            i.value = w;
+            const p = JSON.parse(a);
+            l.value = p;
           }
         } catch (a) {
           console.error("[OrDataGrid]: Failed to load column widths from localStorage", a);
         }
     }
-    pe(() => {
-      de();
+    ke(() => {
+      ue();
     });
-    function te(a) {
-      V.value.delete(a), V.value = new Map(V.value), H.value.delete(a), H.value = new Map(H.value);
+    function re(a) {
+      R.delete(a), P.delete(a);
     }
-    function ce(a) {
+    function me(a) {
       a.currentTarget.scrollIntoView({ block: "nearest" });
     }
     return {
       root: s,
-      rootStyles: d,
-      pagination: k,
+      rootStyles: f,
+      pagination: b,
       tableInlineStyles: T,
-      selectingIndicator: W,
-      showSelectingCouter: F,
-      selectingDisabled: z,
+      selectingIndicator: V,
+      showSelectingCouter: H,
+      selectingDisabled: F,
       skeletonsLength: o,
       actualColumns: v,
-      handleMouseEnterRow: U,
-      handleMouseLeaveRow: L,
-      handleMouseEnterCell: B,
-      handleMouseLeaveCell: l,
-      handleRowClick: m,
-      updateColumnWidth: j,
+      handleMouseEnterRow: J,
+      handleMouseLeaveRow: U,
+      handleMouseEnterCell: j,
+      handleMouseLeaveCell: i,
+      handleRowClick: u,
+      updateColumnWidth: Q,
+      columnWidths: l,
       selectingModel: C,
-      filteringModel: u,
-      searchingModel: D,
-      sortingModel: I,
-      pagingModel: G,
+      filteringModel: d,
+      searchingModel: S,
+      sortingModel: E,
+      pagingModel: M,
       stickyOffsets: q,
-      updateScrollOffset: J,
-      removeScrollOffset: te,
-      updateSearchingModel: X,
+      updateScrollOffset: X,
+      removeScrollOffset: re,
+      updateSearchingModel: B,
       scrollToTop: () => {
         var a;
         (a = h.value) != null && a.root && h.value.root.scrollTo({
@@ -1526,37 +1553,37 @@ const _t = /* @__PURE__ */ R(Yt, [["render", Zt]]), xt = [
           behavior: "smooth"
         });
       },
-      scrollTo: ce,
-      onInput: (a, w, E) => {
-        a[w] = E, t.emit("update:item", a);
+      scrollTo: me,
+      onInput: (a, p, D) => {
+        a[p] = D, t.emit("update:item", a);
       }
     };
   }
 });
-function ta(e, t, s, k, h, d) {
-  const T = g("OrSearch"), W = g("OrDataGridHeader"), C = g("OrDataGridToolbar"), u = g("OrCheckbox"), D = g("OrDataGridTableHeaderCell"), I = g("OrDataGridTableHeaderRow"), G = g("OrDataGridTableHeader"), F = g("OrDataGridNotification"), z = g("OrDataGridTableExtraRow"), o = g("OrSkeletonText"), i = g("OrDataGridTableContentCell"), v = g("OrDataGridTableContentRow"), V = g("OrDataGridTablePlaceholder"), H = g("OrDataGridTableContent"), q = g("OrDataGridTable"), X = g("OrDataGridTableFooterCell"), J = g("OrDataGridTableFooterRow"), U = g("OrDataGridTableFooter"), L = g("OrPagination"), B = g("OrDataGridFooter");
-  return r(), p("div", {
+function na(e, t, s, b, h, f) {
+  const T = g("OrSearch"), V = g("OrDataGridHeader"), C = g("OrDataGridToolbar"), d = g("OrCheckbox"), S = g("OrDataGridTableHeaderCell"), E = g("OrDataGridTableHeaderRow"), M = g("OrDataGridTableHeader"), H = g("OrDataGridNotification"), F = g("OrDataGridTableExtraRow"), o = g("OrSkeletonText"), l = g("OrDataGridTableContentCell"), v = g("OrDataGridTableContentRow"), R = g("OrDataGridTablePlaceholder"), P = g("OrDataGridTableContent"), q = g("OrDataGridTable"), B = g("OrDataGridTableFooterCell"), X = g("OrDataGridTableFooterRow"), J = g("OrDataGridTableFooter"), U = g("OrPagination"), j = g("OrDataGridFooter");
+  return r(), y("div", {
     ref: "root",
-    class: f(e.rootStyles)
+    class: m(e.rootStyles)
   }, [
-    e.$slots.title || e.features.searching || e.$slots.search || e.$slots.extraActions ? (r(), O(W, {
+    e.$slots.title || e.features.searching || e.$slots.search || e.$slots.extraActions ? (r(), $(V, {
       key: 0,
-      class: f(["shrink-0"])
-    }, _({ _: 2 }, [
+      class: m(["shrink-0"])
+    }, te({ _: 2 }, [
       e.$slots.title ? {
         name: "title",
-        fn: b(() => [
+        fn: O(() => [
           c(e.$slots, "title")
         ]),
         key: "0"
       } : void 0,
       e.features.searching ? {
         name: "searching",
-        fn: b(() => [
-          c(e.$slots, "search", ve(ye({ updateSearchingModel: e.updateSearchingModel, searchingModel: e.searchingModel })), () => [
-            N(T, {
+        fn: O(() => [
+          c(e.$slots, "search", be(Oe({ updateSearchingModel: e.updateSearchingModel, searchingModel: e.searchingModel })), () => [
+            z(T, {
               modelValue: e.searchingModel,
-              "onUpdate:modelValue": t[0] || (t[0] = (l) => e.searchingModel = l)
+              "onUpdate:modelValue": t[0] || (t[0] = (i) => e.searchingModel = i)
             }, null, 8, ["modelValue"])
           ])
         ]),
@@ -1564,34 +1591,35 @@ function ta(e, t, s, k, h, d) {
       } : void 0,
       e.$slots.extraActions ? {
         name: "extraActions",
-        fn: b(() => [
+        fn: O(() => [
           c(e.$slots, "extraActions")
         ]),
         key: "2"
       } : void 0
-    ]), 1024)) : y("", !0),
-    e.$slots.toolbar ? (r(), O(C, {
+    ]), 1024)) : k("", !0),
+    e.$slots.toolbar ? (r(), $(C, {
       key: 1,
-      class: f(["shrink-0"])
+      class: m(["shrink-0"])
     }, {
-      default: b(() => [
+      default: O(() => [
         c(e.$slots, "toolbar")
       ]),
       _: 3
-    })) : y("", !0),
-    N(q, {
+    })) : k("", !0),
+    z(q, {
       ref: "table",
-      class: f(["grow", { "grid-rows-[auto_1fr]": e.items.length === 0 }]),
-      style: A(e.tableInlineStyles),
+      class: m(["grow", { "grid-rows-[auto_1fr]": e.items.length === 0 }]),
+      style: L(e.tableInlineStyles),
       columns: e.actualColumns,
+      "column-widths": e.columnWidths,
       features: e.features
     }, {
-      default: b(() => [
-        N(G, null, {
-          default: b(() => [
-            N(I, { variant: e.variant }, {
-              default: b(() => [
-                e.features.selecting ? (r(), O(D, {
+      default: O(() => [
+        z(M, null, {
+          default: O(() => [
+            z(E, { variant: e.variant }, {
+              default: O(() => [
+                e.features.selecting ? (r(), $(S, {
                   key: 0,
                   column: { name: "_check", stickiness: "start", alignment: "center" },
                   "sticky-offset": e.stickyOffsets.start.get("_check"),
@@ -1600,29 +1628,29 @@ function ta(e, t, s, k, h, d) {
                   "onUpdate:scrollOffset": e.updateScrollOffset,
                   "onRemove:scrollOffset": e.removeScrollOffset
                 }, {
-                  default: b(() => [
-                    N(u, {
+                  default: O(() => [
+                    z(d, {
                       modelValue: e.selectingIndicator,
-                      "onUpdate:modelValue": t[1] || (t[1] = (l) => e.selectingIndicator = l),
+                      "onUpdate:modelValue": t[1] || (t[1] = (i) => e.selectingIndicator = i),
                       indeterminate: !e.selectingIndicator && e.selectingModel.length > 0,
                       disabled: e.selectingDisabled
                     }, null, 8, ["modelValue", "indeterminate", "disabled"])
                   ]),
                   _: 1
-                }, 8, ["sticky-offset", "onUpdate:scrollOffset", "onRemove:scrollOffset"])) : y("", !0),
-                (r(!0), p(Q, null, Y(e.actualColumns, (l) => (r(), O(D, {
-                  key: l.name,
+                }, 8, ["sticky-offset", "onUpdate:scrollOffset", "onRemove:scrollOffset"])) : k("", !0),
+                (r(!0), y(Y, null, Z(e.actualColumns, (i) => (r(), $(S, {
+                  key: i.name,
                   modelValue: e.sortingModel,
-                  "onUpdate:modelValue": t[2] || (t[2] = (m) => e.sortingModel = m),
-                  column: l,
+                  "onUpdate:modelValue": t[2] || (t[2] = (u) => e.sortingModel = u),
+                  column: i,
                   features: e.features,
-                  "sticky-offset": l.stickiness === "start" ? e.stickyOffsets.start.get(l.name) : l.stickiness === "end" ? e.stickyOffsets.end.get(l.name) : void 0,
+                  "sticky-offset": i.stickiness === "start" ? e.stickyOffsets.start.get(i.name) : i.stickiness === "end" ? e.stickyOffsets.end.get(i.name) : void 0,
                   "onUpdate:scrollOffset": e.updateScrollOffset,
                   "onRemove:scrollOffset": e.removeScrollOffset,
-                  "onUpdate:columnWidth": (m) => e.updateColumnWidth(l, m)
+                  "onUpdate:columnWidth": (u) => e.updateColumnWidth(i, u)
                 }, {
-                  default: b(() => [
-                    x(ee(l.label), 1)
+                  default: O(() => [
+                    ae(oe(i.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["modelValue", "column", "features", "sticky-offset", "onUpdate:scrollOffset", "onRemove:scrollOffset", "onUpdate:columnWidth"]))), 128))
@@ -1632,39 +1660,39 @@ function ta(e, t, s, k, h, d) {
           ]),
           _: 1
         }),
-        e.notification ? (r(), O(F, {
+        e.notification ? (r(), $(H, {
           key: 0,
           notification: e.notification,
           variant: e.variant,
-          onCloseNotification: t[3] || (t[3] = (l) => e.$emit("close-notification"))
-        }, _({ _: 2 }, [
+          onCloseNotification: t[3] || (t[3] = (i) => e.$emit("close-notification"))
+        }, te({ _: 2 }, [
           e.$slots.notification ? {
             name: "notification",
-            fn: b(() => [
+            fn: O(() => [
               c(e.$slots, "notification")
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["notification", "variant"])) : y("", !0),
-        N(H, null, {
-          default: b(() => [
-            e.$slots["before-rows"] ? (r(), O(z, {
+        ]), 1032, ["notification", "variant"])) : k("", !0),
+        z(P, null, {
+          default: O(() => [
+            e.$slots["before-rows"] ? (r(), $(F, {
               key: 0,
               variant: e.variant,
               class: "border-b-1"
             }, {
-              default: b(() => [
+              default: O(() => [
                 c(e.$slots, "before-rows")
               ]),
               _: 3
-            }, 8, ["variant"])) : y("", !0),
-            e.loading ? (r(!0), p(Q, { key: 1 }, Y(e.skeletonsLength, (l) => (r(), O(v, {
-              key: l,
+            }, 8, ["variant"])) : k("", !0),
+            e.loading ? (r(!0), y(Y, { key: 1 }, Z(e.skeletonsLength, (i) => (r(), $(v, {
+              key: i,
               variant: e.variant,
               interactive: e.interactiveRows
             }, {
-              default: b(() => [
-                e.features.selecting ? (r(), O(i, {
+              default: O(() => [
+                e.features.selecting ? (r(), $(l, {
                   key: 0,
                   column: { name: "_check", stickiness: "start", alignment: "center" },
                   "sticky-offset": e.stickyOffsets.start.get("_check"),
@@ -1672,39 +1700,39 @@ function ta(e, t, s, k, h, d) {
                   override: !0,
                   class: "!px-none"
                 }, {
-                  default: b(() => [
-                    N(o)
+                  default: O(() => [
+                    z(o)
                   ]),
                   _: 1
-                }, 8, ["sticky-offset", "variant"])) : y("", !0),
-                (r(!0), p(Q, null, Y(e.actualColumns, (m) => (r(), O(i, {
-                  key: m.name,
-                  column: m,
+                }, 8, ["sticky-offset", "variant"])) : k("", !0),
+                (r(!0), y(Y, null, Z(e.actualColumns, (u) => (r(), $(l, {
+                  key: u.name,
+                  column: u,
                   features: e.features,
-                  "sticky-offset": m.stickiness === "start" ? e.stickyOffsets.start.get(m.name) : m.stickiness === "end" ? e.stickyOffsets.end.get(m.name) : void 0,
+                  "sticky-offset": u.stickiness === "start" ? e.stickyOffsets.start.get(u.name) : u.stickiness === "end" ? e.stickyOffsets.end.get(u.name) : void 0,
                   variant: e.variant,
                   override: !0
                 }, {
-                  default: b(() => [
-                    c(e.$slots, "column-loading", { column: m }, () => [
-                      N(o)
+                  default: O(() => [
+                    c(e.$slots, "column-loading", { column: u }, () => [
+                      z(o)
                     ])
                   ]),
                   _: 2
                 }, 1032, ["column", "features", "sticky-offset", "variant"]))), 128))
               ]),
               _: 2
-            }, 1032, ["variant", "interactive"]))), 128)) : e.items.length > 0 ? (r(!0), p(Q, { key: 2 }, Y(e.items, (l) => (r(), O(v, {
-              key: l.id,
+            }, 1032, ["variant", "interactive"]))), 128)) : e.items.length > 0 ? (r(!0), y(Y, { key: 2 }, Z(e.items, (i) => (r(), $(v, {
+              key: i.id,
               variant: e.variant,
-              selected: e.selectingModel.includes(l.id),
+              selected: e.selectingModel.includes(i.id),
               interactive: e.interactiveRows,
-              onMouseenter: () => e.handleMouseEnterRow(l),
-              onMouseleave: () => e.handleMouseLeaveRow(l),
-              onClick: () => e.handleRowClick(l)
+              onMouseenter: () => e.handleMouseEnterRow(i),
+              onMouseleave: () => e.handleMouseLeaveRow(i),
+              onClick: () => e.handleRowClick(i)
             }, {
-              default: b(() => [
-                e.features.selecting ? (r(), O(i, {
+              default: O(() => [
+                e.features.selecting ? (r(), $(l, {
                   key: 0,
                   column: { name: "_check", stickiness: "start", alignment: "center" },
                   "sticky-offset": e.stickyOffsets.start.get("_check"),
@@ -1712,89 +1740,89 @@ function ta(e, t, s, k, h, d) {
                   override: !0,
                   "force-state": "none",
                   class: "!px-none",
-                  onMouseenter: () => e.handleMouseEnterCell(l, "selecting", e.selectingModel.includes(l.id)),
-                  onMouseleave: () => e.handleMouseLeaveCell(l, "selecting", e.selectingModel.includes(l.id))
+                  onMouseenter: () => e.handleMouseEnterCell(i, "selecting", e.selectingModel.includes(i.id)),
+                  onMouseleave: () => e.handleMouseLeaveCell(i, "selecting", e.selectingModel.includes(i.id))
                 }, {
-                  default: b(() => [
-                    N(u, {
+                  default: O(() => [
+                    z(d, {
                       modelValue: e.selectingModel,
-                      "onUpdate:modelValue": t[4] || (t[4] = (m) => e.selectingModel = m),
-                      value: l.id,
+                      "onUpdate:modelValue": t[4] || (t[4] = (u) => e.selectingModel = u),
+                      value: i.id,
                       disabled: e.selectingDisabled
                     }, null, 8, ["modelValue", "value", "disabled"])
                   ]),
                   _: 2
-                }, 1032, ["sticky-offset", "variant", "onMouseenter", "onMouseleave"])) : y("", !0),
-                (r(!0), p(Q, null, Y(e.actualColumns, (m) => (r(), O(i, {
-                  key: m.name,
-                  "model-value": l[m.name],
-                  column: m,
+                }, 1032, ["sticky-offset", "variant", "onMouseenter", "onMouseleave"])) : k("", !0),
+                (r(!0), y(Y, null, Z(e.actualColumns, (u) => (r(), $(l, {
+                  key: u.name,
+                  "model-value": i[u.name],
+                  column: u,
                   features: e.features,
-                  "sticky-offset": m.stickiness === "start" ? e.stickyOffsets.start.get(m.name) : m.stickiness === "end" ? e.stickyOffsets.end.get(m.name) : void 0,
+                  "sticky-offset": u.stickiness === "start" ? e.stickyOffsets.start.get(u.name) : u.stickiness === "end" ? e.stickyOffsets.end.get(u.name) : void 0,
                   variant: e.variant,
-                  onInput: (j) => e.onInput(l, m.name, j),
-                  onFocusin: t[5] || (t[5] = (j) => e.scrollTo(j)),
-                  onMouseenter: () => e.handleMouseEnterCell(l, m.name, l[m.name]),
-                  onMouseleave: () => e.handleMouseLeaveCell(l, m.name, l[m.name])
+                  onInput: (A) => e.onInput(i, u.name, A),
+                  onFocusin: t[5] || (t[5] = (A) => e.scrollTo(A)),
+                  onMouseenter: () => e.handleMouseEnterCell(i, u.name, i[u.name]),
+                  onMouseleave: () => e.handleMouseLeaveCell(i, u.name, i[u.name])
                 }, {
-                  default: b(() => [
-                    c(e.$slots, m.name, {
-                      column: m,
-                      item: l
+                  default: O(() => [
+                    c(e.$slots, u.name, {
+                      column: u,
+                      item: i
                     }, () => [
-                      x(ee(l[m.name]), 1)
+                      ae(oe(i[u.name]), 1)
                     ])
                   ]),
                   _: 2
                 }, 1032, ["model-value", "column", "features", "sticky-offset", "variant", "onInput", "onMouseenter", "onMouseleave"]))), 128))
               ]),
               _: 2
-            }, 1032, ["variant", "selected", "interactive", "onMouseenter", "onMouseleave", "onClick"]))), 128)) : e.$slots.noSearchResults && (e.features.filtering && e.filteringModel || e.features.searching && e.searchingModel) ? (r(), O(V, {
+            }, 1032, ["variant", "selected", "interactive", "onMouseenter", "onMouseleave", "onClick"]))), 128)) : e.$slots.noSearchResults && (e.features.filtering && e.filteringModel || e.features.searching && e.searchingModel) ? (r(), $(R, {
               key: 3,
-              class: f(["col-span-full"]),
+              class: m(["col-span-full"]),
               variant: e.variant
             }, {
-              default: b(() => [
+              default: O(() => [
                 c(e.$slots, "noSearchResults", {
                   filter: e.filteringModel,
                   search: e.searchingModel
                 })
               ]),
               _: 3
-            }, 8, ["variant"])) : e.$slots.empty ? (r(), O(V, {
+            }, 8, ["variant"])) : e.$slots.empty ? (r(), $(R, {
               key: 4,
-              class: f(["col-span-full"]),
+              class: m(["col-span-full"]),
               variant: e.variant
             }, {
-              default: b(() => [
+              default: O(() => [
                 c(e.$slots, "empty")
               ]),
               _: 3
-            }, 8, ["variant"])) : y("", !0),
-            e.$slots["after-rows"] ? (r(), O(z, {
+            }, 8, ["variant"])) : k("", !0),
+            e.$slots["after-rows"] ? (r(), $(F, {
               key: 5,
               variant: e.variant
             }, {
-              default: b(() => [
+              default: O(() => [
                 c(e.$slots, "after-rows")
               ]),
               _: 3
-            }, 8, ["variant"])) : y("", !0)
+            }, 8, ["variant"])) : k("", !0)
           ]),
           _: 3
         })
       ]),
       _: 3
-    }, 8, ["class", "style", "columns", "features"]),
-    e.$slots["extra-row"] ? (r(), O(U, { key: 2 }, {
-      default: b(() => [
-        N(J, {
-          class: f(["shrink-0"]),
+    }, 8, ["class", "style", "columns", "column-widths", "features"]),
+    e.$slots["extra-row"] ? (r(), $(J, { key: 2 }, {
+      default: O(() => [
+        z(X, {
+          class: m(["shrink-0"]),
           variant: e.variant
         }, {
-          default: b(() => [
-            N(X, null, {
-              default: b(() => [
+          default: O(() => [
+            z(B, null, {
+              default: O(() => [
                 c(e.$slots, "extra-row")
               ]),
               _: 3
@@ -1804,62 +1832,62 @@ function ta(e, t, s, k, h, d) {
         }, 8, ["variant"])
       ]),
       _: 3
-    })) : y("", !0),
-    e.$slots.actions || e.showSelectingCouter || e.features.paging ? (r(), O(B, {
+    })) : k("", !0),
+    e.$slots.actions || e.showSelectingCouter || e.features.paging ? (r(), $(j, {
       key: 3,
-      class: f(["shrink-0"])
-    }, _({ _: 2 }, [
+      class: m(["shrink-0"])
+    }, te({ _: 2 }, [
       e.features.selecting && e.selectingModel.length > 0 ? {
         name: "status",
-        fn: b(() => [
-          x(ee(e.selectingModel.length) + " row(s) selected ", 1)
+        fn: O(() => [
+          ae(oe(e.selectingModel.length) + " row(s) selected ", 1)
         ]),
         key: "0"
       } : void 0,
       e.$slots.actions ? {
         name: "actions",
-        fn: b(() => [
+        fn: O(() => [
           c(e.$slots, "actions")
         ]),
         key: "1"
       } : void 0,
       e.features.paging ? {
         name: "paging",
-        fn: b(() => [
-          N(L, {
+        fn: O(() => [
+          z(U, {
             ref: "pagination",
             modelValue: e.pagingModel,
-            "onUpdate:modelValue": t[6] || (t[6] = (l) => e.pagingModel = l),
+            "onUpdate:modelValue": t[6] || (t[6] = (i) => e.pagingModel = i),
             length: e.features.paging.length,
             options: e.features.paging.options
           }, null, 8, ["modelValue", "length", "options"])
         ]),
         key: "2"
       } : void 0
-    ]), 1024)) : y("", !0)
+    ]), 1024)) : k("", !0)
   ], 2);
 }
-const Oa = /* @__PURE__ */ R(ea, [["render", ta]]);
+const Sa = /* @__PURE__ */ W(ra, [["render", na]]);
 export {
-  $ as D,
-  Oa as O,
+  w as D,
+  Sa as O,
   K as a,
-  Z as b,
-  We as c,
-  je as d,
-  Ke as e,
-  _e as f,
-  at as g,
-  st as h,
-  ut as i,
-  ht as j,
-  bt as k,
-  St as l,
-  Vt as m,
-  Et as n,
-  Nt as o,
-  Lt as p,
-  Xt as q,
-  _t as r
+  _ as b,
+  Ne as c,
+  Be as d,
+  Ye as e,
+  at as f,
+  st as g,
+  ct as h,
+  ht as i,
+  kt as j,
+  Dt as k,
+  Vt as l,
+  Wt as m,
+  Pt as n,
+  At as o,
+  Kt as p,
+  Zt as q,
+  aa as r
 };
-//# sourceMappingURL=OrDataGrid-CL9IRSow.mjs.map
+//# sourceMappingURL=OrDataGrid-CKuJloxA.mjs.map