@onereach/ui-components 12.0.1 → 13.0.0

package/dist/esm/v3/{OrDataGridToolbar-993e4fb0.js → OrDataGridToolbar-7435af23.js}

@@ -1,8 +1,22 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, normalizeStyle, resolveComponent, createBlock } from 'vue';
-import { s as script$e } from './OrIcon-9aff520e.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, createElementVNode } from 'vue';
+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 { s as script$e } from './OrCheckbox-e353ee89.js';
+import { s as script$f } from './OrDatePicker-cbd5183d.js';
+import { s as script$g } from './OrDateTimePicker-4e715d5f.js';
+import './OrDateTimePickerTimeSelect-c69e90b4.js';
+import { s as script$h } from './OrInput-6b60bf4a.js';
+import { s as script$i } from './OrRating-7c2f8e4d.js';
+import { s as script$j } from './OrSelect-d97029ba.js';
+import { s as script$k } from './OrSwitch-86583d97.js';
+import { s as script$l } from './OrTagInput-8e53511e.js';
+import { s as script$m } from './OrTimePicker-d17e6f65.js';
+import { s as script$n } from './OrIcon-9aff520e.js';
 
 const DataGridFooter = [
 // Layout
@@ -97,18 +111,43 @@ script$c.render = render$c;
 script$c.__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$b = defineComponent({
   name: 'OrDataGridTableContentCell',
+  components: {
+    OrCheckbox: script$e,
+    OrDatePicker: script$f,
+    OrDateTimePicker: script$g,
+    OrInput: script$h,
+    OrRating: script$i,
+    OrSelect: script$j,
+    OrSwitch: script$k,
+    OrTagInput: script$l,
+    OrTimePicker: script$m
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
     column: {
       type: Object,
       default: undefined
@@ -117,13 +156,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(() => {
@@ -158,26 +198,99 @@ 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
     };
   }
 });
 
 const _hoisted_1$2 = {
-  key: 0,
+  key: 2,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
 function render$b(_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$b.render = render$b;
@@ -285,7 +398,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',
@@ -395,15 +510,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: script$e
+    OrIcon: script$n
   },
   model: {
     prop: 'modelValue',
@@ -421,12 +538,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
@@ -508,7 +622,6 @@ var script$5 = defineComponent({
 });
 
 const _hoisted_1 = {
-  key: 0,
   class: /*#__PURE__*/normalizeClass(['truncate'])
 };
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
@@ -518,10 +631,8 @@ function render$5(_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 */);
 }
@@ -665,7 +776,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',
@@ -687,14 +800,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/v3/{OrDateFormat-283c01ec.js → OrDateFormat-616cd68b.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-d6d82348.js';
+import './OrDateTimePicker-4e715d5f.js';
 import './OrDateTimePickerTimeSelect-c69e90b4.js';
 import { f as formatDate } from './formatTime-3f37a00f.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from 'vue';

package/dist/esm/v3/{OrDatePicker-25b23c5d.js → OrDatePicker-cbd5183d.js}

@@ -7,14 +7,14 @@ 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-d6d82348.js';
+import './OrDateTimePicker-4e715d5f.js';
 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 } from './OrDateTimePickerTimeSelect-c69e90b4.js';
 import { g as getCurrentDate, f as formatMobileDate } from './getCurrentDate-e5a478c3.js';
 import { s as script$7 } from './OrError-331220bc.js';
 import { s as script$8 } from './OrHint-262c8217.js';
 import { s as script$a } from './OrIconButton-5a508869.js';
 import { s as script$9 } from './OrIcon-9aff520e.js';
-import { s as script$b, b as InputBoxSize } from './OrInputBox-de16d7ec.js';
+import { s as script$b, a as InputBoxVariant } from './OrInputBox-2f33498c.js';
 import { s as script$c } from './OrLabel-4abbce6e.js';
 import { s as script$d } from './OrPopover-0daeba14.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, vShow, createElementVNode } from 'vue';
@@ -78,9 +78,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,
@@ -105,10 +113,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -117,7 +121,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;
@@ -234,7 +238,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,
@@ -269,7 +273,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/esm/v3/{OrDateRangePicker-aa9d7204.js → OrDateRangePicker-7546b7be.js}

@@ -7,7 +7,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
 import { u as useResponsive } from './useResponsive-491da8c6.js';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import './OrDateTimePicker-d6d82348.js';
+import './OrDateTimePicker-4e715d5f.js';
 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 } from './OrDateTimePickerTimeSelect-c69e90b4.js';
 import { g as getCurrentDate, f as formatMobileDate } from './getCurrentDate-e5a478c3.js';
 import { g as getNextMonthDate } from './getNextMonthDate-8ec29631.js';
@@ -15,7 +15,7 @@ import { s as script$7 } from './OrError-331220bc.js';
 import { s as script$8 } from './OrHint-262c8217.js';
 import { s as script$a } from './OrIconButton-5a508869.js';
 import { s as script$9 } from './OrIcon-9aff520e.js';
-import { s as script$b, b as InputBoxSize } from './OrInputBox-de16d7ec.js';
+import { s as script$b, a as InputBoxVariant } from './OrInputBox-2f33498c.js';
 import { s as script$c } from './OrLabel-4abbce6e.js';
 import { s as script$d } from './OrPopover-0daeba14.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, createElementVNode, vShow } from 'vue';
@@ -67,9 +67,17 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
+    },
+    anchor: {
+      type: Object,
+      default: undefined
     },
     label: {
       type: String,
@@ -94,10 +102,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -106,7 +110,7 @@ var script = defineComponent({
     var _a, _b, _c, _d;
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-date-range-picker-v3', ...DateRangePicker]);
+    const rootStyles = computed(() => ['or-date-range-picker-v3', ...DateRangePicker, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -283,7 +287,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,
@@ -326,7 +330,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[12] || (_cache[12] = $event => _ctx.reset())

package/dist/esm/v3/{OrDateTimeFormat-914bfe51.js → OrDateTimeFormat-490d5e32.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-d6d82348.js';
+import './OrDateTimePicker-4e715d5f.js';
 import './OrDateTimePickerTimeSelect-c69e90b4.js';
 import { f as formatDate, a as formatTime } from './formatTime-3f37a00f.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from 'vue';

package/dist/esm/v3/{OrDateTimePicker-d6d82348.js → OrDateTimePicker-4e715d5f.js}

@@ -11,7 +11,7 @@ import { s as script$9 } from './OrError-331220bc.js';
 import { s as script$a } from './OrHint-262c8217.js';
 import { s as script$c } from './OrIconButton-5a508869.js';
 import { s as script$b } from './OrIcon-9aff520e.js';
-import { s as script$d, b as InputBoxSize } from './OrInputBox-de16d7ec.js';
+import { s as script$d, a as InputBoxVariant } from './OrInputBox-2f33498c.js';
 import { s as script$e } from './OrLabel-4abbce6e.js';
 import { s as script$f } from './OrPopover-0daeba14.js';
 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, f as script$7, g as script$8 } from './OrDateTimePickerTimeSelect-c69e90b4.js';
@@ -92,9 +92,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,
@@ -119,10 +127,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -131,7 +135,7 @@ var script = defineComponent({
     var _a;
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker]);
+    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -294,7 +298,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,
@@ -337,7 +341,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[6] || (_cache[6] = $event => _ctx.reset())
@@ -388,7 +392,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[10] || (_cache[10] = $event => _ctx.reset())

package/dist/esm/v3/{OrInput-74cd099c.js → OrInput-6b60bf4a.js}

@@ -11,13 +11,13 @@ import { s as script$1 } from './OrError-331220bc.js';
 import { s as script$2 } from './OrHint-262c8217.js';
 import { s as script$4 } from './OrIconButton-5a508869.js';
 import { s as script$3 } from './OrIcon-9aff520e.js';
-import { s as script$5, b as InputBoxSize } from './OrInputBox-de16d7ec.js';
+import { s as script$5, a as InputBoxVariant } from './OrInputBox-2f33498c.js';
 import { s as script$6 } from './OrLabel-4abbce6e.js';
 import { s as script$7 } from './OrLoader-5e2f359b.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, withDirectives, createElementVNode, mergeProps, vModelDynamic, Fragment, withModifiers, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
-const InputRoot = [
+const Input = [
 // Layout
 'layout-column',
 // Spacing
@@ -75,9 +75,13 @@ var script = defineComponent({
       type: String,
       default: 'off'
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
     },
     label: {
       type: String,
@@ -110,10 +114,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -126,7 +126,7 @@ var script = defineComponent({
     });
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-input-v3', ...InputRoot]);
+    const rootStyles = computed(() => ['or-input-v3', ...Input, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const control = ref();
     const controlStyles = computed(() => [...InputControl]);
     // State
@@ -196,7 +196,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])]),
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrInputBox, {
-    variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
+    variant: _ctx.variant,
     size: _ctx.size,
     invalid: !!_ctx.error,
     readonly: _ctx.readonly || _ctx.loading,

package/dist/esm/v3/{OrInputBox-de16d7ec.js → OrInputBox-2f33498c.js}

@@ -59,6 +59,7 @@ var InputBoxVariant;
 (function (InputBoxVariant) {
   InputBoxVariant["Styled"] = "styled";
   InputBoxVariant["Unstyled"] = "unstyled";
+  InputBoxVariant["Embedded"] = "embedded";
 })(InputBoxVariant || (InputBoxVariant = {}));
 var InputBoxSize;
 (function (InputBoxSize) {
@@ -99,7 +100,10 @@ const InputBoxVariants = {
   'invalid:read-only:bg-error-opacity-0-08', 'dark:invalid:read-only:bg-error-opacity-0-08-dark', 'invalid:read-only:!border-transparent', 'dark:invalid:read-only:!border-transparent'],
   [InputBoxVariant.Unstyled]: [
   // Theme (disabled)
-  'disabled:theme-foreground-disabled', 'dark:disabled:theme-foreground-disabled-dark']
+  'disabled:theme-foreground-disabled', 'dark:disabled:theme-foreground-disabled-dark'],
+  [InputBoxVariant.Embedded]: [
+  // Spacing (children)
+  'first:children:!ms-0', 'last:children:!me-0']
 };
 const InputBoxSizes = {
   'm-row': [
@@ -108,7 +112,7 @@ const InputBoxSizes = {
   // Spacing
   'gap-sm+ md:gap-sm',
   // Spacing (children)
-  'first:children:ml-md md:first:children:ml-sm+', 'last:children:mr-md md:last:children:mr-sm+',
+  'first:children:ms-md md:first:children:ms-sm+', 'last:children:me-md md:last:children:me-sm+',
   // Typography
   'typography-body-2-regular'],
   'm-column': [
@@ -120,7 +124,7 @@ const InputBoxSizes = {
   // Spacing
   'gap-[6px]',
   // Spacing (children)
-  'first:children:ml-md md:first:children:ml-sm+', 'last:children:mr-md md:last:children:mr-sm+',
+  'first:children:ms-md md:first:children:ms-sm+', 'last:children:me-md md:last:children:me-sm+',
   // Typography
   'typography-caption-regular'],
   's-column': [

package/dist/esm/v3/{OrRichTextEditor-4bf14722.js → OrRichTextEditor-f1d7597b.js}

@@ -18,8 +18,8 @@ import { s as script$1 } from './OrButton-31bcb511.js';
 import { s as script$2 } from './OrError-331220bc.js';
 import { s as script$3 } from './OrHint-262c8217.js';
 import { s as script$4 } from './OrIconButton-5a508869.js';
-import { s as script$6 } from './OrInputBox-de16d7ec.js';
-import { s as script$5 } from './OrInput-74cd099c.js';
+import { s as script$6 } from './OrInputBox-2f33498c.js';
+import { s as script$5 } from './OrInput-6b60bf4a.js';
 import { s as script$7 } from './OrLabel-4abbce6e.js';
 import { s as script$9 } from './OrMenuItem-6caf8844.js';
 import { s as script$8 } from './OrMenu-95509740.js';