@onereach/ui-components 13.2.3-beta.4661.0 → 13.2.3-beta.4665.0

package/dist/esm/v2/{OrRangeSlider-d8d0a2f5.js → OrRangeSlider-58dad70b.js}

@@ -5,7 +5,7 @@ import './dom-53c9635b.js';
 import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-d5250220.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-b29efe08.js';
 import { _ as __vue_component__$1 } from './OrTooltip-07c5992f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -294,8 +294,7 @@ var script = defineComponent({
     const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
-    const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color], 'touch-none' // Required for proper work on mobile
-    ]);
+    const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...RangeSliderBreakpointMark, ...RangeSliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
     const labelMarkStyles = computed(() => [...RangeSliderLabelMark, ...RangeSliderLabelMarkOrientations[props.orientation]]);

package/dist/esm/v2/{OrSlider-3d8de563.js → OrSlider-6a373c9b.js}

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

package/dist/esm/v2/{OrSlider.vue_rollup-plugin-vue_script-d5250220.js → OrSlider.vue_rollup-plugin-vue_script-b29efe08.js}

@@ -271,8 +271,7 @@ var script = defineComponent({
       }
     });
     const thumb = ref();
-    const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color], 'touch-none' // Required for proper work on mobile
-    ]);
+    const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
     const labelMarkStyles = computed(() => [...SliderLabelMark, ...SliderLabelMarkOrientations[props.orientation]]);

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

@@ -3,6 +3,7 @@ import { defineComponent, reactive, ref, computed, toRef } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-3a339b79.js';
 import './TimeFormat-a7f5565b.js';
 import './dom-53c9635b.js';
+import { i as isObject } from './isObject-4d5300e9.js';
 import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
@@ -21,8 +22,6 @@ const Textarea = [
 // Spacing
 'gap-xs'];
 const TextareaControl = [
-// Interactivity
-'resize-none',
 // Box
 'w-full',
 // Typography
@@ -32,10 +31,10 @@ const TextareaControl = [
 const TextareaControlSizes = {
   [InputBoxSize.M]: [
   // Spacing
-  'pt-sm+* md:pt-sm*'],
+  '!mx-0', 'px-md md:px-sm+', 'py-sm+* md:py-sm*'],
   [InputBoxSize.S]: [
   // Spacing
-  'pt-sm*']
+  '!mx-0', 'px-md md:px-sm+', 'py-sm*']
 };
 
 var script = defineComponent({
@@ -71,9 +70,9 @@ var script = defineComponent({
       type: String,
       default: () => InputBoxSize.M
     },
-    maxHeight: {
-      type: String,
-      default: undefined
+    rows: {
+      type: [Number, Object],
+      default: 2
     },
     label: {
       type: String,
@@ -116,7 +115,19 @@ var script = defineComponent({
     const root = ref();
     const rootStyles = computed(() => ['or-textarea-v3', ...Textarea, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const control = ref();
-    const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size]]);
+    const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size], ...(isObject(props.rows) ? ['resize-none'] : [])]);
+    const controlInlineStyles = computed(() => {
+      if (control.value) {
+        const paddingTop = Number(getComputedStyle(control.value).getPropertyValue('padding-top').match(/^(?<value>\d+)px$/).groups.value);
+        const paddingBottom = Number(getComputedStyle(control.value).getPropertyValue('padding-bottom').match(/^(?<value>\d+)px$/).groups.value);
+        const lineHeight = Number(getComputedStyle(control.value).getPropertyValue('line-height').match(/^(?<value>\d+)px$/).groups.value);
+        return {
+          minHeight: `${paddingTop + paddingBottom + (isObject(props.rows) ? props.rows.min : props.rows) * lineHeight}px`,
+          maxHeight: isObject(props.rows) && props.rows.max ? `${paddingTop + paddingBottom + props.rows.max * lineHeight}px` : undefined
+        };
+      }
+      return {};
+    });
     // State
     const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: ref('')
@@ -138,16 +149,21 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // Effects
-    useTextareaAutosize({
-      element: control,
-      input: model
-    });
+    if (isObject(props.rows)) {
+      // Unluckily, `useTextareaAutosize` doesn't have a teardown function
+      // So, dynamically changed `rows` won't have any effect
+      useTextareaAutosize({
+        element: control,
+        input: model
+      });
+    }
     return {
       attributes,
       root,
       rootStyles,
       control,
       controlStyles,
+      controlInlineStyles,
       model,
       length,
       maxLength,
@@ -157,7 +173,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "textarea[data-v-5a0794ae]{min-width:0;background:0 0;outline:0}";
+var css_248z = "textarea[data-v-7988e64b]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -206,11 +222,10 @@ var __vue_render__ = function () {
     }],
     ref: 'control',
     class: _vm.controlStyles,
-    style: {
-      maxHeight: _vm.maxHeight
-    },
+    style: _vm.controlInlineStyles,
     attrs: {
       "name": _vm.name,
+      "rows": _vm.rows,
       "autocomplete": _vm.autocomplete,
       "placeholder": _vm.placeholder,
       "required": _vm.required,
@@ -287,7 +302,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-5a0794ae";
+const __vue_scope_id__ = "data-v-7988e64b";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/components/index.js

@@ -100,7 +100,7 @@ export { _ as OrRadio } from '../OrRadio-7077aacc.js';
 export { _ as OrRadioGroup } from '../OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from '../OrRadioGroup-ad1ffc12.js';
 export { _ as OrRadioV3 } from '../OrRadio-c866dfc1.js';
-export { _ as OrRangeSliderV3 } from '../OrRangeSlider-d8d0a2f5.js';
+export { _ as OrRangeSliderV3 } from '../OrRangeSlider-58dad70b.js';
 export { _ as OrRatingV3, R as RatingVariant } from '../OrRating-7c968949.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../OrResizeablePanel-4069d595.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from '../OrRichTextEditor-71fb65c1.js';
@@ -120,8 +120,8 @@ export { _ as OrSkeletonCircleV3 } from '../OrSkeletonCircle-88272bb7.js';
 export { _ as OrSkeletonRectV3 } from '../OrSkeletonRect-c38eb161.js';
 export { _ as OrSkeletonTextV3 } from '../OrSkeletonText-b6e51e70.js';
 export { _ as OrSlider } from '../OrSlider-baad996a.js';
-export { _ as OrSliderV3 } from '../OrSlider-3d8de563.js';
-export { S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-d5250220.js';
+export { _ as OrSliderV3 } from '../OrSlider-6a373c9b.js';
+export { S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-b29efe08.js';
 export { _ as OrSortingV3 } from '../OrSorting-f71ae3b3.js';
 export { _ as OrStatusV3, a as StatusSize, S as StatusVariant } from '../OrStatus-9a6a42fa.js';
 export { _ as OrStepper } from '../OrStepper-582cd0d4.js';
@@ -140,7 +140,7 @@ export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-424c7f33.js';
 export { _ as OrTextV3 } from '../OrText-cab6adea.js';
 export { _ as OrTextarea } from '../OrTextarea-62ad6213.js';
-export { _ as OrTextareaV3 } from '../OrTextarea-899e5220.js';
+export { _ as OrTextareaV3 } from '../OrTextarea-ef4fd48a.js';
 export { _ as OrTextbox, T as TextboxTypes } from '../OrTextbox-45f6d684.js';
 export { _ as OrTimeFormatV3 } from '../OrTimeFormat-d43b747d.js';
 export { _ as OrTimePickerV3 } from '../OrTimePicker-3707cf6e.js';

package/dist/esm/v2/components/or-range-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-d8d0a2f5.js';
+export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-58dad70b.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
@@ -8,7 +8,7 @@ import 'lodash/isElement';
 import '../../useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrSlider.vue_rollup-plugin-vue_script-d5250220.js';
+import '../../OrSlider.vue_rollup-plugin-vue_script-b29efe08.js';
 import '../../OrTooltip-07c5992f.js';
 import '../../usePopoverState-7267fa91.js';
 import '../../OrPopover-45e2dbce.js';

package/dist/esm/v2/components/or-slider-v3/index.js

@@ -1,5 +1,5 @@
-export { _ as OrSliderV3 } from '../../OrSlider-3d8de563.js';
-export { S as SliderColor, a as SliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-d5250220.js';
+export { _ as OrSliderV3 } from '../../OrSlider-6a373c9b.js';
+export { S as SliderColor, a as SliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-b29efe08.js';
 import '../../normalize-component-6e8e3d80.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/esm/v2/components/or-textarea-v3/OrTextarea.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { InputBoxSize } from '../or-input-box-v3';
-import { TextareaModelValue } from './types';
+import { TextareaModelValue, TextareaRows } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<TextareaModelValue>;
@@ -22,9 +22,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"m" | "s">;
         default: () => InputBoxSize;
     };
-    maxHeight: {
-        type: StringConstructor;
-        default: undefined;
+    rows: {
+        type: PropType<TextareaRows>;
+        default: number;
     };
     label: {
         type: StringConstructor;
@@ -72,6 +72,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     control: import("vue-demi").Ref<HTMLTextAreaElement | undefined>;
     controlStyles: import("vue-demi").ComputedRef<string[]>;
+    controlInlineStyles: import("vue-demi").ComputedRef<{
+        minHeight: string;
+        maxHeight: string | undefined;
+    } | {
+        minHeight?: undefined;
+        maxHeight?: undefined;
+    }>;
     model: import("../../hooks").UseProxyModelValueReturn<string>;
     length: import("vue-demi").ComputedRef<number>;
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
@@ -98,9 +105,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"m" | "s">;
         default: () => InputBoxSize;
     };
-    maxHeight: {
-        type: StringConstructor;
-        default: undefined;
+    rows: {
+        type: PropType<TextareaRows>;
+        default: number;
     };
     label: {
         type: StringConstructor;
@@ -143,7 +150,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     autocomplete: string;
     variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
-    maxHeight: string;
+    rows: TextareaRows;
     label: string;
     placeholder: string;
     hint: string;

package/dist/esm/v2/components/or-textarea-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrTextareaV3 } from '../../OrTextarea-899e5220.js';
+export { _ as OrTextareaV3 } from '../../OrTextarea-ef4fd48a.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../useIdAttribute-3a339b79.js';
@@ -6,6 +6,7 @@ import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';
 import 'lodash/get';
 import 'lodash/isElement';
+import '../../isObject-4d5300e9.js';
 import '../../useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';

package/dist/esm/v2/components/or-textarea-v3/types.d.ts

@@ -1,2 +1,6 @@
 import { ModelValue } from '../../types';
 export type TextareaModelValue = ModelValue<string>;
+export type TextareaRows = number | {
+    min: number;
+    max?: number;
+};

package/dist/esm/v2/index.js

@@ -100,7 +100,7 @@ export { _ as OrRadio } from './OrRadio-7077aacc.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from './OrRadioGroup-ad1ffc12.js';
 export { _ as OrRadioV3 } from './OrRadio-c866dfc1.js';
-export { _ as OrRangeSliderV3 } from './OrRangeSlider-d8d0a2f5.js';
+export { _ as OrRangeSliderV3 } from './OrRangeSlider-58dad70b.js';
 export { _ as OrRatingV3, R as RatingVariant } from './OrRating-7c968949.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-4069d595.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-71fb65c1.js';
@@ -120,8 +120,8 @@ export { _ as OrSkeletonCircleV3 } from './OrSkeletonCircle-88272bb7.js';
 export { _ as OrSkeletonRectV3 } from './OrSkeletonRect-c38eb161.js';
 export { _ as OrSkeletonTextV3 } from './OrSkeletonText-b6e51e70.js';
 export { _ as OrSlider } from './OrSlider-baad996a.js';
-export { _ as OrSliderV3 } from './OrSlider-3d8de563.js';
-export { S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-d5250220.js';
+export { _ as OrSliderV3 } from './OrSlider-6a373c9b.js';
+export { S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-b29efe08.js';
 export { _ as OrSortingV3 } from './OrSorting-f71ae3b3.js';
 export { _ as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-9a6a42fa.js';
 export { _ as OrStepper } from './OrStepper-582cd0d4.js';
@@ -140,7 +140,7 @@ export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-424c7f33.js';
 export { _ as OrTextV3 } from './OrText-cab6adea.js';
 export { _ as OrTextarea } from './OrTextarea-62ad6213.js';
-export { _ as OrTextareaV3 } from './OrTextarea-899e5220.js';
+export { _ as OrTextareaV3 } from './OrTextarea-ef4fd48a.js';
 export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-45f6d684.js';
 export { _ as OrTimeFormatV3 } from './OrTimeFormat-d43b747d.js';
 export { _ as OrTimePickerV3 } from './OrTimePicker-3707cf6e.js';

package/dist/esm/v3/{OrRangeSlider-c1ed0ba5.js → OrRangeSlider-2bcd90ef.js}

@@ -5,7 +5,7 @@ import './dom-53c9635b.js';
 import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider-5c665987.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider-45bd13d5.js';
 import { s as script$1 } from './OrTooltip-de856939.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
 
@@ -294,8 +294,7 @@ var script = defineComponent({
     const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
-    const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color], 'touch-none' // Required for proper work on mobile
-    ]);
+    const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...RangeSliderBreakpointMark, ...RangeSliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
     const labelMarkStyles = computed(() => [...RangeSliderLabelMark, ...RangeSliderLabelMarkOrientations[props.orientation]]);

package/dist/esm/v3/{OrSlider-5c665987.js → OrSlider-45bd13d5.js}

@@ -272,8 +272,7 @@ var script = defineComponent({
       }
     });
     const thumb = ref();
-    const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color], 'touch-none' // Required for proper work on mobile
-    ]);
+    const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
     const labelMarkStyles = computed(() => [...SliderLabelMark, ...SliderLabelMarkOrientations[props.orientation]]);

package/dist/esm/v3/{OrTextarea-76c037a9.js → OrTextarea-f9cbc1c3.js}

@@ -3,6 +3,7 @@ import { defineComponent, reactive, ref, computed, toRef } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-3a339b79.js';
 import './TimeFormat-a7f5565b.js';
 import './dom-53c9635b.js';
+import { i as isObject } from './isObject-4d5300e9.js';
 import { u as useProxyModelValue } from './useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
@@ -20,8 +21,6 @@ const Textarea = [
 // Spacing
 'gap-xs'];
 const TextareaControl = [
-// Interactivity
-'resize-none',
 // Box
 'w-full',
 // Typography
@@ -31,10 +30,10 @@ const TextareaControl = [
 const TextareaControlSizes = {
   [InputBoxSize.M]: [
   // Spacing
-  'pt-sm+* md:pt-sm*'],
+  '!mx-0', 'px-md md:px-sm+', 'py-sm+* md:py-sm*'],
   [InputBoxSize.S]: [
   // Spacing
-  'pt-sm*']
+  '!mx-0', 'px-md md:px-sm+', 'py-sm*']
 };
 
 var script = defineComponent({
@@ -70,9 +69,9 @@ var script = defineComponent({
       type: String,
       default: () => InputBoxSize.M
     },
-    maxHeight: {
-      type: String,
-      default: undefined
+    rows: {
+      type: [Number, Object],
+      default: 2
     },
     label: {
       type: String,
@@ -115,7 +114,19 @@ var script = defineComponent({
     const root = ref();
     const rootStyles = computed(() => ['or-textarea-v3', ...Textarea, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const control = ref();
-    const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size]]);
+    const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size], ...(isObject(props.rows) ? ['resize-none'] : [])]);
+    const controlInlineStyles = computed(() => {
+      if (control.value) {
+        const paddingTop = Number(getComputedStyle(control.value).getPropertyValue('padding-top').match(/^(?<value>\d+)px$/).groups.value);
+        const paddingBottom = Number(getComputedStyle(control.value).getPropertyValue('padding-bottom').match(/^(?<value>\d+)px$/).groups.value);
+        const lineHeight = Number(getComputedStyle(control.value).getPropertyValue('line-height').match(/^(?<value>\d+)px$/).groups.value);
+        return {
+          minHeight: `${paddingTop + paddingBottom + (isObject(props.rows) ? props.rows.min : props.rows) * lineHeight}px`,
+          maxHeight: isObject(props.rows) && props.rows.max ? `${paddingTop + paddingBottom + props.rows.max * lineHeight}px` : undefined
+        };
+      }
+      return {};
+    });
     // State
     const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: ref('')
@@ -137,16 +148,21 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // Effects
-    useTextareaAutosize({
-      element: control,
-      input: model
-    });
+    if (isObject(props.rows)) {
+      // Unluckily, `useTextareaAutosize` doesn't have a teardown function
+      // So, dynamically changed `rows` won't have any effect
+      useTextareaAutosize({
+        element: control,
+        input: model
+      });
+    }
     return {
       attributes,
       root,
       rootStyles,
       control,
       controlStyles,
+      controlInlineStyles,
       model,
       length,
       maxLength,
@@ -156,7 +172,7 @@ var script = defineComponent({
   }
 });
 
-const _hoisted_1 = ["name", "autocomplete", "placeholder", "required", "readonly", "disabled"];
+const _hoisted_1 = ["name", "rows", "autocomplete", "placeholder", "required", "readonly", "disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrInputBox = resolveComponent("OrInputBox");
@@ -187,10 +203,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, _ctx.attributes, {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.model = $event),
       class: _ctx.controlStyles,
-      style: {
-        maxHeight: _ctx.maxHeight
-      },
+      style: _ctx.controlInlineStyles,
       name: _ctx.name,
+      rows: _ctx.rows,
       autocomplete: _ctx.autocomplete,
       placeholder: _ctx.placeholder,
       required: _ctx.required,

package/dist/esm/v3/components/index.js

@@ -97,7 +97,7 @@ export { s as OrRadio } from '../OrRadio-8506e7d9.js';
 export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from '../OrRadioGroup-1a0fe40f.js';
 export { s as OrRadioV3 } from '../OrRadio-8677bac3.js';
-export { s as OrRangeSliderV3 } from '../OrRangeSlider-c1ed0ba5.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSlider-2bcd90ef.js';
 export { s as OrRatingV3, R as RatingVariant } from '../OrRating-7c2f8e4d.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../OrResizeablePanel-1d0c171b.js';
 export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-f1d7597b.js';
@@ -117,7 +117,7 @@ export { s as OrSkeletonCircleV3 } from '../OrSkeletonCircle-a3eb5f53.js';
 export { s as OrSkeletonRectV3 } from '../OrSkeletonRect-d0b8b2cf.js';
 export { s as OrSkeletonTextV3 } from '../OrSkeletonText-5e9579c1.js';
 export { s as OrSlider } from '../OrSlider-d6f94501.js';
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSlider-5c665987.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSlider-45bd13d5.js';
 export { s as OrSortingV3 } from '../OrSorting-9744f44c.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from '../OrStatus-29df22e1.js';
 export { s as OrStepper } from '../OrStepper-8722709f.js';
@@ -136,7 +136,7 @@ export { s as OrTeleport } from '../OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from '../OrText-ea114c19.js';
 export { s as OrTextarea } from '../OrTextarea-b16e1a72.js';
-export { s as OrTextareaV3 } from '../OrTextarea-76c037a9.js';
+export { s as OrTextareaV3 } from '../OrTextarea-f9cbc1c3.js';
 export { s as OrTextbox, T as TextboxTypes } from '../OrTextbox-20cc3bac.js';
 export { s as OrTimeFormatV3 } from '../OrTimeFormat-bdce02db.js';
 export { s as OrTimePickerV3 } from '../OrTimePicker-d17e6f65.js';

package/dist/esm/v3/components/or-range-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrRangeSliderV3 } from '../../OrRangeSlider-c1ed0ba5.js';
+export { s as OrRangeSliderV3 } from '../../OrRangeSlider-2bcd90ef.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';
@@ -8,7 +8,7 @@ import 'lodash/isElement';
 import '../../useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrSlider-5c665987.js';
+import '../../OrSlider-45bd13d5.js';
 import '../../OrTooltip-de856939.js';
 import '../../usePopoverState-7267fa91.js';
 import '../../OrPopover-0daeba14.js';

package/dist/esm/v3/components/or-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../../OrSlider-5c665987.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../../OrSlider-45bd13d5.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../TimeFormat-a7f5565b.js';

package/dist/esm/v3/components/or-textarea-v3/OrTextarea.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { InputBoxSize } from '../or-input-box-v3';
-import { TextareaModelValue } from './types';
+import { TextareaModelValue, TextareaRows } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<TextareaModelValue>;
@@ -22,9 +22,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"m" | "s">;
         default: () => InputBoxSize;
     };
-    maxHeight: {
-        type: StringConstructor;
-        default: undefined;
+    rows: {
+        type: PropType<TextareaRows>;
+        default: number;
     };
     label: {
         type: StringConstructor;
@@ -72,6 +72,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     control: import("vue-demi").Ref<HTMLTextAreaElement | undefined>;
     controlStyles: import("vue-demi").ComputedRef<string[]>;
+    controlInlineStyles: import("vue-demi").ComputedRef<{
+        minHeight: string;
+        maxHeight: string | undefined;
+    } | {
+        minHeight?: undefined;
+        maxHeight?: undefined;
+    }>;
     model: import("../../hooks").UseProxyModelValueReturn<string>;
     length: import("vue-demi").ComputedRef<number>;
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
@@ -98,9 +105,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"m" | "s">;
         default: () => InputBoxSize;
     };
-    maxHeight: {
-        type: StringConstructor;
-        default: undefined;
+    rows: {
+        type: PropType<TextareaRows>;
+        default: number;
     };
     label: {
         type: StringConstructor;
@@ -143,7 +150,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     autocomplete: string;
     variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
-    maxHeight: string;
+    rows: TextareaRows;
     label: string;
     placeholder: string;
     hint: string;

package/dist/esm/v3/components/or-textarea-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTextareaV3 } from '../../OrTextarea-76c037a9.js';
+export { s as OrTextareaV3 } from '../../OrTextarea-f9cbc1c3.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../useIdAttribute-3a339b79.js';
@@ -6,6 +6,7 @@ import '../../TimeFormat-a7f5565b.js';
 import '../../dom-53c9635b.js';
 import 'lodash/get';
 import 'lodash/isElement';
+import '../../isObject-4d5300e9.js';
 import '../../useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';

package/dist/esm/v3/components/or-textarea-v3/types.d.ts

@@ -1,2 +1,6 @@
 import { ModelValue } from '../../types';
 export type TextareaModelValue = ModelValue<string>;
+export type TextareaRows = number | {
+    min: number;
+    max?: number;
+};

package/dist/esm/v3/index.js

@@ -97,7 +97,7 @@ export { s as OrRadio } from './OrRadio-8506e7d9.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-1a0fe40f.js';
 export { s as OrRadioV3 } from './OrRadio-8677bac3.js';
-export { s as OrRangeSliderV3 } from './OrRangeSlider-c1ed0ba5.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider-2bcd90ef.js';
 export { s as OrRatingV3, R as RatingVariant } from './OrRating-7c2f8e4d.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-1d0c171b.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-f1d7597b.js';
@@ -117,7 +117,7 @@ export { s as OrSkeletonCircleV3 } from './OrSkeletonCircle-a3eb5f53.js';
 export { s as OrSkeletonRectV3 } from './OrSkeletonRect-d0b8b2cf.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-5e9579c1.js';
 export { s as OrSlider } from './OrSlider-d6f94501.js';
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from './OrSlider-5c665987.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from './OrSlider-45bd13d5.js';
 export { s as OrSortingV3 } from './OrSorting-9744f44c.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-29df22e1.js';
 export { s as OrStepper } from './OrStepper-8722709f.js';
@@ -136,7 +136,7 @@ export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ea114c19.js';
 export { s as OrTextarea } from './OrTextarea-b16e1a72.js';
-export { s as OrTextareaV3 } from './OrTextarea-76c037a9.js';
+export { s as OrTextareaV3 } from './OrTextarea-f9cbc1c3.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-20cc3bac.js';
 export { s as OrTimeFormatV3 } from './OrTimeFormat-bdce02db.js';
 export { s as OrTimePickerV3 } from './OrTimePicker-d17e6f65.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "13.2.3-beta.4661.0",
+  "version": "13.2.3-beta.4665.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -255,7 +255,6 @@ export default defineComponent({
       'or-range-slider-thumb-v3',
       ...Styles.RangeSliderThumb,
       ...Styles.RangeSliderThumbColors[props.color],
-      'touch-none', // Required for proper work on mobile
     ]);
 
     const breakpointMarkStyles = computed(() => [