@onereach/ui-components 2.72.0-beta.2234.0 → 2.72.0

package/dist/esm/v3/{OrLink-338db3ca.js → OrLink-07f6f27d.js}

@@ -1,7 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { openBlock, createElementBlock, mergeProps, Fragment, createTextVNode, toDisplayString, renderSlot } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, renderSlot } from 'vue';
 
 var LinkColor;
 (function (LinkColor) {
@@ -39,7 +37,6 @@ const LinkRootColors = {
 
 var script = defineComponent({
   name: 'OrLink',
-  inheritAttrs: false,
   props: {
     href: {
       type: String,
@@ -71,8 +68,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-link', ...LinkRoot, ...LinkRootColors[`${props.color}`], props.loading && 'interactivity-none', props.underlined && 'underline hover:no-underline', classAttribute.value]);
+    const rootStyles = computed(() => ['or-link', ...LinkRoot, ...LinkRootColors[`${props.color}`], props.loading && 'interactivity-none', props.underlined && 'underline hover:no-underline']);
     return {
       root,
       rootStyles
@@ -82,17 +78,16 @@ var script = defineComponent({
 
 const _hoisted_1 = ["href", "disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("a", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles,
+  return openBlock(), createElementBlock("a", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
     href: _ctx.href,
     disabled: _ctx.disabled ? '' : null
-  }), [_ctx.loading ? (openBlock(), createElementBlock(Fragment, {
+  }, [_ctx.loading ? (openBlock(), createElementBlock(Fragment, {
     key: 0
   }, [createTextVNode(toDisplayString(_ctx.loadingText + '…'), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : renderSlot(_ctx.$slots, "default", {
     key: 1
-  })], 16 /* FULL_PROPS */, _hoisted_1);
+  })], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/esm/v3/{OrListOfInputs-7a67440f.js → OrListOfInputs-508e056f.js}

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue-demi';
 import _ from 'lodash';
 import { s as script$1 } from './OrList-b740d13e.js';
-import { a as script$2 } from './OrSearch-7cb2c91c.js';
+import { s as script$2 } from './OrInput-81125804.js';
 import { s as script$3 } from './OrIcon-669503c3.js';
 import { a as script$4 } from './OrIconButton-8be9c89f.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode, mergeProps, createSlots, normalizeStyle } from 'vue';

package/dist/esm/v3/{OrLoader-b3cf4231.js → OrLoader-a53d2edf.js}

@@ -1,7 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { openBlock, createElementBlock, mergeProps, normalizeClass, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
 
 var LoaderVariant;
 (function (LoaderVariant) {
@@ -38,7 +36,6 @@ const LoaderDescription = ['typography-body-2-regular', 'text-center', 'text-out
 
 var script = defineComponent({
   name: 'OrLoader',
-  inheritAttrs: false,
   props: {
     variant: {
       type: String,
@@ -66,8 +63,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-loader', ...LoaderRoot, ...LoaderRootColors[props.color], classAttribute.value]);
+    const rootStyles = computed(() => ['or-loader', ...LoaderRoot, ...LoaderRootColors[props.color]]);
     const titleStyles = computed(() => [...LoaderTitle]);
     const descriptionStyles = computed(() => [...LoaderDescription]);
     const containerStyles = computed(() => [...LoaderContainer]);
@@ -117,11 +113,10 @@ const _hoisted_6 = /*#__PURE__*/createElementVNode("line", {
 }, null, -1 /* HOISTED */);
 const _hoisted_7 = ["stroke"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [_ctx.title ? (openBlock(), createElementBlock("div", {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.title ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.titleStyles)
   }, toDisplayString(_ctx.title), 3 /* TEXT, CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
@@ -147,7 +142,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8 /* PROPS */, _hoisted_7)])])) : createCommentVNode("v-if", true)], 2 /* CLASS */), _ctx.description ? (openBlock(), createElementBlock("div", {
     key: 1,
     class: normalizeClass(_ctx.descriptionStyles)
-  }, toDisplayString(_ctx.description), 3 /* TEXT, CLASS */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
+  }, toDisplayString(_ctx.description), 3 /* TEXT, CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
 script.render = render;

package/dist/esm/v3/{OrMenu-840038cd.js → OrMenu-7f3ea117.js}

@@ -1,8 +1,6 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { s as script$1, P as PopoverPlacement } from './OrPopover-1075dd38.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, createElementVNode, normalizeClass, withModifiers, renderSlot } from 'vue';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-40217b49.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, withModifiers, renderSlot } from 'vue';
 
 const MenuRoot = [
 // Layout
@@ -18,7 +16,6 @@ var script = defineComponent({
   components: {
     OrPopover: script$1
   },
-  inheritAttrs: false,
   props: {
     trigger: {
       type: HTMLElement,
@@ -44,8 +41,7 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isOpen;
     });
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-menu', ...MenuRoot, classAttribute.value]);
+    const rootStyles = computed(() => ['or-menu', ...MenuRoot]);
     const bodyStyles = computed(() => [...MenuBody]);
     // Methods
     function open() {
@@ -92,11 +88,10 @@ var script = defineComponent({
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrPopover = resolveComponent("OrPopover");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createVNode(_component_OrPopover, {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createVNode(_component_OrPopover, {
     ref: "popover",
     variant: 'auto',
     trigger: _ctx.trigger,
@@ -111,7 +106,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)]),
 
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["trigger", "placement"])], 16 /* FULL_PROPS */);
+  }, 8 /* PROPS */, ["trigger", "placement"])], 2 /* CLASS */);
 }
 
 script.render = render;

package/dist/esm/v3/{OrMenuItem-9da279f6.js → OrMenuItem-58707d47.js}

@@ -1,8 +1,6 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { s as script$1 } from './OrIcon-b195169c.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createBlock, normalizeProps, createCommentVNode, createElementVNode, renderSlot, normalizeClass } from 'vue';
+import { s as script$1 } from './OrIcon-34f59f73.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, normalizeProps, mergeProps, createCommentVNode, createElementVNode, renderSlot } from 'vue';
 
 const MenuItemRoot = [
 // Layout
@@ -25,7 +23,6 @@ var script = defineComponent({
   components: {
     OrIcon: script$1
   },
-  inheritAttrs: false,
   props: {
     icon: {
       type: [String, Object],
@@ -46,8 +43,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-menu-item', ...MenuItemRoot, classAttribute.value]);
+    const rootStyles = computed(() => ['or-menu-item', ...MenuItemRoot]);
     return {
       root,
       rootStyles
@@ -61,21 +57,20 @@ const _hoisted_2 = {
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles,
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
     tabindex: !_ctx.disabled ? 0 : null,
     selected: _ctx.selected ? '' : null,
     disabled: _ctx.disabled ? '' : null,
     onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event)),
     onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
-  }), [_ctx.icon ? (openBlock(), createBlock(_component_OrIcon, normalizeProps(mergeProps({
+  }, [_ctx.icon ? (openBlock(), createBlock(_component_OrIcon, normalizeProps(mergeProps({
     key: 0
   }, typeof _ctx.icon === 'string' ? {
     icon: _ctx.icon
-  } : _ctx.icon)), null, 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16 /* FULL_PROPS */, _hoisted_1);
+  } : _ctx.icon)), null, 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/esm/v3/{OrModal-7878cc39.js → OrModal-4219a6dc.js}

@@ -1,8 +1,6 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { s as script$2 } from './OrIconButton-1a89fbf9.js';
-import { s as script$1 } from './OrOverlay-738a44d5.js';
+import { s as script$2 } from './OrIconButton-2dcfb83e.js';
+import { s as script$1 } from './OrOverlay-afad3aa4.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 var ModalSize;
@@ -67,8 +65,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-modal', ...ModalRoot, ...ModalRootSizes[props.size], classAttribute.value]);
+    const rootStyles = computed(() => ['or-modal', ...ModalRoot, ...ModalRootSizes[props.size]]);
     const headerStyles = computed(() => [...ModalHeader]);
     // State
     const isActive = ref(false);

package/dist/esm/v3/{OrNotification-e1383681.js → OrNotification-0e682c7f.js}

@@ -1,9 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { s as script$2 } from './OrIconButton-1a89fbf9.js';
-import { s as script$1 } from './OrIcon-b195169c.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createVNode, renderSlot, withModifiers } from 'vue';
+import { s as script$2 } from './OrIconButton-2dcfb83e.js';
+import { s as script$1 } from './OrIcon-34f59f73.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, withModifiers } from 'vue';
 
 var NotificationVariant;
 (function (NotificationVariant) {
@@ -72,7 +70,6 @@ var script = defineComponent({
     OrIcon: script$1,
     OrIconButton: script$2
   },
-  inheritAttrs: false,
   props: {
     variant: {
       type: String,
@@ -84,8 +81,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant], classAttribute.value]);
+    const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant]]);
     const iconStyles = computed(() => [...NotificationIcon, ...NotificationIconVariants[props.variant]]);
     // State
     const icon = computed(() => {
@@ -115,11 +111,10 @@ const _hoisted_1 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   const _component_OrIconButton = resolveComponent("OrIconButton");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createElementVNode("div", {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createElementVNode("div", {
     class: normalizeClass(_ctx.iconStyles)
   }, [createVNode(_component_OrIcon, {
     icon: _ctx.icon,
@@ -128,7 +123,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     icon: 'close',
     size: 'm',
     onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('close'), ["stop"]))
-  })], 16 /* FULL_PROPS */);
+  })], 2 /* CLASS */);
 }
 
 script.render = render;

package/dist/esm/v3/{OrNotification-eb08de33.js → OrNotification-e85a4956.js}

@@ -104,7 +104,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
-var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-2a8b1558 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2a8b1558 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-notification[data-v-2a8b1558] {\n  /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */\n  --alignment-height: var(--lh-1);\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  padding: var(--s-4);\n  background-color: var(--c-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 0.0625rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.08);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color;\n}\n.or-notification.is-size-default[data-v-2a8b1558] {\n  max-width: 48rem;\n}\n.or-notification.is-size-inline[data-v-2a8b1558] {\n  max-width: 27.875rem;\n}\n.or-notification a[data-v-2a8b1558] {\n  font-weight: var(--fw-2);\n  color: var(--c-black);\n}\n.or-notification--icon[data-v-2a8b1558] {\n  display: flex;\n  align-items: center;\n  min-height: var(--alignment-height);\n  margin-right: var(--s-4);\n}\n.or-notification--icon[data-v-2a8b1558] .or-icon {\n  font-size: 1rem;\n}\n.or-notification--content[data-v-2a8b1558] {\n  flex: 1 1 100%;\n  word-break: break-word;\n}\n.or-notification--close[data-v-2a8b1558] {\n  display: flex;\n  height: var(--alignment-height);\n  margin-left: 1rem;\n}\n.or-notification--close[data-v-2a8b1558] .or-icon {\n  font-size: 1rem !important;\n}\n.or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-lighten-45);\n}\n.or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-primary);\n}\n.or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-lighten-45);\n}\n.or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-error);\n}\n.or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-lighten-45);\n}\n.or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-warning);\n}\n.or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-lighten-45);\n}\n.or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-success);\n}\n[data-theme=dark] .or-notification .or-icon[data-v-2a8b1558] {\n  color: var(--c-neutral-1);\n}\n[data-theme=dark] .or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-darken-45);\n  color: var(--c-neutral-6);\n}\n[data-theme=dark] .or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-neutral-6);\n}";
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-2a8b1558 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2a8b1558 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-notification[data-v-2a8b1558] {\n  /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */\n  --alignment-height: var(--lh-1);\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  padding: var(--s-4);\n  background-color: var(--c-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 0.0625rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.08);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color;\n}\n.or-notification.is-size-default[data-v-2a8b1558] {\n  max-width: 48rem;\n}\n.or-notification.is-size-inline[data-v-2a8b1558] {\n  max-width: 27.875rem;\n}\n.or-notification a[data-v-2a8b1558] {\n  font-weight: var(--fw-2);\n  color: var(--c-black);\n}\n.or-notification--icon[data-v-2a8b1558] {\n  display: flex;\n  align-items: center;\n  min-height: var(--alignment-height);\n  margin-right: var(--s-4);\n}\n.or-notification--icon[data-v-2a8b1558] .or-icon {\n  font-size: 1rem;\n}\n.or-notification--content[data-v-2a8b1558] {\n  flex: 1 1 100%;\n  word-break: break-word;\n}\n.or-notification--close[data-v-2a8b1558] {\n  display: flex;\n  height: var(--alignment-height);\n  margin-left: 1rem;\n}\n.or-notification--close[data-v-2a8b1558] .or-icon {\n  font-size: 1rem !important;\n}\n.or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-lighten-45);\n}\n.or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-primary);\n}\n.or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-lighten-45);\n}\n.or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-error);\n}\n.or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-lighten-45);\n}\n.or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-warning);\n}\n.or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-lighten-45);\n}\n.or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-success);\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/OrNumberInput-b32b5ce3.js

@@ -0,0 +1,170 @@
+import { defineComponent, ref } from 'vue-demi';
+import { s as script$1 } from './OrInput-81125804.js';
+import { resolveComponent, openBlock, createBlock, createSlots, withCtx, renderSlot } from 'vue';
+
+var script = defineComponent({
+  name: 'OrNumberInput',
+  components: {
+    OrInput: script$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    htmlId: {
+      type: String,
+      default: '',
+      required: false
+    },
+    placeholder: {
+      type: String,
+      default: '',
+      required: false
+    },
+    label: {
+      type: String,
+      default: '',
+      required: false
+    },
+    error: {
+      type: String,
+      default: '',
+      required: false
+    },
+    hint: {
+      type: String,
+      default: '',
+      required: false
+    },
+    minValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    maxValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    stepValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    isSmall: Boolean,
+    isRequired: Boolean,
+    isDisabled: Boolean,
+    isReadonly: Boolean,
+    isInvalid: Boolean
+  },
+  emits: ['focus', 'blur', 'update:modelValue', 'input', 'keypress', 'keyup', 'keydown'],
+  setup(props, {
+    emit
+  }) {
+    const inputRef = ref();
+    if (props.modelValue) {
+      if (props.minValue !== undefined && props.modelValue < props.minValue) {
+        emit('update:modelValue', props.minValue);
+      } else if (props.maxValue !== undefined && props.modelValue > props.maxValue) {
+        emit('update:modelValue', props.maxValue);
+      }
+    }
+    return {
+      inputRef
+    };
+  },
+  computed: {
+    htmlInputAttrs() {
+      return {
+        min: this.minValue,
+        max: this.maxValue,
+        step: this.stepValue
+      };
+    },
+    localValue: {
+      get() {
+        var _a;
+        return ((_a = this.modelValue) !== null && _a !== void 0 ? _a : '') + '';
+      },
+      set(val) {
+        if (val === undefined || val === '') {
+          this.$emit('update:modelValue', undefined);
+          return;
+        }
+        const numVal = +val;
+        if (this.minValue !== undefined && numVal < this.minValue) {
+          this.$emit('update:modelValue', this.minValue);
+        } else if (this.maxValue !== undefined && numVal > this.maxValue) {
+          this.$emit('update:modelValue', this.maxValue);
+        } else {
+          this.$emit('update:modelValue', numVal);
+        }
+      }
+    }
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_input = resolveComponent("or-input");
+  return openBlock(), createBlock(_component_or_input, {
+    ref: "inputRef",
+    modelValue: _ctx.localValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.localValue = $event),
+    class: "or-password",
+    "html-id": _ctx.htmlId,
+    placeholder: _ctx.placeholder,
+    "html-type": "number",
+    "html-input-attrs": _ctx.htmlInputAttrs,
+    label: _ctx.label,
+    error: _ctx.error,
+    hint: _ctx.hint,
+    "is-small": _ctx.isSmall,
+    "is-required": _ctx.isRequired,
+    "is-disabled": _ctx.isDisabled,
+    "is-readonly": _ctx.isReadonly,
+    "is-invalid": _ctx.isInvalid,
+    onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
+    onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event)),
+    onInput: _cache[3] || (_cache[3] = $event => _ctx.$emit('input', $event)),
+    onKeypress: _cache[4] || (_cache[4] = $event => _ctx.$emit('keypress', $event)),
+    onKeyup: _cache[5] || (_cache[5] = $event => _ctx.$emit('keyup', $event)),
+    onKeydown: _cache[6] || (_cache[6] = $event => _ctx.$emit('keydown', $event))
+  }, createSlots({
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots.prepend ? {
+    name: "prepend",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+    key: "0"
+  } : undefined, _ctx.$slots['label-default'] ? {
+    name: "label-default",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "label-default")]),
+    key: "1"
+  } : undefined, _ctx.$slots['label-append'] ? {
+    name: "label-append",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "label-append")]),
+    key: "2"
+  } : undefined, _ctx.$slots['wrapper-end'] ? {
+    name: "wrapper-end",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "wrapper-end")]),
+    key: "3"
+  } : undefined, _ctx.$slots['input-end'] ? {
+    name: "input-end",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "input-end")]),
+    key: "4"
+  } : undefined, _ctx.$slots.append ? {
+    name: "append",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+    key: "5"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "html-id", "placeholder", "html-input-attrs", "label", "error", "hint", "is-small", "is-required", "is-disabled", "is-readonly", "is-invalid"]);
+}
+
+script.render = render;
+script.__file = "src/components/or-number-input/OrNumberInput.vue";
+
+export { script as s };

package/dist/esm/v3/{OrOverlay-738a44d5.js → OrOverlay-afad3aa4.js}

@@ -1,6 +1,5 @@
 import { useScrollLock } from '@vueuse/core';
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useElevation } from './useElevation-31bfe1f6.js';
 import { s as script$1 } from './OrTeleport.vue3-8099178c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, renderSlot } from 'vue';
@@ -30,8 +29,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-overlay', ...OverlayRoot, classAttribute.value]);
+    const rootStyles = computed(() => ['or-overlay', ...OverlayRoot]);
     // Effects
     // #region Elevation
     useElevation(root);

package/dist/esm/v3/{OrPagination-a703307d.js → OrPagination-da9e5017.js}

@@ -1,12 +1,10 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { s as script$1 } from './OrButton-0fa67a0d.js';
-import { s as script$2 } from './OrIcon-b195169c.js';
-import { s as script$4 } from './OrMenuItem-9da279f6.js';
-import { s as script$3 } from './OrMenu-840038cd.js';
-import './OrPopover-1075dd38.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from 'vue';
+import { s as script$1 } from './OrButton-c56998e7.js';
+import { s as script$2 } from './OrIcon-34f59f73.js';
+import { s as script$4 } from './OrMenuItem-58707d47.js';
+import { s as script$3 } from './OrMenu-7f3ea117.js';
+import './OrPopover-40217b49.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from 'vue';
 
 const PaginationRoot = [
 // Layout
@@ -41,16 +39,15 @@ var script = defineComponent({
     OrMenu: script$3,
     OrMenuItem: script$4
   },
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
     modelValue: {
       type: Object,
       default: undefined
     },
-    value: {
-      type: Object,
-      default: undefined
-    },
     length: {
       type: Number,
       required: true
@@ -60,7 +57,7 @@ var script = defineComponent({
       default: () => [50, 20, 10, 5]
     }
   },
-  emits: ['update:modelValue', 'input'],
+  emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
     // Refs
@@ -76,20 +73,14 @@ var script = defineComponent({
       return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-pagination', ...PaginationRoot, classAttribute.value]);
+    const rootStyles = computed(() => ['or-pagination', ...PaginationRoot]);
     const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
     const limitControlStyles = computed(() => [...PaginationLimitControl]);
     const itemStyles = computed(() => [...PaginationItem]);
     // State
     const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
-      },
-
+      get: () => props.modelValue,
       set: value => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       }
     });
@@ -118,9 +109,7 @@ var script = defineComponent({
       }
     });
     const currentPage = computed({
-      get: () => {
-        return Math.floor(currentOffset.value / currentLimit.value) + 1;
-      },
+      get: () => Math.floor(currentOffset.value / currentLimit.value) + 1,
       set: value => {
         currentOffset.value = (value - 1) * currentLimit.value;
       }
@@ -149,7 +138,7 @@ var script = defineComponent({
         return [...accumulator, page];
       }, []);
     });
-    // Functions
+    // Methods
     function toPreviousPage() {
       currentPage.value = currentPage.value - 1;
     }
@@ -188,11 +177,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrButton = resolveComponent("OrButton");
   const _component_OrMenuItem = resolveComponent("OrMenuItem");
   const _component_OrMenu = resolveComponent("OrMenu");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createElementVNode("div", {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createElementVNode("div", {
     class: normalizeClass(_ctx.offsetControlStyles)
   }, [createVNode(_component_OrButton, {
     class: normalizeClass(_ctx.itemStyles),
@@ -260,7 +248,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128 /* KEYED_FRAGMENT */))]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])], 2 /* CLASS */)], 16 /* FULL_PROPS */);
+  }, 8 /* PROPS */, ["trigger"])], 2 /* CLASS */)], 2 /* CLASS */);
 }
 
 script.render = render;