@onereach/ui-components 12.0.1 → 12.0.2-beta.4597.0

package/dist/bundled/v3/components/{OrDataGridV3-55411e58.js → OrDataGridV3-a79963e7.js}

@@ -1,11 +1,19 @@
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, normalizeStyle, resolveComponent, createBlock, createSlots, withCtx, createVNode, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
-import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$f } from './OrIconV3-b5c97ea7.js';
-import { isArray } from '../utils/isArray.js';
-import { s as script$g } from './OrCheckboxV3-fa48fc66.js';
-import { s as script$h } from './OrPaginationV3-217c0b3a.js';
-import script$i from './OrSearchV3/OrSearch.js';
-import { s as script$j } from './OrSkeletonV3-4b87c34d.js';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, createElementVNode, createSlots, withCtx, createVNode, renderList, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { s as script$f } from './OrCheckboxV3-bf94f74d.js';
+import { s as script$g } from './OrDatePickerV3-e7547219.js';
+import { s as script$h } from './OrDateTimePickerV3-902ab59a.js';
+import { s as script$i } from './OrInputV3-ba36a63d.js';
+import { s as script$j } from './OrRatingV3-e3260da7.js';
+import { s as script$k } from './OrSelectV3-743a39d6.js';
+import { s as script$l } from './OrSwitchV3-d48cfd7b.js';
+import { s as script$m } from './OrTagInputV3-92267f09.js';
+import { s as script$n } from './OrTimePickerV3-befea351.js';
+import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
+import { s as script$o } from './OrIconV3-b5c97ea7.js';
+import { s as script$p } from './OrPaginationV3-5cf5c344.js';
+import script$q from './OrSearchV3/OrSearch.js';
+import { s as script$r } from './OrSkeletonV3-fd952ed8.js';
 
 const DataGridFooter = [
 // Layout
@@ -100,18 +108,43 @@ script$d.render = render$d;
 script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
 
 const DataGridTableContentCell = [
+// Position
+'relative focus-within:z-10',
 // Layout
 'layout-row',
 // Spacing
 'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark', 'theme-outline-transparent outline-2', 'dark:theme-outline-transparent-dark',
+// Theme (focus)
+'focus-within:theme-border-primary', 'dark:focus-within:theme-border-primary-dark', 'focus-within:theme-outline-primary', 'dark:focus-within:theme-outline-primary-dark',
 // Theme (.sticky-start)
-'[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1', 'dark:[&.sticky-start]:theme-border-disabled-dark',
+'[&.sticky-start]:border-e-disabled', 'dark:[&.sticky-start]:border-e-disabled-dark',
 // Theme (.sticky-end)
-'[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1', 'dark:[&.sticky-end]:theme-border-disabled-dark'];
+'[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
 var script$c = 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
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
     column: {
       type: Object,
       default: undefined
@@ -120,13 +153,14 @@ var script$c = defineComponent({
       type: Object,
       default: undefined
     },
-    truncate: {
+    override: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
+  emits: ['update:modelValue'],
   expose: ['root'],
-  setup(props) {
+  setup(props, context) {
     // Refs & Styles
     const root = ref();
     const rootStyles = computed(() => {
@@ -161,26 +195,99 @@ var script$c = defineComponent({
         justifyContent: 'center'
       };
     });
+    // State
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const control = computed(() => {
+      var _a;
+      return (_a = props.column) === null || _a === void 0 ? void 0 : _a.control;
+    });
     return {
       root,
       rootStyles,
-      rootInlineStyles
+      rootInlineStyles,
+      model,
+      control
     };
   }
 });
 
 const _hoisted_1$2 = {
-  key: 0,
+  key: 2,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
 function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrInput = resolveComponent("OrInput");
+  const _component_OrRating = resolveComponent("OrRating");
+  const _component_OrSelect = resolveComponent("OrSelect");
+  const _component_OrCheckbox = resolveComponent("OrCheckbox");
+  const _component_OrSwitch = resolveComponent("OrSwitch");
+  const _component_OrDatePicker = resolveComponent("OrDatePicker");
+  const _component_OrTimePicker = resolveComponent("OrTimePicker");
+  const _component_OrDateTimePicker = resolveComponent("OrDateTimePicker");
+  const _component_OrTagInput = resolveComponent("OrTagInput");
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     style: normalizeStyle(_ctx.rootInlineStyles)
-  }, [_ctx.truncate ? (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "default")])) : renderSlot(_ctx.$slots, "default", {
+  }, [_ctx.override ? renderSlot(_ctx.$slots, "default", {
+    key: 0
+  }) : _ctx.control ? (openBlock(), createElementBlock(Fragment, {
     key: 1
-  })], 6 /* CLASS, STYLE */);
+  }, [_ctx.control.type === 'text' ? (openBlock(), createBlock(_component_OrInput, {
+    key: 0,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.model = $event),
+    type: 'text',
+    variant: 'embedded'
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'number' ? (openBlock(), createBlock(_component_OrInput, {
+    key: 1,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.model = $event),
+    type: 'number',
+    variant: 'embedded'
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'rating' ? (openBlock(), createBlock(_component_OrRating, {
+    key: 2,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.model = $event)
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'select' ? (openBlock(), createBlock(_component_OrSelect, {
+    key: 3,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.model = $event),
+    options: _ctx.control.options,
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "options", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'checkbox' ? (openBlock(), createBlock(_component_OrCheckbox, {
+    key: 4,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.model = $event)
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'switch' ? (openBlock(), createBlock(_component_OrSwitch, {
+    key: 5,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.model = $event)
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'date' ? (openBlock(), createBlock(_component_OrDatePicker, {
+    key: 6,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.model = $event),
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'time' ? (openBlock(), createBlock(_component_OrTimePicker, {
+    key: 7,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.model = $event),
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'datetime' ? (openBlock(), createBlock(_component_OrDateTimePicker, {
+    key: 8,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => _ctx.model = $event),
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'tags' ? (openBlock(), createBlock(_component_OrTagInput, {
+    key: 9,
+    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$2, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
 }
 
 script$c.render = render$c;
@@ -288,7 +395,9 @@ const DataGridTableFooterCell = [
 // Layout
 'layout-row',
 // Spacing
-'px-sm+', 'py-0', 'gap-xs'];
+'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark'];
 
 var script$9 = defineComponent({
   name: 'OrDataGridTableFooterCell',
@@ -398,15 +507,17 @@ const DataGridTableHeaderCell = [
 'layout-row',
 // Spacing
 'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark',
 // Theme (.sticky-start)
-'[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1', 'dark:[&.sticky-start]:theme-border-disabled-dark',
+'[&.sticky-start]:border-e-disabled', 'dark:[&.sticky-start]:border-e-disabled-dark',
 // Theme (.sticky-end)
-'[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1', 'dark:[&.sticky-end]:theme-border-disabled-dark'];
+'[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
 var script$6 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: script$f
+    OrIcon: script$o
   },
   model: {
     prop: 'modelValue',
@@ -424,12 +535,9 @@ var script$6 = defineComponent({
     features: {
       type: Object,
       default: undefined
-    },
-    truncate: {
-      type: Boolean,
-      default: true
     }
   },
+  emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -511,7 +619,6 @@ var script$6 = defineComponent({
 });
 
 const _hoisted_1 = {
-  key: 0,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
@@ -521,10 +628,8 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.rootStyles),
     style: normalizeStyle(_ctx.rootInlineStyles),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggleSorting())
-  }, [_ctx.truncate ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])) : renderSlot(_ctx.$slots, "default", {
-    key: 1
-  }), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
-    key: 2,
+  }, [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 */);
 }
@@ -668,7 +773,9 @@ const DataGridTable = [
 // Overflow
 'overflow-auto',
 // Interactivity
-'interactivity-default'];
+'interactivity-default',
+// Spacing
+'-mx-[calc(theme(outlineWidth.2))]', '-my-0', 'px-[calc(theme(outlineWidth.2))]', 'py-0'];
 
 var script$2 = defineComponent({
   name: 'OrDataGridTable',
@@ -690,14 +797,11 @@ var script$2 = defineComponent({
     const rootInlineStyles = computed(() => {
       const gridTemplateColumns = props.columns.map(column => {
         var _a;
-        if (isArray(column.width)) {
-          return `minmax(${column.width[0]}, ${column.width[1]})`;
-        }
         return (_a = column.width) !== null && _a !== void 0 ? _a : 'auto';
       });
       if (props.features.selecting) {
         return {
-          gridTemplateColumns: `auto ${gridTemplateColumns.join(' ')}`
+          gridTemplateColumns: `0fr ${gridTemplateColumns.join(' ')}`
         };
       }
       return {
@@ -762,7 +866,7 @@ const DataGrid = [
 var script = defineComponent({
   name: 'OrDataGrid',
   components: {
-    OrCheckbox: script$g,
+    OrCheckbox: script$f,
     OrDataGridFooter: script$e,
     OrDataGridHeader: script$d,
     OrDataGridTable: script$2,
@@ -777,9 +881,9 @@ var script = defineComponent({
     OrDataGridTableHeaderRow: script$5,
     OrDataGridTablePlaceholder: script$3,
     OrDataGridToolbar: script$1,
-    OrPagination: script$h,
-    OrSearch: script$i,
-    OrSkeletonText: script$j
+    OrPagination: script$p,
+    OrSearch: script$q,
+    OrSkeletonText: script$r
   },
   model: {
     prop: 'modelValue',
@@ -811,7 +915,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:item'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -1017,7 +1121,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
             key: 0,
-            truncate: false
+            override: true
           }, {
             default: withCtx(() => [createVNode(_component_OrSkeletonText)]),
             _: 1 /* STABLE */
@@ -1026,7 +1130,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               key: column.name,
               column: column,
               features: _ctx.features,
-              truncate: false
+              override: true
             }, {
               default: withCtx(() => [createVNode(_component_OrSkeletonText)]),
               _: 2 /* DYNAMIC */
@@ -1043,7 +1147,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           selected: _ctx.selectingModel.includes(item.id)
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
-            key: 0
+            key: 0,
+            "force-state": 'none'
           }, {
             default: withCtx(() => [createVNode(_component_OrCheckbox, {
               modelValue: _ctx.selectingModel,
@@ -1054,6 +1159,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
             return openBlock(), createBlock(_component_OrDataGridTableContentCell, {
               key: column.name,
+              modelValue: item[column.name],
+              "onUpdate:modelValue": [$event => item[column.name] = $event, $event => _ctx.$emit('update:item', item)],
               column: column,
               features: _ctx.features
             }, {
@@ -1062,7 +1169,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 item: item
               }, () => [createTextVNode(toDisplayString(item[column.name]), 1 /* TEXT */)])]),
               _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["column", "features"]);
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "onUpdate:modelValue", "column", "features"]);
           }), 128 /* KEYED_FRAGMENT */))]),
           _: 2 /* DYNAMIC */
         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "selected"]);

package/dist/bundled/v3/components/OrDateFormatV3/OrDateFormat.js

@@ -1 +1 @@
-export { s as default } from '../OrDateFormatV3-7291bcd2.js';
+export { s as default } from '../OrDateFormatV3-92791518.js';

package/dist/bundled/v3/components/OrDateFormatV3/index.js

@@ -1 +1 @@
-export { s as OrDateFormatV3 } from '../OrDateFormatV3-7291bcd2.js';
+export { s as OrDateFormatV3 } from '../OrDateFormatV3-92791518.js';

package/dist/bundled/v3/components/OrDateFormatV3/styles.js

@@ -1 +1 @@
-export { D as DateFormat } from '../OrDateFormatV3-7291bcd2.js';
+export { D as DateFormat } from '../OrDateFormatV3-92791518.js';

package/dist/bundled/v3/components/{OrDateFormatV3-7291bcd2.js → OrDateFormatV3-92791518.js}

@@ -2,7 +2,7 @@ import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNod
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { useDateFormat } from '../hooks/useDateFormat.js';
 import { useLocale } from '../hooks/useLocale.js';
-import { f as formatDate } from './OrDateTimePickerV3-408aef3f.js';
+import { f as formatDate } from './OrDateTimePickerV3-902ab59a.js';
 
 const DateFormat = [
 // Layout

package/dist/bundled/v3/components/OrDatePickerV3/OrDatePicker.js

@@ -1 +1 @@
-export { s as default } from '../OrDatePickerV3-9d4c525d.js';
+export { s as default } from '../OrDatePickerV3-e7547219.js';

package/dist/bundled/v3/components/OrDatePickerV3/OrDatePicker.vue.d.ts

@@ -1,7 +1,7 @@
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType } from 'vue-demi';
 import { FilterFunction, FormatFunction } from '../../types';
 import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
-import { InputBoxSize } from '../or-input-box-v3';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<DateTimePickerModelValue>;
@@ -27,9 +27,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<FilterFunction<Date>>;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -55,10 +63,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -227,9 +231,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<FilterFunction<Date>>;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -255,10 +267,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -267,12 +275,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    anchor: ReferenceElement;
     modelValue: DateTimePickerModelValue;
     format: "short" | "medium" | "long" | FormatFunction<DateTimePickerModelValue>;
     locale: string;
     yearFilter: FilterFunction<Date>;
     monthFilter: FilterFunction<Date>;
     dateFilter: FilterFunction<Date>;
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     label: string;
     hint: string;
@@ -280,6 +290,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrDatePickerV3/index.js

@@ -1 +1 @@
-export { s as OrDatePickerV3 } from '../OrDatePickerV3-9d4c525d.js';
+export { s as OrDatePickerV3 } from '../OrDatePickerV3-e7547219.js';

package/dist/bundled/v3/components/OrDatePickerV3/styles.js

@@ -1 +1 @@
-export { D as DatePicker, a as DatePickerPopover } from '../OrDatePickerV3-9d4c525d.js';
+export { D as DatePicker, a as DatePickerPopover } from '../OrDatePickerV3-e7547219.js';

package/dist/bundled/v3/components/{OrDatePickerV3-9d4c525d.js → OrDatePickerV3-e7547219.js}

@@ -1,13 +1,13 @@
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, vShow, createElementVNode } from 'vue';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, g as getCurrentDate, h as formatMobileDate } from './OrDateTimePickerV3-408aef3f.js';
+import { a as script$1, b as script$2, c as script$3, d as script$4, e as script$5, g as script$6, h as getCurrentDate, i as formatMobileDate } from './OrDateTimePickerV3-902ab59a.js';
 import { s as script$7 } from './OrErrorV3-b04d76aa.js';
 import { s as script$8 } from './OrHintV3-c8ac5975.js';
 import { s as script$9 } from './OrIconV3-b5c97ea7.js';
-import { s as script$a } from './OrIconButtonV3-de2206ec.js';
-import { s as script$b, I as InputBoxSize } from './OrInputBoxV3-53b35f35.js';
+import { s as script$a } from './OrIconButtonV3-fbb7aec8.js';
+import { s as script$b, I as InputBoxVariant } from './OrInputBoxV3-efe30bd8.js';
 import { s as script$c } from './OrLabelV3-2715e117.js';
-import { s as script$d } from './OrPopoverV3-419e3e5f.js';
+import { s as script$d } from './OrPopoverV3-c8f3e88e.js';
 import { DropdownClose } from '../directives/dropdown-close.js';
 import { DropdownOpen } from '../directives/dropdown-open.js';
 import { useDateFormat } from '../hooks/useDateFormat.js';
@@ -73,9 +73,17 @@ var script = defineComponent({
       type: Function,
       default: undefined
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
+    },
+    anchor: {
+      type: Object,
+      default: undefined
     },
     label: {
       type: String,
@@ -100,10 +108,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -112,7 +116,7 @@ var script = defineComponent({
     var _a;
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
+    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -229,7 +233,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["required", "disabled"])) : createCommentVNode("v-if", true), withDirectives((openBlock(), createBlock(_component_OrInputBox, {
     ref: 'inputBox',
-    variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
+    variant: _ctx.variant,
     size: _ctx.size,
     invalid: !!_ctx.error,
     readonly: _ctx.readonly,
@@ -264,7 +268,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "bottom-sheet-props": {
         variant: 'basic'
       },
-      trigger: _ctx.inputBoxRoot,
+      trigger: _ctx.anchor || _ctx.inputBoxRoot,
       placement: 'bottom-start',
       "fallback-placement": 'start',
       onClose: _cache[5] || (_cache[5] = $event => _ctx.reset())

package/dist/bundled/v3/components/OrDateRangePickerV3/OrDateRangePicker.js

@@ -1 +1 @@
-export { s as default } from '../OrDateRangePickerV3-93d024a3.js';
+export { s as default } from '../OrDateRangePickerV3-ffd7ed1c.js';

package/dist/bundled/v3/components/OrDateRangePickerV3/OrDateRangePicker.vue.d.ts

@@ -1,8 +1,8 @@
 import { PropType } from 'vue-demi';
 import { FormatFunction } from '../../types';
 import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
-import { InputBoxSize } from '../or-input-box-v3';
 import { DateRangePickerModelValue } from './types';
+import { ReferenceElement } from '@floating-ui/dom';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<DateRangePickerModelValue>;
@@ -16,9 +16,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -44,10 +52,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -522,9 +526,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -550,10 +562,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -562,9 +570,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    anchor: ReferenceElement;
     modelValue: DateRangePickerModelValue;
     format: "short" | "medium" | "long" | FormatFunction<DateTimePickerModelValue>;
     locale: string;
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     label: string;
     hint: string;
@@ -572,6 +582,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrDateRangePickerV3/index.js

@@ -1 +1 @@
-export { s as OrDateRangePickerV3 } from '../OrDateRangePickerV3-93d024a3.js';
+export { s as OrDateRangePickerV3 } from '../OrDateRangePickerV3-ffd7ed1c.js';

package/dist/bundled/v3/components/OrDateRangePickerV3/styles.js

@@ -1 +1 @@
-export { D as DateRangePicker, a as DateRangePickerPopover } from '../OrDateRangePickerV3-93d024a3.js';
+export { D as DateRangePicker, a as DateRangePickerPopover } from '../OrDateRangePickerV3-ffd7ed1c.js';