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

package/dist/bundled/v2/components/OrInputBoxV3/styles.js

@@ -1,4 +1,4 @@
-import { I as InputBoxDirection, a as InputBoxVariant } from '../../types-ef6428f0.js';
+import { I as InputBoxDirection, a as InputBoxVariant } from '../../types-945b6452.js';
 
 const InputBox = [
 // Overflow
@@ -33,7 +33,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': [
@@ -42,7 +45,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': [
@@ -54,7 +57,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/bundled/v2/components/OrInputBoxV3/types.d.ts

@@ -4,7 +4,8 @@ export declare enum InputBoxDirection {
 }
 export declare enum InputBoxVariant {
     Styled = "styled",
-    Unstyled = "unstyled"
+    Unstyled = "unstyled",
+    Embedded = "embedded"
 }
 export declare enum InputBoxSize {
     M = "m",

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrInput-52dfcc01.js';
+export { _ as default } from '../../OrInput-cba841ef.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.vue.d.ts

@@ -1,5 +1,4 @@
 import { PropType } from 'vue-demi';
-import { InputBoxSize } from '../or-input-box-v3';
 import { InputModelValue, InputType } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -18,9 +17,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -54,10 +57,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     attributes: {
         required: boolean | undefined;
@@ -101,9 +100,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -137,10 +140,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;
@@ -153,6 +152,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: InputModelValue;
     type: "number" | "search" | "text" | "password";
     autocomplete: string;
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     label: string;
     placeholder: string;
@@ -162,6 +162,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
 }>;
 export default _default;

package/dist/bundled/v2/components/OrInputV3/index.js

@@ -1 +1 @@
-export { I as InputType, _ as OrInputV3 } from '../../OrInput-52dfcc01.js';
+export { I as InputType, _ as OrInputV3 } from '../../OrInput-cba841ef.js';

package/dist/bundled/v2/components/OrInputV3/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const InputRoot: string[];
+export declare const Input: string[];
 export declare const InputControl: string[];

package/dist/bundled/v2/components/OrInputV3/styles.js

@@ -1,4 +1,4 @@
-const InputRoot = [
+const Input = [
 // Layout
 'layout-column',
 // Spacing
@@ -16,4 +16,4 @@ const InputControl = [
 // override background color using box-shadow
 'autofill:shadow-[10px_0_1000px_theme(backgroundColor.primary-opacity-0-08)_inset]', 'dark:autofill:shadow-[0_0_0px_1000px_theme(backgroundColor.primary-opacity-0-08-dark)_inset]'];
 
-export { InputControl, InputRoot };
+export { Input, InputControl };

package/dist/bundled/v2/components/OrRichTextEditorV3/OrRichTextEditor.js

@@ -11,7 +11,7 @@ import __vue_component__$1 from '../OrButtonV3/OrButton.js';
 import __vue_component__$2 from '../OrErrorV3/OrError.js';
 import __vue_component__$3 from '../OrHintV3/OrHint.js';
 import __vue_component__$4 from '../OrIconButtonV3/OrIconButton.js';
-import { _ as __vue_component__$5 } from '../../OrInput-52dfcc01.js';
+import { _ as __vue_component__$5 } from '../../OrInput-cba841ef.js';
 import __vue_component__$6 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$7 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$8 from '../OrMenuV3/OrMenu.js';

package/dist/bundled/v2/components/OrSearchV3/OrSearch.js

@@ -1,10 +1,10 @@
 import { defineComponent, reactive, ref, computed, toRef, watch } from 'vue-demi';
-import { _ as __vue_component__$1 } from '../../OrInput-52dfcc01.js';
+import { _ as __vue_component__$1 } from '../../OrInput-cba841ef.js';
 import { b as watchDebounced } from '../../index-279e78b9.js';
-import { b as InputBoxSize } from '../../types-ef6428f0.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
+import { a as InputBoxVariant } from '../../types-945b6452.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
@@ -22,9 +22,13 @@ var script = defineComponent({
       type: undefined,
       default: undefined
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
     },
     placeholder: {
       type: String,
@@ -33,10 +37,6 @@ var script = defineComponent({
     debounce: {
       type: Number,
       default: 500
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'search', 'clear'],
@@ -49,7 +49,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);
@@ -108,9 +108,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/bundled/v2/components/OrSearchV3/OrSearch.vue.d.ts

@@ -1,14 +1,17 @@
 import { PropType } from 'vue-demi';
-import { InputBoxSize } from '../or-input-box-v3';
 import { SearchModelValue } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<SearchModelValue>;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
@@ -18,10 +21,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     controlAttributes: {
         required: boolean | undefined;
@@ -48,9 +47,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<SearchModelValue>;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
@@ -60,10 +63,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>> & {
     onSearch?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -75,9 +74,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onClear?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: SearchModelValue;
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     placeholder: string;
     debounce: number;
-    disableDefaultStyles: boolean;
 }>;
 export default _default;

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -15,7 +15,7 @@ import __vue_component__$8 from '../OrExpansionPanelV3/OrExpansionPanel.js';
 import __vue_component__$9 from '../OrHintV3/OrHint.js';
 import __vue_component__$a from '../OrIconV3/OrIcon.js';
 import __vue_component__$b from '../OrIconButtonV3/OrIconButton.js';
-import { _ as __vue_component__$c } from '../../OrInput-52dfcc01.js';
+import { _ as __vue_component__$c } from '../../OrInput-cba841ef.js';
 import __vue_component__$d from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$e from '../OrLabelV3/OrLabel.js';
 import __vue_component__$f from '../OrMenuItemV3/OrMenuItem.js';
@@ -24,7 +24,7 @@ import __vue_component__$h from '../OrSkeletonTextV3/OrSkeletonText.js';
 import { searchItemsByLabel } from '../../helpers/searchItemsByLabel.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
-import { b as InputBoxSize } from '../../types-ef6428f0.js';
+import { a as InputBoxVariant } from '../../types-945b6452.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { include } from '../../utils/include.js';
 import { exclude } from '../../utils/exclude.js';
@@ -634,9 +634,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,
@@ -666,10 +674,6 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    },
     enableSearch: {
       type: Boolean,
       default: false
@@ -724,7 +728,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(() => {
@@ -927,20 +931,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: {
@@ -1032,7 +1038,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/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -1,6 +1,6 @@
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType } from 'vue-demi';
 import { GroupFunction, SearchFunction } from '../../types';
-import { InputBoxSize } from '../or-input-box-v3';
 import { TagsOverflow } from '../or-tags-v3';
 import { SelectItem, SelectModelValue } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
@@ -24,9 +24,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"wrap" | "scroll" | "hidden">;
         default: () => TagsOverflow;
     };
+    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;
@@ -56,10 +64,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     enableSearch: {
         type: BooleanConstructor;
         default: boolean;
@@ -139,9 +143,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"wrap" | "scroll" | "hidden">;
         default: () => TagsOverflow;
     };
+    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;
@@ -171,10 +183,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     enableSearch: {
         type: BooleanConstructor;
         default: boolean;
@@ -201,11 +209,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    anchor: ReferenceElement;
     modelValue: SelectModelValue;
     options: SelectItem[];
     searchOptions: SelectItem[];
     multiple: boolean;
     overflow: "wrap" | "scroll" | "hidden";
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     label: string;
     placeholder: string;
@@ -214,7 +224,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     loading: boolean;
     required: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
     enableSearch: boolean;
     enableClear: boolean;
     searchFunction: SearchFunction<SelectItem>;

package/dist/bundled/v2/components/OrTagInputV3/OrTagInput.js

@@ -9,6 +9,7 @@ import __vue_component__$5 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$6 from '../OrLoaderV3/OrLoader.js';
 import __vue_component__$7 from '../OrTagsV3/OrTags.js';
 import { TagsOverflow } from '../OrTagsV3/props.js';
+import { a as InputBoxVariant } from '../../types-945b6452.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
@@ -41,6 +42,10 @@ var script = defineComponent({
       type: undefined,
       default: () => []
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     label: {
       type: String,
       default: undefined
@@ -73,10 +78,6 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    },
     overflow: {
       type: String,
       default: () => TagsOverflow.Hidden
@@ -112,7 +113,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
@@ -239,7 +240,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 */
@@ -272,7 +273,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,
@@ -437,7 +438,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/bundled/v2/components/OrTagInputV3/OrTagInput.vue.d.ts

@@ -6,6 +6,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<TagInputModelValue>;
         default: () => never[];
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     label: {
         type: StringConstructor;
         default: undefined;
@@ -38,10 +42,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     overflow: {
         type: PropType<"wrap" | "scroll" | "hidden">;
         default: () => TagsOverflow;
@@ -103,6 +103,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<TagInputModelValue>;
         default: () => never[];
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     label: {
         type: StringConstructor;
         default: undefined;
@@ -135,10 +139,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     overflow: {
         type: PropType<"wrap" | "scroll" | "hidden">;
         default: () => TagsOverflow;
@@ -161,6 +161,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     onReset?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: TagInputModelValue;
+    variant: "styled" | "unstyled" | "embedded";
     label: string;
     placeholder: string;
     hint: string;
@@ -169,7 +170,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
     overflow: "wrap" | "scroll" | "hidden";
     enableClear: boolean;
     saveOnBlur: boolean;

package/dist/bundled/v2/components/OrTextareaV3/OrTextarea.js

@@ -5,7 +5,7 @@ import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$4 from '../OrLabelV3/OrLabel.js';
-import { b as InputBoxSize } from '../../types-ef6428f0.js';
+import { b as InputBoxSize, a as InputBoxVariant } from '../../types-945b6452.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
@@ -38,6 +38,10 @@ var script = defineComponent({
       type: String,
       default: 'off'
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
       default: () => InputBoxSize.M
@@ -73,10 +77,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -89,7 +89,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
@@ -132,7 +132,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 */
@@ -163,7 +163,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,
@@ -262,7 +262,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 */