@onereach/ui-components 12.0.1 → 13.0.0

package/dist/bundled/v3/utils/functions/dom.js

@@ -1,6 +1,6 @@
-import { g as get_1 } from '../../components/OrRadio-8ea816cb.js';
-import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-cc20eaef.js';
-import { j as _getPrototype } from '../../components/OrList-869c63b9.js';
+import { g as get_1 } from '../../components/OrRadio-6f18fba4.js';
+import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-9b7e3ead.js';
+import { j as _getPrototype } from '../../components/OrList-b29a21a0.js';
 
 var baseGetTag = _baseGetTag,
   getPrototype = _getPrototype,

package/dist/esm/v2/{OrAutocomplete-0f1d68bc.js → OrAutocomplete-fbabf052.js}

@@ -13,13 +13,13 @@ import { u as useValidationAttributes } from './useValidationAttributes-257954f3
 import { _ as __vue_component__$1 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$2 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$3 } from './OrIconButton-efaf73f5.js';
-import { _ as __vue_component__$4 } from './OrInputBox-63eaba8b.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { _ as __vue_component__$4 } from './OrInputBox-49393c02.js';
+import { a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { _ as __vue_component__$5 } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$6 } from './OrLoader-4ac49224.js';
 import { _ as __vue_component__$7 } from './OrMenuItem-0143d03b.js';
 import { _ as __vue_component__$8 } from './OrPopover-45e2dbce.js';
-import { _ as __vue_component__$9 } from './OrTagInput-5df1d3d8.js';
+import { _ as __vue_component__$9 } from './OrTagInput-dac21a98.js';
 import { T as TagsOverflow } from './OrTags-34f79b9a.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -92,9 +92,13 @@ var script = defineComponent({
       type: String,
       default: () => TagsOverflow.Hidden
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
     },
     label: {
       type: String,
@@ -128,10 +132,6 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    },
     enableClear: {
       type: Boolean,
       default: false
@@ -153,7 +153,7 @@ var script = defineComponent({
     });
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-autocomplete-v3', ...Autocomplete]);
+    const rootStyles = computed(() => ['or-autocomplete-v3', ...Autocomplete, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const tagInput = ref();
     const tagInputRoot = computed(() => {
       var _a;
@@ -287,13 +287,13 @@ var __vue_render__ = function () {
     ref: 'tagInput',
     attrs: {
       "overflow": _vm.overflow,
+      "variant": _vm.variant,
       "placeholder": _vm.placeholder,
       "error": !!_vm.error,
       "loading": _vm.loading,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled,
-      "disable-default-styles": _vm.disableDefaultStyles,
       "enable-clear": _vm.enableClear
     },
     on: {
@@ -323,7 +323,7 @@ var __vue_render__ = function () {
     ref: 'inputBox',
     class: [_vm.popoverState === 'open' && (_vm.popover && _vm.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')],
     attrs: {
-      "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
+      "variant": _vm.variant,
       "size": _vm.size,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,

package/dist/esm/v2/{OrCardCollection-86f97343.js → OrCardCollection-1c7a0fe2.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
 import { _ as __vue_component__$2 } from './OrIconButton-efaf73f5.js';
 import { _ as __vue_component__$5 } from './OrLoader-4ac49224.js';
-import { _ as __vue_component__$4 } from './OrSearch-6adbe721.js';
+import { _ as __vue_component__$4 } from './OrSearch-e837ee15.js';
 import { _ as __vue_component__$3 } from './OrSorting-f71ae3b3.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCode-7adb25bb.js → OrCode-faf9e1b7.js}

@@ -15,8 +15,8 @@ import { _ as __vue_component__$7 } from './OrIconButton-efaf73f5.js';
 import { _ as __vue_component__$6 } from './OrModal-aece2cd1.js';
 import { _ as __vue_component__$2 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$3 } from './OrHint-2fe1157b.js';
-import { _ as __vue_component__$4 } from './OrInputBox-63eaba8b.js';
-import './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { _ as __vue_component__$4 } from './OrInputBox-49393c02.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { _ as __vue_component__$5 } from './OrLabel-bf7e2ea2.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCombinedInput-1b289d7e.js → OrCombinedInput-da2fc9f0.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { _ as __vue_component__$1 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$2 } from './OrHint-2fe1157b.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { _ as __vue_component__$3 } from './OrLabel-bf7e2ea2.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -32,9 +32,13 @@ var script = defineComponent({
     OrLabel: __vue_component__$3
   },
   props: {
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
     },
     label: {
       type: String,
@@ -59,17 +63,13 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
-  setup() {
+  setup(props) {
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-combined-input-v3', ...CombinedInput]);
+    const rootStyles = computed(() => ['or-combined-input-v3', ...CombinedInput, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const controlGroup = computed(() => [...CombinedInputControlGroup]);
     return {
       root,
@@ -108,12 +108,12 @@ var __vue_render__ = function () {
   })], 2)] : _vm._e(), _vm._v(" "), _c('div', {
     class: _vm.controlGroup
   }, [_vm._t("default", null, {
+    "variant": _vm.variant,
     "size": _vm.size,
     "error": !!_vm.error,
     "required": _vm.required,
     "readonly": _vm.readonly,
-    "disabled": _vm.disabled,
-    "disableDefaultStyles": _vm.disableDefaultStyles
+    "disabled": _vm.disabled
   })], 2), _vm._v(" "), _vm.$slots.hint || _vm.hint ? [_c('OrHint', {
     directives: [{
       name: "show",

package/dist/esm/v2/{OrConfirm-ffce952b.js → OrConfirm-5994da81.js}

@@ -8,7 +8,7 @@ import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$2 } from './OrButton-3a743a90.js';
 import { a as ButtonColor } from './OrButton.vue_rollup-plugin-vue_script-e8900483.js';
-import { _ as __vue_component__$3 } from './OrInput-a2a68ebf.js';
+import { _ as __vue_component__$3 } from './OrInput-ea80d121.js';
 import { _ as __vue_component__$1 } from './OrOverlay-59e59078.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrDataGrid-a3d2d57f.js → OrDataGrid-8240c142.js}

@@ -1,11 +1,11 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { _ as __vue_component__$1 } from './OrCheckbox-f2dc364e.js';
 import { _ as __vue_component__$g } from './OrPagination-c68bd17c.js';
-import { _ as __vue_component__$h } from './OrSearch-6adbe721.js';
+import { _ as __vue_component__$h } from './OrSearch-e837ee15.js';
 import './OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
 import './OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import { _ as __vue_component__$i } from './OrSkeletonText-b6e51e70.js';
-import { _ as __vue_component__$2, a as __vue_component__$3, b as __vue_component__$4, c as __vue_component__$5, d as __vue_component__$6, e as __vue_component__$7, f as __vue_component__$8, g as __vue_component__$9, h as __vue_component__$a, i as __vue_component__$b, j as __vue_component__$c, k as __vue_component__$d, l as __vue_component__$e, m as __vue_component__$f, D as DataGridVariant } from './OrDataGridToolbar-1f5e8977.js';
+import { _ as __vue_component__$2, a as __vue_component__$3, b as __vue_component__$4, c as __vue_component__$5, d as __vue_component__$6, e as __vue_component__$7, f as __vue_component__$8, g as __vue_component__$9, h as __vue_component__$a, i as __vue_component__$b, j as __vue_component__$c, k as __vue_component__$d, l as __vue_component__$e, m as __vue_component__$f, D as DataGridVariant } from './OrDataGridToolbar-4434e617.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const DataGrid = [
@@ -64,7 +64,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:item'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -263,7 +263,7 @@ var __vue_render__ = function () {
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
       attrs: {
-        "truncate": false
+        "override": true
       }
     }, [_c('OrSkeletonText')], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
       return _c('OrDataGridTableContentCell', {
@@ -271,7 +271,7 @@ var __vue_render__ = function () {
         attrs: {
           "column": column,
           "features": _vm.features,
-          "truncate": false
+          "override": true
         }
       }, [_c('OrSkeletonText')], 1);
     })], 2);
@@ -282,7 +282,11 @@ var __vue_render__ = function () {
         "variant": _vm.variant,
         "selected": _vm.selectingModel.includes(item.id)
       }
-    }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', [_c('OrCheckbox', {
+    }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
+      attrs: {
+        "force-state": 'none'
+      }
+    }, [_c('OrCheckbox', {
       attrs: {
         "value": item.id
       },
@@ -299,6 +303,18 @@ var __vue_render__ = function () {
         attrs: {
           "column": column,
           "features": _vm.features
+        },
+        on: {
+          "update:model-value": function ($event) {
+            return _vm.$emit('update:item', item);
+          }
+        },
+        model: {
+          value: item[column.name],
+          callback: function ($$v) {
+            _vm.$set(item, column.name, $$v);
+          },
+          expression: "item[column.name]"
         }
       }, [_vm._t(column.name, function () {
         return [_vm._v("\n              " + _vm._s(item[column.name]) + "\n            ")];

package/dist/esm/v2/{OrDataGridToolbar-1f5e8977.js → OrDataGridToolbar-4434e617.js}

@@ -1,8 +1,22 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { _ as __vue_component__$e } from './OrIcon-0a14dafc.js';
+import './TimeFormat-a7f5565b.js';
 import './dom-53c9635b.js';
-import { i as isArray } from './isArray-8eeb52b9.js';
+import '@vueuse/core';
+import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import { _ as __vue_component__$e } from './OrCheckbox-f2dc364e.js';
+import { _ as __vue_component__$f } from './OrDatePicker-4f0cb374.js';
+import { _ as __vue_component__$g } from './OrDateTimePicker-c3996f3a.js';
+import './OrDateTimePickerTimeSelect-9108baaa.js';
+import { _ as __vue_component__$h } from './OrInput-ea80d121.js';
+import { _ as __vue_component__$i } from './OrRating-7c968949.js';
+import { _ as __vue_component__$j } from './OrSelect-c0bba2e8.js';
+import { _ as __vue_component__$k } from './OrSwitch-d9bb9ac5.js';
+import { _ as __vue_component__$l } from './OrTagInput-dac21a98.js';
+import { _ as __vue_component__$m } from './OrTimePicker-3707cf6e.js';
+import { _ as __vue_component__$n } from './OrIcon-0a14dafc.js';
 
 const DataGridFooter = [
 // Layout
@@ -139,18 +153,43 @@ const __vue_component__$c = /*#__PURE__*/normalizeComponent({
 }, __vue_inject_styles__$c, __vue_script__$c, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, undefined, undefined, undefined);
 
 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$b = defineComponent({
   name: 'OrDataGridTableContentCell',
+  components: {
+    OrCheckbox: __vue_component__$e,
+    OrDatePicker: __vue_component__$f,
+    OrDateTimePicker: __vue_component__$g,
+    OrInput: __vue_component__$h,
+    OrRating: __vue_component__$i,
+    OrSelect: __vue_component__$j,
+    OrSwitch: __vue_component__$k,
+    OrTagInput: __vue_component__$l,
+    OrTimePicker: __vue_component__$m
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
     column: {
       type: Object,
       default: undefined
@@ -159,13 +198,14 @@ var script$b = 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(() => {
@@ -200,10 +240,18 @@ var script$b = 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
     };
   }
 });
@@ -220,9 +268,117 @@ var __vue_render__$b = function () {
     ref: 'root',
     class: _vm.rootStyles,
     style: _vm.rootInlineStyles
-  }, [_vm.truncate ? [_c('div', {
+  }, [_vm.override ? [_vm._t("default")] : _vm.control ? [_vm.control.type === 'text' ? [_c('OrInput', {
+    attrs: {
+      "type": 'text',
+      "variant": 'embedded'
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'number' ? [_c('OrInput', {
+    attrs: {
+      "type": 'number',
+      "variant": 'embedded'
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'rating' ? [_c('OrRating', {
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'select' ? [_c('OrSelect', {
+    attrs: {
+      "options": _vm.control.options,
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'checkbox' ? [_c('OrCheckbox', {
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'switch' ? [_c('OrSwitch', {
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'date' ? [_c('OrDatePicker', {
+    attrs: {
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'time' ? [_c('OrTimePicker', {
+    attrs: {
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'datetime' ? [_c('OrDateTimePicker', {
+    attrs: {
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'tags' ? [_c('OrTagInput', {
+    attrs: {
+      "variant": 'embedded'
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e()] : [_c('div', {
     class: ['truncate']
-  }, [_vm._t("default")], 2)] : [_vm._t("default")]], 2);
+  }, [_vm._t("default")], 2)]], 2);
 };
 var __vue_staticRenderFns__$b = [];
 
@@ -396,7 +552,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$8 = defineComponent({
   name: 'OrDataGridTableFooterCell',
@@ -578,15 +736,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$5 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: __vue_component__$e
+    OrIcon: __vue_component__$n
   },
   model: {
     prop: 'modelValue',
@@ -604,12 +764,9 @@ var script$5 = defineComponent({
     features: {
       type: Object,
       default: undefined
-    },
-    truncate: {
-      type: Boolean,
-      default: true
     }
   },
+  emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -707,9 +864,9 @@ var __vue_render__$5 = function () {
         return _vm.toggleSorting();
       }
     }
-  }, [_vm.truncate ? [_c('div', {
+  }, [_c('div', {
     class: ['truncate']
-  }, [_vm._t("default")], 2)] : [_vm._t("default")], _vm._v(" "), _vm.model ? [_c('OrIcon', {
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.model ? [_c('OrIcon', {
     attrs: {
       "icon": _vm.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
     }
@@ -944,7 +1101,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$1 = defineComponent({
   name: 'OrDataGridTable',
@@ -966,14 +1125,11 @@ var script$1 = 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 {

package/dist/esm/v2/{OrDateFormat-cd175fa7.js → OrDateFormat-2ff9c3f0.js}

@@ -5,7 +5,7 @@ import '@vueuse/core';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-6bb377cd.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-47bce700.js';
 import './OrDateTimePickerTimeSelect-9108baaa.js';
 import { f as formatDate } from './formatTime-3f37a00f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrDatePicker-76d56f6a.js → OrDatePicker-4f0cb374.js}

@@ -7,15 +7,15 @@ import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-6bb377cd.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-47bce700.js';
 import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6 } from './OrDateTimePickerTimeSelect-9108baaa.js';
 import { g as getCurrentDate, f as formatMobileDate } from './getCurrentDate-e5a478c3.js';
 import { _ as __vue_component__$7 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$8 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$a } from './OrIconButton-efaf73f5.js';
 import { _ as __vue_component__$9 } from './OrIcon-0a14dafc.js';
-import { _ as __vue_component__$b } from './OrInputBox-63eaba8b.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { _ as __vue_component__$b } from './OrInputBox-49393c02.js';
+import { a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { _ as __vue_component__$c } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$d } from './OrPopover-45e2dbce.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -79,9 +79,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,
@@ -106,10 +114,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -118,7 +122,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;
@@ -242,7 +246,7 @@ var __vue_render__ = function () {
     }],
     ref: 'inputBox',
     attrs: {
-      "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
+      "variant": _vm.variant,
       "size": _vm.size,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
@@ -309,7 +313,7 @@ var __vue_render__ = function () {
       "bottom-sheet-props": {
         variant: 'basic'
       },
-      "trigger": _vm.inputBoxRoot,
+      "trigger": _vm.anchor || _vm.inputBoxRoot,
       "placement": 'bottom-start',
       "fallback-placement": 'start'
     },