@onereach/ui-components 20.3.0 → 20.3.1

package/dist/esm/components/or-data-grid-v3/index.js

@@ -1,19 +1,19 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, watch, createElementVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createVNode, renderList, createTextVNode, toDisplayString, mergeProps } from 'vue';
-import { OrCheckboxV3 as script$f } from '../or-checkbox-v3/index.js';
-import { OrDatePickerV3 as script$g } from '../or-date-picker-v3/index.js';
-import { s as script$h } from '../OrDateTimePickerV3-3c2fd488.js';
-import { OrInputV3 as script$i } from '../or-input-v3/index.js';
-import { OrRatingV3 as script$j } from '../or-rating-v3/index.js';
-import { OrSelectV3 as script$k } from '../or-select-v3/index.js';
-import { OrSwitchV3 as script$l } from '../or-switch-v3/index.js';
-import { OrTagInputV3 as script$m } from '../or-tag-input-v3/index.js';
-import { OrTimePickerV3 as script$n } from '../or-time-picker-v3/index.js';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, watch, createElementVNode, createVNode, mergeProps, withCtx, createSlots, normalizeProps, guardReactiveProps, renderList, createTextVNode, toDisplayString } from 'vue';
+import { OrCheckboxV3 as script$g } from '../or-checkbox-v3/index.js';
+import { OrDatePickerV3 as script$h } from '../or-date-picker-v3/index.js';
+import { s as script$i } from '../OrDateTimePickerV3-3c2fd488.js';
+import { OrInputV3 as script$j } from '../or-input-v3/index.js';
+import { OrRatingV3 as script$k } from '../or-rating-v3/index.js';
+import { OrSelectV3 as script$l } from '../or-select-v3/index.js';
+import { OrSwitchV3 as script$m } from '../or-switch-v3/index.js';
+import { OrTagInputV3 as script$n } from '../or-tag-input-v3/index.js';
+import { OrTimePickerV3 as script$o } from '../or-time-picker-v3/index.js';
 import { useElementSize } from '@vueuse/core';
-import { OrIconV3 as script$o } from '../or-icon-v3/index.js';
-import { OrPaginationV3 as script$p } from '../or-pagination-v3/index.js';
-import { OrSearchV3 as script$q } from '../or-search-v3/index.js';
-import { OrSkeletonTextV3 as script$r } from '../or-skeleton-v3/index.js';
-import { OrNotificationV3 as script$s } from '../or-notification-v3/index.js';
+import { OrIconV3 as script$p } from '../or-icon-v3/index.js';
+import { OrNotificationV3 as script$q } from '../or-notification-v3/index.js';
+import { OrPaginationV3 as script$r } from '../or-pagination-v3/index.js';
+import { OrSearchV3 as script$s } from '../or-search-v3/index.js';
+import { OrSkeletonTextV3 as script$t } from '../or-skeleton-v3/index.js';
 import '../OrAutocompleteV3-fd7065f1.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
@@ -41,8 +41,8 @@ import '../or-tag-v3/index.js';
 import '../or-menu-v3/index.js';
 import '../OrEditorTabsV3-152c10c5.js';
 import '../or-expansion-panel-v3/index.js';
-import 'lodash/range';
 import '../or-indicator-v3/index.js';
+import 'lodash/range';
 
 const DataGridFooter = [
 // Layout
@@ -59,7 +59,7 @@ const DataGridFooterStatus = [
 // Typography
 'typography-body-2-semibold'];
 
-var script$e = defineComponent({
+var script$f = defineComponent({
   name: 'OrDataGridFooter',
   expose: ['root'],
   setup() {
@@ -75,22 +75,22 @@ var script$e = defineComponent({
   }
 });
 
-const _hoisted_1$5 = {
+const _hoisted_1$4 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [_ctx.$slots['status'] ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.statusStyles)
-  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$5)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
 }
 
-script$e.render = render$e;
-script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
+script$f.render = render$f;
+script$f.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
 
 const DataGridHeader = [
 // Layout
@@ -103,7 +103,7 @@ const DataGridHeaderTitle = [
 // Typography
 'typography-headline-2'];
 
-var script$d = defineComponent({
+var script$e = defineComponent({
   name: 'OrDataGridHeader',
   expose: ['root'],
   setup() {
@@ -119,22 +119,22 @@ var script$d = defineComponent({
   }
 });
 
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [_ctx.$slots['title'] ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.titleStyles)
-  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$3)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
 }
 
-script$d.render = render$d;
-script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
+script$e.render = render$e;
+script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
 
 const DataGridTableContentCell = [
 // Layout
@@ -150,18 +150,18 @@ const DataGridTableContentCell = [
 // Theme (.sticky-end)
 '[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
-var script$c = defineComponent({
+var script$d = defineComponent({
   name: 'OrDataGridTableContentCell',
   components: {
-    OrCheckbox: script$f,
-    OrDatePicker: script$g,
-    OrDateTimePicker: script$h,
-    OrInput: script$i,
-    OrRating: script$j,
-    OrSelect: script$k,
-    OrSwitch: script$l,
-    OrTagInput: script$m,
-    OrTimePicker: script$n
+    OrCheckbox: script$g,
+    OrDatePicker: script$h,
+    OrDateTimePicker: script$i,
+    OrInput: script$j,
+    OrRating: script$k,
+    OrSelect: script$l,
+    OrSwitch: script$m,
+    OrTagInput: script$n,
+    OrTimePicker: script$o
   },
   model: {
     prop: 'modelValue',
@@ -243,11 +243,11 @@ var script$c = defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   key: 2,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInput = resolveComponent("OrInput");
   const _component_OrRating = resolveComponent("OrRating");
   const _component_OrSelect = resolveComponent("OrSelect");
@@ -319,11 +319,11 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
     modelValue: _ctx.model,
     "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.model = $event),
     variant: 'embedded'
-  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
 }
 
-script$c.render = render$c;
-script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
+script$d.render = render$d;
+script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
 
 var DataGridVariant;
 (function (DataGridVariant) {
@@ -359,7 +359,7 @@ const DataGridTableContentRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$b = defineComponent({
+var script$c = defineComponent({
   name: 'OrDataGridTableContentRow',
   props: {
     variant: {
@@ -383,23 +383,23 @@ var script$b = defineComponent({
   }
 });
 
-const _hoisted_1$2 = ["selected"];
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1 = ["selected"];
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     selected: _ctx.selected
-  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$2);
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$1);
 }
 
-script$b.render = render$b;
-script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
+script$c.render = render$c;
+script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
 
 const DataGridTableContent = [
 // Layout
 'contents'];
 
-var script$a = defineComponent({
+var script$b = defineComponent({
   name: 'OrDataGridTableContent',
   expose: ['root'],
   setup() {
@@ -413,15 +413,15 @@ var script$a = defineComponent({
   }
 });
 
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$a.render = render$a;
-script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
+script$b.render = render$b;
+script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
 
 const DataGridTableFooterCell = [
 // Layout
@@ -431,7 +431,7 @@ const DataGridTableFooterCell = [
 // Theme
 'theme-border-transparent border-1', 'dark:theme-border-transparent-dark'];
 
-var script$9 = defineComponent({
+var script$a = defineComponent({
   name: 'OrDataGridTableFooterCell',
   expose: ['root'],
   setup() {
@@ -445,15 +445,15 @@ var script$9 = defineComponent({
   }
 });
 
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$9.render = render$9;
-script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
+script$a.render = render$a;
+script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
 
 const DataGridTableFooterRow = [
 // Layout
@@ -476,7 +476,7 @@ const DataGridTableFooterRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$8 = defineComponent({
+var script$9 = defineComponent({
   name: 'OrDataGridTableFooterRow',
   props: {
     variant: {
@@ -496,21 +496,21 @@ var script$8 = defineComponent({
   }
 });
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$8.render = render$8;
-script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
+script$9.render = render$9;
+script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
 
 const DataGridTableFooter = [
 // Layout
 'contents'];
 
-var script$7 = defineComponent({
+var script$8 = defineComponent({
   name: 'OrDataGridTableFooter',
   expose: ['root'],
   setup() {
@@ -524,15 +524,15 @@ var script$7 = defineComponent({
   }
 });
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$7.render = render$7;
-script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
+script$8.render = render$8;
+script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
 
 const DataGridTableHeaderCell = [
 // Layout
@@ -546,10 +546,10 @@ const DataGridTableHeaderCell = [
 // Theme (.sticky-end)
 '[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
-var script$6 = defineComponent({
+var script$7 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: script$o
+    OrIcon: script$p
   },
   model: {
     prop: 'modelValue',
@@ -665,24 +665,24 @@ var script$6 = defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1 = {
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     style: normalizeStyle(_ctx.rootInlineStyles),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggleSorting())
-  }, [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
+  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
     key: 0,
     icon: _ctx.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
   }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
 }
 
-script$6.render = render$6;
-script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
+script$7.render = render$7;
+script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
 
 const DataGridTableHeaderRow = [
 // Position
@@ -705,7 +705,7 @@ const DataGridTableHeaderRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$5 = defineComponent({
+var script$6 = defineComponent({
   name: 'OrDataGridTableHeaderRow',
   props: {
     variant: {
@@ -725,21 +725,21 @@ var script$5 = defineComponent({
   }
 });
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$5.render = render$5;
-script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
+script$6.render = render$6;
+script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
 
 const DataGridTableHeader = [
 // Layout
 'contents'];
 
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: 'OrDataGridTableHeader',
   expose: ['root'],
   setup() {
@@ -753,15 +753,15 @@ var script$4 = defineComponent({
   }
 });
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$4.render = render$4;
-script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
+script$5.render = render$5;
+script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
 
 const DataGridTablePlaceholder = [
 // Layout
@@ -784,7 +784,7 @@ const DataGridTablePlaceholderVariants = {
   'min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'OrDataGridTablePlaceholder',
   props: {
     variant: {
@@ -804,15 +804,15 @@ var script$3 = defineComponent({
   }
 });
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
-script$3.render = render$3;
-script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
+script$4.render = render$4;
+script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
 
 const DataGridTable = [
 // Layout
@@ -822,7 +822,7 @@ const DataGridTable = [
 // Interactivity
 'interactivity-default'];
 
-var script$2 = defineComponent({
+var script$3 = defineComponent({
   name: 'OrDataGridTable',
   props: {
     columns: {
@@ -861,7 +861,7 @@ var script$2 = defineComponent({
   }
 });
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
@@ -869,8 +869,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, [renderSlot(_ctx.$slots, "default")], 6 /* CLASS, STYLE */);
 }
 
-script$2.render = render$2;
-script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
+script$3.render = render$3;
+script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
 
 const DataGridToolbar = [
 // Layout
@@ -880,7 +880,7 @@ const DataGridToolbar = [
 // Spacing
 'gap-xl'];
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   name: 'OrDataGridToolbar',
   expose: ['root'],
   setup() {
@@ -894,15 +894,73 @@ var script$1 = defineComponent({
   }
 });
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
 }
 
+script$2.render = render$2;
+script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
+
+const DataGridNotification = [
+// Position
+'grid sticky z-10',
+// Layout
+'col-span-full'];
+const DataGridNotificationPositionVariants = {
+  [DataGridVariant.Standard]: [
+  // Position
+  'top-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Position
+  'top-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Position
+  'top-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+
+var script$1 = defineComponent({
+  components: {
+    OrNotification: script$q
+  },
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    },
+    variant: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['close-notification'],
+  setup(props) {
+    const rootStyles = computed(() => ['or-data-grid-notification-v3', ...DataGridNotification, ...DataGridNotificationPositionVariants[props.variant]]);
+    return {
+      rootStyles
+    };
+  }
+});
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrNotification = resolveComponent("OrNotification");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createVNode(_component_OrNotification, mergeProps(_ctx.notification, {
+    class: "rounded-0 shadow-none",
+    onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close-notification'))
+  }), {
+    default: withCtx(() => [_ctx.$slots['notification'] ? renderSlot(_ctx.$slots, 'notification', {
+      key: 0
+    }) : createCommentVNode("v-if", true)]),
+    _: 3 /* FORWARDED */
+  }, 16 /* FULL_PROPS */)], 2 /* CLASS */);
+}
+
 script$1.render = render$1;
-script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
+script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue";
 
 const DataGrid = [
 // Layout
@@ -911,25 +969,25 @@ const DataGrid = [
 var script = defineComponent({
   name: 'OrDataGrid',
   components: {
-    OrCheckbox: script$f,
-    OrDataGridFooter: script$e,
-    OrDataGridHeader: script$d,
-    OrDataGridTable: script$2,
-    OrDataGridTableContent: script$a,
-    OrDataGridTableContentCell: script$c,
-    OrDataGridTableContentRow: script$b,
-    OrDataGridTableFooter: script$7,
-    OrDataGridTableFooterCell: script$9,
-    OrDataGridTableFooterRow: script$8,
-    OrDataGridTableHeader: script$4,
-    OrDataGridTableHeaderCell: script$6,
-    OrDataGridTableHeaderRow: script$5,
-    OrDataGridTablePlaceholder: script$3,
-    OrDataGridToolbar: script$1,
-    OrPagination: script$p,
-    OrSearch: script$q,
-    OrSkeletonText: script$r,
-    OrNotification: script$s
+    OrCheckbox: script$g,
+    OrDataGridFooter: script$f,
+    OrDataGridHeader: script$e,
+    OrDataGridTable: script$3,
+    OrDataGridTableContent: script$b,
+    OrDataGridTableContentCell: script$d,
+    OrDataGridTableContentRow: script$c,
+    OrDataGridTableFooter: script$8,
+    OrDataGridTableFooterCell: script$a,
+    OrDataGridTableFooterRow: script$9,
+    OrDataGridTableHeader: script$5,
+    OrDataGridTableHeaderCell: script$7,
+    OrDataGridTableHeaderRow: script$6,
+    OrDataGridTablePlaceholder: script$4,
+    OrDataGridToolbar: script$2,
+    OrDataGridNotification: script$1,
+    OrPagination: script$r,
+    OrSearch: script$s,
+    OrSkeletonText: script$t
   },
   model: {
     prop: 'modelValue',
@@ -1135,10 +1193,6 @@ var script = defineComponent({
   }
 });
 
-const _hoisted_1 = {
-  key: 0,
-  class: "grid col-span-full"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrSearch = resolveComponent("OrSearch");
   const _component_OrDataGridHeader = resolveComponent("OrDataGridHeader");
@@ -1147,7 +1201,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrDataGridTableHeaderCell = resolveComponent("OrDataGridTableHeaderCell");
   const _component_OrDataGridTableHeaderRow = resolveComponent("OrDataGridTableHeaderRow");
   const _component_OrDataGridTableHeader = resolveComponent("OrDataGridTableHeader");
-  const _component_OrNotification = resolveComponent("OrNotification");
+  const _component_OrDataGridNotification = resolveComponent("OrDataGridNotification");
   const _component_OrSkeletonText = resolveComponent("OrSkeletonText");
   const _component_OrDataGridTableContentCell = resolveComponent("OrDataGridTableContentCell");
   const _component_OrDataGridTableContentRow = resolveComponent("OrDataGridTableContentRow");
@@ -1232,15 +1286,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1 /* STABLE */
       }, 8 /* PROPS */, ["variant"])]),
       _: 1 /* STABLE */
-    }), _ctx.notification ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_OrNotification, mergeProps(_ctx.notification, {
-      class: "rounded-0",
-      onClose: _cache[3] || (_cache[3] = $event => _ctx.$emit('close-notification'))
-    }), {
-      default: withCtx(() => [_ctx.$slots['notification'] ? renderSlot(_ctx.$slots, 'notification', {
-        key: 0
-      }) : createCommentVNode("v-if", true)]),
-      _: 3 /* FORWARDED */
-    }, 16 /* FULL_PROPS */)])) : createCommentVNode("v-if", true), createVNode(_component_OrDataGridTableContent, null, {
+    }), _ctx.notification ? (openBlock(), createBlock(_component_OrDataGridNotification, {
+      key: 0,
+      notification: _ctx.notification,
+      variant: _ctx.variant,
+      onCloseNotification: _cache[3] || (_cache[3] = $event => _ctx.$emit('close-notification'))
+    }, createSlots({
+      _: 2 /* DYNAMIC */
+    }, [_ctx.$slots['notification'] ? {
+      name: "notification",
+      fn: withCtx(() => [renderSlot(_ctx.$slots, 'notification')]),
+      key: "0"
+    } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["notification", "variant"])) : createCommentVNode("v-if", true), createVNode(_component_OrDataGridTableContent, null, {
       default: withCtx(() => [_ctx.loading ? (openBlock(), createElementBlock(Fragment, {
         key: 0
       }, renderList(10, n => {

package/dist/esm/components/or-data-grid-v3/partials/index.d.ts

@@ -12,3 +12,4 @@ export { default as OrDataGridTableHeader } from './or-data-grid-table-header/Or
 export { default as OrDataGridTablePlaceholder } from './or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue';
 export { default as OrDataGridTable } from './or-data-grid-table/OrDataGridTable.vue';
 export { default as OrDataGridToolbar } from './or-data-grid-toolbar/OrDataGridToolbar.vue';
+export { default as OrDataGridNotification } from './or-data-grid-notification/OrDataGridNotification.vue';

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-notification/OrDataGridNotification.vue.d.ts

@@ -0,0 +1,26 @@
+import { PropType } from 'vue';
+import { DataGridVariant } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    notification: {
+        type: PropType<any>;
+        required: true;
+    };
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}, {
+    rootStyles: import("vue").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close-notification"[], "close-notification", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    notification: {
+        type: PropType<any>;
+        required: true;
+    };
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}>> & {
+    "onClose-notification"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/esm/components/or-data-grid-v3/partials/or-data-grid-notification/styles.d.ts

@@ -0,0 +1,3 @@
+import { DataGridVariant } from '../../types';
+export declare const DataGridNotification: string[];
+export declare const DataGridNotificationPositionVariants: Record<DataGridVariant, string[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "20.3.0",
+  "version": "20.3.1",
   "description": "Vue components library for v3",
   "sideEffects": false,
   "exports": {
@@ -44,8 +44,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^20.3.0",
-    "@onereach/ui-components-common": "^20.3.0",
+    "@onereach/styles": "^20.3.1",
+    "@onereach/ui-components-common": "^20.3.1",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -105,5 +105,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "da62f7d2af0507ea35abbe990f2c03918721e4f6"
+  "gitHead": "ede500b09e1eaac359f8dc812db0f1cf7a4deeb1"
 }