@onereach/ui-components 2.71.1-beta.2220.0 → 2.71.1-beta.2222.0

package/dist/bundled/v2/{OrCardCollection-0141a358.js → OrCardCollection-d71d2dcf.js}

@@ -6,7 +6,7 @@ import { O as OrButton } from './OrButton-a846fa7e.js';
 import { O as OrMenu } from './OrMenu-fa47c888.js';
 import { O as OrMenuItem } from './OrMenuItem-26420908.js';
 import { O as OrIcon } from './OrIcon-8625385f.js';
-import { O as OrSearch } from './OrSearch-53470b0e.js';
+import { O as OrSearch } from './OrSearch-4395247a.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 
 const CardCollectionRoot = [

package/dist/bundled/v2/{OrCheckbox-dbef9f9a.js → OrCheckbox-4f665252.js}

@@ -186,14 +186,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-2076b35e_0", {
-    source: "input[data-v-2076b35e]{appearance:none;line-height:0}",
+  inject("data-v-83421e44_0", {
+    source: "input[data-v-83421e44]{appearance:none;line-height:0}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-2076b35e";
+const __vue_scope_id__ = "data-v-83421e44";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/{OrConfirm-057e997e.js → OrConfirm-2702f4e3.js}

@@ -3,7 +3,7 @@ import { l as logicAnd } from './index-17f264f9.js';
 import './index-fa6eb4ca.js';
 import { O as OrOverlay } from './OrOverlay-3c89d622.js';
 import { O as OrButton, a as ButtonColor } from './OrButton-a846fa7e.js';
-import { O as OrInput } from './OrInput-82ccfe00.js';
+import { O as OrInput } from './OrInput-a7573d82.js';
 import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/bundled/v2/{OrInlineInput-87589946.js → OrInlineInput-eaacc682.js}

@@ -20,8 +20,8 @@ const InlineInputRoot = [
 // Spacing
 'gap-xs'];
 const InlineInputControl = [
-// Layout
-'grow',
+// Box
+'w-full',
 // Typography
 'typography-inherit',
 // Theme

package/dist/bundled/v2/{OrInlineTextarea-21b0e6fc.js → OrInlineTextarea-9f292005.js}

@@ -14,8 +14,8 @@ const InlineTextareaRoot = [
 // Spacing
 'gap-xs'];
 const InlineTextareaControl = [
-// Layout
-'grow',
+// Box
+'w-full',
 // Typography
 'typography-inherit',
 // Theme

package/dist/bundled/v2/{OrInput-82ccfe00.js → OrInput-a7573d82.js}

@@ -3,8 +3,9 @@ import { O as OrError } from './OrError-aad17598.js';
 import { O as OrHint } from './OrHint-f38a1940.js';
 import { O as OrIcon } from './OrIcon-8625385f.js';
 import { O as OrIconButton } from './OrIconButton-a2ba92df.js';
-import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-79ec54ad.js';
+import { O as OrInputBox } from './OrInputBox-da25bec2.js';
 import { O as OrLabel } from './OrLabel-172c4b89.js';
+import { a as InputBoxSize } from './props-78496a2d.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, getCurrentInstance, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -24,8 +25,8 @@ const InputRoot = [
 // Spacing
 'gap-xs'];
 const InputControl = [
-// Layout
-'grow',
+// Box
+'w-full',
 // Typography
 'typography-inherit',
 // Theme
@@ -151,10 +152,10 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('div', {
+  return _c('div', _vm._b({
     ref: "root",
     class: _vm.rootStyles
-  }, [_vm.label ? [_c('OrLabel', {
+  }, 'div', _vm.$attrs, false), [_vm.label ? [_c('OrLabel', {
     attrs: {
       "control-id": _vm.controlId,
       "variant": 'input',
@@ -176,7 +177,7 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [(_vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type) === 'checkbox' ? _c('input', _vm._b({
+  }, [(_vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type) === 'checkbox' ? _c('input', {
     directives: [{
       name: "model",
       rawName: "v-model",
@@ -190,6 +191,8 @@ var __vue_render__ = function () {
       "placeholder": _vm.placeholder,
       "required": _vm.required,
       "disabled": _vm.disabled,
+      "readonly": _vm.readonly,
+      "maxlength": _vm.maxLength,
       "type": "checkbox"
     },
     domProps: {
@@ -225,7 +228,7 @@ var __vue_render__ = function () {
         }
       }
     }
-  }, 'input', _vm.$attrs, false)) : (_vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type) === 'radio' ? _c('input', _vm._b({
+  }) : (_vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type) === 'radio' ? _c('input', {
     directives: [{
       name: "model",
       rawName: "v-model",
@@ -239,6 +242,8 @@ var __vue_render__ = function () {
       "placeholder": _vm.placeholder,
       "required": _vm.required,
       "disabled": _vm.disabled,
+      "readonly": _vm.readonly,
+      "maxlength": _vm.maxLength,
       "type": "radio"
     },
     domProps: {
@@ -261,7 +266,7 @@ var __vue_render__ = function () {
         _vm.proxyModelValue = null;
       }
     }
-  }, 'input', _vm.$attrs, false)) : _c('input', _vm._b({
+  }) : _c('input', {
     directives: [{
       name: "model",
       rawName: "v-model",
@@ -275,6 +280,8 @@ var __vue_render__ = function () {
       "placeholder": _vm.placeholder,
       "required": _vm.required,
       "disabled": _vm.disabled,
+      "readonly": _vm.readonly,
+      "maxlength": _vm.maxLength,
       "type": _vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type
     },
     domProps: {
@@ -300,7 +307,7 @@ var __vue_render__ = function () {
         _vm.proxyModelValue = $event.target.value;
       }
     }
-  }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('div', {
+  }), _vm._v(" "), _vm.type !== 'text' ? [_c('div', {
     class: ['layout-row']
   }, [_vm.type === 'password' ? [_c('OrIconButton', {
     attrs: {
@@ -334,7 +341,7 @@ var __vue_render__ = function () {
       "icon": 'search',
       "variant": 'outlined'
     }
-  })]] : _vm._e()], 2)]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
+  })]] : _vm._e()], 2)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     },
@@ -363,14 +370,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-677a1aa4_0", {
-    source: "input[data-v-677a1aa4]{min-width:0;background:0 0;outline:0}input[type=number][data-v-677a1aa4]::-webkit-inner-spin-button{display:none}input[type=search][data-v-677a1aa4]::-webkit-search-cancel-button{display:none}",
+  inject("data-v-2cb9359c_0", {
+    source: "input[data-v-2cb9359c]{min-width:0;background:0 0;outline:0}input[type=number][data-v-2cb9359c]::-webkit-inner-spin-button{display:none}input[type=search][data-v-2cb9359c]::-webkit-search-cancel-button{display:none}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-677a1aa4";
+const __vue_scope_id__ = "data-v-2cb9359c";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/{OrInputBox-79ec54ad.js → OrInputBox-da25bec2.js}

@@ -1,19 +1,9 @@
 import './index-fa6eb4ca.js';
+import { I as InputBoxVariant, a as InputBoxSize } from './props-78496a2d.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-var InputBoxVariant;
-(function (InputBoxVariant) {
-  InputBoxVariant["Styled"] = "styled";
-  InputBoxVariant["Unstyled"] = "unstyled";
-})(InputBoxVariant || (InputBoxVariant = {}));
-var InputBoxSize;
-(function (InputBoxSize) {
-  InputBoxSize["M"] = "m";
-  InputBoxSize["S"] = "s";
-})(InputBoxSize || (InputBoxSize = {}));
-
 const InputBoxRoot = [
 // Layout
 'layout-row',
@@ -44,7 +34,7 @@ const InputBoxRootVariants = {
 const InputBoxRootSizes = {
   'm': [
   // Box
-  'children:min-h-[34px]',
+  'children:min-h-[46px] children:md:min-h-[34px]',
   // Spacing
   'first-child:pl-md first-child:md:pl-sm+', 'last-child:pr-md last-child:md:pr-sm+', 'children:pt-[11px] children:md:pt-[7px]', 'children:pb-[11px] children:md:pb-[6px]', 'gap-sm+ md:gap-sm',
   // Typography
@@ -137,4 +127,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 var OrInputBox = __vue_component__;
 
-export { InputBoxVariant as I, OrInputBox as O, InputBoxSize as a };
+export { OrInputBox as O };

package/dist/bundled/v2/{OrRadio-cd39b20b.js → OrRadio-a60fc5c0.js}

@@ -168,14 +168,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-3a964458_0", {
-    source: "input[data-v-3a964458]{appearance:none;line-height:0}",
+  inject("data-v-f9edd250_0", {
+    source: "input[data-v-f9edd250]{appearance:none;line-height:0}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-3a964458";
+const __vue_scope_id__ = "data-v-f9edd250";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/{OrSearch-53470b0e.js → OrSearch-4395247a.js}

@@ -1,9 +1,9 @@
 import './index-fa6eb4ca.js';
 import { debouncedWatch } from '@vueuse/core';
-import { O as OrInput } from './OrInput-82ccfe00.js';
+import { O as OrInput } from './OrInput-a7573d82.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
-import { a as InputBoxSize } from './OrInputBox-79ec54ad.js';
+import { a as InputBoxSize } from './props-78496a2d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({

package/dist/bundled/v2/{OrSelect-02fb39f0.js → OrSelect-d7e1dd43.js}

@@ -1,11 +1,11 @@
 import './index-fa6eb4ca.js';
-import { O as OrCheckbox } from './OrCheckbox-dbef9f9a.js';
+import { O as OrCheckbox } from './OrCheckbox-4f665252.js';
 import { O as OrError } from './OrError-aad17598.js';
 import { O as OrExpansionPanel } from './OrExpansionPanel-d9a260e2.js';
 import { O as OrHint } from './OrHint-f38a1940.js';
 import { O as OrIcon } from './OrIcon-8625385f.js';
-import { O as OrInput } from './OrInput-82ccfe00.js';
-import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-79ec54ad.js';
+import { O as OrInput } from './OrInput-a7573d82.js';
+import { O as OrInputBox } from './OrInputBox-da25bec2.js';
 import { O as OrLabel } from './OrLabel-172c4b89.js';
 import { O as OrMenuItem } from './OrMenuItem-26420908.js';
 import { O as OrPopover } from './OrPopover-5dc240f1.js';
@@ -14,6 +14,7 @@ import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e2a93aaf.
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { u as useOverflow } from './useOverflow-bae6342f.js';
 import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { a as InputBoxSize } from './props-78496a2d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const SelectRoot = [
@@ -23,7 +24,9 @@ const SelectRoot = [
 'gap-xs'];
 const SelectControl = [
 // Layout
-'layout-row grow',
+'layout-row',
+// Box
+'w-full',
 // Overflow
 'overflow-hidden',
 // Spacing

package/dist/bundled/v2/OrSidebar-c95ef614.js

@@ -0,0 +1,230 @@
+import { useDraggable, useElementBounding } from '@vueuse/core';
+import _ from 'lodash';
+import './index-fa6eb4ca.js';
+import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var OrSidebarPlacement;
+(function (OrSidebarPlacement) {
+  OrSidebarPlacement["left"] = "left";
+  OrSidebarPlacement["right"] = "right";
+})(OrSidebarPlacement || (OrSidebarPlacement = {}));
+
+const SidebarRoot = [
+// Position
+'relative',
+// Layout
+'flex', 'flex-col', 'shrink-0',
+// Box
+'min-h-0', 'p-0'];
+const SidebarRootSides = {
+  [OrSidebarPlacement.left]: [
+  // Borders
+  'border-r-[1px]', 'border-r-solid', 'border-r-secondary dark:border-r-secondary-dark'],
+  [OrSidebarPlacement.right]: [
+  // Borders
+  'border-l-[1px]', 'border-l-solid', 'border-l-secondary dark:border-l-secondary-dark']
+};
+const SidebarResize = [
+// Position
+'absolute', 'inset-y-none', 'z-[1]',
+// Box
+'w-[12px]', 'h-[100%]',
+// Cursor
+'cursor-ew-resize'];
+const SidebarResizeSides = {
+  [OrSidebarPlacement.left]: [
+  // Position
+  '-right-[1px]',
+  // Borders
+  'hover:border-r-2', 'hover:border-r-primary hover:dark:border-r-primary-dark',
+  // Transition
+  'transition-[border-right]'],
+  [OrSidebarPlacement.right]: [
+  // Position
+  '-left-[1px]',
+  // Borders
+  'hover:border-l-2', 'hover:border-l-primary hover:dark:border-l-primary-dark',
+  // Transition
+  'transition-[border-left]']
+};
+const SidebarResizingSides = {
+  [OrSidebarPlacement.left]: [
+  // Borders
+  'border-r-2', 'border-r-primary dark:border-r-primary-dark'],
+  [OrSidebarPlacement.right]: [
+  // Borders
+  'border-l-2', 'border-l-primary dark:border-l-primary-dark']
+};
+const SidebarMain = [
+// Layout
+'flex', 'flex-col', 'grow',
+// Box
+'min-h-0'];
+const SidebarHeader = [
+// Sizing
+'p-md'];
+const SidebarContent = [
+// Layout
+'grow', 'overflow-auto',
+// Sizing
+'p-md'];
+const SidebarFooter = [
+// Sizing
+'p-md',
+// Borders
+'border-t-[1px]', 'border-t-solid', 'border-t-secondary dark:border-t-secondary-dark'];
+
+var script = defineComponent({
+  name: 'OrSidebar',
+  props: {
+    width: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: value => _.isNumber(value) && value >= 0
+    },
+    minimumWidth: {
+      type: Number,
+      required: false,
+      default: 350,
+      validator: value => _.isNumber(value) && value >= 0
+    },
+    /**
+     * User may put the component on the right or the left side of a container.
+     * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
+     *
+     * Note: the property doesn't reposition the component in the parent container.
+     * @values left, right
+     */
+    side: {
+      type: String,
+      default: OrSidebarPlacement.right,
+      validator: value => _.includes(_.values(OrSidebarPlacement), value)
+    }
+  },
+  emits: ['change:width'],
+  setup(props, {
+    emit
+  }) {
+    // Refs
+    const root = ref();
+    const resizeBar = ref(null);
+    const parentContainer = computed(() => {
+      var _a;
+      return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
+    });
+    // State
+    const startPositionX = ref(0);
+    const isResizing = ref(false);
+    const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
+    // Styles
+    const sidebarStyle = computed(() => ({
+      width: localWidth.value + 'px'
+    }));
+    const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot, ...SidebarRootSides[props.side]]);
+    const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
+    const mainStyles = computed(() => [...SidebarMain]);
+    const headerStyles = computed(() => [...SidebarHeader]);
+    const contentStyles = computed(() => [...SidebarContent]);
+    const footerStyles = computed(() => [...SidebarFooter]);
+    // Effects
+    useDraggable(resizeBar, {
+      preventDefault: true,
+      onStart: (position, event) => {
+        document.body.style.cursor = 'ew-resize';
+        document.body.style.userSelect = 'none';
+        startPositionX.value = event.x;
+        isResizing.value = true;
+      },
+      onMove: position => {
+        const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
+        const newWidth = localWidth.value - delta;
+        localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
+        startPositionX.value = position.x;
+      },
+      onEnd: () => {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        isResizing.value = false;
+      }
+    });
+    const {
+      width: maximumWidth
+    } = useElementBounding(parentContainer);
+    watch(() => props.width, newValue => {
+      if (newValue !== localWidth.value) {
+        localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
+      }
+    });
+    watch(() => props.minimumWidth, newMinimum => {
+      if (newMinimum > localWidth.value) localWidth.value = newMinimum;
+    });
+    watch(maximumWidth, newMaximum => {
+      if (newMaximum < localWidth.value) localWidth.value = newMaximum;
+    });
+    watch(localWidth, val => emit('change:width', val));
+    return {
+      root,
+      resizeBar,
+      isResizing,
+      localWidth,
+      sidebarStyle,
+      rootStyles,
+      resizeStyles,
+      mainStyles,
+      headerStyles,
+      contentStyles,
+      footerStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('aside', {
+    ref: "root",
+    class: _vm.rootStyles,
+    style: _vm.sidebarStyle
+  }, [_c('div', {
+    ref: "resizeBar",
+    class: _vm.resizeStyles
+  }), _vm._v(" "), _c('div', {
+    class: _vm.mainStyles
+  }, [_vm.$slots.header ? _c('div', {
+    class: _vm.headerStyles
+  }, [_vm._t("header")], 2) : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t("default")], 2)]), _vm._v(" "), _vm.$slots.footer ? _c('div', {
+    class: _vm.footerStyles
+  }, [_vm._t("footer")], 2) : _vm._e()]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var __vue_component__$1 = __vue_component__;
+
+export { OrSidebarPlacement as O, __vue_component__$1 as _ };

package/dist/bundled/v2/{OrSwitch-237a2081.js → OrSwitch-fe9b7de7.js}

@@ -220,14 +220,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-bd0f51ac_0", {
-    source: "input[data-v-bd0f51ac]{appearance:none;line-height:0}",
+  inject("data-v-3bd834ea_0", {
+    source: "input[data-v-3bd834ea]{appearance:none;line-height:0}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-bd0f51ac";
+const __vue_scope_id__ = "data-v-3bd834ea";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/{OrTextarea-5593fbe9.js → OrTextarea-76a2963b.js}

@@ -1,10 +1,11 @@
 import './index-fa6eb4ca.js';
 import { O as OrError } from './OrError-aad17598.js';
 import { O as OrHint } from './OrHint-f38a1940.js';
-import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-79ec54ad.js';
+import { O as OrInputBox } from './OrInputBox-da25bec2.js';
 import { O as OrLabel } from './OrLabel-172c4b89.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, getCurrentInstance, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { a as InputBoxSize } from './props-78496a2d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { c as createInjector } from './browser-82dea9ed.js';
 
@@ -14,8 +15,8 @@ const TextareaRoot = [
 // Spacing
 'gap-xs'];
 const TextareaControl = [
-// Layout
-'grow',
+// Box
+'w-full',
 // Typography
 'typography-inherit',
 // Theme
@@ -121,10 +122,10 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('div', {
+  return _c('div', _vm._b({
     ref: "root",
     class: _vm.rootStyles
-  }, [_vm.label ? [_c('OrLabel', {
+  }, 'div', _vm.$attrs, false), [_vm.label ? [_c('OrLabel', {
     attrs: {
       "control-id": _vm.controlId,
       "variant": 'input',
@@ -145,7 +146,7 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [_c('textarea', _vm._b({
+  }, [_c('textarea', {
     directives: [{
       name: "model",
       rawName: "v-model",
@@ -157,7 +158,9 @@ var __vue_render__ = function () {
       "id": _vm.controlId,
       "placeholder": _vm.placeholder,
       "required": _vm.required,
-      "disabled": _vm.disabled
+      "disabled": _vm.disabled,
+      "readonly": _vm.readonly,
+      "maxlength": _vm.maxLength
     },
     domProps: {
       "value": _vm.proxyModelValue
@@ -182,7 +185,7 @@ var __vue_render__ = function () {
         _vm.proxyModelValue = $event.target.value;
       }
     }
-  }, 'textarea', _vm.$attrs, false))]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
+  })]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     },
@@ -211,14 +214,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-61af6ad5_0", {
-    source: "textarea[data-v-61af6ad5]{min-width:0;background:0 0;outline:0}",
+  inject("data-v-3c0ea336_0", {
+    source: "textarea[data-v-3c0ea336]{min-width:0;background:0 0;outline:0}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-61af6ad5";
+const __vue_scope_id__ = "data-v-3c0ea336";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */