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

package/dist/esm/v2/{OrDateRangePicker-304fa73e.js → OrDateRangePicker-f46faeae.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.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 { g as getNextMonthDate } from './getNextMonthDate-8ec29631.js';
@@ -15,8 +15,8 @@ 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';
@@ -68,9 +68,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,
@@ -95,10 +103,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -107,7 +111,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;
@@ -282,7 +286,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,
@@ -379,7 +383,7 @@ var __vue_render__ = function () {
       "bottom-sheet-props": {
         variant: 'basic'
       },
-      "trigger": _vm.inputBoxRoot,
+      "trigger": _vm.anchor || _vm.inputBoxRoot,
       "placement": 'bottom-start',
       "fallback-placement": 'start'
     },

package/dist/esm/v2/{OrDateTimeFormat-4404c18f.js → OrDateTimeFormat-ab9f775e.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, a as formatTime } from './formatTime-3f37a00f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrDateTimePicker-0883505e.js → OrDateTimePicker-c3996f3a.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrDateTimePicker.vue_rollup-plugin-vue_script-6bb377cd.js';
+import { s as script } from './OrDateTimePicker.vue_rollup-plugin-vue_script-47bce700.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */
@@ -41,7 +41,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,
@@ -134,7 +134,7 @@ var __vue_render__ = function () {
       "bottom-sheet-props": {
         variant: 'basic'
       },
-      "trigger": _vm.inputBoxRoot,
+      "trigger": _vm.anchor || _vm.inputBoxRoot,
       "placement": 'bottom-start',
       "fallback-placement": 'start'
     },
@@ -201,7 +201,7 @@ var __vue_render__ = function () {
       "bottom-sheet-props": {
         variant: 'basic'
       },
-      "trigger": _vm.inputBoxRoot,
+      "trigger": _vm.anchor || _vm.inputBoxRoot,
       "placement": 'bottom-start',
       "fallback-placement": 'start'
     },

package/dist/esm/v2/{OrDateTimePicker.vue_rollup-plugin-vue_script-6bb377cd.js → OrDateTimePicker.vue_rollup-plugin-vue_script-47bce700.js}

@@ -11,8 +11,8 @@ import { _ as __vue_component__$8 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$9 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$b } from './OrIconButton-efaf73f5.js';
 import { _ as __vue_component__$a } from './OrIcon-0a14dafc.js';
-import { _ as __vue_component__$c } from './OrInputBox-63eaba8b.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { _ as __vue_component__$c } from './OrInputBox-49393c02.js';
+import { a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { _ as __vue_component__$d } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$e } from './OrPopover-45e2dbce.js';
 import { _ as __vue_component__, a as __vue_component__$1, b as __vue_component__$2, c as __vue_component__$3, d as __vue_component__$4, e as __vue_component__$5, f as __vue_component__$6, g as __vue_component__$7 } from './OrDateTimePickerTimeSelect-9108baaa.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;

package/dist/esm/v2/{OrInput-a2a68ebf.js → OrInput-ea80d121.js}

@@ -11,14 +11,14 @@ import { _ as __vue_component__$1 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$2 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$4 } from './OrIconButton-efaf73f5.js';
 import { _ as __vue_component__$3 } from './OrIcon-0a14dafc.js';
-import { _ as __vue_component__$5 } from './OrInputBox-63eaba8b.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { _ as __vue_component__$5 } from './OrInputBox-49393c02.js';
+import { a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { _ as __vue_component__$6 } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$7 } from './OrLoader-4ac49224.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-const InputRoot = [
+const Input = [
 // Layout
 'layout-column',
 // Spacing
@@ -76,9 +76,13 @@ var script = defineComponent({
       type: String,
       default: 'off'
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
     },
     label: {
       type: String,
@@ -111,10 +115,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -127,7 +127,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
@@ -174,7 +174,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-7f80ba9b]{min-width:0;background:0 0;outline:0}input[type=search][data-v-7f80ba9b]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-4d5e4306]{min-width:0;background:0 0;outline:0}input[type=search][data-v-4d5e4306]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -205,7 +205,7 @@ var __vue_render__ = function () {
     return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
   })], 2)] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
     attrs: {
-      "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
+      "variant": _vm.variant,
       "size": _vm.size,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly || _vm.loading,
@@ -347,7 +347,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-7f80ba9b";
+const __vue_scope_id__ = "data-v-4d5e4306";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrInputBox-63eaba8b.js → OrInputBox-49393c02.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { s as script } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */

package/dist/esm/v2/{OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js → OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js}

@@ -84,6 +84,7 @@ var InputBoxVariant;
 (function (InputBoxVariant) {
   InputBoxVariant["Styled"] = "styled";
   InputBoxVariant["Unstyled"] = "unstyled";
+  InputBoxVariant["Embedded"] = "embedded";
 })(InputBoxVariant || (InputBoxVariant = {}));
 var InputBoxSize;
 (function (InputBoxSize) {
@@ -124,7 +125,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': [
@@ -133,7 +137,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': [
@@ -145,7 +149,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/v2/{OrRichTextEditor-a1c8c597.js → OrRichTextEditor-71fb65c1.js}

@@ -19,9 +19,9 @@ import './OrButton.vue_rollup-plugin-vue_script-e8900483.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 './OrIconButton-efaf73f5.js';
-import { _ as __vue_component__$6 } from './OrInputBox-63eaba8b.js';
-import './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
-import { _ as __vue_component__$5 } from './OrInput-a2a68ebf.js';
+import { _ as __vue_component__$6 } from './OrInputBox-49393c02.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
+import { _ as __vue_component__$5 } from './OrInput-ea80d121.js';
 import { _ as __vue_component__$7 } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$9 } from './OrMenuItem-0143d03b.js';
 import { _ as __vue_component__$8 } from './OrMenu-64c84fb8.js';

package/dist/esm/v2/{OrSearch-6adbe721.js → OrSearch-e837ee15.js}

@@ -7,8 +7,8 @@ import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-257954f3.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
-import { _ as __vue_component__$1 } from './OrInput-a2a68ebf.js';
+import { a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
+import { _ as __vue_component__$1 } from './OrInput-ea80d121.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -25,9 +25,13 @@ var script = defineComponent({
       type: undefined,
       default: undefined
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
     },
     placeholder: {
       type: String,
@@ -36,10 +40,6 @@ var script = defineComponent({
     debounce: {
       type: Number,
       default: 500
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'search', 'clear'],
@@ -52,7 +52,7 @@ var script = defineComponent({
     });
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-search-v3']);
+    const rootStyles = computed(() => ['or-search-v3', ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     // State
     const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draft = ref(props.modelValue);
@@ -111,9 +111,9 @@ var __vue_render__ = function () {
     class: _vm.rootStyles,
     attrs: {
       "type": 'search',
+      "variant": _vm.variant,
       "size": _vm.size,
-      "placeholder": _vm.placeholder,
-      "disable-default-styles": _vm.disableDefaultStyles
+      "placeholder": _vm.placeholder
     },
     on: {
       "input": function ($event) {

package/dist/esm/v2/{OrSelect-220163e9.js → OrSelect-c0bba2e8.js}

@@ -16,9 +16,9 @@ import { _ as __vue_component__$3 } from './OrExpansionPanel-51ed2e47.js';
 import { _ as __vue_component__$4 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$6 } from './OrIconButton-efaf73f5.js';
 import { _ as __vue_component__$5 } from './OrIcon-0a14dafc.js';
-import { _ as __vue_component__$8 } from './OrInputBox-63eaba8b.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
-import { _ as __vue_component__$7 } from './OrInput-a2a68ebf.js';
+import { _ as __vue_component__$8 } from './OrInputBox-49393c02.js';
+import { a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
+import { _ as __vue_component__$7 } from './OrInput-ea80d121.js';
 import { _ as __vue_component__$9 } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$a } from './OrMenuItem-0143d03b.js';
 import { _ as __vue_component__$b } from './OrPopover-45e2dbce.js';
@@ -131,9 +131,17 @@ var script = defineComponent({
       type: String,
       default: () => TagsOverflow.Hidden
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
+    },
+    anchor: {
+      type: Object,
+      default: undefined
     },
     label: {
       type: String,
@@ -163,10 +171,6 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    },
     enableSearch: {
       type: Boolean,
       default: false
@@ -221,7 +225,7 @@ var script = defineComponent({
       multiple
     } = toRefs(props);
     // Styles
-    const rootStyles = computed(() => ['or-select-v3', ...Select]);
+    const rootStyles = computed(() => ['or-select-v3', ...Select, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const controlStyles = computed(() => [...SelectControl]);
     const searchControlStyles = computed(() => [...SelectSearchControl]);
     const dropdownStyles = computed(() => {
@@ -424,20 +428,22 @@ var __vue_render__ = function () {
       expression: "close"
     }],
     ref: 'inputBox',
-    class: [_vm.popoverState === 'open' && (_vm.popover && _vm.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')],
+    class: [_vm.popoverState === 'open' && (_vm.popover && _vm.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0'), {
+      'outline-none': _vm.variant === 'embedded'
+    }],
     attrs: {
-      "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
+      "variant": _vm.variant,
       "size": _vm.size,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
-      "disabled": _vm.disabled
+      "disabled": _vm.disabled,
+      "tabindex": !_vm.disabled ? 0 : null
     }
   }, [_c('div', {
     ref: 'control',
     class: _vm.controlStyles,
     attrs: {
       "id": _vm.controlId,
-      "tabindex": !_vm.disabled ? 0 : null,
       "disabled": _vm.disabled
     },
     on: {
@@ -529,7 +535,7 @@ var __vue_render__ = function () {
     attrs: {
       "custom-styles": _vm.dropdownStyles,
       "variant": 'auto',
-      "trigger": _vm.inputBoxRoot,
+      "trigger": _vm.anchor || _vm.inputBoxRoot,
       "placement": 'bottom',
       "offset": 0,
       "full-width": true,

package/dist/esm/v2/{OrTagInput-5df1d3d8.js → OrTagInput-dac21a98.js}

@@ -12,8 +12,8 @@ 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 './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 { a as TagColor } from './OrTag-33e99a7d.js';
@@ -57,6 +57,10 @@ var script = defineComponent({
       type: undefined,
       default: () => []
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     label: {
       type: String,
       default: undefined
@@ -89,10 +93,6 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    },
     overflow: {
       type: String,
       default: () => TagsOverflow.Hidden
@@ -128,7 +128,7 @@ var script = defineComponent({
       isMobile
     } = useResponsive();
     // Styles
-    const rootStyles = computed(() => ['or-tag-input-v3', ...TagInput]);
+    const rootStyles = computed(() => ['or-tag-input-v3', ...TagInput, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const controlStyles = computed(() => [...TagInputControl]);
     const itemStyles = computed(() => [...TagInputItem]);
     // State
@@ -255,7 +255,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-22bd3ce7]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-7f74d3d2]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -288,7 +288,7 @@ var __vue_render__ = function () {
     ref: 'inputBox',
     class: ['interactivity-select'],
     attrs: {
-      "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
+      "variant": _vm.variant,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled,
@@ -453,7 +453,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-22bd3ce7";
+const __vue_scope_id__ = "data-v-7f74d3d2";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrTextarea-5ec883cd.js → OrTextarea-899e5220.js}

@@ -9,8 +9,8 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-257954f3.js';
 import { _ as __vue_component__$1 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$2 } from './OrHint-2fe1157b.js';
-import { _ as __vue_component__$3 } from './OrInputBox-63eaba8b.js';
-import { b as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-0c28da35.js';
+import { _ as __vue_component__$3 } from './OrInputBox-49393c02.js';
+import { b as InputBoxSize, a as InputBoxVariant } from './OrInputBox.vue_rollup-plugin-vue_script-b5033d84.js';
 import { _ as __vue_component__$4 } from './OrLabel-bf7e2ea2.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -63,6 +63,10 @@ var script = defineComponent({
       type: String,
       default: 'off'
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
       default: () => InputBoxSize.M
@@ -98,10 +102,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -114,7 +114,7 @@ var script = defineComponent({
     });
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-textarea-v3', ...Textarea]);
+    const rootStyles = computed(() => ['or-textarea-v3', ...Textarea, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const control = ref();
     const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size]]);
     // State
@@ -157,7 +157,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "textarea[data-v-5d4fc3a1]{min-width:0;background:0 0;outline:0}";
+var css_248z = "textarea[data-v-5a0794ae]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -188,7 +188,7 @@ var __vue_render__ = function () {
     return [_vm._v("\n        " + _vm._s(_vm.label) + "\n      ")];
   })], 2)] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
     attrs: {
-      "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
+      "variant": _vm.variant,
       "size": _vm.size,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
@@ -287,7 +287,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-5d4fc3a1";
+const __vue_scope_id__ = "data-v-5a0794ae";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrTimeFormat-34f2e911.js → OrTimeFormat-d43b747d.js}

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