@onereach/ui-components 12.0.1 → 13.0.0

package/dist/bundled/v2/{OrDataGrid-c7fcc3f2.js → OrDataGrid-381900a9.js}

@@ -1,12 +1,20 @@
-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 __vue_component__$t from './components/OrIconV3/OrIcon.js';
-import { isArray } from './utils/isArray.js';
+import __vue_component__$t from './components/OrCheckboxV3/OrCheckbox.js';
+import __vue_component__$u from './components/OrDatePickerV3/OrDatePicker.js';
+import __vue_component__$v from './components/OrDateTimePickerV3/OrDateTimePicker.js';
+import { _ as __vue_component__$w } from './OrInput-cba841ef.js';
+import __vue_component__$x from './components/OrRatingV3/OrRating.js';
+import __vue_component__$y from './components/OrSelectV3/OrSelect.js';
+import __vue_component__$z from './components/OrSwitchV3/OrSwitch.js';
+import __vue_component__$A from './components/OrTagInputV3/OrTagInput.js';
+import __vue_component__$B from './components/OrTimePickerV3/OrTimePicker.js';
+import { useProxyModelValue } from './hooks/useProxyModelValue.js';
+import __vue_component__$C from './components/OrIconV3/OrIcon.js';
 import { DataGrid } from './components/OrDataGridV3/styles.js';
-import __vue_component__$u from './components/OrCheckboxV3/OrCheckbox.js';
-import __vue_component__$v from './components/OrPaginationV3/OrPagination.js';
-import __vue_component__$w from './components/OrSearchV3/OrSearch.js';
-import __vue_component__$x from './components/OrSkeletonTextV3/OrSkeletonText.js';
+import __vue_component__$D from './components/OrPaginationV3/OrPagination.js';
+import __vue_component__$E from './components/OrSearchV3/OrSearch.js';
+import __vue_component__$F from './components/OrSkeletonTextV3/OrSkeletonText.js';
 
 const DataGridFooter = [
 // Layout
@@ -145,18 +153,43 @@ const __vue_component__$p = /*#__PURE__*/normalizeComponent({
 var __vue_component__$q = __vue_component__$p;
 
 const DataGridTableContentCell = [
+// Position
+'relative focus-within:z-10',
 // Layout
 'layout-row',
 // Spacing
 'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark', 'theme-outline-transparent outline-2', 'dark:theme-outline-transparent-dark',
+// Theme (focus)
+'focus-within:theme-border-primary', 'dark:focus-within:theme-border-primary-dark', 'focus-within:theme-outline-primary', 'dark:focus-within:theme-outline-primary-dark',
 // Theme (.sticky-start)
-'[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1', 'dark:[&.sticky-start]:theme-border-disabled-dark',
+'[&.sticky-start]:border-e-disabled', 'dark:[&.sticky-start]:border-e-disabled-dark',
 // Theme (.sticky-end)
-'[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1', 'dark:[&.sticky-end]:theme-border-disabled-dark'];
+'[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
 var script$c = defineComponent({
   name: 'OrDataGridTableContentCell',
+  components: {
+    OrCheckbox: __vue_component__$t,
+    OrDatePicker: __vue_component__$u,
+    OrDateTimePicker: __vue_component__$v,
+    OrInput: __vue_component__$w,
+    OrRating: __vue_component__$x,
+    OrSelect: __vue_component__$y,
+    OrSwitch: __vue_component__$z,
+    OrTagInput: __vue_component__$A,
+    OrTimePicker: __vue_component__$B
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
     column: {
       type: Object,
       default: undefined
@@ -165,13 +198,14 @@ var script$c = defineComponent({
       type: Object,
       default: undefined
     },
-    truncate: {
+    override: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
+  emits: ['update:modelValue'],
   expose: ['root'],
-  setup(props) {
+  setup(props, context) {
     // Refs & Styles
     const root = ref();
     const rootStyles = computed(() => {
@@ -206,10 +240,18 @@ var script$c = defineComponent({
         justifyContent: 'center'
       };
     });
+    // State
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const control = computed(() => {
+      var _a;
+      return (_a = props.column) === null || _a === void 0 ? void 0 : _a.control;
+    });
     return {
       root,
       rootStyles,
-      rootInlineStyles
+      rootInlineStyles,
+      model,
+      control
     };
   }
 });
@@ -226,9 +268,117 @@ var __vue_render__$c = 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__$c = [];
 
@@ -405,7 +555,9 @@ const DataGridTableFooterCell = [
 // Layout
 'layout-row',
 // Spacing
-'px-sm+', 'py-0', 'gap-xs'];
+'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark'];
 
 var script$9 = defineComponent({
   name: 'OrDataGridTableFooterCell',
@@ -590,15 +742,17 @@ const DataGridTableHeaderCell = [
 'layout-row',
 // Spacing
 'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark',
 // Theme (.sticky-start)
-'[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1', 'dark:[&.sticky-start]:theme-border-disabled-dark',
+'[&.sticky-start]:border-e-disabled', 'dark:[&.sticky-start]:border-e-disabled-dark',
 // Theme (.sticky-end)
-'[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1', 'dark:[&.sticky-end]:theme-border-disabled-dark'];
+'[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
 
 var script$6 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: __vue_component__$t
+    OrIcon: __vue_component__$C
   },
   model: {
     prop: 'modelValue',
@@ -616,12 +770,9 @@ var script$6 = defineComponent({
     features: {
       type: Object,
       default: undefined
-    },
-    truncate: {
-      type: Boolean,
-      default: true
     }
   },
+  emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -719,9 +870,9 @@ var __vue_render__$6 = 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'
     }
@@ -960,7 +1111,9 @@ const DataGridTable = [
 // Overflow
 'overflow-auto',
 // Interactivity
-'interactivity-default'];
+'interactivity-default',
+// Spacing
+'-mx-[calc(theme(outlineWidth.2))]', '-my-0', 'px-[calc(theme(outlineWidth.2))]', 'py-0'];
 
 var script$2 = defineComponent({
   name: 'OrDataGridTable',
@@ -982,14 +1135,11 @@ var script$2 = defineComponent({
     const rootInlineStyles = computed(() => {
       const gridTemplateColumns = props.columns.map(column => {
         var _a;
-        if (isArray(column.width)) {
-          return `minmax(${column.width[0]}, ${column.width[1]})`;
-        }
         return (_a = column.width) !== null && _a !== void 0 ? _a : 'auto';
       });
       if (props.features.selecting) {
         return {
-          gridTemplateColumns: `auto ${gridTemplateColumns.join(' ')}`
+          gridTemplateColumns: `0fr ${gridTemplateColumns.join(' ')}`
         };
       }
       return {
@@ -1100,7 +1250,7 @@ var __vue_component__$2 = __vue_component__$1;
 var script = defineComponent({
   name: 'OrDataGrid',
   components: {
-    OrCheckbox: __vue_component__$u,
+    OrCheckbox: __vue_component__$t,
     OrDataGridFooter: __vue_component__$s,
     OrDataGridHeader: __vue_component__$q,
     OrDataGridTable: __vue_component__$4,
@@ -1115,9 +1265,9 @@ var script = defineComponent({
     OrDataGridTableHeaderRow: __vue_component__$a,
     OrDataGridTablePlaceholder: __vue_component__$6,
     OrDataGridToolbar: __vue_component__$2,
-    OrPagination: __vue_component__$v,
-    OrSearch: __vue_component__$w,
-    OrSkeletonText: __vue_component__$x
+    OrPagination: __vue_component__$D,
+    OrSearch: __vue_component__$E,
+    OrSkeletonText: __vue_component__$F
   },
   model: {
     prop: 'modelValue',
@@ -1149,7 +1299,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:item'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -1348,7 +1498,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', {
@@ -1356,7 +1506,7 @@ var __vue_render__ = function () {
         attrs: {
           "column": column,
           "features": _vm.features,
-          "truncate": false
+          "override": true
         }
       }, [_c('OrSkeletonText')], 1);
     })], 2);
@@ -1367,7 +1517,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
       },
@@ -1384,6 +1538,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/bundled/v2/{OrInput-52dfcc01.js → OrInput-cba841ef.js}

@@ -1,5 +1,5 @@
 import { defineComponent, reactive, ref, computed, toRef } from 'vue-demi';
-import { InputRoot, InputControl } from './components/OrInputV3/styles.js';
+import { Input, InputControl } from './components/OrInputV3/styles.js';
 import __vue_component__$1 from './components/OrErrorV3/OrError.js';
 import __vue_component__$2 from './components/OrHintV3/OrHint.js';
 import __vue_component__$3 from './components/OrIconV3/OrIcon.js';
@@ -7,10 +7,10 @@ import __vue_component__$4 from './components/OrIconButtonV3/OrIconButton.js';
 import __vue_component__$5 from './components/OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from './components/OrLabelV3/OrLabel.js';
 import __vue_component__$7 from './components/OrLoaderV3/OrLoader.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 useResponsive from './hooks/useResponsive/useResponsive.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -56,9 +56,13 @@ var script = defineComponent({
       type: String,
       default: 'off'
     },
+    variant: {
+      type: String,
+      default: undefined
+    },
     size: {
       type: String,
-      default: () => InputBoxSize.M
+      default: undefined
     },
     label: {
       type: String,
@@ -91,10 +95,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -107,7 +107,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
@@ -154,7 +154,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 */
@@ -185,7 +185,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,
@@ -327,7 +327,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/bundled/v2/components/OrAutocompleteV3/OrAutocomplete.js

@@ -10,11 +10,11 @@ import __vue_component__$6 from '../OrLoaderV3/OrLoader.js';
 import __vue_component__$7 from '../OrMenuItemV3/OrMenuItem.js';
 import __vue_component__$8 from '../OrPopoverV3/OrPopover.js';
 import __vue_component__$9 from '../OrTagInputV3/OrTagInput.js';
-import { b as InputBoxSize } from '../../types-ef6428f0.js';
 import { TagsOverflow } from '../OrTagsV3/props.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 useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { include } from '../../utils/include.js';
@@ -57,9 +57,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,
@@ -93,10 +97,6 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    },
     enableClear: {
       type: Boolean,
       default: false
@@ -118,7 +118,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;
@@ -252,13 +252,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: {
@@ -288,7 +288,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/bundled/v2/components/OrAutocompleteV3/OrAutocomplete.vue.d.ts

@@ -1,6 +1,5 @@
 import { PropType } from 'vue-demi';
 import { SearchFunction } from '../../types';
-import { InputBoxSize } from '../or-input-box-v3';
 import { TagsOverflow } from '../or-tags-v3';
 import { AutocompleteModelValue, AutocompleteValue } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
@@ -20,9 +19,13 @@ 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;
     };
     label: {
         type: StringConstructor;
@@ -56,10 +59,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     enableClear: {
         type: BooleanConstructor;
         default: boolean;
@@ -123,9 +122,13 @@ 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;
     };
     label: {
         type: StringConstructor;
@@ -159,10 +162,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     enableClear: {
         type: BooleanConstructor;
         default: boolean;
@@ -183,6 +182,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     items: string[];
     multiple: boolean;
     overflow: "wrap" | "scroll" | "hidden";
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     label: string;
     placeholder: string;
@@ -192,7 +192,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
     enableClear: boolean;
     searchFunction: SearchFunction<string>;
 }>;

package/dist/bundled/v2/components/OrCombinedInputV3/OrCombinedInput.js

@@ -3,7 +3,7 @@ import { CombinedInput, CombinedInputControlGroup } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrLabelV3/OrLabel.js';
-import { b as InputBoxSize } from '../../types-ef6428f0.js';
+import { a as InputBoxVariant } from '../../types-945b6452.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -14,9 +14,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,
@@ -41,17 +45,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,
@@ -90,12 +90,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",